ขั้นตอนในการพัฒนาเว็บไซต์

ขนตอนในการพฒนาเวบไซต

เตรยมเนอหาทจะน าเสนอ

ก าหนดเปาหมาย(Target) : Animation "การสรางภาพเคลอนไหว" ดวยการน าภาพนงมาเรยงล าดบกน และแสดงผลอยางตอเนอง ท าใหดวงตาเหนภาพทมการเคลอนไหวในลกษณะภาพตดตา (Persistence of Vision) เมอตามนษยมองเหนภาพทฉาย อยางตอเนอง เรตนาระรกษาภาพนไวในระยะสนๆ ประมาณ 1/3 วนาท หากมภาพอนแทรกเขามาในระยะเวลาดงกลาว สมองของมนษยจะเชอมโยงภาพทงสองเขาดวยกนท าใหเหนเปนภาพเคลอนไหว ทมความตอเนองกน แมวาแอนเมชนจะใชหลกการเดยวกบวดโอ แตแอนเมชนสามารถน าไปประยกตใชกบงานตางๆไดมากมาย เชน งานภาพยนตร งานโทรทศน งานพฒนาเกมส งานสถาปตย หรองานพฒนาเวบไซต เปนตน การสรางภาพเคลอนไหวโดยการฉายภาพนงหลายๆภาพตอเนองกนดวยความเรวสง การใชคอมพวเตอรกราฟกสในการค านวณสรางภาพจะเรยกการสรางภาพเคลอนไหวดวยคอมพวเตอรหรอ คอมพวเตอรแอนเมชน หากใชเทคนคการถายภาพหรอวาดรป หรอ หรอรปถายแตละขณะของหนจ าลองทคอย ๆ ขยบ จะเรยกวา ภาพเคลอนไหวแบบการเคลอนทหยด หรอ สตอปโมชน (stop motion) โดยหลกการแลว ไมวาจะสรางภาพ หรอเฟรมดวยวธใดกตาม เมอน าภาพดงกลาวมาฉายตอกนดวยความเรว ตงแต 16 เฟรมตอวนาทขนไป เราจะเหนเหมอนวา ภาพดงกลาวเคลอนไหวไดตอเนองกน ทงนเนองจากการเหนภาพตดตา ในทางคอมพวเตอร การจดเกบภาพแบบแอนเมชนทใชกนอยางแพรหลายในอนเทอรเนต มหลายรปแบบไฟลเชน GIF APNG MNG SVG แฟลช และไฟลส าหรบเกบวดทศนประเภทอนๆ

ท าใหใคร(Visitor) : ใหบคคลทมความสนใจในเรองเกยวกบ Animation

ก าหนดกรอบแนวคด (Concept) : ยงคงมงมนทจะสรางสรรคผลงานตอไป บนพนฐาน

แนวคดทวา “เราไมจ าเปนตองท าใหเหมอนใคร แตเราจะพยายามสรางสรรคในสงทเราม

และเราใหในสงทดทสดทเราท าได”

Technology : เทคโนโลยการสราง Animation

รวบรวมขอมล (Search) : อปกรณในการน ามาสรางแอนเมชนนนถาไมนบคอมพวเตอร ก

จดวาคอนขางมราคาสงและหายากเลยทเดยว ซงแตกตางกบความสามารถซงนบวาจ าเปน

ส าหรบการท างานเปนอยางมาก ถงแมในปจจบนจะม Teblet ทนกแอนเมเตอรในไทยทก

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

ฝรงเศษ เยอรมน นกแอนเมเตอรเหลานนยงคงพดกนวา อปกรณหลกๆในการท างานก

ยงคงเปนกระดาษ ดนสอ และ โตะไฟ เพยงแตม Teblet หรอ เมาสปากกาเปนอปกรณท

เพมเขามาชวยในการท างานขนตอนสดทายกอนการ ตดตอไดเรวขน

โปรแกรม Flash คออะไร Flash เปนผลตภณฑทพฒนามาเพอสนบสนนการสรางงานกราฟก ทงภาพนง และภาพเคลอนไหว ส าหรบการน าเสนอผานเครอขายอนเทอรเนต Flash มฟงกชนชวยอ านวยความสะดวก ในการสรางผลงานหลากหลายรปแบบ ตลอดจนชดค าสงโปรแกรมมงทเรยกวา Flash Action Script ทเพมประสทธภาพในการท างาน และสามารถคอมไพล (Compile) เปนโปรแกรมใชงาน (Application Program) เชน การท าเปน e-Card เพอแนบไปพรอมกบ E-Mail ในโอกาสตางๆ Flash เดมเปนของ Macromedia แตปจจบนไดเปลยนมาเปนของ Adobe ซงไดถกพฒนาใหมลกษณะการท างานทสอดคลองตอโปรแกรมตางๆ ในชด Adobe มากยงขน ซงในการอบรมครงนไดใช Adobe Flash CS3 Professional

การจดเตรยมทรพยากร (Resource) : 1.1 สวนประกอบของหนาตางโปรแกรม

Flas h CS3

1. แถบชอหวเรอง (Title Bar) แสดงปมควบคมหลก (Control Menu) ชอโปรแกรม และปมควบคมหนาตางโปรแกรม

2. เมนบาร (Menu Bar) แสดงรายการค าสงตางๆ ของโปรแกรม 3. ทลบอกซ (Toolbox) แสดงปมเครองมอเกยวกบการวาดภาพ สรางภาพ ซงสามารถ ซอน / แสดง

ไดดวยการคลกเมน Windows > Tools 4. สเตจ (Stage) พนทสวนทใชในการวางวตถตางๆ หรออาจจะเรยกวา "เวท"

เมอมการน าเสนอผลงานจะ แสดงเฉพาะวตถบน Stage เทานน 5. ไทมไลน (Timeline) หนาตางแสดงเสนควบคมเวลาส าหรบการน าเสนอผลงาน

ประกอบดวยสวนท างานเกยวกบ Layer และ Timeline 6. แถบแกไข (Edit Bar) ใชแสดงชอซน จดการกบหนาจอโปรแกรม ปรบขนาดมมมองของสเตจ ซง

สามารถซอน/แสดง ไดดวยการคลกเมน Windows > Toolbars > Edit Bar

7. แถบคณสมบต (Properties) ใชก าหนดคาคณสมบตของ สเตจและออบเจกตตางๆ โดยรายละเอยดทปรากฏขนมาจะเปลยนแปลงไปตามเครองมอหรอออบเจกตทก าลงคลกเลอก สามารถซอน/แสดง ไดดวยการคลกเมน Windows > Properties > Properties หรอกดปม Ctrl + F3

8. พาเนล (Panel) หนาตางหรอชดค าสงพเศษทใชท างานเฉพาะดาน เชน พาเนล Color ใชเลอกและผสมส พาเนล Library ใชจดเกบออบเจกตตางๆ เปนตน ซงสามารถเปดเรยกไดดวยการคลกทเมน Windows

1.3 Toolbox

ทลบอกซ (Toolbox) เปนกลองเกบอปกรณทใชในการสราง ปรบแตง และแกไขวตถ เราสามรถเรยกใชงานทลบอกซ ไดโดยเลอกค าสง Windows > Tools แลวคลกเลอกเครองมอไดตามตองการ

เครองมอตางๆ บนทลบอกซ

Selection Tool ( V ) ค าสง Selection การเลอกวตถ

Subselection Tool ( A ) ค าสง Selection การเลอกวตถ

Free Transform Tool ( Q ) ยด หด ยอ หรอขยายขนาดของวตถ

Gradient Transform Tool ( F ) ปรบแตงการไลโทนสแบบ Linear และ Radial

Lasso Tool ( L ) ค าสง Selection การเลอกวตถ

Pen Tool ( P ) วาดเสนและสวนโคงตาง

Add Anchor Point Tool ( = ) เพมจดแองเคอร

Delete Anchor Point Tool ( - ) ลบจดแองเคอร

Convert Anchor Point Tool ( C ) ปรบเปลยนเสนโคงใหเปนมม

Text Tool ( T ) พมพตวอกษร

Line Tool ( N ) วาดเสนตรง

Rectangle Tool ( R ) วาดสเหลยม

Oval Tool ( O ) วาดวงกลม

Rectangle Primitive Tool ( R ) วาดสเหลยมแบบปรบแตงรปทรงได

Oval Primitive Tool ( O ) วาดวงกลมแบบปรบแตงรปทรงได

PolyStar Tool วาดรปหลายเหลยม/รปดาว

Pencil Tool ( Y ) ดนสอวาดภาพ

Brush Tool ( B ) แปรงระบายส

Ink Bottle Tool ( S ) ปรบแตงเสนขอบของวตถ

Paint Bucket Tool ( K ) เทสพน

Eyedropper Tool ( I ) คดลอกสทตองการ

Eraser Tool ( E ) ยางลบ

Hand Tool ( H ) จบ Stage เลอนไปยงทตองการ

Zoom Tool ( M,Z ) ซมยอ/ขยายหนาจอ

Stroke color ปรบแตงสของเสนขอบ

Fill color ปรบแตงสของพน

Black and white เปลยนส Stroke Color กบ Fill Color เปนสขาว/ด า

Swap colors สลบสระหวาง Stroke Color กบ Fill Color

No color เปลยนส Stroke Color ใหไมมส

1.4 การสรางไฟลงาน

ในการเปดโปรแกรมจะปรากฏหนาจอ Welcome Screen เพอใหคลกเลอกรปแบบในการสรางไฟลงาน จากนนจงสามารถปรบขนาดของสเตจไดตามตองการ

1. คลกเลอก Flash File (ActionScript 2.0) จากสวนของ Create New เพอสรางไฟลงานใหม

2. คลกปม จากนนจะปรากฏไดอะลอกบอกซ Document Properties ขนมา

3. พมพก าหนดขนาดความกวาง ความสงของพนทท างานลงในชอง Dimensions 4. ปรบสพนหลงท Background color ตามตองการ 5. ก าหนดอตราการเลนเฟรมตอวนาทท Frame rate โดยปกตจะอยท 25 fps

6. คลกปม เพอยนยนค าสง จากนนพนทสเตจจะมขนาดเปลยนแปลงไปตามคาทก าหนดไว

7. ออกแบบผลงานไดตามตองการ

1.5 มมมองจอภาพ

Stage เปนพนทหลกของการสรางงาน ดงนนเครองมอชดแรกทควรทราบ กคอเครองมอในกลม View ซงจะใชในการควบคม Stage เปนหลก เชน การยอ/ขยาย Stage การเลอน Stage เปนตน

