คีย์ลัดบน Timeline

วันพุธที่ 17 กรกฏาคม 2013 เวลา 14:18 น. ผู้ดูแลระบบ
พิมพ์



HOT KEY

    คีย์ลัด สามารถอำนวยความสดวกในขณะทำแอนนิเมชั่น แบ่งออกเป็นกลุ่ม ดังนี้

    1. คีย์ลัดบน Timeline

    2. คีย์ลัด เกี่ยวกับ Symbol และ Shape

    3. คีย์ลัด เกี่ยวกับพาเนล

    4. คีย์ลัดอื่น ๆ

    ตัวอย่างที่ 11 Pendulum

      แนวคิด แสดงการแกว่งตัวของวัตถุ เคลื่อนที่ตามจุดหมุน
      โจทย์ การแก่วงตัวของลูกตุ้ม และใส่เสียงเมื่อลูกตุ้มกระทบกัน
      วิธีการ
      1. เปิดโปรแกรม Flash CS5.5 > Create New > ActionScript 2.0
      2. บันทึกแฟ้มข้อมูลชื่อ pendulum
      3. ที่ Layer 1 ให้ชื่อว่า BG  ขีดเส้นตรง 1 เส้น เพื่อกำหนดเป็นเส้นแขวนลูกตุ้ม และกำหนดจุดที่เป็นตำแหน่งแขวนวัตถุ ในที่นี้ จะกำหนดแสดงวัตถุเป็นลูกตุ้ม 5 ลูก ตัวที่จะแกว่งคือลูกทางซ้ายและทางขวา นอกนั้นอยู่กับที่จากนั้น lock Layer BG
        • วิธีการ insert>new symbol>graphic กำหนดชื่อ Object ดังภาพ ไว้ใน LIBRARY                     
        • ที่ Scene 1 ณ เฟรม 1 ของ Layer BG ลากเส้นกำหนดเป็นเส้นแขวนลูกตุ้ม และลาก object จาก LIBRARY มาวาง ณ ที่เป็นตำแหน่งแขวนวัตถุ ที่จะให้เป็นตัวไม่เคลื่อนที่ จากนั้น lock Layer BG
      4. เพิ่ม Layer ใหม่เหนือ Layer BG ให้ชื่อ FIX_R โดยใช้แนวคิดว่า หากลูกตุ้มซ้ายเคลื่อนที่ ลูกตุ้มขวาจะคงที่ ใน FIX_R จึงลาก object จาก LIBRARY มาวาง ทางขวา จากนั้น lock Layer FIX_R
      5. เพิ่ม Layer ใหม่เหนือ Layer FIX_R ให้ชื่อ SWING_L ลาก object จาก LIBRARY มาวาง ทางซ้าย เลือกวัตถุที่ลากมาใหม่นี้ กด Ctrl+C
      6. เพิ่ม Layer ใหม่เหนือ Layer SWING_Lให้ชื่อ FIX_L กด Ctrl+Shift+V
      7. ปลด Lock FIX_R เลือกวัตถุ กด Ctrl+C
      8. เพิ่ม Layer ใหม่เหนือ Layer FIX_Lให้ชื่อ SWING_R กด Ctrl+Shift+V
      9. Lock FIX_L และ FIX_R
      10. ที่ SWING_L ต้องปรับ จุดควบคุมการแกว่ง
      11. การเลื่อนจุดควบคุมการแกว่งเป็นไปตามนี้
      12. ผลลัพธ์ที่ได้                                             
      13. ณ เฟรมที่ 40 ของ BG กด F5
      14. ณ เฟรมที่ 20 ของ FIX_R กด F5
      15. ณ เฟรมที่ 10 และ 20 ของ SWING_L กด F6
      16. ณ เฟรมที่ 10 ของ SWING_L หมุนวัตถุ
      17. คลิกขวาที่บริเวณพื้นที่สีเทา ของ SWING_L ระหว่าง เฟรม 1-10 และ 11-20 เลือก Insert Classic Tween
      18. Lock SWING_L
      19. คลิกขวา ณ เฟรมที่ 1 ของ FIX_L และ SWING_R เลือก Cut Frames
      20. คลิกขวา ณ เฟรมที่ 20 ของ FIX_L และ SWING_R เลือก Paste Frames
      21. ณ เฟรมที่ 40 ของ FIX_L กด F5
      22. ณ เฟรมที่ 20 ของ SWING_R ปรับจุดควบคุมการแกว่ง
      23. ณ เฟรมที่ 30 และ 40 ของ SWING_R กด F6
      24. ณ เฟรมที่ 30 ของ SWING_R หมุนวัตถุ
      25. คลิกขวาที่บริเวณพื้นที่สีเทา ของ SWING_R ระหว่าง เฟรม 20-30 และ 31-40 เลือก Insert Classic Tween
      26. กด Ctrl+Enter ดูผล
      27. Import คลิปเสียงมาวางที่ LIBRARY
      28. เพิ่ม Layer Sound เหนือ BG
      29. ณ เฟรมที่ 20 และ 40 ของ Layer Sound กด F6
      30. ณ เฟรมที่ 20 และ 40 ของ Layer Sound ลาก คลิปเสียงมาวาง
      31. กด Ctrl+Enter ดูผล
      32. ในที่นี้ปรับตำแหน่งวัตถุใน BG  ณ เฟรมที่ 19 21 39 และ 40 ให้เคลื่อนที่เล็กน้อย เพื่อให้การเคลื่อนที่ดูสมจริง
      การประยุกต์ ในงานที่ต้องการให้วัตถุเคลื่อนที่ในลักษณะแกว่งตัวไปมา
      Download Source File

      ตัวอย่างที่ 10 Screen Saver


      แนวคิด แสดงภาพเปลี่ยนไปมาบนพื้นที่ที่กำหนด ที่ไม่ใช่รูปทรงสี่เหลี่ยมหรือวงกลม และไม่ได้วางบนระนาบปกติ ซึ่งความสามารถของโปรแกรม Flash จะอำนวยความสะดวกในการดึง Shape ให้เป็นไปตามต้องการ
      โจทย์ การเปลี่ยนภาพหน้าจอคอมพิวเตอร์แบบ Screen Saver
      วิธีการ
      1. เปิดโปรแกรม Flash CS5.5 > Create New > ActionScript 2.0
      2. บันทึกแฟ้มข้อมูลชื่อ screen_saver
      3. ปรับขนาด Stage เป็น 550*400
      4. ที่ Layer 1 ให้ชื่อว่า BG วาดสี่เหลี่ยมผืนผ้า เพื่อกำหนดเป็นฉากหลัง และ lock Layer BG
      5. เพิ่ม Layer ใหม่ เหนือ Layer BG ให้ชื่อ Computer
        • File>  Import to stage ระบุชื่อ และที่อยู่ของภาพ ในที่นี้เลือกภาพนี้
      6. เพิ่ม Layer ใหม่ เหนือ Layer Computer ให้ชื่อ Image 1
      7. ณ เฟรม 1 ของ Layer Image 1 ใช้เครื่องมือสี่เหลี่ยม ไม่มีเส้นกรอบ เลือกสีตามความพอใจ วาดรูป ทับหน้าจอ ตามตัวอย่าง
      8. ณ เฟรม 1 ของ Layer Image 1 คลิกเลือกภาพสี่เหลี่ยมที่มีขนาดเท่ากับจอภาพของภาพคอมพิวเตอร์ใน Layer Computer แล้วกด Ctrl+X
      9. ณ เฟรม 1 ของ Layer Computer กด Ctrl+B และ Ctrl+Shif+V  จะได้ผลลัพธ์เป็นภาพสี่เหลี่ยมทับอยู่บนหน้าจอในภาพ พอดี
      10. ณ เฟรม 1 ของ Layer Computer คลิกเลือกภาพสี่เหลี่ยมที่วางลงไป กด Delete จะพบลักษณะ ดังนี้
      11. Lock Layer Computer
      12. ที่ Scene 1 สร้าง Movie Clip โดย Insert>New Symbol ให้ชื่อ Pic 1 กำหนดเป็น Movie Clip คลิก OK
      13. การทำงานจะเข้าสู่ หน้าต่าง การสร้าง Movie Clip Pic1
      14. ณ เฟรม 1 Layer 1 เปลี่ยนชื่อเป็น Image
      15. เพิ่ม Layer ใหม่เหนือ Layer Image ชื่อ mask
      16. ณ เฟรม 1 Layer mask กด Ctrl+V ได้ภาพสี่เหลี่ยมที่มีขนาดเท่ากับจอภาพของภาพคอมพิวเตอร์
      17. คลิกเลือกภาพสี่เหลี่ยม ดูขนาดที่ PROPERTIES ในที่นี้ ได้                                     
      18. เราจะใช้ขนาดที่ได้เป็นเกณฑ์ในการย่อภาพที่จะนำไปเป็น Screen saver
      19. ณ เฟรม 1 ของ Layer Image
        • Click and drag ภาพจาก LIBRARIES มาวาง
        • คลิกที่ภาพปรับขนาดที่PROPERTIES  ดังนี้                                                       
      20. คลิกขวาที่ชื่อ  Layer mask เลือกคำสั่ง Mask ได้ผลดังนี้
      21. สร้าง Symbol Pic 2 Pic 3 Pic 4 ตามวิธีการข้อ 12 – ข้อ 20
      22. กลับมาทำงานที่ Scene 1
      23. ณ เฟรม 1 Layer Image 1 ลาก Pic 1 จาก LIBRARY มาวางทับที่หน้าจอในภาพ
      24. ณ เฟรม 100 ของ Layer BG และ Layer Computer กด F5
      25. ณ เฟรม 10 20 และ 30 ของ Layer Image 1 กด F6
      26. ณ เฟรม 1 ของ Layer Image 1 คลิกเลือกที่ภาพ ปรับค่า Alpha ของCOLOR EFFECT เป็น 0
      27. ณ เฟรม 30 ของ Layer Image คลิกเลือกที่ภาพ ปรับค่า Alpha ของCOLOR EFFECT เป็น 0
      28. คลิกขวาที่บริเวณสีเทา ระหว่าง เฟรมที่ 1 – 10 ของ Layer Image เลือก Insert Classic Tween
      29. เพิ่ม Layer Image 2 เหนือ Layer Image 1
      30. ณ เฟรม 10 ของ Layer Image 2 กด F6
      31. ณ เฟรม 10 Layer Image 2 ลาก Pic 2 จาก LIBRARY มาวางทับที่หน้าจอในภาพ
      32. ณ เฟรม 20 30 และ 40 ของ Layer Image 2 กด F6
      33. ณ เฟรม 10 ของ Layer Image 2 คลิกเลือกที่ภาพ ปรับค่า Alpha ของCOLOR EFFECT เป็น 0
      34. ณ เฟรม 40 ของ Layer Image 2 คลิกเลือกที่ภาพ ปรับค่า Alpha ของCOLOR EFFECT เป็น 0
      35. คลิกขวาที่บริเวณสีเทา ระหว่าง เฟรมที่ 10 – 20 ของ Layer Image เลือก Insert Classic Tween
      36. ใช้ แนวคิดข้างต้น สร้าง Layer Image 3 และ Image 4 วางภาพ Pic 3 และ Pic 4 และปรับค่า COLOR EFFECT สร้าง Classic Tween จะได้ Time line ลักษณะดังนี้
      37. กด Ctrl + Enter ดูผล
      การประยุกต์ การสร้างกรอบลักษณะต่าง ๆ
      Download Source File

      ตัวอย่างที่ 12 การสร้างปุ่มควบคุม

      แนวคิด การสร้างปุ่มควบคุมการทำงาน
      โจทย์ สร้างปุ่ม PLAY และ STOP เพื่อให้รถวิ่งและหยุดในตำแหน่งที่ต้องการ
      วิธีการ
      1. เปิดโปรแกรม Flash CS5.5 > Create New > ActionScript 2.0
      2. บันทึกแฟ้มข้อมูลชื่อ control
      3. ที่ Layer 1 วาดภาพวัตถุที่จะให่เคลื่อนที่
      4. ใน ที่นี้สร้าง 2 Layer  คือ BG และ CAR เพื่อวางภาพพื้นหลัง และวัตถุที่จะวิ่ง และกำหนดลักษณะการเคลื่อนที่ของวัตถุตามต้องการ ตัวอย่าง
      5. การสร้างปุ่ม ที่เมนู Insert>New Symbol>Button ตั้งชื่อ start_button
      6. การทำงานจะเข้าสู่ หน้าต่าง start_button จะเห็นว่า ที่ Timeline มีลักษณะ
      7. ณ ตำแหน่ง Up ให้สร้างวงกลม สีเขียว  โดยกำหนดตำแหน่ง และขนาด ดังนี้
      8. คลิกขวา ณ ตำแหน่ง Down  เลือก Insert keyframe ขยายขนาดวงกลม สีเขียว เพิ่มขึ้น 20% โดยกำหนดตำแหน่งเดิม
      9. ที่ Scene 1 ทำซ้ำข้อ 5 – 8 โดยกำหนดชื่อปุ่ม stop_button ลงสีแดง
      10. ที่ Layer 1 ของ Scene 1 วาง animation ตามต้องการ
      11. เพิ่ม layer ใหม่ เหนือ Layer 1 ลากปุ่มที่สร้างไว้ จาก LIBRARY มาวางที่ Stage
      12. คลิกเลือกปุ่ม start_button กด F9 พิมพ์
      13. คลิกเลือกปุ่ม stop_button กด F9 พิมพ์
      14. ทดลองใช้งาน
      การประยุกต์ สามารถใช้ได้กับงานที่ต้องการปุ่มควบคุมการทำงาน
      Download Source File

      ตัวอย่างที่ 9 วัตถุหลายตัวเคลื่อนที่พร้อมกัน


      แนวคิด ต้องการให้วัตถุหลาย ๆ ตัวเคลื่อนที่พร้อม ๆ กัน เช่นล้อรถหมุน ขณะที่รถวิ่งไป
      หลัก การ ต้องสร้างวัตถุ แยกออกเป็น ชิ้นส่วนย่อย และทำให้ชิ้นส่วนต่าง ๆ เคลื่อนไหว จากนั้นจึงนำมาประกอบกัน และนำส่วนประกอบที่สำเร็จแล้วมาวิ่งบน Stage
      โจทย์ คนกำลังขี่จักรยาน
      วิธีการ
      1. เปิดโปรแกรม Flash CS5.5 > Create New > ActionScript 2.0
      2. บันทึกแฟ้มข้อมูลชื่อ bike
      3. ภาพที่ต้องเตรียม และ Import ไว้ที่ LIBRARY คือ ภาพ MAN BIKE WHEEL และ stand  ดังภาพตัวอย่าง
      4. ณ Scene 1 เปลี่ยนชื่อ Layer 1 เป็น road วางภาพ ดังตัวอย่าง บน stage
      5. Insert>New Symbol>Movie Clip ให้ชื่อ wheel
      6. การทำงานจะเข้าสู่หน้าต่างการสร้าง Movie Clip>wheel
      7. ณ เฟรม 1 ของ Layer 1 ให้ Click and drag ภาพ wheel ที่เตรียมไว้ใน LIBRARY มาวาง
      8. ณ เฟรม 25 ของ Layer 1 ให้กด F6
      9. คลิกขวาที่บริเวณพื้นที่สีเทาระหว่าง เฟรมที่ 1 – 25 เลือก Create classic tween
      10. ที่ PROPERTY>TWEENING กำหนด                                                                                                     ดังนี
      11. ลอง เลือน Playhead จะพบการเคลื่อนที่ในลักษณะ                                                                                    ดังนี้
      12. Insert>New Symbol>Movie Clip ให้ชื่อ stand
      13. การทำงานจะเข้าสู่หน้าต่างการสร้าง Movie Clip>stand
      14. ณ เฟรม 1 ของ Layer 1 ให้ Click and drag ภาพ standที่เตรียมไว้ใน LIBRARY มาวาง
      15. ใช้วิธีการในข้อ 8 – 10 และลองลองเลือน Playhead จะพบการเคลื่อนที่ในลักษณะ                                  ดังนี้
      16. Insert>New Symbol>Movie Clip ให้ชื่อ MAN
      17. การทำงานจะเข้าสู่หน้าต่างการสร้าง Movie Clip>MAN
      18. ณ เฟรม 1 ของ Layer 1 ให้ Click and drag ภาพ bike ที่เตรียมไว้ใน LIBRARY มาวาง
      19. ณ เฟรม 1 ของ Layer 1 ให้ Click and drag ภาพ man ที่เตรียมไว้ใน LIBRARY มาวาง
      20. ลักษณะของผลลัพธ์ของการทำงาน ข้อ 18 – 19 จะเป็น                                                                         ดังนี้
      21. ณ เฟรม 1 ของ Layer 1 ให้ Click and drag movie clip wheel จาก LIBRARY มาวาง และปรับให้ล้ออยู่ด้านหลัง โดยใช้ Modify>Arrange>Send to back ได้ภาพลักษณะ                                                           ดังนี้
      22. ทำลักษณะเดียวกันทั้ง 2 ล้อ
      23. การ ทำงานที่ได้ จะมีลักษณะ                                                                                                                   ดังนี้
      24. ณ เฟรม 1 ของ Layer 1 ให้ Click and drag movie clip stand จาก LIBRARY มาวาง กำหนดตำแหน่งให้เหมาะสม การทำงานที่ได้ จะมีลักษณะ                                                                                                   ดังนี้
      25. ย้ายกลับมาทำงานที่ Scene 1
      26. เพิ่ม Layer RUN เหนือ Layer Road
      27. ณ เฟรม 1 ของ Layer RUN ให้ Click and drag > movie clip > MAN วาง ณ จุดต้นถนน
      28. ณ เฟรม 50 ของ Layer RUN ให้กด F6 ย้าย movie clip ที่ปรากฏไปวางที่ปลายถนน
      29. คลิกขวาที่บริเวณพื้นที่สีเทาระหว่าง เฟรมที่ 1 – 50 เลือก Create classic tween
      30. Ctrl+Enter เพื่อดูผลลัพธ์
      31. การประยุกต์ การเคลื่อนที่ของวัตถุหลาย ๆ ตัวพร้อมกัน
      การประยุกต์ งานที่ต้องการแสดง tweening ของวัตถุหลาย ๆ ตัว พร้อมกัน
      Download Source File
      แก้ไขล่าสุด ใน วันอาทิตย์ที่ 25 มีนาคม 2018 เวลา 17:34 น.