Flash – ทำพลุ , ดอกไม้ไฟ โดยใช้ Deco Tool

วันนี้ ลองมาทำพลุ หรือดอกไม้ไฟ หรือ Firework โดยใช้ Deco Tool หลักการทำก็ง่ายๆ ไม่ต้องเขียนโปรแกรม ลองมาทำกันเลย…

1. วาดเส้นขึ้นมา 1 เส้นด้วยเครื่องมือ Line Tool [N] จากนั้นแปลงเป็น Symbol [F8] ตั้งชื่อ Line

2. คลิกเข้ามาใช้ Symbol ที่วาดเส้นไว้ จากนั้นก็แปลงเป็น Symbol [F8] อีกครั้งหนึ่ง ผมตั้งชื่อ Root_Line

3. กด [Q] แล้วลากกำหนดจุดกึ่งกลางไว้ที่ริมสุด ขอบขวา แล้วกำหนด keyframe ที่เฟรมที่ 20 ดูที่แถบ Transform ปรับ Scale Width ให้เป็น 0% (ซึ่งโปรแกรมมันอาจจะปรับให้เองอีกครั้งซึ่งอาจไม่เท่ากับ 0)

4. Create Classic Tween แล้วคลิกบริเวณเฟรมระหว่างการ Tween ใส่ค่า Ease ไป 100 (ช้าออก)
5. สร้างเฟรมเปล่าที่เฟรมที่ 21 แล้วลบเส้นทิ้งไป

ลองทดสอบดู จะได้ประมาณนี้

ต่อไปกลับมาที่ Scene 1

6. ลบเส้นที่วาดไว้ตั้งแต่แรกทิ้งไปซะ แล้วเลือก Deco Tool [U] ในแถบ Properties เลือกชนิดเป็น Symmetry Brush
Module: คลิก Edit… แล้วเลือก Symbol ของผมชื่อ Line ซึ่งเก็บมีการเคลื่อนไหวของเส้นอยู่

7. วาดลงไปบน stage ให้เหมือนกับภาพตัวอย่าง โดยคลิก 1 ครั้งในแนวนอน (แกน X) โดยให้เป็นแนวเดียวกันกับจุดศูนย์กลาง หรือใครจะทำแบบเอียงก็ได้ ลองๆ คลิกค้างแล้วหมุนเล่นดู  เสร็จแล้วคลิกที่จุดที่คล้ายๆ เครื่องหมายบวก (+) ลากขึ้นเพื่อเพิ่มจำนวนวัตถุ ลากลงเพื่อลดจำนวนวัตถุ เมื่อวาดเสร็จก็จะได้เส้นๆ หลายเส้น โดยมันจะรวมกันอยู่เป็น Group

 

 

8. เลือกวัตถุนั้นแหละ แล้ว Break Apart [Ctrl+B] แล้วแปลงเป็น Symbol [F8] ผมตั้งชื่อ Line_Animate

แล้วกำหนดเฟรมไปที่เฟรม 21 แล้วลอง Test Movie ดู จะได้แบบนี้

 

9. จะปรับแต่งนิดหน่อย โดยเราจะทำให้มันค่อยๆ ขยายขึ้นด้วย
– โดยคลิกที่วัตถุที่อยู่บน stage ซึ่งก็มีอยู่อันเดัยวนั่นแหละ แล้วแปลงเป็น Symbol [F8] อีกครั้งหนึ่ง ตั้งชื่อ Line_FireWork

– ไปกำหนด keyframe ที่เฟรม 21 ซึ่งภาพมันจะหายไป ไม่ต้องสนใจ ให้กลับมาที่เฟรมที่ 1 ปรับ scale ให้เหลือ 0 หรือปรับแล้วแต่เราก็ได้ว่าอยากให้ตอนเริ่มต้นมันใหญ่ขนาดไหน
– Create Classic Tween แล้วคลิกบริเวณเฟรมระหว่างการ Tween ใส่ค่า Ease ไป 100 (ช้าออก)
– Test Movie ก็จะได้แบบนี้

** ใน Properties ของเส้น ดังรูป ตรง Scale : ถ้าเลือก Normal เมื่อมีการขยายหรือ Scale จะส่งผลให้เส้นขนายหรือลดขนาดตาม แต่ถ้ากำหนดเป็น None เส้นจะคงที่ไม่ถูกเพิ่มหรือลดขนาด ซึ่งการปรับตรงนี้ มีผลต่อพลุของเราด้วย

