ใบความรู้ เรื่อง รู้จักกับโปรแกรม Adobe Flash

ใบความรู้ เรอ่ื ง รจู้ กั กับโปรแกรม Adobe Flash ส่วนประกอบของ โปรแกรม Adobe Flashสว่ นประกอบดว้ ย1. Menu Bar (เมนบู าร)์ เป็นส่วนสำหรับแสดงรำยกำรคำสั่งตำ่ งๆ ของโปรแกรม2. Stage (สเตจ) เปน็ สว่ นทีเ่ รำกำหนดขอบเขตขนำดของกำรทำงำน เปน็ พ้ืนท่สี ่วนที่ใช้ในกำรวำงวัตถุตำ่ งๆหรอื อำจจะเรียกว่ำ \"เวท\"ี เม่ือมีกำรนำเสนอผลงำนจะแสดงเฉพำะวัตถบุ น Stage น้ีเทำ่ น้ัน3. Properties (พรอ็ พเพอรต์ ้ี) เปน็ ส่วนกำหนดคณุ สมบัตใิ ห้กบั วัตถุตำ่ งๆ ทเ่ี รำใช้งำน ทั้งกำรกำหนดค่ำตำ่ งๆ หรือกำรปรับปรุงเปลีย่ นแปลงแกไ้ ขวตั ถุไหนกน็ ำเมำสไ์ ปคลกิ ท่ีวัตถุน้นั ก่อน4.Timeline (ไทมไ์ ลน์) มไี วส้ ำหรับควบคมุ กำรทำงำนและกำหนดกำรนำเสนอผลงำน ตลอดจนกำรเคล่ือนไหวตำ่ งๆ5. Toolbox (ทลู บ๊อกซ)์ เปน็ กลุ่มของเครื่องมือในกำรสรำ้ งงำนและจัดกำรวัตถตุ ำ่ งๆ ซึ่งประกอบด้วยปุ่มเคร่ืองมือย่อยต่ำงๆ ท่ใี ช้ในกำรสร้ำงงำน

สว่ นประกอบตา่ งๆ ที่ปรากฏบน Timeline

การสรา้ งวตั ถุ (Object) ด้วยเครอื่ งมอื Line Tool Line Tool คือเครือ่ งมือสำหรับวำดเส้นตรง โดยเรำสำมำรถกำหนดสี ควำมหนำ และลวดลำย ต่ำงๆโดยกำหนดไดท้ ่ีหนำ้ ต่ำง properties ขน้ั ตอนกำรสร้ำง ดังนี้ขนั้ ที่ 1 คลกิ เลือกเครื่องมือท่ี Tool Box ดงั ภำพขั้นท่ี 2 กำหนดลักษณะของเส้นทหี่ น้ำต่ำง Propertiesกรณหี น้ำตำ่ งถูกปิด เปิดไดโ้ ดยคลิก Window > Properties > Properties ดงั ภำพกำหนดลกั ษณะของเสน้ ตำมตอ้ งกำร (ตำแหนง่ ด้ำนลำ่ งจอภำพ)ข้นั ท่ี 3 ใช้เมำส์ลำกเส้น ปรบั ขนำด เปลี่ยนสี ตำมต้องกำร ตวั อย่ำงกำรประยกุ ต์ใช้งำน1. ลำกเสน้ ตำมต้องกำร2. คลกิ ลูกศรสีดำ(Selection Tool)

3. คลกิ เส้นทไ่ี มต่ ้องกำรแล้วลบทิ้งโดยกดปุ่ม Delete ที่ Keyboard4. เลือกภำพวัตถุ โดยดับเบิลคลกิ หรือลำกคลุมภำพวัตถุ5. ตกแตง่ เส้นโดยกำหนดท่ีหน้ำต่ำง Propertiesตัวอยำ่ งงำนท่ีสร้ำงจำก Line Toolแบบฝึกสร้างวตั ถุด้วย Line Tool





การสร้างวตั ถดุ ว้ ย Pen Tool Pen Tool เป็นเครื่องมือท่ีใช้สำหรับวำดเส้น ตรง และเส้นโค้งแบบเท่ียงตรง หรือที่เรียกกันว่ำ พำธ (path) ซึ่งหำกลำกครบรอบจะมกี ำรใส่ Fill ใหอ้ ัตโนมัติ นอกจำกน้ียงั เพมิ่ หรือลบจุดบนเสน้ โคง้ ไดอ้ ีกด้วย Tips : กำรกด <Shift> ช่วยให้ลำกเสน้ มุม 45 องศำงำ่ ยข้ึนขน้ั ตอนการใช้เครื่องมือขน้ั ที่ 1 คลกิ เลือกเครือ่ งมือท่ี Tool Boxขนั้ ท่ี 2 กำหนดสีเสน้ และสีพืน้ ดังภำพขั้นท่ี 3 คลิกเมำส์ที่ stage พร้อมท้ังดึง หรือดัดแฮนเดิล จนกว่ำเสน้ จะบรรจบท่ีจดุ เรม่ิ ตน้หมำยเหตุ : เมื่อลำกเส้นบรรจบเสน้ เร่ิมต้น โปรแกรมจะเทสีเส้น และสพี ืน้ ให้อัตโนมัติตัวอยำ่ งงำนท่ีสรำ้ งจำก Pen Tool

แบบฝกึ สรา้ งวตั ถดุ ว้ ย Pen Tool



