บทเรียนนี้กล่าวถึงพื้นฐานการสร้างภาพเคลื่อนไหว
โดยกำหนดเป้าหมายและระบุขั้นตอนการปฏิบัติงาน สามารถใช้ประกอบการบรรยายและการปฏิบัติ เพื่อให้เกิดความเข้าใจ
เป้าหมายแรกกล่าวถึงรูปแบบพื้นฐานของภาพเคลื่อนไหวแต่ละรูปแบบที่แตกต่างกัน และการใช้เครื่องมือที่เพิ่มขึ้นในแต่ละรูปแบบ เป้าหมายที่ 2 การใช้เครื่องมือช่วยเหลืออื่น
ๆ เพื่อเพิ่มความสามารถในการทำภาพเคลื่อนไหว
เป้าหมาย
3.1 การสร้างภาพเคลื่อนไหวพื้นฐาน
3.1.1
การเคลื่อนที่เป็นเส้นตรง
3.1.2
การเปลี่ยนขนาด
3.1.3
การหมุนวัตถุ
3.1.4
การเคลื่อนที่ตามเส้นทางที่กำหนด
3.1.5
การเปลี่ยนรูปร่าง
3.1.6 การเปลี่ยนวัตถุ
3.1.7
การเปลี่ยนสี
3.2 การใช้เครื่องมือสร้างภาพเคลื่อนไหว
3.2.1
การใช้งาน Layer
3.2.2 การเปลี่ยนจุดศูนย์กลางวัตถุ
3.2.3
ความเร่ง ความหน่วง
3.2.4 การแทรกเสียง
3.2.5
การแทรกปุ่มควบคุม
3.2.6
การแทรก Movie
Clip
3.2.7 การส่งออกแฟ้มข้อมูล
วัตถุประสงค์
3.1 เพื่อให้มีความรู้
ความเข้าและสามารถใช้เครื่องมือดังนี้
1.
Oval Tool
2.
Text Tool
3.
Arrow Tool
4.
Line Tool
5.
Sub selects Tool
6.
Fill Color Tool
7.
Rectangle Tool
3.2
เพื่อให้มีความรู้ ความเข้าและสามารถใช้เครื่องมืออื่นๆ ดังนี้
1.
Insert Layer
2.
Edit Center
3. Easing
4.
Insert Sound
5.
Insert Button
6.
Insert Movie Clip
7.
Export File
3.1 การสร้างภาพเคลื่อนไหวพื้นฐาน
3.1.1
การเคลื่อนที่เป็นเส้นตรง
การสร้างรูปภาพเคลื่อนไหว
เส้นตรงสามารถทำได้ดังนี้
1.
สร้างรูปวงกลมโดยใช้เครื่องมือ Oval Tool
2.
กำหนดรูปวงกลมและเส้นขอบให้เป็นวัตถุกลุ่มเดียวกัน
(Group) โดยใช้แป้นพิมพ์ Ctrl + A และ Ctrl+G
3.
คลิกที่ Frame 30 แล้วคลิกที่เมนู Insert > Keyframe (หรือใช้แป้นพิมพ์
F6) จะได้
ดังภาพ
4.
คลิกที่ Frame 1 แล้วคลิกเมนู Insert > Create Motion Tween
5.
คลิกที่ Frame 30 แล้วคลิกเครื่องมือ Arrow Tool
ย้ายรูปไปตำแหน่งใหม่แล้ว Enter จะได้ภาพเคลื่อนไหว
3.1.2
การเปลี่ยนขนาด
การสร้างรูปภาพเคลื่อนไหว เปลี่ยนขนาดสามารถทำได้ดังนี้
1.
สร้างวงกลมตาม หัวข้อ 3.1.1 ในขั้นตอน 1 ถึง 4 ดังภาพ
2.
คลิกที่ Frame 30 แล้วคลิกเมนู Modify >Transform > Scale
คลิกเครื่องมือ
Arrow Tool ปรับ
เปลี่ยนขนาดวงกลม จากนั้น Enter (หรือคลิกเมนู Control
> Play) เพื่อแสดงภาพเคลื่อนไหว
3.1.3
การหมุนวัตถุ
การสร้างภาพเคลื่อนไหวแบบการหมุนทำได้ดังนี้
1.
สร้างรูปสี่เหลี่ยมโดยใช้เครื่องมือ Rectangle
Tool
2.
สร้าง Motion Tween ตามหัวข้อ
3.1.1 ในขั้นตอนที่ 2 ถึง 4 ดังภาพ
3.
คลิก Frame 1 คลิกหน้าต่าง Frame โดยใช้เมนู Modify > Frame
4.
กำหนดลักษณะ การหมุนในช่อง Rotate กำหนดลักษณะเป็น CW
times = 3 จะเกิดภาพเคลื่อนไหวตามเข็มนาฬิกา
จำนวน 3 รอบ
หมายเหตุ
CW
= ตามเข็มนาฬิกา
CCW = ทวนเข็มนาฬิกา
3.1.4
การเคลื่อนที่ตามเส้นทางกำหนด
การสร้างภาพเคลื่อนไหวตามเส้นทางที่กำหนด
1.
สร้างรูปวงกลมเลือกวัตถุทั้งหมดโดยใช้แป้นพิมพ์
Ctrl
+ A
แล้วแปลงรูปให้เป็น Symbol แบบGraphicโดยใช้แป้นพิมพ์ F8
2.
สร้าง Motion Tween ตามหัวข้อ 3.1.1 ในขั้นตอนที่ 2 ถึง 5
3.
คลิกที่รูปวงกลมแล้วแทรก Guide Layer โดยใช้เครื่องมือดังรูป
4.
ที่ Guide Layer สร้างเส้นตรงจากกึ่งกลางวงกลม
โดยใช้เครื่องมือ Line Tool
5.
คลิก Arrow Tool ปรับเปลี่ยนลักษณะเส้นให้เป็นเส้นโค้ง และที่ Frame 30 ย้ายวงกลมให้จุดกึ่งกลางอยู่ตรงตำแหน่งปลายเส้นที่สร้างขึ้น
Tip ใช้แป้นพิมพ์ Ctrl ร่วมกับ Arrow Tool
เปลี่ยนรูปร่างของเส้นได้
3.1.5
การเปลี่ยนรูปร่าง
การสร้างภาพเคลื่อนไหวแบบเปลี่ยนรูปร่าง
1.
ที่ Fill Color ปรับเปลี่ยนสีพื้นเป็นแบบ
Gradient แล้วสร้างรูปวงกลม
2.
คลิกที่ Frame 30 เรียกใช้ Sub select Tool
3.
ใช้เมาส์ลากครอบรูปวงกลม
จะปรากฏจุดล้อมรอบดังภาพ
4.
เปลี่ยนตำแหน่ง anchor point ด้านบน แล้วเปลี่ยน Tangent handles เปลี่ยนรูปร่างวงกลมเป็นดังภาพ
5.
คลิกที่ Frame 1 สร้าง Motion Tween โดยคลิกเมนู Modify
> Frame จะปรากฏหน้าต่าง Frame ดังภาพเลือกรายการ
Frame และปรับค่า Tweening เป็นแบบ Shape
แล้วปิดหน้าต่าง Frame จากนั้น Enter จะปรากฏการเคลื่อนไหวแบบเปลี่ยนรูปร่าง
3.1.6
การเปลี่ยนวัตถุ
การสร้างภาพเคลื่อนไหวแบบเปลี่ยนวัตถุ
1.
ใช้เครื่องมือ Text Tool
2.
เปลี่ยนแบบอักษรโดยเรียกใช้เมนู Text >Font
ให้เป็น AngsanaUPC
และขนาดอักษรให้มีขนาดเท่ากับ 120
3.
สร้างตัวอักษรสีน้ำเงิน พิมพ์คำว่า “ITEd.”
แล้วใช้ Arrow
Tool คลิกที่ตัวอักษร
จากนั้น Break Apart โดยใช้แป้นพิมพ์ Ctrl
+ B ตัวอักษรจะเป็นดังภาพ
4.
คลิกที่ Frame 30 แทรก keyframe ใช้ Eraser Tool ลบตัวอักษรเดิมให้หมด
5.
สร้างตัวอักษรสีน้ำแดง คำว่า “Flash” แล้ว
Break
Apart ตามวิธีในข้อ 3
6.
คลิก Frame 1 สร้าง Motion Tween ตามหัวข้อ 3.1.5 ข้อที่ 5 แล้ว Enter จะเกิดภาพเคลื่อนไหวดังภาพ
3.1.7
การเปลี่ยนสี
การเปลี่ยนสีวัตถุทำได้ดังนี้
1.
สร้างรูปวงกลมและ Groupตามหัวข้อ 3.1.1
ในข้อ 1 ถึง 2
2.
คลิก Frame 30 แล้วแทรก Frame โดยคลิกเมนู Insert >
Frame หรือใช้แป้นพิมพ์ F5
3.
คลิกที่ Frame 1 แล้ว สร้าง Motion Tween จะปรากฏดังภาพ
4.
คลิก Frame 30 แล้วแทรก Keyframe โดยคลิกเมนู Insert
> Keyframe หรือใช้แป้นพิมพ์ F6
5.
ปรับเปลี่ยนสีวงกลม โดยคลิกเมนู Modify >
Frame
หรือใช้แป้นพิมพ์ Ctrl + F จะปรากฏหน้าต่าง
Frame เลือกหัวข้อ Effect และรายการ
Tint กำหนดค่า
R = 255 ปิดหน้าต่างแล้ว Enter
3.2
การใช้เครื่องมือสร้างภาพเคลื่อนไหว
3.2.1
การใช้งาน Layer
การใช้งาน
Layer
สามารถทำได้ดังนี้
1.
สร้างภาพเคลื่อนไหว ตามหัวข้อ 3.1.1
2.
แทรก Layer โดยคลิกเมนู Insert
> Layer หรือใช้เครื่องมือดังภาพ
3.
ที่ Layer 2 สร้างภาพเคลื่อนไหว
ตาม หัวข้อ 3.1.3
4.
เปลี่ยนระยะการแสดงผลของ Layer 2 ไปอยู่ที่ Frame 15 ถึง 45 โดย Arrow Tool ร่วมกับแป้น shift คลิกที่ Frame 1,
Frame 30 และ Frame ระหว่าง 2 –
29 จากนั้นลาก Frame ที่เลือกไปตำแหน่งใหม่
3.2.2
การเปลี่ยนจุดศูนย์กลาง
การเปลี่ยนจุดศูนย์กลางของวัตถุ
1.
สร้างรูปวงกลมและเส้น ตรงแล้ว Group เข้าด้วยกัน
2.
สร้าง Motion Tween
3.
ที่ Frame 1 เปลี่ยนจุดศูนย์กลางโดยเรียกเมนู Modify >Transform >
Edit Center แล้วย้ายจุดศูนย์กลางของวัตถุดังภาพ ที่ Frame
30 ทำเช่นเดียวกัน
4.
หมุนวัตถุโดยเรียก ใช้เมนู Modify
>Transform > Scale and Rotate กำหนด Rotate
= 30 degrees ดังภาพ
5.
ที่ Frame 60 , 90 และ 120 สร้าง Motion Tween และที่ Frame 90 กำหนด Rotate = - 30 degrees
เป็นการเคลื่อนที่ของแบบลูกตุ้ม
3.2.3
ความเร่ง – ความหน่วง
การสร้างรูปภาพเคลื่อนไหวที่มีความเร่งและความหน่วงทำได้ดังนี้
1.
การสร้างรูปภาพ เคลื่อนไหวตามหัวข้อ 3.1.1 ในข้อ 1
ถึง 5 โดยให้มีทิศทางการเคลื่อนที่ในแนวดิ่ง
2.
คลิก Frame 1 แล้วเรียกใช้เมนู Modify > Frame (หรือ Ctrl
+ F ) จะปรากฏหน้าต่าง Frame
ดังภาพ ที่รายการ Frame ปรับค่า Easing
= 100 จากนั้นปิดหน้าต่าง Frame
3.
ที่ Frame 30 สร้างภาพเคลื่อนไหวตามข้อ 1 แต่ให้มีทิศทางกลับกันและกำหนด
ค่า Easing = -100 ได้ภาพ เคลื่อนไหวคล้ายลูกบอล
3.2.4
การแทรกเสียง
การแทรกเสียงทำได้ดังนี้
1.
สร้างภาพเคลื่อนไหวตาม หัวข้อ 3.2.3
2.
ใช้คลังข้อมูลเสียงโดยใช้คลิกที่เมนู Window เมนูย่อย Common Libraries > Sounds
3.
เลือกรายการเสียง “Brick
Drops”
ใช้เมาส์ลากมาวางบน stage
4.
ปรากฏสัญลักษณ์ของเสียงดังรูป
5.
สามารถแทรกเสียงรูปแบบอื่น ๆ
ได้หลายรูปแบบ เช่น Wav
sound , Mp3 sound, Aiff sound โดยคลิกเมนู File > import (หรือ Ctrl
+ R) แล้วเลือกแฟ้มข้อมูลเสียงที่ต้องการ จากนั้นคลิกเมนู Modify
> Frame จะปรากฏหน้าต่าง Frame ดังภาพ
ให้เลือกรายการ Sound จะมีรายการแฟ้มข้อมูลเสียงที่แทรกไว้
3.2.5
การใช้งานปุ่มควบคุม
การสร้างปุ่มควบคุมทำได้ดังนี้
1.
สร้างภาพเคลื่อนไหวตาม หัวข้อ 3.2.3 แล้วแทรก Layer 2
2.
แถบหน้าต่าง Library-Buttons
คลิกเมนู Window > Common Libraries > Buttons จะปรากฏหน้า
ต่าง Library-Buttons
3.
เลือกรูปแบบ Button ชื่อ “Pill Button” ดังภาพ ลากมาวางบน stageปรับขนาดและตำแหน่งให้พอเหมาะ
4.
แถบหน้าต่าง Object Actions
คลิกเมนู Window
> Actions
ดังภาพ เลือกรายการ Basic
Action
แล้วดับเบิลคลิกที่คำสั่ง stop
5.
เพิ่มคำสั่ง “play”
โดยเลือก Button แล้ว ที่แถบหน้าต่าง Object
Actions เลือกรายการ Basic Action แล้วดับเบิลคลิกที่คำสั่ง
Play
3.2.6 การแทรกภาพเคลื่อนไหว
การแทรกภาพเคลื่อนไหว
สามารถทำได้ดังนี้
1.
แทรก Movie Clip
โดยคลิกที่เมนู Windows
> Common Libraries > Movie Clips
2.
เลือกรายการ Fish Movie Clip แล้วใช้เมาส์ลากมาไว้บนพื้นที่ทำงาน (Stage)
3.
แสดงภาพเคลื่อนไหว โดยคลิกเมนู Control >
Test Movie
(หรือใช้แป้นพิมพ์ Ctrl + Enter)
4.
สร้าง Movie Clip ใหม่
โดยคลิกเมนู Insert > New Symbol
(หรือใช้แป้นพิมพ์ Ctrl + F8) จะปรากฏหน้าต่างดังภาพ
เลือกรายการ Movie Clip จากนั้น สร้าง Motion Tween ตามหัวข้อ 3.1.1 จะได้ Movie Clip ใหม่ไว้ใช้งานได้
3.2.7
การส่งออก
การส่งออกแฟ้มข้อมูลภาพเคลื่อนไหวสามารถทำได้ดังนี้
1.
สร้างภาพเคลื่อนไหวตามหัวข้อ 3.2.6
2.
แสดงภาพเคลื่อนไหวได้โดยเรียกใช้เมนู File >
Publish Preview > Default (หรือ F12) จะแสดงภาพเคลื่อนไหวใน Web Browser
การส่งออกแฟ้มข้อมูลภาพเคลื่อนไหว
โดยคลิกเมนู File
> Export Movie
สามารถส่งออกได้หลายรูปแบบดังภาพ นำไปใช้กับงานอื่น ๆ ได้ ที่นิยมส่งออก คือ Flash Player
(*.swf) และ Windows AVI (*.avi
ไม่มีความคิดเห็น:
แสดงความคิดเห็น