Flash CS5 for Animation and Interactive Adobe Flash ... · แก้ไขโดย...

Flash CS5 for Animation and Interactive

Adobe Flash Profession CS5

Flash ทาอะไรไดบาง

- สราง Animation

- Sound Effect ประกอบ Title (ยกตวอยาง Title Cartoon)

- การวาดภาพ หรอนาเขาจาก Illustrator

- ใชคาสงแบบ Interactive คลม Graphic ได (ยกตวอยาง Web flash) เพมลกเลนใหกบเวบ

ขอเสย เหมาะสาหรบเวบทไมคอย Update แนะนาใหใชทา Banner หรอตกแตงเวบเลก ๆ นอย ๆ

เรมตนใชงาน

Create New ->ActionScript 2.0 (เหมาะสาหรบผ เรมตน) ถาเปน 3.0 จะตองพมพทกอยางเองหมด

http://www.netdesign.ac.th/web_flash/index.php�


Panel ทใชงานบอย

การกาหนดขนาดงาน

- กาหนดขนาด และ background

- กาหนดความเรวในการเลน (Frame rate) Animation ในหนงวนาทจะใหมภาพวงผานกภาพ Frame

rate นอยภาพจะกระตก ปกต 24 frame pre second ถาใชกบ After effect ควรกาหนดท 25-30



การกาหนดพนททางานใหเหมาะสม

โปรแกรม Flash ประกอบดวยพนทแสดงงาน (Stage) อยตรงกลาง ใชสาหรบแสดงผลงานเมอสง Test

Movie และสวนพนทสเทาดานนอกเปนพนทงาน (Work Are) ใชวางองคประกอบอน ๆ ทยงไดใชงาน

การ Zoom หนาจอ

1. ปรบทหนาจอ

2. หรอ ใช short cut

- Zoom in = Ctrl + เครองหมาย + ตรง ช

- Zoom out = Ctrl + เครองหมาย –

- Fit in Window = Ctrl + 2

Work Area

พนทงาน Stage

พนทแสดงงาน



- View 100% = Ctrl + 1

- Hand tool = space bar

- Undo = ctrl + z

- Redo = Ctrl + Y

การต งคาสกอนการวาดภาพ

หลกการสราง Animation

Animation คอ การนาภาพนงหลาย ๆ ภาพมาวางเรยงตอกน เพอทาใหเกดการเคลอนไหวอยางตอเนอง

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

Photoshop, Adobe Flash ,SwishMax หรอโปรแกรม 3 มต เชน 3D Studio Max

ตวอยาง ภาพเคลอนไหวแบบ Frame by Frame

การสราง Animation ตองลาดบเรองราว ใหสามารถเขยนบท และวาดลาดบเรองราว (Storyboard)

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

นาเบอ ซงจประกอบดวย สวนเปดเรอง สวนเนอเรอง และสวนปดเรอง

No color เปนการ ปดคาส ไมม

การเตมสทเสนขอบ และสพน



ตวอยาง การวาดเรองราวลาดบภาพเพอใชในการสราง Animation



การออกแบบตวละคร

Character Design สาหรบผ ทเรมตนควรทารปทรง รปรางแบบงาย ๆ ไมตองมรายละเอยดมาก ใสส แสง

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

รายละเอยดทละสวน เพอใหออกแบบไดงายขนอาจออกแบบตวละครในโปรแกรม Illustrator หรอ วาดใน Flash

เลยกได

1. วาดโครงรางเพอกาหนดสดสวน ตวละคร

2. วาดสวนตาง ๆ ทละสวนตามลาดบชนงาน สวนใดทมการทาภาพเคลอนไหวหรอมการขยบ ใหแยก Layer

3. นาภาพทเตรยมไวมาประกอบกน

แลวเกบไวเปนตนแบบสาหรบเปลยนเปนทาทาง รปราง หนาตา อน ๆ

การออกแบบสวนของหนาตา และอารมณ

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

สราง Animation ภายหลง ซงในสวนของหนาตาจะมการเปลยนแปลงบอย ตางจากสวนอน ๆ

วาดภาพในมมตาง ๆ เชน ดานหนา ดานซาย ดานขวาและดานหลง ไวรอทา Animation เพอไมใหผชมรสกเบอหนาย



ตวอยาง การสราง Template ตวละครตนแบบอารมณตาง

การเขยนเรองราว (Storyboard) และ Script

หวใจสาคญของการสราง Animation คอการเขยนเรองราว ( Storyboard) เพอลาดบเหตการณ ลาดบ

เรองราวทละฉาก รขอจากดขอบเขตเวลาในการนาเสนอ นอกจากตองเขยน Storyboard แลว ตองกาหนดมมกลอง

ในแตละฉากดวยเพอชวยใหเรองราวดแปลกตานาสนใจ ซงควรกาหนดลงไปในการเขยน Storyboard ทาใหไม

เสยเวลาในการวาดภายหลง

การกาหนดมมกลองแบบตาง ๆ

1. มมกลองแบบ MS (Medium Short) เปนมมทเหนภาพครงตว ใชในการแสดงสหนาตวละครวาเปน

อยางไร

2. มมกลองแบบ CU (Close Up) เปนมมทเนนเฉพาะสวนทตองการใหคนดสนใจ เชน หนา ตา หรอการ

แสดงอารมณ



3. มมกลองแบบ ECU (Extreme Close Up) เปนมมทเนนเฉพาะจดเพอใหรวาเหตการณอะไร

4. มมกลองแบบ LS (Long Shot) เปนมมทบอกบรรยากาศ บอกเหตการณวาตวละครอยทใด

5. มมกลองแบบ ELS (Extreme Long Shot) เปนมมทบอกบรรยากาศมมกวาง

การแสดงภาพในมมมองแบบตาง ๆ

1. มมมองผานดานหลง เชน การสนทนา

2. มมมองชดตน หนาชด หลงเบลอ

