ใบความรู้ที่ 4 เรื่อง การสร้างการเคลื่อนไหว

ใบความรู้�ที่�� 4 เรู้��อง การู้สรู้างการู้เคลื่��อนไหว

Animation [ สรู้างผลื่งานแอน�เมชั่��น ]

ภาพเคลื่��อนไหวแบบเฟรู้มต่!อเฟรู้ม (Frame by

Frame)

การสร�างภาพเคลื่� อนไหวแบบเฟรมต่�อเฟรมเป็�นการน�าเอาออบเจ็�กต่�แต่�ลื่ะชิ้!"นมาเร#ยงต่�อก%น โดยอาจ็ม#การป็ร%บแต่�งร)ป็ร�างหร�อค*ณสมบ%ต่!ให�เป็ลื่# ยนแป็ลื่งไป็จ็ากออบเจ็�กต่�ที่# อย)�ก�อนหน�า แลื่ะม#การแสดงอย�างต่�อเน� องก�จ็ะป็รากฏเป็�นภาพเคลื่� อนไหวขึ้0"นมา

1) เร! มสร�างภาพเคลื่� อนไหวแบบเฟรมต่�อเฟรม

เร! มแรกจ็ะต่�องสร�างออบเจ็�กต่�ขึ้0"นมาก�อน จ็ากน%"นจ็0งสร�างค#ย�เฟรมพร�อมที่%"งแก�ไขึ้เน�"อหาต่�างๆ ขึ้องออบเจ็�กต่�เด!ม ด%งต่%วอย�าง

1. คลื่!กค#ย�เฟรมแรกขึ้องภาพเคลื่� อนไหว2. สร�างออบเจ็�กต่�หร�อองค�ป็ระกอบต่�างๆ ที่# ต่�องการให�ป็รากฏเป็�นภาพ

เคลื่� อนไหว

เอกสารป็ระกอบการจ็%ดการเร#ยนร) �ว!ชิ้า ม%ลื่ต่!ม#เด#ย ม.6 โรงเร#ยนศร#สว%สด!3ว!ที่ยาคารจ็%งหว%ดน�าน หน�า 1

น%กเร#ยนที่ราบไหมคร%บว�าการสร�างการเคลื่� อนไหวม#

3. คลื่!กเมาส�ขึ้วาที่# ชิ้�องเฟรมแลื่ะเลื่�อกค�าส% ง Insert Keyframe หร�อกดป็*4ม F6 จ็ากน%"นจ็ะป็รากฏค#ย�เฟรมใหม�พร�อมก%บออบเจ็�กต่�ที่# อย)�ในค#ย�เฟรมที่างด�านหน�าขึ้0"นมา

4. ป็ร%บแต่�งออบเจ็�กต่�หร�อคลื่!กป็*4ม จ็าก Properties

5. ด%บเบ!ลื่คลื่!กซิ!มโบลื่ใหม�ที่# ต่�องการน�ามาเป็�นภาพเคลื่� อนไหว


6. คลื่!กเมาส�ขึ้วาที่# ชิ้�องเฟรมส*ดที่�ายแลื่ะเลื่�อกค�าส% ง Insert Frame

หร�อกดป็*4ม F5 เพ� อแสดงภาพเคลื่� อนไหวในค#ย�เฟรมที่# 2 ให�นานขึ้0"น

ต่%วอย�างภาพเคลื่� อนไหวแบบเฟรมต่�อเฟรม

2) ป็ร%บแต่�งภาพเคลื่� อนไหวแบบเฟรมต่�อเฟรม

การป็ร%บแต่�งภาพเคลื่� อนไหวแบบเฟรมต่�อเฟรมสามารถที่�าได�เพ#ยงคลื่!กป็*4ม Edit Multiple Frames จ็ากน%"นจ็0งลื่าก Maker ให�ครอบคลื่*มเพ� อให�เห�นออบเจ็�กต่�ที่# อย)�ในเฟรมที่%"งหมด แลื่ะเม� อแก�ไขึ้ใดๆ ก�จ็ะส�งผลื่ต่�อออบเจ็�กต่�ที่# น�ามาเป็�นผลื่งานแอน!เมชิ้% นที่%นที่#


1. คลื่!กป็*4ม Edit Multiple Frames ที่างด�านลื่�างขึ้องไที่ม�ไลื่น� จ็ากน%"นป็รากฏ Marker ที่# ใชิ้�บอกขึ้อบเขึ้ต่การแสดงเน�"อหาขึ้องเฟรมอ� นขึ้0"นมา