เสร็จแล้วเราก็ได้ Symbol ที่เป็นพลุแล้ว ซึ่งทำให้สามารถดึงมาใช้ได้ง่ายๆ กี่อันก็ได้ ปรับแต่งสีสันอะไรก็ใส่ไป ต่อไปเราก็จะมาทำแสงตอนยิงพลุขึ้นไป เขาเรียกว่าอะไรหว่า ?

11. ที่ Scene 1 สร้างเลเยอร์ขึ้นมาใหม่ แล้วใช้ Line Tool วาดเส้นลำแสงของพลุ กำหนดขนาด Stroke ให้พอประมาณ

12. จากนั้นลงสีแบบ Linear โดยให้ด้านซ้ายและขวาให้กำหนด Alpha = 0% ตรงกลางสีไรก็ได้ ตามรูป

13. ใช้ Gradient Transform Tool [F] ในเฟรมแรกให้ลากแถบสีลงต่ำ จะทำให้เห็น Alpha ในเฟรมสุดท้ายลากขึ้นไปสูง
จากนั้น Create Shape Tween

 

แล้วลากเลเยอร์แรกที่เป็นการระเบิดของพลุ ไปต่อหลังเฟรมที่เป็นการยิงพลุขึ้นไป

เสร็จแล้วก็จะได้ประมาณนี้

ต่อไปเมื่อเราอยากจะเปลี่ยนรูป ซึ่งรูปเดิมมันคือเส้นๆ ใช่มั้ย เราอยากจะเปลี่ยนเป็นรูปอื่นๆ โดยไม่ต้องไปทำใหม่ทั้งหมด

1. วาดรูปใหม่ที่ต้อง โดย New Symbol หรือจะวาดแล้วแปลงเอาก็แล้วแต่
โดยผม new Symbol ตั้งชื่อ Star จากนั้นจะวาดเป็นรูปดาว เสร็จแล้วก็แปลงเป็น Symbol ตั้งชื่อ Root_Star (ไม่ใช่ Lost Star นะ หุหุ)
2. ทำการใส่การเคลื่อนไหว เฟรมแรกปรับขนาดลง เฟรมที่ 20 ปรับเป็น 100% พร้อมกับขยับไปทางขวานิดหน่อย
จากนั้นกำหนด keyframe ที่เฟรม 25 ใส่ Alhpa ให้เป็น 0% เพื่อให้มันจางหายไป

3. ที่ Library เลือก Symbol ชื่อ Line_Animate ซึ่งเก็บการระเบิดของพลุอันเก่า ให้เราทำการ Duplicate ตั้งชื่อ Star_Animate

4. ดับเบิ้ลคลิกเพื่อแก้ไข Star_Animate
– คลิกเลือกที่วัตถุที่เป็นเส้นๆ ใน Stage แล้ว Swap Symbol แล้วเลือก Star แล้ว OK จากนั้นก็ทำให้ครบทุกชิ้น
– เนื่องจาก Star เรามี 25 เฟรม ก็ให้กำหนดเฟรมให้กับ Symbol นี้ให้เป็น 25 เหมือนกัน

 

5. จากนั้นก็ไปที่ Library อีก ให้ Duplicate Symbol ชื่อ Line_FireWork ซึ่งเก็บการขยายการระเบิดของเส้นอันเก่า หลังจาก Duplicate ให้ตั้งชื่อใหม่ว่า Star_FireWork

6. ดับเบิ้ลคลิกเพื่อแก้ไข Star_FireWork
– เลือกวัตถุในเฟรมที่ 1 แล้ว Swap Symbol
– ทำเช่นเดียวกันกับเฟรมสุดท้าย หรือเฟรมที่ 21
– ลากเฟรมที่ 21 ไปอยู่เฟรมที่ 25

7. กลับไปที่ Scene 1
– สร้างเลเอยร์ใหม่ แล้วเอา Star_FireWork มาใส่
**เวลาการระเบิดหรือ การจางหายไปมันอาจจะเร็วไปซักหน่อย ก็ไปเพิ่มเฟรมเอานะ
**เพื่อความสวยงาม เอา Symbol การระเบิดมาซ้อนกันหลายๆ กันก็ได้
ลองๆ เล่นดูครับ

เสร็จแล้วก็จะได้แบบนี้

Download Source File
ลองไปประยุกต์ใช้กันดู ลองเปลี่ยนภาพ เปลี่ยนองศา เปลี่ยนขนาด ซึ่งก็จะทำให้เกิดการเคลื่อนไหวที่หลากหลายรูปแบบมากขึ้น ขอให้สนุก Zzz