วิธีการทำบอลเด้งต่อเนื่องใน Adobe Flash

การทำบอลเด้ง หรือ Bouncing Ball เป็นกิจกรรมการฝึกปฏิบัติการเคลื่อนไหวขั้นพื้นฐานของแอนิเมชัน (Animation) ซึ่งสามารถนำหลักการไปประยุกต์ใช้กับการเคลื่อนไหวอื่น ๆ ของวัตถุและร่ายกายสิ่งมีชีวิตได้ไม่รู้จบ แต่ วันนี้ อ.พราว หรือ (สว อิเฎล) ไม่ได้มาสอนการทำ Bouncing Ball แต่จะมาสอนการทำให้บอลเด้งต่อเนื่องหลังจากที่คุณวาด Baouncing Ball เสร็จแล้ว

การทำให้บอลเด้งต่อเนื่องคือ เราจะวาดบอลเด้งเพียง 1 รอบ และนำภาพวาดชุดนั้นมาเรียงต่อกันให้เด้งได้ต่อไปเรื่อย ๆ

๑. เข้าโปรแกรม Adobe Flash และสร้าง Symbol ใหม่ เพื่อจะวาด Bouncing Ball
(ในตอนจบของบทเรียนนี้ สว อิเฎล จะให้ Symbol นี้อยู่ด้านในสุด หรือลึกที่สุด)
๑.๑ คลิก Insert
๑.๒ คลิก New Symbol
๑.๓ ตั้งชื่อให้ Symbol และ เลือกชนิดให้เป็น Graphic
๑.๔ คลิก OK

๒. วาด Bouncing Ball ให้ครบ ๑ รอบ ณ ที่นี้ สว อิเฎลวาดบอลเด้งจากซ้ายไปขวา และเมื่อวาดเสร็จ ให้สังเกตว่าวาดไปแล้วกี่ Frame, ถ้าดูจากภาพ สว อิเฎล วาดไปแล้ว ๙ Frame

๓. สร้าง Symbol ใหม่ โดย Symbol นี้จะใช้ทำบอลเด้งต่อเนื่อง ซึ่งจะเอาบอลใน Symbol ที่เคยสร้างไว้มาเรียงต่อ ๆ กัน
๓.๑ คลิก Insert
๓.๒ คลิก New Symbol
๓.๓ ตั้งชื่อให้ Symbol และ เลือกชนิดให้เป็น Movie Clip
* (ชื่อของ Symbol จะไม่ซ้ำกับ Symbol แรกที่สร้าง และ การเลือกชนิดเป็น Movie Clip เหมาะสำหรับคนที่จะทำ Animation ซึ่งควบคุมโดย ActionScript แต่ถ้าต้องการทำ Animation เพื่อทำการ์ตูน หรือ ไฟล์วิดีโอทั่วไป ให้เลือกเป็น Graphic เหมือนเดิม)
๓.๔ คลิก OK

๔. วางแผนเตรียม Frame และ Key Frame ให้พร้อมก่อนเอาบอลเด้งมาใส่ใน Symbol ใหม่
จากข้อ ๒ ที่ สว อิเฎลบอกให้สังเกตว่าภาพบอลเด้งของเรามีภาพวาดย่อย ๆ อยู่ ๙ ภาพ ซึ่งเวลาเอาภาพมาต่อกัน ภาพแรกและภาพสุดท้ายจะซ้ำกัน (คือภาพที่บอลอยู่ติดพื้น) ดังนั้น สว อิเฎล จะสร้าง Frame ไว้ช่วงละ ๘ Frame จึงจะขึ้น Key Frame ใหม่
๔.๑ เงยหน้าดูที่ Timeline
๔.๒ คลิกที่ Frame ที่ ๙ แล้วกด F7 (หรือ F6 ถ้าเครื่องคอมใครกด F7 ไม่ได้)
๔.๓ จากนั้นไป Frame ที่ ๑๗ แล้วกด F7
๔.๔ ทำเช่นเดียวกันไปเรื่อย ๆ ที่ Frame ที่ ๒๕, ๓๓
๔.๕ จากนั้น คลิกที่ Frame ที่ ๔๐ แล้วกด F5 เพื่อยืด Frame ออกไป

