69
บุญเลิศ อรุณพิบูลย 1 เริ่มตนกับ Flash การสรางสื่อการเรียนรู สื่อนําเสนอ หรืองานออกแบบตางๆ ยอมจะหนีไมพนการออกแบบ สรางสรรคงานกราฟก หากสามารถสรางงาน ออกแบบงานกราฟกดวยตนเอง คงจะสรางความ ภูมิใจไดมาก แตปญหาใหญของการสรางสรรคงานกราฟกของหลายๆ ทานก็คือ วาดภาพไมเปนหรือ สรางผลงานไมได แตดวยความสามารถของโปรแกรม Macromedia Flash เครื่องมือชวย สรางสรรคงานกราฟกที่งายในการเรียนรู และประยุกตใชงาน พรอมๆ กับแนวทางการวาดภาพจาก คูมือฉบับนีจะลืมคําวา วาดยากไปเลย เนื่องจาก Flash เปนซอฟตแวรสรางสรรคงานกราฟกใน ฟอรแมต Vector ที่ภาพกราฟกทุกภาพประกอบจากเสนโครงรางที่ทําใหการปรับแตง แกไข หรือ ออกแบบภาพ ทําไดงายดวยเทคนิค ตัด เชื่อม ปรับเปลี่ยนรูปรางMacromedia Flash CS3 เปนผลิตภัณฑลาสุดจากคาย Macromedia ที่พัฒนามาเพื่อ สนับสนุนการสรางงานกราฟก ทั้งภาพนิ่ง และภาพเคลื่อนไหว สําหรับการนําเสนอผานเครือขาย อินเทอรเน็ต Flash มีฟงกชันชวยอํานวยความสะดวก ในการสรางผลงานหลากหลายรูปแบบ ตลอดจนชุดคําสั่งโปรแกรมมิ่งที่เรียกวา Flash Action Script ที่เพิ่มประสิทธิภาพในการทํางาน และ สามารถคอมไพล (Compile) เปนโปรแกรมใชงาน (Application Program) เชน การทําเปน e-Card เพื่อแนบไปพรอมกับ e-Mail ในโอกาสตางๆ การเรียกใชโปรแกรม Flash การเรียกใชงานโปรแกรม Flash มีหลักการคลายๆ กับการเรียกโปรแกรมทั่วๆ ไปของ ระบบปฏิบัติการวินโดวส โดยเริ่มจากการคลิกปุจากนั้นเลื่อนไปคลิกที่รายการ Program, Adobe Flash CS3 Professional รอสักครูจะปรากฏหนาตางการทํางาน ซึ่งมีโหมดการ ทํางานใหเลือกไดหลายลักษณะไดแก การเปดไฟลจากคําสั่ง Open a Recent Item การสรางงานผลงานจากรายการ Create New การสรางผลงานแมแบบ Create from Template

คู่มือFlashcs3

  • Upload
    -

  • View
    2.647

  • Download
    8

Embed Size (px)

DESCRIPTION

คู่มือFlashcs3

Citation preview

Page 1: คู่มือFlashcs3

บญเลศ อรณพบลย

1

เรมตนกบ Flash

การสรางสอการเรยนร สอนาเสนอ หรองานออกแบบตางๆ ยอมจะหนไมพนการออกแบบสรางสรรคงานกราฟก หากสามารถสรางงาน ออกแบบงานกราฟกดวยตนเอง คงจะสรางความภมใจไดมาก แตปญหาใหญของการสรางสรรคงานกราฟกของหลายๆ ทานกคอ “วาดภาพไมเปน” หรอ “สรางผลงานไมได” แตดวยความสามารถของโปรแกรม Macromedia Flash เครองมอชวยสรางสรรคงานกราฟกทงายในการเรยนร และประยกตใชงาน พรอมๆ กบแนวทางการวาดภาพจากคมอฉบบน จะลมคาวา “วาดยาก” ไปเลย เนองจาก Flash เปนซอฟตแวรสรางสรรคงานกราฟกในฟอรแมต Vector ทภาพกราฟกทกภาพประกอบจากเสนโครงรางททาใหการปรบแตง แกไข หรอออกแบบภาพ ทาไดงายดวยเทคนค “ตด เชอม ปรบเปลยนรปราง”

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

การเรยกใชโปรแกรม Flash

การเรยกใชงานโปรแกรม Flash มหลกการคลายๆ กบการเรยกโปรแกรมทวๆ ไปของระบบปฏบตการวนโดวส โดยเรมจากการคลกปม จากนนเลอนไปคลกทรายการ Program, Adobe Flash CS3 Professional รอสกครจะปรากฏหนาตางการทางาน ซงมโหมดการทางานใหเลอกไดหลายลกษณะไดแก

• การเปดไฟลจากคาสง Open a Recent Item

• การสรางงานผลงานจากรายการ Create New

• การสรางผลงานแมแบบ Create from Template

Page 2: คู่มือFlashcs3

บญเลศ อรณพบลย

2

จอภาพการทางานของ Flash

เมอคลกเลอกการสรางผลงานใหมของ Flash จากรายการ Create New Flash File จะปรากฏสวนประกอบจอภาพการทางานดงน

Page 3: คู่มือFlashcs3

บญเลศ อรณพบลย

3

แถบเครองมอหลก (Main Toolbar)

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

แถบเครองมอ (Toolbox)

กลมเครองมอสรางงานและจดการวตถ ประกอบดวยปมเครองมอยอยตางๆ สามารถเปด/ปดดวยคาสง Window, Tools โดยสามารถแบงเครองมอเปนหมวดๆ ได 5 หมวด คอ เครองมอหมวดเลอกวตถ (Selection) เครองมอหมวดวาดภาพ (Drawing) เครองมอจดแตงวตถ (Modify) เครองมอควบคมมมมอง (View) และเครองมอควบคมส (Color)

Page 4: คู่มือFlashcs3

บญเลศ อรณพบลย

4

Document Tab

สวนควบคมเอกสาร สามารถคลกเพอสลบเปลยนจอภาพเอกสาร

Timeline & Layer

Timeline เปนสวนสาคญททาหนาทควบคมการนาเสนอผลงาน สามารถเปด/ปดดวยคาสง Window, Timeline

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

Stage & Workspace

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

Page 5: คู่มือFlashcs3

บญเลศ อรณพบลย

5

Panel

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

ควบคม Panel

Panel เปนจอภาพเลกๆ ทแสดงฟงกชนการทางานเฉพาะอยาง เชน การทางานเกยวกบสจะควบคมดวย Color Mixer หรอ Color Swatches การจดตาแหนงวตถตางๆ ควบคมดวย Align Panel เปนตน การเรยกใชหรอเปด/ปด Panel จะใชคาสง Window แลวตามดวยชอ Panel นนๆ

Page 6: คู่มือFlashcs3

บญเลศ อรณพบลย

6

ทางานกบไฟล Flash

โปรแกรม Flash สามารถสรางผลงานไดทงภาพนง ทเรยกวา (Still Image) และภาพเคลอนไหว ซงจะเรยกวา Movie ทงภาพนง และภาพเคลอนไหว จาเปนตองเรมตนจากไฟล Flash ตนฉบบ ทมสวนขยายเปน .fla จากนนจงบนทกเปนไฟลภาพใชงาน สาหรบภาพนง สามารถเลอกบนทกไดหลายฟอรแมต เชน

ประเภทไฟล สวนขยาย Adobe Illustrator .ai GIF Image .gif Bitmap .bmp AutoCAD DXF Image .dxf Enhanced Metafile .emf EPS 3.0 .eps JPEG Image .jpg PICT .pct PNG Image .png Windows Metafile .wmf

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

ประเภทไฟล สวนขยาย Flash Movie .swf Animation GIF Image .gif QuickTime .mov Windows AVI .avi Execute File .exe

Page 7: คู่มือFlashcs3

บญเลศ อรณพบลย

7

สรางไฟลใหม

