23
บบบบบ 10 บบบบบบบบบบบบบบ (Animatio)

หน่วยที่10 สร้างภาพเคลื่อนไหว

Embed Size (px)

Citation preview

Page 1: หน่วยที่10 สร้างภาพเคลื่อนไหว

บทท�� 10 สร้�างภาพเคลื่��อนไหว

(Animatio)

Page 2: หน่วยที่10 สร้างภาพเคลื่อนไหว

ใน Flash มี�ว�ธี�การ้สร้�างภาพเคลื่��อนไหวอยู่�� 2 ว�ธี�หลื่�กๆ ค�อ

- สร้�างด้�วยู่ค!าส��ง Timeline Effects ซึ่#�งเป็%นการ้เคลื่��อนไหวแบบส!าเร้'จร้�ป็ท��โป็ร้แกร้มีมี�ให�

- สร้�างภาพเคลื่��อนไหวด้�วยู่ตั�วเอง โด้ยู่ว�ธี�น�+ค,ณจะสามีาร้ถก!าหนด้จ�งหวะ ช่�วงเวลื่าเลื่�น ท�ศทางการ้เคลื่��อนไหว แลื่ะการ้เป็ลื่��ยู่นแป็ลื่งร้�ป็ทร้งได้�เอง ซึ่#�งการ้สร้�างด้�วยู่ว�ธี�น�+จะแบ�งออกเป็%น 2 ช่น�ด้ ค�อ แบบเฟร้มีตั�อเฟร้มี (fream-by-fream) แลื่ะแบบทว�น (Tween animation)

Page 3: หน่วยที่10 สร้างภาพเคลื่อนไหว

สร้�างภาพเคลื่��อนไหวด้�วยู่ Timeline Effectเป็%นการ้เคลื่��อนไหวแบบส!าเร้'จร้�ป็ท��สร้�างได้�ด้�วยู่

ขั้�+นตัอนง�ายู่ๆ โด้ยู่โป็ร้แกร้มีจะสร้�างซึ่�มีโบลื่ ค�ยู่4เฟร้มีแลื่ะเลื่เยู่อร้4ให�อ�ตัโนมี�ตั� เพ��อให�สอด้คลื่�องก�บการ้เคลื่��อนไหวท��เลื่�อก ซึ่#�งหลื่�งจากใช่�ค!าส��งแลื่�วออบเจ'คจะถ�กยู่�ายู่ไป็ยู่�งเลื่เยู่อร้4ใหมี�ด้�วยู่ ค!าส��งในช่,ด้น�+แบ�งออกเป็%น 3 กลื่,�มีด้�วยู่ก�นค�อ Assistant, Effect แลื่ะ Transition/ Transform ซึ่#�งจะมี�บางค!าส��งท��ใช่�การ้สร้�างภาพเคลื่��อนไหวแตั�มี�กใช่�เพ��อเพ��มีเอฟเฟ%คตั4ให�ก�บมี�ฟว��คลื่�ป็ท��เป็%นภาพเคลื่��อนไหวอ�กท� เช่�น ใช่�เอฟเฟ%คตั4 Drop Shadow ในการ้สร้�างเงาให�ก�บภาพเคลื่��อนไหว เป็%นตั�นขั้�+นตัอนการ้สร้�างภาพเคลื่��อนไหว

ค,ณสามีาร้ถค!าส��งเหลื่�าน�+ได้�ก�บออบเจ'คท,กแบบ ไมี�ว�าจะเป็%นอ�นสแตันซึ่4 ขั้�อความี ภาพบ�ทแมีพ หร้�อ ออบเจ'คพ�+นฐานท��วไป็ ซึ่#�งก�อนการ้ใช่�ค!าส��งค,ณควร้วางออบเจ'คท��ตั�องการ้ไว�ในเลื่เยู่อร้4ใด้เลื่เยู่อร้4หน#�ง โด้ยู่ไมี�ป็ะป็นก�บออบเจ'คอ��นๆ

Page 4: หน่วยที่10 สร้างภาพเคลื่อนไหว

