การสร้างชิ้นงานแบบ Motion Tween ใน Scene
|
|
| การทำหยดน้ำรูปหัวใจ
|
| |
วิธีการเตรียมรูปหัวใจ
1. คลิก Oval Tool (O)
2. คลิก Fill Color
เลือกสีแดง |
|
| |
|
|
| |
3. กดปุ่ม Ctrl + F8
4. Name : พิมพ์ หยดน้ำหัวใจ
5. Type : เลือก Movie Clip
|
|
| |
| |
|
|
6. คลิก OK
7. วาดรูปวงกลม
(ไม่ต้องห่างจากเครื่องหมาย + มาก)
8. คลิก Subselection Tool (A)
|
|
9. เลื่อนเมาส์ไปที่ขอบของวงกลม
เมาส์เป็นรูป
10. คลิกซ้ายที่เส้นขอบ
11. จะมี Handle ขึ้นรอบวงกลม
12. คลิกซ้ายที่ Handle ด้านบนของวงกลมค้างไว้แล้วลากลง
|
| |
|
|
| |
| 13. คลิกซ้ายที่ Handle ด้านล่างของวงกลมค้างไว้แล้วลากลง
|
14. คลิก 2 ครั้งที่ Layer 1 เปลี่ยนชื่อเป็น หัวใจบน
15. คลิก Insert Layer
16. คลิก 2 ครั้งที่ Layer 2 เปลี่ยนชื่อเป็น หัวใจล่าง
|
|
| |
17. คลิก frame ที่ 1 ของ Layer หัวใจบน
จะเกิด Selection ที่รูปหัวใจ
|
|
18. กดปุ่ม Ctrl + C เพื่อคัดลอก
19. คลิก frame ที่ 1 ของ Layer หัวใจล่าง
20. กดปุ่ม Ctrl + V เพื่อวาง สังเกต Frame 1 ของหัวใจล่างจะเป็นสีดำ
|
| |
|
| |
| 21. คลิกที่รูปหัวใจล่าง จะเกิด Selection
|
| |
|
| |
22. คลิก Free Transform Tool (Q)
 จะเกิด Handle
23. เลื่อนเมาส์ไปที่มุม Handle เมาจะเป็นรูปลูกศรโค้ง
24. คลิกที่ Handle ค้างไว้แล้ว
หมุนหัวใจ
|
| |
|
| |
25. คลิกเมาส์ซ้ายเลื่อนลงมาด้านล่าง
26. คลิก Frame ที่ 1 ของหัวใจบน
|
| |
|
| |
27. กดปุ่ม F8 ที่แป้นคีย์บอร์ด
28. Name : พิมพ์ หัวใจบน
29. Type : เลือก Graphic
30. คลิก OK
|
|
|
| |
|
| |
| 31. คลิก Frame ที่ 1 ของหัวใจล่าง
|
| |
|
| |
32. กดปุ่ม F8 ที่แป้นคีย์บอร์ด
33. Name : พิมพ์ หัวใจล่าง
34. Type : เลือก Graphic
35. คลิก OK
|
|
|
|
| |
36. คลิก Selection Tool (V)
37. คลิกที่รูปหัวใจล่าง
38. สังเกตที่ Properties
|
| |
|
| |
39. ที่ Color : เลือกเป็น Alpha
40. กำหนด 15% (ปรับให้รูปหัวใจจางลง)
|
| |
|
| |
| |
| การเคลื่อนที่ของหัวใจ |
1. คลิก Selection Tool (V)
2. คลิกขวา Frame 25 ของ Layer หัวใจบน
3. คลิก Insert Keyframe
|
| |
|
| |
| 4. เลื่อนรูปหัวใจให้อยู่ใกล้เครื่องหมายบวก +
|
| |
|
| |
5. คลิกเฟรมที่ 10 หรือเฟรมใด ๆ ก็ได้ ระหว่างเฟรมที่ 1 - 25
6. คลิก Create Motion Tween
|
| |
|
| |
7. คลิกขวา Frame 25 ของ Layer หัวใจล่าง
8. คลิก Insert Keyframe
|
| |
|
| |
| 9. เลื่อน หัวใจขึ้นใกล้กับเครื่องหมายบวก +
|
| |
|
| |
10. คลิกขวาเฟรมที่ 10 หรือเฟรมใด ๆ
ก็ได้ระหว่างเฟรมที่ 1 - 25
11. คลิก Create Motion Tween
|
| |
|
| |
12. คลิกรูปหัวใจล่าง
13. Color : Aplha
14. เพิ่มเปอร์เซ็นต์ให้มากขึ้น เป็น 50%
|
| |
|
| |
| 15. กดปุ่ม Enter เพื่อทดสอบ
|
| |
| |
| การทำคลื่นน้ำ |
1. คลิก Insert Layer
2. คลิก 2 ครั้งที่ Layer 3 พิมพ์ คลื่นน้ำ กด Enter
3. คลิกซ้ายค้างไว้ที่ Layer คลื่นน้ำ ลากลงมาด้านล่าง Layer หัวใจบน แล้วปล่อย
|
| |
|
| |
4. คลิก Oval Tool (O)
5. คลิก Fill Tool
6. คลิก
 ไม่เอาสี