ไฟล Flash ทสรางใหมทกครง ควรกาหนดคณสมบตใหเหมาะสม ดวยคาสง Modify Document เชน ความกวาง/ความสงของ Stage ลกษณะสพนของ Stage เปนตน

เปดไฟล

การเปดไฟลภาพใชคาสง File, Open... หรอคลกปม Open จากMain Toolbar

นอกจากนยงสามารถเลอกไฟลทเคยเปดไดจากเมนคาสง File, Open Recent

การคนสสภาพเดม (Revert)

ไฟลทกาลงแกไข ถาตองการคนกลบสสภาพกอนการแกไข ใชคาสง File, Revert

ปดไฟล

ไฟลทสราง หรอเปดอย หากตองการปดไฟล สามารถใชคาสง File, Close หรอ File, Close

All ทงนไฟลทยงไมไดผานการบนทก โปรแกรมจะแสดงกรอบเตอน ถาตองการบนทกไฟลกอนปด กคลกปม Yes เพอเขาสโหมดการบนทกไฟล แตถาตองการปดไฟลโดยไมบนทกกคลกปม No หรอคลกปม Cancel เพอยกเลกการปดไฟล กลบสจอภาพสรางงานตามปกต

Page 8: คู่มือFlashcs3

บญเลศ อรณพบลย

8

บนทกไฟล

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

As…

จดสงเกตวาไฟลไดผานการบนทกแลวหรอไม กดไดจากชอไฟลใน Title Bar หากมเครองหมาย * แสดงวายงไมผานการบนทก

การบนทกเปนภาพนงใชงาน

เนองจากไฟล .fla เปนไฟลตนฉบบ ไมสามารถนาไปใชงานได กอนนาไฟลภาพทสรางดวย Flash ไปใชงาน จาเปนตองบนทกในฟอรแมตทเหมาะสม สาหรบภาพนง ใหเลอกคาสง File,

Export, Export Image…

ฟอรแมตของภาพนง กเปนรายการทควรนามาพจารณาประกอบ เชน ถาตองการเปนภาพประกอบสอสงพมพ แนะนาใหเลอกเปน .bmp หรอ .ai แตถาตองการใชบนเวบไซต กควรเลอกเปน .gif, .jpg หรอ .png โดยมหลกในการพจารณา ดงน

• ภาพโครงราง หรอภาพทมการใชสแบบ Solid ใหเลอกเปน GIF Format

• ภาพทมการใชสแบบไลโทน หรอมการใชสจานวนมาก ใหเลอกเปน JPEG Format

การบนทกในฟอรแมต GIF

การบนทกภาพวาดในฟอรแมต GIF ทาไดโดยเลอกคาสง File, Export, Export Image… เลอกรายการ Save as Type เปน GIF Image (*.GIF)

Page 9: คู่มือFlashcs3

บญเลศ อรณพบลย

9

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

• Dimension กาหนดขนาดของภาพ

• Resolution กาหนดความละเอยด มคาเทากบ 72 dpi

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

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

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

• Transparent เลอกเพอกาหนดใหภาพมลกษณะของพนแบบโปรงใส

• Smooth เลอกใหภาพมลกษณะขอบกระดาง หรอขอบมน

• Dither solid colors เลอกลกษณะการเกลยสทมลกษณะใกลเคยงกน

การบนทกในฟอรแมต JPEG

การบนทกภาพวาดในฟอรแมต JPEG ทาไดโดยเลอกคาสง File, Export, Export Image… เมอเลอกไดรฟ/โฟลเดอร และตงชอไฟลภาพ ใหเลอกรายการ Save as Type เปน JPEG Image (*.jpg) แลวคลกปม Save จะปรากฏรายการเลอกคาควบคม ดงน

• Dimension กาหนดขนาดของภาพ • Resolution กาหนดความละเอยด มคาเทากบ 72 dpi

Page 10: คู่มือFlashcs3

บญเลศ อรณพบลย

10

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

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

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

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

การบนทกผลงานของ Flash เปนภาพเคลอนไหว หรอ Flash Movie สามารถเลอกไดสองคาสง คอ File, Export, Export Movie… โดยมหนาตางการบนทก และการเลอกฟอรแมตคลายกบ

การบนทกภาพนงทแนะนาไปกอน นอกจากนยงสามารถเลอกไดจากคาสง File, Publish

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

Page 11: คู่มือFlashcs3

บญเลศ อรณพบลย

11

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

• ใชงานในเครอขายอนเทอรเนต ใหคลกเลอกรายการ Flash และ HTML

• สราง Movie ในฟอรแมต QuickTime ใหเลอกรายการ QuickTime ซงจะไดไฟล Movie ทมสวนขยายเปน .mov

• สราง Movie ทสามารถนาเสนอไดทนท โดยไมตองอาศย Plug-Ins ใดๆ ใหเลอกรายการ Windows Projector ซงจะไดไฟลทมสวนขยาย .exe หรอเลอกรายการ Macintosh Projector สาหรบการนาเสนอบนเครองคอมพวเตอร Macintosh

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

Page 12: คู่มือFlashcs3

บญเลศ อรณพบลย

12

ทางานกบ Stage

Stage เปนชอเรยกพนทสรางภาพกราฟกของ Flash นบเปนพนทสาคญในการสรางสรรคงานกราฟก หรอสราง Movie มลกษณะเปนพนทสเหลยมสขาวลอมดวยกรอบสเทา ภาพกราฟก หรอวตถใดๆ สามารถวางไดบนพนทสขาว และสเทา แตเมอสงนาเสนอผลงาน เฉพาะภาพกราฟก หรอวตถทวางบนพนทสขาวเทานน ทจะแสดงผล

ขนาดของ Stage

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

• เลอกคาสง File, New… เพอเขาสโหมดการสราง Movie

• คลกเลอกคาสง Modify, Document…

• กาหนดคาความกวาง ความสงของ Stage (หนวยปกตจะเปน pixel) จากรายการ

Dimensions: o กรณทมขอมลบน Stage สามารถคลกปม Match: Printer หรอ Contents เพอให

Flash ปรบขนาดใหเหมาะสมกบขอมลโดยอตโนมต • เลอกสพนของ Stage จากตวเลอก Background color:

Page 13: คู่มือFlashcs3

บญเลศ อรณพบลย

13

• รายการ Frame rate: เปนหนวยวดการสรางภาพเคลอนไหว หมายถงในเวลา 1 วนาทจะตองมภาพกเฟรม จงจะทาใหภาพเคลอนไหวมความสมจรง ถากาหนดนอยเกนไปกจะทาใหมอาการกระตก และหากเรวเกนไปกจะทาใหสญเสยรายละเอยด การนาเสนอบนเวบ คา 12 เฟรมตอวนาท เปนคาทเหมาะสมทสด แตการสรางภาพยนตรเชน QuickTime หรอ AVI จะตองกาหนดไวท 24 เฟรมตอวนาท

• Ruler units: หนวยวดของไมบรรทด และหนวยวดการสรางวตถตางๆ แนะนาใหใชหนวยเปน pixels

การกาหนดขนาดและคณสมบตอนๆ ของ Stage ยงสามารถเลอกไดจาก Properties Panel

โดยตองอยในโหมดการใชเครองมอ Selection

ขอแนะนาการกาหนดขนาดของ Stage

วตถประสงคหลกของการพฒนา Flash Movie กคอการนาไปใชเปนองคประกอบของเวบไซต ในปจจบนหนาเวบไซตทถอวาเปนมาตรฐานจะมขนาดทเหมาะสมกบการแสดงบนจอภาพขนาด 1024 x 768 pixels

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

เวบ

Ruler, Grid, Guides

Ruler, Grid, Guidesเครองมอชวยกาหนดขอบเขต และวางตาแหนงการสรางกราฟกบน Stage โดย

• Ruler แถบไมบรรทดจะปรากฏทขอบดานซาย และดานบนของ Stage สามารถเปด/ปดไดจากคาสง View, Rulers