ออบช่��นขั้องกลื่,�มี Timeline Effectsแตั�ลื่ะค!าส��งจะท!าให�ผลื่ท��แตักตั�างก�น แลื่ะมี�ออบช่��นท��แตักตั�างก�นด้�วยู่ด้�งน�+ ค!าส��ง Copy to Grid ค!าส��งน�+ไมี�ท!าให�เก�ด้การ้เคลื่��อนไหว แตั�เป็%นการ้ก'อป็ป็7+ ออบเจ'คท��เลื่�อกไป็วางเร้�ยู่งตั�อๆก�นในแนวนอนหร้�อแนวตั�+ง ด้�งภาพตั�วอยู่�าง

Page 5: หน่วยที่10 สร้างภาพเคลื่อนไหว

ค!าส��ง Distributed Duplicateค!าส��งน�+สร้�างความีเคลื่��อนไหว โด้ยู่การ้ก8อป็ป็7+

ออบเจ'คไป็วางซึ่�อนอยู่��ด้�านหลื่�งแลื่�วค�อยู่ๆแสด้งออกมีาท�ลื่ะซึ่�น ซึ่#�งร้ะหว�างแสด้งสามีาร้ถก!าหนด้ให�ออบเจ'คแป็ร้เป็ลื่��ยู่นขั้นาด้แลื่ะส�ไป็ท�ลื่ะน�ด้ได้�อ�กด้�วยู่ค!าส��ง Blur

เป็%นค!าส��งท��ท!าให�ออบเจ'คค�อยู่ๆเบลื่อแลื่ะจางลื่งไป็เร้��อยู่ๆ โด้ยู่สามีาร้ถป็ร้�บขั้นาด้แลื่ะท�ศทางการ้เบลื่อได้�ด้�วยู่ ด้�งน�+นจ#งเหมีะส!าหร้�บใช่�สร้�างเอฟเฟ%คตั4ในการ้เป็ลื่��ยู่นภาพท��ก!าลื่�งแสด้งไป็เป็%นภาพอ��นค!าส��ง Drop Shadow

เป็%นค!าส��งท��ใช่�สร้�างเงาให�ก�บออบเจ'คหร้�อภาพเคลื่��อนไหวอ��น โด้ยู่ไมี�สามีาร้ถสร้�างการ้เคลื่��อนไหวขั้#+นในตั�วเองได้�ค!าส��ง Expand

เป็%นค!าส��งท��ใช่�สร้�างการ้เคลื่��อนไหวแบบร้วมีเขั้�าหร้�อกร้ะจายู่ออก ขั้องขั้�อความีหร้�อกลื่,�มีออบเจ'ค โด้ยู่ค!าส��งน�+ไมี�สามีาร้ถใช่�ก�บออบเจ'คแบบ Merge Drawing ได้�

Page 6: หน่วยที่10 สร้างภาพเคลื่อนไหว

ค!าส��ง Explodeเป็%นค!าส��งท��ใช่�สร้�างการ้เคลื่��อนไหวแบบแตัก

กร้ะจายู่ออก โด้ยู่หากเป็%นขั้�อความีหร้�อกลื่,�มีออบเจ'คจะเป็%นการ้แยู่กออบเจ'คแตั�ลื่ะช่�+นออกจากก�น แตั�หากเป็%นออบเจ'คช่�+นเด้�ยู่วก'จะการ้แตักออบเจ'คน�+นเป็%นช่�+นยู่�อยู่ๆท�+งน�+ค,ณสามีาร้ถก!าหนด้ท�ศทางขั้องการ้กร้ะจายู่ในลื่�กษณะตั�างๆได้�ค!าส��ง Transform

เป็%นค!าส��งส!าหร้�บท!าให�ออบเจ'คเคลื่��อนท�� พร้�อมีก�บเก�ด้การ้เป็ลื่��ยู่นแป็ลื่งตั�างๆ ไป็พร้�อมีๆก�น เช่�น ป็ร้�บขั้นาด้ หมี,น เป็ลื่��ยู่นส� ความีโป็ร้�งใส แลื่ะเป็ลื่��ยู่นจ�งหวะการ้เคลื่��อนท��ค!าส��ง Transittion

เป็%นค!าส��งท��ท!าให�ออบเจ'คค�อยู่ๆแสด้งออกมีาหร้�อจางหายู่ไป็ท�น�อยู่ (Fade) หร้�อให�เลื่��อนตั�วออกมีาหร้�อเลื่��อนหายู่ไป็ (Wipe)

Page 7: หน่วยที่10 สร้างภาพเคลื่อนไหว