Hand tool เปนเครองมอทใชเลอนและปรบขนาดของ Stage

Drag & Drop เพอเลอน Stage

ดบเบลคลกท ก าหนดขนาดของ Stage ใหมขนาดพอดกบความกวางของจอภาพ (Fit on screen)

Zoom tool เปนเครองมอปรบขนาดของ Stage

คลกท จะปรากฏรายการเลอกยอยท Modifier คลกเลอกรปแบบการยอ หรอขยาย จากนนน าเมาสมาคลกบน Stage

ดบเบลคลกท เพอก าหนดให Stage มขนาดเปน 100% อยางรวดเรว

การควบคม Stage ยงสามารถใชปม Zoom ทปรากฏอยมมบนขวาของ Stage หรอเลอกจากเมนค าสง View, Zoom in/Zoom out/Magnifier ไดเชนเดยวกน

1.6 การทดสอบผลงาน

ภายหลงจากการออกแบบภาพเคลอนไหวเรยบรอยแลว จากนนเราสามารถตรวจสอบผลงานทสรางไวได ดงน

1. คลกเมน Control > Test Movie หรอกดปม Ctrl + Enter จากนนผลงานทสรางไวจะปรากฏขนมาในลกษณะเปนมฟว

2. หรอสามารถดการเคลอนไหวของออบเจกตทอยในแตละเฟรมไดโดยคลกทเมน Control > Play หรอกดปม Enter ออบเจกตบนสเตจกจะเคลอนไหวตามทไดออกแบบไว

1.7 การบนทกไฟล

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

ตนฉบบจะไดสวนขยายเปน .fla การบนทกไฟลสามารถใชค าสง File > Save เพอบนทกลงไฟลเดม หรอ File > Save As… เพอบนทกเปนไฟลใหม

เนองจากไฟล .fla เปนไฟลตนฉบบ ไมสามารถน าไปใชงานได กอนน าไฟลภาพทสราง

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

1) การบนทกภาพนงในฟอรแมต GIF

การบนทกภาพวาดในฟอรแมต GIF ท าไดโดยเลอกค าสง File > Export > Export Image…

เลอกรายการ Save as Type เปน GIF Image (*.GIF)

รายการเลอกของ GIF Format ไดแก

Dimension ก าหนดขนาดของภาพ Resolution ก าหนดความละเอยด มคาเทากบ 72 dpi Include เลอกรปแบบการบนทกพนทรอบภาพ กรณทตองการบนทกเฉพาะพนททมภาพเทานน ให

เลอกเปน Minimum Image Area โปรแกรมจะไมน าพนทรอบภาพมาบนทกดวย แตถาเลอกเปนรายการ Full Document Size จะเปนการบนทกเทากบขนาดทระบจรงในรายการ Dimension

Colors เลอกจ านวนคาสทเหมาะสมกบภาพ ดงนนหากบางภาพมการใชสนอย กสามารถระบจ านวนสทเหมาะสมได

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

Transparent เลอกเพอก าหนดใหภาพมลกษณะของพนแบบโปรงใส Smooth เลอกใหภาพมลกษณะขอบกระดาง หรอขอบมน Dither solid colors เลอกลกษณะการเกลยสทมลกษณะใกลเคยงกน

2) การบนทกภาพนงในฟอรแมต JPEG

การบนทกภาพวาดในฟอรแมต JPEG ท าไดโดยเลอกค าสง File > Export > Export Image…

เมอเลอกไดรฟ/โฟลเดอร และตงชอไฟลภาพ ใหเลอกรายการ Save as Type เปน JPEG Image

(*.jpg) แลวคลกปม Save จะปรากฏรายการเลอกคาควบคม ดงน

Dimension ก าหนดขนาดของภาพ Resolution ก าหนดความละเอยด มคาเทากบ 72 dpi Include เลอกรปแบบการบนทกพนทรอบภาพ กรณทตองการบนทกเฉพาะพนททมภาพเทานน ให

เลอกเปน Minimum Image Area โปรแกรมจะไมน าพนทรอบภาพมาบนทกดวย แตถาเลอกเปนรายการ Full Document Size จะเปนการบนทกเทากบขนาดทระบจรงในรายการ Dimension

Quality คณภาพของภาพ กรณทน าไปใชกบเอกสารเวบ ควรก าหนดไวท 60 – 90 แตถาตองการบนทกเปนภาพตนฉบบเพอไปตกแตงดวยโปรแกรมอนตอไป ควรก าหนดเปน 100

Progressive เลอกเมอภาพทวาดมขนาดโตกวา 200 pixel เพอก าหนดใหภาพแสดงผลแบบโครงรางกอน แลวคอยๆ ชดขนเมอเวลาผานไป คลายๆ กบคณสมบต Interlace ของ GIF

3) การบนทกเปนภาพเคลอนไหว

การบนทกผลงานของ Flash เปนภาพเคลอนไหว หรอ Flash Movie สามารถเลอกไดสอง

ค าสง คอ File > Export > Export Movie… เมอเลอกไดรฟ/โฟลเดอร และตงชอไฟลภาพ ใหเลอกรายการ Save as Type เปน Flash Movie (*.swf) แลวคลกปม Save จะปรากฏรายการเลอกคาควบคมตางๆ โดยสามารถกด OK เพอบนทกไดโดยทนท

นอกจากนยงสามารถเลอกไดจากค าสง File > Publish > Settings… ซงเปนค าสงทนยมเลอกใชมากกวา กรณทเปนภาพเคลอนไหว โดยจะปรากฏหนาตางท างาน ดงน

เลอกฟอรแมตทตองการใชงาน

ใชงานในเครอขายอนเทอรเนต ใหคลกเลอกรายการ Flash และ HTML สราง Movie ในฟอรแมต QuickTime ใหเลอกรายการ QuickTime ซงจะไดไฟล Movie ทมสวน

ขยายเปน .mov สราง Movie ทสามารถน าเสนอไดทนท โดยไมตองอาศย Plug-Ins ใดๆ ใหเลอกรายการ Windows

Projector ซงจะไดไฟลทมสวนขยาย .exe หรอเลอกรายการ Macintosh Projector ส าหรบการน าเสนอบนเครองคอมพวเตอร Macintosh

เมอเลอกรปแบบไฟลทตองการแลว ใหคลกปม Publish โปรแกรมจะแปลงงานบน Stage

เปน Movie ตามฟอรแมตทเลอก โดยใชชอไฟลเดยวกบไฟล Flash ตนฉบบ

2. Color [ ท างานกบส ]

วตถใน Flash จะประกอบดวยสวนประกอบอยางนอยๆ 2 สวน ไดแก พนของวตถ

(Background หรอ Fill) และเสนขอบวตถ (Stroke) แตละสวนสามารถแสดงผลดวยสทแตกตางกนได เชน รปสเหลยมทมเสนขอบสด า และพนขางในเปนสน าเงน ดงนนการท างานเกยวกบส จงเปนการท างานทจะตองเกยวของตลอดเวลา โดยอาศยชดเครองมอเลอกส จาก Toolbox

รายละเอยดเกยวกบสวนควบคมสใน Toolbox

รายการเลอก No Color จะแสดงผลเมอคลกเลอกวาดสเหลยม หรอวาดวงกลม ดงนน

กอนเลอกสใหกบการวาดสเหลยม, วงกลม ควรคลกเลอกเครองมอวาดสเหลยม หรอวาดวงกลม

กอนทจะคลกปมเลอกส ซง เปนรายการส าคญมาก และมกจะเปนรายการทเขาใจผด เชน ถา

ตองการวาดวงกลมไมมสพน หลายๆ ทาน จะใชวธการเลอก Fill Color ใหกบสของ Background

เชน ถา Background เปนสขาว กจะเลอก Fill Color เปนสขาว ซงมความหมายทตางไป

การเลอกสใหกบกราฟกตางๆ ทวาดดวยเครองมอของ Flash นอกจากจะใชสวนควบคมสทกลาวไปแลว กจะมรายการเลอกสใน Properties Panel ของเครองมอนนๆ

แผงควบคมส (Color Panel)

Color Panel เปนการเพมประสทธภาพของการท างานเกยวกบส โดยเฉพาะในสวนทเปน

การไลโทนส (Gradient) เนองจากการสรางชดสการไลโทน ไมสามารถท าไดจากสวนควบคมส

ปกต Flash เตรยม Panel เกยวกบสไว 2 ชดคอ

Swatches ซงมการท างาน/ใชงานลกษณะเดยวกบ Toolbox

Color มสวนเพมเตมการใชสมากกวาปกต เชน การท าสแบบไลโทนลกษณะตางๆ, การใชภาพกราฟกมาเปนพนของกราฟก (Texture) รวมทงการปรบคาความโปรงใสของส (Alpha)

การเลอกรายการจาก Color มรายการทนาสนใจ คอ Fill Type ซงจะชวยใหผใชสามารถ

เลอกรปแบบของสไดหลากหลายลกษณะ เชน สพน (Solid Color), สไลโทนแบบเสนตรง (Linear

Gradient), สไลโทนแบบรศม (Radial Gradient) และการน าภาพจากภายนอกมาเปนพนของวตถ

(Bitmap Background)

ชดสแบบไลโทน

คลกเลอกรายการ Fill Type เปน Linear (ไลโทนในแนวระนาบ) หรอ Radial (ไลโทนในแนวรศม)

น าเมาสไปคลกใต Gradient definition bar จะปรากฏ Gradient Pointer ก าหนดจ านวน Gradient Pointer ตามตองการ

ถาตองการลบ Gradient Pointer ใหน าเมาสไปช ณ Gradient Pointer ทตองการลบ แลวลากออกจาก Gradient definition bar

ก าหนดสใหกบ Gradient Pointer โดยคลกท Gradient Pointer ชนทตองการ จากนนคลกเลอกสจาก Current Color ท าซ ากบ Gradient Pointer ต าแหนงอน

สามารถเลอนปรบต าแหนงของ Gradient Pointer โดยใชหลก Drag & Drop คลกปม Color Mixer Option Menu แลวเลอกค าสง Add Swatch เพอเพมสทก าหนดใหกบ

โปรแกรม

ความโปรงใสของสวตถ (Alpha)