3. มมมองชดลก หนาเบลอ หลงชด

4. มมมองแบบ Bird Eye view มองจากทสง



เทคนคการ Animation แบบตาง ๆ

1. แบบ Zoom In และ Zoom Out จบภาพเฉพาะจดทสนใจ หรอจบภามมกวาง ใชหลกการยอขยายท

Frame ปลายทาง

2. แบบการแพนกลอง (Pan) เชน การแพนมมกลองไปทางดานซาย ขวา ขนบนลงลาง ในทนตองเตรยม

ภาพทมความยาวมาก ๆ ไว

3. แบบการทลทกลอง (Tilt) เชน การเคลอนไหวแทนสายตาของตวละคร ขนลง ตองเตรยมภาพในแนวตง

ใหมความสง

4. การดอลลกลอง (Dolly) คอ การทตวละครอยนง ๆ แลวฉากเคลอนท ทาใหดเหมอนตวละครขยบจรง

การจดองคประกอบฉาก

ควรวาดฉากใหสอดคลองกบมมมองตาง ๆ ทกาหนดไวใน Storyboard รปแบบของภาพทวาด ภาพ

เดยวสามารถปรบเปลยนไดหลายรปแบบ

ในตว Animation ตวละครอาจทา

เปนแบบ Frame by frame เพอให

เหนการเคลอนไหวเลกนอย



การวาดรปใน Flash

Line Tool วาดเสนตรง สามารถปรบคา Stroke, Style, Scale ไดท panel Properties

Selection Tool เลอกวตถ/เคลอนยาย/ลบ/คดลอก

- เลอกวตถ แลวปรบคาท Properties

การแกไขเสนทหรองานทสรางไปแลว โดยใช Selection tool

- กด Shift เปนการเลอกเพม

- การเลอกทงหมดใชวธการลากคลม

วตถ

หรอ กด (Ctrl + A)

- Undo ยอนงานได 100 ครง

D

- การเคลอนยาย/คดลอก กด Alt + Selection



วางในระนาบเดยวกนการปรบรปราง ใช Selection ดดทขอบของรปทรงไดเลย (ไมตองเลอกวตถไว)

- ถาแตะทปลายเสนเปนการดดมมหรอยายปลายเสน หรอใช pen tool แทนได

Pen Tool วาดเสนโดยการกาหนดจดตอเนองกนไป

- การวาดแลวดดโคงขณะวาดใหคลกแลวลากเมาสดง

เสนใหโคงคลาย Photoshop

- Subselection ใชแกไขงานเฉพาะจด



Pencil Tool วาดเสนแบบอสระ

- วาดแบบ straighten ไดเสนตรง

- วาดแบบ Smooth จะปรบเสนให smooth

- วาดแบบ Ink อสระตามทวาด

Brush Tool การระบายส Fill (เวลาดดภาพสจะแยกจากกนจากขอบทงสองดาน ถาเปนส Strock จะไป

ดวยกนทงสองดาน)

- ปรบขนาดเสน

- หรอปรบ หวแปรงเปน Shape

Shape วาดรปรางตาง

- กด Shift ไดดานทกดานเทากน

- ปรบเปลยนรปราง และมมได

- สาหรบ Rectangle สามารถปรบขอบมน

ได

-



สาหรบ Oval

Start angle ทาใหวงกลมแหวง เปนองศาจาก

เสนลางขวา

End angle องศาสดทาย

Inner radius ทาเปนโดนทมวงกลมใน

Rectangle Primitive & Oval Primitive ใชวาดรปสเหลยม วงกลม แลวปรบคาทหลง

Poly Star วาดรปหลายเหลยม และวาดดาว ปรบคาท panel Tool Settings

- Style ปรบรปแบบเปน Poly หรอ Star

- Number of Sides จานวนเหลยม

- Star point size ปรบมมระหวางแฉก



ประเภทของวตถ

Shape เสนขอบกบสพน (Fill) แยกสวนกน และเวลาวาดซอนทบกนภาพจะ Intersect กน (เปนเนอเดยวกน

แกไขโดย

รปทไดจะเปนลกษณะ group กนเอาไว เมอมการวาดรปตอไปวตถจะถกแยกกนคนละชน ไมซอนทบ

กนเปนเนอเดยวกน

คลกท Object Drawing กอนวาดรป

สามารถแกไขและดดรปรางไดปกต โดย

การ Double click ทชนงานนนเพอ

แกไขงาน และ Double click พนท

ดานนอกอกครงเพอกลบส scene

การจดลาดบชนงาน (ชนงาน)

o Modify->Arrange จดขนมาบนสด จดขนบนทละ 1 ชน จดลงลางทละ 1 ชน จดลงลางสด

หรอใช Ctrl + ลกศรขน ลง



อปกรณปรบแตงวตถ

Paint Bucket (K) – เทส Fill (พน)

Ink Bottle (S) – เทสเสนขอบ

EyeDropper (I) – ดดส

Eraser (E) – ลบวตถ ถาลบขอบหายไปตองดดสขอบจากบรเวณอนมาแลวใช Ink Bottle เทสขอบลงไปใหม

Free Transform – ยอขยายวตถ เวลายอใหยอขยายทมมใดมมหนง แลวกด Shift ไวเพอไมใหอตราสวน

เปลยน

- การ Rotate ใหวางเมาสออกนอกกรอบทมมใดมมหนง บางครงตองม

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

ตองการ) การ Double Click ท

จดหมนจะเปนการ Reset คาจด

หมน

Gradient Transform – ตองปรบคาสเปนแบบไลสกอน ปรบได 2

แบบ คอ แบบ Linear, Radial

- กอนใชตองไลสรปกอน เพมหมดสเพมเพอใสสเพม

- ใช Gradien transform ปรบการไลส



Text การพมพขอความ

- Static text เหมาะสาหรบทา Animation

คลก เลอก Size Font Color พมพ กรอบจะขยายยาวตามทพมพ

