18
เอกสารประกอบการเรียน

เอกสารประกอบ flash animation adobe flash cs6(1)

Embed Size (px)

DESCRIPTION

เอกสารประกอบการเรียน เพื่อการศึกษา โรงเรียนมาแตร์เดอีวิทยาลัย

Citation preview

Page 1: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

เอกสารประกอบการเรียน

Page 2: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

เรื่อง เรื่องยอย

1. โครงสราง Animation ใน Flash

โครงสราง Scene

โครงสราง Symbol 2. เกี่ยวกับ Keyframe การเพ่ิมคียเฟรม

การลดคยีเฟรม 3. เกี่ยวกับ Create Classic Tween

การเพ่ิม Classic Tween

การลด Classic Tween 4. เกี่ยวกับ Shape Tween การเพ่ิม Shape Tween

การลด Shape Tween 5. เกี่ยวกับวัตถุการเคล่ือนไหว เคลื่อนท่ีเปนเสนตรง

เคลื่อนท่ีตามเสนท่ีวาด การทําพ้ืนหลังแบบมีสปอตไลท

6. เกี่ยวกับตัวอักษร ตัวอักษรขึ้นทีละตวั

ตัวอักษรมีพ้ืนหลังเลื่อน ตัวอักษรมีสปอตไลทต

7. เกี่ยวกับการทาํวัตถุหมนุ หมุนทวนเข็ม / หมุนตามเข็ม

การหมุนรอบจุดศูนยกลาง

Page 3: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

โครงสราง Animation ใน Flash

1. โครงสราง Scene

Scene หรือ ซีน ก็

เปรียบเสมือน กับ

ฟลมในมวน เราจะ

เพ่ิมกี่ ซีน ก็ได

การเพิ่ม Scene

การลด Scene

กด Shift + F2

Symbol คือการเคลื่อนไหวของวัตถุเคลื่อนไหวในตัว

หรือทําใหเคลื่อนไหวหลายๆวัตถุพรอมกัน

Page 4: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

2. โครงสราง Symbol

การเพิม่ Symbol

ลักษณะของ Symbol จะเปนสัญลักษณ สี

ฟามีดวงอาทิตย อยูที่ Library

Page 5: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

เกี่ยวกับ Keyframe

1. การเพิ่มคียเฟรม

คียเฟรม

เปรียบเสมือน ชวง

ของการเกิด

ภาพเคล่ือนไหว

การเพิ่มคียเฟรม

คลิกขวาที่ Timeline แลวเลือก

Insert keyframe

Page 6: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

2. การลดคียเฟรม

คลิกขวาในบริเวณ timeline เลอืก เคลียร คียเฟรม

Page 7: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

3. เกีย่วกับ Create Classic Tween

เราสราง Classic Tween จะทําใหเกิดการเคลื่อนท่ี

1. การเพิ่ม Classic Tween

คลิกขวาในบริเวณ timeline เลือก Create Classic

Tween

Page 8: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

2. การลด Classic Tween

คลิกขวาในบริเวณ timeline ที่มีการ insert keyframe เลือก

Remove Tween

Page 9: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

2. เกีย่วกับ Shape Tween

เราสราง Shape Tween เพื่อทําให Shape เคลื่อนไหวแบบเฉพาะ

1. การเพิ่ม Shape Tween

คลิกขวาในบริเวณ timeline ท่ีมีการเพิ่มภาพ shape และ insert

keyframe เลือก Create Shape Tween **ตองเปน Shape เทาน้ัน

Page 10: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

2. การลด Shape Tween

คลิกขวาในบริเวณ timeline ที่มีการ insert keyframe เลือก Remove

Tween

Page 11: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

4. เกีย่วกับวัตถุการเคล่ือนไหว

1. เคล่ือนที่เปนเสนตรง

สรางวัตถุ 1 ชิ้น ยายจากจุดหนึ่งไปจดุหนึ่ง แลว insert keyframe แลว

Create Classic tween

Create Classic

tween

1

13

13

1

Page 12: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

2. เคล่ือนที่ตามเสนที่วาด

สรางวัตถุ 1 ช้ิน แลวคลกิขวาที่ เลเยอรวัตถุ แลว Add

Motion Guide จากนั้นวาดเสนดวยดินสอ แลวจึงดูที่ timeline

วา timeline ที่ 1 อยูตนเสน timeline สุดทาย อยูปลายเสน

จากนั้น Create Classic tween ที่ timeline ในเลเยอรวัตถ ุ

Page 13: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

3. การทําสปอตไลทใสพื้นหลัง

สรางเลเยอร แลวนําพื้นหลังมาใส แลวทําใหพื้นหลังเคลื่อนที่เปน

เสนตรง ยายจากจุดหนึ่งไปจุดหนึ่ง แลว insert key frame แลว

Create Classic tween จากนั้นสรางเลเยอรใหมขึ้นมา ต้ังชื่อวา

shape แลวใส รูปรางตามตองการ เขามา ไวตรงกลาง แลวจากน้ัน

คลิกขวาท่ีเลเยอร shape แลวเลือก Mask

Page 14: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

4. เกีย่วกับตัวอักษรตัวอักษรขึ้นทีละตัว

สรางเลเยอรแลวใสตัวอักษรลงไปทีละ Keyframe จนครบ

ตัวอักษร

Page 15: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

5. ตัวอักษรมีพื้นหลังเล่ือน

สรางเลเยอร แลวนําพื้นหลังมาใส แลวทาํใหพื้นหลังเคลือ่นที่เปน

เสนตรง ยายจากจุดหนึ่งไปจุดหนึ่ง แลว insert key frame แลว

Create Classic tween จากนั้นสรางเลเยอรใหมขึ้นมา แลวใส

Text เขามา ไวตรงกลาง แลวจากนั้น คลิกขวาที่เลเยอร Text

แลวเลือก Mask

Page 16: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

6. ตัวอักษรมีสปอตไลทต

สรางเลเยอร Text แลวใสตัวอักษรลงไป แลวสรางเลเยอรใหม

ใสรูปวงกลม shape แลวใหวงกลมเคลื่อนที่เปนเสนตรง ยายจากจุด

หนึ่งไปจุดหนึ่ง แลว insert key frame แลว Create Classic tween

จากนั้น คลิกขวาที่เลเยอร Shape แลวเลือก Mask

Page 17: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

7. เกีย่วกับการทาํวัตถุหมุน หมุนทวนเข็ม /

หมุนตามเข็ม

ตอง insert symbol แบบ

Movie clip สรางเลเยอรวัตถุ

หรือนําภาพวัตถุมาก็ได ใหวาง

วัตถุใหอยูตรงกลางตรงรูปบวก

พอด ีแลวให สราง Keyframe

ที่ 50 หรือชวงใดกไดตาม

ตองการ จากนั้น ให Create

Classic tween แลวเลอืก

Rotate ที่ สวน Properties

เปน CWW เพือ่ทวนเขม็นาฬิกา

CW ตามเขม็นาฬิกา

Page 18: เอกสารประกอบ flash animation adobe flash cs6(1)

Cr. Chawannut Prompak

8.การหมุนรอบจุดศูนยกลาง

ตอง insert symbol แบบ Movie clip สรางเลเยอรวัตถุ

หรือนําภาพวัตถุมาก็ได ใหวางวัตถุใหอยูรอบๆ รูปบวก แลวให

สราง Keyframe ที่ 50 หรือชวงใดกไดตามตองการ จากนั้น ให

Create Classic tween แลวเลอืก Rotate เปน CWW เพื่อทวน

เข็มนาฬกิา CW ตามเขม็นาฬิกา