รปดานหนาทไมไดก าหนดคาความโปรงใส กจะซอนทบรปดานหลงแบบไมเหนภาพดานหลง แตถาก าหนดรปดานหนาใหมคาโปรงใส กจะท าใหสของรปดานหนามลกษณะจาง และมองทะลไปเหนรปดานหลงได

3. Shape [ วาดรปทรงพนฐาน ]

3.1 รปแบบการวาดภาพ

การวาดภาพจากโปรแกรม Flash สามารถแบงออกเปน 2 รปแบบ ดงน

1) การวาดแบบ Merge Drawing รปทรงทวาดจะมผลตอรปทรงอน เชน เมอน ารปทรงทมพนเปนสเดยวมาซอนทบ กจะถกรวมเปนชนเดยวกน แตหากมสแตกตาง เมอเคลอนยายสวนทถกซอนทบกจะหายไปโดยอตโนมต ซงสามารถวาดไดดวยการคลกยกเลกปม Object Drawing ท

ทลพาเนล

รปทรงทมพนและเสนขอบ เมอน ามาซอนทบและ เสนขอบจะกลายเปนของรปทรงนน

ดบเบลคลกลากออกมา

2) การวาดแบบ Object Drawing ซงรปทรงทงในสวนของเสนและพนผวจะกลายเปนชนเดยวกน หากน ามาซอนทบกจะไมสงผลท าใหรปทรงเปลยนแปลงรปรางไปแตอยางใด โดยสามารถวาดไดโดยการคลกปม Object Drawing ซงจะปรากฏกรอบสเหลยมขนมาเมอเลอกหรอวาดรปทรงเสรจ

เมอน ารปทรงแบบ Object Drawing รปทรงกจะมลกษณะดงเดม

มาซอนทบและคลกลากออกมา

3.2 การก าหนดคณสมบตของรปทรง

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

Stroke Color สเสน Stroke Height ความหนาของเสน

Stroke Style รปแบบของเสน Custom Stroke Style เลอกก าหนดรปแบบเสนเอง

Cap รปแบบของปลายเสน ส าหรบรปทรงแบบปลายเปด โดยมใหเลอก 3 แบบ ดงน

None ปลายเสนมลกษณะเปนเสนตดพอดกบความยาวของเสน Round ปลายเสนมลกษณะโคงมน Square ปลายเสนมลกษณะเปนเสนตดออกมา

None Round Square

Fill Color สพน Stroke hinting ชวยลดการเบลอในสวนโคงของเสนตรง

Scale ความหนาของเสนทสมผสกบมมมอง Miter ความแหลมของมม โดยจะสมพนธกบรปแบบของมมทก าหนดไวในชอง Join Join รปแบบของมม โดยมใหเลอก 3 แบบ ดงน

Miter มมแหลม

Round มมโคงมน

Beval มมตด

Miter Round Beval

3.3 การวาดเสน

การวาดเสนสามารถแบงไดเปนการวาดเสนตรงดวย Line Tool และการวาดเสนอสระดวย Pencil Tool โดยสทปรากฏขนมาจะเปนสทเลอกไวในชอง Stroke Color

1) การวาดเสนตรงดวย Line Tool

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

1. คลกปม Line Tool ททลพาเนล หรอกดปม N จากนนตวชเมาสจะมลกษณะเปลยน เปน 2. คลกเมาส 1 ครง เพอก าหนดจดเรม 3. ลากเมาสมายงต าแหนงและทศทางทตองการ เมอปลอยเมาสกจะปรากฏเสนตรงขนมา โดยสามารถ

กดปมคางไวในขณะลากเมาสได ดงน

ปม Shift เปลยนทศทางของเสนไปครงละ 45 องศา ปม Alt ใหจดเรมตนเปนจดศนยกลางของเสน

2) การวาดเสนอสระดวย Pencil Tool

การวาดเสนอสระดวย Pencil Tool ผลงานทไดจะมลกษณะเหมอนกบการใชดนสอวาดภาพลงบนกระดาษ โดยสามารถเลอกปรบใหเปนเสนตรง เสนโคง หรอเปนเสนอสระได

1. คลกปม Pencil Tool ทพาเนล หรอกดปม Y จากนนตวชเมาสจะมลกษณะเปลยนเปน 2. คลกปม Pencil Mode คางไว แลวลากมาทางขวา เลอกปรบปรบรปแบบของเสน

Straighten ปรบใหเปนเสนตรง Smooth ปรบใหเปนเสนโคง โดยสามารถปรบความโคงมนไดทชอง Smoothing ของ

Properties Ink ไมมการปรบรปแบบใดๆ ใหภาพใกลเคยงการวาดมากทสด

3. ลากเมาสวาดรปทรงทตองการ โดยสามารถกดปม Shift คางไว เพอวาดเสนตรงในแนวตงหรอแนวนอน

3.4 การวาดรปทรงเรขาคณต

1) วาดรปสเหลยมดวย Rectangle Tool

การวาดรปสเหลยมดวย Rectangle Tool จะสามารถปรบแตงเสน Path ดวยปมเครองมอ Pen ได แตจะตองก าหนดคาความโคงของมมกอนทจะท าการวาด ส าหรบขนตอนมดงน

1. คลกปม Rectangle Tool ททลพาเนล หรอกดปม R จากนนตวชเมาสจะมลกษณะเปลยนเปน

2. ก าหนดคาคณสมบตพรอมทงความโคงของมมทง 4 ของรปสเหลยมลงใน Properties โดยในทนใชคา 0 ซง จะไดเปนสเหลยมมมฉาก

3. คลกเมาส 1 ครง เพอก าหนดจดเรมตน 4. ลากเมาสทแยงไปยงต าแหนงและทศทางทตองการ เมอปลอยเมาสกจะปรากฏรปสเหลยม

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

แนนอน

2) วาดรปสเหลยมพรอมปรบแตงรปทรงดวย Rectangle Primitive Tool

เมอวาดรปสเหลยมดวยปม Rectangle Primitive Tool จะปรากฏจดควบคมขนมา ซงชวยใหสามารถปรบแตงรปทรงในภายหลงได และหากกดปมตางๆ คางไวกจะใหผลเชนเดยวกบการสรางรปสเหลยมดวยปม Rectangle Tool

1. คลกปม Rectangle Primitive Tool ททลพาเนล หรอกดปม R จากนนตวชเมาสจะมลกษณะเปลยนเปน

2. คลกเมาส 1 ครง เพอก าหนดจดเรมตน 3. ลากเมาสทแยงไปยงต าแหนงและทศทางทตองการ เมอปลอยเมาสกจะปรากฏรปสเหลยมพรอมทง

จดควบคมขนมา ซงสามารถพมพเปลยนคาความโคงของมมทง 4 ลงใน Properties หรอใหด าเนนการตามขนตอนท 4

4. คลกปม Selection Tool ททลพาเนล หรอจะกดปม V 5. คลกบรเวณมมของรปสเหลยม จากนนตวชเมาสจะมลกษณะเปลยนเปน 6. ลากเมาสเขา-ออกเปลยนความโคงมนของมม ไดตามตองการ

3) วาดรปวงกลมดวย Oval Tool

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

1. คลกปม Oval Tool ททลพาเนล หรอกดปม O จากนนตวชเมาสจะมลกษณะเปลยน เปน 2. ก าหนดคาคณสมบตพรอมทงคามมเรมตน มมสดทาย และรศมวงกลมในของรปวงกลม ลงใน

Properties โดยในทนใชคา 0 ซงจะไดเปนรปวงกลม/วงร 3. คลกเมาส 1 ครง เพอก าหนดจดเรมตน 4. ลากเมาสทแยงไปยงต าแหนงและทศทางทตองการ เมอปลอยเมาสกจะปรากฏรปวงกลมขนมา

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

แนนอน

4) วาดรปวงกลมพรอมปรบแตงรปทรงดวย Oval Primitive Tool

ส าหรบรปวงกลมทสรางดวยปม Oval Primitive Tool จะสามารถเลอกก าหนดคาคณสมบตหรอเลอกปรบแตงรปทรงจากจดควบคมทปรากฏขนมาในภายหลงกได

1. คลกปม Oval Primitive Tool ททลพาเนล หรอกดปม O จากนนตวชเมาสจะมลกษณะเปลยนเปน

2. คลกเมาส 1 ครง เพอก าหนดจดเรมตน 3. ลากเมาสทแยงไปยงต าแหนงและทศทางทตองการ เมอปลอยเมาสกจะปรากฏรปวงกลมพรอมทง

จดควบคมขนมา ซงสามารถพมพเปลยนคาลงใน Properties หรอใหด าเนนการตามขนตอนท 4

4. คลกปม Selection Tool ททลพาเนล หรอจะกดปม V

5. คลกทจดควบคม จากนนตวชเมาสจะมลกษณะเปลยนเปน 6. ลากเมาสขน-ลง เพอปรบมมเรมตน 7. คลกทจดควบคม 8. ลากเมาสขน-ลง เพอปรบมมสดทาย 9. คลกทจดควบคม 10. ลากเมาสเขา-ออก เพอปรบรศมของวงกลมใน

5) วาดรปหลายเหลยม/รปดาวดวย PolyStar Tool

ส าหรบปม PolyStar Tool จะชวยใหสามารถวาดรปหลายเหลยมหรอรปดาวไดตามตองการ โดยสามารถก าหนดดานหรอแฉกไดตงแต 3-32 ดาน

1. คลกปม PolyStar Tool ททลพาเนลจากนนตวชเมาสจะมลกษณะเปลยนเปน

2. ท Properties ใหคลกปม จากนนปรากฏไดอะลอกบอกซ Tool Settings ขนมา 3. ทชอง Style ใหคลกเลอกรปแบบของรปทรง โดยมรายละเอยดดงน

o polygon วาดรปหลายเหลยม o star วาดรปดาว

4. พมพจ านวนดาน/แฉกลงในชอง Number of Sides โดยพมพคาไดตงแต 3-32 5. พมพคาความลกของแฉกดาวลงในชอง Star point size โดยพมพคาไดตงแต 0-1 ซงคา 0 รปดาวจะม

ความแหลมมากทสด

6. คลกปม เพอยนยนค าสง 7. คลกเมาส 1 ครง เพอก าหนดจดเรมตน 8. ลากเมาสทแยงออกมาจากจดศนยกลาง เมอปลอยเมาสกจะปรากฏรปหลายเหลยม/รปดาว ขนมา

3.5 การใชแปรงพกน

