2901-2011 การสร้างภาพเคลื่อนไหวเบื้องต้น

Adobe Flash CS6344 บทที่ 11 การจดั ทำ�โครงงานย่อยและการสร้าง Flash Animation 2 มิติ และ 3 มติ ิ สรปุ ทา้ ยบท มีเนื้อหาเกี่ยวกับการสอนให้นักเรียนปฏิบัติตาม เพื่อฝึกหัดการสร้าง Flash Animation แบบ 2 มติ ิ โดยในบทเรยี นจะมขี ้นั ตอนใหป้ ฏิบตั ติ าม เช่น การสรา้ งปุม่ ซ่ึงมีขั้นตอนการสรา้ งปมุ่ ทุกสถานะและ ทดสอบป่มุ ท่ีสร้าง จะเหน็ ไดว้ ่าแต่ละสถานะจะมกี ารตอบสนองของปมุ่ แตกตา่ งกนั ไป การสรา้ งแอนเิ มชนั ใหร้ ปู สนุ ขั มกี ารกะพรบิ ตา โดยใชเ้ ทคนคิ ในการเปลย่ี นภาพตามเฟรมทก่ี �ำ หนดไว้ เพยี งไมก่ ข่ี น้ั ตอนกจ็ ะได้ แอนเิ มชนั แบบ 2 มติ ิ และการสรา้ งหนา้ เวบ็ ลงิ ค์ โดยมที ง้ั การสรา้ งปมุ่ และใสค่ �ำ สง่ั ActionScript เพื่อสร้าง ลิงคใ์ หก้ บั ปุ่ม ตัวอย่างในการสร้างแอนิเมชันแบบ 2 มิติ ในบทเรียนน้ีจะทำ�ให้นักเรียนสามารถนำ�ไปพัฒนา ต่อเพื่อสร้างงานแอนิเมชันท่ีสวยงามและมีลูกเล่นมากขึ้นได้ บทเรียนนี้ประกอบด้วยตัวอย่างให้นักเรียน ปฏิบัติตามเพ่ือสร้าง Flash Animation แบบ 3 มิติ เพื่อเป็นแนวทางในการสร้างงานแบบ 3 มิติ และ พฒั นาให้มีลกู เล่นและสวยงามมากยิ่งข้นึ ตัวอย่างการสรา้ ง Flash Animation แบบ 3 มติ ิ มที ้ังการใชเ้ ครอ่ื งมอื 3D Rotation Tool ที่ โปรแกรม Adobe Flash มีมาให้ และการสรา้ งโดยใช้รูปรา่ ง 2 มิติ มาท�ำแอนิเมชันใหเ้ กดิ แอนเิ มชันแบบ 3 มติ ิ ซ่ึงตอ้ งอาศัยการฝกึ ฝนอย่างสม่�ำเสมอ เพอื่ ใหผ้ ลงานที่ได้สวยงามและสมจรงิ

การสร้างภาพเคล่ือนไหวเบือ้ งต้น Adobe Fla3s45h CS6 แบบทดสอบและกจิ กรรมการฝึกทกั ษะ บทที่ 11 การจัดท�ำโครงงานยอ่ ยและการสร้าง Flash Animation 2 มติ ิ และ 3 มิติ ตอนท่ ี 1 : อธบิ าย (หมายถงึ การให้รายละเอยี ดเพิม่ เติม ขยายความ ถ้ามตี วั อยา่ งใหย้ กตวั อย่าง ประกอบ) 1. สถานะของปมุ่ จะประกอบด้วยเฟรมกีเ่ ฟรม อะไรบา้ ง 2. สถานะปมุ่ แบบเฟรม Up คืออะไร 3. สถานะปุ่มแบบเฟรม Over คอื อะไร 4. สถานะปุ่มแบบเฟรม Down คอื อะไร 5. สถานะปมุ่ แบบเฟรม Hit คืออะไร 6. ข้นั ตอนการสรา้ งปมุ่ สถานะ Up เพ่อื รอการคลกิ ปุ่มมขี ัน้ ตอนอยา่ งไร 7. การทดสอบปุ่มทีส่ ร้างสามารถท�ำไดอ้ ยา่ งไร อธิบายมา 1 วิธี 8. Selection Tool มีหนา้ ที่การท�ำงานอย่างไร 9. การเปลี่ยนรูปทรงใหเ้ ปน็ มฟู วต่ี อ้ งท�ำอย่างไร 10. 3D Rotation Tool ใชส้ �ำหรบั ท�ำอะไร 11. การสร้างไฟลแ์ อนเิ มชนั ในรูปแบบ 3 มิติ โดยการหมนุ หลงั จากท่เี ราสรา้ งวตั ถุที่ตอ้ งการแล้วต่อไปมี ขัน้ ตอนอย่างไรบ้าง 12. การสรา้ งภาพแบบ 3 มิติ ในการเปล่ยี นรปู ทรงให้เป็นซมิ โบลแบบกราฟกิ มขี ั้นตอนอยา่ งไร

Adobe Flash CS6346 บทท่ี 11 การจดั ทำ�โครงงานย่อยและการสร้าง Flash Animation 2 มิติ และ 3 มติ ิ ตอนท ี่ 2 : จงเลือกค�ำตอบท่ีถูกต้องทส่ี ดุ เพยี งข้อเดยี ว 1. เฟรม Up เป็นเฟรมทจี่ ะแสดงออกมาเมื่อเกิดเหตุการณ์ใด ก. ใช้ส�ำหรบั ก�ำหนดขอบเขตของป่มุ ข. เมอ่ื ปมุ่ ถกู คลกิ ค. เม่ือเมาสพ์ อยเตอรเ์ ลอื่ นมาอย่ภู ายในขอบเขตของปุ่ม ง. เม่อื เมาส์พอยเตอร์อยภู่ ายนอกขอบเขตของปุม่ 2. สถานะของปมุ่ เฟรมใดที่เนอื้ หาทอี่ ย่ใู นเฟรมนจ้ี ะไมถ่ กู แสดงเม่ือมกี ารน�ำปมุ่ ไปใช้ ก. เฟรม Up ข. เฟรม Over ค. เฟรม Down ง. เฟรม Hit 3. การ Insert Keyframe สามารถใชค้ ยี ์ลัดไดต้ ามขอ้ ใด ก. F5 ข. F6 ค. F4 ง. F2 4. เฟรมท่ีจะแสดงเมอ่ื เมาส์พอยเตอร์เลื่อนมาอยูภ่ ายในขอบเขตของปุม่ เป็นสถานะของปมุ่ แบบใด ก. เฟรม Up ข. เฟรม Over ค. เฟรม Down ง. เฟรม Hit 5. การสรา้ งปมุ่ ตอ้ งเลอื ก Type ในการ Create New Symbol เป็นแบบใด ก. Movie Clip ข. Button ค. Graphic ง. Object 6. การทดสอบปุ่มทว่ี างอยบู่ นสเตจไดโ้ ดยตรงทันทตี ้องเลอื กค�ำส่งั ใด ก. คลกิ ปมุ่ Play ในช่อง Preview ข. Control > Test Movie ค. Control > Test Scene ง. Control > Enable Simple Buttons 7. การใสล่ งิ ค์ให้กับปุ่มต้องใช้ Actions ใด ก. getURL ข. loadMovie ค. fscommand ง. loadVariables 8. ถา้ ตอ้ งการเปลี่ยนรูปทรงให้เป็น Movie สามารถใช้คีย์ลัดในข้อใด ก. F5 ข. F6 ค. F4 ง. F8 9. การหมนุ วัตถหุ รอื รปู รา่ งแบบ 3D ตอ้ งใชเ้ คร่ืองมอื ในขอ้ ใด ก. 3D Rotation Tool ข. 3D Translation Tool ค. Selection Tool ง. Blind Tool

การสร้างภาพเคล่อื นไหวเบือ้ งต้น Adobe Fla3s47h CS6 10. ข้อใดคือค�ำสั่งในการเปล่ยี นรปู ร่างให้เปน็ กราฟกิ หรอื มฟู วี่ ก. Create Motion Tween ข. Create Shape Tween ค. Convert to Symbol ง. Convert to Bitmap 11. การ lock เลเยอรท์ �ำเพ่ืออะไร ก. เพือ่ ไมใ่ หเ้ ลเยอร์น้ันแสดงให้เหน็ ข. เพ่อื ป้องกนั ไม่ให้เปล่ียนแปลงเลเยอร์ ค. เพ่อื คดั ลอกเลเยอร์ที่ตอ้ งการ ง. เพื่อลบเลเยอร์นน้ั ทิง้ 12. Remove Frames มหี น้าทอ่ี ะไร ก. เพอื่ ลบเลเยอร์ท่ีสร้างข้ึนมา ข. เพ่อื ลบคยี ์เฟรมทส่ี ร้างขึน้ มา ค. เพื่อลบเฟรมทส่ี ร้างขน้ึ มา ง. เพื่อลบทวนี ที่สรา้ งข้ึนมา ตอนที่ 3 : อธิบายค�ำศพั ท์ (หมายถงึ การให้รายละเอยี ดเพม่ิ เตมิ ขยายความ ถ้ามีตัวอยา่ งให้ยกตัวอย่าง ประกอบ) 1. เฟรม Up 2. เฟรม Over 3. เฟรม Down 4. เฟรม Hit 5. Enable Simple Buttons 6. Rectangle Tool 7. 3D Rotation Tool

