แอนิเมชั่นการเคลื่อนไหวใน Adobe Flash พร้อมไกด์ (ไกด์) โครงร่างบทเรียน “โมชั่นแอนิเมชั่น” วิธีสร้างโมชั่นแอนิเมชั่น

เราจะเอาแมวตัวนี้มาเป็นตัวละคร เขาจะคอยดูหนูให้โผล่มาในกรอบแล้วกระดิกหาง

อักขระประกอบด้วยวัตถุต่อไปนี้ซึ่งอยู่บนเลเยอร์ต่างๆ:

แอนิเมชั่นดวงตาสำหรับมันพร้อมแล้วในสัญลักษณ์แยกต่างหาก ตอนนี้เราสนใจแอนิเมชั่นของหางแล้ว ดังนั้นเราจึงสามารถขยายแอนิเมชั่นบนพวกมันได้อย่างปลอดภัยตามจำนวนเฟรมที่ต้องการ เช่น 20 ( ใช้ f5) และบล็อกเลเยอร์ที่เราไม่ต้องการเพื่อไม่ให้มันขวางทาง

ตอนนี้หาง. ในเฟรมแรกเรามีตำแหน่งแรกของหาง ในวันที่ 10 เราจะสร้างตำแหน่งที่สอง ฉันแค่สะท้อนหางจากซ้ายไปขวา - แก้ไข – แปลง – พลิกจากซ้ายไปขวา

ในเลเยอร์ "Tail" ในเฟรมที่ 5 ให้สร้างคีย์เฟรมว่าง ในการดำเนินการนี้ให้คลิกด้วยปุ่มซ้ายของเมาส์แล้วกด F6 จากนั้นคลิก Delete เพื่อลบเนื้อหาทั้งหมด ที่นี่เราจะมีสายด่วน เพื่อความสะดวก ให้เปิด “ โครงสร้างหลายชั้น"หรือที่เรียกอีกอย่างว่า "เปลือกหัวหอม" ให้ปรับระยะระหว่างหางทั้งสองสถานะของเรา

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

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

ตอนนี้เรามาทำเช่นเดียวกันกับสถานะที่สองของหาง บนเฟรม 13 สร้างคีย์เฟรม (F6) ไปที่เฟรม 10 เปลี่ยนหางเล็กน้อยแล้วเอียงไปทางซ้าย จากนั้นสำหรับเฟรม 10 สร้าง แอนิเมชั่นแบบฟอร์ม

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

เมื่อสร้างภาพเคลื่อนไหว คุณสามารถกำหนดการเคลื่อนไหวของวัตถุตามวิถีที่กำหนดได้ - ตามแนวเส้นตรง ไปตามเส้นโค้งที่หักซึ่งประกอบด้วยส่วนของเส้นตรง และตามเส้นโค้งเรียบ

แอนิเมชั่นการเคลื่อนไหวเป็นเส้นตรง

ตัวอย่างที่ 1:
ดูตัวอย่างที่ 2

เรามาสร้างเครื่องบินที่เคลื่อนที่เป็นเส้นตรงกันเถอะ

ในกรอบแก้ไข ให้แทรกรูปภาพเครื่องบินทางด้านซ้ายของฉาก ภาพเวกเตอร์ของเครื่องบินสามารถสร้างได้ใน Adobe Flash (ดูการวาดภาพ) หรือคุณสามารถนำเข้าภาพที่สร้างจากด้านข้างได้ (ในรูปแบบ .png โดยมีพื้นหลังโปร่งใส)

ไฮไลท์เครื่องบินในฉาก ในเมนูบริบทของเครื่องบิน ให้เลือก แปลงเป็นสัญลักษณ์(แปลงเป็น Sumbol) เลือกประเภทกราฟิกของสัญลักษณ์

ในเมนูบริบทของรูปภาพ ให้เลือก สร้างภาพเคลื่อนไหว(สร้างโมชั่นทวีน) โปรแกรมจะสร้าง 24 เฟรมโดยอัตโนมัติเพื่อการเปลี่ยนแปลงที่ราบรื่น
ย้ายภาพไปที่ ด้านขวาฉาก
คุณสามารถปรับระยะเวลาของภาพเคลื่อนไหวและอื่น ๆ ได้ - ดู ทำงานร่วมกับบุคลากร .

แอนิเมชั่นของเครื่องบินที่เคลื่อนที่เป็นเส้นตรงได้ถูกสร้างขึ้นและสามารถดูได้โดยการคลิกที่ปุ่ม Enter

จากตัวอย่างนี้ เราสามารถสรุปได้ดังต่อไปนี้:

ความยาวของ Tween Span ใหม่ที่สร้างขึ้นโดยอัตโนมัติโดยโปรแกรมจะมีค่าเริ่มต้นอยู่ที่ความเร็วแอนิเมชั่นที่ตั้งไว้ หากเลือกความเร็วของภาพเคลื่อนไหวที่ 24 เฟรมต่อวินาที ตามค่าเริ่มต้น พื้นที่เปลี่ยน 24 เฟรม (ภาพเคลื่อนไหว 1 วินาที) จะถูกสร้างขึ้น หากความเร็วอยู่ที่ 30 fps - พื้นที่การเปลี่ยนแปลงเริ่มต้นคือ 30 เฟรม

เพื่อให้โปรแกรมสร้างการเฟด วัตถุที่แทรกเข้าไปในฉากจะต้องแปลงเป็นสัญลักษณ์ ในกรณีนี้วัตถุอาจเป็นอะไรก็ได้ - ภาพวาดเวกเตอร์ที่สร้างใน Adobe Flash, ข้อความ, รูปภาพแรสเตอร์ที่นำเข้า ฯลฯ หากคุณกำลังพยายามสร้างการเปลี่ยนแปลงที่ราบรื่นบนสิ่งที่ไม่ใช่สัญลักษณ์ โปรแกรมจะขอให้คุณแปลง องค์ประกอบเป็นสัญลักษณ์ ()

สามารถทวีตได้ครั้งละหนึ่งอักขระเท่านั้น หากคุณพยายามใช้การเปลี่ยนแปลงกับเลเยอร์ที่มีวัตถุหลายชิ้น โปรแกรมจะแจ้งให้คุณแปลงสัญลักษณ์กราฟิกเป็นสัญลักษณ์เดียว

สามารถใช้ Fade เพื่อปรับขนาด/ซูม เปลี่ยนสี และใช้ฟิลเตอร์ได้