Brush Tool เปรยบเสมอนแปรงพกนทใชวาดภาพลาดเสนหรอระบายสลงบนรปทรงตางๆ โดยสามารถก าหนดขนาดของหวแปรง ลกษณะของหวแปรง และรปแบบในการระบายสไดดวย

1) วาดภาพลายเสนดวย Brush Tool

การวาดเสนอสระดวย Pencil Tool สทปรากฏขนมาจะเปนสเสน (Stroke) แตส าหรบการวาดภาพลายเสนดวย Brush Tool จะใชสพน (Fill) แทน ส าหรบขนตอนมดงน

1. คลกปม Brush Tool ททลพาเนล หรอกดปม B จากนนตวชเมาสจะมลกษณะเปลยน เปน

2. คลกปม Brush Size คางไว และเลอกขนาดของหวแปรง

3. คลกปม Brush Shape คางไว และเลอกลกษณะของหวแปรง 4. ลากเมาสวาดรปทรงทตองการ โดยสามารถกดปม Shift คางไว เพอวาดเสนตรงในแนวตงหรอ

แนวนอน

2) ระบายสดวย Brush Tool

นอกจากการวาดภาพลายเสนแลว Brush Tool ยงสามารถใชระบายสไดอก โดยหากก าหนดขนาดและลกษณะของหวแปรงเรยบรอยแลว กยงสามารถเลอกรปแบบในการระบายสไดดวย

1. คลกปม Brush Tool ททลพาเนล หรอกดปม B จากนนตวชเมาสจะมลกษณะเปลยน เปน

2. คลกปม Brush Mode คางไว แลวเลอกรปแบบในการระบายส

o Paint Normal ระบายทบเสนและพนของรปทรง

o Paint Fills ระบายทบเฉพาะสวนของพนโดยไมมผลตอเสน

o Paint Behind ระบายเปนพนหลงโดยไมมผลตอรป

o Paint Selection ระบายเฉพาะพนของบรเวณทเลอกโดยไมมผลตอเสนและพนหลง

o Paint Inside ระบายภายในขอบเขตของพนทดานใน

3. ลากเมาสระบายสลงบนรปทรงไดตามตองการ

Paint Normal Paint Fills Paint Behind

Paint Selection Paint Inside

3.6 การลบรปทรง

การลบดวยปม Eraser Tool จะสามารถเลอกลบทงรปทรงหรอเลอกลบเฉพาะเสนหรอพนกได อกทงยงสามารถเลอกเปลยนขนาดและลกษณะของหวยางลบไดอกดวย

1) ลบรปทรงดวย Eraser Tool

เมอเลอกลบรปทรงดวย Eraser Tool จะมรปแบบในการลบเพมขนมาใหเลอก เชน สามารถลบเสนและพน ลบเฉพาะพน ลบเฉพาะเสน ลบเฉพาะสวนทเลอก หรอลบเฉพาะขอบเขตของพนทดานในกได ส าหรบขนตอนมดงน

1. คลกปม Eraser Tool ททลพาเนล หรอกดปม E จากนนตวชเมาสจะมลกษณะเปลยน เปน

2. คลกปม Eraser Mode คางไว แลวเลอกรปแบบในการลบ

o Eraser Normal ลบเสนและพนของรปทรง

o Eraser Fills ลบเฉพาะสวนของพนโดยไมมผลตอเสน

o Eraser Lines ลบเฉพาะสวนของเสนโดยไมมผลตอพน

o Eraser Selected Fills ลบเฉพาะพนของบรเวณทเลอกโดยไมมผลตอเสน

o Eraser Inside ลบภายในขอบเขตของพนทดานใน

3. คลกปม Eraser Shape คางไว และเลอกขนาดของหวยางลบ 4. ลากเมาสลบบรเวณพนททตองการ

Eraser Normal Eraser Fills Eraser Lines

Eraser Selected Fills Eraser Inside

2) ลบเสน/พนดวย Eraser Tool โดยใชปม Faucet

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

1. คลกปม Eraser Tool ททลพาเนล หรอกดปม E

2. คลกปม Faucet จากนนตวชเมาสจะมลกษณะเปลยนเปน 3. คลกลงบนเสนหรอพนของรปทรงทตองการลบ

4. Selection [ การเลอกวตถ ]

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

Selection Tool ส าหรบเลอกวตถในสภาวะปกต

Subselection Tool ส าหรบการเลอกวตถในโหมดจดเชอม

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

สงส าคญทสดในการเลอกวตถใน Flash กคอ อยาลมวาวตถทกชนเกดจาก “จด” หลายๆ จดมาประกอบรวมกน และแตละวตถจะประกอบดวยโครงสรางอยางนอย 2 สวนคอ สวนทเปน “Fill” และสวนทเปน “Stroke” ดงน

4.1 การเลอกวตถ หรอกลมวตถดวย Selection Tool

คลกเลอกเครองมอ Selection Tool เลอกวตถ โดยยดหลกดงน

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

เลอกพนวตถ น าเมาสไปชทพนวตถ แลวคลกหรอ ดบเบลคลก

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

เลอกวตถหลายๆ ชน คลกวตถชนท 1 กดปม Shift คางไว แลวคลกวตถชนถดไปเรอยๆ เลอกวตถทกชนบน Workspace และ Stage กดปม Ctrl + A

4.2 ยกเลกการเลอกวตถ

น าเมาสไปคลกบนต าแหนงวางๆ ของ Stage หรอ เลอกเมนค าสง Edit > Deselect All

4.3 ซอนการเลอกวตถ

บางครงผใชอาจจะตองการซอนการเลอก (Selection) ไวชวคราว เพอท างานหรอ

ตรวจสอบผลใหถกตองกอนการใชงานจรง ซงกระท าไดโดยเลอกเมนค าสง View > Hide Edges

หรอกดปม Ctrl + H

4.4 การยกเลกค าสง (Undo)

เมอสงงานใดๆ ผดพลาด สามารถยอนกลบ หรอยกเลกค าสงนนๆ ไดโดยคลกปม Ctrl + Z

หรอ Edit > Undo… ซงสามารถยกเลกค าสงยอนหลงไดมากกวา 1 ครง

4.5 ปรบแตง แกไขวตถ

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

แกไข ปรบเปลยนรปทรง ขนาด และลกษณะไดงาย รวดเรว

1) เปลยนรปทรง

กราฟกจาก Flash เกดจากการรวมกนของ “จด” ท าใหการปรบแตง เปลยนรปทรงกระท า

ไดงาย และสะดวก เพยงแตใชหลกการ Drag & Drop กท าใหรปทรงพนฐาน เชน วงกลม, วงร,

สเหลยม เปนสภาพเปนรปทรงอสระอนๆ ไดตามตองการ เชน

การเปลยนรปทรงของวตถ มหลกการดงน

วาดรปทรงพนฐานทตองการ จากตวอยางคอรปสเหลยม

เลอกเครองมอ Selection

น าเมาสไปชบรเวณเสนขอบของรป สงเกตเมาสจะมรปรางเปน กดปมเมาสคางไว เมอลากเมาสรปทรงจะถกยดหรอขยาย หรอหดตวตามทศทางการลากเมาส

น าเมาสไปชบรเวณมมเหลยมของรป สงเกตเมาสจะมรปรางเปน กดปมเมาสคางไว เมอลากเมาสรปทรงจะถกยดหรอขยาย หรอบดตวตามทศทางการลากเมาส

2) ตวอยางการวาดจรวดแบบงาย

1. วาดสเหลยมผนผา

2. เลอกเครองมอ Move เลอนไปชทมมบนขวาของสเหลยม ดงเขามาต าแหนงกงกลางของดานขวา ถาดงแลวสดสวนบดเบยวใหคลก เพอตรงต าแหนงการบดภาพ จากนน ท าซ ากบมมลางขวา

3. เลอนไปชทขอบซาย แลวดงเขามาดานใน ใหไดเปนรปจรวดดงตวอยาง

3) การยายวตถ

คลกเลอกเครองมอ Selection Tool เลอกวตถ แลวลากเมาสเพอยายวตถไปยงต าแหนงใหม เลอนวตถเปนแนวเฉยง 45 องศา ใหกด Shift ดวย เลอนวตถเปนระยะทางสนๆ ครงละ 1 pixel ใหใชปมลกศร เลอนวตถเปนระยะทางสนๆ ครงละ 10 pixel ใหใชปมลกศร พรอมกบการกด Shift

เลอนวตถไปยงต าแหนงตางๆ โดยระบพกด ใหระบพกด x, y จาก Shape Propertiesต าแหนงมมบนซายของ Stage จะมพกดเปน 0, 0

4) การยอ/ขยาย และปรบรปทรงของวตถ

เลอกวตถ

คลกปมเครองมอ Free Transform Tool

น าเมาสไปชทมม หรอขอบวตถ แลว Drag & Drop เพอปรบขนาด หรอรปทรงตามตองการ

คลกเลอกจากเมนค าสง Modify > Transform,… ซงมค าสงใหเลอกทงค าสงหมนวตถ,ค าสงกลบดานของวตถ เปนตน

4.6 การจดเรยงวตถ (Alignment)

บางครงวตถทตองใชงานจะมมากกวา 1 ชน ซงจ าเปนตองจดเรยงต าแหนงใหอยในแนว

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

1. วาดวตถใหอยนอก Stage

2. เลอกวตถดวยเครองมอ Move 3. เปด Align Panel

4. คลก ตอดวย และ

4.7 การคดลอกลกษณะเสนขอบวตถ

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

สะดวกกวาการปรบเปลยนทละชน ตวอยางมวตถบน Stage 3 ชนลกษณะตางๆ กน ดงภาพ

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

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

คลกเลอกเครองมอ Eyedropper น าเมาสซงมรปรางเปน Eyedropper ไปชทเสนขอบของสเหลยมชนตนฉบบ (สเหลยมดานขวาสด)

สงเกตไดวาเมาสจะมรปรางเปน แสดงวาไดเลอกเสนขอบวตถไดถกตอง เมอคลกเมาส 1 ครง

เมาสจะเปลยนรปรางเปน แสดงวาขณะน Flash อยในโหมด Ink Bottle ซงเปนโหมดในการคดลอกลกษณะเสนขอบนนเอง

น าเมาสทเปนรปราง ไปคลกบนวตถชนอนๆ ทตองการปรบเปลยนลกษณะเสนขอบ

4.8 กลมวตถ (Group)

ภาพกราฟกหลายๆ ภาพ ไดจากภาพ หรอรปทรงยอยหลายๆ ชนมารวมกน เพอใหการ

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

