การทำ Animation ด้วย Adobe Flash อย่างง่าย


วิธีใช้ที่ท่านกำลังอ่านต่อไปนี้ เขียนขึ้นเป็นวิทยาทาน ที่เว็บไซต์ของ สว อิเฎล ไม่อนุญาตให้นำไปใช้ในเว็บไซต์อื่น และสื่อใด ๆ ที่มีโฆษณาหรือเพื่อการค้า

1.) การวาดลงไปในรูปที่มีอยู่แล้ว หรือ อาจเรียกว่าเป็นการจำกัดขนาดของพื้นที่ที่วาด

1.1 คลิกที่ Brush หรือกด B
1.2 มองที่ส่วนล่างสุดของ Tool Bar
1.3 คลิกเลือกชนิดพู่กันเป็น Paint Selection
1.4 ใช้ Selection Tool เลือกวัถตุที่จะวาดลงไปด้านใน
1.5 ใช้ Brush เลือกสีมห่แล้ววางทับส่วนที่เลือกแล้ว

2.) ทำให้รูปที่วาดกลายเป็น Symbol

2.1 ใช้ Selection Tool เลือกรูปที่วาดทั้งหมด หรืออาจกด Ctrl+A แทนก็ได้
2.2 คลิกขวาบนสิ่งที่เลือก
2.3 คลิก Convert to Symbol
2.4 จะเห็นว่าเลือกได้ 3 อย่างคือ MovieClip, Button และ Graphic

2.4.1 MovieClip ไว้ใช้งานร่วมกับ ActionScript จะเล่นวนไปเรื่อย ๆ ถ้าไม่มีคำสั่ง AS บอกให้หยุด แม้จำนวน Frame ใน Timeline หลักจะมีเพียง Frame เดียวก็ตาม
2.4.2 Button ไว้ใช้ร่วมกับ ActionScript เพื่อลดการเขียนค่ำสั่ง event Mouse Over และ Mouse Out ออกไป
2.4.3 Graphic ใช้ทำ Animation ถ้าใน Symbol นี้เป็นภาพเคลื่อนไหว แล้วต้องการเล่นให้ครบความยาว Timeline หลักต้องมีจำนวน Frame อย่างน้อยเท่ากับจำนวน Frame ในตัว Graphic Symbol

2.5 ให้เลือก Graphic
2.6 คลิก “OK”

3.) ทำ Animation ใน Graphic Symbol

3.1 ในขณะที่เราอยู่ที่ Timeline หลักหรือ Scene 1 เราจะเห็นวัตถุที่เราวาดเป็น Graphic Symbol และมีชื่อ Symbol ที่เราสร้างใน Library
3.2 ถ้าต้องการเข้าไปทำให้ Symbol นั้งเป็นภาพเคลื่อนไหว ให้ Double Click บน Symbol
3.3 จะเห็นภาพเป็นแบบรูปด้านล่าง สังเกตุ หลังคำว่า Scene 1 จะเป็นชื่อ Symbol ที่เราสร้าง

3.4 ดูที่ Timeline ด้านบน
3.5 ถ้าอยากให้ความยาวของ Animation เป็น 24 Frames ให้คลิกที่พื้นที่สีขาวของ Frame ที่ 24
3.6 กด F5 (หรือคลิกขวา แล้วเลือก Insert Frame) เพื่อเพิ่ม Frame ให้ต่อเนื่องยาวไปถึง Frame ที่เลือก
3.7 คลิกขวาบนพื้นที่สีเทา ในส่วนของ Frame ที่เราสร้าง แล้วเลือก Create Classic Tween (สำหรับ CS5 ขึ้นไป) หรือ Create Motion Tween (สำหรับ CS3 หรือ Macromedia)
3.8 จะเห็นว่าพื้นที่ Frame จะกลายเป็นสีม่วง

3.9 คลิกที่ Frame สุดท้าย
3.10 กด F6 (หรือ คลิกขวาแล้วเลือก Insert KeyFrame)
3.11 ตอนนี้จะเห็นว่ามีจุดดำ 2 จุด และมีลูกศรชี้ไปทางจุดดำด้านขวา
**ที่ใช้ทำเช่นนี้เพราะเราจะทำ Animation ที่เป็น Loop คือวนกลับมาที่เดิมเรื่อย ๆ ดังนั้นตอนจบของภาพเคลื่อนไหว ควรจะเหมือนกับตอนต้น เพื่อความ Smooth

3.12 คลิกส่วนกลาง ๆ ของพื้นที่สีม่วง ในจุดที่เราต้องการเปลี่ยนสี หรือย้ายที่วัตถุ
3.13 กด F6 (หรือ คลิกขวาแล้วเลือก Insert KeyFrame)
3.14 ย้ายวัตถุ หรือ ย่อ หรือ ขยาย ตามใจชอบ โดยใช้ Free Transform Tool (หรือกด Q) ถ้าต้องการเปลี่ยนสีให้ดูข้อต่อไป

4.) การเปลี่ยนสี Graphic Symbol ใน Motion Tween หรือ Classic Tween

4.1 หลังจากมี Keyframe อยู่ตรงกลางพื้นที่สีม่วงบน Timeline แล้ว ให้คลิกที่วัตถุที่จะเปลี่ยนสี
4.2 เมื่อคลิกที่วัตถุแล้ว ในส่วนของ Properties จะแสดงการตั้งค่าของวัตถุนั้น ๆ
4.3 ดูที่คำว่า “COLOR EFFECT”
4.4 ที่ Style :
4.5 เลือก Advanced
4.6 ปรับสีจามใจชอบโดยเปลี่ยนตัวเลขของค่าสี RGB (Red Green Blue)
**4.7 ถ้าต้องการปรับสีในช่วงเวลาอื่น ๆ ให้สร้าง Keyframe ใหม่บนแถบสีม่วง แล้วทำซ้ำข้อ 4.2-4.6