Page 14: คู่มือFlashcs3

บญเลศ อรณพบลย

14

• Grid มลกษณะเปนตารางตาหมากรก ทแบงเปนชองเลก ชวยในการกาหนดตาแหนงในการสราง ยอ/ขยาย หรอเคลอนยายวตถบน Stage สามารถเปด/ปดไดจากคาสง View, Grids, Show Grids

โดยปกตขนาดของชองตารางจะมคาเทากบ 18 × 18 pixels ซงปรบแตงไดจากคาสง View,

Grids, Edit Grid…

Guide มลกษณะเปนเสนตรงทผใชสามารถกาหนดตาแหนง เพอชวยในการกะระยะตางๆ ชวยในการวาดภาพ เคลอนยายตาแหนงลกษณะเดยวกบกรด แตมความอสระมากกวา โดยการทางานจะตองอยในสภาวะการเปดใชงาน Ruler กอนเสมอ จากนนนาเมาสไปชในแถบไมบรรทด (ดานใดกได) กดปมเมาสคางไว เมอลากเมาสจะปรากฏเสนตรงสเขยววาง ณ ตาแหนงทปลอยเมาส การปรบยายตาแหนงเสนไกด กระทาไดโดยคลกเลอกเครองมอ Move แลวนาเมาสไปชทเสน

ไกด เพอปรบยายตาแหนง

คาสงทเกยวของกบแถบไมบรรทด, Grids และไกด คอคาสง Snap to… ซงมหลายคาสง เชน

• Snap to Grids ชวยใหการวาด/สรางวตถ, การยอขยาย หรอยายตาแหนงองเสนกรดทกาหนดไว

• Snap to Guides ชวยใหการวาด/สรางวตถ, การยอขยาย หรอยายตาแหนงองเสนไกดทกาหนดไว

• Snap to Objects ชวยใหการวาด/สรางวตถ, การยอขยาย หรอยายตาแหนงองจดกงกลาง (Center Point) ของวตถ

Page 15: คู่มือFlashcs3

บญเลศ อรณพบลย

15

การใชเครองมอของ Flash

การสรางภาพกราฟกตางๆ สามารถใชเครองมอกราฟกจากชดเครองมอ Toolbox โดยมเครองมอหลายกลม และเปด/ปด Toolbox ไดจากเมนคาสง Window, Tools

Tools Modifier

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

Tool modidier ของเครองมอ Tool modidier ของเครองมอ

เครองมอกลมเลอกวตถ (Selection)

เครองมอกลมวาดภาพ (Draw)

เครองมอกลมจดการปรบแตงแกไข (Edit)

เครองมอกลมแสดงผล (View)

เครองมอกลมจดการส (Color)

เครองมอกลมคาสงเสรม (Tools Modifier)

Page 16: คู่มือFlashcs3

บญเลศ อรณพบลย

16

มมมองจอภาพ

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

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

o Drag & Drop เพอเลอน Stage

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

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

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

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

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

Page 17: คู่มือFlashcs3

บญเลศ อรณพบลย

17

ทางานกบส (Color)

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

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

รายการเลอก No Color จะแสดงผลเมอคลกเลอกวาดสเหลยม หรอวาดวงกลม ดงนนกอนเลอกสใหกบการวาดสเหลยม, วงกลม ควรคลกเลอกเครองมอวาดสเหลยม หรอวาดวงกลมกอนทจะคลกปมเลอกส ซฝ เปนรายการสาคญมาก และมกจะเปนรายการทเขาใจผด เชน ถาตองการวาดวงกลมไมมสพน หลายๆ ทาน จะใชวธการเลอก Fill Color ใหกบสของ Background เชน ถา Background เปนสขาว กจะเลอก Fill Color เปนสขาว ซงมความหมายทตางไป

Stroke Color Fill Color

Stroke Color สเสน Fill Color สพนของวตถ, ส

Swap Color การสลบส Default Color

คนคาสสคาเดม คอดา, ขาว

Page 18: คู่มือFlashcs3

บญเลศ อรณพบลย

18

เพมส

การเพมรายการส สามารถทาไดโดยคลกทเครองมอเลอกส (จะเปนFill หรอ Stroke) กได แลวคลกทปม Color Picker ซงปรากฏทมมบนขวาของจอภาพแสดงคาส

ปรากฏจอภาพผสมสใหม

คลกในชอง Custom colors

ผสมสตามตองการ

คลกปม Add to Custom Colors

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

คลกทปม Color Picker

Page 19: คู่มือFlashcs3

บญเลศ อรณพบลย

19

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

Color Panel เปนการเพมประสทธภาพของการทางานเกยวกบส โดยเฉพาะในสวนทเปนการไลโทนส (Gradient) เนองจากการสรางชดสการไลโทน ไมสามารถทาไดจากสวนควบคมสปกต Flash เตรยม Panel เกยวกบสไว 2 ชดคอ

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

• Color มสวนเพมเตมการใชสมากกวาปกต เชน การทาสแบบไลโทนลกษณะตางๆ,

การใชภาพกราฟกมาเปนพนของกราฟก (Texture) รวมทงการปรบคาความโปรงใสของส (Alpha)

Page 20: คู่มือFlashcs3

บญเลศ อรณพบลย

20

การเลอกรายการจาก 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

Linear

Radial

Page 21: คู่มือFlashcs3

บญเลศ อรณพบลย

21

• คลกปม Color Mixer Option Menu แลวเลอกคาสง Add Swatch เพอเพมสทกาหนดใหกบโปรแกรม

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

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

Page 22: คู่มือFlashcs3

บญเลศ อรณพบลย

22

เครองมอวาดภาพ

สเหลยม, วงกลม, วงร

• คลกเลอกเครองมอ Rectangle สามารถคลกคางไวเพอเลอกรปแบบการวาด

• กาหนดสพน, สเสนขอบ และลกษณะของเสนขอบจาก Properties

o กาหนดลกษณะของเสนขอบวงร วงกลมไดโดยคลกปม แลว

ปรบแตงลกษณะของเสนขอบไดจาก Stroke Style Dialog Box ดงภาพ

• นาเมาสมาคลก ณ ตาแหนงทตองการวาดรป กดปมเมาสคางไว แลวลากเมาส เมอได

ขนาดและรปทรงทตองการ จงปลอยนวจากเมาส • ถาตองการรปทสมบรณ ควรกดปม <Shift> คางไว ขณะลากเมาส

ลบวตถดวย Eraser Tool

วตถตางๆ ทวาดไวแลว สามารถลบได 3 วธ คอ • ลบวตถทงหมดโดยดบเบลคลกท Eraser Tool • ลบเฉพาะ Fill หรอ Stroke ของวตถ โดย

o คลกเลอก Eraser Tool

Page 23: คู่มือFlashcs3

บญเลศ อรณพบลย

23

o คลกทปม Faucet o นาเมาสไปคลก ณ ตาแหนงทตองการ

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

• ลบวตถชนทตองการ โดย

o คลกเลอก Eraser Tool o เลอกโหมดการลบโดยคลกท

Erase Normal ลบในสภาวะปกต คอ ลบทง Stroke และ Fill Erase Fills ลบเฉพาะสวนทเปน Fill Erase Lines ลบเฉพาะเสนขอบ Stroke Erase Selected Fills ลบเฉพาะสวนทเลอกไว Erase Inside ลบเฉพาะสวนทเปน Fill แตถามการลากผาน

ตาแหนงทเปน Fill วางๆ จะไมลบให o เลอกลกษณะหรอขนาดของ Eraser โดยคลกท o นาเมาสมาคลก หรอลากผาน ณ ตาแหนงทตองการลบ

Erase Normal Fill Stroke Selection Inside

Page 24: คู่มือFlashcs3

บญเลศ อรณพบลย

24

การเลอกวตถ (Selection)

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

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

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

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

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

Stroke Fill Shape

Page 25: คู่มือFlashcs3