2. ลื่ากเมาส�ป็ร%บ Marker ให�ครอบคลื่*มเฟรมที่%"งหมดที่# ต่�องการป็ร%บแต่�งแก�ไขึ้

3. คลื่!กไอคอนหร�อชิ้� อขึ้องเลื่เยอร�เพ� อเลื่�อกออบเจ็�กต่�ที่%"งหมดที่# อย)�ในเลื่เยอร�

4. ป็ร%บแต่�งแก�ไขึ้ออบเจ็�กต่� ได�ต่ามต่�องการ

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

เป็�นการก�าหนดให�ออบเจ็�กต่�ม#การเคลื่� อนไหวเป็ลื่# ยนต่�าแหน�งหร�อเป็ลื่# ยนค*ณสมบ%ต่!แบบแน�นอนโดยไม�เก# ยวก%บการเป็ลื่# ยนแป็ลื่งขึ้องร)ป็ร�าง ซิ0 งจ็ะต่�องสร�างค#ย�เฟรมเร! มต่�นแลื่ะส!"นส*ด จ็ากน%"นจ็0งป็ร%บแต่�งแลื่ะก�าหนดให�เป็�น Motion Tween ก�จ็ะป็รากฏภาพเคลื่� อนไหวขึ้0"นมา

1) เร! มสร�างภาพเคลื่� อนไหวแบบเคลื่� อนที่#

ออบเจ็�กต่�ที่# น�ามาสร�างภาพเคลื่� อนไหวแบบเคลื่� อนที่# เป็�นได�ที่%"ง Object Drawing ขึ้�อความ ซิ!มโบลื่ ออบเจ็�กต่�ที่# ถ)กรวมกลื่*�ม ยกเว�น Merge Drawing




3. คลื่!กเมาส�ขึ้วาที่# ชิ้�องเฟรมส*ดที่�ายแลื่ะเลื่�อกค�าส% ง Insert

Keyframe หร�อกดป็*4ม F6 จ็ากน%"นจ็ะป็รากฏค#ย�เฟรมใหม�พร�อมก%บออบเจ็�กต่�ที่# อย)�ในค#ย�เฟรมที่างด�านหน�าขึ้0"นมา

4. ป็ร%บแต่�งแก�ไขึ้ออบเจ็�กต่� ได�ต่ามต่�องการ


5. คลื่!กค#ย�เฟรมแรกหร�อเฟรมระหว�างกลื่าง6. ที่# Properties ในส�วนขึ้อง Tween ให�คลื่!กเลื่�อก Motion จ็ากน%"น

ป็รากฏลื่)กศรแสดงการสร�างแอน!เมชิ้% นขึ้0"นมา

2) ป็ร%บแต่�งภาพเคลื่� อนไหวแบบเคลื่� อนที่#

ภายหลื่%งจ็ากการสร�างภาพเคลื่� อนไหวแบบเคลื่� อนที่# เร#ยบร�อยแลื่�ว ก�สามารถป็ร%บแต่�งร)ป็แบบในการเคลื่� อนไหว เชิ้�น ให�ม#การป็ร%บขึ้นาด ให�หม*น เป็ลื่# ยนระด%บความเร�ว ในการเคลื่� อนที่# ฯลื่ฯ ได� โดยหากคลื่!กป็*4ม Onion

Skin ที่างด�านลื่�างขึ้องไที่ม�ไลื่น� ก�จ็ะป็รากฏเน�"อหาในเฟรมอ� นๆ ขึ้0"นมาด�วย

1. คลื่!กเลื่�อกค#ย�เฟรมหร�อเฟรมระหว�างกลื่างที่# ใชิ้�แสดงภาพเคลื่� อนไหว


2. ที่# Properties ให�เลื่�อกป็ร%บแต่�งร)ป็แบบการเคลื่� อนไหว โดยม#รายลื่ะเอ#ยดด%งน#" Tween ชิ้น!ดการเคลื่� อนไหว โดยม# None ยกเลื่!กการ

เคลื่� อนไหว, Motion สร�างภาพเคลื่� อนไหวแบบเคลื่� อนที่# , Shape สร�างภาพเคลื่� อนไหวแบบเป็ลื่# ยนร)ป็ร�าง

Scale เม� อออบเจ็�กต่�แรกในค#ย�เฟรมแรกแลื่ะค#ย�เฟรมส*ดที่�ายม#ขึ้นาดไม�เที่�าก%น ให�ป็ร%บขึ้นาดออบเจ็�กต่�ในเฟรมต่�างๆ โดยอ%ต่โนม%ต่!

