26
1 หลายรู้แบบ ที่สําคัญคือ เป็นโปรแกรมสร้างภาพเคลื่อนไหวแบบ Flash Animation ที่สมบูรณ์แบบที่สุด มีคุณสมบัติที่เด่นหลายด้านคือ รูปแบบไฟล์มีขนาดเล็ก สามารถแสดงภาพออกมาได้ชัดเจน มีลูกเล่นต่าง มากกว่าภาพเคลื่อนไหวแบบอื่น ที่ใช้งานกันอยู ่บนเว็บ สามารถสร้างเป็นหน้าเว็บที่โต้ตอบกับผู้ใช้งาน ได้ทันที รู ้จักกับ Adobe Flash CS3 Professional ส่วนประกอบหลักของ Flash CS3 1 5 6 7 3 4 2 1. Menu Bar เป็นแถบสําหรับเก็บคําสั่งต่าง ของโปรแกรมไว้ทั ้งหมด ตัวอย่างเช่น คําสั่งสร้าง Movie เปิ ด moive /ปิ ด movie คําสั่งปรับแต่งค่าต่าง ของ movie และอื่น 2 2. Tools Box

Adobe Flash CS3 Professional รู้จักกับ Adobe Flash CS3 ... · 3 4. Timeline Panel . เป็น Panel สําหรับกําหนดช ่วงจังหวะเวลาของภาพเคล

Embed Size (px)

Citation preview

   1 

Adobe Flash CS3 Professional เปนโปรแกรมทสามารถสรางภาพกราฟกและภาพเคลอนไหวไดมากมาย

หลายรแบบ ทสาคญคอ เปนโปรแกรมสรางภาพเคลอนไหวแบบ Flash Animation ทสมบรณแบบทสด

มคณสมบตทเดนหลายดานคอ รปแบบไฟลมขนาดเลก สามารถแสดงภาพออกมาไดชดเจน มลกเลนตาง

ๆ มากกวาภาพเคลอนไหวแบบอน ๆ ทใชงานกนอยบนเวบ สามารถสรางเปนหนาเวบทโตตอบกบผใชงาน

ไดทนท

รจกกบ Adobe Flash CS3 Professional

สวนประกอบหลกของ Flash CS3

1

5 6

7

3

4

1. Menu Bar

เปนแถบสาหรบเกบคาสงตาง ๆ ของโปรแกรมไวทงหมด ตวอยางเชน คาสงสราง Movie เปด

moive /ปด movie คาสงปรบแตงคาตาง ๆ ของ movie และอน ๆ

2. Tools Box

   

เปนทสาหรบจดเกบเครองมอทตองใชงานเปนประจาไว ไดแกเครองมอดงน

3. Stage พนททางาน

ในการสรางภาพเคลอนไหวหรอสรางชนงานจะตองสรางลงบนพนทสวนน ซงเปนสวนของพนท

ทางานบนโปรแกรม โดยสามารถกาหนดสสนและขนาดไดตามตองการ

Arrow

Line Pen

Pencil

Subselect Lesso Text Rectangle Brush Paint Bucket Ink Bottle

Eyedropper Eraser Hand

Free Transform

Stroke Color Zoom

Swap Colors Fill Color

Default Colors

    3 

4. Timeline Panel

เปน Panel สาหรบกาหนดชวงจงหวะเวลาของภาพเคลอนไหว ซงสามารถกาหนดไดถง 2000

เฟรม รวมทงแสดง ใหเหน Layer ตาง ๆ ทสรางขนมาใชงาน

5. Properties Panel

เปน Panel สาหรบกาหนดคณสมบตตาง ๆ ของวตถทตองการเลอกปรบแตง รวมถงการปรบแตง

คณสมบตของพนททางานดวย เชน สามารถปรบแตงขนาด ปรบสฉาก การจดวางเปนตน

Frame-by-frame animation

Center frame button

Onion-skinning buttons

Elapsed time

Frame rate

Selected frame number

Guide layer icon Twooned animation Timeline header

Play head Empty key frame

Frame View pop-up menu

    4 

6. Actions Panel

