Upload
rutch-chintamas
View
1.623
Download
2
Tags:
Embed Size (px)
Citation preview
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
2
จอภาพการทางานของ Flash
เมอคลกเลอกการสรางผลงานใหมของ Flash จากรายการ Create New Flash File จะปรากฏสวนประกอบจอภาพการทางานดงน
บญเลศ อรณพบลย
3
แถบเครองมอหลก (Main Toolbar)
แถบเครองมอควบคมการทางานหลกของโปรแกรม เชน การสรางไฟลใหม, การเปดไฟล, การคดลอกขอมลเปนตน โดยสามารถควบคมใหแสดง หรอไมตองแสดงโดยคลกเลอกคาสง Window, Toolbars, Main
แถบเครองมอ (Toolbox)
กลมเครองมอสรางงานและจดการวตถ ประกอบดวยปมเครองมอยอยตางๆ สามารถเปด/ปดดวยคาสง Window, Tools โดยสามารถแบงเครองมอเปนหมวดๆ ได 5 หมวด คอ เครองมอหมวดเลอกวตถ (Selection) เครองมอหมวดวาดภาพ (Drawing) เครองมอจดแตงวตถ (Modify) เครองมอควบคมมมมอง (View) และเครองมอควบคมส (Color)
บญเลศ อรณพบลย
4
Document Tab
สวนควบคมเอกสาร สามารถคลกเพอสลบเปลยนจอภาพเอกสาร
Timeline & Layer
Timeline เปนสวนสาคญททาหนาทควบคมการนาเสนอผลงาน สามารถเปด/ปดดวยคาสง Window, Timeline
Layer สวนควบคมการสรางชนวตถ เพอใหการควบคมวตถแตละชน มอสระ และสะดวกตอการแกไข ปรบแตง
Stage & Workspace
จากรปตวอยางน เมอสงนาเสนอผลงาน แสดงวาจะกาหนดใหเรอยงไมตองแสดงผลทนทบนจอภาพ เพราะเรอถกนาไปวางไวในพนทสเทา เมอนามาทาเปน Movie ใหเรอวงผานจอภาพไปอกดานหนง กจะปรากฏเรอวงผานจอจากดานซายไปดานขวาของจอ ตามชวงเวลาทกาหนด
บญเลศ อรณพบลย
5
Panel
หนาตางเลกๆ ททาหนาทแสดงคาสงควบคมยอยตางๆ ของโปรแกรม โดยจะปรากฏรายการคาสงในเมน Window
ควบคม Panel
Panel เปนจอภาพเลกๆ ทแสดงฟงกชนการทางานเฉพาะอยาง เชน การทางานเกยวกบสจะควบคมดวย Color Mixer หรอ Color Swatches การจดตาแหนงวตถตางๆ ควบคมดวย Align Panel เปนตน การเรยกใชหรอเปด/ปด Panel จะใชคาสง Window แลวตามดวยชอ Panel นนๆ
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
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 เพอยกเลกการปดไฟล กลบสจอภาพสรางงานตามปกต
บญเลศ อรณพบลย
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)
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
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… ซงเปนคาสงทนยมเลอกใชมากกวา กรณทเปนภาพเคลอนไหว โดยจะปรากฏหนาตางทางาน ดงน
บญเลศ อรณพบลย
11
เลอกฟอรแมตทตองการใชงาน
• ใชงานในเครอขายอนเทอรเนต ใหคลกเลอกรายการ Flash และ HTML
• สราง Movie ในฟอรแมต QuickTime ใหเลอกรายการ QuickTime ซงจะไดไฟล Movie ทมสวนขยายเปน .mov
• สราง Movie ทสามารถนาเสนอไดทนท โดยไมตองอาศย Plug-Ins ใดๆ ใหเลอกรายการ Windows Projector ซงจะไดไฟลทมสวนขยาย .exe หรอเลอกรายการ Macintosh Projector สาหรบการนาเสนอบนเครองคอมพวเตอร Macintosh
เมอเลอกรปแบบไฟลทตองการแลว ใหคลกปม Publish โปรแกรมจะแปลงงานบน Stage เปน Movie ตามฟอรแมตทเลอก โดยใชชอไฟลเดยวกบไฟล Flash ตนฉบบ
บญเลศ อรณพบลย
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:
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
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) ของวตถ
บญเลศ อรณพบลย
15
การใชเครองมอของ Flash
การสรางภาพกราฟกตางๆ สามารถใชเครองมอกราฟกจากชดเครองมอ Toolbox โดยมเครองมอหลายกลม และเปด/ปด Toolbox ไดจากเมนคาสง Window, Tools
Tools Modifier
Tools Modifier เปนสวนขยายคาสงของเครองมอปกต โดยรายการในสวนนจะปรบเปลยนไปตามเครองมอทเลอก ดงนนการเลอกเครองมอใดๆ ควรตรวจสอบคาสงยอยของเครองมอนนๆ จากสวนควบคมนดวยเสมอ
Tool modidier ของเครองมอ Tool modidier ของเครองมอ
เครองมอกลมเลอกวตถ (Selection)
เครองมอกลมวาดภาพ (Draw)
เครองมอกลมจดการปรบแตงแกไข (Edit)
เครองมอกลมแสดงผล (View)
เครองมอกลมจดการส (Color)
เครองมอกลมคาสงเสรม (Tools Modifier)
บญเลศ อรณพบลย
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 ไดเชนเดยวกน
บญเลศ อรณพบลย
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
คนคาสสคาเดม คอดา, ขาว
บญเลศ อรณพบลย
18
เพมส
การเพมรายการส สามารถทาไดโดยคลกทเครองมอเลอกส (จะเปนFill หรอ Stroke) กได แลวคลกทปม Color Picker ซงปรากฏทมมบนขวาของจอภาพแสดงคาส
ปรากฏจอภาพผสมสใหม
คลกในชอง Custom colors
ผสมสตามตองการ
คลกปม Add to Custom Colors
การเลอกสใหกบกราฟกตางๆ ทวาดดวยเครองมอของ Flash นอกจากจะใชสวนควบคมสทกลาวไปแลว กจะมรายการเลอกสใน Properties Panel ของเครองมอนนๆ
คลกทปม Color Picker
บญเลศ อรณพบลย
19
แผงควบคมส (Color Panel)
Color Panel เปนการเพมประสทธภาพของการทางานเกยวกบส โดยเฉพาะในสวนทเปนการไลโทนส (Gradient) เนองจากการสรางชดสการไลโทน ไมสามารถทาไดจากสวนควบคมสปกต Flash เตรยม Panel เกยวกบสไว 2 ชดคอ
• Swatches ซงมการทางาน/ใชงานลกษณะเดยวกบ Toolbox
• Color มสวนเพมเตมการใชสมากกวาปกต เชน การทาสแบบไลโทนลกษณะตางๆ,
การใชภาพกราฟกมาเปนพนของกราฟก (Texture) รวมทงการปรบคาความโปรงใสของส (Alpha)
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
21
• คลกปม Color Mixer Option Menu แลวเลอกคาสง Add Swatch เพอเพมสทกาหนดใหกบโปรแกรม
ความโปรงใสของสวตถ (Alpha)
รปวงกลมไมไดกาหนดคาความโปรงใส กจะซอนทบสเหลยมแบบไมเหนภาพดานหลง แตถากาหนดวงกลมใหมคาโปรงใส กจะทาใหสของวงกลมมลกษณะจาง และมองทะลไปเหนรปดานหลงได
บญเลศ อรณพบลย
22
เครองมอวาดภาพ
สเหลยม, วงกลม, วงร
• คลกเลอกเครองมอ Rectangle สามารถคลกคางไวเพอเลอกรปแบบการวาด
• กาหนดสพน, สเสนขอบ และลกษณะของเสนขอบจาก Properties
o กาหนดลกษณะของเสนขอบวงร วงกลมไดโดยคลกปม แลว
ปรบแตงลกษณะของเสนขอบไดจาก Stroke Style Dialog Box ดงภาพ
• นาเมาสมาคลก ณ ตาแหนงทตองการวาดรป กดปมเมาสคางไว แลวลากเมาส เมอได
ขนาดและรปทรงทตองการ จงปลอยนวจากเมาส • ถาตองการรปทสมบรณ ควรกดปม <Shift> คางไว ขณะลากเมาส
ลบวตถดวย Eraser Tool
วตถตางๆ ทวาดไวแลว สามารถลบได 3 วธ คอ • ลบวตถทงหมดโดยดบเบลคลกท Eraser Tool • ลบเฉพาะ Fill หรอ Stroke ของวตถ โดย
o คลกเลอก Eraser Tool
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
24
การเลอกวตถ (Selection)
วตถในความหมายน กคอ รปทรง รปภาพ ภาพกราฟกทวาด หรอนาเขามาใชงานใน Flash นนเอง การเลอกวตถ เปนขนตอนสาคญในการปรบเปลยน แกไข แปลงวตถ โดยโปรแกรมเตรยมเครองมอเลอกวตถดงน
Selection Tool สาหรบเลอกวตถในสภาวะปกต
Subselection Tool สาหรบการเลอกวตถในโหมดจดเชอม
Lasso Tool สาหรบการเลอกวตถทมรปทรงอสระ หรอกาหนดขอบเขตการเลอกอสระรวมทงการเลอกโดยใชคาสทมคาเดยวกนหรอใกลเคยงกน
สงสาคญทสดในการเลอกวตถใน Flash กคอ อยาลมวาวตถทกชนเกดจาก “จด” หลายๆ จดมาประกอบรวมกน และแตละวตถจะประกอบดวยโครงสรางอยางนอย 2 สวนคอ สวนทเปน “Fill” และสวนทเปน “Stroke” ดงน
Stroke Fill Shape
บญเลศ อรณพบลย
25
รปแสดง “จด” อนเกดจากการเลอกบางสวนของวงกลม
การเลอกวตถ หรอกลมวตถดวย Selection Tool
• คลกเลอกเครองมอ Selection Tool • เลอกวตถ โดยยดหลกดงน
o เลอกเสนขอบของวตถ นาเมาสไปชทเสนขอบวตถ แลวคลกหรอ ดบเบลคลก
o เลอกพนวตถ นาเมาสไปชทพนวตถ แลวคลกหรอ ดบเบลคลก
เลอกเสนขอบ เลอกพนวตถ
o เลอกวตถทงชน นาเมาสไปชทวตถ แลวดบเบลคลก
o เลอกวตถทงชน นาเมาสไปช ณ ตาแหนงมมของวตถ แลวลากกรอบสเหลยมคลมวตถ
o เลอกวตถหลายๆ ชน นาเมาสไปช ณ ตาแหนงมมของวตถ แลวลากกรอบสเหลยมคลมวตถ
การเลอกวตถโดยการลากคลมพนท
o เลอกวตถหลายๆ ชน คลกวตถชนท 1 กดปม S คางไว แลวคลกวตถชนถดไปเรอยๆ
o เลอกวตถทกชนบน Workspace และ Stage กดปม Ca
บญเลศ อรณพบลย
26
ยกเลกการเลอกวตถ
• นาเมาสไปคลกบนตาแหนงวางๆ ของ Stage หรอ เลอกเมนคาสง Edit, Deselect All
ซอนการเลอกวตถ
บางครงผใชอาจจะตองการซอนการเลอก (Selection) ไวชวคราว เพอทางานหรอตรวจสอบผลใหถกตองกอนการใชงานจรง ซงกระทาไดโดยเลอกเมนคาสง View, Hide Edges หรอกดปม Ch
การยกเลกคาสง (Undo)
เมอสงงานใดๆ ผดพลาด สามารถยอนกลบ หรอยกเลกคาสงนนๆ ไดโดยคลกปม Cz หรอ Edit, Undo… ซงสามารถยกเลกคาสงยอนหลงไดมากกวา 1 ครง
ปรบแตง แกไขวตถ
จดเดนของการสรางวตถดวย Flash กคอวตถ หรอกราฟกทสรางไวแลว สามารถปรบแตง แกไข ปรบเปลยนรปทรง ขนาด และลกษณะไดงาย รวดเรว
เปลยนรปทรง
กราฟกจาก Flash เกดจากการรวมกนของ “จด” ทาใหการปรบแตง เปลยนรปทรงกระทาไดงาย และสะดวก เพยงแตใชหลกการ Drag & Drop กทาใหรปทรงพนฐาน เชน วงกลม, วงร, สเหลยม เปนสภาพเปนรปทรงอสระอนๆ ไดตามตองการ เชน
บญเลศ อรณพบลย
27
การเปลยนรปทรงของวตถ มหลกการดงน
• วาดรปทรงพนฐานทตองการ จากตวอยางคอรปสเหลยม
• เลอกเครองมอ Selection
• นาเมาสไปชบรเวณเสนขอบของรป สงเกตเมาสจะมรปรางเปน กดปมเมาสคางไว เมอลากเมาสรปทรงจะถกยดหรอขยาย หรอหดตวตามทศทางการลากเมาส
• นาเมาสไปชบรเวณมมเหลยมของรป สงเกตเมาสจะมรปรางเปน กดปมเมาสคางไว เมอลากเมาสรปทรงจะถกยดหรอขยาย หรอบดตวตามทศทางการลากเมาส
ตวอยางการวาดจรวดแบบงาย
วาดสเหลยมผนผา เลอกเครองมอ Move เลอนไปชทมมบนขวา
ของสเหลยม ดงเขามาตาแหนงกงกลางของดานขวา ถาดงแลวสดสวนบดเบยวใหคลก เพอตรงตาแหนงการบดภาพ จากนน ทาซากบมมลางขวา
เลอนไปชทขอบซาย แลวดงเขามาดานใน ใหไดเปนรปจรวดดงตวอยาง
การยายวตถ
• คลกเลอกเครองมอ Selection Tool • เลอกวตถ แลวลากเมาสเพอยายวตถไปยงตาแหนงใหม • เลอนวตถเปนแนวเฉยง 45 องศา ใหกด S ดวย • เลอนวตถเปนระยะทางสนๆ ครงละ 1 pixel ใหใชปมลกศร • เลอนวตถเปนระยะทางสนๆ ครงละ 10 pixel ใหใชปมลกศร พรอมกบการกด S • เลอนวตถไปยงตาแหนงตางๆ โดยระบพกด ใหระบพกด x, y จาก Shape Properties
ตาแหนงมมบนซายของ Stage จะมพกดเปน 0, 0
บญเลศ อรณพบลย
28
การยอ/ขยาย และปรบรปทรงของวตถ
• เลอกวตถ • คลกปมเครองมอ Free Transform Tool
วตถสภาวะปกต วตถในสภาวะ Free Transform
• นาเมาสไปชทมม หรอขอบวตถ แลว Drag & Drop เพอปรบขนาด หรอรปทรงตามตองการ
• คลกเลอกจากเมนคาสง Modify, Transform,… ซงมคาสงใหเลอกทงคาสงหมนวตถ,
คาสงกลบดานของวตถ เปนตน
ภาพตนฉบบ Distort
Envelop Skew
การจดเรยงวตถ (Alignment)
บางครงวตถทตองใชงานจะมมากกวา 1 ชน ซงจาเปนตองจดเรยงตาแหนงใหอยในแนวระดบเดยวกน หากใชเมาสลากแลวปลอยโอกาสทจะตรงกน หรอในแนวเดยวกนกทาไดยาก Flash ไดเตรยมคาสง Align เพอชวยจดเรยงวตถไดสะดวก รวดเรว
บญเลศ อรณพบลย
29
วาดวตถใหอยนอก Stage เลอกวตถดวยเครองมอ Move เปด Align Panel
คลก ตอดวย และ
การคดลอกลกษณะเสนขอบวตถ
การคดลอกลกษณะเสนขอบวตถ จะชวยใหการปรบแตงแกไขวตถมากกวา 1 ชนทาไดสะดวกกวาการปรบเปลยนทละชน ตวอยางมวตถบน Stage 3 ชนลกษณะตางๆ กน ดงภาพ
ตองการใหวงกลม และสเหลยมเสนขอบดา มเสนขอบเดยวกบสเหลยมชนทสอง ทมเสนขอบเปนจดสแดง หากตองเลอกแลวปรบเปลยนทละชน กจะเสยเวลามาก วธการทสะดวก คอ
• คลกเลอกเครองมอ Eyedropper
• นาเมาสซงมรปรางเปน Eyedropper ไปชทเสนขอบของสเหลยมชนตนฉบบ (สเหลยม
ดานขวาสด) สงเกตไดวาเมาสจะมรปรางเปน แสดงวาไดเลอกเสนขอบวตถไดถกตอง เมอคลกเมาส 1 ครงเมาสจะเปลยนรปรางเปน แสดงวาขณะน Flash อยในโหมด Ink Bottle ซงเปนโหมดในการคดลอกลกษณะเสนขอบนนเอง
• นาเมาสทเปนรปราง ไปคลกบนวตถชนอนๆ ทตองการปรบเปลยนลกษณะเสนขอบ
บญเลศ อรณพบลย
30
กลมวตถ (Group)
ภาพกราฟกหลายๆ ภาพ ไดจากภาพ หรอรปทรงยอยหลายๆ ชนมารวมกน เพอใหการปรบแตงแกไข เคลอนยายกระทาไดสะดวก มกจะรวมภาพกราฟก หรอรปทรงทกชนทเกยวของ ใหเปนกลมเดยวกนโดยเลอกวตถทกชน แลวเลอกเมนคาสง Modify, Group และเมอตองการแยกกลบ
สสภาพเดมกเลอกคาสง Modify, Ungroup
รปการตนทเกดจาก Shape หลายชนประกอบรวมกน
ปญหาจากการยาย Shape รปทยงไมไดรวมกลม
รปทผานการรวมกลมแลวจะมเสนขอบสฟาลอมรอบ
การแยกชนสวนของวตถ
วตถบางชนทเปน Group หรอ Instance เมอจะตองนามาทาเปน Movie แบบ Shape Tweening จาเปนตองแยกชนสวนของวตถใหอยในสภาวะ “จด” กอนเสมอ ซงทาไดโดยเลอกวตถกอน จากนนจงใชเมนคาสง Modify, Break Apart หรอกดปม Cb
รปภาพในสภาวะกลม
บญเลศ อรณพบลย
31
รปภาพทผานการ Break Apart แลว
การปรบแตงแกไขวตถทเปน Group
วตถทอยในสภาวะ Group สามารถยอ/ขยาย หมนไดอสระ แตจะไมสามารถปรบแตงแกไขเกยวกบสได หากตองการปรบเปลยนสของวตถทเปน Group จะตองเขาไปแกไขในโหมดจอภาพเฉพาะเกยวกบ Group ซงกระทาไดโดยการดบเบลคลกทวตถนนๆ จอภาพจะเขาสโหมดการแกไข Group ซงสงเกตไดจาก
• Scene 1 หมายถงจอภาพในโหมดหลก • Group หมายถงจอภาพในโหมดแกไข Group จะสงเกตไดวาวตถชนอน จะมสท
จางไป
จอภาพโหมดปกต (Scene1)
โหมดแกไข Group จะพบวาภาพคลนทะเลจะจางกวาปกต
เมอปรบแตงแกไขวตถเรยบรอยแลว ใหคลกท Scene 1 เพอกลบสโหมดการทางานปกตดวยทกครง
บญเลศ อรณพบลย
32
ฝกหดวาดภาพ
เมอรจกโปรแกรมและเครองมอตางๆ ของ Flash แลว กจะเขาสบทเรยนฝกหดวาดภาพ ซงมหลกทไมยากอยางทคด ขอใหนกถงหลก “เชอม ตด ปรบเปลยน” เทานนกพอ
แผนท
การวาดแผนทแสดงเสนทาง โดยอาศยหลกการเชอมและตด
• วาดเสน ใหมลกษณะ ดงน
• จากภาพจะพบวาเปนการนากรอบสเหลยมหลายขนาดมาวางซอนกนทบ ลกษณะนคอ
การใชเทคนค “เชอม” การทจะทาใหมลกษณะเปนเสนทางแผนท จะตองตดสวนบางสวนของกรอบสเหลยมออกไป ดงน
o การตดสวนดงกลาวทง เรมจากการเลอกเครองมอ Selection o นาเมาสไปคลก ณ สวนทตองการตด จะพบวาสวนทเลอกมลกษณะเปน “จดเลกๆ
หลายจด” ดงตวอยาง
สวนทตองตดทง
บญเลศ อรณพบลย
33
o จากนนกดปม = เพอลบสวนทเลอก จะปรากฏผลดงน
o ทาซากบสวนอน ทตองการลบ โดยการใชเครองมอ Selection เลอกกอนแลวกด
ปม = เพอลบทง
หนาคนจากวงกลมและเสนตรง
วาดวงกลม วาดเสนตรงผาน
สวนบนของวงกลมในลกษณะเฉยงดงภาพ
เลอกเครองมอ Selection เลอนเมาสไปชทเสนตรง ใหเมาสมรปรางเปน
กดปมเมาสคางไว แลวดงใหเสนมลกษณะโคง
คลกเลอกเสนทอยนอกวงกลม กดปม = เพอลบทง
เลอกสผม แลวเตมส วาดตา จมก และปากดวยเครองมอวาดเสน หรอ ดนสอ แลวปรบใหมความโคงตามตองการ
สวนทตองการคลกเพอลบทง
บญเลศ อรณพบลย
34
หนาคนจากหลายๆ วตถ
เดกชายสวมหมวก
เดกหญง
คนสงอาย
บญเลศ อรณพบลย
35
ดวงอาทตย
รองเทาสเกต
ถงเทาเดก
บญเลศ อรณพบลย
36
ใบไม
หมวก
ตนครสมาตส
ตนไม
บญเลศ อรณพบลย
37
ตนไม
ดอกไม
ดนสอ
ตกตาหม
บญเลศ อรณพบลย
38
ฮปโป
ผลไมการตน
สตอรเบอรร
บญเลศ อรณพบลย
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 มลกษณะเปนจด มกรอบสลอมรอบ มจดกงกลางกลมและกากบาทกากบ
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
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 ทนท
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
43
o Brightness ความสวาง o Tint การปรบแกไขส/ความโปรงแสง o Alpha การปรบแกไขความโปรงแสง o Advanced การปรบแกไขสและคาความโปรงแสงแบบ Advanced
บญเลศ อรณพบลย
44
เฟรมและ Timeline
การสรางภาพยนต หรอภาพเคลอนไหวใด กคอการสรางอรยาบถของภาพใหมการเปลยนแปลงไปตามชวงเวลา เชน การวาดการตนลงกระดาษแตละใบ ใหมอรยาบถแตกตางกนไป เมอนาการตนทกภาพมาแสดงอยาง รวดเรว กจะทาใหภาพมลกษณะเปนภาพเคลอนไหว เมอมการนาคอมพวเตอรมาใชสรางสรรคภาพยนต หรอภาพเคลอนไหว เฟรมกเปรยบเสมอนกระดาษแตละใบ ทมการวาดอรยาบถของการตนลงไป และ Timeline กคอชวงเวลาทใชควบคมการนาเสนอ ดงนน Frame และ Timeline จงเปนสวนสาคญอกสวนในการสรางภาพเคลอนไหวของ Flash โดยมลกษณะหนาตาง ดงน
Timeline
เปรยบเสมอนเวลาทใชในการสรางภาพเคลอนไหว หรอ Movie โปรแกรมจะแบงชวงใหหนวยละ 5 ชวงเวลา
เฟรม
คอชองเลกทเรยงตอกนตามชวงเวลา แตจะชองเปรยบเสมอนกระดาษ 1 แผนทวาด Movie 1 อรยาบถ และเปลยนไปทกๆ เฟรม เพอใหเกดการเคลอนไหวของวตถ เชน เฟรมชองท 1 วาดวงกลมไวรมซายสดของ Stage เฟรมท 2 วาดวงกลมใหเลอนมาดานขวานดหนง และทาซาๆ ไปเรอยๆ ซงเปนการสราง Movie ใหวงกลมวงจากดานซายมาดานขวานนเอง
บญเลศ อรณพบลย
45
Playhead
ตาแหนงของเฟรมปจจบนทจะปรากฏบน Stage
เฟรม และคยเฟรม (Frame & Keyframe)
คยเฟรม คอ การกาหนดตาแหนงการสรางภาพเคลอนไหวทมเนอหาภายในแตกตางกนไป โดยตาแหนงเฟรมใดทตองการกาหนดใหมสถานะเปน Keyframe ใหใชคาสง Insert, Timeline,
Keyframe เฟรม คอ การกาหนดตาแหนงภาพทไมมการเปลยนแปลง ไมมการเคลอนไหว เชนการทา
ฉากหลง โดยตาแหนงเฟรมใดทตองการกาหนดใหมสถานะเปน Frame ใหใชคาสง Insert,
Timeline, Frame
ควบคมเฟรม
การควบคมเฟรม เชน การใสคยเฟรม หรอแทรกเฟรม นอกจากใชคาสงจากเมน Insert ยงสามารถใช Context Menu ซงเปนวธทสะดวกกวา โดยคลกขวาในเฟรมทตองการ แลวเลอกคาสงทตองการ
ลบเฟรม
• เลอกเฟรมทตองการลบ (สามารถใชการคลกเมาสขวาในเฟรมทตองการ) • เลอกคาสง Remove, Frames
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
48
ตวอยาง Motion Tween – ดนสอ
สราง Motion Tween เปนรปดนสอเคลอนทจากตาแหนงหนง ไปอกตาแหนงหนง ม 4 ขนตอน ดงน
ขนแรก สรางวตถ (ดนสอ)
• สรางไฟล Flash แลวกาหนดลกษณะ Stage ใหเหมาะสมดวยคาสง Modify, Document
• วาดสเหลยมรปทรงแทงยาว กาหนดลกษณะเสนขอบตามความหมาะสม
• เตมสใหกบดนสอ โดยการใชชดสไลโทน “สม/ขาว” โดยเปด Color Mixer Panel เลอกรายการชดสเปน Linear กาหนด Color Maker 3 ตาแหนง โดยตาแหนงท 1 และตาแหนงท 3 ใหกาหนดเปนสสม ตาแหนงท 2 กาหนดเปนสขาว
• เลอกเครองมอ Paint Bucket
เตมสลงในรปสเหลยม
• ใชเครองมอวาดเสน ตเสนตรงตดรปสเหลยม 2 ตาแหนง เพอแปลงสภาพเปนปลายดนสอ และยางลบ
• เลอกเครองมอ Selection ปรบปลายดานหนงสเหลยมใหเปนสามเหลยม ดงรป
บญเลศ อรณพบลย
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 ได
บญเลศ อรณพบลย
50
• ใชเครองมอ Selection และ Free Transform ยาย/ปรบเปลยนรปทรงของดนสอใหเหมาะสม
ขนทสาม กาหนดตาแหนงปลายทาง
• คลกเมาสเลอกเฟรมปลายทาง เชนเฟรม 50 แลวคลกปมขวาของเมาส เลอกคาสง Insert Keyframe
• ใชเครองมอ Selection ยายตาแหนงดนสอไปตาแหนงใหม
ขนท 4 ใส Motion Tween ทเฟรมตนทาง
• คลกเมาสในเฟรมตนทางของ Motion จากตวอยางคอเฟรมท 5
• คลกปมขวาของเมาส แลวเลอกคาสง Create Motion Tween
• ทดสอบ Movie โดยใชคยลด CE
o กลบมาสจอภาพแกไข Movie โดยกดปม Cw
• บนทกไฟล (ยกตวอยางชอ pen) แลว Publish เปน SWF
ยาย
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
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 กาหนดคาตามตองการ
• วาดรปหลายเหลยม ใหอยในตาแหนงเดยวกบวงกลมทลบไปเดม
• เลอนเมาสมาคลกทเฟรมแรก
บญเลศ อรณพบลย
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
เสนทวาด
บญเลศ อรณพบลย
54
Keyframe
• ขยายเสนทขดในเลเยอร Line ใหยาว มระยะทางเทากบจดปลายทางของดนสอ โดยใช
เครองมอ Free Transform คลกเลอกเสนขด จากนนยายจดศนยกลางของเสนขดไปอยรมดานซาย (ใชเครองมอ Zoom เพอขยายภาพใหเหนเดนชด)
• ลากจด Handle ดานขวาใหยาวเทากบปลายทางของดนสอ
• เลอนเมาสกลบมาคลกทเฟรมตนทางของเลเยอร Line
• เปลยนคา Tween จาก Properties เปน Shape
• ทดสอบ Movie โดยใชคยลด CE
o กลบมาสจอภาพแกไข Movie โดยกดปม Cw
• บนทกไฟล แลว Publish เปน SWF
บญเลศ อรณพบลย
55
ตวอกษร/ขอความ
เมอทราบถงการสรางกราฟก และการจดการกราฟกทใชใน Flash แลว สวนประกอบอกสวนหนง ซงจะขาดไมได กคอ ตวอกษร หรอขอความ โดยมคาสงทเกยวของดงน
สรางขอความ
• คลกเลอกเครองมอ Text Tool • เลอกลกษณะตวอกษร และพารากราฟ จาก Text Property
โหมดตวอกษร – Static คอตวอกษรในสภาวะปกต, Dynamic คอตวอกษรทรบคาจาก ตวแปร, Input คอตวอกษรทสามารถปอนผานแปนพมพ
• นาเมาสไปคลก ณ ตาแหนงทตองการพมพงาน ปรากฏกรอบพมพงาน o ถาคลกเมาส 1 ครงจะเปนการพมพงานแบบบรรทดเดยว สงเกตไดจากมมบนขวา
ของกรอบขอความ มสญลกษณวงกลมเลกๆ
o ถากดปมเมาสคางไว แลวลากขยายขนาดของกรอบขอความ จะเปนการพมพงาน
แบบหลายบรรทด สงเกตไดจากมมบนขวาของกรอบขอความ มสญลกษณสเหลยมเลกๆ
• พมพงานทตองการ สามารถยกเลกโดยนาเมาสไปคลก ณ ทวางๆ บน Stage
บญเลศ อรณพบลย
56
ตวอยางการจดขอมลใหมระยะหางระหวางตวอกษร 4 หนวย โดยคลกท
ปรบเปลยนกรอบขอความ
• เปลยนจาก กรอบบรรทดเดยว เปนหลายบรรทด ใหนาเมาสไปชทวงกลม มมบนขวาของกรอบขอความ กดปมเมาสคางไว แลวลากออก
• เปลยนจากกรอบหลายบรรทด เปนบรรทดเดยว ใหดบเบลคลกทสญลกษณสเหลยม มมบนขวาของกรอบขอความ
ปรบเปลยนรปรางตวอกษร
กอนทจะปรบเปลยนรปรางของตวอกษร ซงสามารถกระทาไดรายตวอกษร จะตองแยกองคประกอบของขอความนนๆ กอน โดย
• คลกเลอกขอความ • เลอกเมนคาสง Modify, Break Apart (อาจจะใชคาสงนหลายครง) • ตวอกษรจะกลายเปน Shape ซงจะสงเกตไดจากจดเลกๆ ในตวอกษรนนๆ
• สามารถปรบแตงรปรางไดอสระ โดยอาศย Arrow Tool • นอกจากการใชคาสง Break Apart ในการปรบเปลยนลกษณะตวอกษร ยงสามารถ
เคลอนยาย, หมน, บดตวอกษรไดเหมอนกบวตถทวไป
บญเลศ อรณพบลย
57
ทางานกบเลเยอร (Layer)
เลเยอร (Layer) หมายถงชนของชนงาน เนองจากการวาดภาพใดๆ กตามหากรวมอยในชนเลเยอรเดยวกน จะเกดปญหาการแกไขไดงาย ดงนนการสรางวตถใดๆ กตามดวย Flash ใหยดหลกทวาวตถ 1 ชนตอ 1 เลเยอรเพอใหการควบคม การสรางงานกระทาไดอยางสมบรณ
เปลยนชอเลเยอร
• ดบเบลคลกทชอเลเยอรเดม แลวปอนชอใหมจากนนกดปม <Enter>
เปลยนลาดบของเลเยอร
• นาเมาสไปคลกทชอเลเยอรทตองการเปลยนลาดบ กดปมเมาสคางไว แลวลากไปปลอย ณ ตาแหนงใหม
ควบคมเลเยอร
• ซอน/แสดงเลเยอร โดยใหคลกทจดกลมเลกๆ ของเลเยอรใตปมน • ลอกเลเยอร ปองกนการแกไข • แสดงผลแบบโครงราง เหมาะสาหรบการสราง Movie กบเครองทมแรม
ไมมากนก
การแสดงผลแบบปกต การแสดงผลแบบโครงราง
สรางเลเยอรใหม ลบเลเยอร
บญเลศ อรณพบลย
58
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
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 (อาจจะตองทาหลายครงจนกวาเสนเสยงจะปรากฏเปนเสนเสยงเรยบ)
บญเลศ อรณพบลย
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) {
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
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 แสดงแถบควบคมเพลงใหเหนทนทหรอไม ?
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
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) {
บญเลศ อรณพบลย
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
บญเลศ อรณพบลย
67
กรอบ VDO
เทคนคทนาสนใจของ Flash กคอ Masking ซงเปนการซอนบางสวนของวตถ (Object) ดวยวตถทซอนทบอยดานบน (เลเยอรบน) เชน เลเยอรลางเปน VDO หรอรปภาพ จากนนสรางอกเลเยอรซอนทบขนไปเปนรปหวใจ เมอสง Mask เลเยอรรปหวใจ กจะปรากฏ VDO หรอรปภาพทอยเลเยอรดานลาง ถกแสดงผลเปนรปหวใจตามรปทรงของวตถทซอนอยดานบนนนเอง ดวยเทคนค Masking จะชวยใหการนาเสนอ VDO มจดเดนในเรองกรอบ VDO
• นาไฟล VDO จากแบบฝกหดกอนหนา มาปรบแตงโดยสรางเลเยอรใหม ใหอยชนบนสด ตงชอเปน Mask
• วาดรปทรงตามตองการ โดยรปทรงทวาดจะถกนามาใชเปนสวนแสดง VDO
• เลอกเลเยอร Mask กดปมขวาของเมาส แลว
เลอกคาสง Mask
• บนทกไฟล แลว Publish เปน .swf
• ทดสอบไฟล .swf
บญเลศ อรณพบลย
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 แลวตดไดหลายสวน
พรอมๆ กน
บญเลศ อรณพบลย
69
ถาคลกเลอกรายการ Combine list of clips into a single library item after import จะเปน การระบให VDO ทเลอกตดแตละสวน รวมเปน VDO ใน Library รายการเดยวกน (เทคนคการผสม VDO จากหลายคลป)
• คลกปม Next เพอเขาสจอภาพการเลอกคณภาพ และการบบอด VDO (Compression) เลอกรปแบบทเหมาะสมแลวคลกปม Finish
• รอสกครจะปรากฏ VDO ใน Library Panel พรอมใชงานตอไป