สร้�างการ้เคลื่��อนไหวด้�วยู่ตั�วเองช่น�ด้ขั้องภาพเคลื่��อนไหว

- ภาพเคลื่��อนไหวแบบเฟร้มีตั�อเฟร้มี (Frame-by-Frame) ค�อการ้สร้�างค�ยู่4เฟร้มีหลื่ายู่ๆเฟร้มีเร้�ยู่งตั�อก�น โด้ยู่แตั�ลื่ะเฟร้มีจะมี�เน�+อหาเป็%นภาพน��งท��ค�อยู่ๆเป็ลื่��ยู่นแป็ลื่งร้�ป็ร้�างหร้�อค,ณสมีบ�ตั�ไป็ท�ลื่ะน�ด้ ซึ่#�งเมี��อมี�การ้แสด้งยู่�างตั�อเน��องก'จ!าท!าให�มีองเห'นการ้เคลื่��อนไหวเก�ด้ขั้#+น

- ภาพเคลื่��อนไหวแบบทว�น (Tween animation) ค�อการ้สร้�างภาพเคลื่��อนไหวแบบอ�ตัโนมี�ตั�โด้ยู่เพ�ยู่งค,ณสร้�างเน�+อหาไว�ในเฟร้มีเร้��มีตั�นแลื่ะเฟร้มีส,ด้ท�ายู่เท�าน�+น ส�วนการ้เคลื่��อนไหวท��อยู่��ในเฟร้มีร้ะหว�างการ้โป็ร้แกร้มีจะสร้�างขั้#+นให�อ�ตัโนมี�ตั�ตัามีลื่�กษณะตั�างๆท��ได้�เลื่�อกไว� ภาพเคลื่��อนไหวแบบทว�นน�+แบ�งออกเป็%น 2 ป็ร้ะเภท ได้�แก�

Page 8: หน่วยที่10 สร้างภาพเคลื่อนไหว

Motion tween เป็%นการ้เคลื่��อนไหวแบบเคลื่��อนท�� ค�อมี�การ้เป็ลื่��ยู่นตั!าแหน�งขั้องออบเจ'คจากจ,ด้หน#�งไป็ยู่�งอ�กจ,ด้ ร้วมีไป็ถ#งการ้เป็ลื่��ยู่นแป็ลื่งค,ณสมีบ�ตั�ขั้องตั�วออบเจ'คเอง เช่�น ขั้นาด้ ส� ความีโป็ร้�งใสแลื่ะการ้หมี,น นอกจากน�+ยู่�งสามีาร้ถสร้�างเส�นทางการ้เคลื่��อนท��ให�ออบเจ'คได้�อ�กด้�วยู่

Shape tween เป็%นการ้เคลื่��อนไหวแบบเป็ลื่��ยู่นแป็ลื่งร้�ป็ร้�าง ค�อการ้เป็ลื่��ยู่นจากร้�ป็ร้�างหน#�งไป็เป็%นอ�กร้�ป็ร้�างหน#�ง โด้ยู่โป็ร้แกร้มีจะสร้�างร้�ป็ร้�างขั้องออบเจ'คในเฟร้มีท��อยู่��ร้ะหว�างกลื่างให�เอง

Page 9: หน่วยที่10 สร้างภาพเคลื่อนไหว

ภาพเคลื่��อนไหวแบบเฟร้มีตั�อเฟร้มี (frame by frame)เน��องจากการ้เคลื่��อนไหวแบบเฟร้มีตั�อเฟร้มีน�+

ค,ณจะตั�องสร้�างเน�+อหาขั้#+นมีาเองท,กเฟร้มี ด้�งน�+นแตั�ลื่ะการ้เคลื่��อนไหวจะมี�ความีเป็%นอ�สร้ะตั�อก�น โด้ยู่ค,ณสามีาร้ถเป็ลื่��ยู่นแป็ลื่งเน�+อหาในเฟร้มีใด้เฟร้มีหน#�งได้�โด้ยู่ไมี�มี�ผลื่กร้ะทบก�บเฟร้มีอ��น ค�ออาจเคลื่��อนท��ไป็ในท�ศทางใด้ก'ได้� หร้�อเป็ลื่��ยู่นแป็ลื่งร้�ป็ร้�างไป็แบบใด้ก'ได้�ตัามีตั�องการ้ป็ร้�บแตั�งขั้องค,ณ ซึ่#�งจะเหมีาะก�บภาพเคลื่��อนไหวท��ค�อนขั้�างซึ่�บซึ่�อน ไมี�มี�ร้�ป็แบบท��แน�นอน เก��ยู่วขั้�องก�บออบเจ'คหลื่ายู่ช่�+น หร้�อมี�การ้เป็ลื่��ยู่นแป็ลื่งแตั�ลื่ะส�วนขั้องออบเจ'คท��ไมี�ส�มีพ�นธี4ก�น เช่�น ภาพนกค�อยู่ๆกร้ะพ�อป็7กบ�นภาพด้อกไมี�ท��ค�อยู่ๆบาน หร้�อภาพคนท��ก!าลื่�งว��งหร้�อเตั�นร้!าอยู่�� เป็%นตั�น