เปน Panel สาหรบกาหนดคาสงพเศษตาง ๆ ซงเปนคาของ Flash Movie โดยเฉพาะ ลงไปกบ

ภาพเคลอนไหว

7. All Panel

เปนเครองมอเสรมสาหรบชวยใหสามารถทางานในโปรแกรมไดคลองตวขน เชน เลอกส ปรบ

ขนาด เปนตน และยงสามารถเลอกลอก Panel ตดกนเปนชดเพอใชงาน และเลอกปดเปดไดอยางสะดวก

    5 

ภาพเคลอนไหวแบบจงหวะตอจงหวะ (Frame by Frame) เปนการสรางภาพเคลอนไหวแบบ

พนฐาน โดยผสรางจะตองสรางการเคลอนไหวในแตละจงหวะเอง โดยใหภาพออกมาในลกษณะจงหวะ

ตอจงหวะ ตอกนไปเรอย ๆ จนเปนภาพเคลอนไหวทสมบรณแบบ

ภาพเคลอนไหวแบบ Tween Animation เปนการสรางภาพเคลอนไหวโดยใหโปรแกรมเปน

ผจดการสรางจงหวะ ในการทางานใหโดยอตโนมต ซงภาพทไดออกมาจะมความสวยงามและมจงหวะ

ราบรน

F5 (Frame) คอ ระยะเวลาของภาพเคลอนไหวทก Frame แสดงเหมอนกนหมด เชน หาก Frame

ท 1 วาดรปวงกลม Frame ท 1 – 100 กจะกลายเปนรปวงกลมทงหมด

F6 (Key Frame) คอการสรางจงหวะในชอง Frame ใหแตกตางกนในแตละ Frame เปนจดเรมตน

ของการสรางภาพเคลอนไหว คอ เมอเกดความแตกตางของจงหวะทจะเกดภาพเคลอนไหว

คอการทดสอบการทางานของภาพเคลอนไหว เลอกคาสง Control > Test Movie หรอกด Ctrl +

Enter

การสรางภาพเคลอนไหว

ความแตกตางของ F5 กบ F6

การทดสอบ Movie

    6 

ไฟล .Fla จะเปนไฟลทมการบนทกขอมลตาง ๆ เอาไวทงหมดจะมขนาดไฟลทใหญ เปนตนฉบบ

ไมสามารถนา ไปแสดงบน Flash Player หรอบนเวบบราวเซอรอนเทอรเนตดงนนการ Save ไฟลใน

รปแบบนจงเปนการบนทกเพอนเอาไวแกไขหรอปรบแตง Movie การบนทกทาไดโดยเลอก File > Save

หรอ File > Save as

การ Save ไฟล

.fla

ไฟล .swf เปนไฟลทจะนาไปใชจรงบน Flash Player หรอบนอนเตอรเนตซง ไฟล Movie ใน

รปแบบนแสดงผลไดอยางเดยว แกไขไมไดบนทกโดยเลอก File > Export Movie ในชอง Save as type

เลอกรปแบบ .swf < กด OK

.swf

    7

การสราง Animation แบบ Frame By Frame

1. New File หรอ กด Ctrl + N

2. คลกเฟรมท 1 สรางวงกลม 1 วงพรอมพมพเลข 1 ลงไปดงรป

3. สรางเฟรมท 2 โดยกดปม F6 เพอเพมคยเฟรม จะไดภาพเหมอนเฟรมแรก จากนนคลกทเมน

Edit > Select All แลวคลกท Edit > Copy เพอคดลอกวงกลมพรอมตวเลข แลวคลก Edit > Paste in

Place เพอวางรปวงกลมซอนในตาแหนงเดม แลวใช Arrow Tool เลอกทงรปแลวยายไปทางขวาของ

วงกลมเดม โดยในขณะทยายใหกดปม Shift บนคยบอรดคางไวดวย จากนน ใหเปลยนตวเลขในวงกลม

ขวามอในเฟรมท 2 จากเลข 1 เปน เลข 2

2

3

    8 

