ภาพเคลื่��อนไหว(Animation)

1

Animation

2

อะนิ�เมชั�นิ หรื�อ ภาพเคลื่��อนิไหว เป็�นิการืทำ�าให�ว�ตถุ�ใดๆ เก�ดการืเคลื่��อนิทำ!�ด�วยรื#ป็แบบต&างๆ ก�นิบนิจอภาพ

หลื่�กการของอะน�เมชั�น

3

อะนิ�เมชั�นิอาศั�ยป็รืากฏการืณ์,ทำางชั!วว�ทำยาทำ!�เรื!ยกว&า “ความต&อเนิ��องของการืมองเห.นิ” รื&วมก�บการืทำ�าให�ว�ตถุ�ม!การืเคลื่��อนิทำ!�ทำ!�ความเรื.วรืะด�บหนิ/�ง จนิตาของคนิเรืามองเห.นิว&าว�ตถุ�นิ�0นิม!การืเคลื่��อนิไหว ภาพแต&ลื่ะภาพทำ!�นิ�ามาทำ�าอะนิ�เมชั�นิเรื!ยกว&าเฟรืม (Frame)

การืเป็ลื่!�ยนิแป็ลื่งภาพทำ!�มองเห.นิด�วยความรืวดเรื.วเป็�นิหลื่�กการืของอะนิ�เมชั�นิ การืแสดงผลื่ภาพในิโทำรืทำ�ศันิ, 30 เฟรืมต&อว�นิาทำ! เป็�นิความเรื.วทำ!�ทำ�าให�มองเห.นิการื

เคลื่��อนิไหวทำ!�กลื่มกลื่�นิ ถุ�าเป็�นิภาพยนิตรื,จะบ�นิทำ/กด�วยอ�ตรืา 24 เฟรืมต&อว�นิาทำ!แลื่�วฉายภาพยนิตรื,ด�วย

อ�ตรืา 48 เฟรืมต&อว�นิาทำ!

4

ลื่�กษณ์ะข�0นิตอนิของภาพเคลื่��อนิไหวลื่�กษณ์ะข�0นิตอนิของภาพเคลื่��อนิไหว

ว�ธี�การสร�างอะน�เมชั�น

5

ทำ�าได�หลื่ายว�ธี! แบบเฟรืมต&อเฟรืม (Frame By Frame) แบบทำว!นิอะนิ�เมชั�นิ (Tween Animation) แบบแอ.คชั�นิสครื�ป็ต, (Action Script)

เฟรืมต&อเฟรืม (Frame By Frame)

6