การสร้างวตั ถดุ ว้ ย Oval Toolกำรวำดรูปด้วย Oval Tool (เครื่องมือวำดวงกลม-วงร)ี มขี ้ันตอนดังน้ี1. เลือก Oval Tool จำกทูลบ็อกซ์2. กำหนดคุณสมบัติของ stroke และ fill บน property inspector ตำมตอ้ งกำร3. คลิกลำกเมำสบ์ นสเตจในแนวทะแยงตำม ขนำดที่ตอ้ งกำร ถำ้ ต้องกำรวงกลมใหก้ ดคีย์ Shift ค้ำงไว้ขณะท่ีลำกเมำส์ข้นั ที่ 1 คลิกเลือกเครื่องมือที่ Tool Boxขน้ั ท่ี 2 กำหนดคณุ สมบัติของ stroke และ fill บน Properties ตำมต้องกำรข้ันที่ 3 คลกิ ลำกเมำส์บนสเตจในแนวทะแยง ตำมขนำดทต่ี อ้ งกำร ถ้ำตอ้ งกำรวงกลมใหก้ ดคีย์ Shift คำ้ งไวใ้ นขณะท่ีลำกเมำส์ ผลท่ีได้ตัวอยำ่ งงำนที่วำดด้วย Oval Tool







การสรา้ งภาพเคลอื่ นไหวแบบเฟรมตอ่ เฟรม (Frame-by-Frame) กำรสรำ้ งภำพเคลือ่ นไหวแบบนี้ เป็นกำรสร้ำงคีย์เฟรม หลำยๆ คียเ์ ฟรมต่อเรียงกัน แต่ละเฟรมจะเปน็ อิสระตอ่ กนักำรแก้ไขเฟรมใดเฟรมหนึง่ ไม่ส่งผลตอ่ เฟรมอืน่ ๆ ซึง่ หลกั ๆ มีอยู่ 3 รูปแบบคือ1. กำรสร้ำงข้อควำมเคลื่อนไหว2. กำรสร้ำงภำพเคลื่อนไหวแบบยำ้ ยตำแหนง่ วัตถุ3. กำรสร้ำงภำพเคลื่อนไหวแบบยอ่ -ขยำยวัตถุรปู แบบท่ี 1 การสรา้ งขอ้ ความเคล่อื นไหวขนั้ ที่ 1 พมิ พ์ขอ้ ควำมลงบน Stage โดยเริม่ ที่คยี ์เฟรมใดคยี ์เฟรมหน่ึงขั้นท่ี 2 เพ่มิ คีย์เฟรมท่ี 2 โดย กด F6 หรือ คลกิ ขวำทค่ี ียเ์ ฟรมท่ี 1 แล้วคลกิ Insert Keyframeขน้ั ที่ 3 คลิกท่ีคีย์เฟรมท่ี 2 พิมพ์ตัวอกั ษรตัวที่ 2 หรือข้อควำมท่ีต้องกำร

ขน้ั ที่ 4 ทำขั้นตอนที่ 2 ตอ่ ดว้ ยขั้นตอนท่ี 3 วนอยำ่ งน้ี จนกว่ำจะครบข้อควำมที่ตอ้ งกำรขน้ั ที่ 5 ทำจนครบข้อควำมทีต่ ้องกำรดังภำพขั้นที่ 6 ทดสอบ Movie โดยกดCtrl+ Enter หรือ คลิกเมนู Control > Test Movieจะได้ไฟล์ Movie เปน็ .swf

รปู แบบท่ี 2. การสร้างภาพเคลอื่ นไหวแบบยา้ ยตาแหน่งวัตถุข้นั ท่ี 1 สรำ้ งวตั ถขุ ้ึนมำ 1 ชน้ิ จะวำดเป็นภำพธรรมดำหรือ ทำเปน็ ซิมโบลกไ็ ด้ บนเฟรมท่ี 1ขน้ั ที่ 2 คลิกขวำท่ีเฟรมท่ี 2 หรือ กด ปุ่ม F6 เพื่อเพ่มิ คยี เ์ ฟรม (Keyframe)ขนั้ ที่ 3 ใช้ลูกศรสดี ำ (Selection Tool) คลกิ แล้วย้ำยตำแหน่งวตั ถุขยับจำกตำแหน่งเดิมเล็กนอ้ ย

ขน้ั ท่ี 4 ทำซำ้ ขนั้ ที่ 2 คือ คลกิ ขวำที่เฟรมถัดไปคือเฟรมที่ 3 หรือ กดปุ่ม F6 เพื่อเพ่มิ คียเ์ ฟรม จำกน้นั ใช้ลกู ศรสดี ำ (SelectionTool) คลิกแล้วย้ำยตำแหน่งวตั ถุอกี เล็กนอ้ ยขั้นที่ 5 เพิ่มคีย์เฟรมต่อไปเรื่อยๆ และ ขยับวัตถุ ไปเรื่อยจนกระท่งั ได้ภำพเคลื่อนไหวตำมต้องกำรจำกนั้นตรวจสอบกำรเคลื่อนไหวโดยกำรคลกิ ที่หัวอ่ำน(Play Head) แล้วลำกเม้ำส์ซ้ำย-ขวำขน้ั ท่ี 6 กด Ctrl + Enter หรือ คลกิ ท่ีเมนู Control > Test Movie เพือ่ ชมตัวอย่ำง

รปู แบบที่ 3. การสรา้ งภาพเคลอ่ื นไหวแบบยอ่ -ขยายวตั ถุ กำรเปลี่ยนขนำดวัตถุใหใ้ หญข่ ึ้นหรือเลก็ ลงเป็นอกี รปู แบบหนง่ึ ของกำรสรำ้ งภำพเคลื่อนไหวตัวอย่ำงเช่นกำรทำให้วัตถุเคลือ่ นท่จี ำกตำแหนง่ ท่อี ยไู่ กลมำใกล้เป็นต้นขัน้ ที่ 1 วำดวัตถุขึ้นมำ 1 ช้นิ ดังรูป ข้นั ที่ 2 ใช้ลกู ศรสดี ำ (Selection Tool) ลำกครอบ วตั ถุท้ังหมดขน้ั ที่ 3 กดปมุ่ Ctrl คำ้ งไว้แล้วกด ตัว G เพื่อสร้ำงกลุ่มของ ขน้ั ที่ 4 คลกิ เลือกเครื่องมือ Free Transformวตั ถุ (Group) จะปรำกฏขอบสีฟำ้ Control จะมกี รอบสีดำขึ้นรอบวัตถุขึน้