|
|
|
|
7. คลิก Stroke Color
 เลือก สีดำ
8. คลิก Frame 1 ของ Layer คลื่นน้ำ
9. วาดรูปวงรี ตรงเครื่องหมายบวก +
|
|
|
| |
|
| |
11. คลิก Selection Tool (V) 
12. คลิกซ้ายที่ วงรี
13. กดปุ่ม F8
14. Name : พิมพ์ คลื่นน้ำ
15. Type : เลือก Graphic
16. คลิก OK
|
|
|
| |
17. คลิก 1 ครั้ง Frame 1 ของ Layer คลื่นน้ำ
18. คลิกซ้ายค้างไว้ ลากไปวางไว้ที่ Frame 25
|
| |
|
| |
19. คลิกขวา Frame 50
20. คลิก Insert Keyframe
|
| |
|
| |
21. คลิกซ้าย Frame 50 Layer คลื่นน้ำ
22. คลิก Free
Transform Tool (Q) 
23. กดปุ่ม Shift + คลิกซ้ายที่ Handle ค้างไว้ แล้วลากไปทางขวา
|
| |
|
| |
24. คลิกขวาเฟรมที่ 35 หรือเฟรมใด ๆ
ก็ได้ระหว่างเฟรมที่ 25 - 50
25. คลิก Create Motion Tween
|
| |
|
| |
26. คลิก Selection Tool (V)
27. คลิก Frame 50 ของ Layer คลื่นน้ำ
28. Color : เลือก Alpha
29. ลดเปอร์เซ็นต์ เหลือประมาณ 7%
|
| |
|
| |
30. เลื่อนเมาส์ไปที่ Frame 50 หัวใจล่าง
คลิกค้างไว้ลากลงมาถึง Frame 50 ของ Layer หัวใจบน
|
| |
|
| |
| 31. กดปุ่ม F6
|
| |
|
| |
32. การเขียน Script เพื่อกำหนดให้วัตถุมีการเคลื่อนที่ต่างกันเมื่ออยู่บน Stage
1) คลิก Insert Layer 
|
| |
|
| |
2) เปลี่ยนชื่อ Layer4 เป็นชื่อ Code-น้ำฝน
|
| |
|
| |
3) คลิกเฟรมที่ 1 ของ Layer Code-น้ำฝน
4) คลิกเมนู Window --> Actions หรือกดปุ่ม F9 เพื่อเรียก Actions Frame
5) พิมพ์ Script --> gotoAndPlay(Math.ceil(Math.random()*75));
|
| |
|
| |
6) คลิกเฟรมที่ 50 ของ Layer Code-น้ำฝน
7) คลิกขวาเลือก Insert
Blank Keyframe
|
| |
|
| |
8) พิมพ์ Script à gotoAndPlay(2);
|
| |
|
| |
| 33. คลิก Scene 1
|
| |
|
| |
34. คลิกซ้ายที่ หยดน้ำหัวใจ (ที่ Library)
35. คลิกค้างไว้ลากมาวางไว้ที่ Stage
|
| |
|
| |
| 36. ทดสอบ กดปุ่ม Ctrl + Enter
|
| |