- Dynamic text ใชกบการเขยนคาสง

- Input text ใชกบการเขยนคาสง

เทคนค Animation ใน Flash ม 3 แบบ

1. Frame by Frame

2. Shape tween

3. Classic tween

สญลกษณของ Timeline

1. Keyframe . คอภาพทมการเปลยนแปลงจากภาพกอนหนา

2. Frame คอภาพทไมมการเปลยนแปลง เปนภาพเดยวกนตลอดทก Frame

*** Insert Keyframe (f6) Clear Keyframe (Shift + f6)

Insert Frame (f5) Remove Frame (Shift + f5)



หลกการ คอการนาภาพนงวางเรยงตอเนองกน โดยการยอ Stage ทาสญลกษณ ( Symbol) วางบน

Timeline เพอลดขนาด file ไมใหใหญจนเกนไป (กาหนด Frame และ Keyframe ใหถกตอง)

1. Frame by Frame

- เลอก Timeline ใหม กด F6 หรอ click ขวา – >Insert Keyframe

- เปลยนแปลงภาพ หรอขยบ หมน

- การคดลอก keyframe ทตองการใชซากบกอน

หนานใหเลอก keyframe นน ๆ แลวกด Alt คาง แลวลากไปวางทใหม

- การแทรก frame ใหกด f5 ใน frame สดทายถาตองการทงไวนาน ๆ ใหเลอก frame

ทตองการแลว กด f5

- การใส background ควรสราง Layer ใหม

เพอปองกนปญหาทเกดกบ Keyframe งานท

สรางไปแลว ควรตงชอ Layer งานใหสอดคลองกบงานใน Layer นน

การทดสอบ Animation



กด Ctrl + Enter

เกยวกบ Layer

Show outline

ซอน Layer ถาคลกกญแจ จะเปนการ lock การทางานกบ วตถ แตสามารถทางานกบ timeline ได

ประเภทของ file

1. Swf file Animation ทเกดจากการกด Ctrl + Enter

2. Fla file ทใชแกไขใน Flash

--------The end frame by frame--------

2. Shape Tween การทา Animation โดยเปลยนวตถจากรปหนงไปเปนอกรปหนง ซงทาไดกบวตถทเปน

Shape กบ Drawing Object เทานน (รปวาดเทานน) หาม

. . Group

- วาดรปเรมตน insert Keyframe ทใหม ลบรปเดมทง วาดรปใหมทตองการเปลยน

- คลกขวา Timeline ->Create Shape Tween

*** ชวง Timeline สเขยว ไมสามารถแกไขวตถได ตองแกไขท Keyframe เทานน เนองจาก

เกดจากการคานวณของโปรแกรม



*** สามารถทาไดกบวตถหลาย ๆ ชน โปรแกรมจะทาการคานวณให

*** ถาตองการเพมวตถ ตองแยก Layer

การควบคมความเรวในการเลน ใหปรบทระยะหางบน Keyframe

- Insert frame (f5) ระหวาง Keyframe (เลนชาลง)

วธท 1

- Remove frame (shift + f5) ระหวาง Keyframe (เลนเรวขน)

- จบ keyframe ยาย คลกปลอย แลวจบอกครงยาย (ขอด Timeline เวลาไมเปลยน)

วธท 2

3. Classic Tween การทา Animation จากวตถเดม (Version เกาใช Motion Tween)

กอนทาตองเปลยนวตถใหเปน Symbol กอน โดย Modify->Convert to Symbol (f8) และในหนง

Layer ตองมวตถเพยงชนเดยวเทานน

Fade in (จางหาย-ปรากฏ)

. .

Alpha 0% 100%

- นาเขารปภาพ File->Import to stage (รอหนอยนะ)

- ถาปรากฎคาถามใหกด No ถาไมเจอ จะวางรปไดเลย (คาถามเกดจาก โปรแกรมจะถามวาจะนารปอน

ทมชอเหมอนกนวางวางหรอไม เครองจะนามาวางใหในลกษณะ frame by frame)

- คลกขวา Convert to symbol (f8) เนองจากภาพทนาเขามามลกษณะเปน bitmap

รป



- ตงคา เปลยนชอ

Type แบงเปน 3 ประเภท

- > Movie Clip สาหรบทา animation

-> Button

-> Graphic

- ปรบคา Properties

Brightness ปรบความสวาง เขม

Tint ยอมส ผสมสภาพใหมได

Alpha ความโปรงใส ใชบอยใน Fade in/out



- การใส Filters

- การสราง Animation โดย Insert Keyframe แลวปรบคา (คลกวตถซากอนเพอหาคา

Properties)

- Click ขวา Create Classic Tween (Timeline เปนสมวง)

- พมพขอความ กด f8 แปลงเปน Symbol->Movie Clip

*** ขอดของ Symbol – คอแกไขตวเดยว ทกตวบน Keyframe เปลยนแปลงใหหมด โดยการ Double Click เขาไปแกไขงาน

ตอ



Pic2

F5

Fade in คางไว Fade out

Pic1 . . . .

Alpha 0% 100% 100% 0%

รป รป



Panel Library เกบภาพทนาเขามา และ Symbol ทเราสรางไว

การแกไขให Double ท icon symbol

การพมพขอความถาไม Convert เปน Symbol จะไมสามารถแกไขเพอใส Effect ได



การทา Rotate ใหกบ Animation

1. Convert แยกสวนกน กรณ Group ไว

2. แยก ชนสวนแยก Layer และจดลาดบชนงานใหม



- วธท 1

(Ctrl+Shift+v)

cut->คลกขวาทวาง แลวเลอก Paste in place ตดมาจากไหนวางตรงนน

- วธท 2

Layers

เลอกวตถทกชนทจะแยกไวกอน แลวคลกขวาทวตถ เลอกคาสง distribute to

สลบ Layer เพอใหชนงานวางถกตอง

3. กอนทา Animation ใหยายจดหมนกอน