หมายเหตุ: การเฟดสำหรับเอฟเฟ็กต์ฟิลเตอร์จะปรับใช้กับสัญลักษณ์คลิปและปุ่มเท่านั้น ไม่ใช่กับสัญลักษณ์กราฟิก

หมายเหตุ:
1. เมื่อสร้างภาพเคลื่อนไหวแบบคลาสสิก ขั้นตอนจะแตกต่างออกไป - ดู การสร้าง Classic Motion Tweens .
2. การสร้างการเคลื่อนไหวของวัตถุระหว่างการเคลื่อนไหวแบบเฟรมต่อเฟรม - ดูภาพเคลื่อนไหวแบบไทม์แลปส์
3. ในตัวอย่างของเรา เครื่องบินกำลังเคลื่อนที่ภายในฉาก แต่ตำแหน่งเริ่มต้นของเครื่องบิน (หรือวัตถุอื่นๆ) อาจอยู่นอกฉาก ในขณะที่เครื่องบินอาจเด้งขึ้นมา “จากด้านหลังฉาก” (ขวา ซ้าย ด้านบน ด้านล่าง) ในทำนองเดียวกันเขาสามารถหายไปจากเวที "หลังเวที" ได้ โดยหลักการแล้ว ทั้งตำแหน่งเริ่มต้นและตำแหน่งสุดท้ายของวัตถุสามารถอยู่นอกฉากได้ เช่น วัตถุนั้นกระโดดออกมา "จากเบื้องหลัง" แสดงกลบนเวที และหายไป "หลังเวที" อีกครั้ง

ภาพเคลื่อนไหวแบบโค้ง

มีหลายวิธีในการสร้างการเคลื่อนที่ของวัตถุตามแนวโค้ง:

วิธีที่ 2
ใส่สี่เหลี่ยมสีแดงเข้าไปในฉาก
สร้างการเคลื่อนไหว Tween ของสี่เหลี่ยมจัตุรัส (ดูการสร้างการเคลื่อนไหว Tween)
เป็นผลให้จัตุรัสของเราและเส้นทางการเคลื่อนไหวปรากฏขึ้นบนเวที (ในรูปแบบของเส้นที่มีเครื่องหมาย)

คุณสามารถปรับเส้นทางการเคลื่อนไหวได้ โดยไม่ส่งผลต่อเส้นทาง แต่ส่งผลต่อวัตถุ (ดังแสดงในภาพเคลื่อนไหวด้านล่าง):



การใช้วิธีนี้ทำได้ง่าย: คลิกบนเฟรมที่เลือกในไทม์ไลน์ (สำหรับเราคือเฟรม 10, 20 และ 30) และย้ายวัตถุไปรอบๆ ฉากตามลำดับ (โดยไม่กระทบต่อเส้นโค้งเส้นทาง) โปรแกรมจะสร้างคีย์เฟรมในเฟรมที่เลือกโดยอัตโนมัติ

สร้างเส้นทางการขับขี่ของคุณเอง

1. ใส่ภาพวาดเครื่องบินเข้าไปในฉาก

2. แปลงภาพวาดเครื่องบินให้เป็นสัญลักษณ์กราฟิก
3. สร้างเลเยอร์ใหม่ที่เรียกว่า "เส้นทาง" โดยใช้ดินสอ () เราวาดวิถีของเครื่องบิน ไม่ควรปิดเส้นเส้นทาง

4. หากจำเป็น ให้ปรับเส้นทางให้เรียบโดยใช้เครื่องมือ "เรียบ" () ที่ด้านล่าง แถบเครื่องมือ .

5. เลือกเส้นทางที่สร้างขึ้นและคัดลอกไปยังคลิปบอร์ด หลังจากนั้นก็สามารถลบเส้นทางได้

6. กลับสู่ชั้นระนาบ เลือกเครื่องบินบนเวทีแล้วเลือก " สร้างภาพเคลื่อนไหว"(สร้าง Motion Tween)

7. เลือกระนาบในฉาก ในเมนูแก้ไข ให้เลือก "วาง" หรือ "วางในตำแหน่ง"
รูปภาพเส้นทางการบินจะถูกเพิ่มเข้าไปในรูปภาพของเครื่องบิน

8. หากต้องการดู ให้วางแถบเลื่อนสีแดงบนเฟรมที่ 1 แล้วคลิกที่ปุ่ม Enter

การแก้ไขเส้นทางการเคลื่อนไหว

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

เลือก เครื่องมือแปลงร่างฟรี(การแปลงแบบอิสระ) บนแถบเครื่องมือแล้วคลิกบนเส้นทางการเคลื่อนไหว
เครื่องหมายการเปลี่ยนแปลงจะปรากฏขึ้นรอบๆ เส้นทางการเคลื่อนไหว

คุณสามารถปรับขนาดหรือหมุนเส้นทางการเคลื่อนไหวได้ คุณสามารถสร้างความโค้งของเส้นทางโดยใช้เครื่องมือการเลือกและ แปลงจุดยึด(แปลงจุดยึด) - เครื่องมือนี้ซ่อนอยู่ใต้เครื่องมือปากกา

คลิกที่จุดเริ่มต้นแล้วย้ายจุดจับเริ่มต้นการเลือก ซึ่งจะควบคุมความโค้งของเส้นทาง

3 หากต้องการแก้ไขเส้นทาง ให้เลือกเครื่องมือการเลือกย่อยจากแถบเครื่องมือ
4 คลิกและลากที่จับเพื่อแก้ไขเส้นโค้งเส้นทาง
หมายเหตุ: สามารถควบคุมเส้นทางการเคลื่อนที่ได้โดยตรงด้วย Selection Tool ()
เลือกเครื่องมือการเลือก () และย้ายไปใกล้กับเส้นทางการเคลื่อนไหว ไอคอนเส้นโค้งจะปรากฏถัดจากเคอร์เซอร์ของคุณ เพื่อระบุว่าคุณสามารถแก้ไขเส้นทางได้ คลิกและลากเส้นทางการเคลื่อนไหวเพื่อเปลี่ยนความโค้ง

คุณสามารถเลือกวัตถุ คลิกขวาที่วัตถุ และเลือกจากเมนู สร้างภาพเคลื่อนไหว- หลังจากนั้น ให้เลื่อนแถบเลื่อนไปตามไทม์ไลน์และเลื่อนวัตถุไปตามเส้นโค้งที่สร้างขึ้นพร้อมกัน