Adobe Flash CS6348 บทท่ี 11 การจดั ท�ำ โครงงานย่อยและการสรา้ ง Flash Animation 2 มติ ิ และ 3 มติ ิ ใบงานที่ 11.1 ใหน้ กั ศกึ ษาสรา้ ง Flash Animation 2 มติ ิ โดยใชค้ วามร้ทู ไี่ ดศ้ ึกษามาในบทเรียนตา่ ง ๆ ใหไ้ ด้ ผลลัพธด์ งั น้ี

การสร้างภาพเคล่อื นไหวเบ้อื งตน้ Adobe Fla3s49h CS6 ตอนสรา้ งไฟลง์ านใหป้ รับค่า Frame rate เป็น 30 fps 1. น�ำ รปู ภาพเขา้ โดยคลกิ เมนู File > Import > Import to Library 1 2. สรา้ งเลเยอร์ 2 เลเยอร์ เลเยอรแ์ รกตงั้ ชือ่ ว่า image และเลเยอร์ท่ี 2 ต้ังชื่อวา่ text 2 3. ลากรูปจาก Library มาวางบน Stage และจัดวางให้สวยงาม 3 4. กดปมุ่ F8 ท�ำ การ Convert to Symbol ตงั้ ชอื่ วา่ image1 และเลือก Type เป็น Movie Clip

Adobe Flash CS6350 บทที่ 11 การจดั ท�ำ โครงงานยอ่ ยและการสร้าง Flash Animation 2 มิติ และ 3 มติ ิ 4 5. เลือกเฟรมที่ 15 กดป่มุ F6 เพ่อื Insert Keyframe 5 6. เลือกเฟรมท่ี 85 และเฟรมท่ี 100 กดปุ่ม F6 เพ่อื Insert Keyframe 6 7. คลิกเฟรมที่ 1 และเฟรมท่ี 100 คลิกที่ รปู ภาพ ที่แท็บ Properties เมนู Color Effect เลอื กเป็น Alpha และปรับค่าเป็น 0 7

การสร้างภาพเคลอื่ นไหวเบ้ืองตน้ Adobe Fla3s51h CS6 8. คลิกขวาระหวา่ งเฟรมที่ 1 และเฟรมที่ 15 เลอื ก Create Classic Tween ทำ�แบบเดยี วกนั ระหว่างเฟรมที่ 85 และเฟรมที่ 100 8 9. คลิกเฟรมท่ี 110 กดปุ่ม F6 เพ่ือ Insert Keyframe 9 10. คลิกขวาที่รูปภาพ บน Stage เลือกคำ�สง่ั Duplicate Symbol 11. จะแสดงหน้าต่าง Duplicate Symbol ข้นึ มา ตัง้ ช่อื วา่ image2 10 11

Adobe Flash CS6352 บทที่ 11 การจัดทำ�โครงงานย่อยและการสร้าง Flash Animation 2 มติ ิ และ 3 มิติ 12. ดบั เบลิ้ คลกิ ท่ีรปู ภาพบน Stage ท่พี าเนล Properties กดปมุ่ Swap เลอื กรปู ภาพอื่น แล้ว กดปมุ่ OK 12 13. กลบั มาที่ Scene 1 14 13 14. คลิกเฟรมที่ 125 และ 185 กดปุม่ F6 เพอื่ Insert Keyframe 15. คลิกรูปภาพที่เฟรม 125 และเฟรมที่ 185 ท่ี พาเนล Properties ปรบั ค่า Alpha เป็น 100 15 16. คลกิ ขวาระหวา่ งเฟรม 110 และ 125 ทำ�การ Create Classic Tween16

การสรา้ งภาพเคลอ่ื นไหวเบื้องตน้ Adobe Fla3s53h CS6 17. คลิกเฟรมท่ี 200 ทำ�การ Insert Keyframe และปรับคา่ Alpha เปน็ 0 แล้วทำ�การ Create Classic Tween ระหว่างเฟรม 185 และ 200 17 18. คลกิ เฟรมที่ 210 ทำ�การ Insert Keyframe และปรบั ค่า Alpha เปน็ 0 18

Adobe Flash CS6354 บทท่ี 11 การจดั ทำ�โครงงานย่อยและการสรา้ ง Flash Animation 2 มติ ิ และ 3 มติ ิ 19. คลกิ ขวาทีร่ ูปภาพบน Stage เลอื ก Duplicate Symbol หน้าต่าง Duplicate Symbol จะ แสดงขึ้นมาตัง้ ชอื่ ว่า image3 19 20. ดับเบิล้ คลิกทร่ี ูปภาพ ท่พี าเนล Properties กดป่มุ Swap เลือกรปู ภาพตอ่ ไป คลกิ ปุม่ OK 20 21. กลับมาสู่ Scene 1 22. คลกิ เฟรมท่ี 225 ท�ำ การ Insert Keyframe และปรับค่า Alpha เป็น 100 21 22

การสร้างภาพเคล่อื นไหวเบ้ืองต้น Adobe Fla3s55h CS6 23. คลิกขวาระหวา่ งเฟรม 210 และ 225 ท�ำ การ Create Classic Tween 24. คลิกทเ่ี ฟรม 295 และ 310 ท�ำ การ Insert Keyframe 23 24 25. ทเ่ี ฟรม 310 ปรับค่า Alpha ของ Symbol เปน็ 0 25 26. คลกิ ขวาระหว่างเฟรม 295 และ 310 ท�ำ การ Create Classic Tween 26

Adobe Flash CS6356 บทท่ี 11 การจัดทำ�โครงงานยอ่ ยและการสร้าง Flash Animation 2 มิติ และ 3 มติ ิ 27. คลิกที่เลเยอร์ text วาดรูปสี่เหลี่ยมโดยไม่มีเส้นขอบ และเลือกสีพื้นเป็นสีดำ� ขนาด เหมาะสมตามตอ้ งการ 27 28. กดปุ่ม F8 ทำ�การ Convert to Symbol เป็น Movie Clip 28 29. ปรบั คา่ Alpha เปน็ 80 29 30. เลเยอร์ text ใชเ้ คร่ืองมือ Text Tool พมิ พข์ ้อความ จดั วางใหอ้ ยใู่ นรปู สี่เหลีย่ มทวี่ าด ดงั รปู 30

การสรา้ งภาพเคลอ่ื นไหวเบ้ืองตน้ Adobe Fla3s57h CS6 31. กดปุ่ม Shift ค้างไว้ แล้วคลิกที่รูปสี่เหล่ียม กดปุ่ม F8 เพื่อ Convert to Symbol เป็น Movie Clip 31 32. ทเ่ี ลเยอร์ text คลกิ เฟรมท่ี 15 ท�ำ การ Insert Keyframe 32 33. คลกิ เฟรมท่ี 1 เลื่อนสเ่ี หลย่ี มข้นึ ไปดา้ นบนให้ออกนอก Stage ปรบั ค่า Alpha เปน็ 0 ดังรปู 33

Adobe Flash CS6358 บทท่ี 11 การจดั ทำ�โครงงานย่อยและการสร้าง Flash Animation 2 มติ ิ และ 3 มติ ิ 34. Create Classic Tween ร3ะห4วา่ งเฟรม 1 และ 15 แล้วกำ�หนดค่า Ease เป็น 100 ดงั รูป 35. Insert Keyframe ที่เฟรม 85 และ 100 35 36. เฟรมท่ี 100 เลือ่ นรปู สเ่ี หลี่ยมออกไปนอก Stage และปรับคา่ Alpha เป็น 0 36

การสรา้ งภาพเคลอ่ื นไหวเบอื้ งต้น Adobe Fla3s59h CS6 37. Create Classic Tween ระหว่างเฟรมที่ 85 และ 100 กำ�หนดคา่ Ease เป็น -100 ดังรปู 37 37 38 38. Insert Keyframe เฟรมที่ 110 กำ�หนดค่า Alpha เปน็ 0 39. คลกิ ขวาทีร่ ูปภาพ เลอื ก Duplicate Symbol หนา้ ต่าง Duplicate Symbol จะแสดงข้นึ มาตัง้ ชื่อวา่ Description 1 39

Adobe Flash CS6360 บทท่ี 11 การจัดทำ�โครงงานยอ่ ยและการสร้าง Flash Animation 2 มิติ และ 3 มิติ 40. ดับเบ้ลิ คลิกท่ีซมิ โบล Description 1 เข้าไปแก้ไขข้อความ ดงั รปู 40 41. จากนั้นกลบั สู่หน้าหลกั Scene 1 42. Insert Keyframe ท่เี ฟรม 125 ปรบั ค่า Alpha เป็น 100 และปรับค่า Y เป็น 48.40 ดังรปู 43. คลกิ ขวา Create Classic Tween ระหวา่ งเฟรมท่ี 110 และ 125 กำ�หนดคา่ Ease เปน็ 100 43