Page 10: หน่วยที่10 สร้างภาพเคลื่อนไหว

สร้�างภาพเคลื่��อนไหวแบบเฟร้มีตั�อเฟร้มีในการ้สร้�างภาพเคลื่��อนไหวช่น�ด้น�+ ท!าได้�

โด้ยู่ก!าหนด้แตั�ลื่ะเฟร้มีให�เป็%นค�ยู่4เฟร้มีแลื่�วใส�เน�+อหาท��แตักตั�างก�นลื่งไป็ แตั�เพ��อให�ได้�การ้เคลื่��อนไหวท��ตั�อเน��องจ#งตั�องมี�การ้ก8อป็ป็7+ เน�+อหาจากเฟร้มีท��อยู่��ก�อนหน�ามีาใช่� แลื่�วค�อยู่ๆท!าการ้ป็ร้�บแตั�งท�ลื่ะน�อยู่อยู่�างเป็%นลื่!าด้�บขั้�+น หร้�อค,ณอาจจ�เพ��มีเน�+อหาใหมี�เขั้�าไป็ก'ได้�เช่�นก�น

Page 11: หน่วยที่10 สร้างภาพเคลื่อนไหว

เน��องจากการ้เคลื่��อนไหวแบบเฟร้มีตั�อเฟร้มีน�+ค,ณจะตั�องสร้�างเน�+อหาขั้#+นมีาเองท,กเฟร้มี ด้�งน�+นแตั�ลื่ะการ้เคลื่��อนไหวจะมี�ความีเป็%นอ�สร้ะตั�อก�น โด้ยู่ค,ณสามีาร้ถเป็ลื่��ยู่นแป็ลื่งเน�+อหาในเฟร้มีใด้เฟร้มีหน#�งได้�โด้ยู่ไมี�มี�ผลื่กร้ะทบก�บเฟร้มีอ��น ค�ออาจเคลื่��อนท��ไป็ในท�ศทางใด้ก'ได้� หร้�อเป็ลื่��ยู่นแป็ลื่งร้�ป็ร้�างไป็แบบใด้ก'ได้�ตัามีตั�องการ้ป็ร้�บแตั�งขั้องค,ณ ซึ่#�งจะเหมีาะก�บภาพเคลื่��อนไหวท��ค�อนขั้�างซึ่�บซึ่�อน ไมี�มี�ร้�ป็แบบท��แน�นอน เก��ยู่วขั้�องก�บออบเจ'คหลื่ายู่ช่�+น หร้�อมี�การ้เป็ลื่��ยู่นแป็ลื่งแตั�ลื่ะส�วนขั้องออบเจ'คท��ไมี�ส�มีพ�นธี4ก�น เช่�น ภาพนกค�อยู่ๆกร้ะพ�อป็7กบ�นภาพด้อกไมี�ท��ค�อยู่ๆบาน หร้�อภาพคนท��ก!าลื่�งว��งหร้�อเตั�นร้!าอยู่�� เป็%นตั�น

ภาพเคลื่��อนไหวแบบเคลื่��อนท�� (Motion Tween)

Page 12: หน่วยที่10 สร้างภาพเคลื่อนไหว

สร้�างภาพเคลื่��อนไหวแบบเฟร้มีตั�อเฟร้มีในการ้สร้�างภาพเคลื่��อนไหวช่น�ด้น�+ ท!าได้�โด้ยู่