บันทึก:
หากคุณใช้มือที่สั่นเทาวาดเส้นทางที่งุ่มง่ามเกินไปและในเวลาเดียวกันจัดสรรเฟรมน้อยเกินไปที่จะเคลื่อนที่ไปตามเส้นทางนี้ โปรแกรมจะไม่สามารถทำงานให้เสร็จสิ้นและทำซ้ำโค้งทั้งหมดของ เส้นทาง.
ในกรณีนี้ จะมีประกาศปรากฏขึ้น:
"เส้นโค้งจะต้องถูกทำให้ง่ายขึ้นเพื่อให้พอดีกับจำนวนเฟรมที่มีอยู่ในการเคลื่อนไหวปัจจุบัน โปรดเลือกวิธีใดวิธีหนึ่งต่อไปนี้"
หรือ: "เส้นโค้งจะต้องถูกทำให้ง่ายขึ้นเพื่อให้ตรงกับจำนวนเฟรมที่มีอยู่ในทวีนปัจจุบัน โปรดเลือกหนึ่งในนั้น วิธีการดังต่อไปนี้..." และมีสองตัวเลือกให้เลือก ตัวเลือกแรกคือทำให้เส้นทางง่ายขึ้น

ดูเพิ่มเติม:
การสร้างเส้นทางแอนิเมชั่นของคุณเอง


การกลับทิศทางการเดินทาง

หากต้องการให้วัตถุย้ายจากจุดสิ้นสุดไปยังจุดเริ่มต้น ในเมนูบริบทของวัตถุ ให้เลือก วิถี (เส้นทางการเคลื่อนไหว ) - วิถีย้อนกลับ(เส้นทางย้อนกลับ).

ดูเพิ่มเติมที่:

การวางแนววัตถุเมื่อเคลื่อนที่

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

1 คลิกการเคลื่อนไหวทวีนเลเยอร์บนไทม์ไลน์ ในตัวอย่างของเรา นี่คือเลเยอร์ "เครื่องบิน"

2. เลือกเส้นทางการเคลื่อนไหวโดยใช้เครื่องมือการเลือก ()

3. วางตำแหน่งวัตถุให้สัมพันธ์กับเส้นทางการเคลื่อนที่ในตำแหน่งที่ 1 และ เฟรมสุดท้ายแอนิเมชั่น

4. บี ผู้ตรวจสอบทรัพย์สินเลือก การวางแนวเส้นทาง(Orient to path) ในตัวเลือกเส้นทาง

เครื่องมือแก้ไขแทรกกรอบด้านนอกเพื่อหมุนตามการเปลี่ยนแปลงที่ราบรื่นเพื่อให้จมูกของเครื่องบินอยู่ในทิศทางตามเส้นทางการเคลื่อนที่

โปรแกรมจะเพิ่มคีย์เฟรมโดยอัตโนมัติ โดยหมุนเครื่องบินไปตามวิถีของมัน

ไทม์ไลน์จะมีลักษณะดังนี้:

หมายเหตุ: เพื่อให้ตัวเลือกการวางแนวทำงานได้อย่างถูกต้อง ต้องตั้งค่าเครื่องบินในตำแหน่งเริ่มต้นให้ถูกต้อง เช่น จมูกของเขาควรชี้ไปตามเส้นทางการเคลื่อนไหว
เมื่อต้องการใช้งานนี้ เครื่องมือแปลงร่างฟรีให้หมุนเครื่องบินให้อยู่ในตำแหน่งที่ถูกต้อง

ใน Flash การสร้างภาพเคลื่อนไหวของวัตถุตามวิถีเป็นเรื่องง่ายมาก สิ่งที่จำเป็นสำหรับสิ่งนี้:

1.วาดวัตถุสำหรับแอนิเมชั่น – ลูกบอลสีชมพู บันทึกเป็นสัญลักษณ์ (เลือก – F8)

2. เราจำเป็นต้องวาดวิถีตามที่ลูกบอลจะเคลื่อนที่ โดยคลิกที่เลเยอร์ลูกบอลและเพิ่มเลเยอร์ไกด์ใหม่ ( เพิ่มคู่มือการเคลื่อนไหวแบบคลาสสิก):

เลเยอร์บนไทม์ไลน์ แนะนำดูเหมือนส่วนโค้งที่วาดด้วยเส้นประ:

3. สร้างภาพเคลื่อนไหวของลูกบอลใน 2 เฟรมโดยคลิกขวาที่เฟรมแรก - สร้าง Tween แบบคลาสสิก- ในเฟรมที่สองเราเลื่อนลูกบอลไปทางขวา

หากไม่มีวิถี (อย่างที่เราเห็นไม่มีกราฟิกในเลเยอร์ Guide มันว่างเปล่า) - แอนิเมชั่นดูเหมือนการเคลื่อนไหวอย่างง่ายของวัตถุจากซ้ายไปขวา

4.บนเลเยอร์ แนะนำใช้ดินสอวาดเส้นหยัก นี่จะเป็นเส้นทางสำหรับแอนิเมชั่นของเรา:

ตำแหน่งเริ่มต้น:

ตำแหน่งสิ้นสุด:

สิ่งสำคัญ: เพื่อให้ลูกบอล "จับ" วิถีของมัน จุดเปลี่ยน (วงกลมตรงกลาง) จะต้องตรงกับปลายเส้นวิถีทั้งในเฟรมแรกและเฟรมสุดท้าย มิฉะนั้น วัตถุจะไม่สนใจการมีอยู่ของวิถีและเคลื่อนที่เป็นเส้นตรงจากซ้ายไปขวา ดังนั้นจึงควรแก้ไขตำแหน่งของวัตถุหรือรูปร่างของเส้นวิถี

จะสร้างภาพเคลื่อนไหวใน Photoshop ได้อย่างไร?

ในบทเรียนนี้เราจะได้เรียนรู้ สร้างภาพเคลื่อนไหวแบบง่ายๆวัตถุใน โฟโต้ชอป.

มาสร้างกันเถอะ เอกสารใหม่ 200 x 200 พิกเซล พร้อมพื้นหลังโปร่งใส ในการสร้างเอกสารใหม่ให้เลือกรายการเมนู "ไฟล์" - "ใหม่" ตั้งค่าความกว้างและความสูงและพื้นหลังโปร่งใส บนแถบเครื่องมือ เลือกเครื่องมือ "แปรง" โดยกำหนดเส้นผ่านศูนย์กลางหลัก 15 พิกเซลและสีใดก็ได้ ตอนนี้มีความช่วยเหลือ ของเครื่องดนตรีชิ้นนี้ลองวาดวิถีตามที่วัตถุของเราจะเคลื่อนที่