ขั้นท่ี 5 นำเม้ำสม์ ำช้ีทีก่ รอบสี่เหลี่ยมสีดำเลก็ ๆ ข้ันที่ 6 คลกิ ขวำทเี่ ฟรมท่ี 2 เลือก Insert Keyframe หรือท่ีมุมของวตั ถุแล้วยอ่ ยให้เป็นภำพขนำดเล็ก กดปุ่ม F6 เพม่ิ คยี เ์ ฟรม แล้วขยำยภำพให้ใหญ่ขน้ึ เลก็ นอ้ ยข้นั ท่ี 7 กดปุ่ม F6 เพ่ิมคียเ์ ฟรมแล้วขยำยภำพขนึ้ อกี ขัน้ ท่ี 8 ทำซำ้ ขั้นตอนที่ 7 จนได้ขนำดภำพทีต่ อ้ งกำรอำจจะเล็กนอ้ ย ตอ้ งเพ่มิ หลำยๆคยี เ์ ฟรมกไ็ ด้ขั้นที่ 9 กด Ctrl+ Enter เพื่อชมผลงำนหำกต้องกำรทำให้ภำพใหญ่เป็นเล็กต้องทำให้ภำพในตำแหน่งเฟรมที่ 1 เปน็ ภำพขนำดใหญ่เฟรมถัดไปค่อยๆปรับให้เล็กลงเรื่อยๆทีละเฟรม

การสรา้ งภาพเคลอื่ นไหวแบบ Motion Tween กำรสรำ้ งภำพเคลือ่ นไหวแบบนี้ เปน็ กำรเคลื่อนท่ีของเนือ้ หำจำกจุดหน่ึงไปยงั อีกจดุ หนงึ่ หรือเปลี่ยนคุณสมบตั จิ ำกแบบหนึง่ ไปเป็นอกี แบบหนึ่ง เหมำะสำหรับกำรทำภำพเคลื่อนไหว แบบตอ่ เนือ่ งสม่ำเสมอ เชน่ เมฆลอย พดั ลมกำลังหมุน ยำนบินรถกำลังแล่น เป็นตน้1. การสรา้ งภาพเคลื่อนไหวแบบลอยในแนวเส้นตรงขัน้ ท่ี 1 คลิกเลือกคยี เ์ ฟรมจุดเรมิ่ ต้น ข้ันที่ 2 สรำ้ งวัตถุ หรือเนื้อหำตำมตอ้ งกำรขน้ั ท่ี 3 คลกิ ขวำที่คยี ์เฟรม คลิกเลือกเมนู Create Motion Tweenขนั้ ที่ 4 กำหนดระยะห่ำงจำกจุดแรกตำมตอ้ งกำร เชน่ ขนั้ ท่ี 5 จับวตั ถุท่ี stage แล้วปรับเปลี่ยนคุณลกั ษณะ เช่นห่ำง 15 เฟรม คลกิ ท่เี ฟรมท่ี 15 แล้วเพ่ิมคีย์เฟรม โดย ย้ำยตำแหน่ง ยอ่ -ขยำย เปลี่ยนสี หรืออืน่ ๆกด F6 หรือคลกิ เมนู Insert > Timeline > Keyframe ตำมตอ้ งกำร

ข้ันท่ี 6 ทดสอบ Movie โดยกด Ctrl+ Enter หรือ คลกิ จะได้ไฟล์ Movie เปน็ .swfเมนู Control > Test Movie

ภาพเคล่ือนไหวแบบหมุนไปพร้อมกบั เคลือ่ นท่ีข้นั ที่ 1 คลกิ เลือกคีย์เฟรมแรกหรือเฟรมทีอ่ ยรู่ ะหวำ่ งคีย์เฟรมทั้งสองของกำรเคลื่อนไหวข้นั ที่ 2 กำหนดค่ำตำ่ งๆ ที่หน้ำตำง Properties Rotate : CW หมำยถงึ ลกั ษณะกำร หมุนแบบตำมเข็มนำฬิกำ CCW หมำยถงึ กำรหมุนทวนเข็มนำฬิกำ 1 times หมำยถึงจำนวนรอบของกำร หมนุ ภำยใน 15 เฟรมขนั้ ที่ 3 ทดสอบกำรเคลือ่ นทโ่ี ดยกดปุ่ม Ctrl+Enter(ถำ้ ไม่ต้องกำรให้วตั ถุเคลื่อนท่ีแต่หมนุ อยู่ท่เี ดิมก็ไม่ต้องเคลือ่ นย้ำยวัตถใุ นตำแหน่งคียเ์ ฟรมท่ี 15)

ภาพเคลอื่ นไหวแบบยอ่ -ขยายขนั้ ตอนท่ี 1 คลิกที่เฟรมที่ 1 แล้ววำดรปู ทตี่ ้องกำรลงไปข้ันท่ี 2 คลิกขวำทีเ่ ฟรมที่ 1 แล้วเลือกคำส่ัง Create Motion Tweenขน้ั ท่ี 3 คลิกขวำเฟรมที่ 20 เลือกคำสงั่ Insert Keyframe แล้วขยำยรูปให้ใหญข่ ้ึนด้วย Free Transform Toolขน้ั ที่ 4 กดปุ่ม Ctrl+Enter เพื่อดูตวั อย่ำงภำพเคลื่อนไหว จะเห็นภำพค่อยใหญ่ข้ึน