5.) ลบ Frame ท้ายสุดใน Graphic Symbol ออก
เนื่องจากในข้อ 3.11 เราได้ทำให้ Frame แรก กับ Frame สุดท้ายมีหน้าตาเหมือนกัน ด้งนั้นอาจทำให้ดู Animation แล้วรู้สึกกระตุก จึควรเอา Frame สุดท้ายออกและสร้าง Keyframe ก่อนหน้าขึ้นมาแทน โดยมีวิธีการดังนี้

5.1 คลิกที่ Frame ก่อนสุดท้าย
5.2 กด F6 (หรือ คลิกขวาแล้วเลือก Insert KeyFrame)
5.3 จะเห็นว่ามีจุดดำ 2 จุดติดกันที่ส่วนท้ายของ Timeline
5.4 คลิกที่ Frame สุดท้าย
5.5 กด Shift+F5 เพื่อลบ Frame สุดท้าย (หรือคลิกขวา แล้วเลือก Remove Frames)
5.6 ตอนนี้ Animation ก็จะ Smooth มาก ๆ เนี้ยบมาก ๆ

6.) เอา Animation มาวางบนหน้าหลัก

6.1 เมื่อทำ Animation ในตัว Graphic Symbol เสร็จ ให้ออกจาก Graphic Symbol โดยคลิกที่ Scene 1 (ส่วนบนของพื้นที่ที่เราวาดรูป)
6.2 Copy และ Paste ตัว Graphic Symbol วางให้ทั่ว ๆ พื้นที่สีขาวที่เราใช้ทำงาน
6.3 ถ้าเผลอลบ Graphic Symbol ออกจากหน้าจอ ก็สามารถไปที่ Library แล้วลาก Symbol มาวางที่ส่วนที่เราทำงานได้
6.4 ย่อ ขยาย หมุน ตามใจชอบด้วย Free Transform Tool หรือกดตัว Q

7.) ทำให้ แต่ละ Symbol เริ่มเล่นในเวลาที่แตกต่างกัน

7.1 คลิกที่ Symbol บนหน้าจอ
7.2 มองไปที่ Properties
7.3 ส่วนของ LOOPING
7.4 ที่คำว่า first: หมายถึงให้เริ่มเล่าที่ Frame ไหน ใน Animation ในตัว Graphic Symbol
7.5 ใส่เลขลงไป โดยเลขนี้ห้ามเกินจำนวน Frame ใน Animation ที่เราสร้างใน Graphic Symbol
7.6 ทำซ้ำข้อ 7.1-7.5 โดยใส่เลขที่แตกต่างกัน

8.) Export ผลลัพธ์ โดยกด Ctrl+Enter

9.) เปลี่ยนสีพื้นหลัง

9.1 มั่นใจว่าไม่มีวัตถุใดถูกเลือกในหน้าจอ ให้คลิกที่พื้นที่วางของ Working space
9.2 ดูที่ Properties แล้วเปลี่ยนสีของ Stage ซึ่งจะเป็นสีพื้นเรียบ ๆ
9.3 ถ้าต้องการพื้นหลังที่ดู Fancy ให้ทำตามนี้

9.3.1 สร้าง Layer ใหม่ โดยคลิก “New Layer” ที่มุมซ้ายล่างของบริเวร Timeline
9.3.2 Layer ใหม่มักจะอยู่ด้านบน Layer เก่า ดังนั้นให้ลากมันลงมาไว้ใต้ Layer เก่า เพื่อให้มันเป็นพื้นหลัง (Layer ที่อยู่ด้านบนจะอยู่ด้านหน้าใน Working Area และ Layer ที่อยู่ด้านล่างจพอยู่ด้านหลัง)
9.3.3 วาดสี่เหลี่ยมและใส่สีในสี่เหลี่ยม โดยสามารถใส่เป็นแบบไล่สี หรือ Gradient ได้

9.4 เมื่อเสร็จแล้วก็อย่าลืมกด Ctrl+Enter เพื่อ Export ผลลัพธ์

**ถ้ากลัวว่าเวลาสร้างพื้นหลังแล้วไปแตะหรือเคลื่อน Symbol ที่สร้างไว้ สามารถ Lock Layer แรกได้โดยคลิกที่ส่วนซ้ายของ Timeline ที่เป็นรูปแม่กุญแจหรือ สอเท้า

วิธีใช้ที่ท่านกำลังอ่านต่อไปนี้ เขียนขึ้นเป็นวิทยาทาน ที่เว็บไซต์ของ สว อิเฎล ไม่อนุญาตให้นำไปใช้ในเว็บไซต์อื่น และสื่อใด ๆ ที่มีโฆษณาหรือเพื่อการค้า

บทความอื่น ๆ เกี่ยวกับ Adobe Flash
เครื่องมือ และสิ่งที่ควรรู้ใน Adobe Flash
วิธีการใช้ Motion Tween และ Classic Tween ใน Adobe Flash
วิธีการใช้ Shape Tween ใน Adobe Flash

Advertisements

Leave a comment

Filed under Uncategorized

Leave a Reply ถาม หรือ แสดงความคิดเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s