chapter 11

บทที่ 11 การจดั ทาโครงงานยอ่ ยและ การสร้าง Flash Animation 2 มติ ิ และ 3 มิติ

การสร้างปมุ่ การสรา้ งปุ่มทีส่ ถานะ UP เพอื่ รอการคลิกปมุ่ 1. สรา้ งออบเจ็กต์ข้ึนมา ก๊อปปอ้ี อบเจก็ ตน์ ้ีไว้ โดย กดปุม่ Ctrl + C แล้วคลิกท่เี มนู Insert > New Symbol 2. ชอ่ ง Name ให้ต้ังช่อื ชอ่ ง Type เลอื ก Button แล้วคลิกปุ่ม OK

3. สถานะแรกท่ีเหน็ คือ สถานะ UP คลิกเลือกท่สี ถานะ UP แลว้ วางออบเจก็ ต์ทเ่ี ราก๊อปปไ้ี ว้โดยกดปุ่ม Ctrl + V จากน้นั ใหค้ ลกิ ขวาเลือก Insert Keyframe หรอื กดปุ่ม F6 การสร้างปมุ่ ท่ีสถานะ Over ในขณะท่ีวางเมาส์ขวาบนป่มุ แต่ยงั ไม่ไดค้ ลกิ ปุม่ 4. คลกิ เลือกที่สถานะ Over แลว้ กดปมุ่ F6 จากนน้ั ให้เปล่ียน สพี นื้ ของออบเจก็ ต์ให้เป็นสอี ่นื

การสร้างปมุ่ ท่ีสถานะ Down ในตอนที่คลิกบนปุ่ม สร้างปุ่มทีส่ ถานะ Hit กาหนดขอบเขตการคลิกเมาส์ 5. คลกิ เลือกทีส่ ถานะ Down กดปุ่ม F6 แล้วเปล่ยี นสี 6. คลกิ เลอื กทีส่ ถานะ Hit แล้วกดปุ่ม F6 พน้ื ออบเจ็กต์ใหเ้ ปน็ สีอืน่ 7. คลิกช่อื Scene1 เพอื่ ส้ินสดุ การสรา้ งปุม่

ทดสอบการสร้างป่ ุม 8. เปดิ หน้าตา่ งไลบราร่ี โดยกดปมุ่ Ctrl + L 9. คลิกทีช่ ่อื ปุ่มทส่ี รา้ งค้างไวแ้ ล้วลากมาวางบน Stage แลว้ เลือกการทดสอบ ดงั น้ี ผลลพั ธ์

การทาแอนิเมชันสุนัขกะพริบตา 1. ทาการนาไฟลร์ ปู ท่ไี ด้เตรยี มไว้มาลงไวท้ ่ี โปรแกรม Flash โดยแยกเป็น 3 สว่ น แบ่งเป็น สว่ นหวั และส่วนลาตวั 2. ทาการ Create New Symbol เป็น Movie Clip

3. นาภาพสว่ นตัวมาใสท่ ี่ Frame ท่ี 1 4. ทาการสร้าง Layer ข้นึ มาใหม่ และนารปู ส่วนหัวมาไว้ ท่ี Frame ท่ี 1

5. ทาการคลิกขวาท่ี Frame ท่ี 11 จากนั้นเลอื ก Insert Keyframe ทง้ั 2 Layer 6. ทาการเปล่ยี นรูปสว่ นหวั ท่เี ฟรมที่ 11 ดงั รปู

7. ทาการคลิกขวาที่ Frame ท่ี 21 จากน้ันเลอื ก Insert 8. แคน่ ี้เรากจ็ ะไดแ้ อนเิ มชนั สนุ ขั น่งั กะพริบตาดงั รปู Keyframe ทงั้ 2 Layer และทาการเปล่ยี นรูปส่วนหวั ที่ เฟรมท่ี 21 ดังรปู

การสรา้ งหน้าเว็บลงิ ค์ 1. คลิกคาสงั่ File > Import > Import 2. เลือกแบ็กกราวด์ แลว้ คลิกOpen to Library…

3. กดปุ่ม <Ctrl + L>เพื่อเปดิ หน้าตา่ งไลบราร่ี ใสป่ ุม่ ลงไปในเว็บเพจ 4. ทห่ี นา้ ตา่ งไลบราร่คี ลิก ที่ชือ่ รูปแบ็กกราวดค์ า้ งไวแ้ ล้วลากมาวางบนสเตจ 6. คลิกเมนู File > Import > Open External 5. บันทกึ ไฟลเ์ กบ็ ไวเ้ พอ่ื เตรียมไว้ใชง้ าน Library

7. เลือกชื่อไฟล์ท่ีบันทกึ การสรา้ งปุ่ม แลว้ คลกิ Open 8. คลกิ ป่มุ Text Tool ท่ี Tools Panel 9. ใสข่ ้อความลงไปในเว็บไซตเ์ พือ่ เป็นคาอธบิ ายของแต่ละป่มุ 10. ปรับแต่งรูปแบบตัวอกั ษรและขนาดใหเ้ หมาะสม

11. คลิกปุ่ม Selection Tool ท่ี Tools Panel ใส่ลงิ คใ์ หก้ บั ปมุ่ 12. ในหนา้ ต่างไลบราร่ีคลิกเมาส์ค้างไว้ แลว้ ลากปุ่มมาวาง ข้างหน้าขอ้ ความที่สรา้ งขน้ึ 13. คลกิ เมาสข์ วาบนป่มุ ที่หลงั ข้อความ เลือกเมนู Actions

14. ท่ี Actions คลกิ ที่ Script 15. เลือกเมนู Global Functions > Browser/Network Assist >getURL ตอ้ งเลือกใช้ ActionScript1.0&2.0 ด้วย 16. ใสช่ ื่อเว็บไซตใ์ นชอ่ ง URL