บญเลศ อรณพบลย

25

รปแสดง “จด” อนเกดจากการเลอกบางสวนของวงกลม

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

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

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

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

เลอกเสนขอบ เลอกพนวตถ

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

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

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

การเลอกวตถโดยการลากคลมพนท

o เลอกวตถหลายๆ ชน คลกวตถชนท 1 กดปม S คางไว แลวคลกวตถชนถดไปเรอยๆ

o เลอกวตถทกชนบน Workspace และ Stage กดปม Ca

Page 26: คู่มือFlashcs3

บญเลศ อรณพบลย

26

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

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

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

บางครงผใชอาจจะตองการซอนการเลอก (Selection) ไวชวคราว เพอทางานหรอตรวจสอบผลใหถกตองกอนการใชงานจรง ซงกระทาไดโดยเลอกเมนคาสง View, Hide Edges หรอกดปม Ch

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

เมอสงงานใดๆ ผดพลาด สามารถยอนกลบ หรอยกเลกคาสงนนๆ ไดโดยคลกปม Cz หรอ Edit, Undo… ซงสามารถยกเลกคาสงยอนหลงไดมากกวา 1 ครง

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

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

เปลยนรปทรง

กราฟกจาก Flash เกดจากการรวมกนของ “จด” ทาใหการปรบแตง เปลยนรปทรงกระทาไดงาย และสะดวก เพยงแตใชหลกการ Drag & Drop กทาใหรปทรงพนฐาน เชน วงกลม, วงร, สเหลยม เปนสภาพเปนรปทรงอสระอนๆ ไดตามตองการ เชน

Page 27: คู่มือFlashcs3

บญเลศ อรณพบลย

27

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

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

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

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

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

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

วาดสเหลยมผนผา เลอกเครองมอ Move เลอนไปชทมมบนขวา

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

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

การยายวตถ

• คลกเลอกเครองมอ Selection Tool • เลอกวตถ แลวลากเมาสเพอยายวตถไปยงตาแหนงใหม • เลอนวตถเปนแนวเฉยง 45 องศา ใหกด S ดวย • เลอนวตถเปนระยะทางสนๆ ครงละ 1 pixel ใหใชปมลกศร • เลอนวตถเปนระยะทางสนๆ ครงละ 10 pixel ใหใชปมลกศร พรอมกบการกด S • เลอนวตถไปยงตาแหนงตางๆ โดยระบพกด ใหระบพกด x, y จาก Shape Properties

ตาแหนงมมบนซายของ Stage จะมพกดเปน 0, 0

Page 28: คู่มือFlashcs3

บญเลศ อรณพบลย

28

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

• เลอกวตถ • คลกปมเครองมอ Free Transform Tool

วตถสภาวะปกต วตถในสภาวะ Free Transform

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

• คลกเลอกจากเมนคาสง Modify, Transform,… ซงมคาสงใหเลอกทงคาสงหมนวตถ,

คาสงกลบดานของวตถ เปนตน

ภาพตนฉบบ Distort

Envelop Skew

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

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

Page 29: คู่มือFlashcs3

บญเลศ อรณพบลย

29

วาดวตถใหอยนอก Stage เลอกวตถดวยเครองมอ Move เปด Align Panel

คลก ตอดวย และ

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

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

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

• คลกเลอกเครองมอ Eyedropper

• นาเมาสซงมรปรางเปน Eyedropper ไปชทเสนขอบของสเหลยมชนตนฉบบ (สเหลยม

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

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

Page 30: คู่มือFlashcs3

บญเลศ อรณพบลย

30

กลมวตถ (Group)

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

สสภาพเดมกเลอกคาสง Modify, Ungroup

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

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

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

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

วตถบางชนทเปน Group หรอ Instance เมอจะตองนามาทาเปน Movie แบบ Shape Tweening จาเปนตองแยกชนสวนของวตถใหอยในสภาวะ “จด” กอนเสมอ ซงทาไดโดยเลอกวตถกอน จากนนจงใชเมนคาสง Modify, Break Apart หรอกดปม Cb

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

Page 31: คู่มือFlashcs3

บญเลศ อรณพบลย

31

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

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

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

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

จางไป

จอภาพโหมดปกต (Scene1)

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

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

Page 32: คู่มือFlashcs3

บญเลศ อรณพบลย

32

ฝกหดวาดภาพ

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

แผนท

การวาดแผนทแสดงเสนทาง โดยอาศยหลกการเชอมและตด

• วาดเสน ใหมลกษณะ ดงน

• จากภาพจะพบวาเปนการนากรอบสเหลยมหลายขนาดมาวางซอนกนทบ ลกษณะนคอ

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

o การตดสวนดงกลาวทง เรมจากการเลอกเครองมอ Selection o นาเมาสไปคลก ณ สวนทตองการตด จะพบวาสวนทเลอกมลกษณะเปน “จดเลกๆ

หลายจด” ดงตวอยาง

สวนทตองตดทง

Page 33: คู่มือFlashcs3

บญเลศ อรณพบลย

33

o จากนนกดปม = เพอลบสวนทเลอก จะปรากฏผลดงน

o ทาซากบสวนอน ทตองการลบ โดยการใชเครองมอ Selection เลอกกอนแลวกด

ปม = เพอลบทง

หนาคนจากวงกลมและเสนตรง

วาดวงกลม วาดเสนตรงผาน

สวนบนของวงกลมในลกษณะเฉยงดงภาพ

เลอกเครองมอ Selection เลอนเมาสไปชทเสนตรง ใหเมาสมรปรางเปน

กดปมเมาสคางไว แลวดงใหเสนมลกษณะโคง

คลกเลอกเสนทอยนอกวงกลม กดปม = เพอลบทง

เลอกสผม แลวเตมส วาดตา จมก และปากดวยเครองมอวาดเสน หรอ ดนสอ แลวปรบใหมความโคงตามตองการ

สวนทตองการคลกเพอลบทง

Page 34: คู่มือFlashcs3

บญเลศ อรณพบลย

34

หนาคนจากหลายๆ วตถ

เดกชายสวมหมวก

เดกหญง

คนสงอาย

Page 35: คู่มือFlashcs3

บญเลศ อรณพบลย

35

ดวงอาทตย

รองเทาสเกต

ถงเทาเดก

Page 36: คู่มือFlashcs3

บญเลศ อรณพบลย

36

ใบไม

หมวก

ตนครสมาตส

ตนไม

Page 37: คู่มือFlashcs3

บญเลศ อรณพบลย

37

ตนไม

ดอกไม

ดนสอ

ตกตาหม

Page 38: คู่มือFlashcs3

บญเลศ อรณพบลย

38

ฮปโป

ผลไมการตน

สตอรเบอรร

Page 39: คู่มือFlashcs3

บญเลศ อรณพบลย

39

Symbol และ 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)

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

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

ภาพโหมด Shape/Dot โหมด Group โหมด Instance/Symbol มลกษณะเปนจด มกรอบสลอมรอบ มจดกงกลางกลมและกากบาทกากบ

Page 40: คู่มือFlashcs3

บญเลศ อรณพบลย

40

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

เมอมการเปดไฟลหรอสรางไฟลใดๆ บางครงอาจจะไมทราบวาไฟลนนๆ ม Symbol ใด บาง โปรแกรมมคาสงในการตรวจสอบ Symbol โดยเปด Library Panel ดวยเมน Window, Library

Library ทม Symbol

แปลงวตถเปน Symbol

การสรางภาพเคลอนไหวแบบ Motion Tweening หรอการทาระบบโตตอบ จาเปนตองทางานกบ Symbol ดงนนวตถหรอภาพกราฟกใดๆ กตาม จะตองแปลงสภาพจาก Shape, Group หรอ Picture ใหเปน Symbol กอนและจะตองเลอก Behavior ของ Symbol ใหตรงกบลกษณะการใชงาน เชน Symbol ทตองการกาหนดใหคลกไดเพอสงงานใดๆ จะตองกาหนดเปน Button ภาพใดๆ ทมการเคลอนทหรอการเคลอนไหว เชน ลอรถทตองหมน ควรกาหนดเปน Movie Clip หรอ Symbol ทแสดงเปนเพยงภาพนง กเลอกเปน Graphic เปนตน