จากนั้นเรามาสร้างเลเยอร์ใหม่กัน

การใช้เครื่องมือ "แปรง" เราจะวาดแมลงในลักษณะเดียวกัน ลดขนาดของแปรงลงเล็กน้อยและเปลี่ยนสีของมัน

ตอนนี้คุณควรเปลี่ยนตำแหน่งของแมลงเพื่อให้สอดคล้องกับทิศทางการเคลื่อนที่ของมัน หากต้องการทำสิ่งนี้ให้เลือกรายการเมนู "แก้ไข" - "แปลง" - "หมุน"

มาสร้างเลเยอร์แมลงที่ซ้ำกัน โดยคลิกขวาที่เลเยอร์แล้วเลือก "Duplicate Layer" ตั้งชื่อตามอำเภอใจให้กับเลเยอร์ผลลัพธ์ ต่อไป เราจะเปลี่ยนตำแหน่งของแมลงเล็กน้อยโดยใช้ "การแปลง" - "หมุน" อีกครั้งกับเลเยอร์ผลลัพธ์

ตอนนี้เราจะทำซ้ำขั้นตอนต่อไปนี้: สร้างสำเนาของเลเยอร์ก่อนหน้าและเปลี่ยนตำแหน่งของแมลงของเราเพื่อให้ "เคลื่อนที่" ไปข้างหน้าตามวิถีของมัน เราจะทำซ้ำการกระทำเหล่านี้หลาย ๆ ครั้งเท่าที่เป็นไปได้จนกว่าวิถีการเคลื่อนที่จะเต็ม

เมื่อวิถีโคจรทั้งหมด "เต็ม" เราจะไปยังการสร้างแอนิเมชั่นต่อไป หากต้องการทำสิ่งนี้ให้เลือก "หน้าต่าง" - "แอนิเมชั่น"

หน้าต่างแอนิเมชั่นที่ปรากฏในปัจจุบันมีหนึ่งเฟรม

มาสร้างเลเยอร์ทั้งหมด ยกเว้นชั้นที่มีวิถีและชั้นที่มีแมลงอยู่ในตำแหน่งเริ่มต้น มองไม่เห็น ในการที่จะทำให้เลเยอร์มองเห็นหรือมองไม่เห็น คุณต้องคลิกที่ "ตา" ที่อยู่ด้านหน้าเลเยอร์ในพาเล็ตเลเยอร์ ตามค่าเริ่มต้น เลเยอร์ทั้งหมดจะมองเห็นได้

ถัดไป เมื่อสร้างเฟรมภาพเคลื่อนไหวใหม่แต่ละเฟรม คุณจะต้องทำให้เลเยอร์ใหม่มองเห็นได้ โดยจะต้องปิดการมองเห็นของเฟรมก่อนหน้าเสียก่อน การกระทำเหล่านี้ควรดำเนินการจนกว่าเส้นทางทั้งหมดจะเสร็จสมบูรณ์

ตอนนี้เลือกเฟรมที่มีอยู่ทั้งหมดโดยกดปุ่ม "Ctrl" ค้างไว้ก่อน มาตั้งเวลาหน่วงสำหรับแต่ละเฟรมเป็น 0.2 วินาทีและทำให้มองไม่เห็นเลเยอร์เส้นทาง

ภาพเคลื่อนไหวพร้อมแล้ว ตอนนี้เรามาบันทึกภาพเคลื่อนไหวที่ได้ ในการดำเนินการนี้ให้เลือกรายการเมนู "ไฟล์" - "บันทึกสำหรับเว็บ" และตั้งชื่อไฟล์ตามต้องการ

(0)

	1.	แอนิเมชั่นข้อความธรรมดา	1:48	1	4216
	2.	ข้อความสีรุ้ง	2:44	0	5845
	3.	ภาพกระพริบ	1:51	0	2523
	4.	ไฟหน้าสว่างจ้า	2:26	0	4261
	5.	แอนิเมชั่นฝน	2:12	0	2116
	6.	หิมะตก	2:33	0	5354

ในบทเรียนแรกของมินิหลักสูตรพื้นฐาน "พื้นฐานแอนิเมชั่นใน Actionscript 3.0" คุณจะได้เรียนรู้เกี่ยวกับ:

1. แอนิเมชั่นคืออะไร
2. วิธีสร้างภาพลวงตาของการเคลื่อนไหวโดยใช้เฟรม
3. เกี่ยวกับความเป็นไปได้ของแอนิเมชั่นแบบเฟรมต่อเฟรม
4. เกี่ยวกับคุณสมบัติและข้อดีของซอฟต์แวร์แอนิเมชั่น

Adobe Flash นั้นเป็นเครื่องสร้างแอนิเมชั่นโดยพื้นฐานแล้ว ในเวอร์ชันแรกของเขา เขาสร้างมันขึ้นมาโดยใช้แนวคิด Tween ประกอบด้วยสิ่งต่อไปนี้:

• คีย์เฟรมสองเฟรมที่มีเนื้อหาต่างกันจะถูกสร้างขึ้นบนไทม์ไลน์ (ตำแหน่งของวัตถุ รูปร่าง สี ฯลฯ เปลี่ยนแปลง)
• Flash จะสร้างเฟรมระดับกลาง (ช่วงการเปลี่ยนภาพ) ทั้งหมดโดยแยกจากกัน (รูปที่ 1)

นี่คือลักษณะที่ปรากฏใน Adobe Flash CS6

แต่บทเรียนนี้และหลักสูตรโดยทั่วไปไม่ได้เกี่ยวกับ Tween เท่านั้น แต่ยังเกี่ยวกับภาษาอันทรงพลังที่สร้างไว้ใน Flash และเรียกว่า ActionScript จากการศึกษา คุณจะได้เรียนรู้สิ่งต่างๆ ที่เป็นประโยชน์และใช้งานได้จริงมากมาย โดยเฉพาะในส่วนต่างๆ เช่น เลียนแบบ ปรากฏการณ์ทางกายภาพ โลกแห่งความเป็นจริงและการคำนวณทางคณิตศาสตร์- แน่นอนว่าความรู้ดังกล่าวจะทำให้คุณควบคุมได้อย่างสมบูรณ์เมื่อสร้าง แอปพลิเคชันแบบโต้ตอบสิ่งที่คุณไม่สามารถบรรลุผลสำเร็จได้ด้วย Tween เพียงลำพัง