4. เหวยงไปกลบ ปญหาคอ ตาแหนงแรก กบสดทายไมตรงกน แกไขโดย คดลอก keyframe หรอ Insert keyframe ตอนทายไวกอน แลวระหวางกลาง Insert Keyframe แทรกแลวคอยยายตาแหนง

5. การหมนวตถทรงกลม ไมสามารถจบหมนเอง ตองกาหนดคาทโปรแกรม โดย Insert Keyframe สดทาย Classic tween แลวด Properties

ด Tweening-Rotate

- CW หมนตามเขม

- CCW หมนทวนเขฒ

- Auto ปกต

กาหนดรอบได รอบมาก หมนเรวขน



Mask Layer การบงภาพ

1. นาเขารปภาพ

2. ตองสราง Layer ใหมขนมาไวดานบนภาพ

3. วาดรปทรงเตมส fill ลงไปตรงสวนทตองการเหนภาพ (เสนของใสไดแตไมมผลตอการ Masking ไม

ใสดกวา)

4. คลกขวาเลเยอรบน เลอกคาสง Mask พรอมทง Lock เพอใหเหนผลของการ Mask ถาทางานอย

จะปลด lock ออกกได เพราะเวลาสง play กจะเหนการทางาน mask อยด



5. ถาจะทา Mask หลายจด ตองใช Shape เทานน (checkท Drawing Object)

6. นาภาพเขามาซอนเปน bg

7. สลบ Layer ลงมาดานลาง (ระวง ตองทาใหเปน Layer ปกต ดนไปขวาบนเขา mask ลงซายลาง

ออกจาก mask)

Masking ซอนภาพ

คอย ๆ เปด Mask

1. พมพขอความ lock layer

2. สรางเลเยอรใหม วาด shape ทา Mask ใช brush ระบาย และไมเปน drawing object

3. วาดแบบ frame by frame (f6)



การทาตวหนงสอเปน masking

1. พมพขอความ

2. สรางเลเยอรใหมวางดานลาง แปลงภาพเปน Symbol ใส animation โดย Insert Keyframe

ตอนทาย Classic tween หมน

3. Mask

การเขยนคาส งคม animation

Symbol Button : Timeline ของป ม ประกอบดวย 4 เฟรม คอ

1. Up ภาพป มในสถานะปกต

2. Over ภาพป มในสถานะเมอ mouse แตะโดน

3. Down ภาพป มเมอ mouse กดลงไป

4. Hit พนทรบคาของป ม

คาสงสราง Symbol ทาได 2 แบบ

1. คลกท Modify->Convert to symbol (f5) เมอมการวาดวตถบน Stage แลว

2. คลกท Insert ->New Symbol (Ctrl+f8) ยงไมมการวาดหรอวางวตถใด ๆ บน Stage

Insert ->New Symbol (Ctrl+f8)



- ออกแบบป ม

- Insert Keyframe ท over และ Down เปลยนแปลง

- นา button มาวางบน Scene

- สรางพนทรบคา (แกไขปญหาเรองมพนทวางในป ม เนองจากโปรแกรมจะจาสท Keyframe สดทาย)

กาหนดท Hit Insert Keyframe แลววาดพนทรบคา สอะไรกได

***ถาตอง copy Symbol คลกขวาท Symbol เลอกคาสง Duplicate ***

จดอางองตาแหนง พยามยามวางวตถไวทจดน



การสรางปมใส

- มเฉพาะพนทรบคาเทานน ดงนนวาดภาพป มลงพนท Hit เทานน

- Insert Keyframe ท Hit รปราง ส อะไรกได

- ดงป มทสรางมาวางบน stage จะมองเหนเปนสฟา เมอ play จะมองไมเหน



- เวลานา mouse ไปแตะ จะมรปนวมอใหกดได

การเรยกใชปมสาเรจรป Window->Library->Common Libraries->Buttons

สามารถดงมาใชงานบน Stage ได ซงม effect ใหเรยบรอยแลว และแกไขได แตหาม Convert Symbol

ซา จะทาใหไมสามารถใชได



Action Script ภาษาทใชเขยนคาสงควบคมงาน Flash สามารถใสคาสงได 2 ท คอ

1. Keyframe จะทาคาสงเมอไมแดงวงมาเจอกบ Keyframe ทใส action a

2. Button จาทาคาสงเมอ user มการกระทาหรอสงงานไวกบป ม (event)

วธการใสคาส ง แบบท 1 ใสบน Keyframe

1. วาด / เตรยม Animation ไมควรใสคาสงไวทน เพราะถามการยายวตถ คาสงจะถกยายดวย

2. สรางเลเยอรใหม แลวใสคาสง โดย insert keyframe ทตาแหนงทตองการ คลกขวา action

Mode นพมพเอง คาสงทใสผดใหลบทง ไมงนจะเกด error ภายหลง การกดปดหนาตาง action ไมใชการยกเลกคาสง

กด build script (ไมคฑา) เลอกคาสงในชด Timeline control แลว Double click ทคาสงทตองการใชงาน ท keyframe

จะมสญลกษณการใสคาสงอย ท timeline



วธการใสคาส ง แบบท 1 ใสบน Button

รปแบบการเขยนคาสง (action) บนป ม

on(event) { ตวอยาง on(press){

คาสง (); stop();

} }

1. วาดป มตาง ๆ

2. เมอกด ป ม Stop ใหคลกขวาทรปป มนน แลวใสคาสง Action->stop แลวเปลยน event



ไมตองพมพเองให คลกตามรายการ

on (press) {

stop();

}

*** Press กบ Release ตางกนตรงปลอยน press ทาตอนกดนว Release ทางานตอนปลอยเมาส

Roll over / Roll Out แตะเขา /ถงเมาสออก

-

- สาหรบ next frame กบ prever ใหเปลยนท type ของ คาสง goto

ตวอยางการทา Animation บนเวบ



Stop(); Stop(); Stop();

Action a a a

Contact