การแปลงวตถใหเปน Symbol มหลกการดงน • วาด/สราง หรอนาเขาวตถ • เลอกวตถ • เลอกคาสง Insert, Convert to Symbol… หรอกดปม <F8>

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

Page 41: คู่มือFlashcs3

บญเลศ อรณพบลย

41

การสราง 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

Symbol และ Instance

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

การเรยกใช Symbol

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

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

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

Page 42: คู่มือFlashcs3

บญเลศ อรณพบลย

42

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

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

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

ไฟลเอกสารปจจบนโดยอตโนมต

แกไข Symbol

Symbol ทสรางไวแลว สามารถปรบเปลยนแกไขได โดย • เปด Library Panel ดบเบลคลกทชอ Symbol ชนทตองการแกไข หรอกรณทม Instance

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

สญลกษณ + และปรากฏชอหนาตางเปนชอ Symbol นนทมมบนซายของ Stage

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

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

แกไข Instance

Instance เปรยบเสมอนวตถชนหนง ซงสามารถใชคาสงจดการวตถ มาดาเนนการปรบเปลยนได โดยไมสงผลกระทบตอ Symbol ตนฉบบ โดยมวธจดการดงน วธท 1

• คลกเลอก Instance • ใชเครองมอ Arrow ปรบขนาดหรอหมนวตถ

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

Page 43: คู่มือFlashcs3

บญเลศ อรณพบลย

43

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

Page 44: คู่มือFlashcs3

บญเลศ อรณพบลย

44

เฟรมและ Timeline

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

Timeline

เปรยบเสมอนเวลาทใชในการสรางภาพเคลอนไหว หรอ Movie โปรแกรมจะแบงชวงใหหนวยละ 5 ชวงเวลา

เฟรม

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

Page 45: คู่มือFlashcs3

บญเลศ อรณพบลย

45

Playhead

ตาแหนงของเฟรมปจจบนทจะปรากฏบน Stage

เฟรม และคยเฟรม (Frame & Keyframe)

คยเฟรม คอ การกาหนดตาแหนงการสรางภาพเคลอนไหวทมเนอหาภายในแตกตางกนไป โดยตาแหนงเฟรมใดทตองการกาหนดใหมสถานะเปน Keyframe ใหใชคาสง Insert, Timeline,

Keyframe เฟรม คอ การกาหนดตาแหนงภาพทไมมการเปลยนแปลง ไมมการเคลอนไหว เชนการทา

ฉากหลง โดยตาแหนงเฟรมใดทตองการกาหนดใหมสถานะเปน Frame ใหใชคาสง Insert,

Timeline, Frame

ควบคมเฟรม

การควบคมเฟรม เชน การใสคยเฟรม หรอแทรกเฟรม นอกจากใชคาสงจากเมน Insert ยงสามารถใช Context Menu ซงเปนวธทสะดวกกวา โดยคลกขวาในเฟรมทตองการ แลวเลอกคาสงทตองการ

ลบเฟรม

• เลอกเฟรมทตองการลบ (สามารถใชการคลกเมาสขวาในเฟรมทตองการ) • เลอกคาสง Remove, Frames

Page 46: คู่มือFlashcs3

บญเลศ อรณพบลย

46

Movie File

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

• Movie แบบ Frame by frame เปน Movie ทมการเปลยนแปลงของวตถตลอดเวลา และวตถมการเปลยนแปลงทไมตอเนอง หรอเปลยนแปลงทกสวนอยางไมสมาเสมอ ไมเปนมาตรฐาน เชน ดอกไมบาน, การงอกของตนไม, การบนของนก, การเดนของสตว การสรางจะตองสรางตนแบบงานหลายชน การสราง Movie แบบนวตถทนามา

สรางจะอยในสถานะใดกได • Movie แบบ Motion Tweening เปน Movie ทอาศยหลกการเปลยนรปทรง ขนาดโดย

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

Movie แบบน วตถจะตองอยในสถานะ Symbol กอน • Movie แบบ Shape Tweening เปน Movie ทวตถมการเปลยนแปลงรปทรง รปรางจาก

รปตนฉบบไปอยางสนเชง เชน เปลยนจากสเหลยมเปนวงกลม, เปลยนจากไขนก เปนตวนก การสราง Movie แบบน วตถจะตองอยในสถานะ Break Apart

Page 47: คู่มือFlashcs3

บญเลศ อรณพบลย

47

Motion Tween

การสราง Movie แบบ Motion Tween เปน Movie ทสรางไดงาย รวดเรว โดยยดหลกสรางวตถในตาแหนงเรมตน และตาแหนงสดทาย Flash จะสราง Effect การเคลอนทใหโดยอตโนมต รวมทงผสรางสามารถเลอกรปแบบการเคลอนทไดจาก Properties Panel

หลกการสราง Movie แบบ Motion Tween

• กาหนดเฟรมเรมตน (ไมจาเปนตองเปนเฟรมท 1) โดยการคลกเมาสในเฟรมทตองการ แลวเลอกคาสง Insert, Timeline, Keyframe หรอคลกปมขวาของเมาส แลวเลอก

Insert, Keyframe

• สรางวตถ โดยวตถจะตองอยในสภาวะ Group หรอ Symbol o การสรางวตถในสภาวะ Group

เลอกวตถทสราง ใชคยลด Cg

o การสรางวตถในสภาวะ Symbol เลอกวตถทสราง กดปม * ตงชอ Symbol และเลอก Behavior ทเหมาะสม

• เลอกเฟรมปลายทาง แลวเลอกคาสง Insert, Timeline, Keyframe หรอคลกปมขวาของ

เมาส แลวเลอก Insert, Keyframe

• ปรบแตงวตถ หรอยายวตถตามตองการ

• เลอนเมาสกลบมาคลกทเฟรมตนทาง แลวคลกปมขวาของเมาส เลอกคาสง Create

Motion Tween

Page 48: คู่มือFlashcs3

บญเลศ อรณพบลย

48

ตวอยาง Motion Tween – ดนสอ

สราง Motion Tween เปนรปดนสอเคลอนทจากตาแหนงหนง ไปอกตาแหนงหนง ม 4 ขนตอน ดงน

ขนแรก สรางวตถ (ดนสอ)

• สรางไฟล Flash แลวกาหนดลกษณะ Stage ใหเหมาะสมดวยคาสง Modify, Document

• วาดสเหลยมรปทรงแทงยาว กาหนดลกษณะเสนขอบตามความหมาะสม

• เตมสใหกบดนสอ โดยการใชชดสไลโทน “สม/ขาว” โดยเปด Color Mixer Panel เลอกรายการชดสเปน Linear กาหนด Color Maker 3 ตาแหนง โดยตาแหนงท 1 และตาแหนงท 3 ใหกาหนดเปนสสม ตาแหนงท 2 กาหนดเปนสขาว

• เลอกเครองมอ Paint Bucket

เตมสลงในรปสเหลยม

• ใชเครองมอวาดเสน ตเสนตรงตดรปสเหลยม 2 ตาแหนง เพอแปลงสภาพเปนปลายดนสอ และยางลบ

• เลอกเครองมอ Selection ปรบปลายดานหนงสเหลยมใหเปนสามเหลยม ดงรป

Page 49: คู่มือFlashcs3

บญเลศ อรณพบลย

49

• ลบเสนตรงสวนทคนปลายดนสอกบตวดนสอออก โดยใชเครองมอ Selection คลกเลอกแลวกดปม =

• ดดแปลงปลายดนสออกดานใหเปนยางลบ ดงตวอยาง

