พื้นฐานการสร้างนาฬิกาด้วย Flash

18/08/2013

Flash Action Script 3.0 – พื้นฐานการทำหน้า PreLoader หรือหน้ารอระหว่างโหลด

25/08/2013

สร้าง Text Animate ด้วยโปรแกรม Adobe After Effect กันเถอะ !!!

19/08/2013
empty image
empty image

วันนี้เราจะมาสร้างข้อความเคลื่อนไหว หรือ Text Animation ด้วยโปรแกรม Adobe After Effect ซึ่งสามารถทำแอนิเมชั่นได้หลากหลายแบบ มากกว่า Flash และง่ายกว่าด้วย โดยใช้ Presets จะเป็นยังไง ไปดูกันเลย….

1. 1. เปิดโปรแกรม After Effect ขึ้นมาแล้ว New Composition โดยการกดที่แถบเมนู หรือกด [Ctrl+N]

2. ตั้งค่า
Name : ตั้งชื่อ
Width: ความกว้าง
Height: ความยาว
Pixel Aspect Ratio: ควรเลือกเป็น Square Pixels
Frame Rate: จำนวนภาพต่อวินาที ใช้ 24 เฟรมก็โอเค เป็นค่าปกติของ Flash
Duration: ใส่จำนวนเวลาของงานเรา ผมใส่ 5 วิก็พอ รูปแบบจะเป็น ชม:นาที:วินาที:เฟรม

3. พิมพ์ข้อความ โดยเลือกที่ Text Tool เป็นรูปตัว T หรือกด Ctrl+T หรือ New Layer > Text

4. ใส่การเคลื่อนไหว ซึ่งเราสามารถทำเองได้หมดทุกอย่าง แต่มันจะยุ่งยากเกินไป เราจึงใช้ Preset ที่โปรแกรมมีให้ ซึ่งมีให้เลือกมากมาย โดยไปที่แถบ Effect & Presets preset ที่เกี่ยวกับข้อความจะอยู่ที่ Animation Presets > Support Files > Presets > Text จะเห็นว่าแบ่งเป็นหลายหมวดหมู่มาก ต้องลองเลือกแล้วใส่ดู….

วิธีใส่มีหลายวิธี เช่น…
– คลิกที่ข้อความที่อยู่บนจอให้เกิดกรอบ แล้วไปดับเบิ้ลคลิกที่ preset ได้เลย (ไม่มีภาพ)

– คลิกที่ preset แล้วลากมาวางทับข้อความที่อยู่บนหน้า preview 
– คลิกที่ preset แล้วลากมาวางทับที่เลเยอร์
ก่อนจะใส่ preset ต้องดูก่อนว่า Time Indicator ชี้อยู่ที่เวลาใด ซึ่งชี้ตรงไหน จะเป็นการเริ่มของ
แอนิเมชั่นตรงนั้น

เมื่อใส่ preset แล้วสามารถกดดูโดยกด Space Bar

5. ไปที่ File > Export > Adobe Flash Player (SWF)…

ตั้งค่า Jpeg Quality 10 เพื่อให้ได้คุณภาพสูงสุด
ส่วน Audio จะเอาเสียงด้วยป่าว ถ้าเอาก็ติ๊ก
ส่วน Option ก็… อ่านเอานะ ฮ่าๆๆ ผมไม่ติ๊กนะ ไม่อยากได้อะไรเพิ่มเติม
เรียบร้อย…

6.เปิด Flash แล้วทำการ Import ควรจะเลือก Import to Library

มาดูที่ Library เราจะเห็น Symbol ซึ่งชนิด Graphic จะเป็นจำนวนตัวอักษรในข้อความ และ Movie Clip จะเป็นการเคลื่อนไหวของข้อความ

เมื่อคลิกเข้าไปดู จะเห็นคีย์เฟรมเต็มไปหมด มีทั้งหมด 120 เฟรมด้วยกัน ซึ่งมาจาก 5 นาที คูณ 24 เฟรม = 120 ลองกด Enter เล่นดู โอ้ว มันเจ๋งมากเลย

 

ตัวอย่างวิธีการนำไปใช้…

1. ผม Export มา 3 ไฟล์ ก็ทำการ import มาใส่ Flash แล้วลากมาวางไว้ที่ Scene 1

เนื่องจากภาพเคลื่อนไหวที่ได้เป็น Movie clip ซึ่งมันจะเล่นวนไปเรื่อยๆ ใน Timeline ถ้าเราอยากให้เล่นครั้งเดียว ก็เปลี่ยนมันเป็น Graphic ซะ

4. ผมอยากจะปรับแต่งข้อความ “สวัสดี” ซะหน่อย สามารถใส่ Filter หรือจะเปลี่ยนสีก็ได้ด้วย Color Effect

5. ผมจะทำให้มันดูเหมือนการวนลูปแล้วเมื่อเริ่มเล่นใหม่อีกครั้งโดยการ ทำให้มันหายไป ข้อความ zzzleepyinclass ที่เฟรม 210 ค่อยๆ จางหายไปในเฟรมที่ 240

