คีย์ลัดบน Timeline

HOT KEY

• 
• 

Category: Uncategorised

Published on Monday, 02 September 2013 23:32

Written by Nualnada S.

Hits: 127

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

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

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

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

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

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

• 
• 

Category: Uncategorised

Published on Monday, 02 September 2013 22:12

Written by Nualnada S.

Hits: 189

แนวคิด แสดงการแกว่งตัวของวัตถุ เคลื่อนที่ตามจุดหมุน

โจทย์ การแก่วงตัวของลูกตุ้ม และใส่เสียงเมื่อลูกตุ้มกระทบกัน

วิธีการ

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

• 
• 

Category: Uncategorised

Published on Monday, 02 September 2013 21:24

Written by Nualnada S.

Hits: 159

แนวคิด แสดงภาพเปลี่ยนไปมาบนพื้นที่ที่กำหนด ที่ไม่ใช่รูปทรงสี่เหลี่ยมหรือวงกลม และไม่ได้วางบนระนาบปกติ ซึ่งความสามารถของโปรแกรม 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 การสร้างปุ่มควบคุม

• 
• 

Category: Uncategorised

Published on Monday, 02 September 2013 21:43

Written by Nualnada S.

Hits: 157

แนวคิด การสร้างปุ่มควบคุมการทำงาน

โจทย์ สร้างปุ่ม 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 วัตถุหลายตัวเคลื่อนที่พร้อมกัน

• 
• 

Category: Uncategorised

Published on Monday, 02 September 2013 20:31

Written by Nualnada S.

Hits: 152

แนวคิด ต้องการให้วัตถุหลาย ๆ ตัวเคลื่อนที่พร้อม ๆ กัน เช่นล้อรถหมุน ขณะที่รถวิ่งไป

หลัก การ ต้องสร้างวัตถุ แยกออกเป็น ชิ้นส่วนย่อย และทำให้ชิ้นส่วนต่าง ๆ เคลื่อนไหว จากนั้นจึงนำมาประกอบกัน และนำส่วนประกอบที่สำเร็จแล้วมาวิ่งบน 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. การประยุกต์ การเคลื่อนที่ของวัตถุหลาย ๆ ตัวพร้อมกัน