4. สรางเฟรมท 3 โดยกดปม F6 เพอเพมคยเฟรม จะไดภาพเหมอนเฟรมท 2 จากนนใช Arrow

Tool เลอกวงกลมดานขวามอ พรอมเลข 2 ในวงกลม แลวคลกท Edit > Copy เพอคดลอกแลวคลก Edit

> Paste in Place เพอวางรปวงกลมซอนในตาแหนงเดม แลวใช Arrow Tool เลอกตาแหนงวงกลมท 2

ทงรปแลวยายไปทางขวา โดนในขณะทยายใหกดปม Shift บนคยบอรดคางไวดวย จะไดวงกลมชนท 3

จากนนใหเปลยนตวเลขในวงกลมจากเลข 2 เปนเลข 3

5. จากนนมาใชเมาสคลกทพนทวางบน Stage แลวกาหนด Frame Rate ใหเทากบ 1 เฟรมตอ

วนาท แลวทดลองกดปม Enter เพอดตวอยาง หรอกด Ctrl + Enter เพอดผลงาน

3

5

    9

1. New File หรอ กด Ctrl + N

2. คลกเฟรมท 1 สรางรปสเหลยม 1 รป

3. คลกทเฟรม 30 เลอกคาสง Insert > Keyframe หรอกดปม F6 เพอเพม Keyframe

4. กดปม Delete ทคยบอรด 1 ครง เพอลมรปสเหลยมออกแลวสรางรปวงกลมขนมาแทนท

สเหลยม จะไดภาพเฟรมท 1 เปนสเหลยมและภาพเฟรมท 30 เปนวงกลม

การสราง Animation แบบ Shape Tweening

2

3

4

    10 

5. คลดทเฟรมท 1 กาหนด Properties ในชอง Tween เปน Shape จะพบวามเสนเชอม

ระหวางเฟรมท 1 กบเฟรมท 30

6. ทดสอบการทางานโดยกด Enter หรอคลด Play ท Windows Controller จะพบวา รป

สเหลยมจะเปลยนแปลงรปรางกลายเปนรปวงกลม

5

กรณทเปนตวอกษร ใหทาการ Break Apart (Ctrl + B) กอน ทงเฟรมเรมตนและเฟรม

สดทาย โดยคาสง Break Apart เรยกไดจาก Modify >Break Apart

2.

1. กาหนดวตถในเฟรมเรมตน และกาหนดวตถในเฟรมสดทาย

หมายเหต กรณทเปนตวอกษร ใหใชหลกการเดยวกน คอ

    11 

1. New File หรอ กด Ctrl + N

2. คลกทเฟรมท 1 แลวพมพขอความลงบน Stage

3. เลอกเครองมอ Arrow Tool แลวคลกเลอกขอความ “Multimedia” นาไปวางไวทมมลางซายของ

Stage หรอในจดทตองการ

4. คลกทเฟรม 25 เลอก Insert > Keyframe หรอกด F6 จะไดขอความเหมอนเดม (“Multimedia”) ท

เฟรม 25 จากนนใชเครองมอ Arrow Tool คลกลากขอความไปวางไวทมมบนขวาของ Stage

5. กาหนด Properties ในชอง Tween เปน Motion กาหนด Rotate เปนแบบ CW (ตามเขมนาฬกา)

จานวน 1 รอบ จะเกดเสนเชอมระหวางเฟรมท 1 กบเฟรมท 25 ท Timeline

การสราง Animation แบบ Motion Tweening

2

3

    12 

5

6. ทาการทดสอบโดยการกดปม Play ท Window > Tool bar > Controller จะไดขอความ

“Multimedia” หมน 1 รอบจากจดเรมตนไปยงจดสดทาย

    13 

ถาเปนรปกราฟกทสรางขนจากเครองมอของโปรแกรม จะทาการ Motion ไดกตอเมอทา

การรวมกราฟกนน ๆ กอน โดยเลอกคาสง Modify > Group

หมายเหต

    14 

การสราง Animation โดยการ Mask Layer

1. New File หรอกด Ctrl + N กาหนดสพนหลง (Background) เปนสดา

