เรื่องของเสียงใน Flash

30/05/2013

Flash – Action Script 3 กับการสุ่ม

05/07/2013

Flash – Growing Animation หรือการ…เจริญเติบโต ?

08/06/2013
empty image
empty image

จะเรียกว่าไรดี ตั้งชื่อบทความยากอยู่นะ ฮ่าๆ คือมันเป็นเหมือนการงอก การเจริญเติบโต ฝรั่งเขาจะใช้ Glowing เป็นเทคนิคที่เจ๋งเลยทีเดียว โดยการทำ Glowing เนี่ยใน Flash รู้สึกจะทำได้อยู่ 2 วิธี คือทำแบบ Frame By Frame โดยการลบวัตถุออกที่ละเฟรมกันเลย กับการใช้ Mask ซึ่งแบบใช้ Mask จะดีกว่ามากเลยหล่ะ -__- พูดแล้วไม่เห็นภาพ ลองไปทำกันเลย…

แบบ Frame By Frame

ทำประมาณนี้นะ

Frame By Frame + Eraser

1. ใช้ text tool [T] พิมพ์ข้อความ จากนั้นกด [Ctrl+B] 2 ครั้ง เพื่อแปลงให้ข้อความกลายเป็น Fill

– ลากคลอบแต่ละตัวอักษรแล้วแปลงให้เป็น Symbol ผมใช้แบบ Graphic เพราะจะให้เล่นตาม Timeline หลักของ Scene ในนี้ผมก็จะได้ Symbol 4 ชิ้น ทำไมไม่เป็น 5 หล่ะ ? ก็เพราะตัว E มันซ้ำ

2. ในแต่ละตัวอักษร ให้ใช้ยางลบค่อยๆ ลบ ลบทีละนิดแล้วกำหนดคีย์เฟรมในเฟรมถัดไป แล้วก็ลบ ทำแบบนี้ไปเรื่อยๆ

อาจจะงง เอาแบบเป็นขั้นตอน
– กำหนดคีเฟรมที่เฟรมที่ 2
– ใช้ยางลบ ลบนิดนึง (สามารถเปิดใช้ Onion Skin ดูเฟรมก่อนหน้าเพื่อช่วยในการวาดได้)
– กำหนดคีย์เฟรมที่เฟรมที่ 3
– ใช้ยางลบ ลบ
– ทำไปเรื่อยๆ จนตัวอักษรถูกลบหมด
Note: ทิศทางการเติบโต
ถ้าต้องการให้ทิศทางการเติบโตจาก ล่างขึ้นบน ต้องลบจาก บนลงล่าง
ถ้าต้องการให้ทิศทางการเติบโตจาก บนลงล่าง ต้องลบจาก ล่างขึ้นบน

3. หลังจากวาดเสร็จแล้ว ลองกด Enter เล่นดูจะเห็นว่า อักษรค่อยๆ หายไปจากบนลงล่าง เราจะเปลี่ยนเป็นจากล่างขึ้นบน ให้เลือกที่เฟรมทั้งหมดโดยคลิกที่เลเยอร์ แล้วคลิกขวาที่เฟรมเลือก Reverse Frames จะเป็นการกลับเฟรม
ลองกด Enter เล่นดู จะเห็นว่าอักษรจะค่อยๆ งอกจากด้านล่างขึ้นบน เป็นอันเสร็จไป 1 อักษร… เหลืออีก 3 ตัว ทำต่อไปให้ครบ  -..-
ทั้งนี้อาจจะเจอปัญหาว่าแต่ละตัวอักษรมันมีจำนวนเฟรมไม่เท่ากัน ก็ไม่ต้องไปสนใจ

หลังจากครบแล้วก็นำ Symbol แต่ละชิ้นมาใส่ใน Scene แล้วกำหนดเฟรมไปให้มากกว่าจำนวนของเฟรมของ Symbol ตัวอักษรที่มากที่สุด งงหล่ะสิ เช่น ตัวอักษร S L E P มีความยาวเฟรม 24, 21, 25, 25 ตามลำดับ เฟรมที่มากที่สุดคือ 25 ดังนั้นในเฟรมของ Scene หลัก ต้องให้มีเฟรม 25 ขึ้นไป ส่วนผมใส่ไป 120 เฟรม ทำไมหล่ะ ? ลองดูเพิ่มเติมเรื่อง Graphic Symbol

สรุปการทำแบบ Frame by Frame ด้วยการลบ
ข้อดี 
เรากำหนดส่วนที่จะเคลื่อนไหวเอง ถ้าตัดเป็นชิ้นใหญ่ๆ มันก็จะสวยไปอีกแบบ
ข้อเสีย
ใช้เวลานาน เคลื่อนที่ไม่เนียน ถ้าจะให้เนียน จะยิ่งเสียเวลาเข้าไปอีก

แบบใช้ Mask

