การทำอนิเมชั่นลูกบอลกระเด้งเหมือนในตัวอย่างมีขั้นตอนดังนี้
ขั้นตอนที่ 1. สร้างไฟล์แฟลชขึ้นมาใหม่ (New Document)
สร้างไฟล์แฟลชขึ้นมาใหม่โดยจะใช้ Actionscript 2.0 หรือ 3.0 ก็ได้เพราะชิ้นงานที่จะทำนี้ไม่ต้องใช้วิธีเขียนสคริปต์
ขั้นตอนที่ 2. ตั้งค่าไฟล์เอกสาร (Document Settings)
ชื่อไฟล์: Bouncing Ball
ขนาดพื้นที่ทำงาน: 400x400
พื้นหลัง: สีขาว (#ffffff)
เฟรมเรท (Frame Rate): 21 fps
ขั้นตอนที่ 3. ตั้งชื่อเลเยอร์ (Layer)
กดเปลี่ยนชื่อเลเยอร์ที่มีอยู่จากเดิมโดยกดดับเบิ้ลคลิกที่ "Layer 1" ให้เปลี่ยนเป็นชื่อใหม่ว่า "Ball"
ขั้นตอนที่ 4. สร้างลูกบอล (Ball)
สร้างลูกบอลขึ้นมาด้วย Oval Tool จากแถบเมนูด้านซ้ายมือ
โดยอย่าลืมเลือกเปิดใช้ Object Drawing ไว้ด้วยแล้วตั้งค่าดังนี้
วงกลมสี #f0d637 ขนาดกว้าง 120px และสูง 120px
ใช้เส้นขอบสี #000000 ขนาด 3 px
ขั้นตอนที่ 5. เปลี่ยนลูกบอลเป็นซิมโบล (Symbol Creation)
เลือกวงกลมลูกบอลที่สร้างเอาไว้ในขั้นตอนที่แล้วจากนั้นกด F8 เพื่อเปลี่ยนให้กลายเป็นซิมโบล (Symbol) ชนิด "Movie Clip" โดยตั้งชื่อว่า "mc_ball" และเลือก registration ให้ตั้งอยู่ที่จุดตรงกลางดังรูป
ขั้นตอนที่ 6. ใส่เงา (Shadow)
ขั้นตอนที่ 6. ใส่เงา (Shadow)
สร้างเลเยอร์ขึ้นใหม่โดยตั้งชื่อว่า "Shadow" โดยนำไปให้วางอยู่ใต้เลเยอร์ "Ball" ดังรูปแล้ววาดวงรีด้วย Oval Tool ลงไปในเลเยอร์ "Shadow" ให้มีขนาดกว้าง 100px และสูง 25px ด้วยสีพื้นหลัง #e2e0e5 โดยไม่ต้องมีเส้นขอบ
จากนั้นเลือกเงาวงรีนี้ไว้แล้วกด F8 เพื่อแปลงเงานี้ให้เป็นซิมโบลชนิด "Movie Clip" โดยตั้งชื่อว่า "mc_shadow" และเลือก registration ให้ตั้งอยู่ที่จุดตรงกลางดังรูปเช่นเดียวกับลูกบอล
ขั้นตอนที่ 7. จัดตำแหน่ง (Position)
เปิดเมนู Window > Align เพื่อจัดตำแหน่งวัตถุจากนั้นจัดตำแหน่ง "mc_ball" และ "mc_shadow"
ตำแหน่งในแนวนอนให้อยู่ตรงกลางของพื้นที่ทำงาน
ตำแหน่งในแนวตั้งให้วางอยู่บริเวณส่วนล่างของพื้นที่ทำงาน
โดยตำแหน่งของซิมโบลในตัวอย่างนี้หลังจัดตำแหน่งเสร็จแล้วก็คือ
mc_ball อยู่ที่ X:200,Y:310
mc_shadow อยู่ที่ X:200,Y:372
ขั้นตอนที่ 8. เพิ่มคีย์เฟรม (Add Keyframes)
เลือกเฟรมที่ 20 ของทั้งเลเยอร์ "Ball" และ "Shadow" ซึ่งสามารถเลือกทำงานในหลายเลเยอร์พร้อมกันด้วยการกดปุ่ม Ctrl จากนั้นกด F6 เพื่อสร้างคีย์เฟรมดังรูป
จากนั้นให้เลือกเฟรมที่ 10 ของทั้งเลเยอร์ "Ball" และ "Shadow" แล้วกด F6 เพื่อสร้างคีย์เฟรมดังรูป
ขั้นตอนที่ 9. วางบอลไว้ตรงจุดสูงสุด (High Point)
ในเฟรมที่ 10 ให้ขยับซิมโบลลูกบอล "mc_ball" เลื่อนขึ้นมาด้านบนไว้บริเวณจุดสูงสุดที่ต้องการให้ลูกบอลกระเด้งขึ้นไปถึง โดยตำแหน่งของลูกบอลในตัวอย่างนี้คือ X:200,Y:90
ขั้นตอนที่ 10. ค่าสีของเงา (Color Settings)
ในเฟรมที่ 10 ให้ปรับขนาดกว้างของเงา "mc_shadow" จากเดิมที่กว้าง 100px และสูง 25px
ให้กลายเป็นกว้าง 200px และสูง 25px โดยตำแหน่งในแนวแกน X และ Y อยู่ที่เดิม
และตั้งค่าของ "mc_shadow" ในเฟรมนี้ให้เป็น Color: Alpha 30%
ขั้นตอนที่ 11. ทำให้เคลื่ิอนไหว (Tweening)
สร้างการเคลื่อนไหวโดยเลือกเฟรมอันไหนก็ได้ที่อยู่ตั้งแต่เฟรมที่ 2 ถึง 9 ของทั้งเลเยอร์ "Ball" และ "Shadow" แล้วในเมนู Properties Inspector ให้กำหนดค่าเป็น Tween: Motion และตั้งค่า Ease: 100 เพื่อให้ลูกบอลมีจังหวะเด้งขึ้นที่นุ่มนวล
ขั้นตอนที่ 12. จังหวะตกลงสู่พื้น (Back Down to Earth)
สร้างการเคลื่อนไหวโดยเลือกเฟรมอันไหนก็ได้ที่อยู่ตั้งแต่เฟรมที่ 11 ถึง 19 ของทั้งเลเยอร์ "Ball" และ "Shadow"
แล้วในเมนู Properties Inspector ให้กำหนดค่าเป็น Tween: Motion
และตั้งค่า Ease: -100 เพื่อให้ลูกบอลมีจังหวะตกลงที่รวดเร็ว
เมื่อกดปุ่ม F12 จะได้ผลดังนี้
ขั้นตอนที่ 13. ย่อขนาดเพื่อความสมจริง (Extra Touch of Realism)
จากนั้นเลือกเงาวงรีนี้ไว้แล้วกด F8 เพื่อแปลงเงานี้ให้เป็นซิมโบลชนิด "Movie Clip" โดยตั้งชื่อว่า "mc_shadow" และเลือก registration ให้ตั้งอยู่ที่จุดตรงกลางดังรูปเช่นเดียวกับลูกบอล
ขั้นตอนที่ 7. จัดตำแหน่ง (Position)
เปิดเมนู Window > Align เพื่อจัดตำแหน่งวัตถุจากนั้นจัดตำแหน่ง "mc_ball" และ "mc_shadow"
ตำแหน่งในแนวนอนให้อยู่ตรงกลางของพื้นที่ทำงาน
ตำแหน่งในแนวตั้งให้วางอยู่บริเวณส่วนล่างของพื้นที่ทำงาน
โดยตำแหน่งของซิมโบลในตัวอย่างนี้หลังจัดตำแหน่งเสร็จแล้วก็คือ
mc_ball อยู่ที่ X:200,Y:310
mc_shadow อยู่ที่ X:200,Y:372
ขั้นตอนที่ 8. เพิ่มคีย์เฟรม (Add Keyframes)
เลือกเฟรมที่ 20 ของทั้งเลเยอร์ "Ball" และ "Shadow" ซึ่งสามารถเลือกทำงานในหลายเลเยอร์พร้อมกันด้วยการกดปุ่ม Ctrl จากนั้นกด F6 เพื่อสร้างคีย์เฟรมดังรูป
จากนั้นให้เลือกเฟรมที่ 10 ของทั้งเลเยอร์ "Ball" และ "Shadow" แล้วกด F6 เพื่อสร้างคีย์เฟรมดังรูป
ขั้นตอนที่ 9. วางบอลไว้ตรงจุดสูงสุด (High Point)
ในเฟรมที่ 10 ให้ขยับซิมโบลลูกบอล "mc_ball" เลื่อนขึ้นมาด้านบนไว้บริเวณจุดสูงสุดที่ต้องการให้ลูกบอลกระเด้งขึ้นไปถึง โดยตำแหน่งของลูกบอลในตัวอย่างนี้คือ X:200,Y:90
ขั้นตอนที่ 10. ค่าสีของเงา (Color Settings)
ในเฟรมที่ 10 ให้ปรับขนาดกว้างของเงา "mc_shadow" จากเดิมที่กว้าง 100px และสูง 25px
ให้กลายเป็นกว้าง 200px และสูง 25px โดยตำแหน่งในแนวแกน X และ Y อยู่ที่เดิม
และตั้งค่าของ "mc_shadow" ในเฟรมนี้ให้เป็น Color: Alpha 30%
ขั้นตอนที่ 11. ทำให้เคลื่ิอนไหว (Tweening)
สร้างการเคลื่อนไหวโดยเลือกเฟรมอันไหนก็ได้ที่อยู่ตั้งแต่เฟรมที่ 2 ถึง 9 ของทั้งเลเยอร์ "Ball" และ "Shadow" แล้วในเมนู Properties Inspector ให้กำหนดค่าเป็น Tween: Motion และตั้งค่า Ease: 100 เพื่อให้ลูกบอลมีจังหวะเด้งขึ้นที่นุ่มนวล
ขั้นตอนที่ 12. จังหวะตกลงสู่พื้น (Back Down to Earth)
สร้างการเคลื่อนไหวโดยเลือกเฟรมอันไหนก็ได้ที่อยู่ตั้งแต่เฟรมที่ 11 ถึง 19 ของทั้งเลเยอร์ "Ball" และ "Shadow"
แล้วในเมนู Properties Inspector ให้กำหนดค่าเป็น Tween: Motion
และตั้งค่า Ease: -100 เพื่อให้ลูกบอลมีจังหวะตกลงที่รวดเร็ว
เมื่อกดปุ่ม F12 จะได้ผลดังนี้
ขั้นตอนที่ 13. ย่อขนาดเพื่อความสมจริง (Extra Touch of Realism)
ทำให้ลูกบอลยุบในจังหวะกระทบพื้นโดยเลือกทั้งเลเยอร์ "Ball" และ "Shadow" แล้วสั่งสร้างคีย์เฟรมขึ้นในเฟรมที่ 21 โดยการกด F6
ซึ่งในเฟรมที่ 21 นี้ให้ย่อขนาดในแนวตั้งของซิมโบลลูกบอล "mc_ball" จากเดิมที่มีความสูง 120px ให้กลายเป็น 90px แต่ให้ความกว่างยังคงเป็น 120px เท่าเดิม และตำแหน่งในตอนนี้อยู่ที่ X:200,Y:325
ขั้นตอนที่ 14. แก้ไขซิมโบล (Edit Symbol)
ต่อมาเป็นการเพิ่มส่วนทึบใต้ลูกบอลโดยให้เลือกทำงานในเฟรมที่ 1 ไว้แล้วกดดับเบิ้ลคลิกที่วัตถุซิมโบล "mc_ball" เพื่อเข้าไปแก้ไขซิมโบล
ขั้นตอนที่ 15. คัดลอกเฟรม (Copy Frame)
สั่งเปลี่ยนชื่อของ "Layer 1" ให้กลายเป็น "Ball Spinning" แล้วสร้างเลเยอร์เพื่มขึ้นมาอีกหนึ่งอันไว้ด้านบนสุดโดยตั้งชื่อเลเยอร์ที่อยู่ด้านบนนี้ว่า "Shade"
เมื่อสร้างเลเยอร์เสร็จแล้วก็ให้ใช้เมาส์คลิกเลือกเฟรมที่ 1 ของเลเยอร์ "Ball Spinning" เอาไว้แล้วคลิกขวาเลือกที่ "Copy Frames" จากนั้นให้เลือกเฟรมที่ 1 ของเลเยอร์ "Shade" แล้วคลิกขวาเลือกที่ "Paste Frames"
ขั้นตอนที่ 16. เปลี่ยนสีวัตถุ (Change object colors)
จากนั้นให้สั่งล็อกเลเยอร์และซ่อน "Ball Spinning" ไว้แล้วเปลี่ยนสีของลูกทรงกลมในเลเยอร์ "Shade" ให้สีพื้นหลังกลายเป็น #e2e0e5 และไม่ต้องมีเส้นขอบ
ขั้นตอนที่ 17. ผสานวัตถุ (Combine Objects)
ต่อมาให้วาดวัตถุทรงกลมขนาด 240x240 px แล้ววางไว้เยื้องจากวัตถุลูกบอลสีเทาในเลเยอร์ "Shade" ไปทางด้านขวาบนเล็กน้อย โดยในตัวอย่างนี้วางไว้ที่อยู่ที่ X:-98,Y:-198 จากนั้นเลือกทั้งรูปทรงกลมทั้งสองอันที่อยู่ในเลเยอร์ "Shade" นี้แล้วเลือกที่ Modify > Combine Objects > Punch
ซึ่งในเฟรมที่ 21 นี้ให้ย่อขนาดในแนวตั้งของซิมโบลลูกบอล "mc_ball" จากเดิมที่มีความสูง 120px ให้กลายเป็น 90px แต่ให้ความกว่างยังคงเป็น 120px เท่าเดิม และตำแหน่งในตอนนี้อยู่ที่ X:200,Y:325
ขั้นตอนที่ 14. แก้ไขซิมโบล (Edit Symbol)
ต่อมาเป็นการเพิ่มส่วนทึบใต้ลูกบอลโดยให้เลือกทำงานในเฟรมที่ 1 ไว้แล้วกดดับเบิ้ลคลิกที่วัตถุซิมโบล "mc_ball" เพื่อเข้าไปแก้ไขซิมโบล
ขั้นตอนที่ 15. คัดลอกเฟรม (Copy Frame)
สั่งเปลี่ยนชื่อของ "Layer 1" ให้กลายเป็น "Ball Spinning" แล้วสร้างเลเยอร์เพื่มขึ้นมาอีกหนึ่งอันไว้ด้านบนสุดโดยตั้งชื่อเลเยอร์ที่อยู่ด้านบนนี้ว่า "Shade"
เมื่อสร้างเลเยอร์เสร็จแล้วก็ให้ใช้เมาส์คลิกเลือกเฟรมที่ 1 ของเลเยอร์ "Ball Spinning" เอาไว้แล้วคลิกขวาเลือกที่ "Copy Frames" จากนั้นให้เลือกเฟรมที่ 1 ของเลเยอร์ "Shade" แล้วคลิกขวาเลือกที่ "Paste Frames"
ขั้นตอนที่ 16. เปลี่ยนสีวัตถุ (Change object colors)
จากนั้นให้สั่งล็อกเลเยอร์และซ่อน "Ball Spinning" ไว้แล้วเปลี่ยนสีของลูกทรงกลมในเลเยอร์ "Shade" ให้สีพื้นหลังกลายเป็น #e2e0e5 และไม่ต้องมีเส้นขอบ
ขั้นตอนที่ 17. ผสานวัตถุ (Combine Objects)
ต่อมาให้วาดวัตถุทรงกลมขนาด 240x240 px แล้ววางไว้เยื้องจากวัตถุลูกบอลสีเทาในเลเยอร์ "Shade" ไปทางด้านขวาบนเล็กน้อย โดยในตัวอย่างนี้วางไว้ที่อยู่ที่ X:-98,Y:-198 จากนั้นเลือกทั้งรูปทรงกลมทั้งสองอันที่อยู่ในเลเยอร์ "Shade" นี้แล้วเลือกที่ Modify > Combine Objects > Punch
ขั้นตอนที่ 18. ความโปร่งใสของส่วนทึบ (Shade Opacity)
กดเลือกชิ้นส่วนเศษเสี้ยววงกลมที่ได้จากการตัดด้วย Punch ในขั้นตอนที่แล้วจากนั้นกด F8 เพื่อเปลี่ยนให้กลายเป็นซิมโบล โดยตั้งชื่อว่า "mc_ball_shading" และเลือก registration ให้ตั้งอยู่ที่จุดตรงกลาง แล้วค่อยเลือก Blend: Multiply
เมื่อกดปุ่ม F12 จะได้ผลดังนี้
ขั้นตอนที่ 19. ตบแต่งลวดลายให้บอล (Ball Details)
สั่งล็อกและซ่อนเลเยอร์ "Shade" แล้วจากนั้นไปที่เลเยอร์ "Ball Spinning" แล้วสั่งยกเลิกการล็อก
สั่งแปลงเป็น "mc_ball_base." จากนั้นแล้วดับเบิ้ลคลิกเพื่อแก้ไขแล้ววาดตบแต่งรายละเอียดของลูกบอลตามต้องการโดยในตัวอย่างนี้วาดลายด้วยสี #f3643c
โดยเมื่อใส่ตบแต่งเสร็จแล้วจะได้ลูกบอลลักษณะคล้ายในภาพข้างล่างนี้
ซึ่งเมื่อตบแต่งลายของลูกบอลเสร็จแล้วก็ให้สั่งยกเลิกการล็อกเลเยอร์ "Shade" เพื่อลองดูผล
เมื่อกดปุ่ม F12 จะได้ผลดังนี้
ขั้นตอนที่ 20. เพิ่มคีย์เฟรมในซิมโบลลูกบอล (As the Ball Turns)
โดยเลือกเฟรมที่ 32 ของทั้งเลเยอร์ "Shade" และ "Ball Spinning" แล้วกด F6 เพื่อสร้างคีย์เฟรมดังรูป
ขั้นตอนที่ 21. ใส่การหมุน (Rotational Tweening)
สร้างการหมุนให้บอลโดยเลือกเฟรมอันไหนก็ได้ที่อยู่ตั้งแต่เฟรมที่ 2 ถึง 31 ของเลเยอร์ "Ball Spinning" แล้วในเมนู Properties Inspector ตั้งค่าดังนี้
Tween: Motion
Rotate: CW 1 times
ขั้นตอนที่ 22. จากนั้นกดบันทึกไฟล์ก็เสร็จแล้ว โดยเมื่อกดปุ่ม F12 จะได้ผลดังนี้
Credit: http://vector.tutsplus.com/tutorials/animation/illustrate-and-animate-a-bouncing-ball-part-1-adobe-flash/
เมื่อกดปุ่ม F12 จะได้ผลดังนี้
ขั้นตอนที่ 19. ตบแต่งลวดลายให้บอล (Ball Details)
สั่งล็อกและซ่อนเลเยอร์ "Shade" แล้วจากนั้นไปที่เลเยอร์ "Ball Spinning" แล้วสั่งยกเลิกการล็อก
สั่งแปลงเป็น "mc_ball_base." จากนั้นแล้วดับเบิ้ลคลิกเพื่อแก้ไขแล้ววาดตบแต่งรายละเอียดของลูกบอลตามต้องการโดยในตัวอย่างนี้วาดลายด้วยสี #f3643c
โดยเมื่อใส่ตบแต่งเสร็จแล้วจะได้ลูกบอลลักษณะคล้ายในภาพข้างล่างนี้
ซึ่งเมื่อตบแต่งลายของลูกบอลเสร็จแล้วก็ให้สั่งยกเลิกการล็อกเลเยอร์ "Shade" เพื่อลองดูผล
เมื่อกดปุ่ม F12 จะได้ผลดังนี้
ขั้นตอนที่ 20. เพิ่มคีย์เฟรมในซิมโบลลูกบอล (As the Ball Turns)
โดยเลือกเฟรมที่ 32 ของทั้งเลเยอร์ "Shade" และ "Ball Spinning" แล้วกด F6 เพื่อสร้างคีย์เฟรมดังรูป
ขั้นตอนที่ 21. ใส่การหมุน (Rotational Tweening)
สร้างการหมุนให้บอลโดยเลือกเฟรมอันไหนก็ได้ที่อยู่ตั้งแต่เฟรมที่ 2 ถึง 31 ของเลเยอร์ "Ball Spinning" แล้วในเมนู Properties Inspector ตั้งค่าดังนี้
Tween: Motion
Rotate: CW 1 times
ขั้นตอนที่ 22. จากนั้นกดบันทึกไฟล์ก็เสร็จแล้ว โดยเมื่อกดปุ่ม F12 จะได้ผลดังนี้
Credit: http://vector.tutsplus.com/tutorials/animation/illustrate-and-animate-a-bouncing-ball-part-1-adobe-flash/
0 ความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น