การสรา้ งภาพเคล่ือนไหวเบอื้ งต้น Adobe Fla3s61h CS6 43 44 44. Insert Keyframe ทเ่ี ฟรม 185 และ 200 45. ที่เฟรม 200 ปรับค่า Alpha เป็น 0 และ เลอ่ื นรปู สเ่ี หล่ยี มออกนอก Stage 45 46. คลิกขวาระหว่างเฟรม 185 และ 200 ทำ� การ Create Classic Tween 47. กำ�หนดค่า Ease เปน็ -100 ดังรปู 47

Adobe Flash CS6362 บทที่ 11 การจัดท�ำ โครงงานยอ่ ยและการสรา้ ง Flash Animation 2 มติ ิ และ 3 มิติ 48. Insert Keyframe ท่ีเฟรม 210 ปรับคา่ Alpha เปน็ 0 49. ทำ�การ Duplicate Symbol เหมอื นข้อ 39. ต้งั ชอื่ วา่ Description 2 49 50. ดับเบ้ิลคลิกท่ีซิมโบล Description 2 เพื่อแก้ไขข้อความ เม่ือแก้ไขเสร็จแล้วให้กลับสู่ Scene 1 50 51. Insert Keyframe ท่ีเฟรม 225 ปรับค่า Alpha เปน็ 100 และค่าแกน Y เป็น 48.40 51 52. Create Classic Tween ระหวา่ งเฟรม 210 และ 225 แลว้ กำ�หนดค่า Ease เปน็ 100

การสรา้ งภาพเคล่อื นไหวเบ้ืองตน้ Adobe Fla3s63h CS6 52 53. Insert Keyframe ท่ีเฟรม 295 และ 310 54. เฟรมที่ 310 ก�ำ หนดค่า Alpha เปน็ 0 และเลือ่ นซมิ โบล Description 2 ออกจาก Stage 54 55. Create Classic Tween ระหว่างเฟรม 295 และ 310 แลว้ ก�ำ หนดคา่ Ease เปน็ -100 55 56. ทดสอบผลงานที่สร้าง กดปุ่ม Ctrl + Enter

Adobe Flash CS6364 บทที่ 11 การจดั ทำ�โครงงานยอ่ ยและการสรา้ ง Flash Animation 2 มิติ และ 3 มิติ ใบงานที่ 11.2 ให้นักเรียนสร้าง Flash Animation 3 มิติ โดยใช้ความรู้ที่ศึกษาจากบทเรียนต่าง ๆ มาสร้าง ผลงานใหไ้ ด้ดงั นี้ 1. นำ�ภาพเขา้ ส่โู ปรแกรม โดยคลกิ File > Import > Import to Library 1

การสรา้ งภาพเคล่ือนไหวเบื้องต้น Adobe Fla3s65h CS6 2. สร้างเลเยอร์ 2 เลเยอร์ ตงั้ ช่ือวา่ bg และ globe 3. ลากรปู ภาพพน้ื หลงั (ไฟล์ bg) ลง Stage ท่เี ลเยอร์ bg 2 3 4. จัดวางบน Stage ใหส้ วยงาม คลิกไอคอน ด้านขวา ก�ำ หนดค่าดังรปู 4

Adobe Flash CS6366 บทท่ี 11 การจัดทำ�โครงงานยอ่ ยและการสร้าง Flash Animation 2 มติ ิ และ 3 มติ ิ 5. คลิกเมนู Insert > New Symbol ดังรปู 5 6. ตั้งช่อื วา่ map กดปุ่ม OK 6 7. ลากรปู ภาพแผนท่ี (ในท่ีน้ชี ื่อไฟลว์ ่า EarthMap) ลงมาใน Stage ปรบั ขนาดให้เหมาะสม 8. จากนั้น Copy รปู ภาพทก่ี �ำ หนดคา่ เสรจ็ แล้ว และวางต่อกันอย่างในรูป 7 8

การสรา้ งภาพเคลื่อนไหวเบือ้ งตน้ Adobe Fla3s67h CS6 9. ทำ�การรวมรูป 2 รปู เขา้ ดว้ ยกนั คลกิ เลอื กรปู ท้งั 2 รปู แล้วเลอื กเมนู Modify > Group 9 10. จดั ตำ�แหนง่ ใหส้ วยงาม โดยกำ�หนดคา่ แบบในขอ้ 4. 10 11. กลบั สูซ่ นี หลกั Scene 1 12. สรา้ งซมิ โบลใหม่ โดยเลือกเมนู Insert > New Symbol 13. ตงั้ ชื่อซมิ โบลเป็น globe และเลอื ก Type เป็น Movie Clip ดงั รปู

Adobe Flash CS6368 บทท่ี 11 การจัดทำ�โครงงานยอ่ ยและการสรา้ ง Flash Animation 2 มิติ และ 3 มิติ 13 14. สร้างรปู วงกลม โดยใช้ Oval Tool วาดแบบไมม่ ีเส้นขอบ และเปลี่ยนชอ่ื เลเยอรเ์ ปน็ oval 14 15. สรา้ งเลเยอรใ์ หม่ ต้ังช่อื ว่า map 15

การสรา้ งภาพเคล่อื นไหวเบ้อื งตน้ Adobe Fla3s69h CS6 16. คลกิ รปู ส่เี หล่ยี มสี ๆ ที่เลเยอร์ oval เพอ่ื ใหร้ ูปแสดงเส้น Outline 16 17. คลิกเลเยอร์ map แล้วลาก Movie Clip ชอ่ื Map ลง Stage 17 18. จัดวางซิมโบล globe ให้อยู่ในตำ�แหน่งท่ีเหมาะสม และเลื่อนไปทางขวาให้ชิดขอบของ ซิมโบล map 18

Adobe Flash CS6370 บทท่ี 11 การจดั ทำ�โครงงานยอ่ ยและการสรา้ ง Flash Animation 2 มิติ และ 3 มิติ 19. กดปมุ่ F6 เพอ่ื Insert Keyframe ทเ่ี ฟรม 100 ของเลเยอร์ map และกดปมุ่ F5 เพอ่ื Insert Frame ทเ่ี ลเยอร์ 100 ของเลเยอร์ oval 19 20. ที่เลเยอร์ map กดรปู สเ่ี หล่ียมสี ๆ เพือ่ แสดงเฉพาะเส้น Outline 21. เล่อื นซิมโบล map ไปทางดา้ นขวาเร่ือย ๆ จนได้ โดยระวงั ไมใ่ หม้ กี ารเคลือ่ นทีใ่ นแนวแกน Y หรือแนวต้ัง ดงั รูป 21 22. คลิกเลเยอร์ map แล้วคลกิ ขวาระหว่างเฟรม 1 และ 100 ท�ำ การ Create Classic Tween 22

การสรา้ งภาพเคลื่อนไหวเบื้องตน้ Adobe Fla3s71h CS6 23. คลกิ ขวาท่ีเลเยอร์ oval เลอื กค�ำ สงั่ Mask 24 23 24. คลิกที่ Scene 1 เพ่อื กลับไปสหู่ น้าหลกั 25. คลกิ เลือกซิมโบล globe ลากลงสู่ Stage และจัดวางใหส้ วย ดังรูป 25

Adobe Flash CS6372 บทที่ 11 การจัดทำ�โครงงานยอ่ ยและการสร้าง Flash Animation 2 มิติ และ 3 มิติ 25 26. ทพ่ี าเนล Properties ของซิมโบล globe ไปที่ Filters กดปมุ่ เลือก Glow แล้ว กำ�หนดคา่ ดงั รปู ก�ำ หนดค่า / Color : #3366ff 26

การสรา้ งภาพเคลอื่ นไหวเบ้ืองต้น Adobe Fla3s73h CS6 27. กดปุม่ เพอ่ื เพิ่ม Filters อีกคร้ัง เลอื ก Drop Shadow และกำ�หนดค่า ดงั น้ี 27 กำ�หนดค่า 28. กดป่มุ Ctrl + Enter เพือ่ ทดสอบผลลัพธ์