Ease ระด%บความเร�วในการเคลื่� อนที่# โดยค�าลื่บ เป็�นการเคลื่� อนที่# จ็ากชิ้�าไป็เร�ว หร�อค�าบวก เป็�นการเคลื่� อนที่# จ็ากเร�วไป็ชิ้�า ส�วน 0

เป็�นค�าป็กต่! ที่# ม#ระด%บความเร�วในการเคลื่� อนที่# เที่�าก%นต่ลื่อด ป็*4ม Edit เม� อคลื่!กป็*4ม [edit] จ็ะป็รากฏไดอะลื่�อกบ�อกซิ�

Custom Ease In / Ease Out ที่# ใชิ้�ป็ร%บระด%บความเร�วในการเคลื่� อนที่# ให�แต่กต่�างก%น ซิ0 งสามารถที่�าได�เพ#ยงคลื่!กเฟรมที่# ต่�องการ จ็ากน%"นจ็0งลื่ากเมาส�ป็ร%บจ็*ดแองเคอร� โดยหากเส�นม#ความชิ้%นก�จ็ะที่�าให�การเคลื่� อนไหวเร�ว

Rotate นอกจ็ากการหม*นด�วยป็*4ม Free Transform แลื่�ว ย%งสามารถก�าหนดให�ออบเจ็�กต่�หม*นไป็ในระหว�างการเคลื่� อนที่# ได�ด�วย โดย None ค�อไม�หม*น, Auto หม*นไป็ต่ามการเป็ลื่# ยนแป็ลื่งขึ้องออบเจ็�กต่�ในค#ย�เฟรมส*ดที่�าย, CW หม*นต่ามเขึ้�มนาฬิ!กา, CCW

หม*นที่วนเขึ้�มนาฬิ!กา โดยก�าหนดจ็�านวนรอบลื่งในชิ้�อง times

ภาพเคลื่��อนไหวต่ามเสนไกด์# (Motion Guide)


ในกรณ#ที่# สร�างภาพเคลื่� อนไหวแบบ Motion Tween ไว�ออบเจ็�กต่�จ็ะเคลื่� อนที่# ในลื่%กษณะเป็�นแนวเส�นต่รง ซิ0 งหากต่�องการก�าหนดเส�นที่างในการเคลื่� อนที่# ให�ม#ร)ป็แบบอ� นๆ เชิ้�น เส�นโค�ง เส�นหย%ก เส�นวงกลื่ม ฯลื่ฯ ก�สามารถสร�างเส�นน�าที่างขึ้0"นมาใชิ้�ก�าก%บการเคลื่� อนที่# ขึ้องออบเจ็�กต่�ได�

1) เร! มสร�างภาพเคลื่� อนไหวต่ามเส�นไกด�

หากก�าหนดให�ออบเจ็�กต่�ม#การเคลื่� อนไหวแบบเคลื่� อนที่# (Motion

Tween) เร#ยบร�อยแลื่�ว ก�สามารถสร�างเส�นไกด�จ็ากป็*4มเคร� องม�อ Pen,

Pencil, Line ฯลื่ฯ ไว�ภายในเลื่เยอร� Motion Guide ได� ด%งน#"

1. สร�างแลื่ะคลื่!กเลื่เยอร�ที่# ก�าหนดให�เป็�นภาพเคลื่� อนไหวแบบเคลื่� อนที่# (Motion Tween) ไว�

2. คลื่!กป็*4ม Add Motion Guide จ็ากน%"นเลื่เยอร�ที่# เลื่�อกจ็ะไป็อย)�ภายใต่�เลื่เยอร� Motion Guide ที่# สร�างขึ้0"นมาใหม�

3. วาดร)ป็ที่รงที่# ใชิ้�เป็�นเส�นที่างในการเคลื่� อนที่# ลื่งในเลื่เยอร� Motion Guide

4. คลื่!กค#ย�เฟรมแรกขึ้องภาพเคลื่� อนไหว5. เคลื่� อนย�ายให�จ็*ดศ)นย�กลื่างขึ้องออบเจ็�กต่�ไป็ย0ดต่!ดก%บต่�าแหน�งเร! ม

ต่�นขึ้องเส�น


6. คลื่!กค#ย�เฟรมส*ดที่�ายขึ้องภาพเคลื่� อนไหว

7. เคลื่� อนย�ายให�จ็*ดศ)นย�กลื่างขึ้องออบเจ็�กต่�ไป็ย0ดต่!ดก%บป็ลื่ายเส�น2) ป็ร%บแต่�งภาพเคลื่� อนไหวต่ามเส�นไกด�

การวาดภาพเคลื่� อนไหวต่ามเส�นไกด�สามารถป็ร%บแต่�งร)ป็แบบในการเคลื่� อนไหว เชิ้�นเด#ยวก%บ Motion Tween แต่�จ็ะม#ค�าค*ณสมบ%ต่!อ� นๆ เพ! ม ด%งน#"

1. คลื่!กค#ย�เฟรมหร�อเฟรมระหว�างกลื่างที่# ใชิ้�แสดงภาพเคลื่� อนไหว


2. ที่# Properties ให�เลื่�อกป็ร%บแต่�งร)ป็แบบการเคลื่� อนที่# บนเส�นไกด� โดยม#รายลื่ะเอ#ยดด%งน#"

Orient to Path ให�ออบเจ็�กต่�เคลื่� อนที่# หม*นเอ#ยงไป็ต่ามความโค�งขึ้องเส�นไกด�

Sync หากภาพเคลื่� อนไหวเป็�นกราฟ;กซิ!มโบลื่ ให�ป็ร%บการเคลื่� อนไหวให�สอดคลื่�องก%บไที่ม�ไลื่น�หลื่%ก

Snap ย0ดต่!ดออบเจ็�กต่�เขึ้�าก%บเส�นไกด�โดยอ%ต่โนม%ต่!

ภาพเคลื่��อนไหวแบบเปลื่��ยนรู้�ปที่รู้ง (Shape Tween)

เม� อต่�องการให�ม#การเป็ลื่# ยนแป็ลื่งร)ป็ที่รงขึ้องออบเจ็�กต่�จ็ากภาพน! งภาพหน0 งไป็เป็�นอ#กภาพหน0 ง สามารถที่�าได�ด�วย Shape Tween โดยโป็รแกรมจ็ะสร�างการเป็ลื่# ยนแป็ลื่งระหว�างเฟรมต่�างๆ ให�โดยอ%ต่โนม%ต่!

1) เร! มสร�างภาพเคลื่� อนไหวแบบเป็ลื่# ยนร)ป็ที่รง

การสร�างภาพเคลื่� อนไหวแบบเป็ลื่# ยนร)ป็ที่รงจ็ะต่�องใชิ้�ออบเจ็�กต่�แบบ Merge Drawing หร�อ Object Drawing ซิ0 งหากเป็�นอ!นสแต่นซิ� ขึ้�อความ หร�อออบเจ็�กต่�ที่# รวมกลื่*�ม ก�จ็ะต่�องแยกส�วน (Break Apart)

ก�อน






4. เป็ลื่# ยนร)ป็ที่รงหร�อป็ร%บแต่�งแก�ไขึ้ออบเจ็�กต่� ได�ต่ามต่�องการ

5. คลื่!กค#ย�เฟรมแรกหร�อเฟรมระหว�างกลื่าง6. ที่# Properties ในส�วนขึ้อง Tween ให�คลื่!กเลื่�อก Shape จ็ากน%"น

ป็รากฏลื่)กศรแสดงการสร�างแอน!เมชิ้% นขึ้0"นมา


ร)ป็จ็รวดจ็ะค�อยๆ เป็ลื่# ยนกลื่ายเป็�นเป็<า

2) ป็ร%บแต่�งภาพเคลื่� อนไหวแบบเป็ลื่# ยนร)ป็ที่รง

เม� อสร�างภาพเคลื่� อนไหวแบบ Shape Tween เร#ยบร�อยแลื่�ว ก�สามารถเป็ลื่# ยนระด%บความเร�วในการเคลื่� อนไหวได�เชิ้�นเด#ยวก%บ Motion

Tween แต่�ส�าหร%บร)ป็ที่รงที่# ม#ความซิ%บซิ�อนก�สามารถสร�าง Shape Hint

เพ� อก�าหนดเป็�นต่�าแหน�งที่# ใชิ้�ในการเป็ลื่# ยนแป็ลื่งร)ป็ที่รงขึ้องออบเจ็�กต่�ต่�นที่างแลื่ะป็ลื่ายที่างได� ด%งน#"

1. คลื่!กค#ย�เฟรมแรกแลื่ะคลื่!กเมน) Modify > Shape > Add

Shape Hint หร�อกดป็*4ม Ctrl + Shift + H จ็ากน%"นจ็ะป็รากฏ Shape Hunt ส#แดงที่# เป็�นต่%วอ%กษร a-z ขึ้0"นมา

2. ลื่ากเมาส�น�า Shape Hint มาวางย%งเส�นขึ้อบขึ้องออบเจ็�กต่�ต่�นที่าง3. คลื่!กค#ย�เฟรมส*ดที่�าย4. เมาส�น�า Shape Hint มาวางย%งเส�นขึ้อบขึ้องออบเจ็�กต่�ป็ลื่ายที่าง