2. คลดทเฟรมท 1 พมพขอความวา “Animation” โดยเลอกรปแบบตวอกษรและสตามตองการ

3. จากนนคลกทเฟรม 30 กดปมเพมเฟรม (F5)

4. ทาการเพม Layer ใหม โดยคลกคาสง Insert > Layer จะได Layer 2 เพมขนมา

2

3

4

    15

5. สรางภาพวงกลมทเฟรมท 1 ของ Layer 2 ทดานซายของคาวา “Animation”

5

6. จากนนลอกคาสง Insert > Create Motion Tween แลวคลกเฟรมท 30 กดปม F6 เพอเพม

Keyframe จากนนใชเมาสคลกภาพวตถวงกลมไปวางไวทางดวนขวาของคาวา “Animation”

6

7. เมอทดสอบโดยการกด Enterหรอคลกปม Play จะเหนภาพวงกลมวงไปบนขอความ

“Animation”

    16

8. คลกเมาสท Layer 2 แลวเลอกคาสง Mask โดยคลกขวาของเมาสท Layer 2 แลวเลอก

Mask

คาสง

9. เมอทดสอบการทางานกจะพบวาขอความ “Animation” จะแสดงเมอม Mask (Layer บน)

เคลอนทผานเทานน

    17 

1. New File หรอกด Ctrl + N แลววาดรปปลาไวทรม Stage ดานซ

een เฟรมเรมต

าย (เพอใหวายไปดานขวา)

นอยทางดานซายในเฟรมท 1

3. คลกทเฟรม 40 แลวเพม Keyframe โดยการกดปม F6 จะไดภาพเหมอนเฟรมท 1 คอภาพ

ปลาทตาแหนงเดยวกนจากนน ใชเมาสคลกลากวตถ(ปล ไปวางทรม Stage ทางดานขวาจะ

4. เมอทดสอบดขณะน จะพบวาปลาจะเคลอนทจากขอบดานซายไปดานขวา ในลกษณะเสนตรง

2. จากนนเลอกคาสง Insert > Create Motion Tw

า)

ไดภาพปลาในเฟรมท 40 และจะปรากฏเสนเชอมระหวางเฟรมท 1 กบเฟรมท 40 ดงรป

3

การสราง Animation โดยใช Motion Guide

2

1

    18

5. การก นทางการเคลอนท (Motion Guide) ทาไดโดยเลอกเมน Insert > Motion Guide

เมอเลอกคาสงนแล Guide Layer

6. คลกทเฟรมท 1 ของ Layer Guide Layer 1 จากนนทาการ

ลากเสนจากดานซายไปดานขวาหร อนทไป ตวอยางรป

7. จากนนปรบจดเรมตนและจดสดทายใหกบวตถโดยคลกเมาสทเฟรมท 1 เ ปม Snap to

objects หรอเลอกทคาสง View Snap to objects ใชเมาสลากวตถ(ปลา) ใหเกาะตดกบ

เสน ณ จดเรมตน และทเฟรม 40 ลากวตถใหเกาะตดกบปลายเสนทางดานขวามอ ดงรป

าหนดเส

1 วจะปรากฏ Layer เพมเขามาใน Timeline ชอวา

แลวใชเครองมอ Pencil Tool

อตามลกษณะทตองการใหปลาเคล

ลอก

6

   

8. จากนนทดสอบการเคลอนทและแกไขเสนทางไดตามตองการ แตการเคลอนทของวตถจะหน

ไปทางเดยวยงดไมเปนธรรมชาต กสามารถปรบใหหนตามเสนทางทเปลยนแปลงได โดยใช

เมาสคลกทเฟรมท 1 แลวกาหนด Properties ในชองเลอกทาเครองหมายถกในชอง Orien

t to

path แลวลองทดสอบการทางานอกครง

8

19

    20

การนาภาพเขามาใช โดยใชคาสง File >

Import จะไดภาพทเลอกมาปรากฏบนพนทการ

ทางานเลย หากเลอก File > Import to Library

ภาพจะถกนาไปเกบไวใน Library