ค�ำ ถามAdobe37F4lash CS6 ค�ำ ถามเพื่อการทบทวน เพื่อการทบทวน บทที่ 1 ท�ำ ความรู้จกั กราฟกิ และแอนิเมชัน 1. แม่สคี อื อะไร 2. วงจรสคี ืออะไร 3. วงจรสีแบง่ ตามอณุ หภมู ขิ องสีได้ก่กี ลุ่ม อะไรบา้ ง และแต่ละกลมุ่ มีลักษณะอยา่ งไร 4. กราฟิกแบบ 2 มิต ิ และกราฟกิ แบบ 3 มติ ิ แตกตา่ งกันอยา่ งไร 5. ภาพบิตแมปหรอื ราสเตอร์มีลกั ษณะอย่างไร 6. ภาพเวคเตอร์มลี ักษณะอยา่ งไร 7. การสรา้ งภาพแอนเิ มชันน้ันทำ�ได้อยู่ 2 วธิ ี คอื อะไรบ้าง 8. ภาพเคล่ือนไหวคอื อะไร 9. แฟลชมูฟวเี่ กิดจากอะไร 10. ขน้ั ตอนการสร้างแอนเิ มชันมอี ะไรบ้าง 11. คำ�ศพั ท์ 1. Bitmap or Raster 2. Vector Picture 3. Storyboard 4. Pre - Production 5. Production 6. Post - Production บทท่ี 2 เรมิ่ ต้นรู้จกั กับเทคโนโลยีของ Adobe Flash CS6 1. โปรแกรม Adobe Flash คอื อะไร 2. ไฟล์เอกสาร (Flash Document) มีฟอรแ์ มตแบบใด และเปน็ ไฟลป์ ระเภทใด 3. ไฟลม์ ฟู ว่ี (Flash Movie) มฟี อรแ์ มตแบบใด และเปน็ ไฟลป์ ระเภทใด 4. เมนูบาร์ (Menu Bar) คืออะไร 5. พาเนล (Panel) คืออะไร 6. สเตจคือส่วนใดของโปรแกรม Adobe Flash 7. ไทม์ไลนม์ ีหน้าท่ีอยา่ งไร 8. ซีนเปรยี บเสมือนอะไร 9. อินสแตนซค์ อื อะไร 10. มูฟวคี่ ลปิ คืออะไร 11. คำ�ศพั ท์ 1. Flash Document 2. Flash Movie 3. Toolbox 4. Scene 5. Movie 6. Symbol 7. Movie Clip 8. Button 9. Graphic 10. Instance

การสรา้ งภาพเคลือ่ นไหวเบ้อื งต้น Adobe Fla3s75h CS6 บทที่ 3 สรา้ งชนิ้ งานจากเคร่ืองมือของโปรแกรม Adobe Flash CS6 1. โปรแกรม Adobe Flash มลี กั ษณะการวาดรปู รา่ งอย่างไรบ้าง 2. เครอื่ งมือ Line Tool มหี นา้ ท่ีอยา่ งไร 3. หากตอ้ งการบังคบั เส้นใหท้ ำ�มมุ ทลี ะ 45 ํ หรือ 90 ํ ควรปฏบิ ัติอยา่ งไร 4. Pencil Tool มีหนา้ ท่อี ย่างไรในโปรแกรม Adobe Flash 5. เคร่อื งมอื Pencil สามารถเลอื กปรับแตง่ ลกั ษณะเสน้ ทว่ี าดได้อยา่ งไรบา้ ง 6. การวาดรูปทรงเรขาคณิตแบบ Rectangle และ Rectangle Primitive แตกตา่ งกันอยา่ งไร 7. Pen Tool เปน็ เครื่องมือทม่ี ีการใช้งานอยา่ งไร 8. Brush Tool มกี ารใชง้ านอยา่ งไร 9. Eraser Tool มีรูปแบบในการลบรูปภาพอย่างไรบา้ ง 10. Pen Tool มีหน้าที่อยา่ งไร 11. คำ�ศัพท์ 1. Object Drawing 2. Merge Drawing 3. Snap to Objects 4. Line Tool 5. Pen Tool 6. Inner Radius 7. Paint Behind 8. Paint Fills 9. Paint Selection 10. Paint Inside บทที่ 4 การสร้างและใสก่ ลเมด็ ให้ตวั อักษร Adobe Flash CS6 1. ขอ้ ความในโปรแกรม Flash มีลกั ษณะอยา่ งไร 2. Text Tool มหี น้าทีส่ ำ�หรบั ท�ำ งานอย่างไร 3. Embedded Fonts มลี ักษณะอยา่ งไร 4. Dynamic Text มีลักษณะอย่างไร 5. Fonts Symbols มีลกั ษณะอยา่ งไร 6. Input Text ควรน�ำ ไปใช้งานลักษณะอย่างไร 7. การแกไ้ ขและยา้ ยต�ำ แหนง่ ข้อความท�ำ ไดอ้ ยา่ งไร 8. การแยกสว่ นข้อความเปน็ รูปทรงท�ำ เพ่ืออะไร 9. การแก้วรรณยุกตล์ อยควรทำ�อย่างไร 10. การแกว้ รรณยกุ ตล์ อยโดยวิธกี ารใสว่ รรณยกุ ต์ดว้ ยวิธีป้อนรหัสมีขน้ั ตอนอยา่ งไร 11. คำ�ศัพท์ 1. Dynamic Text 2. Input Text 3. Static Text 4. Text Tool 5. Embedded Fonts 6. Device Fonts 7. Fonts Symbols 8. Break Apart

Adobe37F6lash CS6 คำ�ถามเพอ่ื การทบทวน บทท่ี 5 เตมิ แตง่ สภี าพด้วยสสี ันให้สวยงาม 1. โมเดลสีคืออะไร 2. โมเดล RGB เกดิ ขึน้ ได้อยา่ งไร 3. โมเดล HSB เกิดข้ึนไดอ้ ยา่ งไร 4. เกรเดียนทม์ ลี ักษณะของสีอย่างไร 5. รปู แบบการไลส่ ีของเกรเดียนท์มอี ย่างไรบ้าง 6. ลกั ษณะการเรยี งต่อของสีเกรเดียนทม์ ีรปู แบบอย่างไรบ้าง 7. ค่า Alpha มีไว้ใชง้ านอยา่ งไร 8. Ink Bottle Tool มีหน้าท่ีในการทำ�งานอย่างไร 9. Paint Bucket Tool เป็นเคร่อื งมือท่มี ีลักษณะการทำ�งานอยา่ งไร 10. ปุม่ นมี้ กี ารใชง้ านอยา่ งไร 11. ค�ำ ศัพท์ 1. Color Model 2. Color Swatches 3. Duplicate Swatch 4. Gradient 5. Alpha 6. Ink Bottle Tool 7. Paint Bucket Tool 8. Eyedropper บทท่ี 6 รู้จกั กับ Timeline และ Frame 1. ไทมไ์ ลนม์ ีลกั ษณะหนา้ ทอ่ี ย่างไร 2. ไทมไ์ ลน์มสี ว่ นประกอบหลักอย่างไรบ้าง 3. เลเยอร์มลี ักษณะเปน็ อยา่ งไร 4. เฟรมมีลกั ษณะเป็นอยา่ งไร 5. หมายเลขเฟรมมหี นา้ ท่ีอยา่ งไร 6. หัวอ่านมีลกั ษณะหน้าทอ่ี ยา่ งไรบา้ ง 7. ชนดิ ของเฟรมมีอะไรบา้ ง และลักษณะเปน็ อย่างไร 8. ซีนคืออะไร 9. Onion Skin ใชส้ �ำ หรบั ท�ำ อะไร 10. การกำ�หนดความเรว็ ในการแสดงภาพเคล่อื นไหวน้ันสามารถท�ำ ไดอ้ ยา่ งไร 11. ค�ำ ศัพท์ 1. Layer 2. Frame 3. Timeline 4. Frame Number 5. Play Head 6. In - Between Frame 7. Keyframe 8. Motion Tween 9. Shape Tween 10. Frame Rate 11. Scene

การสรา้ งภาพเคลื่อนไหวเบื้องต้น Adobe Fla3s77h CS6 บทที่ 7 ให้ Layer ชว่ ยจดั การภาพทซี่ ับซ้อน 1. เลเยอรค์ อื อะไร 2. วธิ กี ารสร้างเลเยอรใ์ หมส่ ามารถทำ�ได้อย่างไร 3. การเลอื กเลเยอรท์ ำ�ได้อย่างไรบา้ ง 4. การลบเลเยอร์มีวิธกี ารอยา่ งไร 5. เลเยอรม์ าสค์ คอื อะไร 6. ไกด์เลเยอรม์ หี น้าท่ีในการทำ�งานอยา่ งไร 7. การซอ่ น/แสดงเลเยอร์สามารถท�ำ ไดอ้ ยา่ งไร 8. การลอ็ ก/ปลดลอ็ กเลเยอร์มีไว้เพอ่ื อะไร 9. การเลือกเลเยอร์สามารถท�ำ ไดอ้ ยา่ งไรบ้าง 10. คำ�ศพั ท์ 1. Layer 2. Layer Mask 3. Guide Layer 4. Delete Layer 5. Layer Properties บทที่ 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 1. การซมู ภาพมีหลกั การทำ�งานอยา่ งไร 2. การเขย่าภาพมหี ลักการอยา่ งไรในการท�ำ งาน 3. เคลื่อนไหวแบบเฟรมตอ่ เฟรมมลี กั ษณะอย่างไร 4. เคลื่อนไหวแบบทวีนมีการเคล่อื นไหวอยา่ งไร 5. Motion Tween การเปลีย่ นแปลงแบบเคลือ่ นทม่ี ีการเปลี่ยนแปลงอย่างไร 6. Shape Tween การเปลีย่ นแปลงรูปรา่ งเปน็ ลกั ษณะการเปล่ียนแปลงแบบใด 7. Bone Tool มีลักษณะการทำ�งานอยา่ งไร 8. Bind Tool มกี ารนำ�ไปใช้งานในลกั ษณะใด 9. คำ�ศัพท์ 1. Zoom In/Out 2. Rotate 3. Tilting 4. Tracking 5. Transition 6. Alpha 7. Frame - by - Frame Animation 8. Tween Animation 9. Motion Tween 10. Shape Tween