การเคล่อื นไหวตามเสน้ ทางทกี่ าหนด (Guide Layer)ขั้นท่ี 1 คลิกขวำที่เฟรมท่ี 1 เลือกคำสั่ง Create Motion Tweenขน้ั ท่ี 2 คลกิ ขวำท่เี ฟรมท่ี 20 หรือ เฟรมอืน่ ๆแล้วแต่เรำจะกำหนด แล้วเลือกคำส่งั Insert keyframesขัน้ ท่ี 3 คลกิ ที่เฟรมที่ 20 (เฟรมปลำยทำง) ใชเ้ ครือ่ งมือ Selection Tool คลกิ เพื่อย้ำยตำแหน่งวัตถุขน้ั ท่ี 4 คลิกที่ปุ่ม Add Motion Guideแล้วคลิกที่เฟรมท่ี 1

ขนั้ ท่ี 5 วำดเสน้ สำหรบั ให้วัตถุเคลือ่ นทด่ี ้วยดินสอ (Pen Tool) โดยปรบั ค่ำตัวเลือก (Option) ทอ่ี ยู่ด้ำนลำ่ งของToolBar เลือกคำสง่ั Smooth เริ่มวำดจำกตำแหน่งเริ่มต้นของวตั ถุขน้ั ท่ี 6 หลงั จำกวำดเสรจ็ สงั เกตวงกลมท่ตี ำแหน่งปลำยเส้นไกด์ดำ้ นเร่มิ ต้นแล้ว จำกนน้ั ใหค้ ลิกท่ีตำแหนง่ คีย์เฟรมท่ี 20 แล้วยำ้ ยตำแหนง่ วตั ถใุ ห้วงกลมตรงกลำงอยู่ท่ีปลำยเสน้ อกี ด้ำนหนง่ึขนั้ ท่ี 7 ทดสอบภำพเคลือ่ นไหวโดยกำรกดปุ่ม Ctrl+Enter จะได้ภำพเคลือ่ นไหวตำมเส้นทก่ี ำหนดหำกภำพไมเ่ คลื่อนตำมเส้นแสดงว่ำ 1. วงกลมเลก็ ตรงกลำงวตั ถไุ ม่อยู่บนเสน้ 2. เส้นท่ีวำดไมต่ อ่ เนือ่ งกนัขน้ั ท่ี 8 ปรับแต่งเพ่มิ เตมิ โดยกำรคลิกท่ตี ำแหนง่ เฟรมท่ี 1 แล้วเลือก Orient to path ในหนำ้ ต่ำง Properties เพือ่ กำหนดทศิทำงกำรหนั ของวัตถุให้ถูกต้อง