การสราง Animation โดยใช Motion Guide

   

1. เลอกเมน File > Import

2. ชอง File of type เลอก All Sound Formats

3. เลอกไฟลเสยงทตองการ แลวกด Open

Library

การใสเสยงใหกบชนงาน

โปรแกรมจะทาการ Import ไฟลเสยงมาใสไวใน

4. เปด Library จะพบไฟลเสยงทนาเขามา

5. กดปม Play เพอทดลองฟงเสยงได

3

2

5 4

21

    22 

6. การนาไฟลเสยงมาใสในชนงาน ใหลากไฟลเสยงทตองการมาวางบนพนทของชนงาน

7. สามารถปรบแตงเสยงไดในชอง Properties โดยเลอกประเภทของ Effect แลวกดปม Edit

เพอปรบแตงตามตองการ

7

   

ชนงานทจะนาออกไปใชมขนาดไฟลทเลก

วาง ๆ ใหเลอกเมน Insert > New Symbol

ประโยชนของ และสามารถ

นามาใชไดหลายครง โดยไมตองสรางใหม

1. หากจะทาการสราง Symbol จากท หรอกดปม F8

2. จะปรากฎดงภาพ

Symbol ม 3 รปแบบ ไดแก

Movie Clip Symbol

เปนรปแบบของ Symbol ทสามารถสรางภาพเคลอนไหวทซบซอนได

Button Symbol

เปนรปแบบของภาพกราฟกทถกเปลยนใหกลายเปนปม

Graphic Symbol

เปนรปแบบของภาพกราฟก(ภาพนง) ทถกเปลยนมาเปน Symbol ภาพกราฟกไดมาจากการวาด

จากเครองมอใน Flash หรอการนาภาพจากภายนอกเขามากได ภาพทนาเขามาใชงานในตอนแรกจะเปน

Bitmap ไมสามารถแกไขคาได หารทาการ Convert เปน Graphic Symbol จะสามารถปรบแตงได เชน

การปรบแตง Alpha, tint, Brightness

Symbol คอการทาให

การสราง Symbol

2

23 

1

    24

ด ๆ หรอคาสงท

2. เลอก Action > Movie Control > Stop

การใชคาสง

เปนการใชคาสงเพอควบคม Movie เชน สงใหเลน สงใหหยด สงใหไปยงหน

สงให Stop ใหเลอกตาแนงหรอวตถทจะใส Action Script

าใ

ซบซอนมากมาย

1. เชนเมอตองการจะ

Action Script เบองตน

1

2

จะเกดคาสง Stop ดงภาพท 3 3.

3

3

   

คอการนาไฟลไปใช

OK

เลอก File > Publish

งานบนเว

> กด

โปรแกรมจะสรางไฟลททาการเลอกไวทงหมด

บบราวเซอร

ชงาน โดยเลอก File > Publish Settings > ในชอง Formats เลอกรปแบบ Type ทจะนาไปใ

การ Publish

25

26 

1. ไปท Start > Ru

3. เลอกท My Computer จากนนไปท Menu > Edit > Find Next

4. ตองทาการหา Registry 2 ตวคอ Fixedfon.fon และ Fonts.fon พมพคาวา Fixedfon.fon ลงไป

กด OK

5. เมอพบแลวให Double Click ทชอ เพอเขาไปแก Data โดยแกใหเปนคาวา vgafixed.fon

6. เมอแกแลวกดท F3 เพอหาจดผดตอไป แกใหหมดทกตว

7. Restart เครองใหม

คาเตอน การแกไขคา registry นควรกระทาโดยผทมความรความชานาญเกยวกบ Windows ขน

 

วธแกไขคา Registry

โปรแกรม Flash CS3 หากตองการใชงานในสวนของ Properties บางคาสง แตวาไมสามารถใช

งานไดเนองจากมขนาดลนหนาจอ มวธการปรบแกโดยตองเขาไปแกไขคา registry ดงน

n

2. พมพคาวา Regedit เพอเปด Registry Editor

สง เพราะหากแกไขผดคา จะทาใหสงผลกระทบตอระบบ Windows ได