Adobe37F8lash CS6 ค�ำ ถามเพอ่ื การทบทวน บทท่ี 9 การเพ่ิมเสยี งประกอบในช้ินงานเพอื่ ความเพลดิ เพลนิ 1. เสยี งประกอบในมูฟวขี่ อง Flash มอี ะไรบ้าง ลักษณะอยา่ งไร 2. การอมิ พอร์ตเสยี งสามารถท�ำ ได้อย่างไร 3. เอฟเฟ็กตข์ องเสยี งแบบ Fade Left to Right มกี ารทำ�งานอย่างไร 4. เอฟเฟ็กต์ของเสยี งแบบ Fade In มีการทำ�งานอย่างไร 5. วธิ ีการเล่นเสียงแบบ Event มีลักษณะอยา่ งไร 6. วธิ กี ารเล่นเสยี งแบบ Stop มีลกั ษณะอย่างไร 7. วิธกี ารบีบอัดเสยี งแบบ ADPCM เป็นแบบใด 8. Speech มกี ารบบี อัดอย่างไร 9. RAW มีลักษณะการบบี อดั อยา่ งไร 10. คำ�ศัพท์ 1. Event Sound 2. Stream Sound 3. Sync (Synchronization) 4. Stream 5. Loops 6. Compression 7. Sample Rate บทท่ี 10 การน�ำ เสนอผลงานให้แพร่หลาย 1. กระบวนการพับลชิ เอกสาร Flash มีขนั้ ตอนอย่างไรบา้ ง 2. Publish Setting แบบ .swf มีลกั ษณะการทำ�งานอย่างไร 3. ออปชน่ั Template ในการพับลิชแบบ HTML มรี ายละเอียดอยา่ งไร 4. ไฟล์ SWC คอื ไฟลแ์ บบใด 5. ออปชนั่ Bit Depth ในการพบั ลชิ แบบ PNG มีรายละเอียดอยา่ งไร 6. ออปชั่น Dither Solids ในการพบั ลชิ แบบ PNG มรี ายละเอยี ดอยา่ งไร 7. เราสามารถพบั ลิชเอกสาร Flash ได้ด้วยวธิ ีการอยา่ งไรบา้ ง 8. คำ�ศัพท์ 1. Publish 2. Script 3. Match Movie 4. Pixels 5. No Border 6. No Scale 7. Flash Component 8. JPEG Quality 9. Audio Stream 10. Compress Movie

การสร้างภาพเคลอื่ นไหวเบ้อื งต้น Adobe Fla3s79h CS6 บทที่ 11 การจัดท�ำ โครงงานย่อย และการสรา้ ง Flash Animation 2 มติ ิ และ 3 มิติ 1. การสรา้ งปมุ่ สถานะเฟรม UP จะมลี กั ษณะอยา่ งไร 2. การสร้างป่มุ สถานะเฟรม Over จะมีลกั ษณะอยา่ งไร 3. การสรา้ งปุ่มสถานะเฟรม Down จะมลี ักษณะอย่างไร 4. การสร้างปุม่ สถานะเฟรม Hit จะมลี กั ษณะอยา่ งไร 5. เหตกุ ารณ์ Press มกี ารทำ�งานอย่างไรส�ำ หรบั การสร้างลิงค์ 6. Rectangle Tool ใชส้ ำ�หรับทำ�อะไร 7. Selection Tool มีหน้าทกี่ ารทำ�งานอยา่ งไร 8. การเปล่ียนรูปสี่เหล่ยี มใหเ้ ป็นมฟู วี่สามารถทำ�ได้อยา่ งไร 9. 3D Rotation Tool มลี ักษณะการทำ�งานอย่างไร 10. การเปลยี่ นรูปทรงใหเ้ ป็นซมิ โบลทำ�ได้อยา่ งไร 11. คำ�ศพั ท์ 1. 3D Rotation Tool 2. Rectangle Tool 3. Remove Frames 4. Selection Tool 5. เฟรม Up 6. เฟรม Over 7. เฟรม Down 8. เฟรม Hit 9. Enable Simple Buttons 10. Test Scene

Adobe380Flash CS6 ค�ำ ศัพท์ บทท่ี 1 ท�ำ ความรจู้ ักกราฟกิ และแอนเิ มชนั ค�ำ ศพั ท์ แมส่ ี สีท่ีน�ำมาผสมกันแล้วท�ำให้เกิดสีใหม่ สีของแสง มีความแตกตา่ งสนั้ ยาวของคลน่ื แสงท่ีตามองเหน็ สีของสาร สีทเ่ี รามองเห็นบนวัตถตุ ่าง ๆ วงจรสี การวางเน้ือสีโดยเรียงตามอุณหภูมิของสีคือ สีโทนร้อน และสี โทนเย็น ภาพบิตแมปหรือราสเตอร์ ภาพที่เกิดจากชิ้นส่วนเล็ก ๆ มาเรียงต่อกันมีความละเอียดเป็น (Bitmap or Raster) หนว่ ยพกิ เซล (Pixel) ภาพเวคเตอร์ (Vector Picture) ภาพที่เกิดจากลายเส้น ปรับ ย่อขนาดได้ โดยไม่มีผลต่อความ ละเอยี ดของภาพ Animation Basic การสรา้ งภาพเคล่อื นไหว ภาพเคลอ่ื นไหว ภาพโครงร่างทแ่ี สดงตอ่ เนอื่ งกันอยา่ งรวดเรว็ แฟลชมฟู วี่ (Flash Movie) เกิดจากเฟรมภาพหลาย ๆ เฟรมและเลเยอร์หลายเลเยอร์ ประกอบเขา้ ดว้ ยกนั Storyboard การลำ�ดับภาพตามเน้ือเร่อื งท่ีต้องการ Pre - Production การจดั เตรยี มองคป์ ระกอบของงาน Production การสร้างชน้ิ งาน Post - Production การแปลงช้นิ งาน บทที่ 2 เริ่มตน้ รูจ้ กั กับเทคโนโลยีของ Adobe Flash CS6 โปรแกรม Adobe Flash โปรแกรมสร้างสรรค์งานกราฟกิ และภาพเคลอ่ื นไหว แอ็กชั่นสครปิ ต์ (ActionScript) ภาษาสครปิ ต์ทเ่ี อาไวใ้ ช้เขียนโดยเฉพาะ Flash Player Virtual Machine ท่ีใชใ้ นการทำ�งานของไฟล์ ไฟลเ์ อกสาร (Flash Document) มีฟอร์แมตเป็น .fla เป็นไฟล์จากการบันทึกในข้ันตอนการสร้าง ไฟล์มูฟวี่ (Flash Movie) Create from Template ชน้ิ งาน มีฟอร์แมตเป็น .swf นี้เป็นผลลัพธ์สุดท้าย จากการพับลิช (Publish) ไฟลเ์ อกสาร สร้างงานใหมใ่ ห้เป็นรปู แบบไฟลง์ านสำ�เรจ็ รูปอีกไฟล์

การสรา้ งภาพเคลือ่ นไหวเบ้ืองตน้ Adobe Fla3s8h1 CS6 Open a Recent Item เลือกไฟล์โดยการ Open จากไฟลท์ ี่มีอยู่เดิม Create New เลอื กสรา้ งไฟลใ์ หม่ เมนบู าร์ (Menu Bar) แถบเมนคำ�ส่งั ต่าง ๆ ไตเตลิ บาร์ (Title Bar) แถบช่ือไฟลท์ ่ีกำ�ลงั ใช้งาน แถบแกไ้ ข (Edit Bar) แถบเครอื่ งมอื ท่ีใชเ้ ลือกซนี (Scene) ท่จี ะทำ�งาน พาเนล (Panel) กรอบหน้าตา่ งยอ่ ยทม่ี คี ำ�สงั่ และเคร่ืองมอื ต่าง ๆ Toolbox กล่องเคร่ืองมือ Selection เลือกออบเจก็ ต์ Subselection ปรบั แต่งรปู ทรงออบเจ็กต์ให้มีรูปร่างตามตอ้ งการ Free Transform การหมนุ หรอื ปรับเปล่ยี นขนาดออบเจก็ ต์ 3D Rotation การปรับแตง่ รปู ทรงออบเจ็กตแ์ บบ 3 มิติ Lasso การเลอื กออบเจก็ ตห์ รอื พื้นที่บางส่วนของออบเจ็กต์ Pen เครื่องมือวาดรปู Text เครื่องมือพิมพข์ ้อความ Line เครอ่ื งมือวาดเส้นตรง Rectangle เครอ่ื งมอื วาดส่ีเหล่ียม Pencil Tool เคร่อื งมือวาดรูปทรง เส้นตรง เสน้ โคง้ Brush เครื่องมือระบายสี Bone การสรา้ งข้อต่อการเคล่ือนไหวให้กับออบเจก็ ต์ Paint Bucket เติมสพี น้ื ใหก้ บั ออบเจก็ ต์ Eyedropper ก๊อปปีส้ จี ากออบเจ็กต์อื่น Eraser ลบเส้นหรือสีพน้ื ของออบเจ็กต์ Stroke Color เลอื กสเี ส้น Fill Color เลอื กสีพืน้ Black and White เลือกเสน้ เปน็ สีดำ�และพื้นเป็นสขี าว Swap Colors สลบั สีเสน้ กบั สีพ้ืน Hand เลือ่ นดูสว่ นตา่ ง ๆ ของภาพ Zoom ยอ่ /ขยายมมุ มองภาพบนสเตจ สเตจ (Stage) พน้ื ที่สีขาวตรงกลางหน้าจอท่ีใช้สำ�หรบั จดั วางวตั ถุ Default เท่ากบั ขนาดเรม่ิ ต้นเดมิ คือ 500 × 400 px Enlarge ขยายมมุ มองภาพ Reduce ยอ่ มุมมองภาพ