17. คลกิ ที่บรรทดั แรกในกรอบ ActionList ซึง่ ตอนนี้ จะเป็นคาสั่ง onRelease( ) 18. คลิกกาหนดเหตุการณ์ Pressจะมีผลทาใหเ้ ปดิ หนา้ เว็บไซต์ที่กาหนดไว้เม่อื มกี ารคลิกเมาสบ์ นป่มุ นี้ 19. กดป่มุ Ctrl + Enter ทดสอบการทางานของปมุ่

การสร้างไฟลแ์ อนิเมชนั 3 มิติ ตัวอยา่ งการสรา้ งไฟลแ์ อนเิ มชันในรปู แบบ 3 มิติ 2. คลกิ เลอื กที่ Selection Tool เพ่ือทาการลาก ครอบสี่เหลยี่ มผนื ผ้าทเ่ี ราไดท้ าการสร้างไว้ 1. คลิกที่ Rectangle Tool เพือ่ สร้างรูปสเ่ี หลีย่ มผืนผา้

3. ทาการเปลี่ยนรปู สี่เหล่ยี มให้เป็นมฟู วี่ โดยการกดคยี ล์ ดั F8 เพื่อเข้าสกู่ าร Convert to Symbol จากนั้นเลือก Type เปน็ Movie Clip และทาการตง้ั ชอ่ื มฟู วี่ 4. คลกิ ทป่ี ุ่ม 3D Rotation Tool เพ่อื ทาการหมุน รูปรา่ งที่ สร้าง ซึ่งจะมีสัญลักษณป์ รากฏดังรปู

5. ไปที่ Edit > Customize Tools Panel… 6. จะขนึ้ หน้าตา่ ง Customize Tools Panel ให้คลกิ เลอื ก 3D Rotation Tool (W) ตามดว้ ยกดปุ่ม >>Add>> เพ่ือเพมิ่ ลงไปทาง Current selection: จากน้ันกดปมุ่ OK

7. จากนน้ั จากรูปสเี่ หลี่ยมผนื ผา้ ธรรมดากส็ ามารถปรบั หมุน 8. ทาการสร้าง Insert Frame ท่ี Frame ท่ี 15 ในรปู แบบ 3D ได้

9. จากนัน้ ทาการสรา้ ง Motion Tween โดยการคลิกขวา 10. จากนั้นทาการลองปรบั หมุนรปู ส่เี หล่ยี มตามต้องการ เลอื ก Create Motion Tween

1. ทาการวาดรปู ดาว การสรา้ งภาพแบบ 3 มติ ิ 2. คลกิ ขวาที่รปู ดาวและเลอื ก Convert to Symbol…

3. ต้งั ช่อื และทาการเลอื ก Type เปน็ Graphic 4. คลกิ ขวาท่เี ฟรมที่ 1 และเลือก Create Classic Tween

5. คลกิ ขวาท่เี ฟรมท่ี 7 และเลอื ก 6. ทาการย่อขนาดรูปดาวให้เลก็ ลง Insert Keyframe

7. เมื่อยอ่ เสรจ็ แล้วจะได้ขนาดดังภาพ 8. คลิกขวาทเ่ี ฟรมท่ี 8 และเลือก Insert Keyframe

9. ทาการเลื่อนตาแหน่งรปู ดาวไปทางซา้ ย 10. คลกิ ขวาท่เี ฟรมที่ 15 และเลอื ก Insert Keyframe

การสรา้ งภาพแบบ 3 มิติ 11. ทาการขยายขนาดรปู ใหม้ ขี นาดใหญ่ตามเดิม 12. ทาการสร้างเลเยอรข์ ้นึ มาใหม่

13. ทาการ Lock Layer 1 ไว้เพ่อื ปอ้ งกันการเปล่ยี นแปลง 14. คลกิ ท่ี Layer 2 และคลิกขวาเลอื ก Remove Frames เพือ่ ทาการลบเฟรมท่ีสร้างขน้ึ มาอตั โนมตั อิ อก

15. คลิกขวาทีเ่ ฟรมท่ี 1 ของ Layer 2 และเลือก 16. ทาการวาดรูปดาวข้นึ มาท่เี ฟรม 1 ของ Layer 2 Insert Keyframe

17. คลิกขวาท่รี ูปดาวและทาการเลอื ก Convert to Symbol… 18. ทาการต้งั ชื่อและเลอื กเปน็ Graphic

19. คลิกขวาท่ีเฟรมท่ี 1 ของ Layer 2 และเลอื ก 20. คลิกขวาที่เฟรมท่ี 7 ของ Layer 2 และเลือก Create Classic Tween Insert Keyframe

การสรา้ งภาพแบบ 3 มติ ิ 21. ทาการยอ่ รูปดาวใหม้ ขี นาดเลก็ เทา่ รูปดาวของ Layer 22. เล่อื นรปู ดาวไปทางซ้ายมอื 1

23. เลือก Style ของพาเนล Color EFFECT เป็น 24. ตั้งคา่ Bright เป็น -78% Brightness

25. คลิกขวาที่เฟรมท่ี 8 ของ Layer 2 และเลือก Insert Keyframe 26. ทาการเล่อื นตาแหนง่ รปู ดาวไปทางขวา

27. คลิกขวาทเ่ี ฟรมที่ 15 ของ Layer 2 และทาการเลอื ก 28. ขยายรปู ดาวใหม้ ขี นาดดงั เดมิ Insert Keyframe

29. ต้งั ค่า Bright เป็น 6% 30. จะได้ผลดงั ภาพ

31. เปลี่ยนสแี บ็กกราวด์ใหเ้ ป็นสดี า 32. จะได้ผลลพั ธ์ดงั ภาพ