เปนกลมเดยวกนโดยเลอกวตถทกชน แลวเลอกเมนค าสง Modify > Group และเมอตองการแยกกลบสสภาพเดมกเลอกค าสง Modify > Ungroup

รปการตนทเกดจาก Shape หลายชนประกอบรวมกน

ปญหาจากการยาย Shape รปทยงไมไดรวมกลม

รปทผานการรวมกลมแลวจะมเสนขอบสฟาลอมรอบ

4.9 การแยกชนสวนของวตถ

วตถบางชนทเปน Group หรอ Instance เมอจะตองน ามาท าเปน Movie แบบ Shape

Tweening จ าเปนตองแยกชนสวนของวตถใหอยในสภาวะ “จด” กอนเสมอ ซงท าไดโดยเลอกวตถ

กอน จากนนจงใชเมนค าสง Modify > Break Apart หรอกดปม Ctrl + B

รปภาพในสภาวะกลม

รปภาพทผานการ Break Apart แลว

4.10 การปรบแตงแกไขวตถทเปน Group

วตถทอยในสภาวะ Group สามารถยอ/ขยาย หมนไดอสระ แตจะไมสามารถปรบแตงแกไขเกยวกบสได หากตองการปรบเปลยนสของวตถทเปน Group จะตองเขาไปแกไขในโหมดจอภาพเฉพาะเกยวกบ Group ซงกระท าไดโดยการดบเบลคลกทวตถนนๆ จอภาพจะเขาสโหมดการแกไข Group ซงสงเกตไดจาก

Scene 1 หมายถงจอภาพในโหมดหลก Group หมายถงจอภาพในโหมดแกไข Group จะสงเกตไดวาวตถชนอน จะมสทจางไป

จอภาพโหมดปกต (Scene1) โหมดแกไข Group จะพบวาภาพคลนทะเลจะจางกวาปกต

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

ดวยทกครง

5. SYMBOL AND INSTANCE [ซมโบลและอนสแตนซ ]

การสราง Movie ดวย Flash จ าเปนตองเกยวของกบ Symbol และ Instance ดงนนการศกษาวา Symbol และ Instance คออะไร มความส าคญอยางไร ใชงานอยางไร จงเปนสงส าคญมาก อยางไรกตาม Flash มการก าหนดประเภทของวตถไวหลากหลายลกษณะ โดยสามารถแบงไดดงน

Dot หรอ Part เปนสวนยอยทสดของวตถ มลกษณะเปนจดเลกๆ Shape เปนวตถทเกดจาก Dot หลาย Dot มาผสมกน โดยจะเรยกวตถทสรางดวยเครองมอสราง

กราฟกพนฐานวา Shape ยกเวน Text Tool

Group เปน Shape หลายๆ ชนทรวมกนเปนชดเดยว เกดจากค าสง Modify, Group รวมทงขอความจาก Text Tool

Symbol เปนวตถทถกแปลงสภาพเพอพรอมสราง Movie เกดจากการแปลงวตถตางๆ รวมถงการสราง Button, Movie Clip และการน าเขาภาพจากแหลงอนๆ สามารถตรวจสอบไดวาไฟลทท างานม Symbol อะไร ประเภทใด จาก Library Panel (เรยกดวยค าสง Window, Library)

Graphic เปน Symbol ภาพนง Button เปน Symbol ปมกดทสามารถคลกได Movie Clip เปน Symbol ภาพเคลอนไหว

Instance เปน Symbol ทน ามาใชงานบน Stage

5.1 ตรวจสอบ Symbol ส าหรบไฟล

เมอมการเปดไฟลหรอสรางไฟลใดๆ บางครงอาจจะไมทราบวาไฟลนนๆ ม Symbol ใด

บาง โปรแกรมมค าสงในการตรวจสอบ Symbol โดยเปด Library Panel ดวยเมน Window > Library

Library ทม Symbol

5.2 แปลงวตถเปน Symbol

การสรางภาพเคลอนไหวแบบ Motion Tweening หรอการท าระบบโตตอบ จ าเปนตอง

ท างานกบ Symbol ดงนนวตถหรอภาพกราฟกใดๆ กตาม จะตองแปลงสภาพจาก Shape, Group

หรอ Picture ใหเปน Symbol กอนและจะตองเลอก Behavior ของ Symbol ใหตรงกบลกษณะการ

ใชงาน เชน Symbol ทตองการก าหนดใหคลกไดเพอสงงานใดๆ จะตองก าหนดเปน Button ภาพ

ใดๆ ทมการเคลอนทหรอการเคลอนไหว เชน ลอรถทตองหมน ควรก าหนดเปน Movie Clip หรอ

Symbol ทแสดงเปนเพยงภาพนง กเลอกเปน Graphic เปนตน

การแปลงวตถใหเปน Symbol มหลกการดงน

วาด/สราง หรอน าเขาวตถ เลอกวตถ

เลอกค าสง Modify > Convert to Symbol… หรอกดปม <F8>

ตงชอในชอง Name แลวเลอก Behavior ใหเหมาะสม คลกปม OK เพอยนยนการแปลงวตถเปน Symbol

5.3 การสราง Symbol

นอกจากการแปลงวตถใหเปน Symbol ดวยวธการดงขางตน ยงสามารถเขาสโหมดการ

สราง Symbol ไดโดยตรง ซงมขนตอนดงน

เลอกค าสง Insert > New Symbol… ปรากฏจอภาพ Create New Symbol ตงชอ Symbol และเลอก Behavior จากนนคลกปม OK กจะปรากฏจอภาพสรางSymbol ทมหนาตา

คลายกบ Stage เกอบทกอยาง เพยงแตจะมสญลกษณ + อยกงกลางจอ เปนการระบต าแหนงพกด 0,0 เพอใหสะดวกตอการวางต าแหนง หรอสรางวตถ

เมอสรางวตถใหกบ Symbol เรยบรอยแลวกคลกท Scene 1 เพอกลบสสภาวะการท างานปกต

รายละเอยดการสราง Movie Clip และ Button Symbol จะกลาวในหวขอถดไปการสราง Symbol ใดๆ ควรยดต าแหนงสญลกษณ + เปนจดเรมตนของวตถ ต าแหนงพกด 0,0

5.4 การสรางซมโบลชนดตางๆ

1) การสรางซมโบลกราฟก

การสรางซมโบลกราฟก จะมรปแบบการท างานทงาย เพยงเลอกสรางซมโบลใหม จากนนจงสรางหรอน าเขาออบเจกตตางๆ เพอใหกลายเปนซมโบลกราฟก

1. คลกเมน Insert > New Symbol หรอกดปม Ctrl + F8 จากนนจะปรากฏไดอะลอกบอกซ Create New Symbol ขนมา

2. พมพตงชอซมโบลลงในชอง Name 3. ในสวนของ Type ใหคลกเลอก Graphic

4. คลกปม เพอยนยนค าสง จากนนจะเขาสชโหมดแกไขซมโบล 5. สรางหรอน าเขาออบเจกตทตองการใหเปนซมโบล โดยจะปรากฏ ทใชเปนจดอางองในการวาง

ซมโบลขนมา

6. คลกชอซนหรอคลกปม เพอกลบสมฟวหลก

7. คลกเลอกซมโบลทตองการน ามาใชงาน โดยจะปรากฏตวอยางขนมาทางดานบน 8. ลากเมาสน ามาวางบนสเตจ จากนนจะปรากฏอนสแตนซขนมา

2) การสรางซมโบลปม

เมอสรางปมจะประกอบดวยเฟรม Up, Over, Down และ Hit ซงหากน าไปแสดงผลกจะปรากฏขนมาตามสถานะในการท างานของเมาส โดยเฟรม Hit ใชก าหนดขอบเขตทตองการใหมการตอบสนองตอเมาส ดงนนเนอหาทอยในเฟรมนจะไมถกแสดงผลออกมาเมอน าไปใชงานจรง

1. คลกเมน Insert > New Symbol หรอกดปม Ctrl + F8 จากนนจะปรากฏไดอะลอกบอกซ Create New Symbol ขนมา

2. พมพตงชอซมโบลลงในชอง Name 3. ในสวนของ Type ใหคลกเลอก Button

4. คลกปม เพอยนยนค าสง จากนนจะเขาสชโหมดแกไขซมโบล 5. ทเฟรม Up ใหสรางปมในสถานะปกตทยงไมมการคลกเมาส

6. คลกเฟรม Over และกดปม F6 เพอสรางคยเฟรมใหมและคดลอกออบเจกตทอยในเฟรม Up 7. แกไขออบเจกตของเฟรม Over เชน เปลยนส เปลยนรปทรง เพอใหแสดงเปนปมในสถานะทมการ

น าเมาสมาวาง

8. คลกเฟรม Down และกดปม F6 เพอสรางคยเฟรมใหมและคดลอกออบเจกตทอยในเฟรม Over 9. แกไขออบเจกตของเฟรม Down เพอใหแสดงเปนปมในสถานะทมการน าเมาสมาคลก

10. คลกเฟรม Down และกดปม F6 เพอสรางคยเฟรมใหมและคดลอกออบเจกตทอยในเฟรม Down 11. วาดรปทรงก าหนดขอบเขตทตองการใหมการตอบสนองตอเมาส

12. คลกชอซนหรอคลกปม เพอกลบสมฟวหลก 13. เลอกและลากเมาสน าซมโบลมาวางบนสเตจ จากนนจะปรากฏปมขนมา

14. คลกเมน Control > Test Movie หรอกดปม ctrl + Enter เพอทดสอบการท างานผานทาง Flash Player

2) การสรางซมโบลมฟวคลป

การสรางซมโบลมฟวคลปเพอใหมการเคลอนไหวในลกษณะตางๆ เชน Frame by Frame, Motion Tween, Shape Tween จะตองท างานผานไทมไลนของมฟวคลป ซงจะชวยใหสามารถแบงภาพเคลอนไหวออกเปนตอนยอยๆ ได

1. คลกเมน Insert > New Symbol หรอกดปม Ctrl + F8 จากนนจะปรากฏไดอะลอกบอกซ Create New Symbol ขนมา

2. พมพตงชอซมโบลลงในชอง Name 3. ในสวนของ Type ใหคลกเลอก Movie Clip

4. คลกปม เพอยนยนค าสง จากนนจะเขาสชโหมดแกไขซมโบล 5. สรางหรอน าออบเจกตทตองการใหเปนซมโบลมฟวคลป