Adobe382Flash CS6 ค�ำ ศัพท์ Ruler ไมบ้ รรทัด เส้นกรดิ (Grid) ตารางท่ีช่วยในการจดั วางออบเจก็ ต์ มฟู ว่ี (Movie) รวมเร่ืองราวทัง้ หมดจากการนำ�ซนี ฉากมาเชื่อมโยงเข้าด้วยกัน ซิมโบล (Symbol) การนำ�วัตถุตน้ แบบไปใชเ้ ปน็ ส่วนประกอบในชิ้นงาน มฟู ว่ีคลปิ (Movie Clip) เคร่อื งมอื สร้างภาพเคลือ่ นไหว กราฟิก (Graphic) ซิมโบลสำ�หรับออบเจ็กต์ที่ใช้เป็นส่วนประกอบของการสร้างภาพ อินสแตนซ์ (Instance) เคลื่อนไหว สำ�เนาของซิมโบลท่ถี ูกดึงมาใช้งานบนสเตจ บทที่ 3 สรา้ งชิ้นงานจากเครือ่ งมือของโปรแกรม Adobe Flash CS6 Object ชิน้ งาน Shape รปู ทรง พื้นภาพ (Fill) พื้นทีภ่ ายในเส้นขอบ เสน้ (Line) โครงร่างของภาพ Object Drawing รปู ทรงที่วาดจะเปน็ อสิ ระจากกัน Merge Drawing รปู ทรงทีว่ าดแล้วจะมีผลกระทบต่อรูปทรงอน่ื Fill Color กำ�หนดสีพน้ื Stroke Color กำ�หนดเสน้ ขอบ Line Tool เครอ่ื งมือท่ีใช้ในการวาดเสน้ ตรง Snap to Objects วงกลมเล็ก ๆ ทำ�ให้สามารถวาดเส้นแต่ละเส้นเข้าหากันจนเกิด Straighten Smooth ความตอ่ เนอ่ื งขน้ึ มาไดโ้ ดยอัตโนมัติ Ink ปรับเสน้ ใหเ้ ปน็ แนวตรง Brush ปรับเสน้ ให้โคง้ มนและเรียบ Eraser ไมม่ กี ารปรับเสน้ ใด ๆ เครื่องมือคล้ายพกู่ นั สามารถใช้ระบายภาพ การลบสีพื้นหรือเสน้ บทที่ 4 การสรา้ งและเพิ่มกลเม็ดใหต้ วั อกั ษร Adobe Flash CS6 ขอ้ ความคงที่ (Static Text) ข้อความธรรมดาทวั่ ไป ขอ้ ความไดนามิก (Dynamic Text) ข้อความที่สามารถเปลี่ยนแปลงได้หรือข้อมูลที่รับจากการเขียน โคด้ ของโปรแกรม ข้อความอินพุต (Input Text) ฟิลด์ข้อความรับมาจากการป้อนของผู้ใช้ผ่านแบบฟอร์ม เช่น User Name หรอื Password

การสร้างภาพเคลื่อนไหวเบ้อื งตน้ Adobe Fla3s8h3 CS6 Text Tool เครอ่ื งมอื ทใ่ี ชพ้ มิ พข์ อ้ ความ Family ฟอนตต์ วั อักษร Size ขนาดตัวอักษร Letter Spacing ระยะห่างระหว่างตวั อกั ษรโดยรวม Color สตี วั อักษร Auto Kern ระยะห่างระหว่างคอู่ กั ษร Format การจดั ย่อหน้าชดิ ซ้าย ก่ึงกลาง ชดิ ขวา Spacing และ Margins รปู แบบการเยื้องและระยะบรรทัด Embedded Fonts การฝังฟอนตไ์ ปในไฟล์ Fonts Symbols เป็นการสร้างฟอนตข์ ึน้ มาในรูปแบบของซมิ โบล Break Apart แยกตวั อักษร บทที่ 5 เติมแต่งแต้มสีภาพดว้ ยสสี ันใหส้ วยงาม โมเดลสี (Color Model) การแทนคา่ สมี าตรฐานระหวา่ งเคร่อื งคอมพิวเตอร์กับอปุ กรณ์อื่น โมเดล RGB ภาพแสดงการรวมตัวของสเปกตรัมสี 3 สีของสีแดง เขียว และ โมเดล HSB นำ้� เงิน Alpha H (Hue) สีของวัตถทุ ส่ี ะทอ้ นเขา้ มายงั ตาเรา คอื สีแดง S (Satu- Black and White No Color ration) คอื สัดสว่ นของสีเทาอยูใ่ นสนี ้ัน และ B (Brightness) Swap Colors ความสว่างและความมืดของสี Color Swatches กำ�หนดความโปร่งใสหรอื ทบึ ของสี Duplicate Swatch การปรบั สใี ห้พ้ืนเป็นสขี าวและเสน้ เปน็ สดี ำ� Delete Swatch เลอื กรปู แบบไม่เติมสีของเสน้ หรอื สขี องพ้ืนใด ๆ Add Colors การสลับสีระหวา่ งสเี ส้นและสีพน้ื Replace Colors แสดงจานสีให้เราเลอื กสขี องเส้นและสขี องพ้นื Load Default Colors การสร้างสีใหม่จากตารางให้เกิดขึ้นมาอีกช่องหน่ึงท่ีส่วนท้ายของ Save Colors ตารางสี ลบสที ก่ี ำ�ลังเลอื กในตารางสี อมิ พอร์ตชดุ สจี ากไฟล์ชดุ สที ีม่ ีฟอรแ์ มต .clr (Flash Color Set), .act (Color Table) หรือไฟลภ์ าพเขา้ มาต่อทา้ ยตารางสี อิมพอรต์ ชดุ สจี ากไฟล์ .clr, .act หรือไฟล์ภาพเข้ามาแทนท่ีสีเดิม ในตารางสี เรียกชดุ สีเริ่มตน้ (Default) ของโปรแกรมกลับมาใช้ บนั ทึกชุดสใี นตารางสีเพอื่ นำ�ไปใชก้ ับไฟลอ์ นื่

Adobe384Flash CS6 คำ�ศัพท์ Clear Colors ลบสีทัง้ หมดออกจากตาราง ยกเวน้ สีขาว สดี ำ� Web 216 เรียกใช้ชุดสี Web 216 สำ�หรับการสร้างเว็บไซต์แทนท่ีชุดสี Sort by Color เกรเดยี นท์ (Gradient) ในตาราง แบบแนวตรง (Linear) จัดเรียงสใี นตารางใหม่ โดยเรียงตามเนื้อสี (Hue) แบบรศั มวี งกลม (Radial) สที ่ีมกี ารไลร่ ะดบั โทนสี Overflow ไลจ่ ากสีหน่ึงไปยงั สอี ่นื ในทิศทางแนวตรง Reflect ไล่จากสีหน่ึงไปยังสีอื่นโดยเร่ิมจากจุดศูนย์กลางกระจายออกใน Repeat Ink Bottle Tool แนววงกลม Paint Bucket Tool การเรียงต่อกัน Eyedropper Tool เรียงต่อสีแบบสลับแนวจนเต็มออบเจ็กต์ เรียงตอ่ สีในแนวเดิมแต่ละชดุ จนเตม็ ออบเจ็กต์ เครอ่ื งมือท่ีใชใ้ นการเปล่ียนคณุ สมบตั ขิ องเส้น (Stroke) เครอื่ งมอื สำ�หรบั เตมิ สพี น้ื (Fill) ใหก้ ับภาพ ใช้ดูดสีจากภาพอ่ืน บทที่ 6 รูจ้ กั กบั Timeline และ Frame ไทม์ไลน์ (Timeline) ใชค้ วบคมุ การเคล่ือนไหวของภาพและวางเสยี งเข้าไปได้ เฟรม (Frame) อยู่ในสว่ นของหนา้ ต่างไทม์ไลน์ หมายเลขเฟรม (Frame Number) ส่วนประกอบหนึ่งท่ีอยู่บน Timeline เป็นตัวอักษรเรียงกันอยู่ หัวอา่ น (Play Head) คยี ์เฟรม (Keyframe) เหนอื เฟรม เฟรมระหวา่ งกลาง เส้นสีแดงทบ่ี อกตำ�แหน่งวา่ กำ�ลงั ทำ�งานอยทู่ ่เี ฟรมใด (In - Between Frame) เฟรมทม่ี อี อบเจก็ ต์วางอยู่ ทำ�ใหเ้ ลอื ก แกไ้ ขหรอื ปรบั แตง่ ได้ การขยายเฟรม เฟรมทใ่ี ชข้ ยายชว่ งเวลาในการแสดงเนอ้ื หาของคยี เ์ ฟรมใหย้ าวขน้ึ Insert Frame การขยายช่วงเวลาในการแสดงเนื้อหาให้ยาวออกไปท้ังภาพ Remove Frames Frame Rate เคล่ือนไหวและภาพนง่ิ Frame Per Second การเพิม่ เฟรมแทรกระหว่างเฟรมหนึ่งกับอกี เฟรมหนงึ่ Insert Blank Keyframe การลบเฟรม Copy Frame and Paste Frame ความเรว็ ในการแสดงภาพเคล่อื นไหว หนว่ ยจำ�นวนเฟรมที่แสดงภาพช้นิ งานภายใน 1 วินาที การเพิม่ เฟรมเปล่า การกอ๊ ปป้ีเฟรม