อู้ยยย แบบใช้ Mask นี้ง่ายมากเลย เนียนกว่าด้วย จริงๆ แบบ Mask มันสามาใช้แบบ Frame by Frame กับ แบบ Tween ก็ได้

Mask + Tween

ประมาณนี้

1. คลิกเข้าแก้ไข Symbol สร้างเลเยอร์เพิ่มขึ้นมาใหม่ แล้วคลิกขวาที่เลเยอร์ที่สร้างขึ้น เลือก Mask จะทำให้เลเยอร์ใช้เลเยอร์นี้มาอยู่ใต้เลเยอร์ Mask ตัวอักษรจะหายไป ให้คลิกที่รูปกุญแจออกก่อน
2. วาดรูปทรงที่เลเยอร์ Mask แล้ววาดรูปทรง
3. กำหนดเฟรมให้ทั้งสองเลเยอร์ที่เฟรม 48 (กำหนดเวลาที่จะให้ตัวอักษรปรากฎเต็มตัว) 
จากนั้นกำหนดคีย์เฟรมของเลเยอร์ Mask ที่เฟรมที่ 48 จากนั้นวาด Fill ทับให้ทับตัว S สนิท จะวาดใหม่หรือจะลากขึ้นมาทับก็ได้ แค่ให้มันทับก็พอ
จากนั้นก็ Create Shape Tween ก็ได้ละ 
การใช้ Mask ไม่ต้องทำทีละตัวก็ได้ พิมพ์ข้อความทั้งหมดเลยก็ได้ แบบข้างล่าง

ตัวอย่างที่ 2 ของการใช้ Mask

ลองมาทำกันเลย ก่อนอื่นหาดอกไม้ฟรีได้ที่
http://www.webdesignmash.com/freebies/35-free-vector-flourishes-and-swirls-for-inspiration/
ที่ผมใช้มาจากเว็บนี้ http://dryicons.com เอาของเขามา ต้องให้เครดิตเขาหน่อย
ไฟล์ที่โหลดมาจะเป็นไฟล์ Vector ซึ่งมันจะต้องใช้โปรแกรมที่สร้างภาพ Vector เปิด เ่ชน illustrator แต่ถ้าเป็นไฟล์ .ai สามารถ import เข้าไปใน Flash ได้เลย

1. เลเยอร์แรกให้เอาภาพดอกไม้มาใส่

2. ที่เลเยอร์ที่สองวาดรูปทรงไว้ด้านล่างดังรูป (สีฟ้าๆ) คลิกขวาแล้วเลือก Mask

3. สร้างเฟรมที่เฟรมที่ 48 จากนั้นกำหนดคีย์เฟรมของเลเยอร์ที่สอง เลเยอร์ mask อ่ะ
แล้วคลิกขวาเลือก Create Shape Tween

สรุป การใช้แบบ Mask แบบนี้
ข้อดี 
ง่าย, เร็ว, กำหนดช่วงเวลาของการเติบโตได้ง่าย, พร้อมเพรียง เนียนไม่ขรุขระ
ข้อเสีย
ควบคุมมุมของการเติบโตได้ลำบาก เช่นการบิดโค้งไรงี้

Mask + Frame By Frame

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

1. เลเยอร์แรกใส่ดอกไม้ จากนั้นล๊อกไว้เลย

2. มาที่เลเยอร์สองคลิกขวา เลือก Mask แล้ว ปลดล๊อกเฉพาะเลเยอร์ 2 จากนั้นใช้ Brush Tool วาด หรือจะใช้อย่างอื่นวาดก็ได้ แล้วแต่อ่านะ แต่ใช้ brush ง่ายสุดสำหรับงานนี้
ต่อมาก็เลือกขนาดหัวแปลงให้เหมาะกับเส้นของดอกไม้จากนั้นจุดไป แล้วสร้างคีย์เฟรมที่เฟรมถัดไป ซึ่งสามารถกด [F6] ได้เลย แล้วก็จุดไปเรื่อยๆ คือจุด – F6 – จุด – F6 ไปเรื่อยๆ
อาจจะงง ดูบ้างล่างละกัน…

ดูแบบเต็ม
เสร็จแล้ว สวยงาม เรียบเนียนดี เป็นยังไงกันบ้าง….
สรุป การใช้แบบ Mask แบบนี้
ข้อดี
กำหนดช่่วงโค้งงอของการเติบโตได้, พร้อมเพรียง เนียนไม่ขรุขระ สวยงาม โอ้วพระเจ้า
ข้อเสีย
อาจจะใช้เวลานิดหน่อย แต่ยิ่งเราต้องการละเอียด ยิ่งต้องค่อยๆ ระบายทีละน้อย ยิ่งใช้เวลานาน

หมดแล้ว…ถ้าเจอวิธีอื่น แล้วจะมาบอก Zzz