6. คลกเฟรมท 50 และกดปม F6 เพอสรางคยเฟรมใชเปนจดจบของภาพเคลอนไหว 7. ปรบแตงออบเจกต เชน เคลอนยาย ปรบขนาด หมน หรอเปลยนส เพอใหเกดเปนภาพเคลอนไหว

8. คลกเฟรมท 1 ของไทมไลน 9. ท Properties ในสวนของ Tween ใหคลกเลอก Motion จากนนจะปรากฏลกศรแสดงการสรางแอน

เมชนขนมา

10. คลกชอซนหรอคลกปม เพอกลบสมฟวหลก 11. เลอกและลากเมาสน าซมโบลมาวางบนสเตจ จากนนจะปรากฏมฟวคลปขนมา

12. คลกเมน Control > Test Movie หรอกดปม ctrl + Enter เพอทดสอบการท างานผานทาง Flash Player

5.5 Symbol และ Instance

วตถทพรอมส าหรบการสราง Movie ลกษณะตางๆ รวมถงการลงรหส ActionScript เพอท าระบบโตตอบ (Interactive) เมอมการสรางและเกบไวใน Library จะเรยกวา Symbol แตเมอน า

Symbol มาวางใชงานบน Stage จะเรยกวา Instance ทงน Instance จะเปรยบเสมอนตวแทนของ Symbol หากมการแกไข Instance จะไมมผลกระทบตอ Symbol แตถาแกไข Symbol ตวแทนหรอ Instance ทกตวทเกดจาก Symbol นนๆ จะถกแกไขตามไปโดยอตโนมต

5.6 การเรยกใช Symbol

การน า Symbol จาก Library มาใชงาน กระท าไดโดยการเปด Library Panel แลวคลกเลอก Symbol ชนทตองการ ลากมาวางบน Stage และ Symbol จะเปลยนสถานะเปน Instance ทนท

1) เรยกใช Symbol ส าเรจรปของโปรแกรม

โปรแกรมไดเตรยม Symbol ส าเรจรปเพอสะดวกตอการสรางงาน โดยเรยกใชไดจากเมน

ค าสง Window > Other Panels > Common Libraries… ซงม Library ส าเรจรปใหเลอกใชได 3 กลม เมอเลอก Symbol ทตองการไดแลว กสามารถน ามาวางบน Stage โดยการน าเมาสชท Symbol นน แลวลากออกจาก Library มาวางบน Stage ไดเลย และ Symbol จะเปลยนสถานะเปน Instance ทนท

2) เรยกใช Symbol จากไฟลอน

จดเดนของ Symbol คอ สามารถโอนใชงานไดกบไฟลอน หรอเรยกใช Symbol จากไฟล

อน โดยมหลกการดงน

เปดไฟลเอกสารทตองการสรางงาน เรยกใชค าสง File > Import > Open External Library… เลอกไฟลทตองการน า Library มาใชงาน โปรแกรมจะเปด Library มาใหเลอกท างาน เมอเลอกใช Symbol ๆ นนจะถกโอนไปยงไฟลเอกสาร

ปจจบนโดยอตโนมต

5.7 แกไข Symbol

Symbol ทสรางไวแลว สามารถปรบเปลยนแกไขได โดย

เปด Library Panel ดบเบลคลกทชอ Symbol ชนทตองการแกไข หรอกรณทม Instanceของ Symbol ปรากฏบน Stage กสามารถดบเบลคลกท Instance นนๆ ไดทนท

ปรากฏหนาตางการท างานในโหมดแกไข Symbol โดยสงเกตไดวาตรงกลางจอภาพ มสญลกษณ + และปรากฏชอหนาตางเปนชอ Symbol นนทมมบนซายของ Stage

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

หมายเลขใดๆ กไดตามลกษณะของชนงาน)

หมายเหต การแกไข Symbol จะสงผลตอ Instance ทเกดจาก Symbol นนๆ ทก Instance ทน ามาใชงานบน Stage

5.8 แกไข Instance

Instance เปรยบเสมอนวตถชนหนง ซงสามารถใชค าสงจดการวตถ มาด าเนนการ

ปรบเปลยนได โดยไมสงผลกระทบตอ Symbol ตนฉบบ โดยมวธจดการดงน

วธท 1

คลกเลอก Instance

ใชเครองมอ Free Transform Tool ปรบขนาดหรอหมนวตถ

วธท 2

คลกเลอก Instance ก าหนดลกษณะของสทตองการจาก Instance Properties

Brightness ความสวาง Tint การปรบแกไขส/ความโปรงแสง Alpha การปรบแกไขความโปรงแสง Advanced การปรบแกไขสและคาความโปรงแสงแบบ Advanced

6. Timeline [ ควบคมมฟวผานไทมไลน ]

6.1 รจกไทมไลน

ไทมไลน (Timeline) เปนสวนทอยทางดานบนของหนาจอ ซงใชควบคมสรางการเคลอนไหว โดยประกอบดวย 2 สวนหลก ไดแก เลเยอรทอยดานซาย และเฟรมทอยทางขวา

1) สวนประกอบของไทมไลน

โดยปกตไทมไลนจะปรากฏขนมาทางดานบน ซงสามารถสงใหซอน/แสดงไดดวยการคลกเมน Windows > Timeline หรอกดปม Ctrl + Alt + T จากนนจะแสดงสวนประกอบตางๆ ขนมาดงน

2) ใชเพลยเฮดในการเลอนแสดงผล

เฟรมทปรากฏขนมาบนไทมไลนใชส าหรบสรางภาพเคลอนไหวของตวละครในแตละจงหวะ ซงหากตองการเลอนเพลยเฮด (Playhead) เพอดหรอปรบเปลยนแกไขเนอหาของเฟรมตางๆ สามารถท าไดดงน

1. คลกเพลยเฮด ซงเปนสเหลยมสแดงทอยทางดานบน 2. ลากเมาสไปยงเฟรมทตองการ หรอคลกต าแหนงของหมายเลขเฟรมทตองการกไดเชนกน

6.2 รจกเลเยอร

เลเยอร (Layer) เปรยบเสมอนแผนใสทใชในการจดวางองคประกอบตางๆ โดยสามารถน ามาเรยงซอนทบกนไดอยางอสระ ซงออบเจกตทอยในเลเยอรลาสดจะอยทางดานบน เมอท างานกจะสงผลเฉพาะออบเจกตทอยในเลเยอรเทานน

1) สรางเลเยอรใหม

เมอเรมสรางไฟลใหมโปรแกรมจะเตรยมเลเยอรทชอ Layer 1 ไวให ซงสามารถจดวางองคประกอบตางๆ ลงไปได และหากตองการสรางเลเยอรใหมเพอใหการท างานของออบเจกตในแตละเลเยอรเปนอสระตอกน สามารถท าไดดงน

1. คลกปม Insert Layer ทางดานลางของไทมไลน จากนนจะปรากฏเลเยอรใหมขนมา ทางดานบนของเลเยอรทท างานอย

2. สรางออบเจกตหรอการเคลอนไหวลงในเลเยอรใหมไดตามตองการ

2) สรางและจดเกบเลเยอรไวในเลเยอรโฟลเดอร

การสรางเลเยอรโฟลเดอรจะชวยใหการจดเกบเลเยอรตางๆ เปนระเบยบมากยงขน โดยสามารถสรางเลเยอรโฟลเดอรเพอน าเลเยอรทเกยวของ เชน เลเยอรของรปภาพ ขอความ เสยง วดโอ หรอ ActionScript ไวในโฟลเดอรเดยวกนได ดงน

1. คลกปม Insert Layer Folder ทางดานลางของไทมไลน จากนนจะปรากฏเลเยอรโฟลเดอรใหมขนมาทางดานบนของเลเยอรทท างานอย

2. คลกเลอกเลเยอรทตองการจดเกบไวในเลเยอรโฟลเดอร โดยหากกดปม Shift คางไว จะเปนการเลอกเลเยอรแบบเปนชวง หรอกดปม Ctrl คางไว จะเปนการเลอกเลเยอรอยางอสระ

3. ลากเมาสน าไปไวในเลเยอรโฟลเดอร จากนนเลเยอรทเลอกจะถกจดเกบไวในโฟลเดอร

3) เปลยนล าดบชนเลเยอร

ออบเจกตทอยในเลเยอรบนจะถกวางซอนทบออบเจกตทอยในเลเยอรลาง ซงหากตองการเปลยนล าดบชนของเลเยอร กจะสงผลท าใหการจดล าดบของออบเจกตเปลยนแปลงไปดวย

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

4) ลบเลเยอร

เมอไมตองการใชงานออบเจกตทอยในเลเยอรใดๆ กสามารถลบทงไปได ซงจะสงผลใหออบเจกตทอยในเลเยอรถกลบทงไปทงหมด และหากตองการยกเลกการลบเลเยอรกใหกดปม

Ctrl + Z

1. เลอกเลเยอรทตองการลบ 2. คลกปม Delete Layer ทางดานลางของไทมไลน จากนนเลเยอรและออบเจกตทงหมดทอยในเล

เยอรจะถกลบออกไปจากไทมไลน

5) ซอน/แสดงเลเยอร

ในกรณทไมแนใจกสามารถสงใหซอนแทนการลบเลเยอรได ซงจะสงผลใหออบเจกตทงหมดทอยในเลเยอรยงคงอย และเมอตองการใชงานจงคอยสงใหแสดงเลเยอร

1. คลก ในคอลมน ของเลเยอรทตองการซอนใหปรากฏเปนรป

2. ออบเจกตทงหมดทอยในเลเยอรจะถกซอนไว และหากคลกอกครงกจะเปนการแสดงเลเยอร

6) ลอค/ปลดลอคเลเยอร

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

1. คลก ในคอลมน ของเลเยอรทตองการลอคใหปรากฏเปนรป

2. ออบเจกตทงหมดทอยในเลเยอรจะถกลอค ท าใหท างานไดเฉพาะออบเจกตทอยในเลเยอรอนและหากคลกอกครง กจะเปนการปลดลอคเลเยอร

7) แสดงออบเจกตในเลเยอรเปนเสนโครงราง

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

1. คลก ในคอลมน ของเลเยอรทตองการแสดงเปนเสนโครงรางใหปรากฏเปนรป

2. ออบเจกตทงหมดทอยในเลเยอรจะถกแสดงในลกษณะเปนเสนโครงราง และหากคลกอกครง กจะเปนการแสดงแบบปกต