การสร้างภาพเคลอื่ นไหวเบ้ืองต้น Adobe Fla3s8h5 CS6 ซนี (Scene) การแบง่ มฟู วท่ี ง้ั เรอ่ื งออกเปน็ ตอนหรอื ฉาก Onion Skin การทำ�ให้เนอื้ หาของเฟรมอ่ืน ๆ ปรากฏให้เหน็ ในเฟรมปัจจุบนั Onion Skin Outlines การทำ�ให้เน้ือหาของเฟรมอ่ืน ๆ ปรากฏเป็นรูปโครงร่างท่ีมีแต่ เสน้ ขอบเทา่ นนั้ บทท่ี 7 ให้ Layer ช่วยจดั การภาพท่ซี ับซ้อน เลเยอร์ (Layer) เปรยี บเสมอื นแผน่ ใสหลาย ๆ แผน่ วางซ้อนกนั โดยเลเยอรท์ ่ีไม่มี Layer Properties รูปจะสามารถมองเห็นเลเยอรท์ ี่อยดู่ ้านลา่ ง เลเยอรม์ าสค์ (Layer Mask) ไกดเ์ ลเยอร์ (Guide Layer) กำ�หนดคณุ สมบัติของเลเยอร์ วิธีการสร้างเลเยอร์ที่เสมือนเป็นการเจาะช่องเอาไว้ให้มองทะลุ ไปยงั เลเยอร์อื่นท่ีอยใู่ นลำ�ดบั ถดั ลงไป เป็นการกำ�หนดเส้นทางหรือทิศทางให้กับการเคล่ือนไหวของ ชนิ้ งานตามที่เราตอ้ งการ บทที่ 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 การซูม (Zoom In/Out) เป็นการขยายรูปหรือย่อส่วนรูป โดยใช้การปรับขนาด Scale เพอ่ื ให้มกี ารเคลอื่ นไหวเปน็ ลำ�ดับ การหมนุ (Rotate) เป็นการสร้างภาพแอนิเมชันเพ่ือหมุนภาพไปในทิศทางที่ต่างกัน ทำ�ใหเ้ กดิ ภาพเคล่อื นไหว เขยา่ ภาพ (Tilting) เป็นการสร้างภาพเคลื่อนไหวท่ีทำ�ให้ภาพเฉพาะส่วนใดส่วนหนึ่ง ขยบั ข้ึน – ลงสลับกนั ไป วิ่งตามภาพ (Tracking) ใช้ในการเล่นเกมด้วยเทคนิคการ Scale ผสมผสานกับ Pan, Tilting รวมถงึ ใชเ้ อฟเฟ็กต์ตา่ ง ๆ เขา้ ช่วย เคลื่อนไหวแบบเฟรมต่อเฟรม การสร้างคีย์เฟรมหลาย ๆ เฟรมเรียงต่อกัน โดยภาพจะค่อย ๆ (Frame-by-Frame Animation) เปลี่ยนแปลงไปทีละเฟรม เมื่อนำ�มาฉายจะทำ�ให้มองเห็น เป็นการเคลื่อนไหว เคลอ่ื นไหวแบบทวีน การสร้างภาพเคล่ือนไหวแบบอัตโนมัติ โดยสร้างเนื้อหาในเฟรม เร่ิมต้นและเฟรมสุดท้ายเท่าน้ัน ส่วนเฟรมระหว่างกลาง (Tween Animation) โปรแกรมจะสร้างข้ึนให้อัตโนมัติตามลักษณะต่าง ๆ ท่ีได้ เปลี่ยนแปลงแบบเคล่อื นท่ี เลือกไว้ การเปลี่ยนตำ�แหน่งหรือทิศทางและการเปลี่ยนแปลงคุณสมบัติ ของตวั ออบเจก็ ตเ์ อง เชน่ เปลย่ี นขนาด สี การหมนุ และ (Motion Tween) การจางหาย

Adobe386Flash CS6 คำ�ศัพท์ เปลย่ี นแปลงรปู รา่ ง (Shape Tween) เปลี่ยนจากรปู รา่ งหนงึ่ ไปเปน็ อกี รปู รา่ งหนึ่ง Cell Animation/Frame by Frame การสร้างภาพเคลอื่ นไหวแบบแยกเฟรม 3D Rotation กำ�หนดการหมนุ ออบเจ็กต์แบบ 3 มติ ิ 3D Translation กำ�หนดการเปลี่ยนแปลง หรอื การเคลอ่ื นไหวแบบ 3 มติ ิ Bone Tool เคร่ืองมือท่ีใช้ในการสร้างกระดูก เพื่อควบคุมการเคลื่อนไหวของ วัตถุท่ีนำ�มาประกอบกนั Bind Tool เคร่ืองมือทีใ่ ชแ้ ก้ไขจดุ เช่อื มต่อของวัตถทุ ่ที ำ�การสร้างข้ึน บทที่ 9 การเพ่ิมเสียงประกอบช้นิ งานเพือ่ ความเพลิดเพลิน Event Sound เสยี งท่ตี อ้ งดาวนโ์ หลดมาครบสมบรู ณ์ก่อนจงึ จะเริ่มเล่นได้ Stream Sound เสียงท่จี ะเร่ิมเล่นทันทีทข่ี ้อมลู ของเฟรมแรก ๆ ถูกดาวนโ์ หลดเขา้ Stop All Sounds None มามากพอที่จะเล่นได้ Left Channel การกำ�หนดจดุ หยดุ ในการเล่นไฟล์เสยี งประกอบทว่ งทำ�นอง Right Channel เสียงเหมอื นไฟล์ต้นฉบบั ไม่มเี อฟเฟ็กต์ใด ๆ Fade Left to Right เล่นเสียงเฉพาะช่องสัญญาณซา้ ยเทา่ น้ัน Fade Right to Left เลน่ เสยี งเฉพาะช่องสัญญาณขวาเท่าน้นั Fade In ใหเ้ สียงเคล่อื นยา้ ยจากช่องสัญญาณซ้ายไปยงั ชอ่ งสญั ญาณขวา Fade Out ใหเ้ สยี งเคลอื่ นยา้ ยจากชอ่ งสัญญาณขวาไปยงั ชอ่ งสัญญาณซ้าย Custom ให้เสียงเริม่ จากเบา แลว้ คอ่ ย ๆ ดังข้นึ ในขณะที่เลน่ Sync (Synchronization) ให้เสยี งเรม่ิ จากดงั แลว้ ค่อย ๆ เบาลงในขณะท่เี ลน่ Event กำ�หนดเอฟเฟ็กต์ด้วยตนเอง โดยการปรับแต่งสัญญาณเสียง Stream Report ในกรอบ Edit Envelope Loops ใช้กำ�หนดวิธีเลน่ เสยี ง ควบคุมการเรมิ่ เล่นและการจบ Compression ใช้กับเสียงที่เราต้องการให้เล่นเม่ือเกิดเหตุการณ์อย่างใด Sample Rate อย่างหนึ่งขนึ้ การบังคบั ให้ภาพเคลื่อนไหวถกู แสดงแบบสอดคลอ้ งกับเสียง การเลน่ เปน็ จำ�นวนรอบตามตัวเลขทร่ี ะบไุ วใ้ นช่องถัดไป กำ�หนดใหว้ นเล่นเสียงอยา่ งต่อเนอื่ งไมห่ ยุด การบีบอัดขอ้ มลู การลดอตั ราสุ่ม