แต่ก่อนที่เราจะพูดถึงเทคนิค เทคนิค และสูตรเฉพาะที่จะช่วยให้คุณสร้างภาพเคลื่อนไหวให้กับวัตถุโดยใช้ ActionScript เรามาดูรายละเอียดเกี่ยวกับแนวคิดเกี่ยวกับแอนิเมชั่น เทคนิคพื้นฐานบางประการ วิธีการใช้ และวิธีสร้าง มันน่าสนใจยิ่งขึ้น และที่สำคัญที่สุดคือไดนามิก

แอนิเมชั่นคืออะไร?

แล้วแอนิเมชั่นคืออะไรกันแน่? คำจำกัดความของแนวคิดนี้สามารถพบได้ในพจนานุกรมหลายฉบับ ตัวอย่างเช่น นี่คือหนึ่งในนั้นที่ Wikipedia ให้ไว้:

แปลเป็นภาษาในชีวิตประจำวัน แอนิเมชั่นหมายถึงการเคลื่อนไหว- หากเราขยายคำจำกัดความนี้ออกไปบ้าง เราก็สามารถพูดเช่นนั้นได้ แอนิเมชั่นคือการเปลี่ยนแปลงของเวลา- โดยเฉพาะอย่างยิ่งสำหรับการเปลี่ยนแปลงทางสายตา (มองเห็นได้) การเคลื่อนไหวคือการเปลี่ยนแปลงตำแหน่งในเวลา- ในช่วงเวลาหนึ่ง วัตถุนั้นอยู่ที่แห่งหนึ่ง และนาทีต่อมาก็ไปอีกที่หนึ่ง ตามทฤษฎีแล้ว เขายังอยู่ที่จุดกึ่งกลางระหว่างจุดเริ่มต้นและจุดสิ้นสุดเมื่อเวลาผ่านไป

แต่วัตถุไม่จำเป็นต้องเปลี่ยนตำแหน่งจึงจะถือว่าเคลื่อนไหวได้ เขาสามารถเปลี่ยนรูปแบบภายนอกของเขาได้ ในยุค 90 (น่ากลัวที่จะพูดในศตวรรษที่ผ่านมา!) ได้รับความนิยม โปรแกรมคอมพิวเตอร์ใครทำ morphing

ตัวอย่างเช่น คุณมีสองภาพ: เด็กผู้หญิงและเสือ โปรแกรมจะสร้างการเปลี่ยนแปลง/ภาพเคลื่อนไหวระหว่างกันอย่างราบรื่น (morphing)

เมื่อสร้างวิดีโอแฟลชนี้ จะใช้โปรแกรม Sqirlz Morph 2.1

เมื่อปรับเปลี่ยนรูปร่าง วัตถุยังสามารถเปลี่ยนขนาดหรือตำแหน่งของมันได้อีกด้วย ตัวอย่างเช่น วิธีนี้คุณสามารถสร้างภาพลวงตาของต้นไม้ที่กำลังเติบโต ลูกบอลที่หมุนอยู่ หรือการเปลี่ยนสีในวัตถุได้

การเชื่อมโยงแอนิเมชันกับเวลาเป็นแนวคิดที่สำคัญ

หากไม่มีการเคลื่อนไหวหรือการเปลี่ยนแปลงที่มองเห็นได้ ก็จะไม่มีแอนิเมชั่น ดังนั้นจึงไม่มีความรู้สึกถึงเวลาสำหรับผู้ชม!

คุณคงเคยเห็นหลายครั้งที่กล้องถ่ายภาพที่ไม่มีการเคลื่อนไหว เช่น ห้องว่างหรือทิวทัศน์ของเมือง

ในสถานการณ์เช่นนี้ เป็นการยากที่จะพูดสิ่งที่อยู่ตรงหน้าคุณ เช่น ภาพถ่ายธรรมดาหรือคลิปวิดีโอ ในขณะที่คุณรับชม คุณจะสังเกตเห็นการเปลี่ยนแปลงเล็กๆ น้อยๆ ในเฟรมทันที เช่น การเคลื่อนไหวเล็กน้อย การเปลี่ยนแปลงของการไหลของแสง หรือการเปลี่ยนแปลงของเงา แม้แต่การเปลี่ยนแปลงเล็กๆ น้อยๆ ก็ยังสื่อสารให้คุณทราบได้อย่างชัดเจน เวลาผ่านไปและถ้าคุณดูต่อไปบางทีอย่างอื่นอาจจะเปลี่ยนไป หากไม่มีการเปลี่ยนแปลงในช่วงเวลาถัดไป คุณจะรู้สึกเหมือนกำลังดูภาพถ่ายอีกครั้ง ดังนั้นการไม่มีเวลาในเฟรมหมายความว่าภาพจะไม่เปลี่ยนแปลง

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

ทุกคนจำภาพวาด "Mona Lisa" ของ Leonardo da Vinci ซึ่งเป็นผลงานจิตรกรรมชิ้นเอกซึ่งเป็นหนึ่งในภาพวาดที่มีชื่อเสียงที่สุดในประวัติศาสตร์ศิลปะโลก

สามารถสันนิษฐานได้ด้วยความน่าจะเป็นในระดับสูงว่า คนธรรมดาจะเบื่อหลังจากตรวจสอบเพียงไม่กี่นาทีและในไม่ช้าก็เริ่มมองหาสิ่งต่อไปที่จะ "ศึกษา" แต่เริ่มแสดงภาพยนตร์ฮอลลีวูดเรื่องล่าสุดให้เขาดู และเขาจะไม่สังเกตว่าอีกสองสามชั่วโมงจะผ่านไปอย่างไร นั่นคือพลังของแอนิเมชั่น!

วิธีสร้างภาพลวงตาของการเคลื่อนไหวในแอนิเมชันสต็อปโมชั่น

ย้อนกลับไปสักครู่ถึงคำจำกัดความของแอนิเมชันที่เราแนะนำข้างต้น:

แอนิเมชั่นเป็นเทคนิคในการสร้างภาพลวงตาของภาพเคลื่อนไหว (การเคลื่อนไหวและ/หรือการเปลี่ยนรูปร่างของวัตถุ - การเปลี่ยนรูปร่าง) โดยใช้ลำดับของภาพนิ่ง (เฟรม) แทนที่กันด้วยความถี่ที่แน่นอน