ก!าหนด้แตั�ลื่ะเฟร้มีให�เป็%นค�ยู่4เฟร้มีแลื่�วใส�เน�+อหาท��แตักตั�างก�นลื่งไป็ แตั�เพ��อให�ได้�การ้เคลื่��อนไหวท��ตั�อเน��องจ#งตั�องมี�การ้ก8อป็ป็7+ เน�+อหาจากเฟร้มีท��อยู่��ก�อนหน�ามีาใช่� แลื่�วค�อยู่ๆท!าการ้ป็ร้�บแตั�งท�ลื่ะน�อยู่อยู่�างเป็%นลื่!าด้�บขั้�+น หร้�อค,ณอาจจ�เพ��มีเน�+อหาใหมี�เขั้�าไป็ก'ได้�เช่�นก�น

Page 13: หน่วยที่10 สร้างภาพเคลื่อนไหว

ภาพเคลื่��อนไหวแบบเคลื่��อนท�� (Motion Tween)เป็%นการ้เคลื่��อนไหวท��มี�การ้เป็ลื่��ยู่นตั!าแหน�งขั้องอ

อบเจ'คจากจ,ด้หน#�งไป็ยู่�งอ�กจ,ด้หน#�ง หร้�อเป็ลื่��ยู่นค,ณสมีบ�ตั�จากแบบหน#�งไป็เป็%นอ�กแบบหน#�ง โด้ยู่เป็%นการ้เป็ลื่��ยู่นแป็ลื่งท��แน�นอน ด้�งน�+น motion tween จ#งเหมีาะก�บภาพเคลื่��อนไหวท��ตั�อเน��องสมี!�าเสมีอ เช่�น ภาพด้วงอาท�ตัยู่4ก!าลื่�งตักด้�น ภาพก�งห�นท��ก!าลื่�งหมี,น ภาพเคร้��องบ�นก!าลื่�งบ�นขั้#+น หร้�อภาพฉากหลื่�งท��เป็ลื่��ยู่นจากส�หน#�งไป็เป็%นอ�กส�หน#�ง เป็%นตั�นว�ธี�สร้�างภาพเคลื่��อนไหวแบบ Motion Tween สร้�างด้�วยู่ออป็ช่��น Motion Tween

ค,ณสามีาร้ถน!าออบเจ'คมีาสร้�างได้�หลื่ายู่ป็ร้ะเภท ไมี�ว�าจะเป็%น Object Drawing, ขั้�อความี, ซึ่�มีโบลื่หร้�อออบเจ'คท��ถ�กร้วมีกลื่,�มีก'ได้� (ยู่กเว�น Merge Drawing) ว�ธี�น�+เป็%นว�ธี�ง�ายู่ๆ เหมีาะก�บการ้เคลื่��อนไหวจ�งหวะเด้�ยู่ว ตั�วอยู่�างตั�อไป็น�+เป็%นการ้สร้�างการ้เคลื่��อนไหว โด้ยู่ให�ร้ถยู่นตั4เคลื่��อนท��ไป็ทางขั้วา

Page 14: หน่วยที่10 สร้างภาพเคลื่อนไหว

ก8อป็ป็7+ การ้เคลื่��อนไหวแบบ Motion Tweenเป็%นค!าส��งท��ช่�วยู่ให�ค,ฯสามีาร้ถน!าร้�ป็แบบ

เคลื่��อนไหวขั้องออบเจ'คหน#�งไป็ใช่�ก�บออบเจ'คอ��นๆ โด้ยู่จะเป็%นการ้ก8อป็ป็7+ ค,ณสมีบ�ตั�ท,กอยู่�างไมี�ว�าจะเป็%นท�ศทางการ้เคลื่��อนท�� จ�งหวะ หร้�อจ!านวนเฟร้มีท��ใช่� แลื่ะยู่�งสามีาร้ถก8อป็ป็7+ จากไฟลื่4หน#�งไป็ยู่�งอ�กไฟลื่4หน#�งได้�ด้�วยู่ป็ร้�บแตั�งร้�ป็แบบการ้เคลื่��อนไหว

หลื่�งจากสร้�างการ้เคลื่��อนไหวให�ออบเจ'คแลื่�ว ค,ณสามีาร้ถป็ร้�บแตั�งร้�ป็แบบการ้เคลื่��อนไหวเพ��มีเตั�มีจาก Property inspector ได้�หลื่ายู่ร้�ป็แบบให�ออบเจ'คเคลื่��อนท��ตัามีเส�นทาง