Gallery

fade in

Home

Bg+button

กด F5 Insert Frame

Fscommand – action สาหรบงานแบบ offline

(Global Function>Browser/Network>fscommand)

1. fullscreen – ขยายหนาตาง flash player ใหเตมหนาจอภาพ (ตงคา parameter เปน True)

2. allowscale – ลอกขนาดงานใหคงท (ตงคา parameter เปน false)

3. quit ออกจากโปรแกรม flash Player

เวลาเปดไฟล swf ปกต default ขนาดเทา stage แตสามารถยอขยายได



การนาเสนองานแบบ Full Screen ใหคลกทเมน View-> Full Screen เวลาออก ตองกด Esc เนองจากดานบนไมม Title bar

คาสง fullscreen

วธการใสคาสงสาหรบงาน Offline (เหมาะสาหรบงาน presentation เทานน)

1. คลกขวา Action ใสคาสงท Keyframe ท 1

2. ใชคาสงในชด Global Function>Browser/Network>fscommand

3. ใสคาสง Command = fullscreen และ parameters = true (ตวพมพเลกทงหมด)



4. การ Test movie (เพอ update ไฟลเ ทานน) จะมองไมเหนผล ตองไปเปดไฟลตวจรงดานนอก

5. กรณเปนภาพถาย ภาพอาจแตกไดเนองจากเวลาสรางงานงานมขนาดเลก เมอสงใหเตมจอภาพอาจแตก animation ก

เชนกน ถาซบซอนมาก อาจกระตก ดงนนควรออกแบบขนาดงานตามจรง

คาสง allowscale ลอกขนาดงาน

1. คลกขวา Action ใสคาสงท Keyframe ท 1เพมคาสง fscommand อกหนงคาสง

2. Test Movie Update file



3. ระวง ! อะไรทวางเกน Stage จะถกมองเหนดวยในคาสงน อาจตองใชเทคนค Mask หรอใชบางอยางบงไว

4. การใชคาสงน การยอขยายภาพจะไมมการยอขยายตาม

คาสง Quit

1. วาดป ม แลวใสคาสงทป ม และพมพคาสง Quit ในหวขอ command

2. เราสามารถใสคาสงไวท keyframe กได เชนให play animaition จบกอนแลวคอยปด

***ปญหาของงานแบบ offline :1. เครองตองลง flash player ไว แกไขโดย สรางไฟลเปน projector

คลกท เมน File->Publish settings…***



- เลอกชนดของไฟล ชนด Windows Projector (.exe) ใช

สาหรบเครอง pc และไมมโปรแกรม flash player ในการด

- กด Publish กอน เพอสรางไฟล แลวกด ok

- ผลทไดไมตางกน แตขนาดไฟลจะใหญกวา เพราะฝงตว

โปรแกรม flash player เขาไปในไฟลดวย

- กรณทมการ update หรอแกไขงานทหลง ตองคลกทคาสง

Publish ทเมน file เพอ update ไฟลทกไฟล

การสราง Animation ท movie clip

1. แปลงวตถเปน movie clip

2. สราง animation



กรณท Timeline ม animation แลว

- แปลง bitmap ทอยใน movie clip ใหเปน movie clip อกครงหนง (งานซอนงาน)

- ถาตองการเพมภาพให new layer ใสภาพใหม

- เวลา test โปรแกรมจะ play ท timeline เสรจกอน แลวจงเลน movie clip ดานในอกครงหนง

การสราง animation บน timeline ถากรณภาพเยอะ layer เยอะ เวลายายยายลาบากดงนนควรทา animation ใน movie ให

เรยบรอยกอน.

Animation ดอกไมหมน

- วาดรปดอกไม convert

- Double cle เขาไป convert

- ทา animation

Scene

MC “ดอกไมหมน”

MC “ดอกไม”

Rotate



- เลอก movie clip ดอกไมหมนมาวาง เปลยนส ใสเงาไดท filter

- ถาตองการเลนไมพรอมกน ตองจดลาดบการเลนท scene จด layer คนละ layer ตาแหนง keyframe ไมเทากน ลากครอบ

วตถ คลกขวา Distribute to Layer จด timeline ใหม



Movie Clip ซอนช นงาน

ปม animation

1. Select all –convert to symbol –button

2. Double click เขาไปใน symbol button

3. Insert keyframe ท over

4. Convert รปภาพเปน movie clip แลว Double click

Scene

MC “ดอกไมหมน”

MC “ดอกไม”

Rotate

btn

UP OVER



5. Convert อกครงเพอสราง animation

6. ยาย movie

7. เลอก timeline คลกขวา cut frame

8. Insert-new symbol

9. คลกขวาท timeline –paste frame

10. การสรางเงาใช

filter drop shadow Hide object



การเขยน action เพมเตม



อยากทาใหเปนป ม โดยนาป มใสมาวางทบ animation

สรางป มใส โดยตองสราง symbol button กอน

Insert keyfram ท hit

กลบไปทงาน animation นาป มใสมาวางสรางเลเยอรใหม



Action ท ปมใส

On(rollover) {

gotoAndPlay(2);

}

On(rollout){

gotoAnplay(11);

}

ลากเมาสผานมองเหนภาพ

1. เทคนค fade out

2. Import ภาพ เปน background

สรางเลเยอรใหมวาง สเหลยม

3. ถาจะใหกลบมาเลนใหม frameสดทาย ไมตองใส stop

การเขยน animation คลม mc 2 ตว ตองทาท mc แตละตว



เขยนคาสงทไหนควบคมทนน

วธท 1 เอาป มไปไวใน mc แต ป มจะตดไปกบ mc

วธท 2 ปมวางท scene คมขามชนงานโดย

ชนงานคาสง

ชนงาน 1) ชอ instance คอชอชนงานภายใน mc ทเราตงชอเอาไว

2) _parent คอชนงานทยเหนอขนไป 1 ชน นบจากทเราเขยน action