ผู้เขียนคำจำกัดความดังกล่าวถูกบังคับให้แนะนำคำว่าภาพลวงตาเข้ามา มันมักจะเกิดขึ้นว่ามีเพียงภาพลวงตาของการเคลื่อนไหวเท่านั้นที่มีอยู่ในงานศิลปะหรือสื่อประเภทนั้นที่เราเผชิญในชีวิต จึงถึงเวลาแนะนำแนวคิดเรื่องบุคลากร

ตามทฤษฎีแล้ว การใช้ภาพแอนิเมชั่นทุกประเภท เฟรม - ลำดับของรูปภาพหรือรูปถ่ายที่แสดงให้ผู้ชมเห็นอย่างรวดเร็วเพื่อจำลองการเคลื่อนไหวหรือการเปลี่ยนแปลง.

สิ่งที่คุณเห็นบนหน้าจอคอมพิวเตอร์ หน้าจอทีวี หรือในโรงภาพยนตร์จะขึ้นอยู่กับเฟรมต่างๆ ทุกอย่างเริ่มต้นจากภาพยนตร์แอนิเมชั่นเรื่องแรกๆ ที่วาดภาพแต่ละภาพบนแผ่นฟิล์มใส และภาพยนตร์เรื่องแรกๆ ที่ใช้เทคนิคเดียวกันนี้ในการแสดงภาพถ่ายชุดหนึ่ง

แนวคิดนี้เรียบง่าย: คุณจะได้เห็นลำดับภาพทีละภาพ ซึ่งแตกต่างกันเล็กน้อยจากกันเล็กน้อย และสมองของคุณเชื่อมโยงภาพเหล่านั้นเข้าด้วยกันเป็นภาพเคลื่อนไหวภาพเดียว

แล้วเหตุใดเราจึงควรเรียกมันว่าภาพลวงตาของการเคลื่อนไหว?

หากคุณเห็นผู้หญิงคนหนึ่งเดินไปตามถนนบนหน้าจอมอนิเตอร์ นั่นไม่ใช่การเคลื่อนไหวใช่ไหม แน่นอนว่านี่เป็นเพียงภาพของเด็กผู้หญิงเท่านั้น ไม่ใช่วัตถุจริง แต่นี่ไม่ใช่เหตุผลหลักว่าทำไมเราถึงถือว่าการเคลื่อนไหวดังกล่าวเป็นภาพลวงตา

จำได้ไหมเมื่อฉันพูดถึงวัตถุที่ช่วงเวลาหนึ่งอยู่ในที่แห่งหนึ่ง และนาทีต่อมาในอีกที่หนึ่ง? ขณะเดียวกันฉันก็บอกว่ามันเคลื่อนไหวในอวกาศจริง มีเพียงการเคลื่อนไหวแบบนี้เท่านั้นที่เราเรียกได้ว่าเป็นของจริง วัตถุเคลื่อนที่ในอวกาศได้อย่างราบรื่น และไม่ฉับพลัน เช่นเดียวกับที่เกิดขึ้นในแอนิเมชั่นทุกประเภทแบบเฟรมต่อเฟรม- ในนั้นวัตถุจะไม่เคลื่อนที่จากที่หนึ่งไปอีกที่หนึ่ง เขาหายไปแล้วไปปรากฏที่อื่นในช็อตถัดไป ยิ่งเขาเคลื่อนที่เร็วเท่าไหร่ก็ยิ่งกระโดดได้นานขึ้นเท่านั้น

ถ้าฉันแสดงรูปถ่ายของผู้หญิงคนหนึ่งให้คุณดูในที่เดียว และไม่กี่วินาทีต่อมาอีกรูปของผู้หญิงคนเดียวกัน แต่ในอีกที่หนึ่ง คุณจะบอกได้ว่านี่เป็นรูปถ่ายสองใบ ไม่ใช่ภาพเคลื่อนไหว

หากฉันให้คุณดูรูปถ่ายที่กำลังเคลื่อนไหวของเธอสักสองสามรูป คุณจะยังคงบอกว่านี่เป็นเพียงชุดภาพถ่าย

ถ้าฉันให้คุณดูภาพถ่ายจำนวนหนึ่งอย่างรวดเร็ว มันจะไม่เปลี่ยนความจริงที่ว่ามันยังคงเป็นรูปถ่าย แต่คุณจะเริ่มรับรู้มันแตกต่างออกไป

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