– เริ่มต้นให้กำหนดคีย์เฟรมที่เฟรมที่ 210 จากนั้นดูที่ Properties แถบ Looping ให้เลือกเป็น Single Frame ตรง First ใส่ 120 ซึ่งหมายถึงให้เล่นเฟรมเดียวคือเฟรมที่ 120 เท่านั้น (ซึ่งเป็นเฟรมสุดท้าย)
– ที่แถบ Color Effect ให้เลือก Alpha ปรับให้เป็น 100%
– จากนั้นไปกำหนดคีย์เฟรมที่เฟรมที่ 240 ปรับ Alhpa เป็น 0%

– Create Classic Tween สามารถกด Enter เพื่อดูผลได้ เป็นไงมั่ง….. มันต้องค่อยๆ จางหายไปนะ

6. มาที่ข้อความ ยินดีตอนรับ จะไม่ให้มันหายไปละ แต่ให้มันค่อยๆหมุนออกไปละกัน
– กำหนดคีย์เฟรมที่ 210 แถบ Looping เลือก Single Frame ใส่เลขเฟรมสุดท้าย ซึ่งในที่นี่คือ 120
– ก่อนการหมุน ดูจุดหมุนก่อนนะครับ เพราะบางที่ มันไม่ได้อยู่ในจุดที่เราต้องการเสมอไป…
เปลี่ยนจุดหมุนยังไงว้า… สามารถใช้ Free Tranform [Q] แล้วมองหาหลอดสีเขียว เอ้ย.. มองหาจุดสีขาวๆ เล็กๆ แล้วลากไปไว้ยังจุดที่ต้องการ
– เรียบร้อยไปกำหนดคีย์เฟรมที่เฟรม 240 แล้วก็ปรับขนาด ผมจะให้มันหมุนแล้วหดหายไปเลยอ่านะ ดังนั้นเฟรมที่ 240 จึงปรับขนาดให้เป็น 0%

– Create Classic Tween จากนั้นคลิกซ้ายที่เฟรมของการ Tween หรือคลิกตรงไหนก็ได้ที่มันเป็นลูกศร หรือคลิกที่เฟรมระหว่าง 210 – 240 ถ้าใครยังหาไม่เจออีกนะ ฮ่าๆๆ
เมื่อคลิกแล้วจะเห็นแถบ Tweening ใน Properties
ค่า Ease ผมใส่ -100 ไปเลย ขี้เกียจไปวาดเอง -..-
ส่วน Rotate เลือกเป็น CW หรือตามเข็ม จัดไป 3 รอบ

เสร็จแล้ว แต่ข้อความต้อนรับกับ sleep มันหายไปพร้อมกันเลยอ่ะ เปลี่ยนใจอยากจะให้ยินดีต้อนรับหายไปก่อน เพราะมันมาก่อน เราก็ทำการเลื่อน…
จะเลื่อนเข้าหรือออกดี เลื่อนเข้าละกัน ตรงนี้แล้วแต่เราจะเลือกนะ ขึ้นอยู่กับเวลาและความเหมาะสม

เลือกที่เฟรมแล้วคลิกแล้วลาก
จากนั้นเลือกเฟรมที่มันเกินไปแล้ว Remove ออกไป

ตัวอย่างเมื่อเสร็จแล้ว

เพิ่มเติม

จะเห็นว่าข้อความ “สวัสดี zzz” มันสวยเพราะใส่ Filter แต่ไอ้ 2 ตัวข้างล่างมันไม่ได้ใส่ ถ้าเราจะใส่ Filter หรือตกแต่งอื่นๆ ให้มันหล่ะ ? ตรงนี้ทำได้หลายวิธี…

1. โดยเปลี่ยนเป็น Movie Clip แล้วใส่ Filter ซะ แต่ถ้าเปลี่ยนเป็น MC ต้องดูเรื่องการเล่นวนลูปด้วย สามารถหยุดการเล่นด้วยการเขียน AS ไว้ที่เฟรมสุดท้ายก็ได้

2. ไปตกแต่ง แก้ไขที่ Symbol เลยทีละตัวอักษร -..- ซึ่งแก้ไขตรงนี้ ไม่มีผลอะไรต่อการเคลื่อนที่ เพราะการเคลื่อนไหวของข้อความเกิดจากการวางตำแหน่งของ Symbol ทีละเฟรมๆ กันเลยทีเดียว -0-

3. เปลี่ยนตัวอักษรพวกนั้นซึ่ง Symbol แบบ Graphic ให้เป็น Movie Clip แต่แบบนี้ถ้าเราจะใส่ Filter ก็จะใส่ได้แค่ตัวเดียว เฟรมเดียว มี 120 เฟรมก็ตายสิ -..- ต้องลองวิธีถัดไป

7. เข้าไปที่ Symbol ของแต่ละตัวอักษร แล้วก็ไปเปลี่ยน Symbol เหล่านั้นเป็น Movie Clip อีกทอดหนึ่งแล้วก็ใส่ Filter

8. ไปใช้ After Effect ทำเถอะครับ ฮ่าๆๆ

ตัวอย่าง…

– ผมลบคำว่า ดี ออกไปเลย
– แล้วใส่ตัว D เข้าไปแทน
– ลากนั้นลบ Symbol สระอี ทิ้งไปเลย
– ใช้วิธีที่ 7 กับอักษรทั้งหมดในคำว่า Class

ก็จะได้ประมาณนี้ …

Download Files : https://www.dropbox.com/s/sen861jyi59xi6i/text_animate.zip
พอละนอน 😛 Zzz