ตัามีป็กตั�ออบเจ'คท��เคลื่��อนไหวแบบ Motion tween จะเคลื่��อนท��เป็%นแนวเส�นตัร้ง แตั�หากค,ณตั�องการ้เป็ลื่��ยู่นแป็ลื่งท�ศทางไป็เป็%นแบบอ��น เช่�น เคลื่��อนท��บนแนวเส�นโค�ง หร้�อเคลื่��อนท��วนเป็%นวงกลื่มี ก'สามีาร้ถสร้�างเส�นน!าทาง (motion path)

Page 15: หน่วยที่10 สร้างภาพเคลื่อนไหว

สร้�างความีเคลื่��อนไหวแบบเป็ลื่��ยู่นแป็ลื่งร้�ป็ร้�าง (Shape Tween)เป็%นการ้เป็ลื่��ยู่นแป็ลื่งร้�ป็ร้�างขั้องออบเจ'คจากแบบ

หน#�งให�ค�อยู่ๆกลื่ายู่เป็%นอ�กแบบหน#�ง ซึ่#�งจะตั�องใช่�ออบเจ'ค 2 ช่�+น ท��แตักตั�างก�น เช่�น การ้เป็ลื่��ยู่นจากตั�วอ�กษร้ A ไป็เป็%น B จากเส�+อไป็เป็%นกางเกง หร้�อจากด้�นสอไป็เป็%นยู่างลื่บ เป็%นตั�น (ตั�างจากการ้เคลื่��อนไหวแบบ motion tween ซึ่#�งจะใช่�ออบเจ'คช่�+นเด้�ยู่ว) โด้ยู่โป็ร้แกร้มีจะสร้�างการ้เป็ลื่��ยู่นแป็ลื่งร้�ป็ร้�างในร้ะหว�างกลื่างให�อ�ตัโนมี�ตั�ว�ธี�สร้�างภาพเคลื่��อนไหวแบบ Shape Tween

ออบเจ'คท��น!ามีาสร้�างภาพเคลื่��อนไหวแบบ shape tween จะตั�องเป็%นออบเจ'คพ�+นฐานแบบ Merge Drawing หร้�อ Object Drawing ซึ่#�งถ�าจะใช่�อ�นสแตันซึ่4 ออบเจ'คท��ร้�วมีกลื่,�มีอยู่�� (group) ขั้�อความี หร้�อภาพบ�ทแมีพ ก'จะตั�องแยู่กส�วน (break apart) ให�เป็%นออบเจ'คพ�+นฐานก�อนท��จะน!ามีาสร้�างการ้เคลื่��อนไหว

Page 16: หน่วยที่10 สร้างภาพเคลื่อนไหว

ป็ร้�บแตั�งร้�ป็แบบการ้เคลื่��อนไหวค,ณสามีาร้ถป็ร้�บแตั�งลื่�กษณะการ้เคลื่��อนไหว

แบบ shape tween ได้�จาก Propery inspector โด้ยู่คลื่�กเลื่�อกเฟร้มีใด้เฟร้มีหน#�งขั้องการ้เคลื่��อนไหว แลื่�วก!าหนด้ออป็ช่��นตั�างๆด้�งน�+

- Ease ก!าหนด้จ�งหวะในการ้เคลื่��อนไหวร้ะหว�างเฟร้มี ถ�าตั�องการ้เร้��มีตั�นช่�าๆแลื่�วเร้�งความีเร้'วในช่�วงท�ายู่ ให�ใช่�ค�าลื่บ แตั�ถ�าจะให�เร้��มีตั�นเร้'วแลื่�วค�อยู่ๆช่�าลื่ง ให�ใช่�ค�าบวก

- Blend ก!าหนด้ว�ธี�การ้แป็ร้เป็ลื่��ยู่นขั้องร้�ป็ทร้งโด้ยู่ Distributive จะให�ร้�ป็ทร้งร้ะหว�างกลื่างท��เร้�ยู่บกว�า ส�วน Angular จะให�ร้�ป็ทร้งร้ะหว�างกลื่างท��คงลื่�กษณะขั้องมี,มีหร้�อเส�นตัร้งไว�

Page 17: หน่วยที่10 สร้างภาพเคลื่อนไหว

ควบค,มีการ้เป็ลื่��ยู่นร้�ป็ทร้งด้�วยู่ Shape hintในการ้สร้�างภาพเคลื่��อนไหวขั้องร้�ป็ทร้งท��ซึ่�บ