• แปลงรปดนสอทวาดเรยบรอยแลว เปน Symbol แบบ Graphics โดยใชเครองมอ Selection เลอกดนสอ กดปม * ตงชอ Symbol เชน Pencil เลอก Behavior เปน Graphic แลวคลกปม OK เพอยนยนการสราง Symbol

ขนทสอง กาหนดจดเรมตนของ Movie

• กาหนดจดเรมตนของ Movie สมมตใหเรมตนทขอบซายของ Stage ณ เวลา 5 หนวย o คลกเมาสในเฟรม 5 ของ

Timeline Panel o กดปมขวาของเมาส เลอก

คาสง Insert Keyframe o กรณทวาด/สรางวตถไว

กอนหนานแลว เฟรม 1 จะเปน Keyframe โดยอตโนมต สามารถใชหลกการ Drag & Drop ยายตาแหนง Keyframe จากเฟรม 1 ไปเฟรม 5 ได

Page 50: คู่มือFlashcs3

บญเลศ อรณพบลย

50

• ใชเครองมอ Selection และ Free Transform ยาย/ปรบเปลยนรปทรงของดนสอใหเหมาะสม

ขนทสาม กาหนดตาแหนงปลายทาง

• คลกเมาสเลอกเฟรมปลายทาง เชนเฟรม 50 แลวคลกปมขวาของเมาส เลอกคาสง Insert Keyframe

• ใชเครองมอ Selection ยายตาแหนงดนสอไปตาแหนงใหม

ขนท 4 ใส Motion Tween ทเฟรมตนทาง

• คลกเมาสในเฟรมตนทางของ Motion จากตวอยางคอเฟรมท 5

• คลกปมขวาของเมาส แลวเลอกคาสง Create Motion Tween

• ทดสอบ Movie โดยใชคยลด CE

o กลบมาสจอภาพแกไข Movie โดยกดปม Cw

• บนทกไฟล (ยกตวอยางชอ pen) แลว Publish เปน SWF

ยาย

Page 51: คู่มือFlashcs3

บญเลศ อรณพบลย

51

Shape Tween

Shape Tween เปน Movie อกลกษณะทใชเทคนคการเปลยนรปรางของวตถ เชน จากวตถขนาดเลกๆ สนๆ เมอเวลาผานไปกกลายสภาพเปนวตถขนาดยาว หรอจากรปทรงวงกลม เปนรปหลายเหลยม เปนตน

หลกการสราง Movie แบบ Shape Tween

• กาหนดเฟรมเรมตน (ไมจาเปนตองเปนเฟรมท 1) โดยการคลกเมาสในเฟรมทตองการ แลวเลอกคาสง Insert, Timeline, Keyframe หรอคลกปมขวาของเมาส แลวเลอก

Insert, Keyframe

• สรางวตถ โดยวตถจะตองอยในสภาวะ Shape เทานน o กรณทวตถอยในสภาวะ Group หรอ Symbol ตองแปลงใหอยในสภาวะ

Shape กอน โดย เลอกวตถ กดปม Cb (อาจจะตองทาหลายครง) จนกวาวตถมจดพกเซลเลกๆ ประกอบในวตถ

• เลอกเฟรมปลายทาง แลวเลอกคาสง Insert, Timeline, Keyframe หรอคลกปมขวาของ

เมาส แลวเลอก Insert, Keyframe

• สรางวตถชนใหม หรอปรบแตงวตถเดมตามตองการ

• เลอนเมาสกลบมาคลกทเฟรมตนทาง กาหนดคา Tween จาก Properties เปน Shape

Page 52: คู่มือFlashcs3

บญเลศ อรณพบลย

52

ตวอยาง Shape Tween – Magic Flower

ฝกปฏบตการสราง Movie – Magic Flowerโดยการใชวตถวงกลม และหลายเหลยม แบบ Shape Tween

• สรางไฟลใหม กาหนดลกษณะ/ขนาด Stage ตามตองการ

• สรางชดสไลเฉด สม, ขาว, สม โดยเปด Color Mixer Panel

• เลอกรปแบบการลงสแบบ Radial

• กาหนดจด Marker 3 จด จดท 1 และจดท 3 กาหนดเปนสสม จดท 2 กาหนดเปนสขาว

• วาดรปวงกลม กาหนดตาแหนงใหเหมาะสม

• กาหนดเฟรมสดทายของ Movie

เชน เลอกเฟรม 50 ใหคลกปมขวาของเมาสในเฟรม 50 แลวเลอกคาสง Insert, Keyframe

• ลบรปวงกลมในเฟรม 50 ออกไป

• เลอกเครองมอ PolyStar

• คลกปม Options ใน Properties Panel เลอกเปน Star กาหนดคาตามตองการ

• วาดรปหลายเหลยม ใหอยในตาแหนงเดยวกบวงกลมทลบไปเดม

• เลอนเมาสมาคลกทเฟรมแรก

Page 53: คู่มือFlashcs3

บญเลศ อรณพบลย

53

เฟรมท 1) เปลยนคา Tween เปน Shape

• ทดสอบ Movie บนทกไฟล

ตวอยาง Shape Tween – การขดเสนดวยดนสอ

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

• เปดไฟล pen.fla

• เปลยนชอเลเยอร Motion Tween ของดนสอ เปน Pencil โดยดบเบลคลกทชอ Layer 1 ปอนชอใหมแลวกดปม E

• สรางเลเยอรใหม โดยคลกทปม Insert Layer ใน Timeline

• เปลยนชอเลเยอรใหม เปน Line

• กาหนดเฟรมตนทางของ Shape Tween เชน เฟรม 5 โดยคลกเมาสในเฟรม 5 แลวคลกปมขวาของเมาส เลอกคาสง Insert Keyframe

• วาดเสนบางๆ สนๆ ดวย

เครองมอ Pencil

• พยายามวาดใหอยใตดนสอ • เลอกเฟรมปลายทาง ใหอย

ตาแหนงเดยวกบเลเยอรดนสอ (เชนเฟรม 50) คลกปมขวาของเมาส แลวเลอกคาสง Insert

เสนทวาด

Page 54: คู่มือFlashcs3

บญเลศ อรณพบลย

54

Keyframe

• ขยายเสนทขดในเลเยอร Line ใหยาว มระยะทางเทากบจดปลายทางของดนสอ โดยใช

เครองมอ Free Transform คลกเลอกเสนขด จากนนยายจดศนยกลางของเสนขดไปอยรมดานซาย (ใชเครองมอ Zoom เพอขยายภาพใหเหนเดนชด)

• ลากจด Handle ดานขวาใหยาวเทากบปลายทางของดนสอ

• เลอนเมาสกลบมาคลกทเฟรมตนทางของเลเยอร Line

• เปลยนคา Tween จาก Properties เปน Shape

• ทดสอบ Movie โดยใชคยลด CE

o กลบมาสจอภาพแกไข Movie โดยกดปม Cw

• บนทกไฟล แลว Publish เปน SWF

Page 55: คู่มือFlashcs3

บญเลศ อรณพบลย

55

ตวอกษร/ขอความ

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

สรางขอความ

• คลกเลอกเครองมอ Text Tool • เลอกลกษณะตวอกษร และพารากราฟ จาก Text Property

โหมดตวอกษร – Static คอตวอกษรในสภาวะปกต, Dynamic คอตวอกษรทรบคาจาก ตวแปร, Input คอตวอกษรทสามารถปอนผานแปนพมพ

• นาเมาสไปคลก ณ ตาแหนงทตองการพมพงาน ปรากฏกรอบพมพงาน o ถาคลกเมาส 1 ครงจะเปนการพมพงานแบบบรรทดเดยว สงเกตไดจากมมบนขวา

ของกรอบขอความ มสญลกษณวงกลมเลกๆ

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

แบบหลายบรรทด สงเกตไดจากมมบนขวาของกรอบขอความ มสญลกษณสเหลยมเลกๆ

• พมพงานทตองการ สามารถยกเลกโดยนาเมาสไปคลก ณ ทวางๆ บน Stage

