โต ๊ ะคร ู กิ่ ง วิชาการแอน ิ เมช ั น ่ เบ ื อ ่ งต ้ น เร ื อ ่ ง การสร ้ างชิน ้ งานด ้ วยโปรแกรม Adobe Flash CS6 โรงเรียนเมืองพัทยา ๘ (พัทธยานุกูล) สังกัดส านักการศึกษา เมืองพัทยา จังหวัดชลบุรี ช ั น ้ ม ั ธยมศ ึ กษาปี ท ี ่ 3
รู้จักกับ Adobe Flash CS6 พื้นฐานโปรแกรม ลักษณะส าคัญของโปรแกรม ADOBE FLASH CS6 ส่วนประกอบของโปรแกรม Adobe Flash CS6 การสร้างภาพเคลื่อนไหวแบบ ต่างๆ แบบฝึกหัดท้ายบท ครูพรรวินท์ x
ครูพรรวินท์ X X + รู้จักกับ Adobe Flash CS6 Adobe Flash cs6 เป็น โปรแกรมที่มีประสิทธิภาพสูงส าหรับงานด้าน กราฟิก ภาพเคลื่อนไหว ตลอดจนมัลติมีเดียส าหรับเว็บ โดย ลักษณะเด่น ของภาพเคลื่อนไหวที่ได้จากโปรแกรม Flash จะมีไฟล์ขนาดเล็ก จึง สามารถโหลดมาแสดง ได้อย่างรวดเร็ว รวมทังคุณสมบัติในการสร้าง ภาพกราฟิกแบบเวคเตอร์ท าให้ภาพมีความคมชัด Adobe Flash CS6
ครูพรรวินท์ พ ื ้ นฐานโปรแกรม X X + Adobe Flash CS6 โปรแกรม Flash เริม่มีชือ่เสียง ประมาณปี พ.ศ. 2539 จนถึง ปัจจุบันได้ ถูกน ามาใช้งานอย่างแพร่หลาย โดยเฉพาะ เทคโนโลยีเว็บ ท าให้การน าเสนอท าได้ อย่างน่าสนใจ นอกจากนัน้โปรแกรม Flash ยังสามารถสร้างแอพพลิเคชัน่ (Application) เพื่อใช้ท างานต่างๆ รองรับการใช้งานกับอุปกรณ์ที่ เชื่อมต่อ กับระบบเครือข่ายอินเตอร์เน็ต และท างาน ได้กับหลายๆ แฟลตฟอร์ม (Platform) Adobe Flash CS6 - FutureSplash Animator (10 เมษายน 1996): เป็ นเวอร ์ ชนั่ เริ่มตน ้ ของ flash - Macromedia Flash 1 (พฤษจิกายน1996) - Macromedia Flash 2 (มิถุนายน 1997) - Macromedia Flash 3 (พฤษภาคม 31, 1998) - Macromedia Flash 4 (มิถุนายน 15, 1999) - Macromedia Flash 5 (August 24, 2000) - Adobe Flash CS3-CC (เวอร ์ ชนั่ต้งัแต่ปี2007-2015) - ก่อนจะปิดตวัลงในปี2020
ครูพรรวินท์ ลักษณะส าคัญของโปรแกรม X X + Adobe Flash CS6 Adobe Flash CS6 ลักษณะส าคัญของโปรแกรม ADOBE FLASH CS6 คือ 1. สร้างชิน้งาน Interactive มีส่วนตอบสนองกับผู้ใช้ เช่น ผู้ใช้สามารถคลิกเลือกเมนูต่าง ๆ ได้ น าไปประยุกต์เป็นสื่อการสอน ( E- Learning ) หน้าจอควบคุม การท างานต่าง ๆ สื่อโฆษณา ( Banner ) บนเว็บไซต์ การ์ตูน แอนิเมชันต่างๆ เป็นต้น
ครูพรรวินท์ ลักษณะส าคัญของโปรแกรม X X + Adobe Flash CS6 Adobe Flash CS6 ลักษณะส าคัญของโปรแกรม ADOBE FLASH CS6 คือ 2.สร้างชิน้งาน Animation จุดเด่นของการท างานใน โปรแกรมแฟลช คือการสร้าง Animation หรือ ภาพเคลื่อนไหว มี เครื่องมืออ านวยความสะดวก ท าให้ โปรแกรม Flash สร้างผลงาน Animation ได้ง่าย
ครูพรรวินท์ ลักษณะส าคัญของโปรแกรม X X + Adobe Flash CS6 Adobe Flash CS6 ลักษณะส าคัญของโปรแกรม ADOBE FLASH CS6 คือ 3.สร้างเว็บไซต์ (Website) โปรแกรม Flash สามารถ สร้างเว็บไซต์ได้สวยงาม และสร้าง ลูกเล่นต่าง ๆ ได้ง่าย มีจุดอ่อนคือ เว็บไซต์ที่สร้างด้วยโปรแกรม Flash แก้ไขข้อมูลได้ยาก และขนาดของ ไฟล์เว็บไซต์ค่อนข้างใหญ่
ครูพรรวินท์ ลักษณะส าคัญของโปรแกรม X X + Adobe Flash CS6 Adobe Flash CS6 ลักษณะส าคัญของโปรแกรม ADOBE FLASH CS6 คือ 4.สร้างเกมส์ (GAME) แฟลชมีเครื่องมือช่วยสร้าง องค์ประกอบต่าง ๆ ให้เกมส์มีความ สวยงาม มีเครื่องมือส าหรับสร้าง ค าสัง่ควบคุมการเล่นเกมส์อีกทัง้ ไฟล์เกมส์ที่สร้างออกมามีขนาดเล็ก ท าให้อัพโหลดสู่เว็บไซต์ได้อย่าง รวดเร็ว
ครูพรรวินท์ X X + ส่วนประกอบของโปรแกรม Adobe Flash CS6 Adobe Flash CS6 ส่วนประกอบของโปรแกรม ประกอบด้วย 1. Menu Bar (เมนูบาร์) 2. Stage (สเตจ) 3. Properties (พร็อพเพอร์ตี้) 4.Timeline (ไทม์ไลน์) 5. Toolbox (ทูลบ๊อกซ์)
ครูพรรวินท์ X X + ส่วนประกอบของโปรแกรม Adobe Flash CS6 1. Menu Bar (เมนูบาร์) เมนูบาร์ (Menu Bar) แถบเมนูแสดงรายการค าสัง่ต่างๆ ของโปรแกรมทัง้หมด ได้แก่การสร้างชิน้งาน การสร้างมูฟวี่ รวมไปถึงการตัง้ค่าต่าง ค าสั่งสร้าง/บันทึก หรือเปิดชิ้นงาน ค าสั่งออกแบบ ชิ้นงาน ค าสั่งใช้งานในการ แทรกงานต่าง ๆ ค าสั่งส าหรับแก้ไข วัตถุต่างๆ ค าสั่งใส่ข้อความ ค าสั่งในการเรียกใช้ เครื่องมือต่างๆ
ครูพรรวินท์ X X + ส่วนประกอบของโปรแกรม Adobe Flash CS6 สเตจ (Stage) และพ ื้นท ี่ท างาน ประกอบด้วยพื้นทีว่่างส าหรับวางวัตถุแบบชัว่คราว และพื้นทีข่องเวที(Stage)
ครูพรรวินท์ X X + Property Inspector Property Inspector เป็ นพาเนลทีใ่ช้แสดง คุณสมบัติต่าง ๆ ของออบเจ็กต์ทีเ่ราคลิกเลือก ซึง่เรา สามารถปรับแต่งคุณสมบัติห้ล่านีไ้ด้ทัง้นีร้ายละเอียดที่ Property Inspector จะเปลีย่นไปตามออบเจ็กต์ทีเ่ลือก โดยสามารถเยกเปิดใช้งาน Property Inspector ด้วย ค าสัง่ Window > Properties >Properties หรือกด คีย์ลัด <Ctrl+F3> ส่วนประกอบของโปรแกรม Adobe Flash CS6
ครูพรรวินท์ X X + ส่วนประกอบของโปรแกรม Adobe Flash CS6 Timeline หน้าต่างแสดงเส้น ควบคุมเวลาส าหรับการ น าเสนอผลงาน ประกอบด้วยส่วนท างาน เกีย่วกับ Layer และ Timeline
X X + ครูพรรวินท์
ครูพรรวินท์ X X + ส่วนประกอบของโปรแกรม Adobe Flash CS6 ทูลบ๊อกซ์(Toolbox) แสดงปุม่เครือ่งมือเป็ นส่วน รวบรวมเครือ่งมือชนิดต่าง ๆ ในการ สร้าง ปรับแต่ง และแก้ไขชิน้งาน ทีอ่ยู่ใน Movie โดยแบ่งเป็น 4 กลุ่มย่อยคือ กลุ่มเครือ่งมือ กลุ่มมุมมอง กลุ่มก าหนด สี และกลุ่มออบชัน่ของเครือ่งมือ
ครูพรรวินท์ X X + Adobe Flash CS6 การสร ้ างภาพเคล ื อ ่ นไหวแบบตา ่ งๆ 1. Animation แบบ Frame by frame การเคล ื่อนไหวชนิดภาพต่อภาพ (Frame By Frame Animation) เป็ นการแสดงภาพแต่ละภาพทีเ่รียงต่อกันอย่าง ต่อเนือ่ง จนดูเหมือนว่าภาพนัน้มีการเคลือ่นไหว ซึง่ เราจะท าการ Import ภาพทีเ่ราจะสร้าง มาไว้ใน Frame แต่ละ Frame การเปลีย่นแปลงของภาพแต่ ละภาพทีเ่รียงอย่างต่อเนือ่งในลักษณะนี้เหมาะ ส าหรับการท า Animation ทีซ่ับซ้อน เช่น Animation ทีม่ีการเคลือ่นไหวลักษณะท่าทางมาก เป็นต้น
ครูพรรวินท์ X X + การสร ้ างภาพเคล ื อ ่ นไหวแบบตา ่ งๆ 1. Animation แบบ Frame by frame ค าสัง่ทีใ่ช้ในการท างาน 1. Insert Keyframe หรือ กดปุ่ม F6 1.1 คลิกขวาทีเ่ฟรมีทีต่้องการ 1.2 คลิกค าสัง่ Insert KeyFrames 2. Remove Frame 2.1 ลากเมาส์คลุมเฟรมทีต่้องการลบ เฟรมและคีย์เฟรมทีผ่ิด 2.2 คลิกขวา> Remove Frames
ครูพรรวินท์ การสร ้ างภาพเคล ื อ ่ นไหวแบบต ่ างๆ X X + Adobe Flash CS6 2. Animation แบบ Motion Tween Motion Tween เป็ นการสร้างภาพเคลือ่นไหวทีม่ีการก าหนดการเคลือ่นที่ หมุน ย่อ หรือขยายไห้อ็อบเจ็กต์เป็ นรูปแบบการสร้างภาพเคลือ่นไหวทีีใช้มาก ทีสุ่ด และโปรแกรมจะก าหนดรูปแบบชนิดนีเ้ป็ นค่าเริม่ต้นของการสร้าง ภาพเคลือ่นไหวทุกครัง้โดยโปรแกรมจะสร้างภาพเคลือ่นไหวและเส้นทางการ เคลือ่นไหวให้เองโดยอัตโนมัติการสร้างภาพแบบ Tween มี 2 ชนิดคือ Motion Tween และ Shape Tween
ครูพรรวินท์ การสร ้ างภาพเคล ื อ ่ นไหวแบบต ่ างๆ X X + 2. Animation แบบ Motion Tween ค าสั่งที่ใช้ในการท างาน 1. Insert Keyframe หรือ กดปุ่ม F6 1.1 คลิกขวาที่เฟรมีที่ต้องการ 1.2 คลิกค าสั่ง Insert KeyFrames 2. ค าสั่ง Creat Motion Tween 2.1 คลิกขวาที่เฟรมระหว่างเฟรม เริ่มต้นและเฟรมสิ้นสดุ 2.2 เลือกค าสัง Motion Tween 3. Remove Frame 3.1 ลากเมาส์คลุมเฟรมที่ต้องการ ลบเฟรมและคีย์เฟรมที่ผดิ 3.2 คลิกขวา> Remove Frames
ครูพรรวินท์ X X + Adobe Flash CS6 การสร ้ างภาพเคล ื อ ่ นไหวแบบต ่ างๆ 3. Animation แบบ Shape Tween Shape Tween เป็ นการสร้างภาพเคลือ่นไหวโดยการเปลีย่นแปลงรูปทรงของอ ็ อบ เจ็กต์จากรูปทรงหนึง่ไปเป็ นอีกรูปทรงหนึง่โดยสามารถก าหนด ทิศทาง ต าแหน่ง ขนาด และสีของการเปลีย่นแปลงได้ตามต้องการ
ครูพรรวินท์ X X + การสร ้ างภาพเคล ื อ ่ นไหวแบบต ่ างๆ 3. Animation แบบ Shape Tween ค าสั่งที่ใช้ในการท างาน 1. Insert Keyframe หรือ กดปุ่ม F6 1.1 คลิกขวาที่เฟรมีที่ต้องการ 1.2 คลิกค าสั่ง Insert KeyFrames 2. ค าส่ัง Creat Shape Tween 2.1 คลิกขวาที่เฟรมระหว่างเฟรมเริ่มต้น และเฟรมสิ้นสุด 2.2 เลือกค าสัง Create Shape Tween 3. Remove Frame 3.1 ลากเมาส์คลุมเฟรมที่ต้องการ ลบเฟรมและคีย์เฟรมที่ผิด 3.2 คลิกขวา> Remove Frames
ครูพรรวินท์ X X + แบบฝึกหัดท้ายบท เร ื อ่ง การสร ้ างชิน้งานด ้ วยโปรแกรม Adobe Flash CS6
แบบฝึกหัด ค าชี้แจง ให้นักเรียนอธิบายและตอบค าถามต่อไปนี้ 1. จงบอกจุดเด่นของโปรแกรม Adobe Flash CS6 มา อย่างน้อย 5 ข้อ 1.1........................................................................................................................ 1.2........................................................................................................................ 1.4........................................................................................................................ 1.3........................................................................................................................ 1.5........................................................................................................................
ครูพรรวินท์ X X + แบบฝึกหัด Adobe Flash CS6 ค ำชี้แจง ให้นักเรียนตอบค ำถำมต่อไปนี้ 1 คืออะไร................. 2 คืออะไร.................. 3 คืออะไร................. 4 คืออะไร................... 5 คืออะไร....................
ครูพรรวินท์ X X + แบบฝึกหัด Adobe Flash CS6 ค ำชี้แจง ให้นักเรียนตอบค ำถำมต่อไปนี้ 1 คืออะไร................. 2 คืออะไร.................. 3 คืออะไร................. 4 คืออะไร................... 5 คืออะไร.................... 6 คืออะไร................. 7 คืออะไร.................. 8 คืออะไร................. 9 คืออะไร................... 10 คืออะไร.................... 11 คืออะไร................... 12 คืออะไร.................... 13 คืออะไร.................. 14 คืออะไร................. 15 คืออะไร................... 16 คืออะไร.................... 17 คืออะไร...................
โต ๊ ะคร ู กิ่ ง x