๕. จากนั้นจะลากเอา Symbol แรกที่สร้างมาใส่ในแต่ละช่วงของ Frame ที่เตรียมไว้
๕.๑ เปิดหน้าต่าง Library ขึ้นมา (สามารถกดรูป icon กองหนังสือ หรือไปที่เมนู Window แล้วกด Library)
๕.๒ ณ Frame แรก ให้ลาก Symbol แรกที่สร้างมาแปะลงบนพื้นที่วาง ๆ กลางหน้าจอ

๖. เมื่อมีบอลเด้งที่ Key Frame แรกแล้ว ให้ไปที่ Key Frame ถัดไป (ณ ที่นี้คือ Frame ที่ ๙) จากนั้นให้ลาก Symbol แรกมาใส่เหมือนเดิม; ที่จุดนี้ตอนเป๊ะเป็นพิเศษ คือ
๖.๑ เปิด Onion Skin บน Timeline (เปิด Onion Skin โดยคลิกที่ icon สีม่วงด้านล่าง Timeline หน้าตาปุ่มจะเป็นสี่เหลี่ยมสีม่วงซ้อนบนสี่เหลี่ยมสีขาว ถ้ามองผ่าน ๆ จะมี ๓ ปุ่มเรียงกัน Onion Skin จะอยู่ปุ่มซ้ายสุด)
๖.๒ เมื่อเปิด Onion Skin แล้วจะพบว่า เราสามารถมองทะลุเห็น Frame ที่อยู่ก่อนหน้านี้
๖.๓ ให้ลากแถบสีเทา ตรงหัว playhead (เส้นแดงบอกเวลาปัจจุบันของ Timeline) ให้กินมาทางด้านหน้าเพียง ๑ Frame
๖.๔ จากนั้น ณ Frame ที่ ๙ ให้เราเอาบอลรูปแรก (หรือรูปที่ติดอยู่กับพื้น) มาลากให้ตรงพอดีกับตำแหน่งที่บอลลูกสุดท้ายของ Frame ก่อนหน้านี้ควรจะตกลงมา
๖.๕ ทำเช่นนี้ไปเรื่อย ๆ ที่ Frame ที่ ๑๗, ๒๕, ๓๓ คือลาก Symbol ลงมาใส่ Frame ที่วาง และย้ายบอลให้พอดีต่อเนื่องกับ Frame ก่อนหน้า

๗. เมื่อเสร็จ timeline จะมีหน้าตาดั่งภาพด้านล่าง

๘. กลับมาที่ Scene ๑
(ถ้าตอนนี้คุณพบว่าหน้าจอทำงานอยู่ใน Symbol ให้คลิกที่ Scene 1 ทางด้านซ้ายมือบนของพื้นที่ทำงาน)
๘.๑ เมื่ออยู่ที่ Scene ๑ แล้ว ให้สร้าง ๒ Layers
๘.๒ Layer ล่างคือพื้นหลัง ให้วาดฉาก/วิว ลงไป
๘.๓ คลิกที่ Layer บนซึ่งตอนนี้ยังว่าง ๆ อยู่
๘.๔ ลาก Symbol (อันที่เราพึ่งทำบอลเด้งต่อเนื่องเสร็จ) จาก Library มาใส่ใน พื้นที่ทำงานของ Layer บน
๘.๕ จัดวาง ย่อขนาด โดยให้บอลลูกแรกแตะพื้น

ผลลัพธ์ที่ สว อิเฎลได้ สามารถดูได้ที่
http://sw-eden.deviantart.com/art/Continued-Bouncing-Ball-431687320

Advertisement

1 Comment

Filed under Uncategorized

One response to “วิธีการทำบอลเด้งต่อเนื่องใน Adobe Flash

  1. Pingback: สอนใช้โปรแกรม Adobe Animate ฟรี! พื้นฐาน | Sw-Eden.NET

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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.