Page 56: คู่มือFlashcs3

บญเลศ อรณพบลย

56

ตวอยางการจดขอมลใหมระยะหางระหวางตวอกษร 4 หนวย โดยคลกท

ปรบเปลยนกรอบขอความ

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

• เปลยนจากกรอบหลายบรรทด เปนบรรทดเดยว ใหดบเบลคลกทสญลกษณสเหลยม มมบนขวาของกรอบขอความ

ปรบเปลยนรปรางตวอกษร

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

• คลกเลอกขอความ • เลอกเมนคาสง Modify, Break Apart (อาจจะใชคาสงนหลายครง) • ตวอกษรจะกลายเปน Shape ซงจะสงเกตไดจากจดเลกๆ ในตวอกษรนนๆ

• สามารถปรบแตงรปรางไดอสระ โดยอาศย Arrow Tool • นอกจากการใชคาสง Break Apart ในการปรบเปลยนลกษณะตวอกษร ยงสามารถ

เคลอนยาย, หมน, บดตวอกษรไดเหมอนกบวตถทวไป

Page 57: คู่มือFlashcs3

บญเลศ อรณพบลย

57

ทางานกบเลเยอร (Layer)

เลเยอร (Layer) หมายถงชนของชนงาน เนองจากการวาดภาพใดๆ กตามหากรวมอยในชนเลเยอรเดยวกน จะเกดปญหาการแกไขไดงาย ดงนนการสรางวตถใดๆ กตามดวย Flash ใหยดหลกทวาวตถ 1 ชนตอ 1 เลเยอรเพอใหการควบคม การสรางงานกระทาไดอยางสมบรณ

เปลยนชอเลเยอร

• ดบเบลคลกทชอเลเยอรเดม แลวปอนชอใหมจากนนกดปม <Enter>

เปลยนลาดบของเลเยอร

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

ควบคมเลเยอร

• ซอน/แสดงเลเยอร โดยใหคลกทจดกลมเลกๆ ของเลเยอรใตปมน • ลอกเลเยอร ปองกนการแกไข • แสดงผลแบบโครงราง เหมาะสาหรบการสราง Movie กบเครองทมแรม

ไมมากนก

การแสดงผลแบบปกต การแสดงผลแบบโครงราง

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

Page 58: คู่มือFlashcs3

บญเลศ อรณพบลย

58

Page 59: คู่มือFlashcs3

บญเลศ อรณพบลย

59

ไฟลเสยง (Sound)

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

• Event Sound ซงจะมรปแบบการนาเสนอ (บรรเลงเพลง) เมอเพลงนนๆ ถกดาวนโหลดมายงเครองลกขาย (คอมพวเตอรผเรยกดเวบ) ครบสมบรณ

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

ฟอรแมตไฟลเสยง

ไฟลเสยงทสนบสนน Flash ไดแก

• WAV ไฟลเสยง/เพลงทสามารถทางานไดบนระบบปฏบต Windows โดยจะตองมการบนทกในฟอรแมต 8 หรอ 16-bit คา sample rate ท 11 kHz, 22 kHz, หรอ 44 kHz Mono เทานน

• AIFF ไฟลเสยง/เพลงททางานในคอมพวเตอรระบบ Macintosh

• MP3 ไฟลเสยง/เพลงททางานไดทงระบบปฏบตการ Windows และ คอมพวเตอรระบบ Macintosh ซงมจดเดนคอขนาดไฟลจะมขนาดเลกกวาฟอรแมต WAV และ AIFF

ทางานกบไฟลเสยง

การทางานหรอควบคมไฟลเสยงของ Flash มสองรปแบบ คอแบบฝงไฟลเสยงกบไฟล Flash (Embedded) และแบบเชอมไฟล (Linking) โดยไฟลฟอรแมต WAV และ AIFF มกจะใชรปแบบ Embedded ทาใหไฟล Movie มขนาดโต ในขณะทไฟล MP3 จะใชรปแบบ Linking ทาใหไฟล Movie มขนาดเลก แตมจดเสย คอ การนาไปใชจะตองนาไปทงไฟล Movie และไฟลเพลง MP3

Page 60: คู่มือFlashcs3

บญเลศ อรณพบลย

60

ควบคมไฟลเสยงฟอรแมต WAV

การทางานและควบคมไฟลเสยงฟอรแมต WAV ม 3 ขนตอนหลก คอ การนาเขาไฟลเสยงไปเกบไวใน Library, การทางานกบไฟลเสยงบน Timeline และการสรางปมควบคมเสยงดวย Action Script

การนาเขาไฟลเสยง

• เตรยมไฟลเสยงฟอรแมต WAV

• สราง Flash Movie กาหนดขนาดของ Flash Movie และคณสมบตอนๆ จากเมนคาสง Modify, Document

• เปด Library Panel ดวยคาสง Window, Library

• เลอกคาสง File, Import, Import to Library

• เลอกไฟลเสยงทเตรยมไว คลกปม Open เพอนาเขา

• ไฟลเสยงทนาเขา จะเกบไวใน Library Panel

การทางานกบไฟลเสยง

เมอนาเขาไฟลเสยงเกบไวใน Library เรยบรอยแลว กสามารถนามาสราง Movie หรอควบคมการนาเสนอไดโดย

• สราง Layer ควบคมไฟลเสยง

• ลากไฟลเสยงจาก Library มาวางบน Stage

• จะปรากฏสญลกษณเสนเสยงในเฟรม 1 ของ Layer เสยง

• ขยายเฟรมจนสนสดเสนเสยง โดยคลกเฟรมปลายทาง เชนเฟรม 500 แลวเลอกคาสง Insert, Frame (อาจจะตองทาหลายครงจนกวาเสนเสยงจะปรากฏเปนเสนเสยงเรยบ)

Page 61: คู่มือFlashcs3

บญเลศ อรณพบลย

61

การควบคมเสยงใน Movie

เมอนาเสยงเพลง หรอเพลงบรรยายในฟอรแมต WAV มาวางใน Movie ควรสรางปมควบคมการนาเสนอ ไดแก ปม Stop, ปม Pause และปม Play

• สรางเลเยอรใหม ตงชอเปน Button

• เปด Button Panel ดวยคาสง Window, Other Panels, Common Libraries, Button

• เลอกปมควบคมเสยงมาวางบน Stage ใหครบ 3 ปม เพอทาหนาทเปนปม Stop, ปม Pause และปม Play

• คลกเฟรม 1 ของเลเยอร Sound

• เปด Properties Panel

• เปลยนคา Sync จาก Event เปน Stream เพอใหการนาเสนอไฟลเสยงเปนแบบ Streaming

o สามารถเปลยนไฟลเสยงไดจากรายการ Sound

o การยกเลกไฟลเสยง ใหเลอก None จากรายการ Sound

o รายการ Effect เปนการใสลกษณะพเศษใหกบเสยงเชน เสยงเรมแบบเบาๆ แลวคอยๆ ดงขน (Fade in)

• เลอกปม Stop