เชน on(press)}

Star.stop();

{



การตงชอตวเลกตวใหญมผล

กดปมส

- จรง ๆ แลวเตรยมรปสรอไว วางภาพไวใน mc

- Insert New Symbol movie clip

- Import ภาพเขาไปใน mc เลอกรป 1 รป แลวตอบ yes เพอเรยงเปน frame by frame



- กลบไป scene จบ mc มาวาง



-



-

Text แบงเปน 3 ชนด

1. Static - ขอความปกต

2. Input - กลองรบขอความ

3. Dynamic - กลองแสดงขอความ

Input กลองรบขอความ เชน ...

- เลอกอปกรณ เลอก properties – input text เลอกส และฟอนต แตไมมสกรอบตวอกษรแสดงอย

- คลกเมาสคางแลวลากกลองขอความ ยอขยายกลองได หามใช Freetransform เพราะจะเปนการ

ขยายฟอนต

ใชคกบการตงคาตวแปร (var)



- การกาหนดขอบเขตกลองขอความอาจวาดสเหลยมซอนดานหลง หรอคลกทอปกรณ show border around text ใน panel properties



- การตงคา input text – auto kern เอาออก เพราะถาเลอกเวลาเขยนคาสงจะ error

- การทา input text + dynaimic text ตองฝงfont ลงไปใหดวย ไมใชนนเวลาไปเลนทอน จะดง

font ของเครองนน ๆ มาแสดง วธการโดย

o คลกเลอก กลองขอความ เลอก properties->Embed…

o ระบ character ranges: เลอกเทาทจาเปนเพราะจะทาให file หนกมากขน พยายามอยา

เลอก All ใชงานเกยวกบอะไรเลอกเทานน



- ถาจะใหพมพภาษาไทยได ตองเลอกฟอนตภาษาไทยกอนสราง input text แลว คลกเลอก thai ใน

หนาตางน

- การตงคา paragraph หามยงกบคา Spacing และ Margin Letter Spacing

สามารถกาหนดรปแบบการแสดงผลไดท Behavior

o Single line แสดงผลบรรทดเดยวไมใหเคาะ Enter

o Multiline แสดงผลหลายบรรทด จะตองยดของเขต Input text ดวย เวลาพมพสดของจะ

ตดบรรทดให หรอเคาะ Enter จะขนบรรทดใหมให

o Multiline no wrap แสดงผลหลายบรรทด พมพขอความแลวตองตดบรรทดเอง



o Password พมพขอความประเภท Password รบไดแค 1 บรรทด ไมรบ Enter

- Max chars: ระบจานวนตวเลขสงสดกตวอกษร

ใชไดทงหมดไมวาจะบรรทดเดยว หลาย

บรรทด หรอ password

ตวอยาง การกรอกชอเพอสราง e-card

1. สราง Input text และ dynamic สรางป ม



2. การตงคา คลก input text – options->Variable: อะไรกตามทพมพ จะเปนตวแปรตามชอเชน

myname

3. การตงคา คลก Dynamic text – options->Variable: จะใหแสดงคาอะไรออกมา เชน myname

4. ถาตองการตงชอตวแปรคนละตว เพอใหป ม enter ทางานไดใหเปลยนชอท Dynaimic text เปน

myshow

5. เขยนคาสงทป ม คลกขวาทป ม action-button พมพคาสง ดงน

รปแบบ

on(press){

ตวแปร=ขอความ หรอ ตวแปร : ถาเปนขอความใส “ ” ถาเปนตวเลข ใส 123... :

myshow="Hello!"+ myname เครองหมาย + หมายถงการเชอมตอขอความ

}

หรอ

on(press){

myshow=1+3 เครองหมาย + หมายถงการบวก

}

*****การเวนวรรค ใหเวนวรรค ในเครองหมาย “ ”*****



6. เอา Select able ออก เพอไมใหผใชยงกบขอความ Dynamic text ได



ตวอยางเกมยงเปา

ทา aimation

สรางป มใส



และใส Action ทป มใส

On(press) {

Play ();

}

กลบไปท scene ทา animation เคลอนท

ทดสอบคะแนน



การคดคะแนน

1. สราง layer ใหม วาง Dynamic text ไว show คะแนน

2. Embed font และแสดงเครองหมาย –

3. กาหนดคาตวแปร เชน score

4. สรางหนาจบ



5. ใสคาสง ท Dynamic text

ท keyframe ท 1

ใสคาสง score=0;

6. ใสคาสงทป มใส

on (press) {

play();

_parent.score+=1; เราจะอางองคะแนนไปแสดงทชนงาน scene

}

7.



8. กรณยงไมได mc ใหสรางป มใสครอบ stage โดย insert new symbol

9. New layer นาป มใส miss มาวาง ขยายเทา stage สลบ layer ลงมาลางสด

10. ใสคาสงทป มใส

on (press) {

score-=1; **ชนงาน scene

}

การเปลยน cursor mouse

1. สราง cursor เลอกเปน mc

2. +จด Registration กาหนดภาพปลายทใชในการคลกอยจดน

3. วาง cursor บนสด



4. ตงชอ instance name ใหกบ cursor

5. ใสคาสง ท layer action และซอน mouse เดม

score = 0;

Cursor.startDrag(true);

Mouse.hide();

และท keyframe สดทายของ Layer action แสดงเมาส

stop();

Mouse.show(); พรอมทง Remove frame mc เมาสออก 1 เฟรมทเฟรมสดทาย



Sound ใน Flash แบงเปน 4 แบบ (Sync)

1. Stream เสยงจะเลนโดยดจากจานวนเฟรมทใสตามมา เฟรมยาวเลนนาน เฟรมสนเลนไดนดเดยว

2. Start เสยงจะเลนโดยไมสนใจ Timeline จะเลนไปเรอย ๆ จนจบเพลง และไมเลนซอนทบเสยง

ตวเอง

3. Event คลายกบ Start แตสามารถเลนซอนทบเสยงตวเองได

4. Stop ใชหยดเสยงแบบ Start กบ Event

1. File->Import->import to stage->เลอกไฟลเสยง เสยงจะถกเกบไวใน Library

วธทา

2. คลกท keyframe ทจะใสเสยง คลกท properties -

>sound name เลอก sound

Sync: stream ตองรวาตองใชกเฟรม ดท properties 8x24frs=192

Start มเฟรมทมเสยงเพยงเฟรมเดยวกเลนจนจบ เชคกอนวา

เพลงเดมเลนจบยงใหเลนจบกอนคอยเลนเพลงใหม

Event เลนซอนทบตวเอง เพลงเดมยงไมจบ เพลงใหมเลนเลย

Stop หยด ใสท keyframe เลอกเสยงทจะหยด แลวเลอก sync

แบบ stop สญลกษณเปนรปสเหลยมสมวง



การใสเสยง mv ภาพเสยงตรงกน

- ตองใช sync แบบ stream เทานน แลวทา animation ใหเทากบ เสยง

Sound effect เกม

- สมมต ใสทป มกด (กดพลาด และกดถก ตองใสในชนงาน)

ยงพลาด

- สราง layer ใหม Insert Keyframe Down ถาเสยงสนใหใชแบบ event เพราะ ถามการยงซา จะมเสยง

ออกมาใหม ถาเปน Start จะเลนครงเดยว

ยงโดน

- ชนงานป มใส ใชแบบ start

Background Music

- ใสท scene ทเลเยอรใหม ใช sync แบบ Start เลอก loop

การบงคบเปดปดเสยง

- New symbol



Action stop(); ทkeyframe 2

สรางป ม on off



กลบท scene แลวดง mc ไปวางหนาเวบ

การปรบคาคณภาพเสย’

ดบเบลคลกท เสยงใน Library



-mp3 เสยงเพลง

-Speech เสยงบรรยาย



ตงคา bit rate ตงสงไฟลหนกเลอกใหเหมาะสม, Quality



Load Movie เรยกไฟล swf ตวอนมาแสดง

(Global Function ->browser/Network ->loadmovie

- สรางไฟลใหมขนมาหนงไฟล

- ตงคา Stage ->Modify->Document ปรบ Stage ใหใหญขน เชน 700x500 px

- สราง mc ไวสาหรบการโหลด วาดเทากบงานทเราจะโหลด

- Convert เปน mc และปรบ Registration ไวท มมซายบน

- ตงชอ Instance name: display (สมมต) เพอใชในการเขยนคาสง

- สราง layer action ใสคาสงไวท keyframe แรก

- ไฟล load บนทกไวทเดยวกบไฟล movie ดวย

- สรางป มใหเลอกงาน 3 ป ม สราง layer ใหม

- ใส actionท ป ม

on (press) {

display.loadMovie("game.swf");

}



- Masking Display โดย New layer ใหม

การเปดไฟลประเภทอน

- เพมป มขน 1 ป ม

- Action ป ม

On(press){

getURL(“ชอไฟล”);

}

หรอ

on (press) {

getURL("http://www.google.com");

}

การแบงฉากในไฟลเดยวกน (Scene) (การเพม animation ลดผลกระทบกบ animation เดม)

เหมาะสาหรบการทา animation ยาวๆ, ทา preload **เวลาเลนเลนแบบวน loop ตามลาดบ scene

- เมน Window->Other panels->Scene (Shift + f2)

Scene 1 Test Scene – คาสงทดสอบเฉพาะ Scene ทเลอกอย

- เมน control->Test Scene (Ctrl+alt+Enter)

Scene 2 * ทกครงทสงจะมการสรางไฟล swf เฉพาะ Scene นน ๆ แตไมไดใช

Scene 3



- กดป ม Add scene

- จบสลบ scene ไดตามลาดบการเลน animation

- ตงชอ scene เพอสะดวกในการคนหา ชอ scene มผลตอการเขยนคาสง ตงชอภาษาองกฤษและ

ตวเลข

- เชน preload, main

- การคดลอก scene ใหกด Duplicate

จะคดลอก Timeline layout ทกอยาง

- การสลบ scene ใหคลกท Edit scene แทน panel

- สราง animation ใน mc

- นา preloadanimation ไปวาง บน Scene preload

- Insert new symbol –Mc (สราง preload ตามเปอรเซนตท load ได



- ทา animation แบบ Classic tween จะทากบวตถตวเดม ขนาดไฟลจะเบากวา ถา shape

จะมวตถใหมเกดขนทกเฟรม

- กด alt คางไว ขยายดานเดยวยดออก

- นา mc bar มาวางบน scene ตงชอ instance name = bar

กรณจะใหแสดงตวเลขในการ Load ตองใส Dynamic text แสดง % การ load

- สราง Dynamic text



กาหนด var ใหกบ Dynamic text

- var: percent

- var: loaded

- var: total

- var: remain

กาหนด Properties

- Embed, เอา auto kern ออก

- คาสงทใชทา preload ท keyframeแรก ของ scene preload

- New layer action

ปดเศษทศนยมทง เชคขนาดงาน หนวยเปน byte / 1024 ไดคาเปน kb

loaded = Math.round(getBytesLoaded()/1024);

กาหนดคาตวแปร loaded ใหเชคคาขนาดงานทใชจรง

total = Math.round(getBytesTotal()/1024);

remain = total-loaded; เหลออกเทาไรทยงโหลดไมเสรจ เอาตวแปรมาลบกน

percent = Math.round(loaded/total*100); เชคเปน % เทยบ



if (loaded == total) { เชคเงอนไขถาโหลดงานครบ 100% (== เปรยบเทยบคา)

gotoAndPlay("main", 1); ใหเลน animation ท scene main เฟรมท 1

}

bar.gotoAndStop(percent); กาหนด animation ใน mc bar หยดตามตวแปร

percent เมอ % ครบ 100 กหยด

- Insert frame ท Layer 1 เพอให animation วงวน loop ได

- Insert Keyframe ท Layer action ใสคาสง gotoAndPlay(1); เพอใหวงวนไปเลนท

frame ท 1 ใหม



จาลองการทดสอบ

- Ctrl + Enter

- View-> Simulate Download (ใน Flash player) Ctrl + Enter

UPLOAD ขนเวบ

1. ตองสรางไฟล .html โดย file->Publish Settings….



2. ตองไปคกบไฟล .swf โดยกาหนดชอไฟล index.html

3. จดตาแหนงหนาเวบ file->Publish Settings….tab HtML (กอน Publish ไฟล)

Dimensions: Percent

Scale: No scale



ขนตอนการ set งาน ขน server NetDesign

1. การ upload ผานวนโดว ท my document

ftp://student.netdesign.ac.th/ (Host name ของ Netdesign)

user: f537305

pw: 123

นาไฟลมาวาง

ทดสอบเขาเวบ http://student.netdesign.ac.th/f537305


ftp://student.netdesign.ac.th/�


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



เอาไฟลในเวบไปใช

ใน firefox

ใน IE



หากนอจจาระราด

การลาง Folder Tool ->Internet option ->Delete กอน 1 ครง



****โปรแกรมแปลงไฟล Flash swf->FLV

- Swf Decomplier 5…….



ของใหมใน Flash CS4, CS5

Spray brush

- เลอกส ท Properties แลวพนส การพน 1 ครง

จะเกบเปน 1 group

- ปรบขนาดท scale

- Random scaling จดใหญบางเลกบาง

สามารถปรบขนาดหวพน ไดท Width , Height

ดาวกระพรบ แบบไมใช script

- New Symbol Mc วาดดาว

- ใช Spray brush มาพน เปนดาว

- ท properties เลอก Edit เลอก Symbol ทตองการ



- ปรบ หวพนใหเทากน Width , Height

- แลวพน

Deco Tool สรางลวดลาย

แบบ Vine fill

- วาด ส fill เปน bg

- แลวใช Deco คลกในพนท จะมลวดลวยในพนททวาดไว

- เปลยนส ลาย ไดท propertie และสรางเองไดท Edit วาด Symbol mc ใหม



- สรางขอบเขต และแยก layer

- คลก Animate pattern สราง animation การงอกตอน test movie ใหแบบ frame by frame

แบบ Grid Fill



- เราสรางเองไดอก convert to symbol

- เลอกรปแบบการวาง ใน Cs5



แบบ Symmetry brush วางวตถในแนววงกลม

- เลอก Symbol

จบกานเลก เพอปรบระยะหางเปนองศา คลกใกลจดศนยกลางวงก

จะแคบ วางไกลจดศนยกลางวงของวตถกจะใหญ



ของใหมใน Flash CS5

แบบ 3D brush

แบบ Building Brush

แบบ decorate brush ลายตอเนอง



แบบ Fire animation ไฟลก ม animation ไฟลก frame by frame ให

แบบ Flame brush ไฟ ไมม animation ลากนาน ยงดาไหม

แบบ Flower Brush กลมดอกไม

แบบ Linghtning brush ฟาฝา

แบบ Particle system ม Symbol และสราง animation ลวงลงมา



ถาคา Gravity + ลวงลง – ไหลขนบน

แบบ Smoke animation ทาควน

แบบ Tree brush ตนไม



3D Action script 3.0

- สรางภาพ convert to mc

- คลก 3D Rotation Tool

- แบบ 3D Translation แบบ 3 มต แนวตงแกน y วงกลมดาตรงกลาง แกน z

- แบบ 3D Rotation หมน แบบ 3 มต

หมนตามแกน สเขยว x สแดง y นาเงน z สม อสระ

- Insert frame ทตองการ create motion tween มเสนทางการเลน animation เวลา

ขยบ animation จบเสน กจะแกไขใหทงหมด ไมเกยวของกบ Keyframe

- Timeline เปนสฟา แลวเลอนไมแดง จบภาพขยบ จะเกด keyframe ท Timeline อตโนมต

การคลกทขอบหลงของ Keyframe แลวขยายออกมา จะชวยให animation เลนชาลง

- การปรบ keyframe ยอย ตองกด Ctrl+click เลอนได



- การทาแบบ animation แบบ Motion Tween ม animation สาเรจใหดวย (ใชกบการเขยนคาสง

แบบ 3.0)

- Window-> Motion Presets



Bone (ใชกบการเขยนคาสงแบบ 3.0)

- ลากจากจดกงกลางไปยงจดตาง ๆ ของ mc

-

-

- เวลาขยบกระดก shape จะขยบตาม และใช Bind ชวยขยบเพอปองกนการขยบแลว shape เบยว

- กด Ctrl คลก เพมลดจด



-

- ใช Select จบด

- กด f5 เลอนไมแดง จบขยบ โปรแกรมจะสราง keyframeให



ลอกกระดกบางทอนไมใหหมน คลกเลอกกระดกทอนทตองการ – properties->joint rotation เอา Enable ออก

จดชนงานใหม

การเขยนคาสง

คาสงทเขยนตองเขยนบน keyframe เทานน ตงทป มไมได

การเขยนคาสงตองสราง function ขนมากอน พมพเองหมดไมมตวชวย

function myStop(e){ ชอฟงกชน และพารามเตอร 1 ตว เชน e (event)

stop();

}

btnstop.addEventListener(MouseEvent.CLICK,myStop)

function myPlay(e){

play();



}

btnplay.addEventListener(MouseEvent.CLICK,myPlay)

www.thaiflashdev.com แหลงรวมเทพ flash


http://www.thaiflashdev.com/�

Flash CS5 for Animation and Interactive Adobe Flash ... · แก้ไขโดย...

Documents

Transcript of Flash CS5 for Animation and Interactive Adobe Flash ... · แก้ไขโดย...