สำหรับนกั เรยี น ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พตั ราภักด์ิ ตาแหน่ง ครู วทิ ยฐานะ ครชู านาญการ โรงเรยี นชมุ พลวิทยาสรรค์ อาเภอชุมพลบรุ ี จังหวัดสุรินทร์ สานักงานเขตพนื้ ทกี่ ารศกึ ษามธั ยมศึกษา เขต 33
ก ชุดกจิ กรรมการเรียนรู้แบบรว่ มมือ เรื่อง การสร้างงานแอนิเมชันดว้ ย Flash CS6 คานา ชุดกจิ กรรมการเรยี นรู้แบบร่วมมือ เรือ่ ง การสร้างงานแอนิเมชนั ดว้ ย Flash CS6 รายวชิ าการสร้าง ภาพเคล่ือนไหว สาหรับนกั เรยี นช้นั มธั ยมศึกษาปีที่ 3 กลมุ่ สาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ได้จดั ทา ข้นึ เพ่ือใหก้ ารจดั กจิ กรรมการเรยี นรูเ้ ป็นไปตามลาดับข้ันตอนและบรรลุวัตถปุ ระสงค์ ตลอดจนพฒั นาผเู้ รยี นใหม้ ี ความรูค้ วามเข้าใจ เรอ่ื ง การสรา้ งงานแอนิเมชนั Flash CS6 นอกจากนชี้ ดุ กิจกรรมยังสง่ เสรมิ ใหผ้ ู้เรยี นไดฝ้ ึก ทกั ษะการอ่าน คดิ วิเคราะห์ และเขยี นส่ือความหมายถือเปน็ ทักษะและกระบวนการเรยี นรู้ที่สาคัญยิ่งทมี่ ผี ลตอ่ การพฒั นา โดยเฉพาะการคดิ ทถ่ี ือวา่ เป็นหัวใจสาคญั ของการพฒั นา ตลอดจนเปน็ ชุดกิจกรรมการเรียนรูท้ ี่ม่งุ เนน้ ให้ผูเ้ รียนปฏิบตั กิ ิจกรรมเปน็ กลมุ่ ร่วมกนั สมาชกิ ช่วยการศึกษาค้นหาคาตอบ และสรปุ หาคาตอบร่วมกันอย่าง สมเหตุสมผล สง่ เสรมิ ให้ผู้เรยี นมคี วามซอ่ื สัตย์ รับผดิ ชอบ สามัคคี เออ้ื เฟือ้ เผื่อแผ่ในหมู่คณะ ยอมรับฟังความ คิดเหน็ ของผู้อื่น เสริมสร้างวนิ ยั และประชาธิปไตยในระบบกลมุ่ ท่สี าคัญผเู้ รียนได้รบั ความสนกุ สนานเพลดิ เพลนิ ในการเรยี นจนกอ่ ให้เกดิ เจตคติที่ดีตอ่ การเรยี นรูใ้ นรายวชิ าการสร้างภาพเคลอื่ นไหว และสง่ ผลให้มีผลสมั ฤทธ์ิ ทางการเรยี นท่ดี ียง่ิ ขน้ึ ต่อไป ทง้ั นเี้ พราะว่าชุดกจิ กรรมการเรยี นรูเ้ ปน็ นวตั กรรมและเทคโนโลยีทางการเรียนรู้ อยา่ งหนึ่งในปจั จุบันทมี่ ีสว่ นชว่ ยในการจัดกิจกรรมการเรยี นรู้บรรลสุ ู่เป้าหมาย ขอขอบพระคณุ ผู้อานวยการโรงเรียนชุมพลวทิ ยาสรรค์ และเพือ่ นครทู ุกทา่ นที่ให้กาลงั ใจ ใหค้ าแนะนาการจดั ทาชุดกิจกรรมการเรียนรู้แบบรว่ มมือ การสรา้ งงานแอนิเมชันดว้ ย Flash CS6 จนสาเร็จ และสมบูรณเ์ ปน็ อยา่ งดี หวงั เปน็ อย่างยิง่ วา่ ชดุ กิจกรรมการเรยี นรู้นจี้ ะเปน็ ประโยชนก์ บั นกั เรียน ธนพร พัตราภกั ด์ิ ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ด์ิ ครู โรงเรยี นชมุ พลวิทยาสรรค์
ข ชดุ กิจกรรมการเรยี นรู้แบบรว่ มมอื เรือ่ ง การสร้างงานแอนิเมชันดว้ ย Flash CS6 สารบญั หนา้ เรื่อง ก ข คานา 1 สารบัญ 4 คาแนะนาการใชช้ ุดกิจกรรมการเรียนรูแ้ บบร่วมมอื 4 ผลการเรียนรู้ 4 สาระสาคัญ 5 สาระการเรยี นรู้ 6 จุดประสงค์การเรยี นรู้ 9 แบบทดสอบกอ่ นเรยี น 10 บัตรคาส่งั 13 ใบความรทู้ ่ี 2.1 เร่อื ง รู้จกั กับชนิดของภาพกราฟกิ 15 กิจกรรมการเรียนรู้ท่ี 2.1 16 ใบความรู้ท่ี 2.2 เรื่อง การใชเ้ ครื่องมอื ในการวาดภาพ 17 กิจกรรมการเรียนรู้ท่ี 2.2 20 ใบความร้ทู ่ี 2.3 เร่อื ง การใชเ้ ครื่องมือปรบั แตง่ รูปทรงที่วาด 21 กิจกรรมการเรียนรู้ที่ 2.3 25 ใบความรู้ท่ี 2.4 เร่อื ง การใช้สี 26 กิจกรรมการเรียนรูท้ ่ี 2.4 28 แบบทดสอบหลงั เรยี น 29 บรรณานกุ รม 30 ภาคผนวก 31 32 แบบบนั ทึกคะแนนชดุ กจิ กรรมการเรียนรแู้ บบร่วมมือ 33 เฉลย กจิ กรรมเรียนรู้ที่ 2.1 34 เฉลย กจิ กรรมเรยี นรูท้ ี่ 2.2 35 เฉลย กิจกรรมเรียนรู้ที่ 2.3 เฉลย กจิ กรรมเรียนรูท้ ี่ 2.4 เฉลย แบบทดสอบก่อนเรยี น - หลังเรยี น ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ด์ิ ครู โรงเรยี นชมุ พลวิทยาสรรค์
1 ชุดกจิ กรรมการเรียนรูแ้ บบรว่ มมือ เรอ่ื ง การสรา้ งงานแอนิเมชันด้วย Flash CS6 คาแนะนาการใชช้ ุดกจิ กรรมการเรยี นรแู้ บบร่วมมอื เรื่อง การสรา้ งงานแอนิเมชัน ดว้ ย Flash CS6 ขอบเขตเน้ือหา ชดุ กิจกรรมการเรียนรู้แบบรว่ มมอื เร่ือง การสร้างงานแอนิเมชันดว้ ย Flash CS6 รายวชิ าการสรา้ ง ภาพเคล่อื นไหว สาหรับนักเรียนช้ันมธั ยมศกึ ษาปีที่ 3 กล่มุ สาระการเรียนรกู้ ารงานอาชีพและเทคโนโลยี ประกอบด้วยชดุ กจิ กรรม จานวน 8 ชุด ดงั นี้ แบบทดสอบวัดผลสมั ฤทธ์ิทางการเรียนก่อนเรยี น เรือ่ ง การสร้างงานแอนเิ มชนั ด้วย Flash CS6 ชุดท่ี 1 รู้จักโปรแกรม Flash CS6 ชุดที่ 2 การวาดรปู และลงสี ชุดที่ 3 การจดั การกับวตั ถุ ชดุ ท่ี 4 การสรา้ งขอ้ ความ ชุดท่ี 5 ซมิ บอลและอินสแตนซ์ ชดุ ที่ 6 การสร้างแอนิเมชนั ชุดท่ี 7 การทางานกบั ไฟล์เสยี ง ชุดท่ี 8 การเผยแพรช่ น้ิ งาน แบบทดสอบวดั ผลสัมฤทธ์ิทางการเรยี นหลงั เรยี น เรื่อง การสรา้ งงานแอนิเมชันด้วย Flash CS6 สาหรบั การปฏบิ ัตกิ ิจกรรมในช้ันเรียน นกั เรียนไดศ้ ึกษาค้นคว้าด้วยตนเอง ตามคาแนะนาของครู โดย แต่ละกจิ กรรมเน้นการทางาน การปฏิสัมพันธก์ บั เพ่อื น ส่งเสรมิ ให้นักเรยี นสรา้ งองคค์ วามร้ดู ว้ ยตนเองจากส่อื การเรยี นรู้ท่หี ลากหลาย ชดุ กิจกรรมการเรยี นรู้แบบร่วมมือ เรอ่ื ง การสร้างงานแอนเิ มชนั ด้วย Flash CS6 กล่มุ สาระการเรยี นรู้ การงานอาชพี และเทคโนโลยี ช้ันมธั ยมศกึ ษาปีที่ 3 ชุดนี้ เปน็ ชุดที่ 2 เรื่อง การวาดรปู และลงสี ใชเ้ วลาในการ จัดกจิ กรรม 2 ช่ัวโมง แตล่ ะชดุ มีส่วนประกอบดว้ ยรายการ ดงั น้ี 1. แบบทดสอบก่อนเรียน เร่ือง การวาดรปู และลงสี 2. บัตรคาสงั่ 3. ใบความรทู้ ่ี 2.1 -2.4 4. กจิ กรรมท่ีการเรียนรู้ท่ี 2.1 -2.4 5. แบบทดสอบหลังเรยี น เรื่อง การวาดรปู และลงสี ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พัตราภกั ด์ิ ครู โรงเรยี นชุมพลวิทยาสรรค์
2 ชดุ กิจกรรมการเรียนรูแ้ บบรว่ มมอื เรอื่ ง การสรา้ งงานแอนิเมชันดว้ ย Flash CS6 คาแนะนาสาหรับครู ชุดกิจกรรมการเรยี นรู้แบบร่วมมือ เรอื่ ง การสร้างงานแอนิเมชันดว้ ย Flash CS6 กลมุ่ สาระการเรยี นรู้ การงานอาชพี และเทคโนโลยี ชัน้ มธั ยมศกึ ษาปีที่ 3 ครูผู้สอนมขี ้นั ตอนการสอน ดงั น้ี 1. ข้อควรปฏิบัตกิ อ่ นดาเนนิ การสอน 1.1 ศึกษาแผนการจัดกิจกรรมการเรยี นร้อู ยา่ งละเอียด 1.2 ศึกษาชุดกิจกรรมการเรยี นรจู้ นเขา้ ใจเปน็ อย่างดี 1.3 ดาเนินการสอนตามแผนการจดั กิจกรรมการเรยี นรู้ เพอ่ื ให้สอดคลอ้ งกับจุดประสงค์ เนอื้ หา และเวลาที่กาหนด 1.4 แบ่งกลุ่มนกั เรยี นโดยคละความสามารถ เก่ง ปานกลาง อ่อน และคละเพศชายกบั หญิง 1.5 กาหนดบทบาทให้สมาชิกในกลมุ่ ทราบถึงการปฏิบัติตน 2. ข้อควรปฏิบตั ิขณะดาเนนิ การสอน 2.1 ช้แี จงกิจกรรมการเรียนใหน้ ักเรียนทกุ คนทราบ 2.2 ดาเนนิ การจัดกจิ กรรมการเรียนการสอนตามแผนการจัดกจิ กรรมการเรยี นรู้ เพอ่ื ให้สอดคล้อง กบั จดุ ประสงค์ เนอ้ื หาและเวลาท่กี าหนด 2.3 ครูผสู้ อนต้องให้คาแนะนาและคอยดูแลนกั เรียนอยา่ งใกลช้ ดิ 2.4 ให้นักเรยี นเรยี นรูช้ ุดกจิ กรรมการเรียนรตู้ ามขัน้ ตอนอยา่ งเคร่งครดั และมคี วามซือ่ สตั ย์ต่อ ตนเอง 2.5 ตรวจสอบการทางานของนักเรียนและสรปุ บทเรียนรว่ มกับนกั เรียน 3. ข้อควรปฏิบตั ิเมือ่ ดาเนนิ การสอนสิ้นสดุ 3.1 ตรวจแบบทดสอบและกิจกรรมการเรียนรู้ 3.2 บันทึกคะแนน 3.3 หากมนี ักเรยี นคนใดยังทาแบบทดสอบหลังเรียนและกจิ กรรมการเรียนรู้ไมผ่ ่านร้อยละ 80 ให้ ทาการศกึ ษาชุดกิจกรรมการเรยี นรู้ ตามขัน้ ตอนใหมอ่ กี ครง้ั เพ่ือใหเ้ กิดความเขา้ ใจที่ถกู ตอ้ ง ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภักดิ์ ครู โรงเรียนชมุ พลวิทยาสรรค์
3 ชุดกจิ กรรมการเรยี นรู้แบบรว่ มมือ เร่ือง การสร้างงานแอนิเมชันด้วย Flash CS6 คาแนะนาสาหรับนักเรียน ชุดกิจกรรมการเรยี นรู้ เรอ่ื ง การสร้างงานแอนเิ มชนั ด้วย Flash CS6 ชุดที่ 2 การวาดรูปและลงสี เล่มนี้ ใช้ประกอบการจดั กจิ กรรมการเรียนการสอน รายวชิ า การสร้างภาพเคลื่อนไหว สาหรบั นักเรียนชน้ั มธั ยมศึกษาปีที่ 3 โรงเรียนชมุ พลวทิ ยาสรรค์ โดยให้นกั เรยี นศึกษาก่อนลงมือปฏบิ ัติกจิ กรรมดังน้ี 1. นกั เรยี นฟงั คาชีแ้ จงการใช้ชุดกิจกรรมการเรียนรู้ เร่ือง การสร้างงานแอนเิ มชัน ดว้ ย Flash CS6 ชดุ ท่ี 2 การวาดรปู และลงสี ให้เข้าใจ 2. นักเรียนรบั ชดุ กจิ กรรมการเรียนรู้ เรือ่ ง การสรา้ งงานแอนเิ มชนั ดว้ ย Flash CS6 ชดุ ท่ี 2 การวาด รปู และลงสี 3. นกั เรยี นทาแบบทดสอบก่อนเรยี น เพ่อื ประเมินดวู ่านักเรยี นมีพน้ื ฐานความรเู้ รือ่ งการวาดรูปและลง สีในโปรแกรม Flash CS6 มากน้อยเพียงใด 4. นกั เรยี น ศกึ ษาเนือ้ หาจากชุดกจิ กรรมการเรียนรู้ เรอ่ื ง การสรา้ งงานแอนเิ มชัน ด้วย Flash CS6 ชดุ ที่ 2 การวาดรปู และลงสี ทาความเขา้ ใจใหด้ ีตง้ั แตห่ น้าแรกถงึ หน้าสุดท้ายตามลาดบั อย่าข้ามขนั้ ตอนและทา กจิ กรรมตามใบงานในชุดกิจกรรมการเรยี นร้ใู หค้ รบทกุ กจิ กรรม 5. เม่ือพบคาชีแ้ จงหรือคาถามใหน้ กั เรียนอา่ นและทากจิ กรรมท่ีกาหนดใหอ้ ย่างรอบคอบ 6. สง่ ผลงานการทากจิ กรรมการเรียนรู้จากท้ายชุดกิจกรรมการเรยี นรู้ เพื่อใหค้ รูตรวจและบันทกึ ผล 7. เมอ่ื ทาแบบฝกึ หัดเสร็จแลว้ จดั เก็บอปุ กรณ์ใหเ้ รียบร้อย 8. เมอ่ื นักเรยี นทกุ คนทากิจกรรมการเรยี นรูค้ รบแล้วใหน้ ักเรยี นทาแบบทดสอบหลงั เรียน ด้วยความ ต้งั ใจและซื่อสัตย์ 9. รบั ฟังการบอกคะแนนคาชมเชยและคาแนะนาเพ่ิมเตมิ จากครู ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พตั ราภักด์ิ ครู โรงเรยี นชมุ พลวิทยาสรรค์
4 ชดุ กิจกรรมการเรยี นรู้แบบรว่ มมอื เร่อื ง การสร้างงานแอนิเมชันด้วย Flash CS6 ผลการเรียนรู้ อธิบายความรู้พ้นื ฐานและหลกั การทางานของโปรแกรม Flash ได้ สาระสาคัญ เครอื่ งมือพน้ื ฐานของโปรแกรม Flash สามารถใช้ในการวาดรปู บนพ้นื ทีก่ ารทางาน (Stage) ทเี่ ป็น รูปทรงสเี่ หลี่ยม,รปู ทรงกลม, รปู ทรงแบบหลายเหลีย่ ม และการใช้เคร่อื งมอื วาดรปู ทรงอสิ ระ และเคร่ืองมอื ใส่สีลงบนชนิ้ งานทงั้ ใส่สแี บบธรรมดา และใส่สีแบบไล่เฉดสีจะทาให้สามารถวาดรูปไดอ้ ยา่ งสร้างสรรค์ สวยงาม สาระการเรยี นรู้ 1. การวาดเสน้ ตรงด้วย Line Tool 2. การทาเสน้ ตรงใหก้ ลายเปน็ เส้นโคง้ 3. การวาดรูปดว้ ย Pen Tool 4. การวาดวงกลมและวงรดี ้วย Oval Tool 5. การวาดสีเ่ หลย่ี มดว้ ย Rectangle Tool 6. การเขียนรูปโดยใช้ Pencil Tool 7. การระบายสีโดย Brush Tool 8. การลบสว่ นที่ไมต่ ้องการออกโดย Eraser Tool ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พัตราภักด์ิ ครู โรงเรียนชมุ พลวิทยาสรรค์
5 ชุดกจิ กรรมการเรียนรู้แบบรว่ มมอื เรอ่ื ง การสร้างงานแอนเิ มชนั ด้วย Flash CS6 จุดประสงค์การเรียนรู้ ดา้ นความรู้ (K) 1. สามารถอธบิ ายเกย่ี วกบั ลักษณะของภาพกราฟกิ แต่ละประเภทได้ 2. สามารถอธบิ ายเครอ่ื งมือวาดภาพของ Flash CS6 ทักษะ/กระบวนการ/กระบวนการคิด (P) 1. สามารถใชเ้ ครื่องมอื ของโปรแกรม Flash CS6 วาดภาพได้ 2. สามารถใช้เครือ่ งมือใส่สภี าพทว่ี าดได้ คณุ ลกั ษณะอันพึงประสงค์ (A) ซ่ือสตั ย์ มีวนิ ัย ใฝเ่ รียนรู้ มงุ่ มั่นในการทางาน ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พัตราภกั ดิ์ ครู โรงเรียนชุมพลวิทยาสรรค์
6 ชุดกิจกรรมการเรยี นรูแ้ บบรว่ มมือ เรอ่ื ง การสร้างงานแอนิเมชนั ด้วย Flash CS6 แบบทดสอบก่อนเรียน ชดุ ที่ 2 เรื่อง การวาดรูปและลงสี คาช้แี จง 1. แบบทดสอบมีท้ังหมด 10 ขอ้ คะแนนเตม็ 10 คะแนน 2. ใชเ้ วลาทาแบบทดสอบ 10 นาที 3. แบบทดสอบ มี 4 ตวั เลือก 4. ใหน้ กั เรียนทาเครอ่ื งหมายกากบาท () ทับตัวอกั ษร ก ข ค หรือ ง ทถี่ กู ตอ้ งที่สุดเพยี งข้อเดียว 1. ภาพกราฟกิ มีกป่ี ระเภท ก. 2 ประเภท ข. 3 ประเภท ค. 4 ประเภท ง. 5 ประเภท 2. ขอ้ ใดตอ่ ไปนี้คือขอ้ ดขี องภาพกราฟกิ ชนิดบทิ แมป ก. ไฟล์มขี นาดเลก็ ข. ใช้เวลาในการโหลดน้อย ค. ปรับ ยอ่ ขนาดได้ตามตอ้ งการ ง. แสดงรายละเอยี ดไดใ้ กล้เคยี งกบั ภาพจริง 3. ถ้าตอ้ งการวาดเสน้ ตรงในลักษณะต่างๆ ต้องใช้เครอื่ งมือใด ก. Oval Tool ข. Pen Tool ค. Line Tool ง. Pencil Tool 4. ถ้าต้องการวาดวงกลมหรือวงรี ตอ้ งใช้เคร่อื งมอื ใด ก. Line Tool ข. Pencil Tool ค. Pen Tool ง. Oval Tool ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พัตราภักดิ์ ครู โรงเรียนชุมพลวิทยาสรรค์
7 ชุดกิจกรรมการเรียนรู้แบบรว่ มมอื เรอ่ื ง การสร้างงานแอนิเมชันดว้ ย Flash CS6 5. ถ้าตอ้ งการวาดเส้นอิสระ ต้องใช้เครอื่ งมือใด ก. Line Tool ข. Pencil Tool ค. Pen Tool ง. Oval Tool 6. Ink Bottle Tool เปน็ เครอื่ งมอื ใช้ทาอะไร ก. ระบายสี ข. เทสี ค. ใส่สพี ื้นหลัง ง. ใสส่ เี ส้นขอบ 7. ถา้ ต้องการเทลวดลายใหเ้ ป็นวงกลม ตอ้ งตง้ั คา่ ใน Property Inspector แบบใด ก. Symmetry Brush ข. Vine Fill ค. Grid Fill ง. Branch angle 8. ถ้าตอ้ งการกาหนดระยะหา่ งระหว่างกรดิ ในแนวนอน จะต้องเลือกคาสง่ั ใด ก. Horizontal spacing ข. Pattern scale ค. Vertical spacing ง. Branch angle 9. เครือ่ งมือชนดิ ใดใชส้ าหรบั คดั ลอกสีพ้นื หรอื รปู แบบของลายเส้นของรูปทรงหนงึ่ ไปใช้กับรูปทรงอน่ื ก. Symmetry Brush ข. Eyedropper Tool ค. Eraser Tool ง. Branch angle 10. ขอ้ ใดคอื ข้อดขี องการเลอื ก Stroke Color จากพาเนล Swatches ก. มสี ใี หเ้ ลือกมากกว่า ข. มรี ูปแบบการผสมสีใหเ้ ลอื กมากกว่า ทาขอ้ สอบกนั ได้ หรอื เปล่าครบั ค. สง่ั ให้เเสดงพาเนลไวบ้ นจอภาพได้ตลอด ง. มีรปู แบบการไลส่ ีให้เลอื กมากกว่า ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พัตราภักด์ิ ครู โรงเรียนชมุ พลวิทยาสรรค์
8 ชดุ กจิ กรรมการเรยี นรู้แบบรว่ มมือ เรื่อง การสรา้ งงานแอนเิ มชันดว้ ย Flash CS6 กระดาษคาตอบแบบทดสอบ (กอ่ นเรยี น) ชื่อ-นามสกุล.................................................................................................ชั้น...........................เลขที.่ .............. ขอ้ ก ตัวเลือก ง เกณฑ์การประเมนิ 1 ขค ตอบถูก ข้อละ 1 คะแนน 2 ตอบผิด/ไมต่ อบ ขอ้ ละ 0 คะแนน 3 4 ผา่ นเกณฑก์ ารประเมินรอ้ ยละ 80 5 คะแนน 8 – 10 คะแนน ถือว่า ผ่าน 6 คะแนน 0 – 7 คะแนน ถือวา่ ไม่ผ่าน 7 8 ระดบั คณุ ภาพ 9 ดี ได้คะแนนระหวา่ ง 8 - 10 คะแนน 10 พอใช้ ได้คะแนนระหวา่ ง 5 - 7 คะแนน ปรบั ปรุง ได้คะแนนระหวา่ ง 1 – 4 คะแนน สรปุ ผลการประเมิน รวมคะแนน................ คะแนน ผา่ น ไมผ่ ่าน ลงชื่อ.........................................................ผูต้ รวจ (นางธนพร พัตราภกั ด)์ิ ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ดิ์ ครู โรงเรียนชุมพลวิทยาสรรค์
9 ชุดกิจกรรมการเรียนรูแ้ บบรว่ มมอื เร่ือง การสร้างงานแอนิเมชันดว้ ย Flash CS6 บตั รคาสงั่ วิธีปฏบิ ตั กิ จิ กรรม ประธานกลมุ่ อา่ นบตั รคาสง่ั ใหเ้ พ่อื นฟังและปฏบิ ตั ิกจิ กรรมตามลาดบั ข้นั ตอน ดังน้ี 1. นกั เรยี นศกึ ษาใบความรู้ เรอ่ื ง การวาดรูปและลงสี ภายในกล่มุ 2. ประธานกลมุ่ นาบัตรกจิ กรรมท่ี 1 – 4 ออกมาจากซองกิจกรรมและแจกใหส้ มาชกิ กลมุ่ ทุกคน คนละ 1 ฉบบั (งานเดี่ยว) โดยปฏบิ ัติ ดังนี้ 2.1 กจิ กรรมที่ 2.1 ใหน้ ักเรียนอธบิ ายชนิดของภาพกราฟิก 2.2 กิจกรรมที่ 2.2 ใหน้ กั เรยี นอธิบายเครื่องมอื ในการวาดภาพ 2.3 กจิ กรรมที่ 2.3 จงวาดรูปและลงสตี ามรปู ภาพ และอธบิ ายข้นั ตอนการเลือกสโี ดยใช้ Eyedropper Tool ให้เหมือนกบั ต้นฉบับ 2.4 กจิ กรรมท่ี 2.4 อธบิ ายโมเดลแบบ HSB ตามหลักการมองเหน็ สีของสายตามนุษย์ 3. เม่อื ปฏิบัติกิจกรรมเสรจ็ แลว้ ประธานกลมุ่ นาบัตรเฉลยออกจากซองกจิ กรรมและแจกให้ สมาชกิ กลมุ่ ทุกคน คนละ 1 ฉบบั 4. ให้สมาชิกกลมุ่ เปลย่ี นกนั ตรวจกิจกรรมการเรยี นรู้ที่ 2.1 -2.4 ภายในกลุ่ม จากบตั รเฉลย 5. ตรวจสอบความถูกตอ้ งเสร็จแล้วรวบรวมกจิ กรรมการเรียนรู้สง่ ครูเพอ่ื เกบ็ ผลงานต่อไป ลองศึกษาและปฏิบัติ กิจกรรมดูนะคะ ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภักด์ิ ครู โรงเรียนชมุ พลวิทยาสรรค์
10 ชดุ กจิ กรรมการเรียนรูแ้ บบรว่ มมอื เร่ือง การสร้างงานแอนเิ มชนั ด้วย Flash CS6 ใบความรู้ที่ 2.1 รู้จกั กับชนิดของภาพกราฟิก รู้จกั กับชนิดของกราฟกิ เราสามารถแบง่ ภาพกราฟกิ ได้ 2 ประเภทคือ 1. ภาพกราฟกิ ชนดิ บิทแมป (Bitmap) เป็นภาพแบบ Resolution Dependent ประกอบ ขึ้นด้วยจุดสตี ่างๆทม่ี จี านวนคงท่ีตายตัวตามการ สรา้ งภาพทมี่ ี Resolution หรือความละเอียดของภาพตา่ งกันไป หากขยายภาพ Bitmap จะเหน็ วา่ มีลักษณะ เป็นตารางเลก็ ๆ ซึ่งแต่ละบิตคือสว่ นหน่ึงของขอ้ มลู คอมพวิ เตอร์ ภาพแบบ Bitmap เหมาะสาหรบั งานกราฟกิ ทใ่ี ห้แสงเงาในรายละเอยี ด เป็นไฟล์ทเ่ี หมาะกบั การ ทางานกบั ภาพเหมือนจรงิ ประเภทภาพถา่ ย เพราะ Bitmap มี Channel พิเศษ เรียกวา่ Alpha Channel ซึ่ง เปน็ 32 bit คอื สีสมจริง ขอ้ ดี ภาพชนิดนี้สามารถแสดงรายละเอียดได้ใกลเ้ คยี งภาพจรงิ เช่นภาพถ่ายทีม่ รี ายละเอยี ดสงู เพราะ เปน็ การใชพ้ กิ เซลจานวนมากมาประกอบกนั ขอ้ เสยี ภาพชนิดนี้จะมีขนาดใหญ่ตามความละเอียดภาพ เพราะต้องใชจ้ านวนพิกเซลเพ่ิมขน้ึ ตาม นอกจากนนั้ การนาภาพมาขนายใหใ้ หญก่ วา่ ขนาดปกตจิ ะทาใหภ้ าพท่ไี ด้ไมช่ ดั เจน 2. ภาพกราฟกิ ชนิดเวกเตอร์ (Vector) เปน็ ภาพประเภท Resolution-Independent มี ลกั ษณะของการสรา้ งใหแ้ ตล่ ะสว่ นเปน็ อิสระต่อ กัน โดยแยกชิ้นส่วนของภาพทัง้ หมดออกเป็นเส้นตรง รปู ทรงหรือส่วน เป็นการรวมเอา Object ต่างชนดิ มา ผสมกนั มีทิศทางการลากเส้นไปในแนวต่างๆ เพ่ือสร้างภาพทีแ่ ตกตา่ งกนั โดยใช้คาส่งั ง่ายๆ จงึ เรียกภาพ ประเภทน้ีวา่ Vector Graphic ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ดิ์ ครู โรงเรียนชมุ พลวิทยาสรรค์
11 ชุดกิจกรรมการเรยี นรูแ้ บบรว่ มมือ เรือ่ ง การสรา้ งงานแอนิเมชันด้วย Flash CS6 ลักษณะเดน่ คอื สามารถยืดหรอื หดภาพเทา่ ใดกไ็ ด้ โดยทภ่ี าพจะไมแ่ ตก ความละเอียดของภาพไม่ เปลี่ยนแปลง และไฟล์มขี นาดเลก็ กวา่ ภาพ Bitmap ไฟลร์ ูปภาพแบบ Vector ในระบบวนิ โดวส์คือ ไฟลท์ มี่ ี นามสกุล .EPD, .WMF, .CDR, .AI, .CGM, .DRW, .PLT เป็นต้น โดยมีโปรแกรม CorelDraw เปน็ โปรแกรม สร้าง ขอ้ ดี ภาพชนดิ นป้ี รบั หรือย่อขนาดไดต้ ามท่ีต้องการ โดยไมม่ ผี ลต่อความละเอียดของภาพเพราะไมว่ ่า ภาพจะเลก็ หรือใหญ่ ความคมชดั ก็ไมเ่ ปลย่ี นแปลง เพราะคอมพวิ เตอรจ์ ะสรา้ งภาพขึ้นมาโดยใชว้ ธิ ีคานวณ ซงึ่ ไมไ่ ดถ้ กู จากดั ด้วยพกิ เซลในภาพวา่ มีมากนอ้ ยเพยี งใด นอกจากนั้นภาพชนิดเวกเตอร์มีขนาดไฟลเ์ ล็กกว่า บติ แมปเพราะไม่ไดใ้ ชพ้ กิ เซลจานวนมากมาสรา้ งเปน็ ภาพ แต่มเี พียงคาส่งั สรา้ งลวดลายเพอ่ื ประกอบเป็นภาพ เท่าน้นั ขอ้ เสยี เนอื่ งมาจากลักษณะของภาพท่สี รา้ งจากการใชค้ อมพิวเตอร์สร้างเสน้ และรูปทรงมาประกอบกนั ภาพชนดิ นจี้ ึงมขี ้อจากัดในการแสดงภาพถ่าย แต่เหมาะกับภาพกราฟกิ แนวลายเส้น ทีม่ ีสีคอ่ นข้างต่อเน่อื ง เท่านน้ั ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พัตราภักดิ์ ครู โรงเรยี นชุมพลวิทยาสรรค์
12 ชุดกิจกรรมการเรียนรู้แบบรว่ มมือ เรื่อง การสรา้ งงานแอนเิ มชันดว้ ย Flash CS6 กิจกรรมการเรยี นรทู้ ่ี 2.1 รจู้ กั ชนิดของภาพกราฟิก รายวชิ า การสรา้ งภาพเคลื่อนไหว รหัสวิชา ง20246 ช้ันมัธยมศกึ ษาปที ่ี 3 ชื่อ.............................................................................................ชัน้ .............................เลขที.่ ............................... คาชแ้ี จง ให้นักเรยี นแสดงความคิดเห็น หาคาตอบและเตมิ คาหรือขอ้ ความใหส้ มบรู ณ์ (10 คะแนน) 1. ให้นกั เรียนอธิบายภาพกราฟิกชนิดบทิ แมป และอธบิ ายข้อดีและขอ้ เสยี แล้วบนั ทึกข้อมลู ลงใน ชอ่ งว่าง .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 2. ให้นกั เรียนอธิบายภาพกราฟกิ ชนิดเวกเตอร์ และอธบิ ายข้อดีและขอ้ เสีย แล้วบนั ทกึ ขอ้ มลู ลงใน ช่องว่าง .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภักดิ์ ครู โรงเรยี นชมุ พลวิทยาสรรค์
13 ชุดกิจกรรมการเรียนรูแ้ บบรว่ มมอื เรื่อง การสร้างงานแอนิเมชนั ดว้ ย Flash CS6 เกณฑ์การประเมนิ กิจกรรมท่ี 2.1 คะแนน 4 - 5 คะแนน นกั เรยี นตอบได้ถูกต้อง ชดั เจน ครบถว้ น คะแนน 1 - 3 คะแนน นักเรยี นตอบไดถ้ ูกตอ้ ง คะแนน 0 คะแนน นกั เรยี นตอบไมถ่ ูกต้องหรือไม่ตอบ สรปุ ผลการประเมิน คะแนนเตม็ 10 คะแนน ได้คะแนน................ คะแนน แปลผลการประเมิน ดี ได้คะแนนระหว่าง 8 - 10 คะแนน พอใช้ ไดค้ ะแนนระหวา่ ง 5 - 7 คะแนน ปรับปรุง ไดค้ ะแนนระหวา่ ง 0 - 4 คะแนน ลงชอื่ ....................................................................ผู้ตรวจ (นางธนพร พตั ราภักด์ิ) ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ดิ์ ครู โรงเรียนชุมพลวิทยาสรรค์
14 ชดุ กิจกรรมการเรียนรู้แบบรว่ มมอื เร่อื ง การสร้างงานแอนเิ มชนั ด้วย Flash CS6 ใบความรู้ที่ 2.2 การใช้เครอื่ งมือในการวาดภาพ เร่มิ ต้นการวาดรปู โดยใชเ้ คร่อื งมือใน Flash การวาดภาพแบบปกติใน Flash นัน้ เม่ือวาดรูปด้วยเครอ่ื งมอื ตา่ งๆ เราก็จะไดร้ ูปทรง (Shape) ซ่ึง รปู ทรงของภาพประกอบดว้ ย เสน้ ขอบ (Stroke)หรือลายเสน้ (Outline) เป็นโครงร่าง ของรูป สว่ นทเ่ี ปน็ พนื้ ท่ีรปู (Fill : พนื้ ทภี่ ายในเสน้ ขอบ) รูปทรงทีส่ รา้ งใน Flash จะตา่ งจากโปรแกรมสรา้ งภาพกราฟิกทั่วๆ ไปคอื ท้ังสว่ นท่เี ป็นเส้นขอบและส่วน ทเ่ี ปน็ พื้นท่รี ปู สามารถแยกจากกันไดอ้ ยา่ งอสิ ระ โดยเครื่องมือวาดรูปใน Flash จะแบ่งออกเปน็ สองหมวด ใหญๆ่ ได้แก่ เคร่อื งมือท่สี ร้างและปรบั แต่งสว่ นท่เี ปน็ ลายเสน้ และเครื่องมือทีส่ ร้างและปรับแตง่ ส่วนทเี่ ป็น พน้ื ท่ีรปู การกาหนดรายละเอยี ดของรปู ทรงที่วาด เคร่อื งมือวาดรูปต่างๆ ใน Flash เมอ่ื เราคลกิ เลอื กเครอ่ื งมือใดเพ่ือวาดรูปทรง ให้สงั เกตใน Property Inspector ของเครื่องมือนนั้ จะปรากฏคณุ สมบัติของเสน้ และสีพ้ืนให้เรากาหนดเพ่ิมเตมิ ได้ ดงั นี้ เม่อื คลิกเลือกเคร่อื งมือวาดรปู จะปรากฏคณุ สมบัติ Property Inspector ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พตั ราภักด์ิ ครู โรงเรียนชุมพลวิทยาสรรค์
15 ชุดกิจกรรมการเรียนรู้แบบรว่ มมือ เรือ่ ง การสรา้ งงานแอนเิ มชนั ดว้ ย Flash CS6 ใน Property Inspector มีรายละเอียดท่เี รากาหนดไว้ก่อนวาดภาพดงั น้ี แสดงเครอื่ งมือทก่ี าลังใช้งาน เลือกสีของพ้นื รปู เลือกสเี ส้น เลือกรปู แบบของเสน้ เลือกความหนาของเส้น จากจานสีทีเ่ ราเลือกใชง้ านขา้ งต้นเป็นสีมาตรฐานที่โปรแกรมกาหนดมา แต่หากเราต้องการผสมสดี ้วยตัวเองก็ ทาไดเ้ ช่นกนั โดยวธิ ีการดังน้ี ดา้ นลา่ งของตวั เลือกทัง้ สองน้ใี นทลู บ็อกซ์จะมีอกี 2 ปุ่ม ดังนี้ Black and White เปลยี่ นสีของ Stroke Color และ Fill Color ให้กลบั มาเปน็ สีท่ีใช้ตอนเรม่ิ ตน้ คอื สี เสน้ เป็นสดี า และสีพนื้ เปน็ สีขาว Swap Colors สลบั ระหวา่ ง Stroke Color และ Fill Color ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ดิ์ ครู โรงเรียนชุมพลวิทยาสรรค์
16 ชุดกจิ กรรมการเรียนรูแ้ บบรว่ มมอื เรือ่ ง การสรา้ งงานแอนเิ มชันด้วย Flash CS6 การวาดเสน้ ตรงด้วย Line Tool เปน็ เครอ่ื งมือในการวาดเสน้ ตรง โดยให้เราคลิกที่ Line Tool ในกลอ่ งเครอ่ื งมอื หรือกดคยี ์ <N> ตัวชี้เมาส์จะเปลี่ยนเปน็ รูป จากนน้ั กาหนดรายละเอียดของเส้นตรงใน Property Inspector แลว้ คลิก เมาสไ์ ปยังตาแหนง่ ทีต่ ้องการ แลว้ ปล่อยเมาสก์ จ็ ะได้เสน้ ตรงตามทตี่ ้องการ การวาดเส้นโค้งเชอ่ื มต่อกันโดยใช้ Pen Tool Pen Tool เปน็ เครื่องมอื ที่ใชว้ าดเสน้ ตรงและเส้นโคง้ โดยเส้นที่วาดจะเช่อื มตอ่ เป็นจุดตอ่ จุด เราจะ เรียกจุดนว้ี า่ “จดุ แองเคอร์” (anchor point) ภายในกลมุ่ ของ Pen Tool จะมเี คร่ืองมือต่างๆ สาหรับ ปรบั แตง่ เสน้ พาธใหเ้ ป็นรูปทรงตา่ งๆ ได้ตามที่ต้องการ ดงั นี้ Pen Tool ใช้วาดเสน้ ด้วยปากกา Add anchor Point Tool ใชเ้ พ่มิ จดุ ในแนวเส้นพาธ Delete Anchor Point Tool ใช้ลบจดุ ในแนวเสน้ พาธ Convert Anchor Point Tool ใช้เปล่ียนแขนของเส้นพาธให้เป็นเสน้ โคง้ หรอื เส้นตรง ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พัตราภักด์ิ ครู โรงเรียนชมุ พลวิทยาสรรค์
17 ชุดกจิ กรรมการเรยี นรูแ้ บบรว่ มมอื เรอ่ื ง การสรา้ งงานแอนิเมชนั ด้วย Flash CS6 สาหรบั การวาดเส้นตรง ใหเ้ ราคลิกที่ ในทลู บอ็ กซ์ ตวั ชเี้ มาส์จะเปล่ยี นเป็นรปู จากนั้นก็ ปรบั แตง่ คา่ ต่างๆ ใหก้ ับเสน้ ใน Property Inspector แล้วคลกิ เมาส์บนสเตจเพอื่ กาหนดจุดเร่ิมตน้ จากนั้นคลกิ เมาส์ที่จุดต่อไปจะไดเ้ สน้ ตรงเชือ่ มระหว่างสองจุดน้ี ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พตั ราภักด์ิ ครู โรงเรยี นชุมพลวิทยาสรรค์
18 ชดุ กิจกรรมการเรยี นรูแ้ บบรว่ มมอื เรือ่ ง การสร้างงานแอนเิ มชันด้วย Flash CS6 การวาดรปู ทรงเรขาคณิต ประกอบไปดว้ ยรปู ทรงสเี่ หลย่ี ม รปู วงกลม วงรี และรปู หลายเหลีย่ ม ดังรูป ขอแบง่ ออกเปน็ กลุ่มๆ ตามรายการที่ Tools ดงั นี้ การวาดรูปสีเ่ หลยี่ มด้วย Rectangle Tool และ Rectangle Primitive Tool เคร่อื งมอื Rectangle Tool และ Rectangle Primitive Tool ใช้สาหรบั วาดรูปสี่เหลี่ยม หรือส่เี หลยี่ มมุมโค้ง แตกตา่ งกนั ตรงที่รูปท่ีได้จาก Rectangle Primitive Tool จะสามารถกลบั มาเปล่ียน ลักษณะความโคง้ ของมมุ ท่ี Property Inspector ได้อีก ทั้งสองเครื่องมือ สามารถวาดรปู สีเ่ หลีย่ มได้โดยการ คลกิ ที่ ในทูลบอ็ กซ์ (หรอื กดคยี ล์ ัด R ซ้าๆ จะสลบั ไปมาของเคร่ืองมือทงั้ สองตวั ) ตัวช้ีเมาส์จะเปลย่ี นเป็น รปู จากนนั้ ปรับแตง่ ค่าตา่ งๆ ให้กับเส้นท่ีเราจะสรา้ ง ซึง่ สามารถกาหนดความโค้งของมมุ ของรูป สเ่ี หลย่ี มได้ใน Property Inspector แลว้ ลากเมาส์วาดรูปส่ีเหล่ยี มหรอื วาดรูปส่เี หลี่ยมจตั รุ ัสได้โดยกดคยี ์ ค้าง ไว้ ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พตั ราภักดิ์ ครู โรงเรยี นชมุ พลวิทยาสรรค์
19 ชดุ กิจกรรมการเรยี นรูแ้ บบรว่ มมอื เรอ่ื ง การสร้างงานแอนิเมชันดว้ ย Flash CS6 การวาดวงกลมหรือวงรีดว้ ย Oval Tool และ Oval Primitive Tool เคร่ืองมือ Oval Tool และ Oval Primitive Tool จะใชว้ าดรปู วงกลมหรอื วงรี แต่ Oval Primitive Tool สามารถกลับมาเปลีย่ นแปลงรปู ทรงหรือรัศมีภายในวงกลมใน Property Inspector ได้อกี ทง้ั สองเคร่อื งมอื สามารถวาดรปู ไดโ้ ดยการคลกิ ค้างที่เคร่ืองมือ Rectangle Tool ท่ีทูลบอ็ กซ์จะปรากฏ เมนยู ่อยแสดงเคร่อื งมอื Oval Tool และ Oval Primitive Tool (หรือกดคีย์ O ซ้าๆ จะสลับไป มาของเคร่ืองมอื ทั้งสองตวั ) ตวั ชี้เมาสจ์ ะเปลย่ี นเป็นรปู จากนั้นปรบั แต่งค่าตา่ งๆ ใหก้ ับเส้นที่เราจะสร้างใน Property Inspector แล้วลากเมาส์วาดวงรี หรอื วาดรปู วงกลมโดยกดคยี ์ <Shift> ค้างไว้ คลกิ เลือก Oval Primitive Tool ปรบั สีและ รูปแบบให้กบั รปู ลากเมาสว์ าดรูปตามต้องการ การวาดรูปหลายเหลี่ยมดว้ ย PolyStar Tool เครือ่ งมือ PolyStar Tool จะอยใู่ นกลมุ่ เดยี วกับเครื่องมอื Rectangle Tool ใชส้ าหรับสร้าง รูปหลายเหลีย่ ม โดยให้คลิกเมาส์ค้างที่เครื่องมือ Rectangle Tool ท่ีทูลบ็อกซจ์ ะปรากฏเมนูย่อมแสดง เคร่อื งมอื PolyStar Tool ตวั ชี้เมาสจ์ ะเปลี่ยนเปน็ จากน้นั ปรบั แตง่ ค่าต่างๆ ให้กับรูปหลายเหลีย่ มที่ เราจะสรา้ งใน Property Inspector แล้วลากเมาสว์ าดรปู หลายเหลี่ยมได้ตามที่ตอ้ งการ คลกิ เลอื ก PolyStar Tool ปรับสแี ละรูปแบบ ใหก้ บั รูปหลายเหลี่ยม ลากเมาส์วาดรปู ตามตอ้ งการ ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พัตราภกั ดิ์ ครู โรงเรยี นชุมพลวิทยาสรรค์
20 ชดุ กจิ กรรมการเรยี นรูแ้ บบรว่ มมือ เรื่อง การสรา้ งงานแอนิเมชันด้วย Flash CS6 การวาดลายเสน้ อสิ ระดว้ ย Pencil Tool Pencil Tool เปน็ เคร่อื งมอื ท่ใี ชส้ าหรับลาดลายเส้นอสิ ระ เหมือนกับการใชด้ นิ สอวาดบนกระดาษ โดยใหเ้ ราคลกิ ที่ Pencil Tool ในกลอ่ งเคร่ืองมอื หรือกดคีย์ <Y> ตัวชี้เมาส์จะเปลีย่ นเปน็ รปู จากนน้ั ให้ลากเมาส์ไดต้ ามต้องการ คลิกเลอื ก Pencil Tool ปรบั สีและรูปแบบ ใหก้ บั รปู หลายเหล่ียม วาดลายเส้นตามต้องการ ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ดิ์ ครู โรงเรียนชมุ พลวิทยาสรรค์
21 ชดุ กิจกรรมการเรียนรู้แบบรว่ มมือ เรื่อง การสรา้ งงานแอนิเมชันด้วย Flash CS6 กิจกรรมการเรยี นรู้ที่ 2.2 การใชเ้ คร่ืองมือในการวาดภาพ รายวชิ า การสร้างภาพเคลื่อนไหว รหสั วิชา ง30246 ช้ันมัธยมศกึ ษาปที ่ี 3 ชอ่ื .............................................................................................ชัน้ .............................เลขที่................................ คาช้แี จง ให้นกั เรียนอธิบายเครอื่ งมือทีใ่ ชใ้ นการวาดภาพต่อไปนี้ ( 10 คะแนน) เครื่องมือ หนา้ ที่การทางาน 1. Pencil Tool …………………………………………………………………………………………………………………… 2. Rectangle Tool …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… 3. Pen Tool …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… 4. Oval Tool 5. Line Tool …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พัตราภักดิ์ ครู โรงเรียนชมุ พลวิทยาสรรค์
22 ชดุ กิจกรรมการเรยี นรูแ้ บบรว่ มมอื เรอ่ื ง การสร้างงานแอนิเมชนั ด้วย Flash CS6 เกณฑ์การประเมินกจิ กรรมท่ี 2.2 คะแนน 2 คะแนน นักเรียนตอบได้ถูกตอ้ ง ชดั เจน ครบถ้วน คะแนน 1 คะแนน นกั เรียนตอบได้ถกู ตอ้ ง คะแนน 0 คะแนน นกั เรยี นตอบไมถ่ กู ตอ้ งหรอื ไม่ตอบ สรปุ ผลการประเมิน คะแนนเตม็ 10 คะแนน ไดค้ ะแนน................ คะแนน แปลผลการประเมิน ดี ไดค้ ะแนนระหว่าง 8 - 10 คะแนน พอใช้ ได้คะแนนระหว่าง 5 - 7 คะแนน ปรับปรุง ไดค้ ะแนนระหวา่ ง 0 - 5 คะแนน ลงชือ่ ....................................................................ผู้ตรวจ (นางธนพร พัตราภกั ดิ์) ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ดิ์ ครู โรงเรียนชุมพลวิทยาสรรค์
23 ชุดกจิ กรรมการเรยี นรู้แบบรว่ มมือ เรอ่ื ง การสร้างงานแอนเิ มชันด้วย Flash CS6 ใบความรู้ที่ 2.3 การใช้เครอื่ งมอื ปรับแตง่ รูปทรงทีว่ าด การใช้ Selection Tool และ Subselection Tool ปรับแตง่ รปู ทรงทว่ี าด หลงั จากที่เราสร้างรูปดว้ ยเครอื่ งมือตา่ งๆ แล้ว แต่หากยังไมพ่ อใจ และต้องการปรับแต่งรปู เหลา่ นน้ั เพมิ่ เติมก็สามารถใช้เครื่องมอื ในการปรับแต่งรปู รงท่ีวาดได้ โดยมี 2 เคร่ืองมอื หลกั ดงั นี้ 1. การปรับแต่งเสน้ ขอบของรปู โดยใช้ Selection tool Selection Tool เราสามารถใช้ Selection tool ปรบั แต่งเส้นขอบหรือ ปรับแตง่ รปู ทรงท่ไี มม่ ีเสน้ ขอบ (เพราะถูกวาดโดยเคร่อื งมือ เช่น Brush Tool) กไ็ ด้ โดยการคลกิ ที่ ในทลู บอ็ กซ์ เมือ่ เรานาตวั ชเ้ี มาส์ไปวางท่เี สน้ ขอบ ของรูปทรง ตัวช้เี มาส์จะเปลี่ยนไปจาก เป็น ซงึ่ เราใชด้ ึงเสน้ หรอื ขอบ จองรูปทรงให้โคง้ ได้ (ถา้ เรากดคยี ์ <Ctrl> ในขณะทค่ี ลกิ เมาส์ลากเส้น จะเปน็ การเพ่มิ มมุ ใหก้ ับรูปทรง คลิกเมาส์ค้างไว้ทเ่ี สน้ ขอบ คลิกเมาสใ์ ห้เกิดเป็นเสน้ โคง้ ผลลัพธท์ ี่ตกแต่งเสร็จแล้ว 2. ปรบั แตง่ รูปทรงด้วย Subselection Tool Subselection Tool เป็นเครือ่ งมือสาหรับใชป้ รบั แตง่ รปู ทรงท่ีวาดดว้ ยเครือ่ งมอื ต่างๆ ใน Flash ทเี่ ป็นลกั ษณะรูปทรงโดยคลิกท่ี ในทูลบ็อกซ์ แลว้ คลกิ เส้นในรูปทรงทตี่ อ้ งการแก้ไข จะปรากฏจดุ แองเคอร์ จากน้ันเรากส็ ามารถปรับเปล่ยี นรปู ทรงได้ ดงั นี้ ยา้ ยตาแหนง่ รปู ทรงท้งั รปู ให้คลกิ ทีเ่ สน้ แล้วลากไปยังตาแหน่งทีต่ ้องการได้ คลิกเมาส์เลอื กทเี่ ส้นขอบ ลากเสน้ เพอ่ื ยา้ ยภาพท่ีสรา้ งไว้ นางธนพร พัตราภักดิ์ ชดุ ที่ 2 การวาดรูปและลงสี ครู โรงเรยี นชุมพลวิทยาสรรค์
24 ชุดกิจกรรมการเรียนรู้แบบรว่ มมอื เรอ่ื ง การสรา้ งงานแอนเิ มชันด้วย Flash CS6 ใช้พกู่ ันระบายสี Brush Tool Brush Tool เป็นเครอ่ื งมอื สาหรับใชว้ าดภาพและระบายสไี ดด้ ว้ ย โดยการคลกิ ที่ ในทลู บอ็ กซ์ (หรือกดคีย์ลดั B) ตัวชีเ้ มาสจ์ ะเปลย่ี นเปน็ รปู ใหเ้ รากาหนดสีท่ีต้องการใน Property Inspector จากนน้ั ให้ลากเมาส์ระบายสไี ด้ คลกิ เลือก Brush Tool เลอื กสสี าหรบั การระบาย ปรบั ความเรยี บ ของหัวพู่กันทใี่ ช้ ระบาย เมื่อใช้ Brush Tool ระบายภาพ พ่นสเปรย์ด้วย Spray Brush Tool Spray Brush Tool เปน็ เคร่ืองมือที่ซอ่ นอยใู่ น Brush Tool ใช้สาหรบั พน่ สีหรอื รูปท่ีต้องการ โดยการ คลิกท่ี ใน ทูลบ็อกซ์ (หรอื กดคีย์ลัด B) ตัวชี้เมาส์จะเปลยี่ นเป็นรปู ใหเ้ รากาหนดรปู แบบท่ตี ้องการใน Property Inspector จากนั้นใชเ้ มาสพ์ น่ สไี ด้ ใส่สีเสน้ ขอบด้วย Ink Bottle Tool คลิกเลือกสหี รอื รูป และรปู แบบสาหรบั การพ่น คลกิ เลือก Brush Tool นางธนพร พัตราภักด์ิ เมือ่ ใช้ Spray Brush Tool พ่น ครู โรงเรียนชมุ พลวิทยาสรรค์ ชดุ ท่ี 2 การวาดรูปและลงสี
25 ชดุ กจิ กรรมการเรยี นรูแ้ บบรว่ มมือ เรือ่ ง การสร้างงานแอนิเมชนั ด้วย Flash CS6 Ink Bottle Tool เปน็ เครอื่ งมอื สาหรบั ใส่สีเสน้ ขอบ (Stroke) โดยการคลกิ ที่ ในทูลบ็อกซ์ (หรือ กดคียล์ ัด s) ตัวชีเ้ มาส์จะเปลี่ยนเปน็ รูป ใหเ้ รากาหนดลกั ษณะของเส้นทต่ี ้องการใน Property Inspector จากนั้นให้คลิกท่ีเสน้ ขอบของวตั ถทุ ่ีต้องการ สีของเส้นขอบจะเปลยี่ นไปเปน็ สที ีเ่ ราเลือกไว้ คลกิ เม้าสท์ พี่ ื้นทีร่ ปู เพ่อื ใส่เส้นขอบ สงั เกตว่า เส้นขอบมีสเี พิ่มขึ้นมา คลิกเลอื ก Brush Tool เทสีพน้ื ภาพโดยใช้ Paint Bucket Tool Paint Bucket Tool เป็นเครอ่ื งมอื เทสใี หพ้ ้นื รูปท่ีมเี ส้นขอบลอ้ ม โดยการคลิกที่ ในทลู บอ็ กซ์ (หรือกดคีย์ลัด K) ตัวชเี้ มาสจ์ ะเปลย่ี นเป็นรปู ให้เราเลอื กสีท่ีต้องการใน Property Inspector จากนั้นให้ คลิกที่บริเวณของพืน้ ภาพรปู ทต่ี ้องการ สีก็จะเปลี่ยนไปตามทเ่ี ราเลือกไว้ คลกิ เมาส์ที่พน้ื ท่ีเพื่อเทสรี ูปท่ีเราสร้างไว้ คลกิ เลอื ก Paint Bucket Tool ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ดิ์ ครู โรงเรยี นชมุ พลวิทยาสรรค์
26 ชดุ กจิ กรรมการเรยี นรูแ้ บบรว่ มมือ เรือ่ ง การสร้างงานแอนเิ มชันด้วย Flash CS6 เลอื กสีโดยใช้ Eyedropper Tool Eyedropper Tool เป็นเครอ่ื งมือสาหรบั คดั ลอกสีพน้ื หรอื สีเสน้ ขอบของรปู ทรงหน่งึ ไปใชก้ บั รปู ทรง อ่นื ไดโ้ ดยให้เราคลิกที่ Eyedropper Tool ในกล่องเครื่องมือหรือกดคีย์ แล้วทางานดงั ตอ่ ไปน้ี คัดลอกลักษณะลายเสน้ ของรูป ให้คลกิ บนเสน้ ขอบของรูปทรง สังเกตตัวชีเ้ มาสจ์ ะเปล่ียนจากรูป ดินสอเปน็ รูปถังสี แล้วคลกิ ทร่ี ปู ทรงอื่น เส้นขอบของรปู ทรงนนั้ ก็จะเปลยี่ นตาม คลกิ เมาส์ท่ีเสน้ ขอบของรปู ทรงต้นฉบับ คลิกเปล่ียนรปู ทรง คลกิ เลือก Eyedropper Tool เส้นขอบของรปู ทรงอื่น คัดลอกสพี ้ืนของรปู ให้คลิกบนสพี ืน้ ของรปู ทรง (สงั เกตตวั ชี้เมาส์จะเปลีย่ นจากดนิ สอเปน็ ถงั สี) แลว้ คลิกทีร่ ูปทรงอ่ืน สีพ้นื ของรปู ทรงก็จะเปลยี่ นตาม คลกิ บนสีพน้ื ของรปู ทรง คลกิ เปล่ียนสี เพอ่ื คัดลอกสี ของพนื้ ภาพ ชดุ ท่ี 2 การวาดรูปและลงสี เม่ือเปลย่ี น ลักษณะ ของสีพื้น นางธนพร พตั ราภักด์ิ ครู โรงเรียนชมุ พลวิทยาสรรค์
27 ชุดกจิ กรรมการเรยี นรู้แบบรว่ มมอื เร่อื ง การสรา้ งงานแอนเิ มชนั ด้วย Flash CS6 ลบภาพบางสว่ นทไี่ มต่ ้องการดว้ ย Eraser Tool Eraser Tool ในกล่องมือ หรือกด เปน็ เครอื่ งมอื สาหรับลบเส้นหรอื สพี ื้นของภาพ โดยใหเ้ ราคลิกที่ คีย์ <E> จากน้นั ใหค้ ลิกบริเวณยองภาพท่ีจะลบได้ คลิกเลือก Eraser Tool ลบภาพในบรเิ วณท่ีตอ้ งการ ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พัตราภักดิ์ ครู โรงเรียนชุมพลวิทยาสรรค์
28 ชดุ กจิ กรรมการเรยี นรูแ้ บบรว่ มมือ เรอ่ื ง การสรา้ งงานแอนเิ มชนั ด้วย Flash CS6 กจิ กรรมการเรยี นรู้ท่ี 2.3 การใชเ้ ครือ่ งมอื ปรบั แต่งรปู ทรงทว่ี าด รายวชิ า การสร้างภาพเคล่ือนไหว รหสั วิชา ง20246 ชั้นมัธยมศึกษาปีท่ี 3 ช่อื .............................................................................................ชน้ั .............................เลขท.ี่ ............................... คาช้แี จง จงวาดรปู และลงสีตามรูปภาพตอ่ ไปน้ี และอธิบายขั้นตอนการเลอื กสีโดยใช้ Eyedropper Tool ให้ เหมอื นกบั ต้นฉบบั (5 คะแนน) .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พัตราภักด์ิ ครู โรงเรียนชมุ พลวิทยาสรรค์
29 ชุดกิจกรรมการเรยี นรูแ้ บบรว่ มมอื เร่ือง การสรา้ งงานแอนิเมชันด้วย Flash CS6 เกณฑก์ ารประเมนิ กิจกรรมท่ี 2.3 คะแนน 5 คะแนน นกั เรยี นตอบได้ถกู ตอ้ ง ชดั เจน ครบถว้ น คะแนน 1 - 4 คะแนน นักเรยี นตอบไดถ้ ูกตอ้ ง คะแนน 0 คะแนน นักเรยี นตอบไมถ่ กู ตอ้ งหรือไม่ตอบ สรปุ ผลการประเมนิ คะแนนเต็ม 5 คะแนน ได้คะแนน................ คะแนน แปลผลการประเมนิ ดี ได้คะแนนระหว่าง 4 - 5 คะแนน พอใช้ ไดค้ ะแนนระหว่าง 3 คะแนน ปรับปรุง ได้คะแนนระหว่าง 0 - 2 คะแนน ลงชอ่ื ....................................................................ผู้ตรวจ (นางธนพร พตั ราภกั ดิ์) ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พัตราภักดิ์ ครู โรงเรียนชมุ พลวิทยาสรรค์
30 ชดุ กิจกรรมการเรียนรู้แบบรว่ มมอื เรื่อง การสร้างงานแอนิเมชันด้วย Flash CS6 ใบความรูท้ ่ี 2.4 การใช้สี โมเดลแบบ HSB ตามหลักการมองเห็นสขี องสายตามนษุ ย์ เปน็ ลกั ษณะพ้ืนฐานของการมองเหน็ สดี ว้ ยสายตาของมนษุ ย์ โมเดล HSB จะประกอบดว้ ยลักษณะของสี 3 ลักษณะคือ 1. Hue เป็นสีของวัตถุท่สี ะท้อนเข้ามายงั ตาของเรา ทาให้เราสามารถมองเห็นวตั ถุเป็นสีได้ ซ่งึ แต่ละสี จะแตกต่างกันตามความยาวของคล่ืนแสงท่มี ากระทบวตั ถแุ ละสะทอ้ นกลบั มาที่ตาของ Hue ถกู วดั โดย ตาแหนง่ การแสดงสีบน Standard Color Wheel ซ่ึงถูกแทนดว้ ยองศา คือ 0 ถงึ 360 องศา แตโ่ ดยท่วั ๆ ไป แล้ว มักจะเรียกการแสดงสีนั้นๆ เปน็ ชือ่ ของสีเลย เชน่ สีแดง สีม่วง สเี หลอื ง 2. Saturation คอื สัดสว่ นของสเี ทาทีม่ อี ยู่ในสีนัน้ โดยวัดค่าสีเทาในสหี ลกั เปน็ เปอรเ์ ซน็ ต์ดงั นคี้ ือ จาก 0% (สีเทาผสมอยู่มาก) จนถึง 100% (สีเทาไม่มเี ลย หรอื เรียกว่า “Full Saturation” คือสีมีความอมิ่ ตัวเตม็ ท)่ี โดยค่า Saturation น้ีจะบง่ บอกถงึ ความเข้มข้นและความจางของสี ถ้าถูกวดั โดยตาแหน่งบน Standard Color Wheel คา่ Saturation จะเพม่ิ ขึน้ จากจุดกงึ่ กลางจนถึงเส้นขอบ โดยคา่ ท่ีเส้นขอบจะมีสที ่ีชัดแจและ อิ่มตวั ท่ีสดุ ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ดิ์ ครู โรงเรียนชมุ พลวิทยาสรรค์
31 ชุดกจิ กรรมการเรยี นรูแ้ บบรว่ มมอื เรอื่ ง การสร้างงานแอนิเมชนั ด้วย Flash CS6 3.Brightness เปน็ เรอ่ื งของความสวา่ งและความมดื ของสี ซ่ึงถกู กาหนดคา่ เปน็ เปอร์เซน็ ตจ์ าก 0% (สดี า) ถงึ 100% (สขี าว) ย่งิ มีเปอร์เซ็นตม์ ากจะทาใหส้ ีน้นั สว่างมากขึ้น โมเดล RGB ตามหลกั การแสดงสีของเคร่อื งคอมพวิ เตอร์ โมเดล RGB เกิดจากการรวมตัวกนั ของสเปกตรมั ของ แสงสีแดง (Red), เขยี ว (Green) และนา้ เงิน (Blue) ในสัดส่วนความเขม้ ขน้ ท่แี ตกต่างกัน โดยจุดที่แสงทั้งสามสีรวมกนั จะเปน็ สขี าว นิยมเรียกการผสมสแี บบน้ีวา่ “additive” แสงสี RGB มักจะถกู ใชส้ าหรบั การสอ่ งแสงทง้ั บนจอภาพ ทวี ี และจอคอมพิวเตอร์ ซ่งึ สร้างจากสารท่ีใหก้ าเนดิ แสงสแี ดง สีเขียว และสีนา้ เงนิ ทาให้สดี สู วา่ งกวา่ ความเป็น จรงิ ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ด์ิ ครู โรงเรยี นชมุ พลวิทยาสรรค์
32 ชุดกิจกรรมการเรยี นรู้แบบรว่ มมือ เรอ่ื ง การสรา้ งงานแอนเิ มชันด้วย Flash CS6 โมเดล CMYK ตามหลกั การแสดงสีของเครอ่ื งพิมพ์ โมเดล CMYK มแี หลง่ กาเนิดสอี ยู่ทีก่ ารซึมซบั (absorb) ของหมกึ พมิ พ์บนการดาษ โดยมีสี พ้ืนฐานคือ สีฟ้า (Cyan), สีบานเยน็ (Magenta) และสีเหลือง (Yellow) โดยเรียกการผสมสที งั้ 3 สีข้างต้นว่า “subtractive Color” แต่สี CMYK กไ็ ม่สามารถผสมรวมกันใหไ้ ด้สบี างสี เช่น สี น้าตาล จงึ ต้องมกี ารเพ่ิมสดี า (black) ลงไป ฉะนน้ั เมอ่ื รวมกนั ท้ัง 4 สี คือ CMYK สที ไ่ี ดจ้ ากการ พมิ พ์ จงึ จะครอบคลมุ ทุกสี โมเดล Lab ตามมาตรฐานของ CIE โมเดล Lab เปน็ คา่ สีทีถ่ กู กาหนดข้นึ โดย CIE (Commission Internationale d’ Eclarirage) ใหเ้ ป็น มาตรฐานกลางของการวัดสที ุกรปู แบบ ครอบคลุมทุกสใี น RGB และ CMYK และใชไ้ ดก้ บั สที ีเ่ กดิ จากอปุ กรณ์ ทกุ อยา่ งไมว่ า่ จะเปน็ จอคอมพวิ เตอร์ เครือ่ งพิมพ์ เครอ่ื งสแกน และอืน่ ๆ สว่ นประกอบของโหมดสนี ี้ ได้แก่ L หมายถึง คา่ ความสว่าง (Luminance) a หมายถึง สว่ นประกอบทแ่ี สดงการไล่สีจากสเี ขียวไปยังสแี ดง b หมายถงึ สว่ นประกอบทแ่ี สดงการไลส่ จี ากสีน้าเงนิ ถงึ สีเหลือง ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ด์ิ ครู โรงเรยี นชมุ พลวิทยาสรรค์
33 ชดุ กจิ กรรมการเรียนรูแ้ บบรว่ มมือ เรอื่ ง การสร้างงานแอนเิ มชันด้วย Flash CS6 กาหนดสีโดยใชพ้ าเนล Color และพาเนล Swatches นอกจากการเลอื ก Stroke Color และ Fill Color แล้ว ใน Flash ยังมีพาเนล Color และ Swatches สาหรับเลอื กและผสมสดี ว้ ย โดยมีหลักการทางานดังน้ี 1. เลือกและผสมสโี ดยใชพ้ าเนล Color เลอื ก Window->Color หรอื กดคยี ์ <Shift>+<F9> เปดิ พาเนล Color สาหรบั ใช้ผสมสแี ละไลส่ ี ไดต้ ามต้องการ ซ่งึ มรี ายละเอยี ดตา่ งๆ ดังน้ี วิธีใช้ให้เราคลิก หรือ เพอื่ กาหนดว่าตอ้ งการกาหนดสใี ห้กบั เส้น หรือพน้ื รูป จากนัน้ เลือกแบบของสีท่ตี ้องการและกาหนดโหมดสีโดยคลิกท่ี และเลือกโหมดสีทีต่ ้องการใช้เป็น แบบ RGB หรือ HSB เราสามารถเลือกใส่สไี ด้จากไอคอนสาเร็จรูป ดงั นี้ ใส่สขี าวดาให้กับออบเจก็ ต์ เลือกไม่ใส่สกี บั เส้นหรอื พ้ืนรูปตามตอ้ งการ สลับการใส่สรี ะหวา่ งเสน้ กับพ้ืนรูป ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ดิ์ ครู โรงเรียนชมุ พลวิทยาสรรค์
34 ชดุ กจิ กรรมการเรยี นรู้แบบรว่ มมอื เร่ือง การสรา้ งงานแอนเิ มชันด้วย Flash CS6 กาหนดความโปร่ง/ทึบขอสีไดใ้ นชอ่ ง Alpha (100% หมายถึง สีทึบท่ีสุด และ 0% คือ ใหส้ โี ปรง่ ใสท่ีสดุ ไมเ่ ห็นสีเลย คาสง่ั Add Swatch ในเมนูจะเปน็ กรเพิม่ สีท่ีเราผสมนไ้ี ปไว้ในจานสที แ่ี สดงในหนา้ ตา่ งเลอื กสปี กติ ทา ให้เราคลกิ เลือกใชไ้ ด้โดยไมต่ ้องกลับมาผสมสนี ใ้ี หม่ ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ด์ิ ครู โรงเรยี นชมุ พลวิทยาสรรค์
35 ชดุ กจิ กรรมการเรียนรู้แบบรว่ มมือ เรือ่ ง การสร้างงานแอนิเมชนั ด้วย Flash CS6 รายละเอียดการใช้สแี บบต่างๆ ใน Color Mixer เราเลอื กแบบของสที ี่ใช้ได้ ตั้งแต่สปี กติ (Solid) สีแบบเกรเดียนทซ์ ่งึ มีให้ เลอื กสองแบบ คอื แบบไล่โทนสีเปน็ แนวเสน้ ตรง (Linear) หรือแบบไลโ่ ทนสีเป็นวงกลม (Radial) และการใช้ ภาพมา “เท” เปน็ สพี นื้ ของรปู (Bitmap) แต่ถา้ ไมต่ อ้ งการใส่สเี ลยก็ให้เลือก None None Solid Linear Radial Bitmap สาหรบั การสรา้ งสีแบบ Linear, Radial และ Bitmap จะปรากฏตัวเลอื ก Overflow ข้นึ มา เพอ่ื ให้ เราปรับลกั ษณะการไลส่ ีในรูปแบบต่างๆ ดังนี้ Normal กาหนดใหไ้ ล่สตี ามปกติหรือตามรูปแบบเดมิ ของสีแบบเกรเดียนท์ทเี่ ราเลือก Mirror กาหนดให้การไล่สีเปน็ แบบสะท้อน เหมือนมกี ารสะท้อนกลับจากกระจกเงา แตจ่ ะเหน็ ชดั ขึ้น เม่อื คกู่ บั Gradient Transform Tool ซงึ่ จะกลา่ วในหัวขอ้ ตอ่ ไป Repeat กาหนดให้ไล่สแี บบซา้ ๆ กัน จากสว่ นทีม่ ีสเี ขม้ ไปจนถงึ สอี ่อน จากน้นั ก็เร่มิ ตน้ ไลส่ เี ขม้ อีกคร้ัง ซา้ ไปมา จากระทัง่ เตม็ ออบเจ็กตท์ เ่ี ราสรา้ ง ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ดิ์ ครู โรงเรยี นชุมพลวิทยาสรรค์
36 ชุดกจิ กรรมการเรียนรู้แบบรว่ มมือ เร่ือง การสรา้ งงานแอนิเมชันด้วย Flash CS6 เลือกสจี ากหน้าตา่ ง Swatches พาเนล Swatches จะแสดงจานสีให้เราเลือก Stroke Color และ Fill Color ไดอ้ ยา่ งสะดวก ซึ่งง่ายกว่า การคลิกเลอื กจากทูลบอ็ กซ์ เพราะเราสงั่ ใหแ้ สดงพาเนลนีไ้ ว้ได้ตลอดบนจอภาพ โดยเลือกคาส่ัง Window=>Swatches 1 2 3 4 5 6 7 8 9 10 11 12 14 1. สรา้ งสใี หมใ่ หเ้ หมือนสีที่เลอื ก (คัดลอกสี) 2. ลบทเ่ี ลือกออก 3. เพมิ่ สใี หมจ่ ากไฟลภ์ าพ โดยสีทัง้ หมดทอ่ี ยใู่ นภาพนัน้ จะเข้าเพ่มิ 4. แทนทส่ี ที ้งั หมดดว้ ยสีใหม่จากไฟลภ์ าพ 5. เรยี กใช้ Swatches เดิมของโปรแกรม 6. บันทกึ Swatches ใหมท่ เ่ี ราเลือก สร้างหรือนาเขา้ มาจากภาพ 7. บันทกึ Swatches ใหม่ เป็น Swatches เรม่ิ ต้นทุกครั้งเม่ือเปดิ 8. ลบ Swatches ทุกสีท้งิ ยกเว้นสีขาวกับสีดา 9. เรยี กใช้ Swatches สาหรับการสร้างเวบ็ ไซต์ 10. จัดเรยี ง Swatches ตามโทนสี 11. อธบิ ายการใช้งาน Swatches 12. ปดิ พาเนล Swatches 13. ปดิ ทุกพาเนลทีร่ วมอยู่ใน Swatches ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ด์ิ ครู โรงเรียนชมุ พลวิทยาสรรค์
37 ชุดกจิ กรรมการเรียนรู้แบบรว่ มมือ เร่ือง การสรา้ งงานแอนเิ มชนั ด้วย Flash CS6 เปลยี่ นสเี สน้ ขอบและสพี ื้นของออบเจ็กต์ที่เลอื ก ในหวั ขอ้ นจ้ี ะกลา่ วถึงการเปล่ยี นสเี สน้ ขอบและสีพ้ืนของออบเจก็ ต์ทวี่ าดแลว้ โดยการคลิกเลอื กสว่ นท่ี ต้องการดว้ ย Selection Tool จากนั้นคลกิ เลอื กสีใหม่จาก Stroke Color หรือ Fill Color (หรือจะผสมหรือเกรเดียนทข์ น้ึ มาเองโดยใช้ mixer ก่อนกไ็ ด)้ เสน้ ขอบสีดาพ้ืนสีมว่ ง ถ้าเปลีย่ นสีเส้นให้คลกิ ท่ีเส้นขอบ แล้วคลิกที่ Stroke color เลอื กสีที่ตอ้ งการ (ในตัวอยา่ งเลอื กสีเขียว) ถา้ เปล่ียนสเี ส้นให้คลกิ ทเี่ สน้ ขอบ แล้วคลกิ ท่ี Fill color เลอื กสีที่ตอ้ งการ (ในตวั อยา่ งเลอื กสีชมพู) ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พตั ราภักด์ิ ครู โรงเรยี นชุมพลวิทยาสรรค์
38 ชดุ กจิ กรรมการเรียนรูแ้ บบรว่ มมือ เรอื่ ง การสร้างงานแอนเิ มชันดว้ ย Flash CS6 นอกจากนน้ั เรายังสามารถเปลยี่ นสหี รอื ใส่สี ให้กับออบเจก็ ต์ โดยเปลยี่ นใหเ้ ปน็ การไลโ่ ทนสแี บบ เกรเดยี นทไ์ ด้ทง้ั กบั เสน้ ขอบและพ้ืน ดังภาพ ถา้ ตอ้ งการใช้สีแบบไล่โทน ก็ใหเ้ ลอื กสแี บบเกรเดียนท์ส่วนลา่ งแทน ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พัตราภกั ด์ิ ครู โรงเรยี นชุมพลวิทยาสรรค์
39 ชดุ กิจกรรมการเรียนรูแ้ บบรว่ มมอื เรอ่ื ง การสร้างงานแอนิเมชนั ดว้ ย Flash CS6 กิจกรรมเรยี นร้ทู ี่ 2.4 การใชส้ ี รายวชิ า การสร้างภาพเคลื่อนไหว รหสั วชิ า ง20246 ชน้ั มัธยมศึกษาปีท่ี 3 ช่อื .............................................................................................ชั้น.............................เลขท่ี................................ คาชี้แจง ใหน้ กั เรยี นอธิบายโมเดลแบบ HSB ตามหลกั การมองเห็นสีของสายตามนุษย์ (5 คะแนน) .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. ............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พตั ราภักด์ิ ครู โรงเรียนชมุ พลวิทยาสรรค์
40 ชุดกิจกรรมการเรยี นรูแ้ บบรว่ มมอื เร่ือง การสรา้ งงานแอนเิ มชนั ด้วย Flash CS6 เกณฑก์ ารประเมนิ กิจกรรมท่ี 2.4 คะแนน 5 คะแนน นกั เรยี นตอบได้ถกู ตอ้ ง ชัดเจน ครบถว้ น คะแนน 1 - 4 คะแนน นักเรยี นตอบไดถ้ ูกตอ้ ง คะแนน 0 คะแนน นักเรยี นตอบไมถ่ กู ตอ้ งหรอื ไม่ตอบ สรปุ ผลการประเมนิ คะแนนเต็ม 5 คะแนน ได้คะแนน................ คะแนน แปลผลการประเมนิ ดี ได้คะแนนระหว่าง 4 - 5 คะแนน พอใช้ ไดค้ ะแนนระหว่าง 3 คะแนน ปรับปรุง ได้คะแนนระหว่าง 0 - 2 คะแนน ลงชอ่ื ....................................................................ผู้ตรวจ (นางธนพร พัตราภกั ด์ิ) ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พตั ราภักด์ิ ครู โรงเรียนชมุ พลวิทยาสรรค์
41 ชุดกิจกรรมการเรียนรูแ้ บบรว่ มมอื เรื่อง การสรา้ งงานแอนิเมชันด้วย Flash CS6 แบบทดสอบหลงั เรียน ชุดกิจกรรมการเรยี นรู้ที่ 2 เร่อื ง การวาดรูปและลงสี คาช้ีแจง 1. แบบทดสอบมีทงั้ หมด 10 ข้อ คะแนนเตม็ 10 คะแนน 2. ใช้เวลาทาแบบทดสอบ 10 นาที 3. แบบทดสอบ มี 4 ตวั เลือก 4. ให้นกั เรยี นทาเคร่ืองหมายกากบาท () ทบั ตัวอกั ษร ก ข ค หรอื ง ท่ีถูกต้องทีส่ ุดเพยี งข้อเดียว 1. ถ้าต้องการวาดวงกลมหรอื วงรี ต้องใช้เครื่องมอื ใด ก. Line Tool ข. Pencil Tool ค. Pen Tool ง. Oval Tool 2. ถ้าต้องการวาดเส้นตรงในลกั ษณะต่างๆ ต้องใช้เคร่ืองมือใด ก. Line Tool ข. Pencil Tool ค. Pen Tool ง. Oval Tool 3. ขอ้ ใดตอ่ ไปนี้คอื ข้อดขี องภาพกราฟิกชนดิ บทิ แมป ก. แสดงรายละเอยี ดได้ใกล้เคียงกบั ภาพจริง ข. ปรับ ย่อขนาดได้ตามต้องการ ค. ใช้เวลาในการโหลดนอ้ ย ง. ไฟลม์ ขี นาดเล็ก 4. ภาพกราฟิกมกี ปี่ ระเภท ก. 5 ประเภท ข. 4 ประเภท ค. 3 ประเภท ง. 2 ประเภท ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พัตราภักดิ์ ครู โรงเรียนชมุ พลวิทยาสรรค์
42 ชดุ กจิ กรรมการเรียนรู้แบบรว่ มมอื เรอ่ื ง การสร้างงานแอนิเมชนั ดว้ ย Flash CS6 5. Ink Bottle Tool เปน็ เคร่ืองมือใชท้ าอะไร ก. เทสี ข. ระบายสี ค. ใส่สเี สน้ ขอบ ง. ใสส่ พี ืน้ หลงั 6. ถ้าตอ้ งการกาหนดระยะห่างระหวา่ งกริดในแนวตัง้ จะตอ้ งเลือกคาสง่ั ใด ก. Horizontal spacing ข. Pattern scale ค. Vertical spacing ง. Branch angle 7. ถา้ ตอ้ งการเทลวดลายใหเ้ ป็นวงกลม ต้องต้ังคา่ ใน Property Inspector แบบใด ก. Branch angle ข. Symmetry Brush ค. Vine Fill ง. Grid Fill 8. ถ้าตอ้ งการวาดเสน้ อิสระ ตอ้ งใช้เครอ่ื งมอื ใด ก. Line Tool ข. Pen Tool ค. Oval Tool ง. Pencil Tool 9. ข้อใดคอื ข้อดีของการเลือก Stroke Color จากพาเนล Swatches ก. มีสีให้เลือกมากกวา่ ข. สง่ั ให้เเสดงพาเนลไว้บนจอภาพไดต้ ลอด ค. มีรปู แบบการผสมสีให้เลอื กมากกว่า ง. มรี ปู แบบการไล่สีให้เลือกมากกว่า 10. เคร่อื งมือชนิดใดใชส้ าหรบั คัดลอกสพี ืน้ หรือรปู แบบของลายเส้นของรูปทรงหนง่ึ ไปใชก้ บั รูปทรงอื่น ก. Eyedropper Tool ข. Symmetry Brush ทาข้อสอบกันได้ หรอื เปล่าคะ ค. Eraser Tool ง. Branch angle ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พัตราภักดิ์ ครู โรงเรยี นชุมพลวิทยาสรรค์
43 ชดุ กจิ กรรมการเรยี นรูแ้ บบรว่ มมือ เร่ือง การสร้างงานแอนิเมชันดว้ ย Flash CS6 กระดาษคาตอบแบบทดสอบ (หลงั เรยี น) ชื่อ-นามสกุล.................................................................................................ชัน้ ...........................เลขที่............... ขอ้ ก ตวั เลือก ง เกณฑก์ ารประเมนิ 1 ขค ตอบถูก ข้อละ 1 คะแนน 2 ตอบผดิ /ไม่ตอบ ข้อละ 0 คะแนน 3 4 ผา่ นเกณฑ์การประเมินรอ้ ยละ 80 5 คะแนน 8 – 10 คะแนน ถอื ว่า ผ่าน 6 คะแนน 0 – 7 คะแนน ถือวา่ ไม่ผ่าน 7 8 ระดบั คณุ ภาพ 9 ดี ได้คะแนนระหวา่ ง 8 - 10 คะแนน 10 พอใช้ ได้คะแนนระหว่าง 5 - 7 คะแนน ปรับปรงุ ได้คะแนนระหว่าง 1 – 4 คะแนน สรปุ ผลการประเมนิ รวมคะแนน................ คะแนน ผา่ น ไม่ผ่าน ลงช่ือ.........................................................ผู้ตรวจ (นางธนพร พัตราภกั ด)์ิ ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พัตราภกั ดิ์ ครู โรงเรียนชมุ พลวิทยาสรรค์
44 ชดุ กิจกรรมการเรียนรู้แบบรว่ มมอื เร่อื ง การสรา้ งงานแอนิเมชันด้วย Flash CS6 บรรณานกุ รม ชษิ ณุพงศ์ ธญั ลักษณ์. การสร้างงานแอนิเมชันด้วย FLASH เวอรช์ นั CS6. กรุงเทพฯ : ซัคเซส มเี ดยี , 2558. ธนั ยพฒั น์ วงศ์รัตน.์ Flash CS5. กรุงเทพฯ : ซมิ พลิฟาย, 2555. ปุณยวรี ์ รจุ ปิ ูรติ านันท์. Flash Cartoon Animation. กรงุ เทพฯ : โปรวชิ ั่น, 2553. พันจันทร์ ธนวฒั นเสถียร. สร้างงานมัลติมีเดยี แอนิเมชนั ด้วย Flash CS6. พมิ พ์ครง้ั ที่ 2, มนัสสินี ลา่ สนั เทียะ. Workshop Flash CS6 Animation สรา้ งงานแอนิเมชันการต์ นู . กรุงเทพฯ : ซมิ พลิฟาย, 2559 อิศเรศ ภาชนะกาญจน์. Flash CS6 Essntial. นนทบรุ ี : ไอซดี ฯี , 2557 ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พัตราภักด์ิ ครู โรงเรียนชมุ พลวิทยาสรรค์
45 ชดุ กิจกรรมการเรียนรู้แบบรว่ มมอื เร่อื ง การสร้างงานแอนเิ มชันดว้ ย Flash CS6 ภาคผนวก ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พตั ราภกั ดิ์ ครู โรงเรยี นชุมพลวิทยาสรรค์
46 ชุดกจิ กรรมการเรียนรูแ้ บบรว่ มมือ เร่ือง การสร้างงานแอนิเมชันด้วย Flash CS6 แบบบนั ทึกคะแนนชุดกิจกรรมการเรียนรู้แบบรว่ มมือ เรอ่ื ง การสรา้ งงานแอนิเมชนั ด้วย Flash CS6 ช้ันมธั ยมศกึ ษาปที ี่ 3 ชุดท่ี 2 การวาดรปู และลงสี ชอ่ื – นามสกุล..........................................................................เลขท่ี......................ชนั้ ................. กจิ กรรมท่ี คะแนนเต็ม คะแนนทท่ี าได้ หมายเหตุ 1 10 2 10 3 5 4 5 30 รวมคะแนน เกณฑก์ ารประเมิน (คดิ เปน็ คะแนนร้อยละ 80 ได้ 24 คะแนนขนึ้ ไป ถือว่าผา่ นเกณฑ์) คะแนนเต็ม 36 คะแนน ได้คะแนน...................... คะแนน ระดบั คุณภาพ ดี ไดค้ ะแนน 24 - 30 คะแนน = 3 หมายถึง พอใช้ ไดค้ ะแนน 15 - 23 คะแนน = 2 หมายถึง ปรบั ปรงุ ได้คะแนน 1 - 14 คะแนน = 1 หมายถงึ ลงช่ือ....................................................................ผตู้ รวจ (นางธนพร พตั ราภกั ด์ิ) ชดุ ที่ 2 การวาดรูปและลงสี นางธนพร พัตราภกั ด์ิ ครู โรงเรยี นชุมพลวิทยาสรรค์
47 ชุดกิจกรรมการเรียนรูแ้ บบรว่ มมือ เรอื่ ง การสร้างงานแอนเิ มชนั ดว้ ย Flash CS6 เฉลย กิจกรรมการเรยี นรทู้ ี่ 2.1 รู้จักชนิดของภาพกราฟกิ รายวิชา การสรา้ งภาพเคล่อื นไหว รหสั วิชา ง20246 ชน้ั มธั ยมศึกษาปที ี่ 3 ชื่อ.............................................................................................ชนั้ .............................เลขท่.ี ............................... คาช้ีแจง ให้นกั เรยี นแสดงความคดิ เห็น หาคาตอบและเติมคาหรอื ขอ้ ความใหส้ มบรู ณ์ (10 คะแนน) 1. ใหน้ ักเรียนอธบิ ายภาพกราฟกิ ชนิดบทิ แมป และอธบิ ายข้อดีและข้อเสยี แลว้ บนั ทกึ ขอ้ มลู ลงใน ชอ่ งวา่ ง ภาพกราฟิกชนิดบทิ แมป (Bitmap) เปน็ ภาพแบบ Resolution Dependent ประกอบ ข้ึนด้วยจุดสตี ่างๆที่ มีจานวนคงทีต่ ายตัวตามการสรา้ งภาพที่มี Resolution หรอื ความละเอียดของภาพต่างกนั ไป หากขยายภาพ Bitmap จะเหน็ วา่ มีลักษณะเป็นตารางเลก็ ๆ ซ่ึงแตล่ ะบติ คอื ส่วนหนง่ึ ของขอ้ มูลคอมพิวเตอร์ ภาพแบบ Bitmap เหมาะสาหรบั งานกราฟกิ ท่ีใหแ้ สงเงาในรายละเอยี ด เป็นไฟลท์ ี่เหมาะกบั การทางานกบั ภาพเหมือน จริงประเภทภาพถ่าย เพราะ Bitmap มี Channel พเิ ศษ เรยี กว่า Alpha Channel ซึง่ เป็น 32 bit คือ สสี มจริง ข้อดี ภาพชนดิ นี้สามารถแสดงรายละเอียดได้ใกลเ้ คียงภาพจรงิ เชน่ ภาพถ่ายทมี่ ีรายละเอียดสงู เพราะเป็น การใชพ้ ิกเซลจานวนมากมาประกอบกัน ข้อเสยี ภาพชนิดน้ีจะมขี นาดใหญต่ ามความละเอยี ดภาพ เพราะต้องใชจ้ านวนพิกเซลเพ่มิ ข้นึ ตาม นอกจากนั้นการนาภาพมาขนายให้ใหญก่ วา่ ขนาดปกตจิ ะทาให้ภาพทไี่ ดไ้ ม่ชัดเจน 2. ใหน้ ักเรียนอธบิ ายภาพกราฟกิ ชนิดเวกเตอร์ และอธิบายข้อดีและข้อเสีย แล้วบันทกึ ขอ้ มลู ลงในชอ่ งว่าง ภาพกราฟกิ ชนิดเวกเตอร์ เป็นภาพประเภท Resolution-Independent มี ลกั ษณะของการสรา้ งให้แต่ละ ส่วนเป็นอิสระต่อกนั โดยแยกชิ้นส่วนของภาพท้งั หมดออกเป็นเสน้ ตรง รปู ทรงหรือส่วน เป็นการรวมเอา Object ต่าง ชนิดมาผสมกนั มที ิศทางการลากเสน้ ไปในแนวตา่ งๆ เพือ่ สร้างภาพทแี่ ตกต่างกนั โดยใช้คาส่ังง่ายๆ จงึ เรยี กภาพ ประเภทนีว้ า่ Vector Graphic ลกั ษณะเดน่ คอื สามารถยดื หรือหดภาพเทา่ ใดกไ็ ด้ โดยทภ่ี าพจะไมแ่ ตก ความละเอยี ดของภาพไม่ เปลยี่ นแปลง และไฟล์มขี นาดเล็กกว่าภาพ Bitmap ไฟลร์ ปู ภาพแบบ Vector ในระบบวินโดวส์คอื ไฟลท์ ม่ี ีนามสกลุ .EPD, .WMF, .CDR, .AI, .CGM, .DRW, .PLT เปน็ ต้น โดยมโี ปรแกรม CorelDraw เปน็ โปรแกรมสรา้ ง ข้อดี ภาพชนดิ น้ปี รบั หรือย่อขนาดไดต้ ามที่ต้องการ โดยไม่มผี ลตอ่ ความละเอยี ดของภาพเพราะไมว่ า่ ภาพจะ เล็กหรอื ใหญ่ ความคมชดั กไ็ มเ่ ปลย่ี นแปลง เพราะคอมพิวเตอรจ์ ะสรา้ งภาพขึ้นมาโดยใช้วธิ คี านวณ ซึ่งไมไ่ ดถ้ กู จากดั ด้วยพิกเซลในภาพว่ามมี ากนอ้ ยเพยี งใด นอกจากน้นั ภาพชนดิ เวกเตอร์มีขนาดไฟล์เล็กกวา่ บิตแมปเพราะไม่ได้ใช้ พิกเซลจานวนมากมาสร้างเป็นภาพ แต่มเี พียงคาสัง่ สร้างลวดลายเพอ่ื ประกอบเปน็ ภาพเท่าน้ัน ข้อเสยี เนอื่ งมาจากลกั ษณะของภาพทสี่ ร้างจากการใชค้ อมพวิ เตอรส์ ร้างเสน้ และรปู ทรงมาประกอบกัน ภาพ ชนิดนี้จึงมขี อ้ จากดั ในการแสดงภาพถา่ ย แตเ่ หมาะกับภาพกราฟกิ แนวลายเส้น ทม่ี ีสีคอ่ นขา้ งตอ่ เน่ืองเทา่ นั้น ชดุ ท่ี 2 การวาดรูปและลงสี นางธนพร พัตราภกั ดิ์ ครู โรงเรียนชมุ พลวิทยาสรรค์
Search