• เปด Action Panel โดยกดปม (

• ปอนคาสง Action Script ควบคมปม Stop โดยจะหมายถงการสงให Play Head ของ Timeline วงกลบไปทเฟรม 1 แลวหยดการทางานนนเอง

on (press) { gotoAndStop(1); }

• เลอกปม Pause on (press) {

Page 62: คู่มือFlashcs3

บญเลศ อรณพบลย

62

• เปด Action Panel โดยกดปม (

• ปอนคาสง Action Script ควบคมปม Pause โดยจะหมายถงการสงให Play head ของ Timeline หยด ณ ตาแหนงทคลกปม

stop(); }

• เลอกปม Play

• เปด Action Panel โดยกดปม (

• ปอนคาสง Action Script ควบคมปม Play โดยจะหมายถงการสงให Play Head ของ Timeline เลนตอจากตาแหนงทหยดครงลาสด

on (press) { play(); }

• บนทกไฟล แลว Publish เปน .swf

• ทดสอบไฟล .swf

Page 63: คู่มือFlashcs3

บญเลศ อรณพบลย

63

ควบคมเพลง MP3

การนาเสนอและควบคมเพลง MP3 ดวย Flash สามารถใช Media Playback ซงเปนหนงในชดควบคมสอ (Media Components) ท Flash จดเตรยมพรอมใชงาน โดยมขนตอนดงน

• เตรยมไฟลเพลงในฟอรแมต MP3

• สราง Flash Movie กาหนดขนาดของ Flash Movie ดวยคาสง Modify, Document

• บนทกไฟลไวในโฟลเดอรเดยวกบไฟล mp3

• เปด Components Panel ดวยคาสง Window, Development Panels, Components

• เลอกรายการ MediaPlayback แลวลากมาวางบน Stage กาหนดขนาดจาก Properties Panel

• คลกเลอก MediaPlayback บน Stage เปด

Component Inspector Panel ดวยคาสง Window, Development Panels, Component Inspector

• เลอกรปแบบสอเปน MP3

• ระบชอไฟลเพลง MP3 ในบรรทด URL

• เลอกรายการควบคมเพลง เชน Automatically Play ใหเพลงบรรเลงทนททเปดไฟลหรอไม ?

Control Placement เลอกตาแหนงของแถบควบคมเพลง ?

Control Visibility แสดงแถบควบคมเพลงใหเหนทนทหรอไม ?

Page 64: คู่มือFlashcs3

บญเลศ อรณพบลย

64

ควบคม VDO

การนาเสนอ VDO และควบคม VDO ดวย Flash กมหลกการคลายๆ กบการนาเสนอ/ควบคมไฟลเสยง คอสามารถเลอกไดทงแบบ Embedded และแบบ Linking โดยไฟลในฟอรแมต AVI หรอ MPEG มกจะใชรปแบบ Embedded สวนไฟลฟอรแมต Macromedia Flash Video (FLV) จะใชรปแบบ Linking อยางไรกตามการใชงาน VDO ใน Flash จาเปนตองมการตดตงโปรแกรมประกอบในคอมพวเตอรกอนจงจะสามารถทางานได เชน QuickTime หรอ DirectX 7 ขนไป โดยฟอรแมต VDO ทสนบสนนเมอตดตง QuickTime ไดแก

File type Extension Audio Video Interleaved .avi Digital video .dv Motion Picture Experts Group .mpg, .mpeg QuickTime movie .mov

สาหรบฟอรแมตไฟล VDO ทสามารถนาเขาเมอตดตง DirectX 7.0 ขนไป ไดแก

File type Extension Audio Video Interleaved .avi Motion Picture Experts Group .mpg, .mpeg Windows Media file .wmv, .asf

Page 65: คู่มือFlashcs3

บญเลศ อรณพบลย

65

VDO แบบ Embedded

• เตรยมไฟล VDO

• สราง Flash Movie กาหนดขนาด/คณสมบตตามตองการ

• นาเขาไฟล VDO ดวยคาสง File, Import, Import to Stage

• เขาสโหมดการนาเขา VDO o นาเขา VDO ทนท เลอกรายการ Import

the entire video o เขาสสวนการควบคม ตดตอ VDO ให

เลอก Edit the video first

• เลอกรายการ Import the entire video เพอเขา VDO ทนท จากนนคลกปม Next

• เขาสสวนการเขารหส VDO ใหเหมาะสมกบชองทางการเผยแพร เชน ถาตองการสราง Flash Movie นาเสนอ VDO สาหรบผใชทเรยกดอนเทอรเนตผาน MODEM 56Kbps กใหเลอก Compression profile เปน 56Kbps หรอเลอกระบบอนๆ ตามความเหมาะสม จากนนคลกปม Finish

• รอสกคร Flash จะนาเขาไฟล VDO

• โปรแกรมจะแสดงเวลาทงหมดของ VDO คลกปม Yes เพอยนยนการนาเขา

• ปรากฏจอภาพ VDO บน Stage

• สรางเลเยอรใหม ตงชอเปน Button สรางปมควบคม VDO 3 ปมไดแก ปม Stop, ปม Pause และปม Play

• เลอกปม Stop on (press) {

Page 66: คู่มือFlashcs3

บญเลศ อรณพบลย

66

• เปด Action Panel โดยกดปม (

• ปอนคาสง Action Script ควบคมปม Stop โดยจะหมายถงการสงให Play Head ของ Timeline วงกลบไปทเฟรม 1 แลวหยดการทางานนนเอง

gotoAndStop(1); }

• เลอกปม Pause

• เปด Action Panel โดยกดปม (

• ปอนคาสง Action Script ควบคมปม Pause โดยจะหมายถงการสงให Play head ของ Timeline หยด ณ ตาแหนงทคลกปม

on (press) { stop(); }

• เลอกปม Play

• เปด Action Panel โดยกดปม (

• ปอนคาสง Action Script ควบคมปม Play โดยจะหมายถงการสงให Play Head ของ Timeline เลนตอจากตาแหนงทหยดครงลาสด

on (press) { play(); }

• บนทกไฟล แลว Publish เปน .swf

• ทดสอบไฟล .swf

Page 67: คู่มือFlashcs3

บญเลศ อรณพบลย

67

กรอบ VDO

เทคนคทนาสนใจของ Flash กคอ Masking ซงเปนการซอนบางสวนของวตถ (Object) ดวยวตถทซอนทบอยดานบน (เลเยอรบน) เชน เลเยอรลางเปน VDO หรอรปภาพ จากนนสรางอกเลเยอรซอนทบขนไปเปนรปหวใจ เมอสง Mask เลเยอรรปหวใจ กจะปรากฏ VDO หรอรปภาพทอยเลเยอรดานลาง ถกแสดงผลเปนรปหวใจตามรปทรงของวตถทซอนอยดานบนนนเอง ดวยเทคนค Masking จะชวยใหการนาเสนอ VDO มจดเดนในเรองกรอบ VDO

• นาไฟล VDO จากแบบฝกหดกอนหนา มาปรบแตงโดยสรางเลเยอรใหม ใหอยชนบนสด ตงชอเปน Mask

• วาดรปทรงตามตองการ โดยรปทรงทวาดจะถกนามาใชเปนสวนแสดง VDO

• เลอกเลเยอร Mask กดปมขวาของเมาส แลว

เลอกคาสง Mask

• บนทกไฟล แลว Publish เปน .swf

• ทดสอบไฟล .swf

Page 68: คู่มือFlashcs3

บญเลศ อรณพบลย

68

ตดตอ VDO

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

• เตรยมไฟล VDO

• สราง Flash Movie

• นาเขาไฟล VDO ดวยคาสง File, Import, Import to Stage

• เขาสสวนการควบคม ตดตอ VDO เลอก Edit the video first

• เมอคลกปม Next จะปรากฏสวนการตดตอ VDO ดงน

• การตดตอ VDO ทาไดโดยเลอนสญลกษณ ไป ณ ตาแหนงจดเรมตนของ VDO จากนน

เลอนสญลกษณ เขามา ณ ตาแหนงจดสดทายของ VDO

• คลกปม Create Clip เพอตด VDO สวนทเลอก สามารถเลอกสวน VDO แลวตดไดหลายสวน

พรอมๆ กน

Page 69: คู่มือFlashcs3

บญเลศ อรณพบลย

69

ถาคลกเลอกรายการ Combine list of clips into a single library item after import จะเปน การระบให VDO ทเลอกตดแตละสวน รวมเปน VDO ใน Library รายการเดยวกน (เทคนคการผสม VDO จากหลายคลป)

• คลกปม Next เพอเขาสจอภาพการเลอกคณภาพ และการบบอด VDO (Compression) เลอกรปแบบทเหมาะสมแลวคลกปม Finish

• รอสกครจะปรากฏ VDO ใน Library Panel พรอมใชงานตอไป