โครงการฝึกอบรมเชิงปฏบิ ัติการผลิตสื่อการเรยี นการสอนAdobe Flashเรื่อง การสรา้ ง Animation และสอื่ มัลตมิ ีเดียดว้ ยโปรแกรม Adobe Flash
สารบัญบทที่ 1 สว่ นประกอบของ Flash 11.1 สว่ นติดตอ่ กบั ผ้ใู ช้ 21.2 กลอ่ งเคร่ืองมอื 31.3 การเร่ิมต้นชิน้ งาน 41.4 การควบคมุ มมุ มองของโปรแกรม 51.5 การบนั ทกึ ไฟล์ 51.6 การเลอื กวตั ถุ 61.7 การจดั วตั ถุ 7บทที่ 2 การสร้างวตั ถกุ ราฟิ ก 82.1 การวาดเส้นตรง 82.2 การดดั เส้น 82,3 การเปลย่ี นคณุ สมบตั ขิ องเส้น 82.4 การเปลยี่ นความหนาเส้น 92.5 การปรบั แตง่ ขอบของมมุ เส้น 92.6 การปรบั รูปแบบของปลายเส้น 102.7 การวาดเส้นอสิ ระ 102.8 การวาดเส้นโดยใช้ปากกา 102.9 การเพิ่มจดุ ของเส้น 112.10 การวาดรูปทรงสเ่ี หลีย่ ม 112.11 การวาดวงกลม 122.12 การวาดรูปทรงหลายเหล่ียม 132.13 การใช้เครื่องมอื ยางลบ 142.14 การลงสีวตั ถุ 152.15 การเทสลี งบนพืน้ ท่ี 162.16 fการเทสีลงบนเส้น 162.17 การจดั การระบบสี 17
2.18 การปรบั สีจาก Panel 172.19 การควบคมุ การไลส่ ี 17บทท่ี 3 การจดั การข้อความ 193.1 โหมดตวั อกั ษร 203.2 ปัญหาภาษาไทยกบั Flash 203.3 วิธีการพิมพ์ข้อความ 203.4 การเปลย่ี นคณุ สมบตั ขิ ้อความเป็นหมวดตา่ ง ๆ 223.5 การเปลย่ี นคณุ สมบตั ิของข้อความให้เป็นรปู ภาพ 22บทที่ 4 การจดั การวตั ถุ 244.1 การแปลงวตั ถเุ ป็น Symbol 244.2 การเรียกใช้และแก้ไข Symbol 254.3 การสร้าง Symbol แบบป่ มุ 254.4 การสร้าง Symbol แบบภาพเคลือ่ นไหว 274.5 การจดั การ Library 284.6 การเปลย่ี นคณุ สมบตั ิ Symbol 294.7 นา Symbol จากไฟล์อื่นมาใช้ 30บทที่ 5 การทา Animation 315.1 การใช้ Play Head 315.2 สร้าง Layer ใหม่ 325.3 สร้าง Folder 325.4 วธิ ีการสร้าง Folder 325.5 ระบบ Frame 335.6 การเพิ่ม Key Frame 335.7 การเพิ่ม Frame 34
บทท่ี 6 การสร้างภาพเคลอื่ นไหว 366.1 Animation แบบเฟรมตอ่ เฟรม (Frame by Frame) 366.2 การสร้าง Animation แบบเฟรมตอ่ เฟรม 376.3 Animationแบบเคลอ่ื นท่ี (Motion Tween) 386.4 การสร้างAnimationแบบเคลอื่ นที่ (Motion Tween) 396.5 การปรบั แตง่ การเคล่อื นไหวแบบ Motion Tween 406.6 Animation แบบเปลยี่ นรูปทรง (Shape Tween) 406.7 การสร้าง Animation แบบเปลย่ี นรูปทรง (Shape Tween) 416.8 การเคลอ่ื นไหวตามเส้น Guide (Motion Guide) 426.9 วิธีการสร้างภาพเคลื่อนไหวตามเส้น Guide 426.10 การใช้Maskกบั งาน Animation 456.11 วธิ ีการใช้งาน Mask 466.12 การเปลี่ยนคณุ สมบตั ิสีของ Animation 476.13 ขนั้ ตอนการปรับแตง่ คณุ สมบตั สิ ี 48บทท่ี 7 การแทรกไฟลV์ DO และ Sound 517,1 การแทรกไฟลV์ DO 517.2 การแปลงไฟล์ VDO 517.3 การบนั ทกึ ไฟล์ Clip จาก YouTube 527.4 การนาไฟล์ VDO เข้าไปใสใ่ น flashแบบท่ี 1 537.5 การนาไฟล์ VDO เข้าไปใสใ่ น flashแบบที่ 2 557.6 การแทรกไฟล์เสยี ง 567.7 การนาไฟลเ์ พลงเข้ามาใช้เบือ้ งหลงั 567.8 การนาไฟลเ์ สียง Fx เข้ามาใช้ 587.9 การแทรกไฟลเ์ สยี งพดู ของตวั ละคร 59บทที่ 8 การสร้างระบบการทางานแบบ Interactive 618.1 การทาป่ มุ เมนู 618.2 การปรบั แตง่ คา่ ของ event 65
8.3 การควบคมุ การหยดุ และการเลน่ ของ Animation 668.4 การทาแบบทดสอบแบบเลอื กตอบ 688.5 การทาแบบฝึกหดั ระหวา่ งเรียนแบบแสดงกาโต้ตอบทนั ที 728.6 การโหลดไฟล์ Flash เข้ามาใช้ร่วมกนั 73คีย์ลดั ที่สาคญั ของ Flash 75เอกสารอ้างอิง 77เวบ็ ไซตท์ ี่สามารถ หาความรู้เพิ่มเตมิ ได้ 77
1 บทท่ี 1 ส่วนประกอบของ Flash Adobe Flash แตเ่ ดิมเป็นโปรแกรมของ คา่ ย Macromedia ตอ่ มา Adobe ได้ทาการซือ้ บริษัท ทาให้ช่ือในปัจจบุ นั คอื Adobe Flash โปรแกรม Flash เป็นโปรแกรมท่ีใช้ในการสร้างสอ่ื มลั ตมิ เี ดยี ได้หลากหลาย ภาพเคลอ่ื นไหวแบบ เวคเตอร์ที่มีความคมชดั สามา รถใสไ่ ฟลเ์ สียง วีดีโอ ทาระบบการโต้ตอบกบั ผ้ใู ช้ ทาเวบ็ ไซต์ รวมทงั้ สามารถเขียนโปรแกรมในภาษา Action Script และเชื่อมโยงติดตอ่ กบั ฐานข้อมลู อ่นื ๆ เทคโนโลยี Flash สามารถทางานได้หลากหลายระบบปฏิบตั กิ ารเชน่ Windows MacOs Linux รวมทงั้ อปุ กรณ์แบบพกพาเชน่ โทรศพั ท์มอื ถอื PDA และยงัสามารถทางานเชื่อมตอ่ กบั อปุ กรณ์อื่น ๆ เช่นกล้อง webcam, Printer ผลงานจากโปรแกรม Flash สามารถนาไปประยกุ ตใ์ ช้ในหลากหลายวตั ถปุ ระสงค์เชน่ การทาสอ่ืการสอนแบบเอนิมชนั่ ท่ีมีระบบโต้ตอบได้ , ส่อื นาเสนอสินค้า, เกม, เวบ็ ไซต,์ การ์ตนู ฯลฯ โครงการฝึ กอบรมเชิงปฏบิ ัตกิ ารผลิตส่ือการเรยี นการสอน
1.1 ส่วนตดิ ต่อกับผู้ใช้ 2เม่ือเข้าสโู่ ปรแกรม Flash จะพบหน้าจอที่มสี ว่ นประกอบดงั นี ้ Menu bar Time Line Panel StageTool Box Properties InspectorMenu Barแทบเครื่องมือคาสง่ั ด้วยรูปแบบตวั อกั ษร ที่มีครอบคลมุ ทกุ คาสงั่ โดยจะรวบรวมคาสง่ั แบง่ หมวดหมตู่ า่ ง ๆเราไมค่ วรใช้คาสง่ั จากเมนบู าร์เพียงอย่างเดยี วเพราะจะทาให้ทางานได้ช้าStageพืน้ ที่การทางานโดยพืน้ ที่ท่ีแสดงผลจะอยบู่ นสว่ นสีขาว โดยชิน้ งานท่ีวาดหรือสร้างลงไปจะถกู แสดงผลจากบริเวณนีเ้ ทา่ นนั้ สว่ นพืน้ ท่ีท่ีไมแ่ สดงผลจะเป็นสเี ทา แต่ stage สามารถเปล่ยี นสไี ด้ ไมไ่ ด้มีเพียงแคส่ ีขาวเพียงอย่างเดยี วToolboxกลอ่ งเครื่องมอื ท่ีช่วยให้เรียกใช้คาสงั่ ได้งา่ ยย่ิงขนึ ้ ด้วยการแสดงเป็นรูปภาพ และในสว่ นของ Toolbox ยงั มีสว่ นของการปรับแตง่ คา่ เพ่ิมเตมิ เชน่ การเลอื กรูปแบบการลงสี รูปแบบของคาสง่ั เพ่ิมเตมิ จากToolboxTimelineFlash เป็นโปรแกรมที่ใช้ Timeline เป็นหลกั ใช้สาหรบั กาหนดชว่ งเวลาการเคลื่อนไหวการหยดุ หรือการกาหนดเวลาให้คาสงั่ ตา่ ง ๆ ทางาน โดยการทางานจะแบง่ เป็นสว่ นของ Layer ท่ีทางานเป็นชนั้ เหมอื นกบัการวางแผน่ ใสซ้อนกนั โดย Layer ที่อยดู่ ้านบนสดุ จะเป็น Layer ท่ีเหน็ กอ่ น สว่ น Layer ด้านลา่ งสดุ จะเห็น โครงการฝึ กอบรมเชิงปฏิบัตกิ ารผลิตสื่อการเรยี นการสอน
3ที่หลงั และ สว่ นของ Frame ที่แบ่งเป็นชอ่ ง ๆ แทนชอ่ งละ 1 Frame โดย 1 วินาทีเราสามารถกาหนดได้วา่จะให้แสดงผลจานวนก่ี FrameProperties Inspector และ Panelเป็นสว่ นท่ีแสดงคณุ สมบตั ขิ องวตั ถทุ ี่เลอื ก หรือเรียกใช้งาน โดยสามารถปรบั แตง่ คา่ ตา่ ง ๆ ได้เช่น ปรับขนาดเส้น ปรบั สี แบบอกั ษร1.2 กล่องเคร่ืองมือ Selection tool < v > เครื่องมอื ที่ใช้ทาหน้าท่ีเลอื กวตั ถแุ ละยงั สามารถเคล่อื นย้ายวตั ถไุ ด้ด้วย Subselection tool < A > เคร่ืองมือในการเลอื กสว่ นประกอบของวตั ถเุ ชน่ เลือกเฉพาะจดุ Free Tranform Tool < Q > เครื่องมอื ใช้สาหรบั การหมนุ ภาพ บิดภาพ และขยายภาพ Gradien Tranform Tool < F > เคร่ืองมอื ที่ใช้ปรบั แตง่ การไลส่ ีไปในทิศทางตา่ ง ๆ Lasso Tool < L > เครื่องมือการเลือกบริเวณพืน้ ที่ในชิน้ งานแบบอสิ ระ Pen Tool < P > เครื่องมอื ที่ใช้การวาดเส้นแบบจดุ ตอ่ จดุ โดยสามารถทาเป็นเส้นโค้งและเส้นตรง Add Anchor Point < = > เครื่องมือท่ีใช้การเพิ่มจดุ ของเส้น Delete Anchor Point < - > ใช้ลบจดุ ของเส้น Convert Anchor Point < C > ใช้สาหรบั เปลย่ี นจดุ ของเส้นจากเส้นตรงให้เป็นเส้นโค้ง Text Tool < T > ใช้สาหรบั พิมพ์ตวั อกั ษรข้อความ Line Tool < N > ใช้สาหรับวาดเส้น Rectangle Tool < R > ใช้สาหรับสร้างกลอ่ งสี่เหล่ยี มสามารถปรับขอบมมุ โค้งมนได้ Oval Tool < O > ใช้สาหรบั สร้างวงรี โดยถ้ากดป่ มุ Shift ค้างเอาไว้จะทาให้เป็นวงกลม Rectangle Primitive Tool < R > เป็นเคร่ืองมอื สร้างกลอ่ งสเี่ หลย่ี มโดยสามารถปรับมมุ โค้งได้ทงั้ ก่อนและหลงั สร้าง Oval Primitive Tool < O > ใช้สาหรบั สร้างวงรี โดยถ้ากดป่ มุ Shift ค้างเอาไว้จะทาให้เป็นวงกลมสามารถปรบั แตง่ โค้งได้ทงั้ กอ่ นและหลงั สร้าง PolyStar Tool ใช้สาหรบั สร้างรูปหลายเหลย่ี มโดยสามารถกาหนดได้วา่ จะสร้างก่ีเหลี่ยม โครงการฝึ กอบรมเชิงปฏบิ ัตกิ ารผลิตสื่อการเรยี นการสอน
4 Pencil Tool < Y > ใช้สาหรับวาดเส้นแบบอิสระ Brush Tool < B > ใช้สาหรับวาดเส้นแบบพกู่ นั โดยเส้นมคี ณุ สมบตั ิเดยี วกบั รูปทรงInk Bottle Tool < S > เคร่ืองมอื ใช้สาหรับการเปลีย่ นสีเส้น Paint Bucket Tool < K > เครื่องมือที่ใช้สาหรับลงสีพืน้ ผิว Eye dropper < I > เคร่ืองมอื ท่ีใช้สาหรับดงึ สี ใช้สาหรบั ตรวจสอบสี หรือนาสีไปใช้กบั สว่ นอน่ื Eraser < E > ใช้สาหรับลบวตั ถุHand< H > ใช้สาหรบั เคลอ่ื นย้ายมมุ มองหน้าจอZoom < M,Z > ใช้สาหรับยอ่ ขยายมมุ มองหน้าจอ Stroke color ใช้สาหรบั กาหนดสีของเส้น Fill Color ใช้สาหรับกาหนดสีของพืน้ ผวิ1.3 การเร่ิมต้นชนิ้ งาน2. คลกิ ที่คาสง่ั menu bar File -> New จะปรากฏหน้าตา่ ง New Document3. เลือกรูปแบบชิน้ งานท่ีต้องการซึ่งโปรแกรมจะมคี า่ เริ่มต้นสาหรบั ผลงานหลาย ๆ แบบแต่ โดยปกติ จะเลือกท่ี flash file ActionScript4. ตงั้ คา่ ชิน้ งานได้ท่ี menu bar Modify -> Document ช่อื เร่ือง รายละเอยี ด ขนาดของชนิ ้ งาน รูปแบบการใช้ รายละเอียด หนว่ ยจานวนเฟรมต่อวนิ าที โครงการฝึ กอบรมเชิงปฏบิ ตั กิ ารผลติ ส่ือการเรยี นการสอน
51.4 การควบคุมมุมมองของโปรแกรมการควบคมุ มอมองมสี วนสาคญั ในการทางานที่รวดเร็ว เพื่อใช้งานบ่อย ๆ ควรหดั ใช้คาสง่ั hotkey ร่วมด้วยโดยการควบคมุ มมุ มองมี 2 คาสง่ั หลกั ๆ คอื 1. การ pan ภาพท่ีช่วยการเคลื่อนมมุ มองของกล้องไปตามจดุ ตา่ ง ๆ คลิกท่ี Toolbox Hand tool จากนนั้ คลิกทหี่ น้าจอของชิน้ งาน มมุ มองของหน้าจอจะเล่ือนไปมาเหมอื นกบั วา่ เราใช้มือเล่ือน ชิน้ งานบนโต๊ะ 2. การ Zoom คาสงั่ ยอ่ ขยายมมุ มอง เพ่ือดภู าพรวมและขยายมมุ มองในจดุ ท่ีต้องการแก้ไข คลิกท่ี Zoom แล้วจึงคลิกที่พืน้ ท่ีทางาน โดยปกตคิ า่ เร่ิมต้นจะถกู ตงั้ คา่ ให้เป็นการขยายมมุ มองแต่ ถ้าต้องการยอ่ มมุ มองให้กดป่ มุ Alt ที่คยี ์บอร์ดค้างไว้แล้วคลกิ ท่ีพืน้ ท่ีทางานจะเป็นการยอ่ มมุ มอง1.5 การบันทกึ ไฟล์ การบนั ทึกไฟลเ์ บือ้ งต้นใน Flash มี 2 รูปแบบหลกั ๆ คือ แบบไฟล์ที่ต้องการแก้ไขได้ จะบนั ทกึ เป็นไฟล์ .FLA มีขนั้ ตอนการบนั ทกึ ไฟลด์ งั นี ้ 1. คลกิ ท่ี Menu Bar ท่ี File - > save ในกรณีท่ีต้องการบนั ทึกเป็นไฟล์เดมิ หรือครงั้ แรก และ Save As สาหรับกรณีท่ีต้องการบนั ทกึ ไฟลเ์ ป็นชื่ออนื่ 2. เลอื กตาแหนง่ ที่จดั เกบ็ ไฟล์ พร้อมพิมพ์ช่ือไฟล์ 3. ที่ Save As Type เลอื ก เวอร์ชน่ั ท่ีต้องการ ซงึ่ ถ้านาไปเปิ ดในเคร่ืองที่เวอร์ชนั่ ต่าวา่ จะไม่ สามารถเปิ ดได้ ควรบนั ทกึ เป็นเวอร์ชนั่ ที่ถกู ต้อง ในกรณีที่ไมไ่ ด้ไปเปิ ดเคร่ืองอ่ืนกไ็ มต่ ้องสนใจ สว่ นนีส้ ามารถบนั ทึกได้เลย จากนนั้ กด Saveและสาหรบั ไฟลท์ ี่ใช้สาหรบั เผยแพรบ่ ทหน้าเวบ็ หรือสอ่ื อนื่ ๆ ซึง่ ไฟล์ประเภทนีจ้ ะสามารถดแู ละใช้งานได้เทา่ นนั้ ไมส่ ามารถแก้ไขหรือปรับแตไ่ ด้ จะต้องบนั ทึกเป็นไฟล์ .SWFมขี นั้ ตอนดงั นี ้ 1. คลกิ ท่ี Menu Bar ท่ี File - > Export -> Export Movie 2. เลอื กตาแหนง่ ที่จดั เก็บไฟล์ พร้อมพิมพ์ชื่อไฟล์ 3. ท่ี Save As Type เลือก รูปแบบไฟล์ที่ต้องการ ให้เลือก swf ถ้าต้องการนาชิน้ งานไปเผยแพร่แบบ Flash แตใ่ นสว่ นนีย้ งั สามารถเลอื ก export เป็นภาพเคล่อื นไหวแบบอนื่ ๆ ได้ด้วย โครงการฝึ กอบรมเชิงปฏิบตั กิ ารผลิตส่ือการเรยี นการสอน
61.6 การเลือกวตั ถุ ถึงแม้วา่ Flash จะเป็นโปรแกรมแบบ Vector แตก่ ารเลือกวตั ถสุ ามารถยืดหย่นุ ได้เหมอื นกบัโปรแกรมประเภท Raster คือสามารถเลือกบางสว่ นหรือสว่ นใดสว่ นหนึ่งได้โดยอสิ ระ โดยมเี ครื่องมอื ดงั นี ้ Selection tool ใช้สาหรับการเลอื กทงั้ วตั ถุ ถ้าคลกิ เพียง 1 ครงั้ จะเป็นการเลอื ก 1 วตั ถุ แตถ่ ้าดบั เบิลคลิกจะเป็นการเลอื กวตั ถแุ ละเส้นพร้อมกนั แตถ่ ้าในกรณีท่ีคลิกทีเส้น1 ครงั้ จะเป็นการเลอื กสว่ นของเส้นแตถ่ ้าดบั เบิลคลิกท่ีเส้นจะเป็นการเลอื กเส้นท่ีอยกู่ บั เส้นท่ีคลิกทงั้ หมด คาสงั่ นี ้ยงั เป็นคาสงั่ เคลื่อนย้ายวตั ถุและเปล่ยี นรูปร่างของวตั ถดุ ้วย Subselection tool ใช้สาหรบั เลอื กสว่ นของวตั ถุ โดยให้คลิกที่วตั ถุ 1 ครงั้ จากนนั้ จะปรากฏจดุ ตอ่ของวตั ถุ ซง่ึ สามารถคลิกตามจดุ ตา่ ง ๆ เพื่อปรับเปลี่ยนรูปทรงได้ Lasso Tool ใช้สาหรับเลือกสว่ นของวตั ถโุ ดยกาหนดอณาเขตแบบอสิ ระ โดยวาดขอบเขตท่ีต้องการ โครงการฝึ กอบรมเชิงปฏบิ ัตกิ ารผลิตสื่อการเรยี นการสอน
71.7 การจัดวตั ถุ วตั ถทุ ่ีวาดหรือนาเข้ามาใช้ในโปรแกรม Flash บางครงั้ ต้องการจดั เรียงให้เป็นระเบียบและระยะเท่ากนั ถ้าใช้มือกะระยะอาจมีความผิดพลาดและไมต่ รง โปรแกรมจงึ อานวยความสะดวกดว้ ยเครื่องมือการจดั การตาแหน่งวตั ถดุ งั นี ้ 1. จากภาพวตั ถกุ ลอ่ งจดั วางไมเ่ ป็นระเบียบ 2. ไปที่menu bar เลือก Windows->Align เพื่อเรียกหน้าตา่ ง Align 3. คลกิ ครอบวตั ถทุ งั้ หมด แล้วคลิกเลอื กการจดั ระยะ การเว้นระยะห่าง การเรียงให้ตรงกนั ตามรูป โครงการฝึ กอบรมเชิงปฏบิ ัตกิ ารผลติ ส่ือการเรยี นการสอน
8 บทท่ี 2 การสร้างวัตถกุ ราฟิ ก2.1 การวาดเส้นตรงคลิกท่ีเครื่องมือ Line tool เมาส์จะเปลย่ี นเป็นสญั ลกั ษณ์ + ใครคลกิ ตาแหนง่ เริ่มต้น จากนนั้ คลกิเมาสค์ ้างเอาไว้แล้วลากเมาส์ไปยงั ทิศทางท่ีต้องการ แล้วจึงปลอ่ ยเมาส์ แตใ่ นกรณีที่ต้องการวาเส้นให้ขนานกบั แกน 8 ทิศ ให้กดป่ มุ Shift ขณะลากเส้น จะทาให้เส้นนนั้ ตงั้ ฉากหรือเฉียง 45 องศา โดยที่ไมต่ ้องคอยกะระยะเอง2.2 การดัดเส้นสามารถดดั เส้นตรงที่วาดขนึ ้ ให้เป็นเส้นโคงโดยการคลิกเมาส์ที่ Selection tool จากนนั้ คลิกท่ีบริเวณกลางเส้นค้างเอาไว้แล้วลากไปยงั ทิศทางตา่ ง ๆ เส้นจะถกู แปลงเป็นเส้นโค้ง2,3 การเปล่ียนคุณสมบัตขิ องเส้นให้คลิกที่เส้นท่ีต้องการจะเปลี่ยนคณุ สมบตั ิ ถ้าคลิก1 ครงั้ จะเป็นการเลอื กช่วงเส้น 1 ช่วง แตถ่ ้าใช้การดบั เบิล้ คลิกจะเป็นการเลือกเส้นในบริเวณท่ีตอ่ เนื่องกนั ซึง่ เส้นได้มีการพาดเกี่ยวหรือตดิ กนั กจ็ ะถกู เลือกมาทงั้ หมด จากนนั้ ทึ่ด้านลา่ งของหน้าจอบริเวณหน้าตา่ ง Properties ให้ทาการ set คา่ ดงั นี ้ โครงการฝึ กอบรมเชิงปฏบิ ัตกิ ารผลิตส่ือการเรยี นการสอน
สขี องเส้น ความหนา รูปแบบเส้น 9 กาหนดรูปแบบเส้นเอง เส้นขอบมนหรือตดั รูปแบบการเชือ่ มจดุ ตอ่ ความสมั พนั ธ์กบั ความ รูปแบบการเช่อื มจดุ ต่อ หนาของเส้นและมมุ มอง ชว่ ยลดการเบลอสว่ นโค้งของเส้น Miter ความแหลมของมมุ2.4 การเปล่ียนความหนาเส้น แให้คลิกที่เส้นจากนนั้ ท่ีคาสง่ั เปลี่ยนความหนาของเส้นให้พิมพ์ความหนาลงไปเป็นตวั เลข ในเวอร์ชนั่ CS3 นี ้สามารถใสค่ วามหนาของเส้นเป็นจดุ ทศนิยมได้ หรือใช้วิธีการ สไลด์เพิ่มขนาดหรือลดขนาดท่ีลกู ศรด้านข้างของขนาดเส้น2.5 การปรับแต่งขอบของมุมเส้นในการวาดรูปจะต้องมีการใช้เส้นหลายเส้นมาตอ่ กนั หรือมีการหกั มมุ ของเส้น ถา้ จะให้มคี วามสวยงามจะต้องกาหนดขอบมมุ เส้นด้วย Miter มมุ แหลม Round มมุ มน Beval มมุ ตดั โครงการฝึ กอบรมเชิงปฏบิ ตั กิ ารผลติ สื่อการเรยี นการสอน
102.6 การปรับรูปแบบของปลายเส้นเส้นท่ีวาดขนึ ้ มาตรงปลายเส้นสามารถปรับรูปแบบได้ 3 รูปแบบดงั นี ้ None ปลายเส้นตดั พอดีกบั ความยาวของเส้น Round ปลายเส้นโค้งมน Square ปลายเส้นตดั แตเ่ ว้นระยะออกมาห้างกบั ปลายเส้น2.7 การวาดเส้นอสิ ระการวาดเส้นอิสระจะใช้เครื่องมอื Pencil Tool โดยคาสง่ั นีเ้ สินที่วาดยงั คงคณุ สมบตั ิของ Stoke อยู่สามารถดดั แก้ไขได้งา่ ยเช่นเดยี วกบั คาสง่ั Line สามารถปรับแตง่ ลกั ษณะการวาดได้ โดยการปรับแตง่ จะอยดู่ ้านลา่ งของ Tool box ม3ี ลกั ษณะดงั นี ้ Straighten ทาให้การวาดมีความเป็นเส้นตรง หรือเส้นเป็นรูปทรงโค้ง วงรี วงกลม Smooth ทาให้การวาดมคี วามโค้งมนและมคี วามตอ่ เนื่องกนั Ink ทาให้การวาดมีความอิสระเหมือนกบั การขยบั ของมอื มากท่ีสดุ แตเ่ ส้นมกั มีปัญหาไมต่ อ่ เนื่องกนั2.8 การวาดเส้นโดยใช้ปากกาการวาดเส้นโดยใช้ปากกาเป็นการวาดเส้นทผี่ สมผสานระหวา่ งเส้นตรงกบั การวาดโค้งแบบ Bezier เม่อืต้องการวาดเส้นโค้งให้คลกิ เมาสค์ ้างเอาไว้แล้วลาก เส้นจะถกู บิดเป็นโค้งแบบ Bezier และเส้นสามารถลากตอ่ ๆ กนั ได้ และเมอ่ื ต้องการให้เป็นรูปทรงปิ ด ให้วนเส้นกลบั มาคลกิ ที่จดุ เร่ิมต้นอีกครงั้ โครงการฝึ กอบรมเชิงปฏิบัตกิ ารผลิตส่ือการเรยี นการสอน
112.9 การเพ่มิ จุดของเส้นการเพ่ิมจดุ ของเส้นท่ีวาดขนึ ้ จากปากกา หรือเส้นเพ่ือเปล่ยี นให้เส้นเป็นรูปร่างตา่ ง ๆ หรือใสร่ ายละเอยี ดให้มากยิ่งขนึ ้ วิธีใช้ให้คลกิ เมาส์ไปที่ Add Anchor Point จากนนั้ คลกิ ไปที่สว่ นของเส้นในจดุ ท่ีต้องการคาสงั่ นีต้ ้องใช้คาสง่ั Convert Anchor Point หรือ Subselection tool เป็นเครื่องมอื ท่ีใช้ขยบัจดุ ท่ีสร้างไว้ และถ้าต้องการนาจดุ ออกให้เลือกที่คาสง่ั Delete Anchor Point เพื่อลบจดุ2.10 การวาดรูปทรงส่ีเหล่ียม 1. วาดรูปสเ่ี หล่ยี มโดยคลกิ ท่ีป่ มุ Rectangle Tool 2. กาหนดคณุ สมบตั ิของสว่ นโค้งในกรณีที่ต้องการทาให้ส่เี หล่ยี มโค้งมน โครงการฝึ กอบรมเชิงปฏบิ ัตกิ ารผลติ สื่อการเรยี นการสอน
123. คณุ สมบตั นิ ี ้ถ้ากาหนดเป็น 0 จะไมม่ ขี อบมน ถ้าใสเ่ ป็นคา่ บวกขนึ ้ ไปจะเป็นขอบมน และถ้าใสค่ า่ ท่ีเป็นลบจะเป็นขอบมนแตเ่ ข้าด้านใน4. คลกิ เมาส์ กาหนดจดุ เริ่มต้นของสี่เหล่ียม ซ่งึ จะเป็นจดุ มมุ ของส่เี หลย่ี ม แตถ่ ้าต้องการวาดรูปสเี่ หลยี่ มให้เป็นสี่เหล่ยี มจตั รุ ัสให้กดป่ มุ Shiftค้างไว้ ถ้าต้องการให้เริ่มจากศนู ย์กลางให้กดป่ มุ Altค้างเอาไว้5. ในกรณีท่ีต้องการสร้างกลอ่ งที่มีระยะท่ีแน่นอน ให้กดป่ มุ Alt ก่อนที่จะคลกิ เมาสจ์ ะปรากฏกลอ่ งข้อความขนึ ้ มาดงั รูป ความกว้าง ความสงู กาหนดขนาดของมมุสาหรบั การวาดรูปสี่เหลยี่ มในเวอร์ชนั่ นี ้ม2ี แบบคอื วาดจากศนู ย์กลาง Rectangle Tool ใช้สาหรับสร้างกลอ่ งสเ่ี หล่ียมสามารถปรบั ขอบมมุ โค้งมนได้แตเ่ มื่อตงั้ คา่ ไปแล้วจะไมส่ ามารถแก้ไขได้โดนสะดวก เพราะจะต้องขยบั เองทีละมมุ Rectangle Primitive Tool ใช้สาหรับสร้างกลอ่ งสเ่ี หล่ยี มสามารถปรบั ขอบมมุ โค้งมนได้ทงั้ กอ่ นและหลงั สามารถปรับแตง่ คา่ ได้สะดวก มลี กั ษณะเป็นวตั ถุ ถ้าจะแก้ไขแบบอสิ ระจะต้องดบั เบิล้ คลิกท่ีวตั ถซุ า้อกี ครงั้ หน่งึ2.11 การวาดวงกลม 1. สร้างวงกลมด้วยการคลกิ ท่ีป่ มุ Oval Tool 2. สร้างวงกลมด้วยการคลกิ ที่มมุ จดุ แรก และลากเฉียง ไปยงั อีกจดุ โดยปกติแล้วรูปทรงจะไมเ่ ป็น วงกลมจะต้อง กดป่ มุ Shift ร่วมด้วย และถ้าต้องการให้เริ่มจากศนู ย์กลางจะต้องกดป่ มุ Alt โครงการฝึ กอบรมเชิงปฏิบตั กิ ารผลิตสื่อการเรยี นการสอน
13 3. สามารถกาหนดจดุ เร่ิมของสว่ นโค้งได้ โดยการใสต่ าแหนง่ ของรศั มขี องวงกลม โดยสามารถกาหนด ได้ทงั้ จดุ เริ่มและจดุ จบ 4. กาหนดคา่ inner radian เพ่ือเจาะวงกลมให้เป็นลกั ษณะโดนทั 5. คลกิ ท่ี Close Path โปรแกรมจะไมล่ ง fill สีให้กบั วงกลมในกรณีที่ใช้กบั คาสง่ั Start angle และ end angle2.12 การวาดรูปทรงหลายเหล่ียม 1. คลกิ ที่ป่ มุ PolyStar Tool ในคาสง่ั นีจ้ ะสามารถสร้างเหล่ียมได้ 3-32 มมุ 2. คลกิ ท่ีป่ มุ Options จะปรากฏหน้าตา่ ง Tool Settings เลอื กรูปหลายเหลยี่ มและรูปดาว จานวนมมุ ความลกิ ของแฉกดาว 3. คาสง่ั รูปหลายเหล่ยี มนีม้ ใี ห้เลือกการวางเพียงอยา่ งเดยี วคอื วางจากศนู ย์กลางจึงไมต่ ้องกดป่ มุ Alt 4. สว่ นการปรบั แตง่ คา่ อ่นื ๆ จะมคี วามคล้ายกบั เส้นและกลอ่ งสเ่ี หลย่ี มการวาดด้วยพกู นั โครงการฝึ กอบรมเชิงปฏบิ ัตกิ ารผลติ สื่อการเรยี นการสอน
14การวาดด้วยคาสงั่ พกู นั จะทาให้ได้เส้นที่เหมือนจริง มคี วามสวยงามเวลาวาดภาพ ถ้าใช้กบั อปุ กรณ์Tebletจะทาให้การวาดเหมือนจริงมากยิ่งขนึ ้ แตค่ าสง่ั นกี ้ ม็ ขี ้อจากดั คอื เส้นที่วาดมคี ณุ สมบตั เิ ป็น Fill ไมใ่ ช่ Stokeทาให้แก้ไขได้ยาก1. คลกิ ท่ีป่ มุ Brush Tool เลือกสจี ากกลอ่ ง Fill Color เน่ืองจากคาสงั่ นีไ้ มใ่ ชค่ าสงั่ เส้น2. วาดเส้นลงไปในชิน้ งาน3. ถ้าต้องการวาดเส้นลงพืน้ ท่ีลกั ษณะพิเศษ จะต้องคลิกป่ มุ Brush Mode เพ่ือนเลือกรูปแบบ การลงสที ี่ต้องการ โดยมีรูปแบบดงั นี ้ a. Paint Normal เมอื่ ระบายสี สีท่ีระบายจะทบั เส้นและพืน้ ท่ี b. Paint Fills สีที่ระบายจะทบั เฉพาะสว่ นของพืน้ ที่แตไ่ มย่ งุ่ เก่ียวกบั เส้น c. Paint Behind สีท่ีระบายจะปรากฏท่ีพืน้ หลงั วตั ถุ d. Paint Selection สที่ ่ีระบายจะระบายเฉพาะพืน้ ของบริเวณท่ีเลือกเท่านนั้ โดย จะต้องเลอื กวตั ถนุ นั้ ๆ ก่อน e. Paint Inside สีท่ีระบายจะระบายเฉพาะพืน้ ท่ีด้านใน2.13 การใช้เคร่ืองมือยางลบ การใช้ยางลบในโปรแกรม Flash จะแตกตา่ งกบั โปรแกรมกราฟิ ก Vector อน่ื ๆ คือสามารถเลือกลบเฉพาะสว่ นได้ ทาให้สะดวกตอ่ การวาดรูปอย่างมาก การใช้ยางลบมีขนั้ ตอนดงั นี ้ 1. เมื่อต้องการลบภาพ คลกิ ที่ Eraser Tool เพ่ือทาการเปลี่ยน หวั ปากกาเป็นยางลบ 2. คลิกท่ีป่ มุ เพ่ือเลอื กลกั ษณะของยางลบ มีหลายลกั ษณะให้ เลือกเช่น สีเ่ หล่ียม วงกลม โครงการฝึ กอบรมเชิงปฏบิ ัตกิ ารผลติ สื่อการเรยี นการสอน
15 2. คลิกป่ มุ Eraser Mode เพือเลอื กโหมดการลบ a. Eraser Normal ลบเส้นและพืน้ ท่ี b. Eraser Fills ลบเฉพาะสว่ นของพืน้ ท่ีโดยยางลบจะไมไ่ ปลบเส้น c. Eraser Lines ลบเฉพาะสว่ นของเส้นเทา่ นนั้ d. Eraser Selected Fills ลบเฉพาะพืน้ ที่ของบริเวณที่เลอื กโดยยางลบจะไมไ่ ปลบเส้น e. Eraser Inside ลบเฉพาะภายในพืน้ ที่ของพืน้ ท่ีด้านใน 3. สามารถใช้เคร่ืองมือ Faucet ลบเฉพาะพืน้ ท่ีของสีโดยไมจ่ าเป็นใช้ยางลบลบที่ละสว่ น2.14 การลงสีวตั ถุ วตั ถใุ น Flash จะมสี ว่ นหลกั ๆ อยู่ 2 สว่ นคือเส้น Stoke และพืน้ ที่ Fill โดยการลงสวี ตั ถสุ ามารถลงสหี รือเปล่ียนได้ทงั้ 2 วตั ถุ สว่ นพืน้ ท่ีของสสี ามารถปรับแตง่ การไลส่ ผี สมสี ซึ่งใช้เทคนิคเดียวกบั โปรแกรมกราฟิ กประเภท Vertor ทว่ั ๆ ไปได้ โครงการฝึ กอบรมเชิงปฏิบัตกิ ารผลิตสื่อการเรยี นการสอน
162.15 การเทสีลงบนพืน้ ท่ีการลงสีบนพืน้ ที่สามารถลงได้ทงั้ บริเวณท่ีมสี ีอย่แู ล้วและบริเวณท่ีไมม่ สี กี ไ็ ด้ สาหรับพืน้ ที่ท่ีจะลงสีนนั้จะต้องมลี กั ษณะเป็นเส้นปิ ด หรือเกือบปิ ด หรือมีพืน้ ท่ีอยกู่ อ่ นจงึ จะสามารถลงสใี หมห่ รือเปลี่ยนสไี ด้ โดยมีวธิ ีการทาดงั นี ้1. คลกิ ที่ป่ มุ Paint bucket Tool2. เลือกสีจากแถบ Tool box Fill Colorเปลยี่ นสที ี่ต้องการ จากนนั้ คลกิ เทสีลงไปใน ชอ่ งวา่ งตามรูป3. การลงสีบนวตั ถใุ น Flash บางครงั้ จะพบปัญหาไมส่ ามารถลงสีได้ นนั้ ก็เพราะวา่ เส้นของภาพนนั้ ๆ ไมป่ ิ ดสนิทกนั จงึ ต้องตงั้ คา่ เพิ่มเตมิ โดยตาแหน่งด้านลา่ ง Toolbox จะพบคาสง่ั Gaps ให้คลิกค้าง ไว้ ถ้าเส้นปิ ดกนั มากให้เลอื กที่ Don’t Close Gaps ถ้ามชี อ่ งวา่ งมากให้เลือก Close Large Gaps จงึ จะสามารถลงสไี ด้2.16 fการเทสีลงบนเส้น1. ลงสหี รือเปลี่ยนสขี องเส้น Stroke ได้โดยใช้เครื่องมือ Ink Bottle Tool เทลงไปลงบนเส้น โด2. เลือกสที ่ี Toolbox Stoke Color เพ่ือเปลีย่ นสเี ส้นท่ีต้องการ3. คลิกไปท่ีเส้นที่ต้องการจะเปล่ียนสี โครงการฝึ กอบรมเชิงปฏิบัตกิ ารผลติ สื่อการเรยี นการสอน
172.17 การจดั การระบบสี Swatches ระบบสีใน Flash มีหน้าตาดงั รูป โดยจะมอี งคป์ ระกอบการตงั้ คา่ ดงั นี ้สที ่ีเลอื ก ปรบั แตง่ สเี อง ความโปรงแสง ไม่มสี ี ถาดสพี เิ ศษ2.18 การปรับสีจาก Panel ทางด้าน Panel ด้านขวามอื เป็นการปรับแตง่ สโี ดยสามารถควบคมุ สไี ด้ระเอยี ดมากขนึ ้ สามารถทาการไลส่ ี ปรับแตง่ คา่ สีขนั้ สงู โดยคลกิ ท่ี Panel Color จะปรากฏนา่ ตา่ งดงั นี ้เปลย่ี นสเี ส้น รูปแบบการไลส่ ี เปลยี่ นสพี ืน้ สลบั สเี ส้นกบั พนื ้ ที่เปลยี่ นเป็ นสขี าวดา ความโปรงใส่ ไลโ่ ทนสมี ืดสวา่ ง เลอื กไมม่ สี ี คลกิ บริเวณสที ่ตี ้องการ ปรับสดี ้วยเลขฐาน 2 ปรบั แต่งค่าสโี ดยใสค่ ่าเลข2.19 การควบคมุ การไล่สี1. เลือก Type เป็น Linear จะปรากฏแทบ Overflowแสดงการไลส่ เี ริ่มต้น2. ด้านลา่ งกลอ่ ง Color จะปรากฏแถบสีท่ีมกี ารไลส่ ี โดยสเี ร่ิมต้นจะเป็นสีขาวและดา ซึ่งสามารถปรับเลอื่ นได้ทาให้วตั ถทุ ่ีได้มกี ารไลส่ ีตามระยะท่ีต้องการ โครงการฝึ กอบรมเชิงปฏบิ ัตกิ ารผลิตส่ือการเรยี นการสอน
183. สามารถเพ่ิมจดุ ตาแหนง่ ของสไี ด้ โดยนาเมาส์คลิกไปที่บรเิ วณเส้นแถบสี เป็นการเพ่ิมตาแหน่งสี จากนนั้ ดบั เบิล้ คลกิ ที่ตาแหน่งสีเพ่ิม แล้วจึงเลอื กสที ี่ต้องการ4. ถ้าต้องการลบตาแหนง่ ให้คลกิ ที่จดุ สีแล้วคลกิ เมาส์ค้างเอาไว้ ลางลงมาด้านลา่ งจดุ สีจะหายไป5. ถ้าสใี ดใช้บอ่ ย ๆ อยากเกบ็ ไว้เรียกใช้ให้คลกิ ที่ option menu ของหน้าตา่ ง Color6. เลือกที่ Add Swatch เพ่ือจดั เกบ็ สีไว้ในถาดสี โครงการฝึ กอบรมเชิงปฏิบตั กิ ารผลติ ส่ือการเรยี นการสอน
19 บทท่ี 3 การจัดการข้อความ การสร้างบทเรียน การใสค่ าบรรยายหรือคาอธิบายเป็นเร่ืองที่พบกนั อย่บู อ่ ย ๆ ใน flash เองกม็ ีเคร่ืองมอื ท่ีจดั การเรื่องตวั อกั ษรข้อความ สามารถรองรับได้หลากหลายภาษา เมื่อต้องการเรียกใช้ Text ให้คลกิ Tool box Texttool สว่ นบริเวณของ Properties Inspector จะเปลยี่ นเป็น Text Tool ดงั รูปด้านลา่ งโหมดของอกั ษรข้อความ แบบ Font ปรับแต่งคณุ สมบตั ิ ตาแหน่งการจดั วางระยะห่างระหวา่ งอกั ษร การ Render ตวั อกั ษร Target ของ Linkตงั ้ คา่ จานวนบรรทดั ของ Dynamic URL Linkเช่อื มโยง ตวั ยกตวั ห้อย Text Type โหมดของอกั ษรข้อความ Text Block Position ตาแหน่งและขนาดของข้อความ Character Spacing การกาหนดระยะหา่ งของตวั อกั ษร Font รูปแบบของตวั อกั ษร Text Fill Color กาหนดสีของตวั อกั ษร Alignment การจดั ตาแหนง่ ตวั อกั ษร Edit Format Option กาหนดรูปแบบการย่อหน้า Change Orientation of text กาหนดแนวการวางตวั อกั ษร Line Type กาหนดชนิดของการับข้อมลู ในสว่ นของ Input Text Font Rendering method กาหนดรูปแบบการเรนเดอร์ตวั อกั ษร Auto Kern กาหนดให้ปรับช่องไฟของตวั อกั ษรอตั โนมตั ิ URL Link กาหนดการเชื่อมโยงไปยงั เวบ็ อ่นื Target กาหนดการรูปแบบการเปิ ดหน้าเวบ็ โครงการฝึ กอบรมเชิงปฏิบตั กิ ารผลิตส่ือการเรยี นการสอน
203.1 โหมดตัวอกั ษรมีด้วยกัน 3 หมวดคอื 1. Static Text เป็นข้อความธรรมดา ใช้สาหรบั พิมพ์ข้อความทวั่ ไป ไมส่ ามารถใช้คาสงั่ ตวั แปรแก้ไขได้ 2. Dynamic Text เป็นข้อความ Text ที่มีการเปล่ียนแปลงด้วยการเขียนคาสงั่ เพ่ิมเตมิ ได้ 3. Input Text เป็นการสร้างกลอ่ งข้อความ กาหนดพืน้ ท่ีรบั ข้อมลู3.2 ปัญหาภาษาไทยกับ Flash เนื่องจากยอดขายโปรแกรม Adobe แบบลขิ สิทธ์ิในเมอื งไทยมปี ริมาณไมม่ าก บริษัทจึงไมไ่ ด้ให้ความสาคญั เป็นพิเศษกบั เรื่องภาษาไทย การพฒั นาโปรแกรมให้ใช้งานกบั ภาษาไทยนนั้ เป็นเรื่องที่ย่งุ ยากของผ้ผู ลติ เน่ืองจากภาษาไทยมตี วั อกั ษรหลายชนั้ และมเี ง่ือนไขการตดั คามากมาย ทาให้ผ้ทู ี่ใช้โปรแกรมของ adobe ต้องใช้โปรแกรมเสริมอน่ื ๆ เข้าช่วย หรือบางทีกต็ ้องเปล่ียน font ชดุ ใหมม่ าใช้เพ่ือแก้ปัญหาสาหรับปัญหาเร่ืองพิมพ์ข้อความใน Flash CS3 จะมีปัญหาเร่ืองระยะหา่ งของตวั อกั ษรกบั Windows Vistaและ Windows 7 ปัญหาจะเกิดขนึ ้ ตอนที่พิมพ์ข้อความตอนสร้าง แตต่ อนนาไปแสดงผลใช้จริงจะไมม่ ีปัญหา3.3 วธิ ีการพมิ พ์ข้อความ 1. คลกิ ที่ Text tool เพ่ือพิมพ์ข้อความ 2. ปรบั แตง่ คา่ Properties Inspector ตามรูปภาพด้านลา่ ง Font เป็นแบบ Arial ขนาด 25 และเป็นสี ดา ชิดด้านซ้าย โครงการฝึ กอบรมเชิงปฏบิ ตั กิ ารผลติ ส่ือการเรยี นการสอน
213. คลกิ วางข้อความลงบนชิน้ งานตามตวั อย่าง และพิมพ์ข้อความลงไป วา่ Introduction to computer4. คลิก Text tool และเปลย่ี นขนาดเป็น 16 ลากกรอบโดยลากไปทางด้านขวาตามระยะของ ข้อความท่ีต้องการ จะปรากฏกลอ่ งส่เี หล่ยี มขนึ ้ 1 บรรทดั จากนนั้ พิมพ์ข้อความ “The lessons contain relatively little text, plenty of images and many podcasts prepared by students in which they talk about a particular topic within each lesson. Most of the lessons are framed around concepts from the world of computers ลงไปในช่องโดยไมต่ ้องกด enter เพื่อ ทาการขนึ ้ บรรทดั ใหม่ โปรแกรมจะพยายามตดั คาให้เอง5. ทางกลอ่ งด้านขวามือใส่ Link เช่ือมโยงไปยงั เวบ็ ไซต์ พิมพ์ชื่อเวบ็ ไซต์ตามรูปด้านลา่ งลงไป6. คลิกท่ีชื่อท่ีพิมพ์ 1 ช่ือ และแก้ไข Properties Inspector ในชอ่ ง Link7. ใสช่ ื่อเวบ็ ตามชื่อด้านลา่ ง จะสง่ เกตวุ า่ ช่ือเวบ็ จะต้องขนึ ้ ต้นด้วย http:// และช่ือ Url เวบ็ กบั ชื่อที่ เขยี นเป็น เมนอู าจจะเป็นคนละช่ือก็ได้ เช่นpapemodel แต่ Link ไปที่ http://www.papermode.in.th Http://www.sanook.com Http://www.google.com Http://www.yahoo.com Http://www.papermodel.in.th Http://www.hotmail.com โครงการฝึ กอบรมเชิงปฏิบตั กิ ารผลติ สื่อการเรยี นการสอน
223.4 การเปล่ียนคุณสมบัติข้อความเป็ นหมวดต่าง ๆ ตวั อกั ษรข้อความใน Flash สามารถสลบั โหมดการทางานไปมาระหวา่ ง Static Text DynamicText และ Input Text ได้แตก่ ารสลบั ไปมาอาจทาให้คณุ สมบตั ิและการตงั้ คา่ บางอย่างเปลยี่ นไป จึงควร ตรวจสอบทกุ ครงั้ หลงั จากการเหมือนโหมด ข้อความ สามารถเปลี่ยนได้ด้วยวธิ ีดงั นี ้ 1. คลกิ ท่ีข้อความท่ีต้องการเปลย่ี นโหมด 2. Properties Inspector คลกิ เลือกลกู ศร ข้างกบั ช่ือโหมดข้อความเพ่ือเปล่ียนโหมดที่ ต้องการ3.5 การเปล่ียนคณุ สมบัติของข้อความให้เป็ นรูปภาพ ตวั อกั ษรที่อยใู่ น Flash มคี ณุ สมบตั ิเป็น Text ซงึ่ มขี ้อดคี อื แก้ไขเปลย่ี นแปลงข้อมลู ได้งา่ ย แตถ่ ้านามาใช้ในงานออกแบบเพื่อให้ชิน้ งานมีเอกลกั ษณ์ เราจะต้องทาลายคณุ สมบตั ิของText ทิง้ เสียกอ่ น โดยมีขนั้ ตอนดงั นี ้ 1. คลิกที่ Text tool เพ่ือพิมพ์ข้อความ โดยเลอื กตวั อกั ษรที่มคี วามหนาและขนาดใหญ่ ใน ตวั อย่างเลอื ก Font Arial Black และเลือกขนาด Font ที่ 60 และสนี า้ เงิน โครงการฝึ กอบรมเชิงปฏบิ ตั กิ ารผลติ ส่ือการเรยี นการสอน
232. ถ้าต้องการปรบั ตวั อกั ษรให้เป็นรูปภาพจะต้องใช้คาสง่ั Break Apart โดยการคลิกขวา แล้วเลือก Break Apart หรือกด Ctrl + B ชดุ ข้อความคาวา่ CAI จะถกู แยกออกเป็น 3 ตวั ซึ่งยงั คงคณุ สมบตั ิ ตวั อกั ษรอยู่3. ใช้คาสง่ั Break Apart ทาลายคณุ สมบตั ขิ องตวั อกั ษรอกี ครงั้ ตวั อกั ษร CAI จะกลายเป็นวตั ถุ รูปภาพไมส่ ามารถพิมพ์แก้ไขข้อมลู ได้อกี ตอ่ ไป4. เมอื่ ถกู เปล่ยี นเป็นคณุ สมบตั ิรูปภาพโดยสมบรู ณ์แล้วสามารถดดั แปลงดงึ แก้ไขใด ๆ กไ็ ด้ โครงการฝึ กอบรมเชิงปฏบิ ตั กิ ารผลิตสื่อการเรยี นการสอน
24 บทท่ี 4 การจัดการวัตถุการใช้งาน Flash ทา Animation จะต้องแปลงวตั ถตุ า่ ง ๆ ให้มีคณุ สมบตั ทิ ี่ถกู ต้อง เพื่อง่ายตอ่ การแก้ไข การใช้งาน การเรียกใช้งานภายหลงั โดยรปู แบบวตั ถนุ จี ้ ะเรียกวา่ Symbol โดย Symbol มี 3 สถานะด้วยกนั คือ Movie clip : ชดุ วตั ถทุ ่ีมกี ารเคลื่อนไหว Button : วตั ถทุ ่ีเป็นป่ มุ Graphic : วตั ถทุ ี่เป็นรูปภาพ4.1 การแปลงวตั ถุเป็ น Symbol 1. เม่ือมวี ตั ถอุ ยแู่ ล้ว ให้คลกิ ท่ีคาสง่ั Selection tool จากนนั้ คลกิ ล้อมรอบวตั ถทุ ี่ต้องการจะแปลง เป็น Symbol 2. คลิกขวาเลอื กที่คาสงั่ Convert to symbol หรือ กด F8 จะปรากฏหน้าตา่ ง Convert to Symbol 3. Name พิมพ์ช่ือของวตั ถุ โดยช่ือของวตั ถไุ มค่ วรซา้ กนั ควรมกี ารวางแผนชื่อให้ดี 4. Type เลอื กรูปแบบของ Symbol ในกรณีรูปต้นไม้ดงั รูปควรใช้แบบ Graphic 5. Registration เป็นการเลือกจดุ อ้างองิ เร่ิมต้น 6. จากนนั้ วตั ถจุ ะเข้าไปอยใู่ นกลอ่ ง Library ถ้าในกรณีท่ีไมป่ รากฏหน้าตา่ ง Library ให้กด Ctrl+L โครงการฝึ กอบรมเชิงปฏิบัตกิ ารผลิตส่ือการเรยี นการสอน
254.2 การเรียกใช้และแก้ไข Symbolเม่ือเราสร้าง Symbol ขนึ ้ มาในไฟลน์ นั้ ๆ สามารถดงึ Symbol มาใช้ได้ตลอดวธิ ีการเรียกใช้ทาได้ดงั นี ้ 1. คลิก Symbol จากกลอ่ ง Library ลากเข้ามาใช้ในชิน้ งาน โดย Symbol จะเหมือนกบั ต้นแบบและ สามารถย่อขยายขนาดได้ 2. ถ้าต้องการเปลี่ยนแปลงแก้ไข Symbol ให้ดบั เบิลคลิกที่ Symbol 3. จากนนั้ สงั เกตแถบแสดงสถานะของการแก้ไขชิน้ งาน จะปรากฏช่ือของ Symbol ที่ต้องการแก้ไข 4. เมือ่ ทาการแก้ไขแล้วทกุ Symbol จะถกู เปล่ยี นให้เหมือนกบั Symbol ท่ีมกี ารแก้ไข4.3 การสร้าง Symbol แบบป่ ุม นอกจากการทางาน animation โปรแกรม Flash ยงั ถกู ออกแบบมาให้ทางาน ในลกั ษณะท่ีผ้ใู ช้งานสามารถโต้ตอบหรือมปี ฏสิ มั พนั ธ์ได้ จงึ จาเป็นต้องมกี ารกาหนด Symbol ให้มลี กั ษณะเป็นป่ มุ โดยการตงั้คา่ พืน้ ฐานของป่ มุ มีด้วยกนั 4 สถานะคือ up over down hit วิธีการสร้างป่ มุ มวี ธิ ีดงั นี ้ 1. สร้างกลอ่ งหรือวตั ถขุ นึ ้ มาแทนป่ มุ ด้วยเครื่องมือ Rectangle Tool 2. คลกิ ล้อมรอบวตั ถุ แล้ว convert Symbol ด้วยการ กด F8 โครงการฝึ กอบรมเชิงปฏิบัตกิ ารผลติ ส่ือการเรยี นการสอน
263. จะปรากฏหน้าตา่ ง Convert to Symbol ให้เลือกท่ี Button และตงั้ ช่ือป่ มุ วา่ ok หมายถึงป่ มุ นีจ้ ะถกู ใช้เป็นป่ มุ ตกลง4. ดบั เบิลคลกิ ท่ีวตั ถุ Symbol ท่ีสร้างขนึ ้ ที่แถบแสดงการแก้ไข symbol จะเข้าสู่ Symbol ok และที่ Timeline จะถกู เปล่ียนเป็น 4 สถานะคือ up over down hit a. Up สถานะป่ มุ ที่ยงั ไมถ่ กู คลกิ b. Over สถานะป่ มุ เม่ือนาเมาส์ไปวางเหนือป่ มุ c. Down เมอ่ื นาเมาสไปคลกิ ท่ีป่ มุ d. Hit กาหนดพืน้ ท่ีของป่ มุ5. กด F6 เพ่ือสร้าง คีย์เฟรมใหม่ ใหมใ่ นชอ่ ง Over จากนนั้ แก้ไขสีหรือเปลี่ยนแปลงลกั ษณะของป่ มุ ให้เป็นรูปแบบอื่น ๆ เพ่ือให้เกิดความแตกตา่ งเวลานาเมาสไ์ ปวางเหนือป่ มุ โครงการฝึ กอบรมเชิงปฏบิ ตั กิ ารผลติ สื่อการเรยี นการสอน
27 6. กด F6 เพ่ือสร้าง คยี ์เฟรมใหม่ ใหมใ่ นชอ่ ง Down เพ่ือกาหนดสถานะเม่ือมีเมาสค์ ลกิ ไปท่ีป่ มุ 7. กด F6 เพื่อสร้าง คยี ์เฟรมใหม่ ใหมใ่ นชอ่ ง Hit เป็นการกาหนดบริเวณของป่ มุ ซึง่ บางครงั้ อาจจะ ใหญ่กวา่ ป่ มุ ท่ีสร้างไว้กไ็ ด้ มกั ใช้กรณีที่ใช้ข้อความ Link ท่ีเป็นตวั อกั ษร4.4 การสร้าง Symbol แบบภาพเคล่ือนไหวSymbol ประเภทนีใ้ ช้สาหรับจดั กลมุ่ รวบรวมวตั ถุ หรือ Symbol ให้เป็นภาพเคล่ือนไหว โดยมีวธิ ีการทาดงั นี ้ 1. วาดวตั ถตุ ้นแบบในลกั ษณะภาพกราฟิ ก ในรูปตวั อย่างเป็นลกู บอลวงกลม 2. คลิกล้อมรอบวตั ถุ แล้ว convert Symbol ด้วยการกด F8 3. พิมพ์ชื่อวตั ถุ โดยจะต้องไมซ่ า้ กบั ชิน้ งานท่ีมอี ย่แู ล้ว 4. เลือก Type เป็น Movie Clip Registration เป็นศนู ย์กลางจากนนั้ กด Ok 5. ดบั เบิลคลิกที่วตั ถุ Symbol ที่สร้างขนึ ้ ท่ีแถบแสดงการแก้ไข symbol จะเข้าสู่ Symbol “ball” 6. ให้คลกิ สว่ นของ Time Line ด้านบน ชอ่ งแรกใน Frame ที่ 10 แล้วกด F6 เพ่ือสร้าง Key frame 7. ลากลกู บอลไปในทิศทางอืน่ เพ่ือกาหนดจดุ เคลอื่ นที่ โครงการฝึ กอบรมเชิงปฏิบตั กิ ารผลิตสื่อการเรยี นการสอน
288. คลิกขวาที่ ระหวา่ งเฟรมที่ 1-10 เลือกท่ี Create Motion Tween เพ่ือสร้างการเคล่อื นไหว9. ออกจากสถานะการแก้ไข Symbol เพ่ือกลบั ไปที่ Scene หลกั โดยคลกิ ท่ี Scene 110. ทดสอบการทางานโดยการกด Ctrl+Enter เพื่อทดสอบชิน้ งาน Animation หมายเหตุ สาหรับรายละเอยี ดของการทา Animation จะกลา่ วถึงในบทตอ่ ไป4.5 การจดั การ Libraryหน้าตา่ ง Library สามารถเรียกใช้งานได้จากการกดป่ มุ Ctrl + L หรือคลกิ ท่ี Window -> Libraryสญั ลกั ษณ์ของ Symbol มีดงั นี ้ Button : ป่ มุ Movie Clip : ภาพเคล่ือนไหว Graphic : ภาพ Floder : แฟ้ มเพื่อจดั เกบ็ Symbol ให้เป็นหมวดหมู่ โครงการฝึ กอบรมเชิงปฏิบตั กิ ารผลิตสื่อการเรยี นการสอน
สว่ นประกอบตา่ ง ๆ ของ หน้าตา่ ง Library 29 ช่ือไฟล์ ตรงึ Library สร้าง Library ใหม่ปริมาณsymbol รูป Symbol เรียงลาดบั Symbol สร้าง Folderl ดขู ้อมลู Symbol รายช่อื Symbolสร้าง Symbol ลบ Symbol4.6 การเปล่ียนคุณสมบัติ SymbolSymbol สามารถสลบั คณุ สมบตั ิกนั ได้ เช่นสลบั จาก Button เป็น Movie clip หรือสลบั จาก Graphic เป็นButton แตก่ ารสลบั นีจ้ ะทาให้คณุ สมบตั บิ างอย่างของวตั ถหุ ายไป เทา่ ที่พบเหน็ จะเป็นการสลบั จากGraphic เป็น Button หรือ Movie clip เป็นสว่ นใหญ่ วธิ ีการสลบั มีดงั นี ้วิธีที่ 1 1. เลือกวตั ถจุ ากชื่อในหน้าตา่ ง Library2. คลกิ ท่ีป่ มุ เคร่ืองมอื จะปรากฏหน้าตา่ ง Symbol Properties3. เปลีย่ นคณุ สมบตั ิของวตั ถตุ ามต้องการ โครงการฝึ กอบรมเชิงปฏิบัตกิ ารผลติ ส่ือการเรยี นการสอน
30วิธีท่ี 2 1. คลกิ ขวาที่ช่ือของ symbol แล้วเลอื ก ที่ Type -> เลอื กรูปแบบ Symbol ท่ีต้องการ4.7 นา Symbol จากไฟล์อ่นื มาใช้เราสามารถนา Library ท่ีสร้างขนึ ้ ใรชิน้ งาน ไปใช้กบั ไฟล์อืน่ ๆ หรือนา Library ของไฟล์อน่ื ๆ มาใช้ในชิน้ งานได้ แตต่ ้องระมดั ระวงั เรื่องช่ือของ Symbol อาจมีการซา้ กนั ทาให้ผลงานเกิดปัญหา ในกรณีท่ีชื่อเดียวกนั ให้ตรวจสอบให้ดวี า่ จะใช้ตวั ใหมห่ รือตวั ที่มอี ยเู่ ดิม จึงควรให้ความสาคญั กบั คาเตอื นของโปรแกรมด้วย มีขนั้ ตอนการนาเข้าดงั นี ้ 1. เม่อื อยใู่ นไฟล์งานท่ีต้องการเรียกใช้ Library ไปท่ีเมนบู าร์ File -> Import -> Open External Library 2. โปรแกรมจะให้เลอื กไฟล์ Flash ที่มี Library ท่ีต้องการ 3. ในไฟลท์ ี่ทางานอยู่ จะปรากฏ Libraryที่เรา Import เข้ามาใช้งานโครงการฝึ กอบรมเชิงปฏบิ ตั กิ ารผลิตส่ือการเรยี นการสอน
31 บทท่ี 5 การทา Animation ความสามารถท่ีโดด่ เดน่ มาก ๆ ของโปรแกรม Flash นนั้ กค็ อื ความสามารถด้าน Animation ที่สามารถทางานงา่ ย ๆ จนถึง Animation ท่ีมคี วามซบั ซ้อนได้ ลกั ษณะการทางานของ Animation บน Flashจะต้องทางานบน Time Line ที่มีลกั ษณะเป็นเฟรม อย่ทู างด้านบนของหน้าจอ เรามาทาความรู้จกั หน้าตาของ Time Line Flash ดงั นี ้ Lock Layer แสดงเค้าร่าง ตาแหนง่ เฟรม เฟรมปัจจบุ ันท่ีทางาน Play Headซอ่ น / แสดง Layer ช่วงของการแสดง Onion skinสร้าง Guide Layer หมายเลขเฟรมปัจจุบนัสร้าง Layer เวลาที่ใช้นบั จากเร่ิมถึง Play Headสร้าง Folderลบ Layer เคล่ือน Play head Onion skin Onion skin แบบ เหน็ Onion skin จานวนเฟรมตอ่ 1 วนิ าที ไปกี่งกลางเฟรม เฉพาะ Outline แบบชดั เฉาะ Key frame5.1 การใช้ Play Head Play Head ใช้เพื่อตรวจสอบ สร้าง และแก้ไขชิน้ งาน ของเฟรมตา่ ง ๆ โดยหน้าจอของพืน้ ท่ีทางานจะแสดงผลตามที่มีการกาหนดตาแหนง่ Play Head สามารถเลอ่ื น Play Head โดยการคลิกที่ Play Headที่มีลกั ษณะเป็นสแี ดงเลอื่ นไปยงั เฟรมที่ต้องการ โครงการฝึ กอบรมเชิงปฏิบตั กิ ารผลติ สื่อการเรยี นการสอน
325.2 สร้าง Layer ใหม่ ในตอนเร่ิมต้นโปรแกรมจะสร้าง Layer 1 ขนึ ้ มารอกอ่ นแล้ว สามารถสร้างหรือนาวตั ถเุ ข้ามาใช้งานได้ทนั ที ถ้าต้องการสร้าง Layer เพ่ิมให้คลิกท่ีป่ มุ Insert Layer จะปรากฏ Layer ใหม่ ซึ่งควรจะมกี ารแก้ไขชื่อ Layer ให้สอดคล้องกบั ชิน้ งาน โดยการกดป่ มุ F2 ท่ีช่ือ Layer5.3 สร้าง Folder ในการสร้างชิน้ งาน Flash มกั ประสบปัญหา Layer ท่ีมจี านวนมาก ซึง่ ไมส่ ะดวกตอ่ การเรียกใช้งาน จงึ ควรจดั เกบ็ Layer ตา่ ง ๆ ให้อย่ใู นหมวดหมู่ เช่นตวั อย่างด้านลา่ งซ้ายจะพบวา่ ชิน้ งานมีLayerมากมายสว่ นทางด้านขวาเป็นการจดั เกบ็ Layer ไว้เป็นหมวดหมู่5.4 วธิ ีการสร้าง Folder จะปรากฏ Folder ขนึ ้ มา 1 ให้คลกิ ที่ โครงการฝึ กอบรมเชิงปฏบิ ัตกิ ารผลติ สื่อการเรยี นการสอน
332 จากนนั้ ให้เปลย่ี นชื่อ Folder ให้สอดคล้องกบั ชิน้ งาน โดยการกด F2 ที่ช่ือ Folder3 นา Layer เข้าไปใสใ่ น Folder โดยการคลกิ เมาส์ที่ Layer ค้างไว้ แล้วลากไปท่ี Folder5.5 ระบบ Frame ลกั ษณะ Frame 1 Frame ของโปรแกรม Flash แทนภาพ 1 ภาพ ซ่งึ จะต้องนา Frame มาเรียงตอ่กนั จนเกิดเป็นภาพเคลือ่ นไหว ลกั ษณะ Frame มีรูปแบบดงั นี ้ Frame ท่ีไมม่ ีวตั ถุ Key Frame ท่ีไมม่ วี ตั ถุ Key Frame ท่ีมวี ตั ถุ Frame ที่มกี ารเขยี น Action Script KeyFrame ท่ีมกี ารตงั้ ช่ือ Instance Frame เปลา่ Motion Tween ( พืน้ สีฟ้ า ) Frame ที่มกี ารเคลือ่ นไหวอย่างตอ่ เนื่อง Shape Tween ( พืน้ สีเขยี ว ) Frame ท่ีมีการเปลี่ยนรูปทรงอย่างตอ่ เนื่อง Frame ท่ีมี Keyframe5.6 การเพ่มิ Key Frame เมื่อมกี ารเปลีย่ นแปลงตาแหนง่ การเคล่ือนท่ีของวตั ถุ เราจะต้องสร้าง Key Frame ขนึ ้ มาใหม่ โดยการกดคลิกขวาที่ Frame ท่ีต้องการสร้าง Key Frame แล้วเลอื กInsert Keyframe หรือกด ป่ มุ F6 โครงการฝึ กอบรมเชิงปฏบิ ัตกิ ารผลิตสื่อการเรยี นการสอน
345.7 การเพ่มิ Frame ในกรณีท่ีภาพไมม่ กี ารเปลย่ี นแปลงหรือต้องการเพิ่มชว่ งระยะเวลาของ Animation จะต้องใช้คาสง่ัเพิ่มเฉพาะ Frame โดยมวี ิธีดงั นี ้ 1. ในตวั อย่างด้านลา่ ง Animation ลกู บอลจะว่งิ จากเฟรมที่ 1 ไปสนิ ้ สดุ ในเฟรมท่ี 20 2. ถ้าต้องการเพิ่มเฟรมให้คลิกขวาทเ่ี ฟรมจากนนั้ เลือกที่ Insert Frame หรือกด F5 กด 1 ครงั้ จะ มี Frame เพ่ิม 1 Frame 3. ถ้าต้องการเพิ่มเฟรมจานวนมากให้ทา Highlight คลิกครอบจานวนหลาย ๆ Frame แล้วกด ป่ มุ F5 จานวน Frame จะขยายออกไปตามจานวนช่วงท่ีได้เลอื กเอาไว้ โครงการฝึ กอบรมเชิงปฏบิ ัตกิ ารผลติ ส่ือการเรยี นการสอน
35นอกจากการเพ่ิม Frame ในชว่ งระหวา่ ง Animation เรายงั สามารถเพิ่ม Frame หลงั จาก Keyframe เพ่ือทิง้ภาพสดุ ท้ายให้ปรากฏค้างอยู่ มีวธิ ีการดงั นี ้ 1. จากตวั อยา่ ง Keyframe หยดุ อยทู่ ่ี Frame ท่ี 25 นนั้ ก็หมายความวา่ ลกู บอลจะหยดุ ท่ีเฟรมท่ี 25 ภาพกจ็ ะตดั ไปท่ีเฟรมท่ี 1 วนอกี ครงั้ ซง่ึ ถ้าต้องการให้ลกู บอลหยดุ ค้างถึง Frame ที่ 40 จะต้องคลกิ ขวาจากนนั้ เลือกที่ Insert Frame หรือกดป่ มุ F5 2. ผลท่ีได้คอื ลกู บอลจะว่งิ จาก Keyframe ที่1 จนมาหยดุ ท่ี Keyframe ท่ี 25 และปรากฏค้างไว้ถงึ Frame ที่ 40 โครงการฝึ กอบรมเชิงปฏิบตั กิ ารผลติ ส่ือการเรยี นการสอน
36 บทท่ี 6 การสร้างภาพเคล่ือนไหวการสร้างภาพเคลอื่ นไหวหรือ Animation ในโปรแกรม Flash มลี กั ษณะการสร้างด้วยกนั 3 แบบคือ แบบเฟรมตอ่ เฟรม (Frame by Frame) แบบเคลื่อนท่ี (Motion Tween) แบบเปลี่ยนรูปทรง (Shape Tween)6.1 Animation แบบเฟรมต่อเฟรม (Frame by Frame)การสร้าง Animation แบบ เฟรมตอ่ เฟรม เป็นการนาเอาเฟรมมาเรียงกนั โดยในภาพแตล่ ะเฟรมจะต้องมีการเปลย่ี นแปลง การทา Animation แบบนีภ้ าพที่ได้จะไมล่ นื่ ไหล มกั ใช้งานกบั Animation ที่มกี ารเปลีย่ นแปลงของภาพที่ไมส่ มา่ เสมอและไมต่ อ่ เน่ือง เช่น การทา Animation ภาพ ปากคนพดูแตใ่ นบางชิน้ งานถ้าทาแบบ เฟรมตอ่ เฟรม จะใช้เวลาในการทามากเชน่ การทาลกู บอลกระเด้ง ถ้าเป็นแบบเฟรมตอ่ เฟรม ผ้สู ร้างจะต้องกาหนดการเคล่ือนไหวของลกู บอลทกุ ๆ เฟรม ดงั รูปด้านลา่ ง ซึ่งถ้ามกี ารแก้ไขตาแหนง่ ของลกู บอลในอนาคต อาจจะต้องทาใหมท่ งั้ หมด โครงการฝึ กอบรมเชิงปฏบิ ตั กิ ารผลติ ส่ือการเรยี นการสอน
376.2 การสร้าง Animation แบบเฟรมต่อเฟรม 1. ตงั้ ชื่อ Layer ให้สอดคล้องกบั วตั ถุ ในตวั อยา่ งตงั้ ช่ือวา่ ไฟ 2. สร้างวตั ถลุ งบน Keyframe ที่ 1 ดงั ตวั อยา่ งเป็นรูปเปลวไฟ 3. คานวณจานวนเฟรมตอ่ 1 วินาที ถ้าต้องการ Animation ท่ีล่ืนไหล จะต้องวาดทกุ เฟรม แตใ่ น ตวั อยา่ งนีต้ ้องการเพียงแค่ 4 ภาพ ตอ่ 12 เฟรม 4. ให้ไปที่เฟรมท่ี 5 กด F6 เพื่อสร้าง Keyframe จากนนั้ วาดตอ่ เติมหรือลบของเดิมออกและวาดรูปไผ ลงไปใหม่ ควรวาดให้ใกล้เคยี งกบั ตาแหนง่ เดิม 5. ทาแบบนีไ้ ปเร่ือย ๆ โดย Keyframe จะอย่ใู นตาแหนง่ ท่ี 1,5,9 และมกี ารทิง้ Frame ไปจนถงึ 11 เหตทุ ี่ไมท่ า Frame ที่ 12 เนื่องจากการทา Animation ใน Flash เมอื จบชิน้ งานแล้วจะมกี ารวนซา้ ใหม่ ทาให้ภาพสดุ ท้ายจะตรงกบั ภาพที่ 1 พอดี 6. กดป่ มุ Ctrl+Enter เพ่ือทาการทดสอบผลงานหรือ คลิกที่ Menu File-> Publish Preview -> Flash โปรแกรมจะปรากฏหน้าตา่ งผลงานขนึ ้ มาแสดง โครงการฝึ กอบรมเชิงปฏิบัตกิ ารผลติ ส่ือการเรยี นการสอน
386.3 Animationแบบเคล่ือนท่ี (Motion Tween) เป็นรูปแบบการสร้างที่ทาให้วตั ถมุ กี ารเคล่ือนที่เคล่ือนไหว เปลี่ยนแปลงรูปทรง ซ่งึ การทากาหนดเพียงจดุ เร่ิมต้นและจดุ สนิ ้ สดุ สว่ น Frame ที่เหลือถ้าใช้ Motion Tween โปรแกรมจะช่วยสร้าง Animationที่เหลอื เอง การทา Animation แบบนีช้ ว่ ยประหยดั เวลาและทาให้ผลงานมีความลืน่ ไหล6.4 การสร้างAnimationแบบเคล่ือนท่ี (Motion Tween) 1. จากรูปตวั อยา่ ง มผี ล Apple อยบู่ นต้นไม้ต้องการให้ผล Apple ตกลงมาที่พืน้ ให้กาหนดระยะเวลา ในการตก ดงั ตวั อยา่ งต้องการ 1 วินาที ให้คลิกที่ Frame ท่ี 12 แล้วกด F6 จากนนั้ ลากผล Apple ลงมาท่ีพืน้ โครงการฝึ กอบรมเชิงปฏบิ ัตกิ ารผลิตส่ือการเรยี นการสอน
392. ถ้าเลื่อน Play Head ไปมาจะพบวา่ ใน Frame ที่ 1-11 ผล appleจะยงั ค้างอยบู่ นต้นไม้ แตเ่ มื่อถึง เฟรมที่ 12 ผล Apple จะตกมาที่พืน้ ทนั ที การทาแบบนีจ้ ะเป็นลกั ษณะanimation แบบ Frame by Frame3. ปรบั ให้เป็นแบบ Motion Tween โดยการคลกิ ขวาท่ีชว่ งระหวา่ ง Frame แล้วเลอื ก Create Motion tween ทาให้ช่วง Frame มลี กู ศรเพ่ิมเข้ามา แสดงให้รู้วา่ Motion Tween ทางาน4. ตอนนีล้ กู Apple ตกลงที่พืน้ ในเฟรมท่ี 12 แล้ว แตก่ ารตกลงมายงั ไมส่ มจริง จงึ ต้องการทาให้ลกู Apple กลงิ ้ ไปมากอ่ นที่จะหยดุ อย่กู บั ที่ โดยให้กด F6 ใน Frame ที่ 17 เพ่ือสร้าง Keyframe5. คลกิ ที่คาสงั่ Free Transform จดั การหมนุ ลกู Apple ไปทางขวาเลก็ น้อย6. กด F6 ใน Frame ท่ี 22 เพื่อสร้าง Keyframe7. คลิกที่คาสง่ั Free Transform จดั การหมนุ ลกู Apple ไปทางซ้ายเลก็ น้อย8. คลกิ ขวาที่ช่วงระหวา่ ง Frame แล้วเลอื ก Create Motion tween ทงั้ 2 ช่วงเฟรม9. คลกิ ท่ี Frame ที่ 35 ของ Layer ผลไม้ กด F5 เพื่อทิง้ เฟรม เนื่องจากตงั้ แตเ่ ฟรมที่ 22 – 35 ไมม่ ี การเปลีย่ นแปลงการเคลอ่ื นไหววตั ถุ10. กดป่ มุ Ctrl+Enter เพื่อทาการทดสอบผลงานหรือ คลิกที่ Menu File-> Publish Preview -> Flash โปรแกรมจะปรากฏหน้าตา่ งผลงานขนึ ้ มาแสดง โครงการฝึ กอบรมเชิงปฏบิ ัตกิ ารผลิตสื่อการเรยี นการสอน
406.5 การปรับแต่งการเคล่ือนไหวแบบ Motion Tween เราสามารถปรับแตง่ การเคลอื่ นไหว โดยคลกิ ที่ Frame ท่ีมกี ารใช้ Motion ด้านลา่ งของหน้าจอสว่ นของ Properties จะปรากฏหน้าตา่ งดงั รูป Tween ชนิดการเคลอื่ นไหว มี 3 รูปแบบดงั นี ้ - None ยกเลกิ การเคล่อื นไหว Motion Tween - Motion สร้างการเคลือ่ นไหวแบบเคลื่อนท่ี - Shape สร้างการเคลื่อนไหวแบบเปล่ยี นรูปร่าง Scale เม่อื ใช้จะทาให้วตั ถทุ ี่อยใู่ น Keyframe แรก และ Keyframe สดุ ท้ายมขี นาดเท่ากนั โดย อตั โนมตั ิ Ease ระดบั ความเร็วในการเคลือ่ นท่ี - คา่ มากกวา่ 0 การเคลือ่ นไหวจะเป็นจากช้าไปเร็ว - คา่ น้อยกวา่ 0 การเคลอ่ื นไหวจะเป็นจากช้าไปเร็ว - คา่ เท่ากบั 0 จะเป็นการเคลอ่ื นไหวแบบปกติ Edit เป็นการปรับแตง่ คา่ Ease In / Ease Out ขนั้ สงู ปรับผา่ นสว่ นโค้ง Rotate เป็นคาสง่ั การหมนุ่ วตั ถทุ ี่ถกู สง่ั การให้เคลอื่ นไหว โดยมีการตงั้ คา่ ดงั นี ้ - None ไมห่ มนุ - Auto หมนุ ไปตามการเปล่ยี นแปลงของออบเจ็กตใ์ นคีย์เฟรมสดุ ท้าย - CW หมนุ ตามเขม็ นาฬิกา - CCW หมนุ ทวนเขม็ นาฬิกา6.6 Animation แบบเปล่ียนรูปทรง (Shape Tween) เป็นการทา Animation ให้เปล่ยี นรูปทรงจากวตั ถหุ นึง่ ไปยงั อกี วตั ถหุ นงึ่ หรือวตั ถเุ ดียวกนั แตเ่ ปลี่ยนรูปทรงก็ได้ สาหรบั วตั ถทุ ี่จะนามาทาต้องไมเ่ ป็น Symbol ถ้าเป็น Symbol จะต้องทาการเปลย่ี นให้เป็นวตั ถุธรรมดากอ่ น โครงการฝึ กอบรมเชิงปฏิบัตกิ ารผลติ ส่ือการเรยี นการสอน
416.7 การสร้าง Animation แบบเปล่ียนรูปทรง (Shape Tween) 1. วาดรูปขนึ ้ มาใหมห่ รือใช้วตั ถทุ ี่เป็น Symbol แทรกเข้ามาในชิน้ งานในไฟล์ตวั อยา่ งจะมี 2 วตั ถคุ ือ Apple และ Tree 2. คลกิ Frame ที่ 1 ลาก แล้วลาก Symbol Apple ลงบน Stage 3. กด Alt+B (Break Apart) เพ่ือเปลีย่ น Symbol ให้เป็นภาพปกติ 4. คลกิ Frame ที่ 36 กดป่ มุ F6 ลบภาพ Apple ท่ีอยบู่ น Frame ท่ี 36 ออก 5. ลาก Symbol Tree ลงบน Stage แล้วกด Alt+B (Break Apart) เพื่อเปลี่ยน Symbol ให้เป็นภาพ ปกติ โครงการฝึ กอบรมเชิงปฏบิ ตั กิ ารผลติ ส่ือการเรยี นการสอน
42 6. คลิกขวาช่องวา่ งระหวา่ ง Frame แล้วเลอื ก Create Shape Tween 7. กดป่ มุ Ctrl+Enter เพ่ือทาการทดสอบผลงานหรือ คลกิ ท่ี Menu File-> Publish Preview -> Flash โปรแกรมจะปรากฏหน้าตา่ งผลงานขนึ ้ มาแสดง6.8 การเคล่ือนไหวตามเส้น Guide (Motion Guide) เราสามารถกาหนดเส้นทางเดินของวตั ถโุ ดยวาดเส้นทาง ทาให้สะดวกตอ่ การทาAnimation เช่นการทารถว่ิง เครื่องบินบิน นกบินบนฟ้ า หรือคนเดนิ ขนึ ้ ภเู ขา เราเพียงสร้างMovie Clip จากนนั้ สง่ั ให้ขยบัตามเส้นทาง นอกจากนีย้ งั สามารถแก้ไขเส้นทางได้ภายหลงั ด้วย6.9 วธิ ีการสร้างภาพเคล่ือนไหวตามเส้น Guide ไฟล์ตวั อยา่ งเป็นไฟลพ์ ืน้ ท่ีมีต้นไม้อยขู่ ้างทาง โดยทจ่ี ะต้องนารถขบั ไปตามทางดงั กลา่ ว โดยได้จดั เตรียมพืน้ ที่ไว้ให้แล้ว แตจ่ ะต้องนารูปรถเข้ามาจากภายนอกเองในท่ีนีใ้ ช้รูปรถท่ีเป็นรูปภาพแบบ PNG 1. จดั การ Lock Layer Ground และ Tree โดยการกดที่ตาแหน่ง Lock Layer ของ Layer เมอื่ คลกิ แล้วจะเป็นรูปกญุ แจ 2. สร้าง ขนึ ้ มา 1 Layer โดยคลิกท่ีป่ มุ และเปลย่ี นช่ือเป็น Car และย้าย Layer ไปไว้ด้านบนสดุ โครงการฝึ กอบรมเชิงปฏิบตั กิ ารผลติ ส่ือการเรยี นการสอน
433. คลกิ ท่ี Layer Car คลิกที่ป่ มุ Add Motion guide จะปรากฏ Layer Guide :car ซงึ่ จะเป็น Layer ท่ีใช้วาดเส้นทางเดนิ สาหรบั สิง่ ท่ีอยใู่ น Layer นีจ้ ะไมเ่ ห็นตอนท่ีนาเสนอผลงาน จะเห็นในตอน สร้ างผลงานเท่านนั ้4. คลกิ ที่ Layer Guide :car จากนนั้ วาดเส้นทางเดนิ ลง บนถนนด้วยคาสงั่ Pencil Tool ซึ่งควรปรับ Pencil mode ที่ด้านลา่ ง Toolbox เป็นแบบ Smooth เพื่อให้รถขบั ตามเส้นอย่างเป็นธรรมชาติ5. ในกรณีท่ีวาดเส้นแล้วมอื ไมน่ ิ่ง หรือเส้นยงั เป็นหยกั เปลี่ยมมมุ ให้ดบั เบิลคลกิ ที่เส้นเพื่อทาการเลอื ก เส้นจากนนั้ ให้คลิกที่ Tool box ท่ีเขยี นวา่ Smooth จนกวา่ เส้นจะโค้งมน หรือถ้ากดจนเป็นเป็น เหลี่ยม ๆ กค็ วรลบและวาดใหม่6. คลิกที่ Layer car จากนนั้ วาดภาพรถ หรือนาไฟล์รูปรถเข้ามาในชิน้ งาน แตใ่ นตวั อยา่ งนีไ้ ด้เตรียม รูปรถไว้ให้แล้ว ให้นาภาพรถเข้ามาโดยคลิกท่ี Menu bar File->Import->Import to Stage จากนนั้ เลอื กไฟล์ car.png ซ่งึ ไฟล์นีเ้ ป็นรูปที่มีคณุ สมบตั ิฉากหลงั โปร่งใส โครงการฝึ กอบรมเชิงปฏิบตั กิ ารผลติ ส่ือการเรยี นการสอน
447. ยอ่ รูปรถให้มีขนาดตามถนนโดยการคลิกที่ Free Transform แล้วยอ่ ขนาดรถ8. รูปรถท่ีนาเข้ามาเป็นวตั ถรุ ูปภาพซึ่งจะต้องแปลงรูปรถให้เป็นSymbol เสียก่อน โดยให้คลิกที่รูปรถ กด F8 โดยเลือกให้วตั ถเุ ป็นแบบ Graphic และตงั้ ช่ือวา่ “ redcar” แตใ่ นกรณีท่ีวตั ถรุ ูปรถมกี าร เคลื่อนไหวด้วยเช่นล้อหมนุ จะต้องแปลงรูปรถล้อหมนุ ให้เป็นMovie Clip9. ลาก Symbol “redcar” ไปท่ีปลายเส้น โดยให้จดุ อ้างองิ วงกลมใส ติดกบั เส้นพอดี ( ความรู้สกึ จะ เหมอื นกบั มแี มเ่ หลก็ มาดดู ตดิ ) โดยปกตโิ ปรแกรมจะตงั้ คา่ Snap ดดู ติดกบั วตั ถมุ าให้อย่แู ล้วใน กรณีที่เส้นไมต่ ดิ กบั วตั ถใุ ห้คลกิ ท่ี Menubar View -> Snapping -> Snap to Objects10. ทา Highlight ครอบบริเวณ Frame ท่ี 60 ทกุ Layer แล้วกด F5 เพื่อสร้าง Frame ตงั้ แต่ Layer 1- 60 ซงึ่ ในชิน้ งานนี ้12 Frame ตอ่ 1 วินาที ถ้าต้องการให้ว่ิง 5 วนิ าที จะต้องใช้จานวน 60 Frame11. ใน Layer car ให้กดป่ มุ F6 ใน Frame ที่ 60 เพ่ือทาการสร้าง Keyframe โครงการฝึ กอบรมเชิงปฏิบตั กิ ารผลิตสื่อการเรยี นการสอน
45 12. ให้คลกิ Keyframe ท่ี 60 ของ Layer car จากนนั้ ลากรถมาท่ีปลายเส้นอกี ฝั่ง ตอนลากนนั้ จะพบวา่ รถจะถกู ดดู ติดกบั เส้น 13. หมนุ รถให้เอยี งตามเส้นปลายทางเพื่อให้ตอนจบ การเคล่อื นที่รถจะได้สมจริง 14. คลกิ ขวาที่ Layer car แล้วเลอื ก Create Motion Tween เพื่อทาให้รถเคล่ือนไหวตามเส้น 15. ซง่ึ ในขณะนีร้ ถจะเลยี ้ วโค้งไมเ่ ป็นธรรมชาติ รถจะหนั ไปในทางเดยี วกนั หมด ให้แก้ไขโดยคลิกให้ ปรากฏเคร่ืองหมาย ท่ีกลอ่ ง Orient to path ในหน้าตา่ ง properties ด้านลา่ งของหน้าจอ 16. กดป่ มุ Ctrl+Enter เพื่อทาการทดสอบผลงานหรือ คลิกที่ Menu File-> Publish Preview -> Flash โปรแกรมจะปรากฏหน้าตา่ งผลงานขนึ ้ มาแสดง6.10 การใช้Maskกับงาน Animation Mask จะเหมอื นกบั มหี น้ากากท่ีบงั วตั ถทุ ่ีอยดู่ ้านหลงั สามารถบงั สว่ นท่ีไมต่ ้องการให้แสดงผลได้โดย Mask สามารถกาหนดเป็นรูปร่างท่ีเป็นรูปทรงตา่ ง ๆ และภาพเคล่ือนไหวได้ โครงการฝึ กอบรมเชิงปฏบิ ตั กิ ารผลิตส่ือการเรยี นการสอน
Search
