แผ่นสอน ครูสยามสอนแฟลช flash

Read More

คีย์ลัดบน 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. การประยุกต์ การเคลื่อนที่ของวัตถุหลาย ๆ ตัวพร้อมกัน

Read More

การเปลี่ยนรูปทรงโดยใช้ Motion Shape

Read More

การทำตัวอักษร Blur

การทำตัวอักษร Blur บทความนี้เป้นการทำให้ตัวอักษร Blur จางหายไป ขั้นตอนมีดังนี้
ขั้นตอนการทำ
1. สร้างเอกสารขึ้นมาแล้วพิมพ์ข้อความที่เราต้องการ

2. จากนั้นกำหนด Key Frame ของตำแหน่งในการ Blur

3. จากนั้นให้ Create Motin Tween

4. หลังจากนั้นให้เลือกที่ Frame ที่ 30 แล้วขายข้อความให้มีขนาดใหญ่ตามที่เราต้องการ

5. หลังจากนั้นคลิกเลือกที่ตัวอักษร แล้วเลือก Alpha ที่ properties ลดค่าลงเป็น 0

6. ลองทดสอบ จะได้ผลดังภาพ

7. ตบแต่งให้ดูสวยงาม

Read More