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

13
Cr. Chawannut Prompak

Upload: chawannut-bell

Post on 22-Jul-2016

242 views

Category:

Documents


1 download

DESCRIPTION

สื่อการสอน flash Animation เพื่อการศึกษา

TRANSCRIPT

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

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

Cr. Chawannut Prompak

2. โครงสร้าง Symbol

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

3.เกี่ยวกับ 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

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

สร้างวัตถุ 1 ชิ้น แล้วคลิกขวาที่ เลเยอร์วัตถุ แล้ว Add Motion Guide จากนั้นวาดเส้นด้วยดินสอ แล้วจึงดูที่

timeline ว่า timeline ที่ 1 อยู่ต้นเส้น timeline สุดท้าย อยู่ปลายเส้น จากนั้น Create Classic tween ที่

timeline ในเลเยอร์วัตถุ

การท าให้พื้นหลังให้เคลื่อนตามส่วนที่ก าหนด

สร้างเลเยอร์ แล้วน าพื้นหลังมาใส่ แล้วท าให้พื้นหลังเคลื่อนที่เป็นเส้นตรง ย้ายจากจุดหนึ่งไปจุดหนึ่ง แล้ว insert

key frame แล้ว Create Classic tween จากนั้นสร้างเลเยอร์ใหม่ข้ึนมา ตั้งชื่อว่า shape แล้วใส่ รูปร่างตาม

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

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

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

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

สร้างเลเยอร์ แล้วน าพื้นหลังมาใส่ แล้วท าให้พื้นหลังเคลื่อนที่เป็นเส้นตรง ย้ายจากจุดหนึ่งไปจุดหนึ่ง แล้ว insert

key frame แล้ว Create Classic tween จากนั้นสร้างเลเยอร์ใหม่ข้ึนมา แล้วใส่ Text เข้ามา ไว้ตรงกลาง แล้ว

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

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

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

Cr. Chawannut Prompak

สร้างเลเยอร์ Text แล้วใส่ตัวอักษรลงไป แล้วสร้างเลเยอร์ใหม่ ใส่รูปวงกลม shape แล้วให้วงกลมเคลื่อนที่เป็น

เส้นตรง ย้ายจากจุดหนึ่งไปจุดหนึ่ง แล้ว insert key frame แล้ว Create Classic tween จากนั้น คลิกขวาที่เล

เยอร์ Shape แล้วเลือก Mask

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

ต้อง insert symbol แบบ Movie clip สร้างเลเยอร์วัตถุ หรือน าภาพวัตถุมาก็ได้ ให้วางวัตถุให้อยู่ตรงกลางตรง

รูปบวกพอดี แล้วให้ สร้าง Keyframe ที่ 50 หรือช่วงใดก้ได้ตามต้องการ จากนั้น ให้ Create Classic tween

แล้วเลือก Rotate เป็น CWW เพ่ือทวนเข็มนาฬิกา CW ตามเข็มนาฬิกา

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

ต้อง insert symbol แบบ Movie clip สร้างเลเยอร์วัตถุ หรือน าภาพวัตถุมาก็ได้ ให้วางวัตถุให้อยู่รอบๆ รูปบวก

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

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