หลังจากการวิจัยพบว่าที่ความเร็วการแสดงผล 24 เฟรมต่อวินาทีผู้ชมจะรับรู้ว่าเป็นภาพเคลื่อนไหวเพียงภาพเดียว หากคุณแสดงภาพช้าลง ภาพจะเริ่ม "กระโดด" อย่างน่ารำคาญ และภาพลวงตาของการเคลื่อนไหวจะถูกทำลาย หากคุณเร่งความเร็วเป็น 50 เฟรมต่อวินาที สิ่งนี้จะไม่เพิ่มความสมจริงให้กับภาพ (แม้ว่าในซอฟต์แวร์แอนิเมชั่นเมื่อผู้ชมโต้ตอบกับภาพการตอบสนองจะเร็วขึ้นและการเคลื่อนไหวของวัตถุด้วยความเร็วสูงจะ “ราบรื่นยิ่งขึ้น” ").

แนวคิดของเฟรมทำให้สามสิ่งเป็นไปได้:

• พื้นที่จัดเก็บ
• การแพร่เชื้อ
• และแสดง

แน่นอนว่าคุณไม่สามารถจัดเก็บ ถ่ายโอน และแสดงหญิงสาวจริงๆ ที่เดินไปตามถนนได้ แต่คุณสามารถจัดเก็บรูปภาพ/รูปถ่ายของเธอ หรือชุดของพวกเธอ จากนั้นจึงถ่ายโอนและแสดงให้พวกเขาเห็น ด้วยวิธีนี้ คุณจะสามารถเล่นแอนิเมชั่นได้เกือบทุกที่ทุกเวลา ตราบใดที่คุณสามารถเข้าถึงรูปภาพที่บันทึกไว้และสามารถแสดงรูปภาพเหล่านั้นได้

ถึงเวลาให้คำจำกัดความทั่วไปของเฟรมแล้ว จนถึงตอนนี้เมื่อพูดถึงเรื่องนี้เราหมายถึงรูปถ่าย รูปภาพ หรือภาพวาด ทีนี้ลองนับดังนี้: เฟรมคือการบันทึกของระบบ ณ จุดใดจุดหนึ่ง.

ระบบนี้อาจเป็น:

• ภาพทิวทัศน์ที่คุณถ่ายมา หน้าต่างของตัวเอง;
• ชุดของวัตถุเสมือน (บันทึกในกรณีนี้คือ รูปร่าง ขนาด สี สถานที่ ฯลฯ ณ จุดหนึ่งของเวลา ดังนั้น ภาพยนตร์ของคุณจะเปลี่ยนจากชุดรูปภาพเป็นชุดบันทึกของ คำอธิบายของรูปภาพ แทนที่จะแสดงเพียงรูปภาพ คอมพิวเตอร์จะใช้คำอธิบายดังกล่าว สร้างรูปภาพจากนั้นจึงแสดง)
• เฟรมที่มีโปรแกรมเฉพาะ

บล็อกการเขียนโปรแกรม

เนื่องจากคอมพิวเตอร์สามารถคำนวณได้ทันที คุณจึงทำได้โดยไม่ต้องมีคำอธิบายเฟรมมากมาย คุณสามารถทำให้ทุกอย่างง่ายขึ้นโดยการอธิบายเฉพาะเฟรมแรกและสร้างกฎสำหรับการสร้างเฟรมถัดไปทั้งหมด- ตอนนี้คอมพิวเตอร์ไม่เพียงแต่สร้างรูปภาพจากคำอธิบายเท่านั้น แต่ยัง:

• ขั้นแรกให้สร้างคำอธิบาย
• จากนั้นสร้างรูปภาพตามคำอธิบายนี้
• และในตอนท้ายก็แสดงภาพนี้

ลองจินตนาการดูว่าคุณสามารถประหยัดพื้นที่ได้มากเพียงใดหากใช้วิธีนี้! รูปภาพจะใช้พื้นที่ดิสก์ในปริมาณที่เหมาะสมเสมอและ แบนด์วิธเครือข่าย และภาพ 24 ภาพต่อวินาทีก็อาจมากเกินไปที่จะรับได้ หากคุณสามารถสรุปทุกอย่างให้เหลือคำอธิบายและคำจำกัดความของกฎเพียงข้อเดียว คุณจะมีโอกาสลดขนาดไฟล์ได้หลายร้อยครั้ง

90 ครั้งจากทั้งหมด 100 โปรแกรม แม้แต่โปรแกรมที่ใหญ่ที่สุดซึ่งมีกฎเกณฑ์ว่าวัตถุควรเคลื่อนไหวและโต้ตอบกันอย่างไร ก็ใช้พื้นที่น้อยกว่าภาพขนาดกลางภาพเดียว ดังนั้นหนึ่งในเอฟเฟกต์แรกๆ ที่ถูกสังเกตเมื่อศึกษาแอนิเมชั่นของซอฟต์แวร์ก็คือ ประหยัดในแง่ของขนาดไฟล์.

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

หากคุณพยายามรักษาอัตราเฟรมไว้ บางครั้งก็ไม่ปล่อยให้โปรเซสเซอร์ของคุณ (มิลลิวินาที) 'แยกแยะ' ทั้งหมด ดังนั้น หากคอมพิวเตอร์ไม่สามารถเรนเดอร์ฉากได้ทันเวลา คุณภาพการเล่น (เฟรมเรต) จะลดลง ในทางกลับกัน แอนิเมชั่นแบบรูปภาพปกติจะไม่สนใจสิ่งที่อยู่ในฉากและความซับซ้อนของภาพเพียงเล็กน้อย มันแค่แสดงภาพถัดไปทันเวลาเท่านั้นเอง

ประโยชน์ของซอฟต์แวร์แอนิเมชั่น

ข้อได้เปรียบถัดไปของซอฟต์แวร์แอนิเมชั่นเหนือแอนิเมชั่นแบบเฟรมต่อเฟรมที่เราจะพูดถึงในตอนนี้มีมากกว่าแค่ขนาดไฟล์มาก มันเป็นไปแล้ว ข้อเท็จจริงที่จัดตั้งขึ้น, อะไร ในกรณีส่วนใหญ่แอนิเมชั่นของซอฟต์แวร์จะถูกใช้เป็นไดนามิกอย่างแม่นยำ.

คุณคงเคยดูหนังเรื่อง Terminator 2: Judgement Day มาก่อน ในตอนท้ายของเรื่อง แต่ละครั้งที่ Terminator หายตัวไปในหม้อหลอมพร้อมกับวลี "ฉันจะกลับมา" เขาทำในโรงภาพยนตร์ ในทีวี และในดีวีดี แม้จะกดปุ่ม "หยุด" หรือ "หยุดชั่วคราว" คุณก็ไม่สามารถหยุดได้ และนั่นก็เพราะว่า ภาพยนตร์ธรรมดาไม่มีอะไรมากไปกว่าลำดับภาพ- ในตอนท้ายของหนังเรื่องนี้ พวกเขา (ภาพ) แสดงให้เห็นว่าเทอร์มิเนเตอร์หายตัวไปในไฟนรก และนั่นคือทั้งหมดที่พวกเขาทำได้

ตอนนี้ขอย้ายจาก Terminator ไปยังไซต์แฟลชปกติ ในช่วงปลายยุค 90 เมื่อ Flash ได้รับความนิยมอย่างรวดเร็ว มีเพียงคนขี้เกียจเท่านั้นที่ไม่ต้องการใช้ความสามารถของตนบนเว็บไซต์:

• รูปเคลื่อนย้าย ปรากฏ และหายไป;
• เพลงประกอบ;
• การเรียกร้องบางสิ่งบางอย่างอย่างกะทันหัน
• จุดแสงหรือเงาที่เกิดขึ้น

เมื่อก่อน สิ่งเหล่านี้เป็นสิ่งใหม่ ฉันจึงอยากจะอุทานว่า “เจ๋ง!” พูดตามตรง ไม่ใช่ว่าทุกเว็บไซต์เหล่านี้จะเจ๋งจริงๆ เมื่อมองย้อนกลับไปในวันนี้ถึงสิ่งที่ฉันเห็นในตอนนั้น ฉันสามารถพูดได้ว่ามีเพียงสองหรือสามคนเท่านั้นที่ยังคงอยู่ในความทรงจำของฉัน

ระยะเวลาของภาพเคลื่อนไหวนั้นไม่เกินหนึ่งนาที แค่นี้ก็เพียงพอแล้วสำหรับฉันที่จะดูพวกเขาสามครั้งติดต่อกัน พวกเขาแย่หรือเปล่า? ไม่ เพียงแต่หลังจากการดูหลายครั้ง ความสนใจก็ลดลง เพราะไม่มีอะไรให้ดูอีกแล้ว เหมือนในภาพยนตร์เกี่ยวกับเทอร์มิเนเตอร์ และที่นี่เราสามารถพูดคุยเกี่ยวกับความขัดแย้งบางอย่างได้ - ในภาพยนตร์ประเภทนี้แอนิเมชั่นไม่เปลี่ยนแปลงทุกเฟรมตั้งแต่เฟรมแรกจนถึงเฟรมสุดท้ายถูกกำหนดไว้ล่วงหน้า

กลับมาที่ซอฟต์แวร์แอนิเมชั่นกันดีกว่า มันไม่จำเป็นต้องเป็นแบบไดนามิก คุณสามารถสร้างวัตถุและใช้โค้ดเพื่อค้นหาวัตถุนั้นในฉาก จากนั้นทำให้มันเคลื่อนที่ไปตามวัตถุนั้น ในสถานการณ์เช่นนี้ ทุกครั้งที่มีการรันคลิปดังกล่าว โค้ดเดียวกันจะทำงาน ทำให้เกิดการเคลื่อนไหวแบบเดียวกัน และเห็นได้ชัดว่าไม่มีพลวัตที่นี่

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

แต่มีตัวเลือกที่สาม หลังจากที่วิดีโอเริ่มเล่น เวลาของวัน เดือน และปีจะถูกกำหนด และฉากจะถูกสร้างขึ้นตามข้อมูลเหล่านี้ เช่น เช้าฤดูหนาวบ่ายฤดูร้อนหรือเย็นเดือนกันยายน?

และนี่คือที่สี่ ในระหว่างภาพยนตร์ ผู้ชมสามารถเปลี่ยนแปลงปัจจัยบางอย่างได้โดยใช้เมาส์หรือคีย์บอร์ดหรือไม่ สิ่งนี้จะช่วยให้เขาโต้ตอบกับวัตถุในฉากได้ หนังแบบนี้คงจะห่างไกลจากสิ่งที่เราคุ้นเคยใช่ไหม? มันเป็นไปได้ที่จะบันทึก Terminator ด้วยซ้ำ!

ความเป็นจริงเสมือน

เป็นไปได้ว่า สิ่งที่น่าสนใจที่สุดของแอนิเมชั่นแบบไดนามิกคือการประยุกต์ใช้กฎของคณิตศาสตร์และฟิสิกส์ของโลกแห่งความเป็นจริงกับวัตถุที่สร้างขึ้น- ไม่เพียงแต่คุณสามารถทำให้วัตถุดังกล่าวเคลื่อนที่ไปในทิศทางสุ่มได้ แต่คุณยังสามารถจำลองผลกระทบของแรงโน้มถ่วงที่มีต่อวัตถุนั้นได้อีกด้วย ผลก็คือมันจะเริ่มร่วงหล่นลงมา เมื่อการล้มสิ้นสุดลง เขาจะกระแทกพื้นและดีดตัวขึ้น แต่จะมีความสูงไม่เท่ากับความสูงที่เขาเริ่มตกลงมา ในที่สุดเขาจะหยุดกระโดดและยังคงนอนอยู่บนพื้น

หลังจากนี้คุณสามารถอนุญาตให้ผู้ใช้โต้ตอบกับมันได้:

• "คว้า" มันด้วยเมาส์
• หรือเคลื่อนที่โดยใช้แป้นพิมพ์

เมื่อผู้ใช้เริ่มโต้ตอบกับมันในลักษณะนี้ เขาจะมีความรู้สึกโดยสมบูรณ์ว่ามันเป็นวัตถุทางกายภาพจริง

คุณสามารถดูสิ่งนี้ได้ด้วยตัวเองโดยเล่นกับลูกบอลสีแดงด้านล่าง

ด้วยการสร้างแอนิเมชั่นเช่นนี้ คุณจะทำให้ผู้ใช้รู้สึกเหมือนว่าพวกเขาไม่เพียงแค่ดูการเคลื่อนไหวเฟรมเท่านั้น แต่เป็นเช่นนั้น เขาอยู่ในพื้นที่ที่คุณสร้างขึ้น- เขาจะอยู่ที่นั่นนานแค่ไหน? ใช่ตราบใดที่เขาสนใจ ยิ่งคุณให้โอกาสเขามีปฏิสัมพันธ์มากเท่าไร เขาจะอยู่ที่นั่นนานขึ้นแล้วกลับมาหลายครั้ง

ผลลัพธ์

ในบทเรียนเบื้องต้นนี้ เราได้กล่าวถึง:

• พื้นฐานแอนิเมชัน
• ความแตกต่างระหว่างแอนิเมชันแบบเฟรมต่อเฟรมและแอนิเมชั่นของโปรแกรม
• ข้อดีหลักของแอนิเมชั่นแบบไดนามิก

สิ่งเหล่านี้เป็นแนวคิด ความรู้พื้นฐานบนพื้นฐานของวัสดุที่จะตามมาทั้งหมดจะถูกสร้างขึ้น มินิคอร์สฟรี “พื้นฐานของแอนิเมชันใน Actionscript 3.0”».

ในบทเรียนต่อไปนี้ ฉันจะพูดถึงเครื่องมือบางอย่างที่คุณสามารถใช้ในการทำงานของคุณ การใช้งานที่ชัดเจนที่สุดสำหรับข้อมูลทั้งหมดที่จะกล่าวถึงในหลักสูตรนี้คือการสร้างเกม เห็นได้ชัดว่าพวกเขาต้องการปฏิสัมพันธ์ที่ยิ่งใหญ่ที่สุดกับผู้ใช้ โดยที่เขาจำเป็นต้องแก้ไขปัญหาบางอย่างและบรรลุเป้าหมายที่ตั้งไว้

แต่ข้อมูลในหลักสูตรนี้สามารถนำไปใช้ได้สำเร็จสำหรับคุณ ทำงานอย่างมืออาชีพในฐานะนักออกแบบเว็บไซต์ เช่น การสร้างเมนูที่น่าสนใจบนเว็บไซต์ โฆษณาแบนเนอร์หรือแอปพลิเคชัน (โปรแกรม) สำหรับระบบการศึกษา

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

พบกันใหม่ในบทเรียนหน้า!

กรุณาเปิดใช้งาน JavaScript เพื่อดูความคิดเห็น