การใช้งาน Symbol และ Instanceซิมโบล (Symbol) ซิมโบล (Symbol) คือ กรำฟกิ ปมุ่ หรือ มูฟวี่คลิปทเ่ี รำสรำ้ งขึ้นมำเป็นต้นแบบในคร้งั แรก จำกนั้นก็จะสำมำรถนำไปใชไ้ ด้อย่ำงไมจ่ ำกดั ตลอดในมฟู ว่ีเดยี วกัน และมูฟวี่อืน่ ๆ ซิมโบลหนึง่ ๆ อำจรวมถึงอำร์ตเวิรค์ท่ีนำ เข้ำมำจำกโปรแกรมอื่น ทุกซมิ โบลทีส่ รำ้ งข้ึนจะเป็นส่วนหนง่ึ ในไลบรำรขี องไฟล์ปจั จุบัน ซ่ึงซิมโบล แบ่งเป็น 3 ประเภทคือ 1. Graphic 2. Button 3. Movie ClipLibrary เป็นที่เก็บซมิ โบล กำรเปิดใชง้ ำน Library ทำได้โดย กดปุ่ม Ctrl+Lกำรสร้ำงซมิ โบล (Symbol สำมำรถทำได้ 2 แบบคือ กำรสร้ำงจำกซิมโบลเปล่ำ และ สร้ำงจำกวัตถุท่ีมีอยแู่ ล้วแบบที่ 1 สร้างซิมโบลจากซมิ โบลเปล่าขน้ั ตอนท่ี 1คลิกเมนู Insert > New Symbol หรือ กด Ctrl+F8ขั้นตอนท่ี 2 ต้งั ชื่อซมิ โบล และเลือกชนิดซมิ โบลตำมต้องกำร แล้วคลิก OKขั้นตอนที่ 3 เขียนภำพวตั ถุตำมต้องกำรอนิ สแตนซ์ (Instance) อนิ สแตนซ์ คือ สำเนำของซิมโบลที่มอี ยู่บนสเตจ หรือซอ้ นอยู่ภำยในซิมโบลอื่น อนิ สแตนซอ์ ำจมีสี ขนำดและหนำ้ ท่ี แตกต่ำงจำกซมิ โบลท่ีเปน็ ต้นฉบับ หำกทำกำรแก้ไข ซิมโบลจะมีผลให้เกดิ ควำมเปลี่ยนแปลงกับอินสแตนซ์ทง้ั หมดที่สำเนำไปจำกซิมโบลกำรสร้ำงอินสแตนซ์1. เปดิ พำเนลไลบรำรี โดยคลกิ เมนู Window > Library หรือ กด Ctrl+L หรือ กด F11 จะไดห้ น้ำต่ำง ไลบรำรี ดังภำพ

2. คลิกชื่อซมิ โบลในหน้ำตำ่ งไลบรำรี ทต่ี อ้ งกำรใช้3. ลำกซมิ โบลไปวำงบนสเตจ2. การแปลงวัตถุ (object) ให้เป็นซิมโบล (symbol)กำรแปลงจำกส่วนประกอบทเี่ ลือกไว้ หรือ วตั ถทุ ่ีมอี ยู่ ใหเ้ ปน็ ซิมโบลขัน้ ตอนท่ี 1 เขยี นภำพตำมตอ้ งกำรท่ี stageขน้ั ตอนที่ 2 คลกิ เลือกภำพ (หรือถ้ำภำพอยู่ห่ำงกัน ให้ลำกคลุมทงั้ หมด) แล้วคลกิ ขวำและคลกิ ทเี่ มนู Convert to Symbol

ขนั้ ตอนท่ี 3 ตั้งชือ่ ซิมโบล แล้วเลือกชนดิ ของซมิ โบลที่ต้องกำรหมำยเหต.ุ ... ดซู ิมโบลที่สรำ้ งไดจ้ ำกหนำ้ ต่ำง Library ซ่ึงเปดิ หน้ำต่ำงไดจ้ ำก เมนู Window > Library หรือ กด F11ซึง่ จะพบหน้ำตำ่ งดงั ตัวอย่ำงในทำนองเดียวกัน สำมำรถสร้ำงซิมโบลแบบ Button และ Graphic ได้ดังขนั้ ตอนท่ี 1-3 เพียงแต่เลือกชนดิ ที่ขั้นตอนท่ี 3หำกทำท้ัง 3 ซิมโบล จะไดด้ งั ภำพตวั อยา่ ง การนาซมิ โบล (Symbol) และ อนิ สแตนซ์ (Instance) มาใช้1. สร้ำงซิมโบลแบบ Movie Clip ตั้งชือ่ arrow

2.วำดรปู ลูกศร3. กำหนดให้ลูกศรเคลื่อนไหว แบบ Motion Tween ดังภำพ 4. กลบั มำทำงำนทห่ี น้ำ stage โดยคลกิ ท่ี scene15. ที่หน้ำ stage เปิดหน้ำตำ่ ง Library โดย คลิ เมนู Window > Library หรือ กด F11 แล้วจบั อินสแตนซ์ทชี่ ื่อ arrow มำวำงท่ีหนำ้ stage6. นำอนิ สแตนซ์มำวำงหลำยๆ รูป โดยปรบั ขนำดและทิศทำงตำมต้องกำร

7. เมือ่ ทดสอบ Movie โดยกำรกด Ctrl+Enter จะไดภ้ ำพกำรเคลือ่ นไหวดังตัวอยำ่ งตัวอยา่ งการใช้งานซิมโบลซอ้ นซมิ โบลขนั้ ท่ี 1 คลิกทเี่ ฟรมท่ี 1 แล้ววำดรูป ล้อรถลงไปดังรูปขนั้ ที่ 2 ใช้ Selection Tool (ลกู ศรสีดำ) ลำกครอบเพื่อเลือกทั้งหมด แล้วกดปุ่ม F8 หรือ คลิกเลือกเมนู Modify > Convertto Symbol ตั้งชื่อใหเ้ รียบร้อย “ล้อรถ” เลือกชนดิ ซิมโบลแบบ Movie Clip เพือ่ ให้วัตถุสำมำรถเคลือ่ นไหวได้ในตัวของมนัเอง

ในหนำ้ ตำ่ ง Library จะมีซมิ โบลรปู ลอ้ เกิดขน้ึขน้ั ท่ี 3 ลบรปู ล้อออกจำกสเตจแล้ววำดรูปตัวรถข้ึนมำ จำกน้นั ทำใหเ้ ปน็ ซิมโบลด้วยวธิ ีกำรเดิมแต่ครำวนตี้ ้ังชือ่ ซิมโบลเป็น“ตัวรถ”ข้นั ที่ 4 วำดซิมโบล ล้อรถในไลบรำรีม่ ำวำงดงั รปู ตอนน้ีจะไดว้ ัตถุรูปรำ่ งเหมือนรถแต่ยงั ไมไ่ ด้เป็นซิมโบลชน้ิ เดียวกันจะต้องรวมซมิ โบล ตัวรถกับล้อรถให้เป็นซมิ โบลเดียวก่อนข้นั ท่ี 5 รวมซมิ โบลตัวรถกับลอ้ รถใหเ้ ปน็ ซมิ โบลเดียวโดยกำรใช้ลกู ศรสดี ำ ลำกครอบวัตถทุ ้ังหมดแล้วกด F8 อีกครงั้ เพือ่ สรำ้ งซมิ โบลใหมจ่ ำกน้นั ก็ต้ังชือ่ “รถยนต์” เป็นอนั เสรจ็ พรอ้ มในไปใช้งำน

เมือ่ ทำซิมโบลเสรจ็ จะได้ซมิ โบลรูปรถข้ึนมำในไลบรำรีด่ งั รปูขั้นที่ 6 ทำใหล้ ้อหมุนได้ โดยดับเบิ้ลคลิกเข้ำไปที่ซิมโบลลอ้ รถ สงั เกตท่แี ถบ Timelineขัน้ ท่ี 7 คลิกขวำทเ่ี ฟรมท่ี 1 แล้วเลือก Create Motion Tween (ตอนน้ีเรำทำงำนอยู่ในซมิ โบลล้อรถ)คลกิ ขวำเฟรมท่ี 10 เลือกคำส่ัง Insert Keyframe

คลิกท่เี ฟรมที่ 1 จะมี Properties ขึน้ มำ ชอ่ ง Rotate เลือก CCW (หมนุ ทวนเขม็ นำฬกิ ำ)ขั้นท่ี 8 คลิกที่คำว่ำ Scene 1 บนแถบ TimeLine แล้วกด Ctrl+Enter เพือ่ ทดสอบจะปรำกฏรปู รถท่ีมีลอ้ กำลงั หมุนหยดุ อยกู่ ับทเี่ ฉยๆขน้ั ที่ 9 กลบั มำสหู่ น้ำตำ่ งแกไ้ ข ใหค้ ลิกขวำทเ่ี ฟรมท่ี 1 แล้วเลือกคำสั่ง Create Motion Tweenจำกนนั้ คลิกขวำที่เฟรมที่ 40 แล้วเลือกคำสั่ง Insert Keyframe

ขน้ั ท่ี 10 คลกิ ทเี่ ฟรมท่ี 1 แล้วย้ำยรถไปวำงไวด้ ้ำนขวำของจอ แล้วคลกิ ที่เฟรมท่ี 40 แล้วยำ้ ยรถไปไว้ท่ีดำ้ นซำ้ ยขอจอเฟรมที่ 1เฟรมท่ี 40เสร็จแล้ว กดปุ่ม Ctrl+Enter หรือเลือกเมนู Control > Test Movie เพือ่ ดตู ัวอยำ่ งภำพเคลื่อนไหวท่ีเกดิ ขนึ้

การใช้งาน action script พน้ื ฐานAction Script (แอคช่ันสคริปต)์ คือชดุ คำสั่งหรือภำษำคอมพวิ เตอร์ท่ใี ชใ้ นกำรควบคุมหรือส่ังกำรในโปรแกรม Flashโดย Action Script สำมำรถเขียนควบคุมได้ท้ังบน Timeline และ บน Symbolการเขียน Action Script บน Timeline กำรเขยี นแอคช่นั สคริปต์บนไทมไ์ ลน์สำมำรถทำดงั น้ี1. สรำ้ งแอนิเมชัน่ แบบใดกไ็ ดข้ ้ึนมำ 1 ชิ้น (ในตัวอย่ำงจะสร้ำงแอนิเมช่ันแบบ Motion Tween)หมำยเหตุ * ปกติเมื่อเรำกดปุ่ม Ctrl+Enter โปรแกรม Flash จะเลน่ วนซำ้ ไปซำ้ มำจนกวำ่ จะปิด2. แทรกคำสง่ั Action Script เขำ้ ไปในเฟรมสดุ ท้ำยของงำน ให้คลกิ ทเี่ ฟรมท่ี 40 แล้วกดปุ่ม F9 บนคีย์บอรด์ จะมีหน้ำตำ่ งๆAction Frame ขน้ึ มำดังรปู3. ในกำรเขียนคำสั่งโปรแกรมได้ออกแบบใหส้ ำมำรถเขียนได้ 2 รูปแบบคือ แบบ Normal หรือ แบบธรรมดำสำหรับผ้ทู ่ียงั ใช้คำสงั่ ไม่คลอ่ ง และ แบบ Expert คือ แบบท่ีสำมำรถพมิ พ์คำสัง่ ได้เลยสำหรบั หัวข้อนจ้ี ะให้เขียนทัง้ 2 รปู แบบ ดงั นี้

เลือกคำสั่ง Global Functions > Timeline Control > stop (คำสั่ง stop คือ สัง่ ให้หยดุ กำรทำงำน)4. ใหน้ กั เรยี นสังเกตที่เฟรมที่ 40 จะมสี ัญลกั ษณ์ ตัว a เล็กอยู่ในเฟรม จำกน้นั ก็ทดสอบกด Ctrl+Enterแบบท่ี 2 กำรเขยี นแบบ Expert mode คลิกท่เี ครื่องคำว่ำ Script Assist ด้ำนขวำของแถบ Actionจะปรำกฏหน้ำตำ่ งๆวำ่ งๆขึ้นมำ ให้นักเรยี นพิมพค์ ำสง่ั stop(); ลงในพื้นที่ว่ำงน้ันเสรจ็ แล้วกดปุ่ม Ctrl + Enter เพ่ิอทดสอบคำสั่ง ถ้ำทำถูกแอนิเมช่ันจะแสดงผลแค่ 1 ครง้ั แล้วหยุด

การเขยี น Action Script บน Symbol Button สำหรับกำรใช้งำนซมิ โบลน้ันมี 3 อย่ำงตำมที่ไดก้ ลำ่ วมำแล้ว ไดแ้ ก่ Movie Clip Graphic และ Button ซิมโบลแบบMovie Clip คือซมิ โบลท่ีสำมำรถสร้ำงภำพเคลื่อนไหวซ้อนในตัวของมันเองได้ซมิ โบลแบบ Graphic คือ ซิมโบลท่ีเปน็ ภำพกรำฟฟคิ ไม่สำมำรถสรำ้ งภำพเคลือ่ นไหวซ้อนได้ซมิ โบลแบบ Button คือ ปุ่มท่ีใช้สำหรับกำรควบคมุ ให้ซิมโบล วตั ถุ หรือ ภำพเคลื่อนไหวทำงำนได้สำหรับกำรใชง้ ำนซิมโบลแบบ Button สำมำรถทำได้ดงั น้ี1. วำดรปู ปุ่มขึ้นมำ 1 รปู จะเป็นรูปอะไรกไ็ ด้2. ใช้ลูกศรสีดำ (Selection Tool) ลำกครอบแล้วกดปุ่ม F8 จำกนน้ั ตัง้ ชื่อซิมโบลแล้วเลือกซิมโบลแบบButton กด OK3. เมื่อไดซ้ ิมโบลแล้วดับเบ้ิลคลกิ เข้ำไปที่ ซิมโบล จะปรำกฏเฟรม 4 สถำนะ คือ Up Over Down HitUp คือ สถำนะปกตทิ ่ียังไมไ่ ด้ทำอะไร Over คือ สถำนะเมื่อเคอเซอร์ของเมำส์มำทับปุ่มDown คือ สถำนะเมือ่ คลกิ ปุ่ม Hit คือ กรอบพื้นท่ีหรือขอบเขตของปุ่ม4. คลกิ ขวำทเ่ี ฟรม Over แล้วเลือกคำสงั่ Insert Keyframe

5. ทำกำรเปลี่ยนสีหรือรปู ร่ำงของปุ่มใน เฟรม Over6. คลกิ ขวำที่เฟรม Down แล้วเลือกคำส่ัง Insert Keyframe แล้วเปล่ียนสอี ีกรอบ7. คลิกขวำท่ีเฟรม Hit แล้วเลือกคำส่ัง Insert Keyframe ไมต่ อ้ งเปล่ียนสกี ไ็ ดเ้ พรำะสถำนะ Hit เปน็ ขอบเขตของปุ่มท่ีสำมำรถคลิกได้เท่ำนั้น ไม่สำมำรถแสดงสีได้

หมำยเหตหุ ำกตอ้ งกำรพมิ พข์ ้อควำมบนปมุ่ สำมำรถพมิ พไ์ ดต้ ำมคียเ์ ฟรมของแต่ละสถำนะ8. เมือ่ ตกแต่งเสร็จ กดที่คำว่ำ Scene 1 เพือ่ กลับไปยงั หน้ำหลัก จำกน้ันกด ปุ่ม Ctrl+Enter เพื่อทดสอบ และลองเลือ่ นเมำส์มำทบั ปุม่ และคลิกดู จะมกี ำรเปล่ียนแปลงเกิดขน้ึ ตำมทเี่ รำกำหนดวธิ กี ารใช้ ActionScriptActionScript เป็นกำรเขียนภำษำ Script บนโปรแกรม Flash เพื่อใช้ควบคุมมูวี่ (Movie) ให้ทำงำนตำมเหตกุ ำรณต์ ่ำงๆโดยเขยี นท่ีหนำ้ ตำ่ งทเี่ รียกวำ่ พำเนล (Panel) ซ่ึงพำเนล มี 2 โหมดคือNormal Mode เป็นโหมดปกติ ซึง่ จะมตี ัวนำทำงหรือเมนตู ัวเลือก โหมดนเี้ หมำะสำหรับมือใหม่Expert Mode เปน็ โหมดสำหรบั ผูเ้ ชี่ยวชำญเหมำะสำหรับผู้ท่ีจำรูปแบบคำส่งั (Syntax, operator,command)ได้ดี ในโหมดนจี้ ะไมม่ ี เมนูนำทำง เหมือนแบบแรกกำรเปดิ หน้ำตำ่ ง พำเนล (Panel Actions) คลิก Windows > Action หรือ กด F9ขัน้ ท่ี 1 คลิกที่ปุ่ม Script Assist เพือ่ สลับหนำ้ ตำ่ งพำเนล

การเขียนคาสั่งให้กับเฟรม คำสั่ง Action Script สำมำรถเขียนให้กับองค์ประกอบ 3 ชนดิ คือเฟรม (Frame) ปมุ่ (Button) และมูวคี ลิป (Movie Clip)ขน้ั ตอนกำรกำรเขียนคำสัง่ ให้กับเฟรม (Frame)ข้นั ที่ 1 คลกิ เฟรมท่ตี อ้ งกำรใส่คำสง่ั สคริปต์ (หมำยเลข 1)ข้ันท่ี 2 เขยี นคำส่ังท่ีต้องกำรกรณีอยูใ่ น Normal Mode ทำได้โดย คลิกเครือ่ งหมำยบวก (หมำยเลข 2 ) แล้วคลกิ เลือกคำส่ังท่ตี ้องกำรข้นั ที่ 3 ผลท่ีได้จำกกำรใส่คำสง่ั (หมำยเลข 4 )

4. กรณอี ยใู่ น Expert Mode สำมำรถเขียนคำสงั่ ไดโ้ ดยตรง (หมำยเลข5)5. เมือ่ ตอ้ งกำรลบคำส่ังออก ทำไดโ้ ดยคลิกเครือ่ งหมำยลบ (หมำยเลข 6)หรือหำกอยใู่ น Expert Mode ทำกำรแดรกเมำส์คลุมคำส่ังที่ต้องกำรลบ แล้วกดปุ่ม Deleteการเขียนคาสั่งใหก้ บั ปมุ่ กำรเขยี นคำสั่งให้กับปุ่ม คือกำรกำหนดแอคช่ันให้ปุ่ม ให้ตอบสนองต่อกำรกระทำ เช่น เวลำคลิกลำก (Drag) หรือวำงเมำสไ์ ว้เหนือป่มุ ซงึ่ ตอ้ งใสค่ ำส่ังไว้ภำยในตัวควบคุม on พรอ้ มทงั้ ระบเุ หตุกำรณ์หรืออเี วนต์ (event) ของเมำส์หรือคีย์บอร์ดตำมด้วยคำส่ังที่ต้องกำรโดยมีรูปแบบคำสงั่ คือขั้นตอน การเขียนคาสั่งใหก้ บั ปุ่ม (โหมด Normal)1. คลิกทป่ี ุ่ม แล้วใส่คำสั่งที่หน้ำตำ่ งพำเนล ActionScript ตำมต้องกำร4. คลกิ เครื่องหมำยบวก (หมำยเลข 1)

5. เลือกเมนูคำสั่งทต่ี ้องกำร เช่น ต้องกำรให้เปดิ เว็บ (หมำยเลข 2)6. ในบำงคำส่ัง จะต้องมีกำรกรอกรำยละเอียดที่ต้องกำร (หมำยเลข 3)แนวทางการเขยี น ActionScriptสำหรับกำรเขียนใน Expert Mode จะมรี ปู แบบกำรเขียนแอคชนั่ สคริปต์ ให้กับเฟรมเพือ่ ควบคุมป่มุ และมฟู วี่คลิป ดังน้ีตวั อย่ำงเช่น กำรเขียนส่ังงำนใหก้ ับปุม่ ชื่อ button1 เวลำถกู คลิก จะใชร้ ปู แบบ คือ

ขั้น ตอนกำรเขียนด้วยหน้ำตำ่ ง Expert Mode(หมำยหตุ : ดูขั้นตอนกำรเขียนโดยใชห้ นำ้ ต่ำง Normal Mode ไดท้ ี่ กำรเขยี นคำสง่ั ให้กับปุม่ )1. คลกิ ทป่ี ุ่มใหแ้ อคทีฟ (Active)2. เปิดหน้ำตำ่ งแอคช่ัน แบบ Expert Mode หรือถ้ำเปดิ แล้ว ให้คลิกท่ีปุ่ม เปรียบเทียบหน้ำต่ำง Expert Mode และ Normal Mode3. คลกิ เครื่องหมำยบวก (หมำยเลข 1)4. คลิกเลือกกลุ่มคำสั่งที่ตอ้ งกำร (หมำยเลข 2)

5. ดับเบิลคำส่ัง หรืออีเวนต์ทต่ี ้องกำร (หมำยเลข 3)6. ทำซำ้ ข้อ 3-5 เพือ่ เพ่ิมเตมิ คำสั่งอื่นๆ อกี ตำมตอ้ งกำรคาสัง่ พนื้ ฐาน Action Scriptคาสงั่ On Mouse Event ใช้กำหนดเหตุกำรณ์ ของเมำส์หรือคีย์บอรด์ ซงึ่ จะมีผลชุดคำส่ังทอ่ี ยู่ในบรรทัดตอ่ ๆ มำที่อยู่ในเครื่องหมำย { } ถูกดำเนนิ กำร โดยทุกครง้ั ทกี่ ำหนดคำสงั่ ให้กับปุม่ โปรแกรมจะสรำ้ งคำส่ัง On ขนึ้ มำรองรบั ซงึ่ จะมอี เี วนต์ท่ีประกอบด้วย

คาส่งั Go To เป็นคำส่ังท่ีใช้ควบคมุ กำรแสดงของมูฟวี่ โดยสั่งให้หัวอำ่ น (Play Head) กระโดดไปยงั ตำแหนง่ ที่ตอ้ งกำร ไดแ้ ก่

ตวั อยำ่ ง....................จำกภำพ เป็นกำรกำหนดให้หัวอ่ำน (Play Head) กระโดดไปหยุดท่ี Scene 2 เฟรมท่ี 10

การใชง้ านเสยี งและวดิ โี อการนาเขา้ ไฟลเ์ สยี งเสยี งประกอบในมูฟวี่ของ Flash แบ่งออกเป็น 2 ประเภทคือEvent Sound หมำยถึงเสยี งที่ต้องถกู ดำวน์โหลด มำครบสมบรู ณก์ ่อน จึงจะเริ่มเลน่ ได้ และเมือ่ เลน่ แล้วก็จะเล่นอยำ่ งต่อเนือ่ งจนกว่ำเรำจะสั่งให้หยดุStream Sound หมำยถึงเสียงซ่ึงจะเร่มิ เลน่ ทันที่ ท่ีข้อมูลของเฟรมแรกๆ ถูกดำวน์โหลดเข้ำมำมำกพอที่จะเล่นได้ ไฟลเ์ สยี งทเ่ี รำสำมำรถอิมพอรต์ เข้ำมำใชใ้ น โปรแกรม Flash คือไฟลป์ ระเภท WAV,AIFF (.aif)และ MP3 นอกจำกน้ีหำกเครื่องติดตั้งโปรแกรม QuickTime 4 ขน้ึ ไป ก็จะสำมำรถใช้ไฟล์เสียงประเภทอื่นๆ ไดอ้ ีกหลำยชนดิคือ AIFF,AU,QuickTime,System7 และ Sound Designer IIข้ันตอน การอมิ พอร์ตเสียงขน้ั ท่ี 1 กำรอมิ พอรต์ เสียง1. เลือกคำส่งั File > Import > Import to Library...2. ในกรอบ Import เปดิ หำไฟลเ์ สียงทีต่ ้องกำร (หมำยเลข 1)3. คลิกที่ชือ่ ไฟล์นั้น (หมำยเลข 2)4. คลิก Open (หมำยเลข 3)3. ไฟล์เสียงจะถกู นำมำเก็บไว้ในไลบรำรีโดยมี ไอคอนเป็นรูปลำโพง

4. ทเี่ ฟรมทตี่ ้องกำรแทรกเสยี ง (ตำมภำพคือเฟรมท่ี 10) ให้กด F6 เพื่อแทรกคีย์เฟรม5. เลือกเพลงทจี่ ะให้เรม่ิ เล่นทีเ่ ฟรมท่ี 10 โดยเลือกชือ่ เพลงท่ีช่อง Sound ในหน้ำต่ำง Properties(หมำยเลข 4) และเลือกแบบ Stream (หมำยเลข 5)6. กำหนดช่วงเวลำในกำรเล่น เชน่ ตอ้ งกำรเล่นเพลงไปถึงเฟรมท่ี 40 ให้คลิกท่ี 40 แล้วกด F6เพลงจะเล่นจำกเฟรมท่ี 10 - 407. หำกต้องกำรใส่ effect ให้กับเสยี ง สำมำรถใส่ไดจ้ ำกหนำ้ ต่ำง properties ที่ชอ่ ง Effectซ่ึงมีให้เลือกหลำยแบบ (หมำยเลข 8)

การจัดการเกีย่ วกับเสยี งกำรลบเสียงออกจำกเฟรม กรณีที่แทรกเสียงในเฟรมแล้วดังภำพ (เสียงเลน่ ทเี่ ฟรมที่ 1-40)เมือ่ ตอ้ งกำรลบเสียงออก ทำไดโ้ ดย1. คลกิ ท่ีเฟรมใดเฟรมหนง่ึ ในระหว่ำงเฟรมท่ี 1-402. ที่หน้ำตำ่ ง Properties ชอ่ ง Sound ใหค้ ลิกเลือกเป็น Noneกำรลบเสียงออกจำก Movie กรณีที่เมือ่ นำไฟลเ์ สียงเข้ำมำใน Movie แล้ว และต้องกำรลบออก ทำไดโ้ ดยเปิดหน้ำต่ำง Library แล้วคลิกไฟลเ์ สยี งทีต่ อ้ งกำรลบ (หมำยเลข 1)แล้วคลกิ ถังขยะ (หมำยเลข 2)