ใบความรู้ รายวชิ าโปรแกรมสร้างภาพเคล่อื นไหว (Animation program) รหสั วิชา 20204 – 2111 จุดประสงค์รายวิชา เพ่อื ให้ 2–2–3 1. เข้าใจหลกั การสรา้ งภาพเคลอ่ื นไหว 2. เขา้ ใจเก่ยี วกบั หลักการทางานของโปรแกรมสรา้ งภาพเคลอ่ื นไหว 3. สามารถออกแบบ สร้าง แกไ้ ข และตกแต่งภาพเคลือ่ นไหวโดยใช้โปรแกรมสาเรจ็ รปู 4. มีเจตคติและกจิ นสิ ยั ทด่ี ีในการปฏบิ ัตงิ านคอมพิวเตอร์ด้วยความละเอียดรอบคอบ และถกู ตอ้ ง สมรรถนะรายวิชา 1. แสดงความรู้หลักการสร้างภาพเคล่ือนไหว 2. แสดงความรเู้ ก่ียวกับหลักการทางานของโปรแกรมสร้างภาพเคล่อื นไหว 3. ปฏิบัตกิ ารออกแบบ สร้าง แกไ้ ข และตกแตง่ ภาพเคลื่อนไหวโดยใช้โปรแกรมสาเรจ็ รปู 4. สร้างภาพเคล่ือนแบบไหว 2 มติ ิ ด้วยโปรแกรมสาเรจ็ รปู คาอธบิ ายรายวิชา ศกึ ษาและปฏิบัตเิ ก่ยี วกับหลักการสรา้ งภาพเคลื่อนไหว หลักการทางานของโปรแกรมสร้างภาพเคลื่อนไหว ปฏบิ ตั กิ ารออกแบบ สร้าง แก้ไข ตกแตง่ ภาพเคลอื่ นไหวโดยใชโ้ ปรแกรมสาเร็จรูปและปฏิบัตกิ ารสรา้ งแอนิเมช่นั ภาพเคล่ือนไหวแบบ 2 มติ ิ
โปรแกรม Flash CS6 เบ้อื งต้น ความร้ทู ัว่ ไปเก่ียวกับโปรแกรม Flash โปรแกรม Flash คืออะไร ? โปรแกรม Flash เปน็ ซอฟตแ์ วรท์ ีช่ ่วยในการสร้างสอ่ื มัลตมิ ีเดยี , ภาพเคลอ่ื นไหว (Animation), ภาพกราฟิกท่ีมีความคมชดั เน่อื งจากเป็นกราฟกิ แบบเวค็ เตอร์(Vector), สามารถเลน่ เสียงและวีดิโอ แบบสเตรโิ อได้, สามารถสรา้ งงานให้โตต้ อบกับผูใ้ ช้(Interactive Multimedia) มฟี งั กช์ นั่ สาหรบั การเขียน โปรแกรม (Action Script) และยงั ทางานในลักษณะ CGI โดยเชอื่ มต่อกับการเขยี นโปรแกรมภาษาอน่ื ๆ ได้ มากมาย เช่น ภาษา PHP, JSP, ASP, ASP.NET, C/C++, C#, C#.NET, VB, VB.NET, JAVAและอ่นื ๆ โดยเฉพาะ ขอ้ ดีของโปรแกรม Flash คอื ความสามารถในการบีบอัดไฟล์ใหม้ ขี นาดเลก็ มผี ลทาให้แสดงผลได้อยา่ งรวดเรว็ นอกจากนนั้ ยังแปลงไฟล์ไปอยใู่ นฟอร์แมตอ่ืน ไดห้ ลากหลาย เช่น avi, mov, gif, wav, emf,eps, ai, dxf, bmp, jpg, gif, png เปน็ ตน้ โปรแกรม Flash เรม่ิ มชี ่อื เสียงประมาณปี พ.ศ. 2539 จนถงึ ปัจจุบนั ได้ถูกนามาใชง้ านอยา่ งแพร่หลาย โดยเฉพาะเทคโนโลยเี ว็บ ทาให้การนาเสนอทาได้อยา่ งนา่ สนใจ นอกจากนัน้ โปรแกรม Flash ยังสามารถสร้าง แอพพลิเคชน่ั (Application) เพอื่ ใชท้ างานต่างๆ รองรับการใชง้ านกับอุปกรณ์ที่ เช่อื มต่อกบั ระบบเครอื ข่าย อินเตอรเ์ น็ต และทางานไดก้ ับหลายๆ แฟลตฟอร์ม (Platform) ลักษณะสาคัญของโปรแกรม Adobe Flash cs6 1. สรา้ งชนิ้ งาน Interactiveมีสว่ นตอบสนองกบั ผ้ใู ช้ เช่น ผ้ใู ชส้ ามารถคลิกเลือกเมนูตา่ ง ๆ ได้ นาไป ประยุกตเ์ ป็นส่ือการสอน ( E- Learning ) หนา้ จอควบคุมการทางานตา่ ง ๆ สื่อโฆษณา ( Banner ) บนเว็บไซต์ การ์ตูนแอนิเมชันต่างๆ เป็นต้น 2.สร้างชิน้ งาน Animationจดุ เด่นของการทางานในโปรแกรมแฟลช คอื การสรา้ ง Animation หรือ ภาพเคล่อื นไหว มเี คร่ืองมืออานวยความสะดวก ทาให้โปรแกรม Flash สรา้ งผลงาน Animation ไดง้ า่ ย 3.สรา้ งเว็บไซต์ (Website)โปรแกรม Flash สามารถสร้างเวบ็ ไซต์ไดส้ วยงาม และสร้างลูกเลน่ ต่าง ๆ ได้ งา่ ยมจี ดุ อ่อนคือ เว็บไซต์ที่สร้างด้วยโปรแกรม Flash แก้ไขข้อมูลไดย้ าก และขนาดของไฟล์เว็บไซต์ค่อนข้างใหญ่ 4.สรา้ งเกมส์ (GAME)แฟลชมเี คร่ืองมือชว่ ยสรา้ งองคป์ ระกอบตา่ ง ๆ ให้เกมส์มีความสวยงาม มีเครื่องมือ สาหรับสรา้ งคาสงั่ ควบคุมการเล่นเกมส์ อกี ทัง้ ไฟลเ์ กมส์ท่สี ร้างออกมามีขนาดเล็ก ทาให้อัพโหลดสเู่ ว็บไซต์ได้อยา่ ง รวดเร็ว การเปิดใชง้ านโปรแกรม Adobe Flash CS6 เข้าส่โู ปรแกรม Flash CS6 เมอ่ื เปดิ โปรแกรมคร้งั แรก โดยคลิกเมาสท์ ป่ี ุ่ม Start แล้วเลอื กคาสง่ All Programs->Adobe>Adobe Flash CS6 Professional จะปรากฎหนา้ ตา่ ง ให้เราเลอื กใช้งานโปรแกรม Flash CS6 ดงั น้ี
หนา้ ต่างเริ่มการทางาน
สว่ นประกอบของโปรแกรม Adobe Flash cs6
1. ปุ่มแสดงหรือซอ่ น Timeline 9. ปุ่มสรา้ งโฟลเ์ ดอรเ์ ลเยอร์ 2. เลเยอร์ เฟรมจะต้องวางบนเลเยอร 10.ปมุ่ ลบเลเยอร์ 3. ปุ่มซ่อนและแสดงข้อมูลบนเลเยอร์ 11. ปุ่มเซ็นเตอรเ์ ฟรม 4. ปุ่มอนญุ าตใหแ้ กไ้ ขและป้องการแก้ไข 12. ปมุ่ โอเนยี น สกิน ข้อมลู บนเลเยอร์ 13. ปมุ่ โอเนียน สกินแบบโครงร่าง 5. เพลย์เฮดหัวอ่านเฟรมแตล่ ะชอ่ ง 14. ปุ่มแก้ไขเฟรมหลายเฟรมพร้อมกัน 6. หมายเลขประจาเฟรม 15. บอกตาแหนง่ หมายเลขเฟรมในขณะทางาน 7. เฟรม เปรียบเหมือนชอ่ งเก็บเหตุการณ์ของมูฟว่ี 16. บอกความเรว็ การแสดงกี่เฟรมต่อวนิ าที 8. ปุ่มสร้างเลเยอร์ใหม่ 17. เวลาทใ่ี ชใ้ นการมูฟว่ี เมนบู าร์ (Menu Bar) แถบเมนูแสดงรายการคาสงั่ ตา่ งๆ ของโปรแกรมทงั้ หมด ไดแ้ ก่ การสร้างช้ินงาน การสรา้ งมูฟว่ี รวมไปถงึ การต้งั คา่ ต่าง ทูลบอ๊ กซ์ (Toolbox) แสดงป่มุ เครือ่ งมือเปน็ สว่ นรวบรวมเครอ่ื งมือชนิดตา่ ง ๆ ในการสร้าง ปรับแตง่ และแก้ไขช้ินงาน ที่อยใู่ น Movie โดยแบง่ เป็น 4 กลุม่ ย่อยคือ กล่มุ เครื่องมือ กลุ่มมุมมอง กลุ่มกาหนดสี และกลมุ่ ออบชน่ั ของเคร่ืองมือ
Timeline หนา้ ต่างแสดงเส้นควบคุมเวลาสาหรับการนาเสนอผลงาน ประกอบด้วยส่วนทางานเก่ยี วกบั Layer และ Timeline เราแบ่งไทมไลน์เป็น 2 ส่วนใหญๆ่ ได้แก่ 1. ส่วนแสดงเลเยอร์ (Layer) ซง่ึ แตล่ ะเลเยอรเ์ ปรียบเหมอื นแผนใสทส่ี ามารถวางภาพหรอื ออบเจ็กต์ได้ โดย แตล่ ะเลเยอรน์ ้ันแยกเปน็ อสิ ระต่อกนั แตป่ ระกอบกนั เปน็ ชันงานเดยี ว (เราจะกล่าวถงึ เร่ืองเลเยอรเ์ พ่ิมเติม ภายหลงั ) 2. สว่ นเฟรม (Frame) ท่ีแสดงชอ่ งเฟรมตา่ งๆ ซ่ึงทางานเหมือนกับเฟรมที่ประกอบกันเป็นภาพยนตรโ์ ดยเมื่อ มีการนาเฟรมเหล่านมี้ าแสดง อยา่ งต่อเนอ่ื งกจ็ ะทาใหเ้ กิดภาพเคล่ือนไหว ทง้ั นี้ Frame จะแสดงผล ทลี ะเฟรม โดย จะมหี วั อ่าน (Playhead) ท่เี ปน็ ส้นสแี ดงคอยบอกตาแหนง่ ว่างกาลังทางานอยู่ที่เฟรมใด เราสามารถเปิด/ปิดไทมไลนน์ ไ้ี ด้โดยคาส่งั View > Thmeline ให้มเี ครอื่ งหมายถกู อย่หู น้าคาวา่ Timeline เพอื่ เปิดไทมไลน์ และใชค้ าสั่ง View > Timeline อกี คร้ังยกเลกิ เครอ่ื งหมายถูกเพ่ือปิดไทมไลนซ์ ่งึ เราอาจเปรยี บการทางานของไทมไลน์เหมือนกับมว่ น ฟิลม์ ในขณะทส่ี เตจคือส่วนท่ีแสดงแตล่ ะเฟรม ในมว้ นฟลิ มน์ นั้ ตามลาดับท่ีกาหนดไว้ เราสามารถแบ่งไฟลช์ ้นิ งานที่สร้างเป็นส่วนย่อยๆ ท่ีเรยี กวา่ ฉากหรือซนี (Scene) โดยในโดยในมฟู วี่ หนง่ึ ๆ จะประกอบดว้ ยซนี หรือหลายซนี ก็ได้ เนอ่ื งจากจะทางานได้ทลี ะซนี น้ันจงึ ต้องเลือกซีนทจ่ี าทางานด้ยโดย คลิกที่เมนู Window > Other Panels > Scene หรอื เลือกใชป้ ุ่ม การแทรกซนี สามารถแทรกได้ โดยเลือกทีเ่ มนูคาส่ัง Inserts > Scene1 สเตจ (Stage) และพ้ืนท่ีทางาน ประกอบด้วยพื้นท่ีวา่ งสาหรับวางวตั ถุแบบชั่วคราว และพื้นทขี่ องเวที (Stage)
พนื้ ทส่ี ีขาวบรเิ วณกลางจอคือ สเตจ เป็นพน้ื ท่ีใชจ้ ัดวางออบเจ็กตต์ ่าง ๆ ทต่ี ้องการแสดงใหเ้ ห็น ในช้นิ งาน ส่วนพืน้ ที่สีเทาด้านนอกบรเิ วณสขี าวคือ Pasteboard เปน็ บรเิ วณท่สี ามารถนาออบเจ็กต์ ตา่ ง ๆ มาวาง พักไวห้ รอื วางซอ่ นไว้ได้เพราะบรเิ วณนจ้ี ะไม่แสดงผลเวลาทเ่ี รา Export Movie เปน็ ไฟล์ .SWF เราสามารถเปิด/ปดิ พ้นื ทกี่ ารทางานโดยสั่ง View > Work Area ใหม้ เี คร่อื งถูกหน้าคาวา่ Work Area เพื่อปิดพืน้ ที่การทางาน (หรือจะกดคยี ล์ ดั <Ctrl>+<Shift>+<W> ก็ได)้ พาเนล พาเนลคือหน้าต่างทรี วบรวมเคร่ืองมือต่างๆ สาหรับใชใ้ นการปรบั แต่งออบเจก็ ต์ ซ่ึงใน Flash ไดม้ ีการ จดั พาเนลตา่ งๆ ไว้อย่างเป็นหมวดหมู่ตามหนา้ ท่ีของมนั ใหเ้ ราเรยี กใช้ได้ พาเนลสาคญั ที่ควรรูจ้ ักดังนี้ Property Inspector Property Inspector เป็นพาเนลทใี่ ชแ้ สดงคุณสมบัติต่าง ๆ ของออบเจก็ ต์ทเี่ ราคลิกเลือก ซงึ่ เราสามารถ ปรับแต่งคณุ สมบตั ิห้ ล่านไ้ี ด้ ทงั้ นี้รายละเอียดที่ Property Inspector จะเปล่ยี นไปตามออบเจ็กตท์ เี่ ลือก โดย สามารถเยกเปิดใช้งาน Property Inspector ดว้ ยคาส่งั Window > Properties >Properties หรอื กดคยี ล์ ดั <Ctrl+F3>
พาเนล Color พาเนล Colorเป็นพาเนลที่เลอื กใช้สแี ละผสมสตี ามท่ีต้องการ ซ่งึ จะนาไปใช้ปรบั แต่งสใี ห้กบั ทั้งภาพวาด และตวั อักษรได้อยา่ งง่ายดาย โดยมใี ห้เลือกถึง 2 แทบ็ ด้วยกนั คอื Color Mixer ( ใช้ผสมสเี องตามต้องการ) และ Color Swatches (ใชเ้ ลือกสจี ากจานสีตามท่โี ปรแกรมกาหนดมาให้) โดยเราสามารถเรียกเปิดใชง้ าน พาเนล Color ด้วยคาส่ัง Window > Color Mixer พาเนล Library พาเนล Library หน้าต่างควบคุมเก่ียวกับชุดวตั ถุของโปรแกรม ไดแ้ ก่ Symbols, Buttons, Movies การนารูปภาพมาใชง้ านในโปรแกรม Flash โปรแกรม Flash สามารถรองรบั การทางานเก่ยี วกับรปู ภาพท้ังแบบบิตแมพ (Bitmap) และ ภาพ เวคเตอร์ (vector) รูปแบบภาพบติ แมพ (Bitmap) เช่น JPG, GIF, BMP, PNG, TIFF, PCT, PSD,PIC รูปแบบภาพ เวคเตอร์ (vector) เช่น WMF, EMF, AI, EPS, DX F, SGI, PNTG, QTIF แบบท่ี 1 Import to Stage เปน็ การวางภาพไว้บน stage หรอื Scene ทกี่ าลงั เปิดอยู่ ขั้นที่ 1 คลิกเมนู File -> Import > Import to Stage...
ขัน้ ท่ี 2 คลกิ เลือกไฟล์ภาพที่ต้องการ จากแหลง่ ภาพ แล้วคลิก Open ขั้นที่ 3 ภาพจะถกู นาเขา้ และวางบน stage หรอื Scene ทกี่ าลังเปดิ อยู่ แบบท่ี 2 Import to Library เปน็ การนาภาพเข้ามาเกบ็ ไวใ้ น Library ในรปู แบบซิมโบล เมื่อต้องการนามาใชจ้ ึงหยิบจากLibrary มาวางท่ี Stage
ขนั้ ท่ี 1 คลกิ เมนู File -> Import > Import to Library... ขั้นที่ 2 คลิกเลือกไฟล์ภาพท่ีตอ้ งการ จากแหลง่ ภาพ แล้วคลกิ Open ขน้ั ที่ 3 ภาพจะถูกนาเขา้ และเก็บไว้ใน Library
การปรับแต่งภาพบิตแมพ (bitmap) ภาพบิตแมพ (bitmap) ทน่ี าเข้ามาในโปรแกรมนั้น สามารถปรับแต่งคณุ สมบตั ิของภาพให้มคี ุณภาพ เชน่ การปรับภาพให้นุ่มเพื่อลดรอยหยัก การกาหนดระดบั การบีบอดั ข้อมูล ข้ันตอนการปรบั แต่ง ขน้ั ที่ 1 ที่หนา้ ต่าง Library (เปิดได้โดย กด F11 หรือ คลิกเมนู Window > Library) คลิกชือ่ ภาพที่ต้องการปรับแต่ง และคลิกสญั ลักษณ์ Properties ข้ันท่ี 2 ปรบั แตง่ คา่ ตา่ งๆ ทีห่ นา้ ตา่ ง Bitmap Properties
รายละเอียดการ ปรับแต่ง duck คอื ชอ่ื ของไฟลภ์ าพ สามารถแกไ้ ขเปลีย่ นชอื่ ได้ ถ้าคลิกเลอื ก Allow smoothing จะทาใหภ้ าพมคี วามน่มุ ข้ึน ลดรอยหยักบริเวณรอยต่อของสี ถ้าไมเ่ ลือก Use document default quality จะทาใหส้ ามารถกาหนดคุณภาพของภาพได้ โดยเตมิ ตัวเลข 1-100 ซง่ึ สูงสดุ คือ 100 หมายถึงคุณภาพ เหมอื นต้นฉบบั คอื ไมบ่ ีบอดั เลย (คา่ ตัวเลขนอ้ ย ภาพจะไม่คมชดั แต่ขนาดไฟล์จะเล็ก) การแปลงภาพบิตแมพ (bitmap) เปน็ ภาพเวคเตอร์ (vector) การแปลงภาพบิตแมพ (bitmap) เป็นภาพเวคเตอร์ (vector) จะชว่ ยใหส้ ามารถแก้ไข ดดั แปลง ภาพที่ เป็นเวคเตอร์ ทาไดง้ า่ ย และทาให้ขนาดของไฟล์มีขนาดเล็กและสามารถลบภาพต้นฉบับออกจาก Library ได้ โดย ไม่มีผลกบั ภาพเวคเตอร์ที่แปลงแลว้ ขั้นตอนการแปลง ขัน้ ที่ 1 คลิกเลือกภาพบติ แมปบน stage ขั้นท่ี 2 คลิกเมนู Modify > Bitmap > Trace Bitmap...
ข้ันท่ี 3 คลิกเมนู Modify > Bitmap > Trace Bitmap... กรณีปรับค่าตามตวั อย่าง ภาพที่ 3 จะได้ดังภาพ หากตอ้ งการภาพที่มีความละเอียด ที่ใกล้เคยี งกับต้นฉบบั ค่าตัวเลขจะตอ้ งปรับให้นอ้ ยท่สี ดุ ดงั ภาพ และ จะได้ผลดงั ภาพขวามือพร้อมจะนาไปใช้งานตอ่ ไป หมายเหตุ : การปรับค่าตัวเลขเพ่ือให้ภาพใกลเ้ คยี งกับต้นฉบบั จะทาให้ความจุของไฟล์มีขนาดมากข้ึน การวาดภาพและการลงสี การสร้างวัตถุ (Object) ดว้ ยเครื่องมือ Line Tool Line Tool คอื เคร่ืองมอื สาหรบั วาดเส้นตรง โดยเราสามารถกาหนดสี ความหนา และลวดลาย ต่างๆโดย กาหนดได้ทหี่ น้าต่าง properties ขั้นตอนการสรา้ ง ดงั นี้ ข้ันที่ 1 คลิกเลือกเครอ่ื งมือท่ี Tool Box ดังภาพ
ขั้นที่ 2 กาหนดลักษณะของเสน้ ท่ีหนา้ ตา่ ง Properties กรณหี นา้ ต่างถูกปดิ เปิดไดโ้ ดยคลกิ Window > Properties > Properties ดงั ภาพ กาหนดลักษณะของเสน้ ตามต้องการ (ตาแหนง่ ด้านลา่ งจอภาพ) ข้นั ท่ี 3 ใช้เมาสล์ ากเสน้ ปรับขนาด เปล่ยี นสี ตามต้องการ
การสรา้ งวตั ถดุ ้วย Pen Tool Pen Tool เปน็ เครื่องมอื ที่ใช้สาหรบั วาดเส้น ตรง และเส้นโคง้ แบบเทยี่ งตรง หรอื ที่เรียกกนั วา่ พาธ (path) ซง่ึ หากลากครบรอบจะมีการใส่ Fill ใหอ้ ัตโนมตั ิ นอกจากน้ียงั เพิ่มหรือลบจดุ บนเสน้ โคง้ ได้อกี ด้วย Tips : การกด <Shift> ชว่ ยใหล้ ากเส้นมุม 45 องศางา่ ยข้ึน ขนั้ ตอนการใช้เคร่ืองมือ ขั้นท่ี 1 คลิกเลือกเคร่ืองมือที่ Tool Box ขน้ั ท่ี 2 กาหนดสเี สน้ และสพี ้ืน ดงั ภาพ ขั้นท่ี 3 คลิกเมาส์ที่ stage พร้อมท้ังดึง หรอื ดดั แฮนเดลิ จนกว่าเส้นจะบรรจบที่จดุ เร่มิ ต้น หมายเหตุ : เมื่อลากเส้นบรรจบเสน้ เร่มิ ต้น โปรแกรมจะเทสีเสน้ และสีพ้ืนให้อตั โนมัติ
การสร้างวตั ถุดว้ ย Oval Tool การวาดรูปดว้ ย Oval Tool (เคร่อื งมือวาดวงกลม-วงร)ี มขี ั้นตอนดงั นี้ 1. เลือก Oval Tool จากทูลบอ็ กซ์ 2. กาหนดคุณสมบตั ิของ stroke และ fill บน property inspector ตามตอ้ งการ 3. คลิกลากเมาส์บนสเตจในแนวทะแยงตาม ขนาดท่ีตอ้ งการ ถ้าตอ้ งการวงกลมใหก้ ดคยี ์ Shift ค้างไว้ ขณะทล่ี ากเมาส์ ข้ันท่ี 1 คลิกเลือกเครื่องมือที่ Tool Box ขน้ั ที่ 2 กาหนดคุณสมบัตขิ อง stroke และ fill บน Properties ตามต้องการ ข้ันท่ี 3 คลิกลากเมาส์บนสเตจในแนวทะแยง ตามขนาดทต่ี ้องการ ถ้าตอ้ งการวงกลมให้กดคยี ์ Shift คา้ งไวใ้ น ขณะทล่ี ากเมาส์
การสรา้ งวตั ถุด้วย Ractangle Tool เคร่อื งมือ Rectangle Tool (เครอื่ งมอื วาดรูปสี่เหลย่ี ม)เป็นเครื่องมือสาหรบั วาด สีเ่ หลีย่ ม ซงึ่ มี ส่วนประกอบเป็นเส้นรอบรปู และสพี นื้ เชน่ เดยี วกบั วงรี/วงกลม นอกจากนั้นเครอื่ งมอื น้ยี ังมี modifier สาหรบั ปรับมุมใหม้ ีลักษณะโค้งมนได้อกี ด้วย ข้นั ท่ี 1 คลิกเลอื กเคร่ืองมือท่ี Tool Box ขน้ั ที่ 2 กาหนดความโค้งมนของสี่เหลี่ยมได้โดยคลิกท่ี สัญลักษณ์ ดงั ภาพ ข้นั ท่ี 3 คลิกลากเมาสบ์ นสเตจในแนวทางทะแยงตาม ขนาดท่ตี อ้ งการถ้าตอ้ งการส่ีเหลีย่ มจัตุรัสใหก้ ดคยี ์ Shift ค้างไว้ขณะทล่ี ากเมาส์
การสรา้ งวัตถุดว้ ย Pencil Tool เครอ่ื งมือ Pencil มีไวส้ าหรบั ลากเสน้ Line โดยอาศัยเส้นทางท่ี เมาส์ผ่าน เหมาะสาหรบั งานทีเ่ ป็น Freehand หรอื มอี ุปกรณ์เสริม Option (ตัวเลอื ก) - Straighten - ลายเส้นท่อี อกมาจะถูกดัดให้ตรง - Smooth - ลายเสน้ ท่อี อกมาจะถูกดัดใหเ้ ป็นสว่ นโคง้ - Ink – ลายเส้นทอี่ อกมาจะถูกดัดให้สว่ นโคง้ แต่จะพยายามรักษาเสน้ เดิมให้ มากทีส่ ดุ ขั้นท่ี 1 คลกิ เลอื กเคร่ืองมือที่ Tool Box ขนั้ ท่ี 2 กาหนดลกั ษณะของเส้นทีห่ นา้ ตา่ ง Options ข้ันที่ 3 ใช้เมาส์ลากเสน้ ตามตอ้ งการ
การสรา้ งวัตถุ (Object) ดว้ ยเครื่องมือ Brush Tool เคร่อื งมือ Brush มไี ว้สาหรบั ลากเสน้ วาดเป็นรปู ร่างตา่ งๆ โดยอาศัยเสน้ ทางที่เมาส์ผา่ น เหมาะสาหรับงานที่ เป็น Freehand หรือมอี ปุ กรณ์เสริม ขั้นท่ี 1 คลิกเลอื กเคร่ืองมือท่ี Tool Box ขน้ั ท่ี 2 กาหนดขนาดและลักษณะของเสน้ ท่ีหน้าต่าง Options ขน้ั ท่ี 3 เลือกสีจากสขี องพ้ืนหลงั แล้วใช้เมาส์ลากเสน้ ตามต้องการ
การจัดการ Object การเลือกออ็ บเจกต์ หากเราตอ้ งการปรับแต่งรายละเอยี ดของออบเจก็ ตบ์ นสเตจ เราจะตอ้ งเลือกออบเจก็ ต์นัน้ ๆเสียก่อนโดยใน Flash มีเครอ่ื งมือหลากหลายในการเลอื กออบเจ็กตไ์ ด้อยา่ งสะดวก ซง่ึ เราจะเลือกเฉพาะบางส่วนของออบเจ็กต์ เลอื กออบเจ็กตเ์ ดยี วหรอื เลือกเปน็ กลมุ่ ออบเจก็ ต์ก็ได้ สาหรบั การเลอื กหนง่ึ ออบเจก็ ต์นัน้ เราสามารถเลือกเฉพาะเส้นขอบของอ็อบเจกต์ เลือกเฉพาะพน้ื ทีอ่ อบเจ็กต์ ภายใน หรอื เลอื กทง้ั อ็อบเจกตก์ ็ได้ โดยเม่ือเลอื กอ็อบเจกต์แล้ว ท่ี Property Inspector จะแสดงคณุ สมบตั ขิ องอ็ อบเจกต์ท่ีเลือกให้เราปรบั แต่งได้ สาหรับเครอ่ื งมือทใ่ี ชเ้ ลือกออบเจ็กตใ์ น Flash ไดแ้ ก่ Selection Tool และ Lasso Tool ซึ่งจะ กลา่ วถงึ ตอ่ ไป
เครอ่ื งมือ Selection Tool Selection Tool เป็นเคร่ืองมือที่ใชส้ าหรับเลอื กอ็อบเจกต์และสามารถปรบั แต่งรปู ทรงของอ็อบเจกตไ์ ด้ ด้วย โดยใหเ้ ราคลิก ท่ที ลบู อ็ กซ์หรือกดคยี ล์ ัด V(ถ้ากาลงั ใช้เครื่องมือนื่ อย่แู ละตอ้ งการสลับมาใช้ Selection Tool เพยี งชว่ั คราวกใ็ ห้กดคยี ์ <Ctrl>ค้างไว้แล้วปลอ่ ยคียน์ ้เี มื่อใช้เสรจ็ ) สาหรับการเลือกอ็อบเจกต์มีหลายวธิ ี ดังน้ี เลอื กเฉพาะเสน้ ขอบของอ็อบเจกต์ ใหค้ ลกิ เลือกท่เี สน้ ขอบของอ็อบเจกต์(หากเราลองลากเมาส์ออกมา ออบเจ็กตส์ ่วนท่เี ป็นเสน้ ขอบจะถูกลาก ออกมาด้วย แสดงว่าเส้นขอบถกู แยกออกจากสพี น้ื ของอ็อบเจกต)์ เลือกเฉพาะสีพน้ื ของอ็อบเจกต์ ใหค้ ลกิ ท่ีพืน้ ภาพ(หากเราลองลากเมาส์ออกมาดู จะเห็นออบเจก็ ต์ส่วนที่เป็นสีพื้นถูกลากออกมาด้วย แสดง ว่าสีพนื้ ถกู แยกออกจากเสน้ ขอบของอ็อบเจกต)์ เลอื กทง้ั เส้นขอบและสพี ืน้ ของอ็อบเจกต์ ใหล้ ากเมาส์ครอบคลุมบริเวณออบเจ็กต์ทั้งหมดหรือดับเบิลคลกิ ทสี่ ีพน้ื กไ็ ด้ (หากเราใช้เมาสล์ ากอ็อบเจกต์ ที่เลอื ก จะเห็นว่าทั้งสพี นื้ ของอ็อบเจกตแ์ ละเสน้ ขอบถูกลากออกมาดว้ ย)
เลอื กเฉพาะบางส่วนของอ็อบเจกต์ ให้ลากเมาสค์ รอบออบเจก็ ตเ์ ฉพาะสว่ นที่ต้องการเลือกเทา่ นัน้ (หากเราใช้เมาส์ลากอ็อบเจกต์ทีเ่ ลอื ก จะ เห็นวา่ อ็อบเจกตสว่ นท่เี ลอื กถูกลากออกมาด้วย) เลอื กหลายอ็อบเจกต์ ใหล้ ากเมาส์ครอบคลุมบริเวณออ็ บเจกตท์ ้ังหมดทต่ี ้องการเลือก เลอื กอ็อบเจกตอ์ ิสระดว้ ย Lasso Tool เราใช้ Lasso Tool เลือกอ็อบเจกตไ์ ด้อย่างอสิ ระ โดยคลิกท่ี ในทลูบ็อกซ์ ตวั ช้เี มาสจ์ ะปรากฏเป็น คลิก ลากเมาสก์ าหนดพนื้ ที่ท่ตี อ้ งการเลอื กไดอ้ ยา่ งอิสระ แลว้ ปลอ่ ยเมาส์ ถา้ เราไม่ได้ปดิ บรเิ วณท่เี ลอื ก Flash จะปดิ พนื้ ท่ีโดยการลากเส้นตรงระหวา่ งจุดเริ่มต้นและจุดสดุ ท้ายใหโ้ ดยอัตโนมตั ิ จากนน้ั เราสามารถย้ายสว่ นทถี่ ูกเลอื กได้ โดยการคลกิ ที่ Selection Tool และเลื่อนตัวชเ่ี มาส์ไปอยู่เหนือ บริเวณพน้ื ท่ีที่ต้องการ สังเกตตัวช้ีเมาสจ์ ะเปล่ยี นเปน็ รูป ใหค้ ลกิ แล้วลากพืน้ ท่นี ้นั ไปยังตาแหน่งใหม่(หรือจะลบ ออกก็ได้โดยการกดคยี ์ Delete บนคยี ์บอร์ดก็ได้) การใช้เครือ่ งมือกะระยะ วางซ้อน และจัดเรียงอ็อบเจกตจ์ านวนมาก จากภาพ เป็นการลากออ็ บเจกตส์ ี่เหลย่ี มลงมาวางให้อยใู่ นแนวเดียวกนั กับวงกลม โดยใหฐ้ านของภาพท้งั 2 ตรงกัน Flash จะแสดงเสน้ ประขึน้ มาเพื่อใหเ้ ราวางสี่เหลี่ยมได้พอดีในตาแหนง่ ท่ฐี านของออบเจ็กตท์ ้งั 2 ตรงกัน
เม่ือออบเจ็กต์มจี านวนมากข้นึ ใน Flash มีเคร่อื งมอื ต่างๆ สาหรบั ใช้ในการจดั การอ็อบเจกต์ ดงั น้ี ไม้บรรทดั (Rulers) เป็นเครอื่ งมือวัดขนาดทีอ่ ยู่บริเวณขอบของสเตจ เส้นกริด (Guides) เป็นเส้นตารางทีใ่ ชอ้ ้างอิงตาแหนง่ ต่าง ๆ เสน้ ไกด์ (Guid) เปน็ เส้นท่ีชว่ ยในการกะระยะและจดั วางตาแหนง่
การวางซ้อนอ็อบเจกตแ์ ละการจัดลาดบั ออ็ บเจกต์ (Arrange) ในการสรา้ งชน้ิ งานเราอาจต้องการจัดลาดับใหก้ บั อ็อบเจกตว์ า่ ออ็ บเจกต์ไหนอยู่ก่อนหรืออยหู่ ลัง ใหเ้ รา เลือกอ็อบเจกต์ที่ต้องการ และเลอื กคาสง่ั ดังนี้ Modify->Arrange->Bring to Front เลื่อนอ็อบเจกต์ขนึ้ มาใหอ้ ยูบ่ นสุด Modify->Arrange->Bring Forward เลอ่ื นอ็อบเจกตข์ นึ้ มา1 ช้ัน Modify->Arrange->Send Backward เลือ่ นอ็อบเจกต์ลงมา 2 ช้ัน Modify->Arrange->Send to Back เลื่อนออ็ บเจกต์ไปหลังสดุ ของออ็ บเจกตท์ ั้งหมด การจัดเรียงอ็อบเจกต์ พาเนลALIGN มปี ุ่มคาสั่งในการจดั เรยี งอ็อบเจกต์ใหเ้ ปน็ ระเบยี บ เชน่ ใหจ้ ดั อยู่ในแนวเดียวกัน ชดิ ซ้าย ชิดขวา เรียงหนา้ กระดานหรือใหม้ ีระยะหา่ งเท่ากนั โดยเลือกWindow->Alignเพอ่ื เปดิ พาเนล ALIGNจากน้นั ให้
คลกิ เลือกอ็อบเจกตต์ า่ งๆทตี่ ้องการจัดเรยี ง(เราจะต้องทาการเลอื กมากกวา่ 1 อ็อบเจกต์)และคลิกเลือกวธิ กี าร จดั เรียงท่พี าเนล ALIGN จดั เรียงตามแนว (Align) เปน็ การจดั อ็อบเจกต์ให้เรยี งชิดซ้าย กลางและชิดขวา จัดเรยี งให้ชิดซา้ ย จัดเรียงกง่ึ กลางตามแนวต้งั จดั เรียงให้ชิดขวา จดั เรยี งใหช้ ิดด้านบน จัดเรยี งก่งึ กลางตามแนวนอน จัดเรยี งให้ชดิ ด้านลา่ ง จดั เรียงตามระยะห่าง (Distribute) เปน็ การจัดอ็อบเจกตใ์ ห้อยู่ในระยะท่ีเสมอกัน โดยคานวณจากวัตถุท้งั หมด จัดระยะหา่ งโดยเทยี บกบั ขอบบนของอ็อบเจกต จัดระยะห่างโดยเทยี บกับก่ึงกลางในแนวนอนของอ็อบเจกต จัดระยะห่างโดยเทยี บกับขอบล่างของอ็อบเจกต จดั ระยะหา่ งโดยเทียบกบั ขอบซ้ายของอ็อบเจกต จัดระยะห่างโดยเทยี บกับก่ึงกลางในแนวต้งั ของอ็อบเจกต จดั ระยะหา่ งโดยเทยี บกับขอบขวาของวัตถอุ ็อบเจกต จดั ขนาดวตั ถุ (Match Size) เปน็ การจดั อ็อบเจกตใ์ หม้ ขี นาดเทา่ กับวัตถทุ ม่ี ีขนาดใหญ่ทส่ี ดุ ในแนวนอนหรือแนวต้งั จัดด้านกว้างให้มขี นาดเท่ากัน จดั ดา้ นสงู ให้มขี นาดเทา่ กัน จดั ดา้ นกว้างและดา้ นสูงให้มีขนาดเทา่ กัน
จดั ชอ่ งว่างระหว่างวัตถุ (Space) เป็นการจัดระยะขอบช่องวา่ งระหว่างวัตถุให้เท่ากัน จดั ช่องวา่ งระหว่างวตั ถุ หา่ งเทา่ กนั ในแนวนอน จัดช่องวา่ งระหวา่ งวัตถุ หา่ งเท่ากันในแนวตัง้ จดั ตาแหน่งด้วย To Stage เปน็ การจดั ตาแหนง่ ของวัตถุอา้ งองิ กับสเตจ จดั ตาแหนง่ โดยเทียบกับพน้ื ท่ใี นสเตจ การจัดกลุ่มและแยกกลุ่มออ็ บเจกต์ เม่อื มอี อบเจ็กต์จานวนมากบนสเตจ แทนที่เราจะต้องเสียเวลาคลกิ เลือกออ็ บเจกตทลี ะชนิ้ เราสามารถ รวมกล่มุ อ็อบเจกต์เพ่ือลดความยุ่งยากได้ โดยเมื่อเราคลิกที่กลุม่ อ็อบเจกต์และทาการเคล่อื นยา้ ยตาแหน่งเท่ากับ เป็นการเคล่ือนยา้ ยทุกออบเจ็กต์ในกลมุ่ พร้อมกัน การรวมกลมุ่ อ็อบเจกต์ ทาไดโ้ ดยการเลือกอ็อบเจกต์ตา่ งๆจากนัน้ เลือกคาสั่ง Modify->Group หรอื กดคยี ์ ลัด Ctrl + G เพอ่ื รวมกลุม่ อ็อบเจกต์เปน็ กล่มุ เดยี วกัน สังเกตจากเส้นทีล่ ้อมรอบวตั ถทุ งั้ หมด โดยเม่อื เราคลิก เคลอ่ื นย้ายออบเจ็กต์ กจ็ ะเป็นการย้ายออบเจก็ ต์ทั้งกลุม่ เมอ่ื ใดท่ีเราต้องการแยกกลุม่ อ็อบเจกต์เหลา่ น้นั ก็ใหค้ ลกิ ทกี่ ลุม่ อ็อบเจกต์แล้วเลือกคาส่งั Modify->Ungroup หรอื กดคยี ล์ ดั Ctrl + Shift + G การแกไ้ ขอ็อบเจกตภ์ ายในกลมุ่ เราสามารถแกไ้ ขอ็อบเจกต์ทร่ี วมกลุ่มได้ โดยการใช้ Selection Tool คลิกเลือกกลมุ่ อ็อบเจกต์แล้วเลอื ก คาส่งั Edit->Edit Selectenหรือดับเบลิ คลิกท่ีกล่มุ อ็อบเจกตก์ ็ได้ จากนัน้ ให้ทาการแก้ไขออบเจก็ ต์ทีต่ อ้ งการ เสรจ็ แล้วใหเ้ ลือกที่คาสัง่ Edit->Edit All หรือดบั เบิลคลิกที่พ้นื ท่ีว่างบนสเตจเพื่อกลบั มายังหน้าจอการทางานปกติ
การเคล่ือนย้าย คดั ลอก และการลบอ็อบเจกต์ หลังจากท่ีไดค้ ลิกเลือกอ็อบเจกตแ์ ลว้ เราสามารถคดั ลอกหรือลบออ็ บเจกต์ได้ ดงั น้ี การคดั ลอกออ็ บเจกต์ เลอื กคาสง่ั Edit->Dupplicate(หรือกดคยี ล์ ัด Ctrl + D จะเปน็ การคัดลอกอ็อบเจกต์วาง ซอ้ นออบเจ็กต์เดมิ แตย่ งั อยู่ในเลเยอรเ์ ดียวกนั หรือกดคีย์ Ctrl หรือ Alt ค้างไว้ขณะใช้ Selection Tool และ ลากอ็อบเจกต์กจ็ ะเปน็ การคัดลอกอ็อบเจกต์เช่นกนั ) การสร้างข้อความ ให้คลิกที่ Text Tool ในทูลบอ็ กซ์ จากนั้นกาหนดประเภทและรูปแบบข้อความใน Property Inspector (ในตวั อย่างเราเลือกแบบสแตติก) คลกิ เมาสบ์ นสเตจจะปรากฏกรอบข้อความใหเ้ ราพิมพ์ขอ้ ความท่ตี ้องการได้ ซึ่ง กรอบข้อความจะขยายตามขนาดข้อความ และเมอื่ เรากดคีย์ Enter จะเป็นการขน้ึ บรรทดั ใหม่
1. คลิกเมาส์ท่ี Text Tool 2. กาหนดประเภทรปู แบบข้อความ 3. คลิกเมาส์ท่ีสเตจแล้วพิมพ์ขอ้ ความท่ีต้องการ กาหนดรปู แบบของข้อความ เมอ่ื เราใช้เคร่อื งมอื Text Tool และคลกิ เลอื กข้อความ จะมคี ณุ สมบตั ิต่างๆ เก่ยี วกบั ข้อความที่เราปรบั แต่งได้ใน Property Inspector โดยมีรายละเอียด ดงั นี้ Symbol และ Instance
การสร้างซิมโบลประเภทกราฟิก การสรา้ งซิมโบลประเภทกราฟกิ จะมีข้นั ตอนการสรา้ งทงี่ ่ายและมคี วามซบั ซอ้ นนอ้ ยท่สี ุด เน่อื งจาก สามารถนาภาพนิ่งหรือทาการสรา้ งออบเจ็กตข์ นึ้ มาทาเปน็ ซิมโบลกราฟิกในรปู แบบและขั้นตอนทงี่ ่ายทสี่ ุด 1. คลกิ เมนู Insert แล้วเลอื กคาส่ัง New Symbol เพื่อทาการสร้างซิมโบลใหม่ 2. พมิ พต์ ้ังช่ือซิมโบลในช่อง Name 3. คลกิ เลือก Graphic ซมิ โบลท่ีไดจ้ ะอยู่ในรูปแบบกราฟกิ 4. คลิกปุ่ม OK เพือ่ ยืนยันคาส่งั 5. สรา้ งออบเจก็ ต์ทต่ี อ้ งการสร้างเป็นซมิ โบลประเภทกราฟิก 6. คลิกท่ี Scene1 เพื่อกลับสหู่ น้าจอการทางาน
การสร้างซิมโบลประเภทปุ่ม ซิมโบลประเภทป่มุ เหมาะสาหรับงานทต่ี ้องการให้มีการตอบสนองติดต่อกับผใู้ ช้งาน อีกยังสามารถ ดัดแปลงพฒั นาสรา้ งปุ่มสกรอลล์บาร์ ปุ่มแบบป็อปอปั เมนู จนกระท่งั ถึงปมุ่ ทใ่ี ช้ในการควบคมุ วัตถใุ ห้เคลอ่ื นท่ีไปใน ทศิ ทางตา่ งๆ สาหรับการสร้างปุ่มพน้ื ฐานท่ีใชค้ ลิกคาส่งั ให้กลายเปน็ ซมิ โบลสามารถทาได้ดังน้ี 1. คลกิ เมนู Insert แลว้ เลือกคาสัง่ New Symbol เพ่ือสร้างซิมโบลใหม่ 2. พิมพต์ งั้ ชือ่ ซิมโบลในช่อง Name 3. คลิกเลอื ก Button ซิมโบลทไ่ี ด้จะอยูใ่ นสถานะทาหน้าท่เี ป็นปมุ่ 4. คลกิ ปุ่ม OK เพื่อยนื ยนั คาสัง่ จากน้นั จะปรากฏสถานะของปุ่มข้นึ มา 4 สถานะ 5. ท่ีเฟรม UP ให้ทาการสรา้ งปุ่มท่ตี อ้ งการเมือ่ อยู่ในสถานะปกติ ยงั ไม่มีการคลิกเมาสใ์ ดๆ 6. คลกิ เมนู Insert แลว้ เลอื กคาสั่ง Keyframe จากน้นั จะปรากฏป่มุ ที่อยใู่ นสถานะ UP ข้นึ มา
7. ท่เี ฟรม Over ใหท้ าการตกแตง่ แก้ไขป่มุ ในสถานะท่ีมีการนาเมาสไ์ ปวางไวบ้ นปุ่ม เชน่ ทาการเปลย่ี นแปลงสี เปล่ยี นแปลง รปู ร่าง เปล่ียนแปลงขนาดของปมุ่ เปน็ ต้น 8. คลกิ เมนู Insert เลอื ก Timeline แลว้ เลือกคาสงั่ Keyframe จากนัน้ จะปรากฏปมุ่ ท่ีอยู่ในสถานะ Over ขึ้นมา 9. ที่เฟรม Down ให้ทาการตกแตง่ แก้ไขป่มุ ในสถานะท่ีมีการนาเมาสไ์ ปคลกิ ทีป่ ุ่ม 10. คลิกเมนู Insert เลือก Timeline แล้วเลอื กคาส่งั Keyframe จากนนั้ จะปรากฏปมุ่ ที่อยใู่ นสถานะ Down ข้นึ มา
11. ที่เฟรม Hit ให้ทาการสร้างออบเจก็ ต์ใดๆ คลมุ พ้นื ท่บี ริเวณท่ตี ้องการให้มีการแสดงผลของปุ่มคาสงั่ 12. คลกิ ท่ี Scene1 เพ่ือกลับสู่หน้าจอการทางานปกติ 13. คลกิ เมนู Window เลิกคาส่งั Library ใหป้ รากฏเคร่ืองหมายถูก เพ่ือเปดิ พาเนลไลบรารี 14. ดรากสเ์ มาสล์ ากปุ่มซิมโบลท่สี รา้ งข้ึนมาไวท้ พ่ี นื้ งาน 15. คลิกเมนู Control เลกิ คาสั่ง Test Movie > Test เพื่อทดสอบการทางานของปุ่ม
การแก้ไข Symbol ให้เราทาการ ดับเบลิ้ คลกิ ท่ี Instance ของ Symbol น้ัน ๆ บน Stage หรอื ทาการดับเบ้ิลคลิก ท่ไี อคอน ของ Symbol น้นั บนพาเลท Library เราอาจเรียกการเขา้ ไปแก้ไข Symbol ในลกั ษณะ อย่างนีว้ ่า Edit In Pace ซึ่งเราสามารถทาการแก้ไข หรอื จะทาการเพิ่ม Layer ปรบั แต่งค่าต่าง ๆ ไดเ้ หมอื นกบั ออบเจ็กตห์ นึ่ง ใน Stageโดยเราอาจกล่าวได้วา่ Symbol ก็เหมอื นกับการนา ไฟล์ Flash มาซ้อน ไฟล์ Flash อีกทีหน่ึงเพราะใน Symbol จะมี Time line และ Layer เปน็ ของตัวเอง การแก้ไข Symbol โปรแกรมจะทาการปรับปรงุ Instance ทง้ั หมด ของ Symbol นนั้ ทมี่ ีการใชใ้ นมฟู ว่ใี ห้โดยอตั โนมัตสามารถ เปล่ยี น ได้ 2 วิธดี งั นี้ 1. คลกิ เลือก Symbol ใน Library คลกิ ขวาทชี่ ื่อ Symbol แล้ว เลือกคาสงั่ Edit จากเมนลู ดั หรือ ดับเบ้ลิ คลิกที่ Symbol 2. ดบั เบล้ิ คลกิ ท่ีอ็อบเจค็ บนสเตจ การแปลงวัตถุ (object) ให้เป็นซมิ โบล (symbol) การแปลงจากสว่ นประกอบที่เลือกไว้ หรอื วัตถุทมี่ ีอยู่ ให้เป็นซมิ โบล ข้ันตอนท่ี 1 เขียนภาพตามต้องการที่ stage
ข้นั ตอนที่ 2 คลิกเลอื กภาพ (หรือถ้าภาพอยู่หา่ งกนั ใหล้ ากคลมุ ท้งั หมด) แลว้ คลกิ ขวา และคลกิ ทเี่ มนู Convert to Symbol ขน้ั ตอนท่ี 3 ตั้งชอ่ื ซมิ โบล แล้วเลอื กชนดิ ของซมิ โบลท่ีต้องการ หมายเหตุ.... ดูซิมโบลทส่ี รา้ งไดจ้ ากหน้าตา่ ง Library ซึง่ เปดิ หน้าต่างไดจ้ าก เมนู Window > Library หรอื กด F11 ซงึ่ จะพบหน้าต่างดังตวั อย่าง ในทานองเดยี วกัน สามารถสร้างซิมโบลแบบ Button และ Graphic ได้ดงั ขน้ั ตอนท่ี 1-3 เพียงแต่เลือก ชนดิ ที่ขน้ั ตอนที่ 3 หากทาท้ัง 3 ซมิ โบล จะได้ดังภาพ
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 > Test จะได้ไฟล์ Movie เปน็ .swf รปู แบบที่ 2. การสรา้ งภาพเคล่ือนไหวแบบยา้ ยตาแหนง่ วตั ถุ ข้ันท่ี 1 สร้างวตั ถขุ ึ้นมา 1 ชิ้น จะวาดเป็นภาพธรรมดาหรือ ทาเปน็ ซมิ โบลก็ได้ บนเฟรมท่ี 1 ข้นั ท่ี 2 คลกิ ขวาที่เฟรมท่ี 2 หรือ กด ปุ่ม F6 เพ่ือเพิ่มคยี เ์ ฟรม (Keyframe)
ขน้ั ที่ 3 ใชล้ ูกศรสดี า (Selection Tool) คลิกแล้วย้ายตาแหน่งวัตถุขยับจากตาแหน่งเดิมเล็กน้อย ข้ันท่ี 4 ทาซ้าข้ันท่ี 2 คอื คลิกขวาทเ่ี ฟรมถัดไปคือเฟรมท่ี 3 หรอื กดปมุ่ F6 เพ่ือเพ่ิมคียเ์ ฟรม จากนัน้ ใช้ลูกศรสี ดา (Selection Tool) คลกิ แลว้ ย้ายตาแหนง่ วตั ถุอีกเล็กน้อย ขัน้ ที่ 5 เพมิ่ คยี เ์ ฟรมต่อไปเรื่อยๆ และ ขยบั วตั ถุ ไปเรื่อยจนกระท่ังได้ภาพเคล่ือนไหวตามต้องการจากน้ัน ตรวจสอบการเคลื่อนไหวโดยการคลิกทหี่ ัวอา่ น(Play Head) แล้วลากเมา้ สซ์ ้าย-ขวา
ขั้นที่ 6 กด Ctrl + Enter หรือ คลกิ ที่เมนู Control > Test Movie เพื่อชมตัวอย่าง จะได้ไฟล์ Movie เปน็ .swf รปู แบบที่ 3. การสรา้ งภาพเคล่อื นไหวแบบยอ่ -ขยายวตั ถุ การเปล่ียนขนาดวัตถใุ ห้ใหญข่ ้ึนหรือเลก็ ลงเป็นอกี รปู แบบหนึ่งของการสรา้ งภาพเคลื่อนไหวตวั อย่างเชน่ การทาใหว้ ัตถุเคล่อื นที่จากตาแหน่งท่ีอยู่ไกลมาใกลเ้ ป็นต้น ข้นั ที่ 1 วาดวัตถุขน้ึ มา 1 ช้ิน ดงั รูป ข้นั ท่ี 2 ใชล้ กู ศรสดี า (Selection Tool) ลากครอบวตั ถุท้ังหมด
ข้ันที่ 3 คลกิ เลือกเคร่ืองมือ Free Transform Control จะมีกรอบสีดาข้นึ รอบวตั ถุ ขั้นที่ 4 นาเม้าส์มาชท้ี ี่กรอบส่ีเหลยี่ มสดี าเลก็ ๆท่มี ุมของวตั ถุแล้วยอ่ ยใหเ้ ป็นภาพขนาดเลก็ ขัน้ ที่ 5 คลกิ ขวาที่เฟรมที่ 2 เลอื ก Insert Keyframeหรอื กดปมุ่ F6 เพิม่ คีย์เฟรม แล้วขยายภาพให้ใหญ่ขึน้ เลก็ นอ้ ย
ขัน้ ท่ี 6 กดปุ่ม F6 เพิ่มคีย์เฟรมแล้วขยายภาพขน้ึ อกี เลก็ น้อย ขนั้ ที่ 7 ทาซ้าขนั้ ตอนที่ 6 จนได้ขนาดภาพท่ตี ้องการอาจจะตอ้ งเพมิ่ หลายๆคีย์เฟรมกไ็ ด้ การสรา้ งภาพเคลื่อนไหวแบบ Shape Tween Shape Tween คือการสรา้ งภาพเคล่ือนไหวให้วัตถุเปลย่ี นรปู รา่ งจากรปู หนึ่งเปน็ อกี รปู หนงึ่ เชน่ จากรปู สีเ่ หลย่ี มเป็นรปู วงกลม หรือ จากรูปเป็นข้อความ เปน็ ต้น ข้ันที่ 1 คลกิ ทีเ่ ฟรมท่ี 1 แลว้ วาดรปู วัตถุข้ึนมาหนึ่งรปู
ขน้ั ที่ 2 คลิกขวาท่ีเฟรมท่ี 1 (สาคญั มากเพราะถ้าไม่คลิกตวั เลือกจะไม่แสดงขึ้นในหน้าต่างคาสัง่ ) เลือกคาสง่ั Create Shape Teen ข้ันที่ 3 คลิกขวาที่เฟรมที่ 20 แลว้ เลอื กคาสั่ง Insert Keyframe ขั้นที่ 4 คลิกเฟรมท่ี 20 แลว้ กดปุ่ม Delete ลบวัตถเุ ดิมออกตอนน้บี นไทม์ไลนจ์ ะมีแถบเสน้ ประสีเขียว ขั้นที่ 5 วาดรปู ทต่ี อ้ งการใหเ้ ปลย่ี นลงไปในเฟรมที่ 20
ขน้ั ที่ 6 กดปุ่ม Ctrl+Enter เพ่ือทดสอบการเปลย่ี นแปลงจะเห็นภาพค่อยๆเปล่ียนจากรูปหนึ่งเปน็ อีกรูปหนึ่ง การสรา้ งภาพเคล่อื นไหวแบบ Motion Tween การสรา้ งภาพเคลอ่ื นไหวแบบน้ี เป็นการเคลื่อนท่ีของเนอ้ื หาจากจุดหน่งึ ไปยังอกี จดุ หนง่ึ หรอื เปลย่ี น คุณสมบตั ิจากแบบหนึง่ ไปเป็นอกี แบบหน่ึง เหมาะสาหรับการทาภาพเคลื่อนไหว แบบต่อเนือ่ งสม่าเสมอ เชน่ เมฆ ลอย พดั ลมกาลังหมุน ยานบิน รถกาลังแล่น เปน็ ตน้ การสร้างภาพเคลื่อนไหวแบบลอยในแนวเสน้ ตรง ขน้ั ที่ 1 คลกิ เลือกคีย์เฟรมจดุ เริ่มตน้ ข้นั ท่ี 2 สร้างวัตถุ หรือเนอ้ื หาตามตอ้ งการ ขั้นท่ี 3 คลิกขวาที่คียเ์ ฟรม คลกิ เลอื กเมนู Create Motion Tween
ขนั้ ท่ี 4 กาหนดระยะหา่ งจากจุดแรกตามต้องการ เช่น หา่ ง 30 เฟรม คลิกที่เฟรมท่ี 30 แลว้ เพิม่ คยี เ์ ฟรม โดยกด F6 หรอื คลิกเมนู Insert > Timeline > Keyframe ขน้ั ที่ 5 จับวัตถทุ ี่ stage แลว้ ปรับเปลีย่ นคณุ ลักษณะ เชน่ ย้ายตาแหน่ง ย่อ-ขยาย เปลี่ยนสี หรืออ่ืนๆ ตามต้องการ ขัน้ ท่ี 6 ทดสอบ Movie โดยกด Ctrl+ Enter หรือ คลกิ เมนู Control > Test Movie จะได้ไฟล์ Movie เป็น .swf ภาพเคล่อื นไหวแบบหมนุ ไปพรอ้ มกับเคลื่อนท่ี ขน้ั ท่ี 1 คลกิ เลือกคยี เ์ ฟรมแรกหรอื เฟรมท่ีอยรู่ ะหวา่ งคยี ์เฟรมทงั้ สองของการเคลื่อนไหว
ขน้ั ที่ 2 กาหนดค่าตา่ งๆ ทห่ี น้าตาง Properties Rotate : CW หมายถึงลักษณะการหมนุ แบบตามเข็มนาฬกิ า CCW หมายถึงการหมนุ ทวนเขม็ นาฬิกา 1 times หมายถงึ จานวนรอบของการหมนุ ภายใน 15 เฟรม ข้ันท่ี 3 ทดสอบการเคล่ือนทีโ่ ดยกดปุ่ม Ctrl+Enter สรา้ งภาพเคลอ่ื นไหวแบบย่อ-ขยาย ข้นั ตอนท่ี 1 คลกิ ท่เี ฟรมที่ 1 แล้ววาดรูปทตี่ อ้ งการลงไป ขน้ั ท่ี 2 คลกิ ขวาที่เฟรมที่ 1 แลว้ เลอื กคาส่งั Create Motion Tween
ข้ันท่ี 3 คลกิ ขวาเฟรมที่ 20 เลือกคาสัง่ Insert Keyframe แลว้ ขยายรูปใหใ้ หญ่ข้นึ ดว้ ย Free Transform Tool ขน้ั ที่ 4 กดปมุ่ Ctrl+Enter เพ่อื ดูตวั อยา่ งภาพเคลื่อนไหว จะเหน็ ภาพค่อยใหญ่ข้นึ สรา้ งการเคลื่อนไหวแบบปรับให้ค่อยชัดหรือจางลง (Alpha) Alpha เปน็ การปรับค่าความโปร่งของวตั ถุถ้าค่า alpha (อลั ฟ่า) มาก เราจะมองวตั ถนุ น้ั ชดั เจน ถา้ คา่ alpha น้อยลงเราจะมองเหน็ ภาพวัตถนุ ้นั เลอื นๆ ข้ันตอนท่ี 1 คลิกทเ่ี ฟรมที่ 1 แลว้ วาดรูปที่ตอ้ งการลงไป ขั้นที่ 2 คลิกขวาท่ีเฟรมท่ี 1 แล้วเลือกคาสัง่ Create Motion Tween
ข้นั ที่ 3 คลกิ ขวาเฟรมที่ 25 เลือกคาส่งั Insert Keyframe แล้วขยายรูปให้ใหญ่ขนึ้ ด้วย Free Transform Tool (ไม่ขยายก็ได)้ ขั้นท่ี 4 คลิกทวี่ ัตถุเพื่อให้ตวั เลือกปรากฏข้ึนท่ี Properties > COLOR EFFECT เลอื ก Style : Alpha ขั้นท่ี 5 หลงั จากนั้นเลือก Alpha แล้วปรับคา่ Alpha เปน็ ค่าท่ีน้อยลง จะได้ภาพทจ่ี างลงมองทะลุพื้นหลงั ได้
ขน้ั ท่ี 6 กดปุ่ม Ctrl+Enter เพือ่ ดตู วั อยา่ งภาพเคล่ือนไหว จะเห็นภาพค่อยใหญ่ข้นึ และจางหายไปแต่ตาแหน่งไม่ เปล่ยี นเนือ่ งจากเราไม่ได้ย้ายตาแหน่งของวัตถุ การสรา้ งภาพเคลอื่ นไหวแบบ Mask Layer การ Mask คอื การบงั ส่วนที่ไมต่ ้องการให้เหน็ ไว้ และโชวเ์ ฉพาะสว่ นทตี่ อ้ งการ ลักษณะเดียวกบั การส่องไฟ ไปท่ีวัตถุ ในความมดื ซึ่งจะเห็นวัตถเุ ฉพาะบรเิ วณท่ีไฟส่องเท่านัน้ ข้นั ที่ 1 เขียนวัตถุหรอื นาภาพทตี่ อ้ งการท่ี เฟรมแรกของLayer 1 ข้นั ที่ 2 เพมิ่ Layer โดยคลกิ หมายเลข 1 แลว้ เขียนรปู ทรงสว่ นท่ีจะไมบ่ งั (ส่วนทเี่ ป็นไฟส่อง) ตามตัวอยา่ งเปน็ รูปทรงวงกลม โดยเขียนท่ี Layer 2 (หมายเลข 2)
ข้นั ท่ี 3 คลิกขวา Insert frame ท่เี ฟรมท่ี 60 บนเลเยอร์ 1 ข้นั ที่ 4 คลิกขวา ท่เี ฟรมท่ี 1 ของ เลเยอร์ 2 แลว้ เลอื กคาส่ัง Create Motion Tween
ข้นั ที่ 5 คลกิ ขวาทเ่ี ฟรมท่ี 60 ของเลเยอร์ 2 เลือกคาสั่ง Insert Keyframe ข้นั ที่ 6 ณ เฟรมที่ 40 ใช้ลกู ศรสดี าจับรปู วงกลมเลอ่ื นไปตาแหนง่ อื่นหรือขยายรปู ให้มขี นาดใหญข่ ้นึ ตามตอ้ งการ