ซึ่�อน ค,ณสามีาร้ถใช่� shape hint เพ��อตัร้#งจ,ด้ท��ตั�องการ้ให�อยู่��คงท��ขั้องร้�ป็ทร้งท�+งก�อนแลื่ะหลื่�งการ้เป็ลื่��ยู่นแป็ลื่งได้� shape hint ป็ร้ะกอบด้�วยู่ตั�วอ�กษร้จาก a ถ#ง z โด้ยู่ในค�ยู่4เฟร้มีเร้��มีตั�นจะเป็%นส�เหลื่�อง แลื่ะในค�ยู่4เฟร้มีส,ด้ท�ายู่จะเป็%นส�ขั้าว แตั�จะเป็%นส�แด้งถ�า shape hint น�+นไมี�ได้�วางอยู่��บนเส�นขั้อบร้�ป็ทร้ง

Page 18: หน่วยที่10 สร้างภาพเคลื่อนไหว

แก�ไขั้เฟร้มีภาพเคลื่��อนไหวเพ��มีจ�งหวะการ้เคลื่��อนไหว

หากตั�องการ้เพ��มีช่�วงหร้�จ�งหวะการ้เคลื่��อนไหวเขั้�าไป็ในภาพเคลื่��อนไหวเด้�มี ก'ท!าได้�โด้ยู่เพ��มีค�ยู่4เฟร้มีใหมี� โด้ยู่แบ�งเป็%น 2 กร้ณ� ค�อ

- การ้เพ��มีช่�วงเคลื่��อนไหวในร้ะหว�างกลื่าง ให�ค,ณแทร้กค�ยู่4เฟร้มีใหมี�ร้ะหว�างเฟร้มีเคลื่��อนไหวเด้�มี

- การ้เพ��มีช่�วงเคลื่��อนไหวตั�อเน��องไป็ ให�เพ��มีค�ยู่4เฟร้มีใหมี�ตั�อจากค�ยู่4เฟร้มีส,ด้ท�ายู่

ท�+ง 2 ว�ธี�สามีาร้ถท!าได้�ท�+งก�บการ้เคลื่��อนไหวแบบ motion แลื่ะ shape tween (ท��สร้�างด้�วยู่ค!าส��ง Create Motion / Shape Tween)

Page 19: หน่วยที่10 สร้างภาพเคลื่อนไหว

สลื่�บท�ศทางการ้เคลื่��อนไหวเป็%นยู่�ายู่ตั!าแหน�งขั้องค�ยู่4เฟร้มีจากเฟร้มีแร้กไป็

เป็%นเฟร้มีส,ด้ท�ายู่แลื่ะเฟนมีส,ด้ท�ายู่มีาเป็%นเฟร้มีแร้กส�วนเฟร้มีอ��นๆก'จะถ�กสลื่�บในท!านองเด้�ยู่วก�น ท!าให�มีองเห'นการ้เคลื่��อนไหวกลื่�บเป็%นตัร้งก�นขั้�ามี การ้สลื่�บน�+ท!าได้�ภาพเคลื่��อนไหวแบบ Frame-by-Frame, Motion tween หร้�อ Shape tween

แก�ไขั้ซึ่�มีโบลื่ภาพเคลื่��อนไหวเมี��อค,ณสร้�างภาพเคลื่��อนไหวแบบ motion

tween ด้�วยู่ค!าส��ง Create Motion Tween โป็ร้แกร้มีจะแป็ลื่งออบเจ'คเหลื่�าน�+นให�เป็%นซึ่�มีโบลื่ป็ร้ะเภทกร้าฟ<ก ช่��อ Tween 1, Tween 2,…ตัามีลื่!าด้�บ แลื่ะเก'บไว�ในไลื่บร้าร้�ให�อ�ตัโนมี�ตั� ซึ่#�งซึ่�มีโบลื่น�+จะถ�กใช่�เป็%นเน�+อหาขั้องค�ยู่4เฟร้มีในแตั�ลื่ะจ�งหวะ ด้�งน�+นเมี��อค,ณตั�องการ้แก�ไขั้ค,ณสมีบ�ตั�พ�+นฐานขั้องออบเจ'คในภาพเคลื่��อนไหว จ#งท!าได้�ด้�วยู่การ้แก�ไขั้กร้าฟ<กซึ่�มีโบลื่ โด้ยู่ออบเจ'คจะถ�กอ�พเด้ทในท,กๆค�ยู่4เฟร้มีพร้�อมีก�นท�นท�

Page 20: หน่วยที่10 สร้างภาพเคลื่อนไหว

บ�งภาพด้�วยู่ Mask layerเอฟเฟ%คตั4แบบ spotlight หร้�อ

transition ซึ่#�งมี�ลื่�กษณะเหมี�อนก�บการ้ส�องไฟไป็ยู่�งตั�วลื่ะคร้ท��ก!าลื่�งแสด้งอยู่�� หร้�อให�เห'นตั�วลื่ะคร้แลื่ะเน�+อหาค�อยู่ๆป็ร้ากฏขั้#+นท�ลื่ะส�วน เอฟเฟ%คตั4แบบน�+มี�หลื่�กในการ้สร้�างค�อ ให�ค,ณสร้�างตั�วลื่ะคร้หร้�อเน�+อหาท�+งหมีด้ไว�ในเลื่เยู่อร้4ด้�านลื่�าง จากน�+นสร้�าง spotlight หร้�อช่�องกร้อบไว�ในเลื่เยู่อร้4ด้�านบน แลื่�วก!าหนด้เลื่เยู่อร้4บนเป็%น Mask layer เพ��อเจาะทะลื่,ให�ผ��ช่มีมีองเห'นเฉพาะเน�+อหาในช่�องเท�าน�+นส�วนเน�+อหาท��อยู่��ด้�านนอกจะถ�กบ�งไว�

Page 21: หน่วยที่10 สร้างภาพเคลื่อนไหว

สร้�างการ้เคลื่��อนไหวให�ก�บ Mask layerค,ณสามีาร้ถสร้�างการ้เคลื่��อนไหวขั้องออบ

เจ'คใน mask layer โด้ยู่โด้ยู่จะให�ผลื่เหมี�อนก�บแสงไฟท��เคลื่��อนท��เพ��อสาด้ส�องไป็ยู่�งเน�+อหาอ��นๆการ้เคลื่��อนไหวน�+ท!าได้�ท�+งแบบ frame-by-frame,motion tween แลื่ะ shape tween ส!าหร้�บ motion น�+นยู่�งสามีาร้ถด้!าหนด้ให�เคลื่��อนท��ไป็บน motion path ได้�ด้�วยู่

Page 22: หน่วยที่10 สร้างภาพเคลื่อนไหว

เทคน�คการ้ใช่� Mask layer เป็ลื่��ยู่นเลื่เยู่อร้4ป็กตั�ให�เป็%นเลื่เยู่อร้4ท��ถ�กบ�ง

ค,ณสามีาร้ถน!าเลื่เยู่อร้4ป็กตั�ไป็เพ��มีไว�ภายู่ใตั�เลื่เยู่อร้4 mask โด้ยู่หลื่ายู่ว�ธี�ด้�งน�+

- สร้�างเลื่เยู่อณใหมี�ภายู่ใตั�เลื่เยู่อร้4 mask แลื่�วค�อยู่สร้�างเน�+อหา

- คลื่�กลื่ากเลื่เยู่อร้4ท��มี�เน�+อหาอยู่��แลื่�ว ไป็ไว�ใตั�เลื่เยู่อร้4 mask

- ส!าหร้�บเลื่เยู่อร้4ท��วางอยู่��ด้�านลื่�างขั้องเลื่เยู่อร้4 mask ให�คลื่�กขั้วาท��เลื่เยู่อร้4 แลื่�วเลื่�อกค!าส��ง properties จากน�+นให�คลื่�กเลื่�อกออป็ช่��น Masked

ยู่กเลื่�กเลื่เยู่อร้4ท��ถ�กบ�งค�บ- คลื่�กลื่ากเลื่เยู่อร้4น�+น ออกนอกช่�+นเลื่เยู่อร้4

mask- คลื่�กขั้วาท��เลื่เยู่อร้4แลื่�วเลื่�อกค!าส��ง

Properties จากน�+นให�คลื่�กเลื่�อกออป็ช่��น Normal ก'ได้�เช่�นก�น

Page 23: หน่วยที่10 สร้างภาพเคลื่อนไหว

จบบทท�� 10 ค�ะ