6.3 รจกเฟรม

เฟรม (Frame) มลกษณะเหมอนฟลมภาพยนตร ทแตละชองใชแสดงภาพเคลอนไหวขององคประกอบตางๆ โดยเฟรมทไมมออบเจกตจะเปน สวนเฟรมทมออบเจกตจะเปน ส าหรบต าแหนงของเฟรมทสรางการเคลอนไหวไวจะถกเรยกวา คยเฟรม (Keyframe) โดยคยเฟรมทไมมออบเจกตจะเปน สวนคยเฟรมทมออบเจกตจะเปน ซงหากสรางเฟรมไวจ านวนมาก เวลาในการแสดงมฟวกจะมากขน แตหากอตราในการแสดงเฟรมสง กจะท าใหเวลาในการแสดงมฟวสนลง

1) ชนดของเฟรม

เฟรมและคยเฟรมจดเปนพนฐานของการสรางภาพเคลอนไหว ซงสญลกษณของเฟรมจะมรปแบบแตกตางกนไปตามลกษณะของเนอหาทสรางไว ดงน

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

Motion Tween เฟรมทสรางภาพเคลอนไหวแบบเคลอนท โดยชวงในการเคลอนไหวจะแสดงดวยรปลกศรสด าบนพนสมวง ต าแหนงเรมตนและสนสดจะแสดงดวย คยเฟรม

Shape Tween เฟรมทสรางภาพเคลอนไหวแบบเปลยนรปราง โดยชวงในการเคลอนไหวจะแสดงดวยรปลกศรสด าบนพนสเขยว ต าแหนงเรมตนและสนสดจะแสดงดวย คยเฟรม

เสนประ เฟรมทไมสมบรณหรอมขอผดพลาด เชน คยเฟรมสนสดถกลบไป ตวอกษร a เฟรมทมการเขยน ActionScript ไวทพาเนล Actions ธงสแดง เฟรมทมการตงชอเพอใชระบต าแหนงแทนหมายเลขเฟรม ขดสเขยว เฟรมทมการใสหมายเหต เชน ขอความก ากบ หรอค าอธบายเกยวกบเฟรมไว สมอสทอง เฟรมทมการตงชอเพอใชเปนจดอางอง

2) เพมเฟรม

เมอเรมสรางไฟลงานโปรแกรมจะเตรยมคยเฟรมเปลา ไวให 1 คยเฟรม และหลงจากสรางออบเจกตตางๆ คยเฟรมกจะมลกษณะเปลยนเปน ซงหากตองการเพมเฟรมเพอขยายชวงเวลาในการแสดงขอมล สามารถท าไดดงน

1. คลกชองเฟรมทตองการเพมเฟรม 2. คลกเมาสขวาเลอกค าสง Insert Frame หรอกดปม F5 จากนนจะปรากฏเฟรมใหมพรอมกบ

ออบเจกตทอยในคยเฟรมทางดานหนาขนมา

3) ลบเฟรม

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

1. เลอกเฟรมทตองการลบ โดยหากกดปม Shift คางไว จะเปนการเลอกเฟรมเปนชวง หรอกดปม Ctrl คางไวจะเปนการเลอกเฟรมอยางอสระ

2. คลกเมาสขวาเลอกค าสง Remove Frames หรอกดปม Shift + F5 จากนนเฟรมทเลอกจะถกลบ ท าใหออบเจกตมเวลาในการแสดงผลลดลง

4) เพมคยเฟรม

การเพมคยเฟรมจะชวยใหสรางผลงานแอนเมชนในรปแบบตางๆ ไดตามตองการ โดยเมอเพมคยเฟรมกจะปรากฏออบเจกตขนมาจนถงเฟรมทก าหนดไว จากนนกสามารถปรบเปลยนแกไขเพอใหเกดผลงานแอนเมชนได ดงน

1. คลกชองเฟรมทตองการเพมคยเฟรม 2. คลกเมาสขวาเลอกค าสง Insert Keyframe หรอกดปม F6 จากนนจะปรากฏคยเฟรมใหมพรอมกบ

ออบเจกตทอยในคยเฟรมทางดานหนาขนมา

3. เปลยนรปทรง เปลยนส เคลอนยาย ปรบขนาด หรอหมน เพอใหเกดผลงานแอนเมชน

5) ลบคยเฟรม

ในการสรางคยเฟรมจะปรากฏเฟรมขนมาทางดานหนา ซงหากตองการลบคยเฟรมทสรางไวเพอไมใหปรากฏผลงานแอนเมชนขนมา กสามารถลบคยเฟรมออกไปได ดงน

1. เลอกคยเฟรมทตองการลบ 2. คลกเมาสขวาเลอกค าสง Clear Keyframe หรอกดปม Shift + F6 จากนนคยเฟรมทเลอกจะถกลบ ท า

ใหไมมการเปลยนแปลงใดๆ ของออบเจกตเกดขน

6) เคลอนยาย/คดลอกเฟรม

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

1. คลกเฟรมทตองการเคลอนยาย/คดลอก 2. ลากเมาสไปยงต าแหนงปลายทาง โดยหากดปม Alt คางไว จะเปนการคดลอก จากนนจะปรากฏ

เฟรมใหมพรอมกบขอมลทอยในเฟรมขนมา

7. Animation [ สรางผลงานแอนเมชน ]

7.1 ภาพเคลอนไหวแบบเฟรมตอเฟรม (Frame by Frame)

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

1) เรมสรางภาพเคลอนไหวแบบเฟรมตอเฟรม

เรมแรกจะตองสรางออบเจกตขนมากอน จากนนจงสรางคยเฟรมพรอมทงแกไขเนอหาตางๆ ของออบเจกตเดม ดงตวอยาง

1. คลกคยเฟรมแรกของภาพเคลอนไหว 2. สรางออบเจกตหรอองคประกอบตางๆ ทตองการใหปรากฏเปนภาพเคลอนไหว

3. คลกเมาสขวาทชองเฟรมและเลอกค าสง Insert Keyframe หรอกดปม F6 จากนนจะปรากฏคยเฟรมใหมพรอมกบออบเจกตทอยในคยเฟรมทางดานหนาขนมา

4. ปรบแตงออบเจกตหรอคลกปม จาก Properties 5. ดบเบลคลกซมโบลใหมทตองการน ามาเปนภาพเคลอนไหว

6. คลกเมาสขวาทชองเฟรมสดทายและเลอกค าสง Insert Frame หรอกดปม F5 เพอแสดงภาพเคลอนไหวในคยเฟรมท 2 ใหนานขน

ตวอยางภาพเคลอนไหวแบบเฟรมตอเฟรม

2) ปรบแตงภาพเคลอนไหวแบบเฟรมตอเฟรม

การปรบแตงภาพเคลอนไหวแบบเฟรมตอเฟรมสามารถท าไดเพยงคลกปม Edit Multiple Frames จากนนจงลาก Maker ใหครอบคลมเพอใหเหนออบเจกตทอยในเฟรมทงหมด และเมอแกไขใดๆ กจะสงผลตอออบเจกตทน ามาเปนผลงานแอนเมชนทนท

1. คลกปม Edit Multiple Frames ทางดานลางของไทมไลน จากนนปรากฏ Marker ทใชบอกขอบเขตการแสดงเนอหาของเฟรมอนขนมา

2. ลากเมาสปรบ Marker ใหครอบคลมเฟรมทงหมดทตองการปรบแตงแกไข 3. คลกไอคอนหรอชอของเลเยอรเพอเลอกออบเจกตทงหมดทอยในเลเยอร 4. ปรบแตงแกไขออบเจกต ไดตามตองการ

7.2 ภาพเคลอนไหวแบบเคลอนท (Motion Tween)

เปนการก าหนดใหออบเจกตมการเคลอนไหวเปลยนต าแหนงหรอเปลยนคณสมบตแบบแนนอนโดยไมเกยวกบการเปลยนแปลงของรปราง ซงจะตองสรางคยเฟรมเรมตนและสนสด จากนนจงปรบแตงและก าหนดใหเปน Motion Tween กจะปรากฏภาพเคลอนไหวขนมา

1) เรมสรางภาพเคลอนไหวแบบเคลอนท

ออบเจกตทน ามาสรางภาพเคลอนไหวแบบเคลอนทเปนไดทง Object Drawing ขอความ ซมโบล ออบเจกตทถกรวมกลม ยกเวน Merge Drawing

1. คลกคยเฟรมแรกของภาพเคลอนไหว 2. สรางออบเจกตหรอองคประกอบตางๆ ทตองการใหปรากฏเปนภาพเคลอนไหว

3. คลกเมาสขวาทชองเฟรมสดทายและเลอกค าสง Insert Keyframe หรอกดปม F6 จากนนจะปรากฏคยเฟรมใหมพรอมกบออบเจกตทอยในคยเฟรมทางดานหนาขนมา

4. ปรบแตงแกไขออบเจกต ไดตามตองการ

5. คลกคยเฟรมแรกหรอเฟรมระหวางกลาง 6. ท Properties ในสวนของ Tween ใหคลกเลอก Motion จากนนปรากฏลกศรแสดงการสรางแอน

เมชนขนมา

2) ปรบแตงภาพเคลอนไหวแบบเคลอนท

ภายหลงจากการสรางภาพเคลอนไหวแบบเคลอนทเรยบรอยแลว กสามารถปรบแตงรปแบบในการเคลอนไหว เชน ใหมการปรบขนาด ใหหมน เปลยนระดบความเรว ในการเคลอนท ฯลฯ ได โดยหากคลกปม Onion Skin ทางดานลางของไทมไลน กจะปรากฏเนอหาในเฟรมอนๆ ขนมาดวย

1. คลกเลอกคยเฟรมหรอเฟรมระหวางกลางทใชแสดงภาพเคลอนไหว

2. ท Properties ใหเลอกปรบแตงรปแบบการเคลอนไหว โดยมรายละเอยดดงน

Tween ชนดการเคลอนไหว โดยม None ยกเลกการเคลอนไหว, Motion สรางภาพเคลอนไหวแบบเคลอนท, Shape สรางภาพเคลอนไหวแบบเปลยนรปราง

Scale เมอออบเจกตแรกในคยเฟรมแรกและคยเฟรมสดทายมขนาดไมเทากน ใหปรบขนาดออบเจกตในเฟรมตางๆ โดยอตโนมต