การสร้างภาพเคล่อื นไหวเบือ้ งต้น Adobe Fla3s8h7 CS6 บทที่ 10 การน�ำ เสนอผลงานให้แพรห่ ลาย Publish ขั้นตอนในการแปลงไฟล์เพ่ือนำ�เสนอผลงานออกมาในรูปแบบ Player เวอรตช์ ่า่ันงขๆอง Flash Player ทจ่ี ะใช้เลน่ มฟู วี่ Script เลือกเวอร์ชน่ั ของ ActionScript ท่ีจะใชใ้ นมฟู วี่ JPEG Quality ระดบั การบบี อดั ข้อมูลส�ำหรับรูปภาพบิตแมปที่นำ� มาใช้ในมฟู ว่ี Audio Stream วธิ ีบีบอัดและปรบั คุณภาพข้อมูลเสียงชนิด Stream Sound Audio Event วิธบี ีบอดั และปรับคุณภาพข้อมูลเสียงชนดิ Event Sound Override Sound Setting การยกเลิกค่าการบีบอัดไฟล์เสียงทั้งชนิด Stream และ Event Export Device Sounds Compress Movie ของไฟลเ์ สียงแต่ละไฟล์ Include Hidden Layers การเอก็ ซพ์ อรต์ ไฟลเ์ สยี งแบบ Device Sound เมอ่ื สรา้ งไฟลม์ ฟู ว่ี Generate Size Report Omit Trace Actions สำ�หรับอุปกรณ์มือถือ Permit Debuging การบีบอัดข้อมูลในไฟล์มูฟว่ีเพ่ือลดขนาดไฟล์และลดเวลาในการ Local Playback Script Time Limit ดาวนโ์ หลด Detect Flash Version การเอ็กซพ์ อรต์ เลเยอรท์ ถ่ี กู ซ่อนไว้ Dimensions การสรา้ งไฟล์ข้อความ (txt) ในชื่อเดยี วกับไฟลม์ ูฟวี่ (swf) Playback การบงั คบั Flash ไมใ่ ห้สนใจคำ�สง่ั Trace ท่ีอย่ใู นมูฟวี่ Quality โปรแกรมช่วยตรวจหาและแก้ไขความผิดพลาดของคำ�สั่ง Window Mode HTML Alignment ActionScript Scale วธิ ีจำ�กดั การเรียกใชไ้ ฟลภ์ ายนอกของมูฟวนี่ ้ี กำ�หนดเวลาท่ียอมให้โปรแกรม ActionScript ทำ�งานต่อเนื่อง หน่วยเปน็ วินาที ออปชั่นนี้จะได้ไฟล์ HTML ที่มีโค้ด JavaScript และ VBScript สำ�หรบั ตรวจสอบวา่ บราวเซอร์มีปลก๊ั อิน Flash Player ขนาดความกว้าง (Width) และความสูง (Height) ของมูฟวี่ที่ ปรากฏบนบราวเซอร์ การกำ�หนดวิธีการเล่นมูฟว่ีแบบเริ่มทันทีหรือเล่นวนต่อเนื่องหรือ ให้ผชู้ มคลิกแบบอตั โนมตั ิ กำ�หนดคณุ ภาพของมฟู ว่ที ่ีจะปรากฏในขณะเล่น กำ�หนดลกั ษณะพิเศษในการแสดงผลมฟู วี่บนเวบ็ เพจ วิธีการจดั วางมูฟวบ่ี นเวบ็ เพจวา่ จะใหอ้ ยชู่ ดิ ดา้ นใด วธิ ีการแสดงเนอ้ื หามูฟว่ี เป็นแบบ Pixels หรอื แบบ Percent)

Adobe388Flash CS6 ค�ำ ศัพท์ Flash Alignment กำ�หนดตำ�แหน่งการจัดวางมูฟว่ีภายในขอบเขตการแสดงผลของ Show Warning Messages Flash Optimize Colors Interlace Smooth ให้แสดงขอ้ ความเตือน เม่อื เกดิ ความขัดแยง้ ในออปช่ันต่างๆ ท่ีเลือก Dither Solids ทอนสใี ห้เหมาะสม Remove Gradients ทำ�ใหภ้ าพดนู มุ่ นวล Transparent เปลย่ี นสีทบึ ให้ดูเหมือนสเี กรเดียนท์ Threshold เปลีย่ นสีเกรเดียนทใ์ ห้เป็นสที บึ Dither กำ�หนดรูปแบบให้กบั พื้นหลัง Palette Type กำ�หนดความโปรง่ ใสจาก 0 – 255 ยงิ่ ค่านอ้ ยยิ่งโปรง่ ใสมาก Max Colors กำ�หนดวธิ กี ารหาสีใกล้เคยี ง Palette กำ�หนดชนดิ ของสี Filter Options กำ�หนดจำ�นวนสีท่ีใชใ้ นภาพ Bit Depth กำ�หนดสที ี่ใช้ในภาพ กำ�หนดการกรองภาพเพอ่ื ชว่ ยลดขนาดไฟลภ์ าพลง กำ�หนดความละเอยี ดของสี บทท่ี 11 การจัดท�ำ โครงงานย่อย และการสร้าง Flash Animation 2 มิติ และ 3 มิติ เฟรม Up เฟรมท่ีจะแสดงออกมา เม่ือเมาส์พอยเตอร์อยู่ภายนอกขอบเขต เฟรม Over ของปมุ่ เฟรม Down เฟรม Hit เฟรมที่จะแสดง เม่ือเมาส์พอยเตอร์เล่ือนมาอยู่ภายในขอบเขต Enable Simple Buttons ของปุ่ม Rectangle Tool 3D Rotation Tool เฟรมท่จี ะแสดงเมื่อปุ่มถูกคลกิ เฟรมที่ใช้สำ�หรับกำ�หนดขอบเขตของปุ่ม เพ่ือให้มีการตอบสนอง ต่อเมาส์ใน 3 สถานะข้างต้น เพ่ือทดสอบปุม่ ทวี่ างอยู่บนสเตจ เครอื่ งมอื สรา้ งรูปสเ่ี หล่ียมผนื ผา้ เคร่อื งมอื ทำ�การหมุนรปู ร่างท่ีสร้างแบบ 3 มิติ

การสรา้ งภาพเคลื่อนไหวเบ้อื งตน้ Adobe Fla3s8h9 CS6 บรรณานกุ รม กฤษณะ สถิต. (2545). ค่มู ือการใช้งาน Macromedia FLASH MX. นนทบรุ ี : อินโฟเพรส. จาตุรงค์ แตงเขียว. (2548). การใช้โปรแกรมเวบ็ 1. กรุงเทพฯ : วังอกั ษร. ธันยพัฒน์ วงศร์ ตั น์. (2555). สร้างงานแอนเิ มชนั ดว้ ย Flash CS5. กรุงเทพฯ : สวัสดี ไอที. บปุ ผาทพิ ย์ สจี �ำปา. (2548). เทคโนโลยอี นิ เทอรเ์ น็ต. กรุงเทพฯ : วงั อกั ษร. ภทั ทริ า เหลอื งวลิ าศ. (2546). FLASH MX สรา้ งแอนเิ มชนั บนเวบ็ อยา่ งมอื อาชพี . กรงุ เทพฯ : ซเี อด็ ยเู คชนั . มนสั สินี ลำ่� สนั เทยี๊ ะ. (2555). Flah Animation ออกแบบและสรา้ งภาพเคล่อื นไหวใหก้ ารต์ ูนอยา่ งมี ชีวติ ชีวา. กรุงเทพฯ : รไี ววา่ . มาลยั ม่วงเทศ และสรพงษ์ พนั ธ์ศิร.ิ (2548). การเขียนเวบ็ เพจดว้ ยภาษา HTML. กรงุ เทพฯ : วงั อักษร. เศรษฐชยั ชยั สนทิ . (2550). เทคโนโลยสี ารสนเทศ (พมิ พ์คร้ังที่ 2). กรงุ เทพฯ : วงั อกั ษร. เศรษฐชยั ชยั สนทิ และจาตรุ งค์ แตงเขยี ว. (2548). หลกั การออกแบบเวบ็ เพจ. กรงุ เทพฯ : อรณุ การพมิ พ.์ _________. (2548). การพฒั นาเวบ็ เพจชั้นสงู . กรงุ เทพฯ : วงั อกั ษร. สมบัติ สวัสดิ์ผล. (2547). การใช้โปรแกรมกราฟิก. กรุงเทพฯ : วงั อกั ษร. สรพงษ์ พนั ธศ์ ิริ และมาลัย ม่วงเทศ. (2547). การสรา้ งเวบ็ เพจดว้ ยภาษา HTML. กรงุ เทพฯ : วงั อกั ษร. สรวฒุ ิ ชยั ดรณุ . (2555). Flash Game Workshop. กรุงเทพฯ : โปรวิชนั .

Adobe390Flash CS6 NOTE ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................ ................................................................................................................................................. ................................................................................................................................................. ................................................................................................................................................. .................................................................................................................................................

การสรางภาพเคล่ือนไหวเบือ้ งตน ISBN: 978-616-211-831-9 9 786162 118319 บริษทั วงั อกั ษร จาํ กดั 69/3 ถนนอรณุ อมรินทร แขวงวดั อรุณ เขตบางกอกใหญ กรงุ เทพฯ 10600 Tel : 0-2472-3293-5 Fax : 0-2891-0742 Mobile : 08-8585-1521 หนงั สอื ใหม ID Line : wangaksorn Facebook : สํานกั พมิ พ วงั อักษร e-Mail : [email protected] www.wangaksorn.com ˹§Ñ Ê×Í 2 ÊÕ ¨Ó¹Ç¹ 396 ˹ŒÒ ¡ÃдÒÉ / ¤ÇÒÁË¹Ò ¡ÃдÒÉ»¡ 210 á¡ÃÁ ¡ÃдÒÉà¹Íé× ã¹ »Ãٍ¿¼ÇÔ ÊÇ‹Ò§ 50 á¡ÃÁ