เป็�นิการืนิ�าภาพมาใส&ไว�ในิแต&ลื่ะเฟรืมแลื่ะทำ�าการืก�าหนิดค!ย,เฟรืม (ค!ย,เฟรืม ค�อ เฟรืมทำ!�ถุ#กก�าหนิดให�ม!การืเป็ลื่!�ยนิแป็ลื่งของว�ตถุ�เพ��อสรื�างการืเคลื่��อนิไหว ) ถุ�าก�าหนิดค!ย,เฟรืมม!ชั&องว&างห&างก�นิเก�นิไป็ การืเป็ลื่!�ยนิแป็ลื่งของภาพทำ!�ป็รืากฏออกมาจากเฟรืมหนิ/�งไป็ย�งอ!กเฟรืมหนิ/�งก.จะชั�าลื่ง การืสรื�างเคลื่��อนิไหวแบบ Frame By Frame เหมาะส�าหรื�บภาพอะนิ�เมชั�นิทำ!�ม!การืเป็ลื่!�ยนิแป็ลื่งแบบรืวดเรื.ว หรื�องานิทำ!�ซั�บซั�อนิมากๆ

ทำว!นิอะนิ�เมชั�นิ (Tween Animation)

7

Tween (ทำว!นิ ) ย&อมาจากค�าว&า Between ซั/�งแป็ลื่ว&า “รืะหว&าง” การืสรื�างภาพแบบ Tween เป็�นิการืก�าหนิดค!ย,เฟรืมเรื��มต�นิแลื่ะค!ย,เฟรืม

ส�ดทำ�าย จากนิ�0นิให�โป็รืแกรืมสรื�างความเป็ลื่!�ยนิแป็ลื่งรืะหว&างเฟรืมโดยอ�ตโนิม�ต�

แบ&งออกได�เป็�นิ 2 ป็รืะเภทำ ค�อMotion Tween หรื�อ Motion Path เป็�นิการืเคลื่��อนิไหวทำ!�ม!การื

ก�าหนิดการืเคลื่��อนิทำ!� หม�นิ ย&อ หรื�อขยายไป็ตามเส�นิทำ!�วาดไว� โดยทำ!�รื#ป็ทำรืงว�ตถุ�ไม&ม!การืเป็ลื่!�ยนิแป็ลื่ง นิ�ยมใชั�มากทำ!�ส�ด

Shape Tween เป็�นิการืสรื�างภาพเคลื่��อนิไหวทำ!�ม!การืเป็ลื่!�ยนิแป็ลื่งรื#ป็ทำรืงของว�ตถุ� จากรื#ป็ทำรืงหนิ/�งไป็เป็�นิอ!กรื#ป็ทำรืงหนิ/�งโดยสามารืถุก�าหนิด ต�าแหนิ&ง ขนิาด ทำ�ศัทำาง แลื่ะส!ของว�ตถุ�ในิแต&ลื่ะชั&วงเวลื่าตามต�องการื นิ�ยมใชั�ก�บรื#ป็วาดเทำ&านิ�0นิ

การืสรื�างภาพเคลื่��อนิไหวแบบ Tween ชั&วยทำ�าให�ไฟลื่,ม!ขนิาดเลื่.กลื่ง แลื่ะม!การืเคลื่��อนิไหวทำ!�ม!ความนิ�&มนิวลื่มากกว&าแบบ Frame By Frame

แอ.คชั�นิสครื�ป็ต, (Action Script)

8

เป็�นิภาษาโป็รืแกรืมทำ!�นิ�ามาใชั�เพ��อเพ��มป็รืะส�ทำธี�ภาพในิการืทำ�างานิของรืะบบ แลื่ะสามารืถุโต�ตอบ (Interactive) ก�บผ#�ใชั�งานิได� โดย Action Script จะถุ#กนิ�ามาใชั�เม��อม!การืกรืะทำ�าเก�ดข/0นิ ซั/�งเรื!ยกว&า เหต�การืณ์, (Event) เชั&นิ การืคลื่�กเมาส, หรื�อกดค!ย,บอรื,ด โดยจะนิ�า Action Script มาใชั�โต�ตอบก�บ Event นิ�0นิ เชั&นิ ส��งให�แสดง Movie เป็�นิต�นิ

Action Script ไม&สนิ�บสนิ�นิออบเจ.กต,บางต�วทำ!�รืะบ�อย#&บนิ Browser เชั&นิ Document, Window, Anchor, Unicode เป็�นิต�นิ

เทคน�คในการสร�างอะน�เมชั�น

9

ก�าหนิดลื่�กษณ์ะการืเคลื่��อนิไหวทำ!�ต�องการืทำ�0งหมด เลื่�อกเครื��องม�อให�เหมาะสมก�บงานิก�าหนิดลื่�าด�บการืแสดงผลื่ของอะนิ�เมชั�นิทำ!�ต�องการื ทำดสอบแสงเงาตรืวจสอบซั�0าอ!กครื�0ง เพ��มเทำคนิ�คพ�เศัษต&างๆ แลื่ะเพ��มเส!ยงป็รืะกอบให�ก�บอะนิ�เมชั�นิ

ในิอด!ตการืสรื�างอะนิ�เมชั�นิจะใชั�ในิการืสรื�างภาพยนิตรื,การื,ต#นิ ซั/�งต�องใชั�ฝี:ม�อของผ#�เชั!�ยวชัาญทำ�0งหมด ต�0งแต&ออกแบบเนิ�0อเรื��อง การืวาดต�วการื,ต#นิ แลื่ะสรื�างเป็�นิอะนิ�เมชั�นิ เรื!ยกการืสรื�างอะนิ�เมชั�นิแบบนิ!0ว&า “เซัลื่อะนิ�เมชั�นิ (Cel Animation)”

ต&อมาได�รื�บการืพ�ฒนิาอย&างต&อเนิ��อง จนิสามารืถุสรื�างอะนิ�เมชั�นิด�วยคอมพ�วเตอรื,ได� เรื!ยกอะนิ�เมชั�นิทำ!�สรื�างด�วยคอมพ�วเตอรื,ว&า “คอมพ�วเตอรื,อะนิ�เมชั�นิ (Computer Animation)”

เซลื่อะน�เมชั�น (Cel Animation)

10 เซัลื่แต&ลื่ะเซัลื่ในิการืสรื�างภาพเคลื่��อนิไหวเซัลื่แต&ลื่ะเซัลื่ในิการืสรื�างภาพเคลื่��อนิไหว

คอมพ�วเตอร อะน�เมชั�น (Computer Animation)

11

การืขจ�ดรือยหย�กตามขอบภาพการืขจ�ดรือยหย�กตามขอบภาพ

ก&อนิการืขจ�ดรือยหย�ก หลื่�งการืขจ�ดรือยหย�ก

การืใชั�คอมพ�วเตอรื,จ�าลื่องส&วนิต&างๆ ของรื&างกายเพ��อการืศั/กษา

12

ม! 2 แบบ ค!นิ�เมต�ก (Kinematic) มอรื,ฟฟ=� ง (Morphing)

ค!นิ�เมต�ก (Kinematic) เนิ�นิการืเรื!ยนิรื# �ลื่�กษณ์ะ ก�รื�ยาทำ&าทำาง แลื่ะ

การืเคลื่��อนิไหวของโครืงสรื�างส&วนิทำ!�ม!การืเชั��อมต&อก�นิ เชั&นิ ทำ&าทำางการืเด�นิของมนิ�ษย, ซั/�งจะต�องทำ�าการืค�านิวณ์ต�าแหนิ&ง จ�ดหม�นิ ความเรื.ว แลื่ะความเรื&งของการืเคลื่��อนิทำ!�ของข�อต&อต&างๆ ภายในิรื&างกายมนิ�ษย, เชั&นิ การืงอเข&า ส&ายสะโพก แกว&งไหลื่& ผงกศั!รืษะ เป็�นิต�นิ โป็รืแกรืม Fractal’s Poser เป็�นิโป็รืแกรืมหนิ/�งทำ!�ใชั�ในิการืสรื�างรื#ป็แบบรื&างกายของมนิ�ษย, (ผ#�ชัาย ผ#�หญ�ง ทำารืก แลื่ะว�ยหนิ�&มสาว ในิทำ&าทำางต&างๆ ก�นิ เชั&นิ ทำ&าทำางในิการืเด�นิ หรื�อเคลื่��อนิไหวอว�ยวะต&างๆ สรื�างผ�วในิรื#ป็แบบของกลื่�ามเนิ�0อ ความส�มพ�นิธี,แลื่ะข�อจ�าก�ดของข�อต&อต&างๆ เชั&นิ ม�อแลื่ะชั&วงแขนิหรื�อข�อศัอกทำ!�ไม&สามารืถุพ�บไป็ด�านิหลื่�งได� ซั/�งหลื่�งจากทำ!�ม!การืก�าหนิดเง��อนิไขต&างๆ แลื่�วจะให�คอมพ�วเตอรื,ค�านิวณ์ผลื่ลื่�พธี,แลื่ะทำ�าการืสรื�างภาพต&อไป็ การืสรื�างภาพในิลื่�กษณ์ะการืสรื�างภาพในิลื่�กษณ์ะ

จลื่นิศัาสตรื,จลื่นิศัาสตรื, ((Kinematic)Kinematic)

การืใชั�คอมพ�วเตอรื,จ�าลื่องส&วนิต&างๆ ของรื&างกายเพ��อการืศั/กษา(ต&อ)

13

มอรื,ฟฟ=� ง (Morphing) เป็�นิเทำคนิ�คพ�เศัษทำ!�ใชั�ในิการืเป็ลื่!�ยนิแป็ลื่งภาพให�กลื่ายเป็�นิว�ตถุ�ชันิ�ดอ��นิทำ!�แตกต&างก�นิออก

ไป็ โดยจะใชั�เทำคนิ�คนิ!0ได�ทำ� 0งภาพนิ��งแลื่ะอะนิ�เมชั�นิ แต&บางครื�0งการืใชั�งานิเทำคนิ�คนิ!0ก�บอะนิ�เมชั�นิจะให�งานิทำ!�ม!ค�ณ์ภาพด!กว&า ต�วอย&างโป็รืแกรืมลื่�กษณ์ะนิ!0 เชั&นิ Avid’s Elastic Reality, Black Belt’s Winimages, Gryphon Software’s Morph, Human Software’s Squizz, Ulead’s Morphstudio. Jasc Paint Shop Pro แลื่ะ Morph Man เป็�นิต�นิ

การืเป็ลื่!�ยนิใบหนิ�าส�นิ�ขให�เป็�นิใบหนิ�าเส�อด�วยอ�ตรืาการืเป็ลื่!�ยนิใบหนิ�าส�นิ�ขให�เป็�นิใบหนิ�าเส�อด�วยอ�ตรืา 10 10 กรือบต&อว�นิาทำ!กรือบต&อว�นิาทำ!

อะน�เมชั�น 2 ม�ต� 2( D Animation)

14

ในิอด!ตอะนิ�เมชั�นิจะม!ลื่�กษณ์ะ 2 ม�ต� แลื่ะอย#&ในิรื#ป็แบบของภาพยนิตรื,การื,ต#นิ เชั&นิ เรื��องโดรืาเอมอนิ ดรืาก�อนิบอลื่ สโนิไวทำ,ก�บคนิแครืะทำ�0งเจ.ด ไลื่อ�อนิค�ง เป็�นิต�นิ โดยภาพในิแต&ลื่ะเฟรืมจะสรื�างด�วยว�ธี!การืรื&างภาพแบบเซัลื่อะนิ�เมชั�นิ

ในิป็>จจ�บ�นินิอกจากจะพบเห.นิบนิจอโทำรืทำ�ศันิ, แลื่ะจอภาพยนิตรื,แลื่�ว ย�งพบได�ทำ� �วไป็บนิเว.บไซัต,ต&างๆ เชั&นิ เกมส,แลื่ะภาพยนิตรื,การื,ต#นิบนิเว.บไซัต,

เกมแลื่ะการื,ต#นิในิรื#ป็แบบภาพเคลื่��อนิไหวสองเกมแลื่ะการื,ต#นิในิรื#ป็แบบภาพเคลื่��อนิไหวสองม�ต�ม�ต�

อะน�เมชั�น 2 ม�ต� 2( D)

15

โป็รืแกรืมทำ!�ใชั�ในิการืสรื�างอะนิ�เมชั�นิ 2 ม�ต� เพ��อแสดงผลื่บนิเว.บไซัต,ทำ!�ได�รื�บความนิ�ยมมากโป็รืแกรืมหนิ/�งก.ค�อ โป็รืแกรืม Macromedia Flash

ภาพเคลื่��อนิไหวสองม�ต�ทำ!�สรื�างด�วยโป็รืแกรืมมาโครืภาพเคลื่��อนิไหวสองม�ต�ทำ!�สรื�างด�วยโป็รืแกรืมมาโครืม!เด!ยแฟลื่ชัม!เด!ยแฟลื่ชั

อะน�เมชั�น 3 ม�ต� (3D Animation)

16

ว�ธี!การืสรื�างนิ�0นิเป็�นิเรื��องยาก เนิ��องจากลื่�กษณ์ะของภาพ 3 ม�ต�จะได�มาจากการืค�านิวณ์ ซั/�งการืเป็ลื่!�ยนิแป็ลื่งค&าต�วเลื่ขในิขณ์ะค�านิวณ์จะม!ผลื่ให�เก�ดการืเป็ลื่!�ยนิแป็ลื่งลื่�กษณ์ะต&างๆ ของว�ตถุ� นิอกจากนิ!0ความหนิาแนิ&นิของว�ตถุ� ทำ�ศัทำางของแสง ต�าแหนิ&งแลื่ะทำ�ศัทำางของกลื่�องถุ&ายภาพ ก.ต�องก�าหนิดด�วยต�วเลื่ขเชั&นิก�นิ ส��งส�าค�ญทำ!�จะต�องป็ฏ�บ�ต�ค�อ ก�าหนิดค�ณ์ลื่�กษณ์ะต&างๆ ของว�ตถุ�แลื่ะลื่�กษณ์ะผ�วของว�ตถุ�ให�เหมาะสมตามต�องการืต�0งแต&เฟรืมแรืก โดยเป็ลื่!�ยนิแป็ลื่งค&าของต�วแป็รืต&างๆ สรื�างพ�0นิผ�วให�ก�บเฟรืมถุ�ดไป็ แลื่ะตกแต&งแก�ไขในิแต&ลื่ะเฟรืมตามความเหมาะสม จากนิ�0นิจ/งก�าหนิดชั&วงเวลื่าในิแต&ลื่ะเฟรืมเพ��อให�เป็�นิอะนิ�เมชั�นิต&อไป็

ป็>จจ�บ�นิผ#�พ�ฒนิาหลื่ายรืายต�องการืสรื�างให�อะนิ�เมชั�นิ 3 ม�ต�ม!ความใกลื่�เค!ยงธีรืรืมชัาต�มากทำ!�ส�ด เพ��อใชั�ในิการืสรื�างสภาวะเสม�อนิจรื�งทำ!�เรื!ยกว&า Virtual Reality (VR) ทำ!�พบเห.นิทำ��วไป็ในิการืเลื่&นิเกมส, แลื่ะจ�าลื่องการืเคลื่��อนิไหวของอว�ยวะต&างๆ

ภาพเคลื่��อนิไหวแบบสามม�ต�ของใบหนิ�าคนิ

จากหนิ�าธีรืรืมดาเป็�นิย�0ม

การแคปเชัอร ภาพอะน�เมชั�นแลื่ะความต#อเน��องของภาพ (Captured Animation And Image Sequences)

17

การืเตรื!ยมภาพส�าหรื�บสรื�างอะนิ�เมชั�นิจะใชั�กลื่�องว�ด!โอ รื&วมก�บเทำคนิ�คการืสรื�างภาพอะนิ�เมชั�นิ โดยเก.บภาพอะนิ�เมชั�นิแต&ลื่ะเฟรืมลื่งบนิแผ&นิฟ=ลื่,มหรื�อว�ด!โอเทำป็ โดยใชั�ซัอฟต,แวรื,โป็รืแกรืมทำ�าหนิ�าทำ!�ด�งกลื่&าว เชั&นิ โป็รืแกรืม Premiere, AfterEffect, Jasc Animation Shop แลื่ะ Director ซั/�งสามารืถุเลื่�อกจ�ดเก.บภาพอะนิ�เมชั�นิในิแต&ลื่ะเฟรืม แลื่ะแสดงผลื่เพ��อตรืวจสอบความต&อเนิ��องของภาพได�ตามความต�องการื จากนิ�0นิจ/งจ�ดเก.บข�อม#ลื่แลื่ะลื่�าด�บการืแสดงผลื่เป็�นิภาพว�ด!โอแบบเอว!ไอ (*.AVI) ทำ!�ง&ายต&อการืใชั�งานิ

การืเก.บภาพอะนิ�เมชั�นิด�วยโป็รืแกรืม การืเก.บภาพอะนิ�เมชั�นิด�วยโป็รืแกรืม Jasc Animation Jasc Animation Shop 3.0Shop 3.0

18 การืสรื�างเป็�นิอะนิ�เมชั�นิเรื��องใหม&ด�วยโป็รืแกรืม การืสรื�างเป็�นิอะนิ�เมชั�นิเรื��องใหม&ด�วยโป็รืแกรืม Director 6.5Director 6.5

19

ส�าหรื�บการืสรื�างอะนิ�เมชั�นิโดยไม&อาศั�ยภาพจากกลื่�องด�จ�ตอลื่ ก.สามารืถุทำ�าได�โดยการืวาดภาพด�วยว�ธี!เซัลื่อะนิ�เมชั�นิ แลื่�วสแกนิภาพแต&ลื่ะเฟรืมทำ!�วาดผ&านิทำางเครื��องสแกนิเนิอรื, ซั/�งการืต�ดแต&งภาพแต&ลื่ะเฟรืมค&อนิข�างง&ายกว&าการืถุ&ายภาพนิ��งด�วยกลื่�องด�จ�ตอลื่ แลื่ะการืจ�ดเก.บข�อม#ลื่ก.สามารืถุจ�ดเก.บได�โดยตรืง ไม&ต�องถุ&ายข�อม#ลื่ภายหลื่�งเหม�อนิกลื่�องด�จ�ตอลื่ แต&ต�องใชั�เครื��องสแกนิเนิอรื,ทำ!�ม!ความลื่ะเอ!ยดส#ง เพ��อให�ได�ภาพทำ!�คมชั�ดแลื่ะสวยงาม

ร$ปแบบของไฟลื่ อะน�เมชั�น (Animation File Format)

20

GIF (Graphics Interlace File) ไฟลื่, GIF หรื�อ ก�ฟอะนิ�เมชั�นิ Gif Animation ได�รื�บความนิ�ยมมากเนิ��องจาก

ป็รืะหย�ดพ�0นิทำ!�ในิการืจ�ดเก.บ โดยจะจ�ดเก.บภาพนิ��งเป็�นิลื่�าด�บต&อเนิ��องก�นิ เหมาะก�บการืใชั�งานิบนิเว.บไซัต, ป็>จจ�บ�นิเว.บไซัต,ทำ� �วไป็สามารืถุแสดงผลื่ภาพก�ฟอะนิ�เมชั�นิได�ทำ� 0งส�0นิ

Gif89a พ�ฒนิาข/0นิในิป็: ค.ศั .1989 เป็�นิรื#ป็แบบหนิ/�งของก�ฟอะนิ�เมชั�นิ ม�กจะเรื!ยกก�นิว&า อะนิ�เมทำเทำดก�ฟ (Animated Gif)

ป็>จจ�บ�นิม!หลื่ายโป็รืแกรืมทำ!�สนิ�บสนิ�นิการืสรื�างก�ฟอะนิ�เมชั�นิ เชั&นิ โป็รืแกรืม Animagic Gif, Premiere แลื่ะ Flash ซั/�งสามารืถุจ�ดเก.บก�ฟอะนิ�เมชั�นิได�ทำ� 0งส�0นิ

มาตรืฐานิอะนิ�เมชั�นิทำ!�ผลื่�ตในิรื#ป็แบบของว�ด!โอ แลื่ะภาพยนิตรื,เอว!ไอ (AVI Movie) ได�รื�บความนิ�ยมเป็�นิอย&างมากในิป็>จจ�บ�นิ โดยสามารืถุแก�ไข ผสมผสานิก�บคลื่�@ป็อะนิ�เมชั�นิ (Animation Clip) อ��นิๆ เพ��มเต�มเทำคนิ�คพ�เศัษ แลื่ะเตรื!ยมเป็�นิทำรื�พยากรืส�าหรื�บใชั�งานิในิผลื่�ตภ�ณ์ฑ์,ม�ลื่ต�ม!เด!ยได� อย&างไรืก.ตามคลื่�@ป็อะนิ�เมชั�นิจะม!ลื่�กษณ์ะเฉพาะบางอย&างม!ผลื่ต&อการืใชั�งานิ โดยเฉพาะรื#ป็แบบของการืวาด ลื่�กษณ์ะรื#ป็รื&าง แลื่ะพ�0นิผ�วทำ!�รืาบเรื!ยบของภาพอะนิ�เมชั�นิอ!กทำ�0งย�งม!การืส#ญเส!ยของข�อม#ลื่นิ�อยกว&าไฟลื่,ว�ด!โอ ต�วอย&างเชั&นิ การืแป็ลื่งไฟลื่,แบบเอว!ไอเพ��อแสดงผลื่เป็�นิการื,ต#นิก�ฟอะนิ�เมชั�นิแลื่ะเพ��มเต�มเทำคนิ�คให�อะนิ�เมชั�นิแต&ลื่ะเฟรืมแลื่ด#ม!เงาแสงใกลื่�เค!ยงความจรื�งมากทำ!�ส�ด ด�วยความลื่ะเอ!ยด 256 ส! หลื่�งจากนิ�0นิก.นิ�าภาพแต&ลื่ะเฟรืมมาจ�ดลื่�าด�บการืแสดงผลื่ด�วยโป็รืแกรืม Animagic Gif แลื่ะจ�ดเก.บอะนิ�เมชั�นิในิรื#ป็แบบก�ฟอะนิ�เมชั�นิต&อไป็ พ�0นิทำ!�ทำ!�เก.บข�อม#ลื่ก�ฟอะนิ�เมชั�นิจะใชั�เพ!ยง 101. Mb เทำ&านิ�0นิ

21 ภาพเคลื่��อนิไหวทำ!�เป็�นิ ภาพเคลื่��อนิไหวทำ!�เป็�นิ Graphics Interface File Graphics Interface File โดยโดยโป็รืแกรืม โป็รืแกรืม Animagic GIFAnimagic GIF

ร$ปแบบของไฟลื่ อะน�เมชั�น (ต#อ)

22

JPG (Joint Photographer’s Experts Grop) เป็�นิไฟลื่,ภาพทำ!�ใชั�งานิบนิรืะบบเครื�อข&าย ม!โป็รืแกรืมสนิ�บสนิ�นิในิการืสรื�างจ�านิวนิมาก สามารืถุเรื!ยกด#ได�ก�บ

Graphics Browser ทำ�กต�ว ม�กใชั�ในิกรืณ์!ทำ!�ต�องการืนิ�าเสนิอภาพทำ!�ม!ความลื่ะเอ!ยดส#ง (สนิ�บสนิ�นิส!ถุ/ง 24 bit) ใชั�ก�บภาพถุ&ายทำ!�นิ�ามาสแกนิ ม!รืะบบแสดงผลื่ต�0งแต&ความลื่ะเอ!ยดนิ�อยๆ แลื่ะค&อยๆ ขยายไป็ส#&ความลื่ะเอ!ยดส#ง โดยผ#�ใชั�สามารืถุก�าหนิดค&าการืบ!บอ�ดไฟลื่,ได�ตามต�องการื (ค&าของการืบ!บอ�ดไฟลื่,อย#&รืะหว&าง - 110) ไฟลื่,ทำ!�ได�จ/งม!ขนิาดเลื่.ก แต&ก.ม!ข�อเส!ยค�อ ไม&สามารืถุทำ�าให�พ�0นิภาพโป็รื&งใสได� แลื่ะเม��อม!การืส&งภาพจาก Server ไป็แสดงผลื่ทำ!� Client จะทำ�าให�การืแสดงผลื่ภาพชั�ามาก เพรืาะต�องเส!ยเวลื่าในิกาคลื่ายไฟลื่, ด�งนิ�0นิการืเลื่�อกค&าการืบ!บอ�ดไฟลื่, ควรืก�าหนิดให�เหมาะสมก�บภาพแต&ลื่ะภาพ

ภาพทำ!�เป็�นิ ภาพทำ!�เป็�นิ Joint Photographer’s Experts GroupJoint Photographer’s Experts Group

ร$ปแบบของไฟลื่ อะน�เมชั�น (ต#อ)

23

PNG (Portable Network Graphics) เป็�นิไฟลื่,ทำ!�ทำ�าพ�0นิภาพให�โป็รื&งใสได� สนิ�บสนิ�นิส!ได�ตามค&า “True Color” (16 bit, 32 bit หรื�อ 64 bit) ม!

รืะบบแสดงผลื่ต�0งแต&ความลื่ะเอ!ยดนิ�อยๆ แลื่ะค&อยๆ ขยายไป็ส#&รืายลื่ะเอ!ยดทำ!�ม!ความคมชั�ดมากข/0นิ (Interlace) โดยผ#�ใชั�สามารืถุก�าหนิดค&าการืบ!บอ�ดไฟลื่,ได�ตามต�องการื ไฟลื่,ทำ!�ได�ม!ขนิาดเลื่.ก แต&หากก�าหนิดค&าการืบ!บไฟลื่,ไว�ส#ง ก.จะต�องใชั�เวลื่าในิการืคลื่ายไฟลื่,ส#งตามไป็ด�วย

โป็รืแกรืมสนิ�บสนิ�นิในิการืสรื�างม!นิ�อย ไม&สามารืถุเรื!ยกด#ก�บ Graphic Browser รื� &นิเก&าได� เป็�นิไฟลื่,ทำ!�สนิ�บสนิ�นิเฉพาะ IE 4 แลื่ะ Netscape

ภาพทำ!�เป็�นิภาพทำ!�เป็�นิ Portable Network GraphicsPortable Network Graphics

ซอฟต แวร ส'าหร�บเทคโนโลื่ยี�อะน�เมชั�นชั��อโปรแกรมชั��อโปรแกรม ค'าอธี�บายีค'าอธี�บายี

FlashPlayerFlashPlayer เป็�นิโป็รืแกรืมทำ!�สามารืถุสรื�างภาพม�ลื่ต�ม!เด!ยทำ!�ทำ�าให�เป็�นิโป็รืแกรืมทำ!�สามารืถุสรื�างภาพม�ลื่ต�ม!เด!ยทำ!�ทำ�าให� Browser Browser รื# �จ�กก�บไฟลื่,ได� สามารืถุใชั�งานิบนิ รื# �จ�กก�บไฟลื่,ได� สามารืถุใชั�งานิบนิ Opera Opera BrowserBrowser

FlashFlash โป็รืแกรืมส�าหรื�บสรื�างงานิทำางด�านิส��อทำ!�หลื่ากหลื่ายทำ�0งภาพแลื่ะโป็รืแกรืมส�าหรื�บสรื�างงานิทำางด�านิส��อทำ!�หลื่ากหลื่ายทำ�0งภาพแลื่ะเส!ยง เชั&นิ สรื�างภาพกรืาฟ=ก สรื�างงานิอะนิ�เมชั�นิ สรื�างภาพเคลื่��อนิไหวให�ก�บงานิ สรื�างงานิอ�นิเตอรื,แอCกเส!ยง เชั&นิ สรื�างภาพกรืาฟ=ก สรื�างงานิอะนิ�เมชั�นิ สรื�างภาพเคลื่��อนิไหวให�ก�บงานิ สรื�างงานิอ�นิเตอรื,แอCกทำ!ฟทำ!ฟ((Interactive) Interactive) ให�สามารืถุโต�ตอบได�ให�สามารืถุโต�ตอบได�

ShockwaveShockwave เป็�นิโป็รืแกรืมทำ!�สามารืถุแสดงกรืาฟ=ก ภาพเคลื่��อนิไหว เส!ยง รืวมทำ�0งสามารืถุโต�ตอบก�บผ#�ใชั�ได�เป็�นิโป็รืแกรืมทำ!�สามารืถุแสดงกรืาฟ=ก ภาพเคลื่��อนิไหว เส!ยง รืวมทำ�0งสามารืถุโต�ตอบก�บผ#�ใชั�ได�

Macromedia Macromedia DirectorDirector

เป็�นิโป็รืแกรืมทำ!�สามารืถุสรื�างไฟลื่,ข�อม#ลื่ส�าหรื�บเลื่&นิก�บป็ลื่�@กอ�นิได�เป็�นิโป็รืแกรืมทำ!�สามารืถุสรื�างไฟลื่,ข�อม#ลื่ส�าหรื�บเลื่&นิก�บป็ลื่�@กอ�นิได�

Macromedia FlashMacromedia Flash เป็�นิโป็รืแกรืมทำ!�ชั&วยในิการืสรื�างส��อม�ลื่ต�ม!เด!ย กรืาฟ=กส�าหรื�บงานิเว.บเป็�นิโป็รืแกรืมทำ!�ชั&วยในิการืสรื�างส��อม�ลื่ต�ม!เด!ย กรืาฟ=กส�าหรื�บงานิเว.บ

TrueSpaceTrueSpace โป็รืแกรืมสรื�างรื#ป็ทำรืง โป็รืแกรืมสรื�างรื#ป็ทำรืง 3 3 ม�ต� สามารืถุใชั�สรื�างรื#ป็มนิ�ษย, ใบหนิ�า อารืมณ์,ต&างๆ แลื่ะการืวดรื#ป็ทำรืงม�ต� สามารืถุใชั�สรื�างรื#ป็มนิ�ษย, ใบหนิ�า อารืมณ์,ต&างๆ แลื่ะการืวดรื#ป็ทำรืงเรืขาคณ์�ตได�เรืขาคณ์�ตได�

Easy Gif AnimatorEasy Gif Animator โป็รืแกรืมชั&วยทำ�าภาพ โป็รืแกรืมชั&วยทำ�าภาพ Gif Animation Gif Animation สามารืถุฟรื!ว�วภาพต�วอย&าง แลื่ะสามารืถุก�าหนิดรืายลื่ะเอ!ยดของสามารืถุฟรื!ว�วภาพต�วอย&าง แลื่ะสามารืถุก�าหนิดรืายลื่ะเอ!ยดของภาพในิแต&ลื่ะเฟรืมได�ภาพในิแต&ลื่ะเฟรืมได�

Cad4Cad4 โป็รืแกรืมส�าหรื�บงานิออกแบบภายในิ เชั&นิ อาคารื บ�านิเรื�อนิ โรืงงานิ เป็�นิต�นิโป็รืแกรืมส�าหรื�บงานิออกแบบภายในิ เชั&นิ อาคารื บ�านิเรื�อนิ โรืงงานิ เป็�นิต�นิ

3D Browser Light3D Browser Light โป็รืแกรืมชั&วยในิการืทำ�างานิก�บไฟลื่,ภาพ โป็รืแกรืมชั&วยในิการืทำ�างานิก�บไฟลื่,ภาพ 2 2 ม�ต� แลื่ะ ม�ต� แลื่ะ 3 3 ม�ต�ม�ต�

20-Sim Pro 20-Sim Pro ViewerViewer

โป็รืแกรืมสรื�างภาพเสม�อนิแลื่ะจ�าลื่องรืะบบการืทำ�างานิต&างๆ ด�านิว�ศัวกรืรืมโป็รืแกรืมสรื�างภาพเสม�อนิแลื่ะจ�าลื่องรืะบบการืทำ�างานิต&างๆ ด�านิว�ศัวกรืรืม

Mosaic MagicMosaic Magic โป็รืแกรืมสรื�างภาพโมเสก สามารืถุเลื่�อกใชั�โป็รืแกรืมสรื�างภาพโมเสก สามารืถุเลื่�อกใชั�

Font FXFont FX เป็�นิโป็รืแกรืมส�าหรื�บสรื�างภาพอะนิ�เมชั�นิเป็�นิโป็รืแกรืมส�าหรื�บสรื�างภาพอะนิ�เมชั�นิ24

ซอฟต แวร ส'าหร�บเทคโนโลื่ยี�อะน�เมชั�น(ต#อ)ชั��อโปรแกรมชั��อโปรแกรม ค'าอธี�บายีค'าอธี�บายี

SWISHSWISH โป็รืแกรืมสรื�างเว.บเพจในิรื#ป็แบบอ�นิเตอรื,แอCกทำ!ฟ โป็รืแกรืมสรื�างเว.บเพจในิรื#ป็แบบอ�นิเตอรื,แอCกทำ!ฟ ((Interactive) Interactive) เชั&นิเด!ยวก�บเชั&นิเด!ยวก�บ FlashFlash

Flying Pop Corn Flying Pop Corn 20012001

โป็รืแกรืมสรื�างภาพเคลื่��อนิไหว ม!เครื��องม�อทำ!�เหมาะแก&การืใชั�งานิโป็รืแกรืมสรื�างภาพเคลื่��อนิไหว ม!เครื��องม�อทำ!�เหมาะแก&การืใชั�งานิ

3D Canvas3D Canvas เป็�นิโป็รืแกรืมสรื�างภาพ เป็�นิโป็รืแกรืมสรื�างภาพ 3 3 ม�ต� แบบเรื!ยลื่ไทำม,ม�ต� แบบเรื!ยลื่ไทำม,

MohoMoho โป็รืแกรืมสรื�างการื,ต#นิหรื�ออะนิ�เมชั�นิในิรื#ป็แบบ โป็รืแกรืมสรื�างการื,ต#นิหรื�ออะนิ�เมชั�นิในิรื#ป็แบบ 2 2 ม�ต�ม�ต�

CADMAX Solid CADMAX Solid MasterMaster

โป็รืแกรืมออกแบบจ�าลื่องทำ�0ง โป็รืแกรืมออกแบบจ�าลื่องทำ�0ง 2 2 ม�ต� แลื่ะ ม�ต� แลื่ะ 3 3 ม�ต�ม�ต�

SendPicSendPic เป็�นิโป็รืแกรืมส�าหรื�บด�ดแป็ลื่งค�ณ์ลื่�กษณ์ะต&างๆ ของรื#ป็ภาพเป็�นิโป็รืแกรืมส�าหรื�บด�ดแป็ลื่งค�ณ์ลื่�กษณ์ะต&างๆ ของรื#ป็ภาพ

Famous3dproduceFamous3dproducerr

โป็รืแกรืมส�าหรื�บการืสรื�างภาพอะนิ�เมชั�นิแบบเหม�อนิจรื�งโป็รืแกรืมส�าหรื�บการืสรื�างภาพอะนิ�เมชั�นิแบบเหม�อนิจรื�ง

Xara XXara X เป็�นิโป็รืแกรืมทำ!�สามารืสรื�างเป็�นิโป็รืแกรืมทำ!�สามารืสรื�าง Vector Graphic Vector Graphic ได�ได�

CoffeeCup CoffeeCup FirestarterFirestarter

เป็�นิโป็รืแกรืมทำ!�ส�าหรื�บสรื�างเป็�นิโป็รืแกรืมทำ!�ส�าหรื�บสรื�าง Flash AnimationFlash Animation

3D Explortion3D Explortion โป็รืแกรืมส�าหรื�บสรื�างภาพ โป็รืแกรืมส�าหรื�บสรื�างภาพ 3 3 ม�ต�ม�ต�

Adobe AtmosphereAdobe Atmosphere โป็รืแกรืมออกแบบภาพกรืาฟ=กแบบ โป็รืแกรืมออกแบบภาพกรืาฟ=กแบบ 3 3 ม�ต�ม�ต�

Design CADDesign CAD เป็�นิโป็รืแกรืมออกแบบส��งพ�มพ,แลื่ะงานิม�ลื่ต�ม!เด!ยต&างๆ ป็รืะเภทำ เป็�นิโป็รืแกรืมออกแบบส��งพ�มพ,แลื่ะงานิม�ลื่ต�ม!เด!ยต&างๆ ป็รืะเภทำ Cad/CamCad/Cam

BabarosaBabarosa โป็รืแกรืมชั&วยส�าหรื�บการืสรื�างภาพ โป็รืแกรืมชั&วยส�าหรื�บการืสรื�างภาพ Gif Animation Gif Animation หรื�อทำ�าแบนิเนิอรื,บนิเว.บหรื�อทำ�าแบนิเนิอรื,บนิเว.บ

25

อะน�เมชั�นบนระบบเคร�อข#ายี

26

การืใชั�ภาพอะนิ�เมชั�นิบนิรืะบบเครื�อข&าย สามารืถุชั&วยสรื�ป็ความค�ด จ�นิตนิาการืมาเป็�นิข�อม#ลื่ทำ!�ส��อสารืได�ง&าย สรื�างรืะบบการืถุ&ายทำอดทำ!�ม!ความเด&นิชั�ด แป็ลื่ความหมายได�อย&างรืวดเรื.ว สรื�างรืะบบการืเรื!ยนิรื# � แนิวค�ดใหม&ๆ ค&านิ�ยมทำางความค�ดทำ!�งดงาม ความเจรื�ญก�าวหนิ�าทำางธี�รืก�จแลื่ะส�งคม จะชั&วยด/งด#ดความสนิใจจากผ#�เข�าชัมได�โดยการืนิ�ามาภาพอะนิ�เมชั�นิเข�าไป็ในิเว.บเพจ แต&ต�องรืะว�งเรื��องขนิาดของไฟลื่,ทำ!�จะนิ�ามาใชั� เนิ��องจากหากเป็�นิภาพทำ!�ม!ขนิาดใหญ&จะต�องใชั�พ�0นิทำ!�ในิการืจ�ดเก.บเป็�นิจ�านิวนิมาก แลื่ะจะทำ�าให�ใชั�เวลื่าในิการืดาวนิ,โหลื่ดภาพอะนิ�เมชั�นินิานิเก�นิไป็

ส��งส�าค�ญทำ!�ตามมาก.ค�อ เทำคโนิโลื่ย!การืบ!บอ�ดข�อม#ลื่ ซั/�งการืบ!บอ�ดทำ�าให�สามารืถุรื�บส&งข�อม#ลื่ได�รืวดเรื.วข/0นิ แลื่ะใชั�พ�0นิทำ!�ในิการืจ�ดเก.บไฟลื่,นิ�อยลื่ง โดยไฟลื่,ทำ!�นิ�ยมใชั�บนิรืะบบเครื�อข&าย ค�อ GIF Animation, JPG แลื่ะ PNG

อาชั�พท��เก��ยีวข�องก�บงานอะน�เมชั�น

27

งานิภาพยนิตรื,แลื่ะโทำรืทำ�ศันิ, เป็�นิการืทำ!�นิ�างานิอะนิ�เมชั�นิไป็ใชั�มากทำ!�ส�ด เชั&นิ ภาพยนิตรื,ทำ!�ใชั� Computer Graphic หรื�อการืใส& Special Effect ต&างๆ ลื่งในิภาพยนิตรื,

การืสรื�างภาพเคลื่��อนิไหวของภาพยนิตรื,โดยใชั�โป็รืแกรืมมายา การืสรื�างภาพเคลื่��อนิไหวของภาพยนิตรื,โดยใชั�โป็รืแกรืมมายา ((MayaMaya))

อาชั�พท��เก��ยีวข�องก�บงานอะน�เมชั�น (ต#อ)

28

งานิพ�ฒนิาเกมส, ในิป็>จจ�บ�นิจะเห.นิว&าเกมส,คอมพ�วเตอรื,ส&วนิมากจะเป็�นิเกมส, 3 ม�ต� ด�งนิ�0นิงานิด�านินิ!0ก.ถุ�อว&าเป็�นิงานิทำ!�ม!ความนิ&าสนิใจด�านิหนิ/�ง

การืพ�ฒนิาเกมภาพเคลื่��อนิไหวการืพ�ฒนิาเกมภาพเคลื่��อนิไหว โดยใชั�โป็รืแกรืม โดยใชั�โป็รืแกรืม CrossfireCrossfire

อาชั�พท��เก��ยีวข�องก�บงานอะน�เมชั�น (ต#อ)

29

งานิสถุาป็>ตยกรืรืมแลื่ะการืก&อสรื�าง จะม!ความสะดวกมากข�นิหากใชั�อะนิ�เมชั�นิมาชั&วย เนิ��องจากงานิออกแบบเป็�นิงานิทำ!�ต�องการืความลื่ะเอ!ยดแลื่ะม!ความซั�บซั�อนิมาก เชั&นิ งานิเข!ยนิแบบอาคารื งานิตกแต&งภายในิ เป็�นิต�นิ

การืสรื�างภาพเคลื่��อนิไหวในิงานิสถุาป็>ตยกรืรืมแลื่ะการืก&อสรื�างการืสรื�างภาพเคลื่��อนิไหวในิงานิสถุาป็>ตยกรืรืมแลื่ะการืก&อสรื�าง โดยใชั�โดยใชั�โป็รืแกรืม โป็รืแกรืม AutuCADAutuCAD

อาชั�พท��เก��ยีวข�องก�บงานอะน�เมชั�น (ต#อ)

30

งานิด�านิว�ทำยาศัาสตรื, ป็>จจ�บ�นิงานิด�านิว�ทำยาศัาสตรื,ได�ม!ความก�าวหนิ�าไป็มาก ด�งนิ�0นิเครื��องม�อแบบเก&าจ/งไม&สามารืถุรืองรื�บการืค�นิคว�าความรื# �ใหม&ๆ ได� เชั&นิการืสรื�างโมเดลื่จ�าลื่องเพ��อให�เป็�นิภาพต&างๆ ทำ!�เก�ดจากการืสมมต�ฐานิ

การืสรื�างภาพเคลื่��อนิไหวในิงานิด�านิว�ทำยาศัาสตรื,โดยใชั�การืสรื�างภาพเคลื่��อนิไหวในิงานิด�านิว�ทำยาศัาสตรื,โดยใชั�โป็รืแกรืม โป็รืแกรืม 33 D-DoctorD-Doctor

อาชั�พท��เก��ยีวข�องก�บงานอะน�เมชั�น (ต#อ)

31

งานิพ�ฒนิาเว.บไซัต, เป็�นิอ!กทำางเลื่�อกหนิ/�งจากการืใชั�งานิ 3 ม�ต�บนิเว.บไซัต,สามารืถุใชั�ด/งด#ดความสนิใจให�ม!ผ#�เข�ามาชัมเว.บไซัต,ได�เป็�นิจ�านิวนิมาก

การืใชั�โป็รืแกรืมมาโครืม!เด!ยแฟลื่ชัทำ�าภาพเคลื่��อนิไหวสามม�ต�การืใชั�โป็รืแกรืมมาโครืม!เด!ยแฟลื่ชัทำ�าภาพเคลื่��อนิไหวสามม�ต�บนิเว.บไซัต,บนิเว.บไซัต,