โดยให�เที่#ยบก%บต่�าแหน�งที่# ได�วางไว�ในออบเจ็�กต่�ต่�นที่าง จ็ากน%"นให�ด�าเน!นการซิ�"าในขึ้%"นต่อนที่# 1-5 โดยเร#ยงจ็ากม*มบนซิ�ายวนไป็แบบ


ที่วนเขึ้�มนาฬิ!กา แลื่ะเม� อเร#ยงเร#ยบร�อยแลื่�ว Shape Hint ต่�าแหน�งต่�นที่างจ็ะเป็�นส#เหลื่�อง ส�วนป็ลื่ายที่างจ็ะเป็�นส#เขึ้#ยว

ภาพเคลื่��อนไหวแบบบ�งภาพ (Mask Layer)

เป็�นการก�าหนดให�แสดงออบเจ็�กต่�ภายในร)ป็ที่รงที่# สร�างไว� เหม�อนก%บการส�องไฟไป็ที่# ต่%วลื่ะครในลื่%กษณะเป็�นสป็อต่ไลื่ต่� โดยสามารถก�าหนดให�เป็�นภาพน! งหร�อภาพเคลื่� อนไหวก�ได�

1) เร! มสร�างภาพเคลื่� อนไหวแบบบ%งภาพ

ในการสร�างภาพเคลื่� อนไหวแบบบ%งภาพจ็ะต่�องสร�างร)ป็ที่รงไว�ในเลื่เยอร�ที่างด�านบนก�อน จ็ากน%"นสามารถก�าหนดการเคลื่� อนไหวในร)ป็แบบต่�างๆ ก�จ็ะป็รากฏเป็�นภาพเคลื่� อนไหวแบบบ%งภาพขึ้0"นมา

1. คลื่!กค#ย�เฟรมแรกขึ้องภาพเคลื่� อนไหว2. วาดร)ป็ที่รงที่# ใชิ้�ในการบ%งภาพ โดยอาจ็เป็�นขึ้�อความหร�อร)ป็ที่รงใดๆ

ก�ได�




4. ป็ร%บแต่�งแก�ไขึ้ร)ป็ที่รง ได�ต่ามต่�องการ

5. คลื่!กค#ย�เฟรมแรกหร�อเฟรมระหว�างกลื่าง6. ที่# Properties ในส�วนขึ้อง Tween ให�คลื่!กเลื่�อก Shape หร�อ

Motion แลื่ะก�าหนดค�าค*ณสมบ%ต่!ต่�างๆ


7. คลื่!กเมาส�ขึ้วาบนเลื่เยอร�เลื่�อกค�าส% ง Mask จ็ากน%"นเลื่เยอร�ที่างด�านลื่�างจ็ะถ)กแสดงผลื่ต่ามร)ป็ที่รงที่# สร�างไว�ในเลื่เยอร� Mask โดยโป็รแกรมจ็ะลื่�อคพร�อมที่%"งเป็ลื่# ยนร)ป็แบบขึ้องไอคอนหน�าเลื่เยอร�ให�โดยอ%ต่โนม%ต่!

2) ป็ร%บแต่�งภาพเคลื่� อนไหวแบบบ%งภาพ

เม� อสร�างภาพเคลื่� อนไหวแบบบ%งภาพโป็รแกรมจ็ะลื่�อคเลื่เยอร�ที่%"งหมดให�โดยอ%ต่โนม%ต่! ซิ0 งหากต่�องการป็ร%บแต่�งแก�ไขึ้ ก�จ็ะต่�องยกเลื่!กการลื่�อคก�อน

1. คลื่!ก บนเลื่เยอร� Mask เพ� อยกเลื่!กการลื่�อคแลื่ะการบ%งภาพ2. ด%บเบ!ลื่คลื่!กร)ป็ที่รงที่# ต่�องการป็ร%บแต่�งแก�ไขึ้3. ป็ร%บแต่�งแก�ไขึ้รายลื่ะเอ#ยดต่�างๆ ขึ้องร)ป็ที่รง4. คลื่!กชิ้� อซิ#นหร�อคลื่!กป็*4ม เพ� อกลื่%บส)�ม)ฟว# หลื่%ก5. คลื่!ก ในคอลื่%มน� ขึ้องเลื่เยอร� Mask จ็ากน%"นร*ป็ที่รงที่# ใชิ้�ในการบ%ง

ภาพจ็ะม#ลื่%ษณะเป็ลื่# ยนแป็ลื่งไป็



Education

ใบความรู้ที่ 4 เรื่อง การสร้างการเคลื่อนไหว