Ease ระดบความเรวในการเคลอนท โดยคาลบ เปนการเคลอนทจากชาไปเรว หรอคาบวก เปนการเคลอนทจากเรวไปชา สวน 0 เปนคาปกต ทมระดบความเรวในการเคลอนทเทากนตลอด

ปม Edit เมอคลกปม [edit] จะปรากฏไดอะลอกบอกซ Custom Ease In / Ease Out ทใชปรบระดบความเรวในการเคลอนทใหแตกตางกน ซงสามารถท าไดเพยงคลกเฟรมทตองการ จากนนจงลากเมาสปรบจดแองเคอร โดยหากเสนมความชนกจะท าใหการเคลอนไหวเรว

Rotate นอกจากการหมนดวยปม Free Transform แลว ยงสามารถก าหนดใหออบเจกตหมนไปในระหวางการเคลอนทไดดวย โดย None คอไมหมน, Auto หมนไปตามการเปลยนแปลงของออบเจกตในคยเฟรมสดทาย, CW หมนตามเขมนาฬกา, CCW หมนทวนเขมนาฬกา โดยก าหนดจ านวนรอบลงในชอง times

7.3 ภาพเคลอนไหวตามเสนไกด (Motion Guide)

ในกรณทสรางภาพเคลอนไหวแบบ Motion Tween ไวออบเจกตจะเคลอนทในลกษณะเปนแนวเสนตรง ซงหากตองการก าหนดเสนทางในการเคลอนทใหมรปแบบอนๆ เชน เสนโคง เสนหยก เสนวงกลม ฯลฯ กสามารถสรางเสนน าทางขนมาใชก ากบการเคลอนทของออบเจกตได

1) เรมสรางภาพเคลอนไหวตามเสนไกด

หากก าหนดใหออบเจกตมการเคลอนไหวแบบเคลอนท (Motion Tween) เรยบรอยแลว กสามารถสรางเสนไกดจากปมเครองมอ Pen, Pencil, Line ฯลฯ ไวภายในเลเยอร Motion Guide ได ดงน

1. สรางและคลกเลเยอรทก าหนดใหเปนภาพเคลอนไหวแบบเคลอนท (Motion Tween) ไว 2. คลกปม Add Motion Guide จากนนเลเยอรทเลอกจะไปอยภายใตเลเยอร Motion Guide ทสราง

ขนมาใหม

3. วาดรปทรงทใชเปนเสนทางในการเคลอนทลงในเลเยอร Motion Guide 4. คลกคยเฟรมแรกของภาพเคลอนไหว 5. เคลอนยายใหจดศนยกลางของออบเจกตไปยดตดกบต าแหนงเรมตนของเสน

6. คลกคยเฟรมสดทายของภาพเคลอนไหว

7. เคลอนยายใหจดศนยกลางของออบเจกตไปยดตดกบปลายเสน

2) ปรบแตงภาพเคลอนไหวตามเสนไกด

การวาดภาพเคลอนไหวตามเสนไกดสามารถปรบแตงรปแบบในการเคลอนไหว เชนเดยวกบ Motion Tween แตจะมคาคณสมบตอนๆ เพม ดงน

1. คลกคยเฟรมหรอเฟรมระหวางกลางทใชแสดงภาพเคลอนไหว 2. ท Properties ใหเลอกปรบแตงรปแบบการเคลอนทบนเสนไกด โดยมรายละเอยดดงน

Orient to Path ใหออบเจกตเคลอนทหมนเอยงไปตามความโคงของเสนไกด Sync หากภาพเคลอนไหวเปนกราฟกซมโบล ใหปรบการเคลอนไหวใหสอดคลองกบไทมไลน

หลก Snap ยดตดออบเจกตเขากบเสนไกดโดยอตโนมต

7.4 ภาพเคลอนไหวแบบเปลยนรปทรง (Shape Tween)

เมอตองการใหมการเปลยนแปลงรปทรงของออบเจกตจากภาพนงภาพหนงไปเปนอกภาพหนง สามารถท าไดดวย Shape Tween โดยโปรแกรมจะสรางการเปลยนแปลงระหวางเฟรมตางๆ ใหโดยอตโนมต

1) เรมสรางภาพเคลอนไหวแบบเปลยนรปทรง

การสรางภาพเคลอนไหวแบบเปลยนรปทรงจะตองใชออบเจกตแบบ Merge Drawing หรอ Object Drawing ซงหากเปนอนสแตนซ ขอความ หรอออบเจกตทรวมกลม กจะตองแยกสวน (Break Apart) กอน

1. คลกคยเฟรมแรกของภาพเคลอนไหว 2. สรางออบเจกตหรอองคประกอบตางๆ ทตองการใหปรากฏเปนภาพเคลอนไหว

3. คลกเมาสขวาทชองเฟรมสดทายและเลอกค าสง Insert Keyframe หรอกดปม F6 จากนนจะปรากฏคยเฟรมใหมพรอมกบออบเจกตทอยในคยเฟรมทางดานหนาขนมา

4. เปลยนรปทรงหรอปรบแตงแกไขออบเจกต ไดตามตองการ

5. คลกคยเฟรมแรกหรอเฟรมระหวางกลาง 6. ท Properties ในสวนของ Tween ใหคลกเลอก Shape จากนนปรากฏลกศรแสดงการสรางแอน

เมชนขนมา

รปจรวดจะคอยๆ เปลยนกลายเปนเปา

2) ปรบแตงภาพเคลอนไหวแบบเปลยนรปทรง

เมอสรางภาพเคลอนไหวแบบ Shape Tween เรยบรอยแลว กสามารถเปลยนระดบความเรวในการเคลอนไหวไดเชนเดยวกบ Motion Tween แตส าหรบรปทรงทมความซบซอนกสามารถสราง Shape Hint เพอก าหนดเปนต าแหนงทใชในการเปลยนแปลงรปทรงของออบเจกตตนทางและปลายทางได ดงน

1. คลกคยเฟรมแรกและคลกเมน Modify > Shape > Add Shape Hint หรอกดปม Ctrl + Shift + H จากนนจะปรากฏ Shape Hunt สแดงทเปนตวอกษร a-z ขนมา

2. ลากเมาสน า Shape Hint มาวางยงเสนขอบของออบเจกตตนทาง 3. คลกคยเฟรมสดทาย 4. เมาสน า Shape Hint มาวางยงเสนขอบของออบเจกตปลายทาง โดยใหเทยบกบต าแหนงทไดวางไว

ในออบเจกตตนทาง จากนนใหด าเนนการซ าในขนตอนท 1-5 โดยเรยงจากมมบนซายวนไปแบบทวนเขมนาฬกา และเมอเรยงเรยบรอยแลว Shape Hint ต าแหนงตนทางจะเปนสเหลอง สวนปลายทางจะเปนสเขยว

7.5 ภาพเคลอนไหวแบบบงภาพ (Mask Layer)

เปนการก าหนดใหแสดงออบเจกตภายในรปทรงทสรางไว เหมอนกบการสองไฟไปทตวละครในลกษณะเปนสปอตไลต โดยสามารถก าหนดใหเปนภาพนงหรอภาพเคลอนไหวกได

1) เรมสรางภาพเคลอนไหวแบบบงภาพ

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

1. คลกคยเฟรมแรกของภาพเคลอนไหว 2. วาดรปทรงทใชในการบงภาพ โดยอาจเปนขอความหรอรปทรงใดๆ กได

3. คลกเมาสขวาทชองเฟรมสดทายและเลอกค าสง Insert Keyframe หรอกดปม F6 จากนนจะปรากฏคยเฟรมใหมพรอมกบออบเจกตทอยในคยเฟรมทางดานหนาขนมา

4. ปรบแตงแกไขรปทรง ไดตามตองการ

5. คลกคยเฟรมแรกหรอเฟรมระหวางกลาง 6. ท Properties ในสวนของ Tween ใหคลกเลอก Shape หรอ Motion และก าหนดคาคณสมบตตางๆ

7. คลกเมาสขวาบนเลเยอรเลอกค าสง Mask จากนนเลเยอรทางดานลางจะถกแสดงผลตามรปทรงทสรางไวในเลเยอร Mask โดยโปรแกรมจะลอคพรอมทงเปลยนรปแบบของไอคอนหนาเลเยอรใหโดยอตโนมต

2) ปรบแตงภาพเคลอนไหวแบบบงภาพ

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

1. คลก บนเลเยอร Mask เพอยกเลกการลอคและการบงภาพ 2. ดบเบลคลกรปทรงทตองการปรบแตงแกไข 3. ปรบแตงแกไขรายละเอยดตางๆ ของรปทรง

4. คลกชอซนหรอคลกปม เพอกลบสมฟวหลก 5. คลก ในคอลมน ของเลเยอร Mask จากนนรปทรงทใชในการบงภาพจะมลษณะเปลยนแปลงไป

เอกสารอางอง

บญเลศ อรณพบลย. (2552). flashcs3.pdf, FLASH CS3. สบคนเมอ 28 กมภาพนธ 2552, จาก http://www.stks.or.th/web/index2.php?option=com_docman&task=doc_view&gid=98&Itemid=31 ภททรา เหลองวลาศ. (2551). มอใหม Flash CS3 ใชงานอยางมอโปรฯ. กรงเทพ : ซเอดยเคชน. Narin Roungsan. (2551). สรางการตน Animation ดวย Flash. กรงเทพ : โปรวชน. ศนยพฒนาทรพยากรการศกษา (CARD) มหาวทยาลยมหาสารคาม. การวาดการตน Flash Professional ,2550. ส านกบรการคอมพวเตอร สถาบนเทคโนโลยพระจอมเกลาเจาคณทหารลาดกระบง. ความรพนฐานส าหรบ งานคอมพวเตอรกราฟก Basic of Computer Graphic ,2550. บญญาดา ชอนขดทด. Insight Flash CS3 เจาะลก อานงาย ท าตามไดจรง. โปรวชน จ ากด , 2550. อภชย เรองศรปยะกล. 2D Animation และ Interactive ดวย Flash 8. ซเอดยเคชน จ ากด , 2550.

ออกแบบหนาตาของเวบไซต

Concept to Concept Design

Theme : แนว Monster

Layout :

Color : ใช2ส คอสด า-เขยว

Font : Cordia New 14 สด า

รางรปแบบเคาโครงของเวบไซต :

Web Stucture โครงสรางของเวบไซต :

ออกแบบหนาตาของเวบไซต :