2901-2011 การสร้างภาพเคลื่อนไหวเบื้องต้น

Adobe9F4lash CS6 บทท่ี 4 การสร้างและเพ่มิ กลเม็ดใหต้ ัวอักษร Flash CS6 2. เลือกเคร่ืองมือ Text Tool เพื่อพิมพ์ข้อความดังรูปภาพ โดยเลือกรูปแบบอักษร สี และ ขนาดตามความต้องการ 2 3. คลิกขวาทข่ี อ้ ความ เลือก Break Apart ตัวอักษรจะแยกออกจากกัน Break Apart ตวั อกั ษรจะแยกออกจากกนั 3 4. จากนัน้ คลิกขวาท่ีตวั อักษร เลอื ก Distribute to Layer เพอ่ื สรา้ ง Layer ให้แตล่ ะตวั อกั ษร แตล่ ะตวั อักษรจะแยกกนั ไปคนละเลเยอร์ 4 4

การสร้างภาพเคลอื่ นไหวเบื้องตน้ Adobe Fla9s5h CS6 5. คลกิ เฟรมท่ี 50 โดยเลือกทุกเลเยอร์ แล้วคลิกขวา เลือก Insert Keyframe 5 6. ทีเ่ ลเยอรต์ วั อกั ษร S คลิกเฟรมที่ 15 แล้วกดปมุ่ F6 เพ่อื Insert Keyframe 6 7. ทำ�เหมือนขอ้ 6 โดยเปลี่ยนเปน็ เลเยอร์ตัวอกั ษรอื่น ๆ ดังนี้ เลเยอร์ตัว T คลิกเฟรมที่ 25 แลว้ กดปุ่ม F6 เพอ่ื Insert Keyframe เลเยอร์ตัว A คลิกเฟรมที่ 35 แล้วกดปมุ่ F6 เพอื่ Insert Keyframe เลเยอร์ตวั R คลกิ เฟรมท่ี 45 แล้วกดปุ่ม F6 เพือ่ Insert Keyframe 8. คลกิ เฟรมท่ี 1 ของเลเยอร์ตวั S แลว้ เลอื่ นตวั อักษร S ออกด้านนอกสเตจ 8

Adobe9F6lash CS6 บทที่ 4 การสร้างและเพิม่ กลเม็ดใหต้ ัวอักษร Flash CS6 9. จากนั้นคลกิ ขวา เลือก Create Classic Tween เพอ่ื สรา้ งการเคล่อื นไหว 9 10. ท�ำ เหมือนข้อ 8 และ 9 กบั เลเยอรต์ วั อกั ษร T, A และ R เลเยอรต์ ัว T ให้เลอื่ นขน้ึ ด้านบน 10 เลเยอรต์ ัว A ใหเ้ ลอื่ นลงด้านล่าง เลเยอรต์ ัว R ใหเ้ ลอื่ นไปทางขวาของหน้าจอ 11. เมอ่ื ท�ำ ครบทุกเลเยอรต์ ัวอักษรแลว้ กด Ctrl + Enter เพือ่ ทดสอบผลลพั ธท์ ไ่ี ด้

Adobe Flash CS6 5บทที่ เตมิ แตง่ แตม้ สภี าพ ดว้ ยสสี นั ใหส้ วยงาม จุดประสงค์เชงิ พฤติกรรม (Behavioral Objectives) หลงั จากศกึ ษาจบบทเรียนนี้แลว้ นักศกึ ษาจะมีความสามารถดงั น้ี 1. แสดงความรู้เกย่ี วกับพนื้ ฐานของสไี ด้ 2. ปฏิบัตกิ ารเลือกสี เส้นและสพี ืน้ ได้ 3. บอกวธิ กี ารเลอื กใชส้ ีจากพาเนล Color Swatches ได้ 4. ปฏบิ ตั ิการเลือกใช้สีจากพาเนล Color Mixer ได้ 5. เลือกใช้สเี กรเดยี นทไ์ ด้ 6. ปฏิบัตกิ ารตามขนั้ ตอนการก�ำ หนดความโปร่งใสของสไี ด้ 7. อธิบายการก�ำ หนดสีดว้ ยภาพบิตแมปได้ 8. ปฏิบัติการเปลยี่ นสแี ละคณุ สมบตั ิของเสน้ ด้วยเครอ่ื งมือ Ink Bottle ได้ 9. ปฏบิ ตั ติ ามข้นั ตอนการเติมสพี ้นื ด้วยเครื่องมอื Paint Bucket Tool ได้ 10. บอกวธิ ีการเลือกสีมาใช้ดว้ ยเครื่องมอื Eyedropped Tool ได้

Adobe9F8lash CS6 บทท่ี 5 เตมิ แตง่ แต้มสีภาพด้วยสีสนั ให้สวยงาม 5บทท่ี เตมิ แตง่ แตม้ สภี าพ ดว้ ยสสี นั ใหส้ วยงาม การใชส้ เี ปน็ สง่ิ ส�ำ คญั ในการออกแบบ เพราะสที แ่ี สดงออกมานน้ั จะชว่ ยเพม่ิ ความนา่ สนใจใหก้ บั ภาพ และสามารถใช้สื่อความหมาย อารมณ์ และความรู้สึกของผู้ออกแบบได้เป็นอย่างดี โปรแกรม Adobe Flash CS6 ไดเ้ ตรยี มเครื่องมอื เก่ียวกบั สหี ลาย ๆ อย่างไว้ให้เลือกใชอ้ ยา่ งสะดวก รวมไปถึงการดดั แปลง และสร้างสีใหม่ ๆ ขน้ึ เองตามต้องการได้ ความร้พู ้นื ฐานเก่ยี วกับสี รปู แบบการแทนค่าสที เ่ี ป็นมาตรฐานซ่ึงใช้กนั โดยท่วั ไปมี 4 ระบบ ไดแ้ ก่ RGB, HSB, CMYK และ Lab แต่ละระบบกจ็ ะมกี ารแทนค่าสีที่แตกต่างกนั ออกไป - โมเดล RGB (Red Green Blue) เป็นรูปแบบการแทนค่าสีจากการผสมแสงสีหลัก 3 สีเข้าด้วยกัน คือ แดง (Red), เขียว (Green) และน�้ำเงิน (Blue) ท�ำให้เกิดสีต่าง ๆ เป็นจ�ำนวนมาก ขึ้นอยู่กับสัดส่วนความเข้มของสีหลัก แต่ละสีท่ีมีค่าตั้งแต่ 0 จนถึง 225 เม่ือสีหลักทั้ง 3 มีความเข้มสูงสุดมาผสมกันจนได้สีขาว ซ่ึงลักษณะนี้ เรยี กว่า “การผสมแบบบวก” (Additive Color System) ระบบสีแบบโมเดลนจี้ ะไดร้ ะบบสีแบบ 8 บิต ส่วนใหญใ่ ชอ้ ปุ กรณเ์ ก่ียวกบั แสง เชน่ จอภาพและ กลอ้ งดิจิทัล จุดสีแต่ละพิกเซลบนหน้าจอเกิดจากการสรา้ งจดุ สยี ่อย ๆ ของแสงสหี ลกั ทั้ง 3 สี เพอื่ ใหผ้ สม กนั เปน็ พกิ เซลสตี า่ ง ๆ

การสร้างภาพเคลื่อนไหวเบ้ืองต้น Adobe Fla9s9h CS6 Red Magenta Yellow Blue Cyan Green - โมเดล HSB (Hue Saturation Brightness) เกิดจากการแปลงโมเดลสี RGB ให้อยู่ในรูปท่ีสอดคล้องกับการรับรู้สีของคน เป็นการปรับ ความสดใส ความสว่างของสีจนท�ำให้เกิดสีต่าง ๆ แทนการผสมสี โมเดลน้ีจะแบ่งองค์ประกอบของสี ออกเป็น 3 สว่ นได้แก่ Hue คือ สีบริสุทธ์ิแต่ละสีที่ได้จากสเปคตรัมของแสง ค่าของสีจะก�ำหนดเป็นองศา ตามต�ำแหน่งของวงกลมสี (Color Wheel) Saturation คือ ความสดหรอื ความบริสทุ ธขิ์ องสี มคี ่าเปน็ เปอรเ์ ซน็ ตต์ ั้งแต่ 0–100% โดยค่า 0% จะไดส้ เี ทาหรอื ขาว และคา่ 100% จะได้สสี ดบริสุทธทิ์ ีส่ ุด Brightness คือ ความสว่าง มีคา่ เปน็ เปอร์เซน็ ต์โดยค่า 0% ไดส้ ดี �ำ ส่วนคา่ 100% ได้ สสี วา่ งทส่ี ุดตามทีก่ �ำหนด ๆ - โมเดล CMYK (Cyan Magenta Yellow Black) เป็นรูปแบบท่ีเกิดจากการพิมพ์แบบแยกสี โดยภาพถูกแยกเป็นแม่พิมพ์ของสีหลัก 4 สี คือ ฟ้า (Cyan), ม่วงแดง (Magenta), เหลือง (Yellow), และด�ำ (Black) เม่ือพิมพ์สีซ้อนกันจะได้ภาพ บนหน้ากระดาษตามต้นฉบับ ค่าของสีในโมเดลน้ีจะอยู่ในรูปเปอร์เซ็นต์ของน�้ำหนักหมึกพิมพ์ต้ังแต่ 0–100% ตามหลักแลว้ สหี ลักเพยี ง 3 สี คือ Cyan, Magenta และ Yellow (CMY) กพ็ อ ในการสรา้ งอนื่ ๆ โดยผสมสีท้ัง 3 ที่เข้ม 100% จะได้ผลลัพธ์เป็นสีด�ำ ในลักษณะนี้เรียกว่า “การผสมสีแบบลบ” (Subtractive Color System) เนอ่ื งจากเนื้อสมี กั ไมบ่ รสิ ทุ ธิ์ ท�ำใหเ้ กดิ การปฏบิ ัติต้องเพมิ่ สีด�ำเปน็ สหี ลกั อกี หนง่ึ สี เพ่อื ไดส้ ีผลลพั ธท์ มี่ คี วามอม่ิ ตัว ประหยดั หมกึ พมิ พ์ รวมทั้งได้สีด�ำสนิทจรงิ - โมเดล LAB เป็นสีท่ีถูกก�ำหนดข้ึนโดย CIE ใหเ้ ปน็ มาตรฐานการวดั สที กุ รปู แบบ ครอบคลุมทกุ สใี น RGB และ CMYK และใชไ้ ด้กบั สีที่เกดิ จากอุปกรณท์ ุกอย่างไมว่ ่าจะเปน็ จอคอมพวิ เตอร์ เครือ่ งพมิ พ์ สแกนเนอร์ โดยแบง่ องค์ประกอบของสีออกเปน็ 3 สว่ น ไดแ้ ก่

Adobe10F0lash CS6 บทท่ี 5 เติมแตง่ แต้มสีภาพด้วยสสี นั ใหส้ วยงาม L (Lightness หรอื Luminance) คือ ความสวา่ ง มคี ่าตง้ั แต่ 0 (ใหส้ ีด�ำ) จนถงึ 100 (ให้ สขี าว) A คอื สหี ลกั ทไ่ี ลโ่ ทนจากเขียวไปแดง มีคา่ ตงั้ แต่ -128 (สเี ขยี ว) จนถงึ 127 (สีแดง) B คอื สหี ลกั ทไ่ี ลโ่ ทนจากนำ�้ เงนิ ไปเหลอื ง มคี า่ ตงั้ แต่ -128 (สนี ำ้� เงนิ ) จนถงึ 127 (สเี หลอื ง) การเลอื กสเี สน้ และสีพื้น เลอื กสีจากทูลพาเนล การเลือกใช้สีอาจเลือกก่อนการวาดเพื่อก�ำหนดสีให้ออบเจ็กต์ใหม่ หรือเลือกเพ่ือเปรียบเทียบสี ให้กบั ออบเจก็ ต์ทวี่ าดไวแ้ ลว้ กไ็ ด้ โดยขั้นตอนการเลือกสจี ากเครอื่ งมือบนทลู พาเนล มีดังนี้ 1. ที่ทูลพาเนล ให้คลิกเครี่องมือ Stroke Color เพ่ือเลือกก�ำหนดสีของเส้น หรือคลิก 1 เคร่ืองมือ Fill Color เพอ่ื เลือกก�ำหนดสีของพืน้

การสรา้ งภาพเคลอ่ื นไหวเบ้อื งต้น Adobe Fla1s01h CS6 2. ใชเ้ มาสค์ ลกิ เลือกสจี ากตารางสี แล้วกด นอกจากน้ยี งั สามารถใช้เคร่ืองมืออนื่ ๆ บนตารางสเี พื่อเลอื กหรือปรับแต่งสไี ด้ ดังน้ี - คลกิ ทีป่ ุม่ ถา้ ไม่ต้องการเตมิ สีใด ๆ ใหพ้ ืน้ หรอื เส้น - คลกิ ทปี่ มุ่ ถ้าต้องการเลือกสอี น่ื ๆ นอกเหนอื จากทีม่ ีอย่ใู นตาราง - ปอ้ นตวั เลขในชอ่ ง Alpha เพ่ือก�ำหนดความโปรง่ ใสหรือทบึ ของสี - ถ้าต้องการเลือกสีโดยก�ำหนดเป็นรหัส RGB พิมพ์ค่าลงในช่อง Enter เคร่ืองมืออ่ืน ๆ ส�ำหรบั ก�ำหนดสีบนทูลพาเนล นอกจากเครอ่ื งมอื Stroke Color และ Fill Color แล้ว บนทลู พาเนลยังมเี คร่ืองมอื อีก 3 ตัว ท่ีใช้ในการเลือกสี ดงั นี้ 1. Black and White ปรับสใี ห้กลบั เปน็ ค่าเร่มิ ตน้ (Default) คือ พืน้ เป็นสขี าวและเสน้ เปน็ สดี �ำ 2. No Color เลอื กเพ่ือไม่เติมสีของเสน้ หรอื สีของพนื้ ใด ๆ 3. Swap Colors ท�ำการสลบั สีระหว่างสีเสน้ และสีพืน้

Adobe10F2lash CS6 บทที่ 5 เติมแตง่ แต้มสีภาพดว้ ยสีสนั ให้สวยงาม การเลือกใชส้ ีจากพาเนล Color Swatches พาเนล Color Swatches จะแสดงจานสีให้เราเลือกสีของเส้นและสีของพื้น และจะแสดงสีท่ี เราได้บันทึกเก็บไว้ วิธีการเปดิ พาเนล คลิกค�ำสงั่ Window > Color Swatches การเพิ่มสีในพาเนล Swatches 21 1. คลกิ เพ่อื ก�ำหนดสที ีต่ อ้ งการ 2. คลิกตรงทว่ี ่างบนพาเนล Swatches

การสร้างภาพเคลื่อนไหวเบ้ืองต้น Adobe Fla1s03h CS6 ค�ำส่งั เพ่มิ เตมิ ในเมนูของพาเนล Swatches โดยคลิกท่ปี มุ่ ซึง่ ประกอบดว้ ย - Duplicate Swatch กอ๊ ปปห้ี รอื สรา้ งสใี หมท่ กี่ �ำลงั เลอื กในตารางใหเ้ กดิ เปน็ สเี ดยี วกนั - Delete Swatch ขนึ้ มาอีกช่องหนึ่งท่ีสว่ นท้ายของตารางสี ลบสที ่กี �ำลังเลือกในตารางสี - Add Colors อิมพอร์ตชุดสีจากไฟล์ชุดสีที่มีฟอร์แมต .clr (Flash Color Set), .act (Color Table) หรือไฟล์ภาพเข้ามาต่อท้าย - Replace Colors ตารางสี อิมพอรต์ ชุดสีจากไฟล์ .clr, .act หรือไฟลภ์ าพเข้ามาแทนท่ี สเี ดมิ ในตารางสี - Load Default Colors เรยี กชดุ สีเร่มิ ต้น (Default) ของโปรแกรมกลับมาใช้ - Save Colors บนั ทกึ ชุดสีในตารางสีเพอ่ื น�ำไปใช้กับไฟล์อื่น - Save as Default บันทึกชุดสีในตารางให้เป็นชุดสีเร่ิมต้น (Default) ของ โปรแกรม ซง่ึ จะถกู น�ำไปใชก้ ับไฟลท์ ่ีสรา้ งใหม่ - Clear Colors ลบสีท้ังหมดออกจากตาราง ยกเว้นเพียงสีขาว สีด�ำ และสี - Web 216 เกรเดียนทข์ องสีขาวและด�ำ เรียกใช้ชุดสี Web 216 ส�ำหรับการสร้างเว็บไซต์ข้ึนมา แทนทีช่ ดุ สใี นตาราง - Sort by Color จดั เรียงสใี นตารางใหมโ่ ดยเรยี งตามเนื้อสี (Hue) การเลือกใชส้ เี กรเดียนท์ เกรเดียนท์ (Gradient) เป็นสีท่ีมีการไล่ระดับโทนสีจากสีหน่ึงไปยังอีกสีหน่ึงหรือหลายสีก็ได้ ซึ่งจะท�ำให้ภาพกราฟิกดูมีมิติมากขึ้น สามารถก�ำหนดให้ใช้สีเกรเดียนท์ท่ีเส้นหรือที่พ้ืนของรูปทรงก็ได้ โดยรปู แบบการไล่สีมี 2 แบบ ดังน้ี 1. แบบแนวตรง (Linear) คือ ไล่จากสีหนึ่งไปยังสีอื่นในทิศทางแนวตรงไม่ว่าจะเป็นตาม แนวตั้ง แนวนอน หรือแนวทแยง

Adobe10F4lash CS6 บทที่ 5 เติมแตง่ แต้มสีภาพดว้ ยสีสนั ให้สวยงาม 2. แบบรัศมีวงกลม (Radial) คือ ไล่จากสีหน่ึงไปยังสีอ่ืนโดยเร่ิมจากจุดศูนย์กลางกระจาย ออกในแนววงกลม ไมว่ า่ จดุ ศูนยก์ ลางนนั้ จะอย่ตู รงไหนของวัตถุท่ีไดใ้ ส่สีลงไป การก�ำหนดสีเกรเดยี นท์ ในการเลือกใช้สีเกรเดียนท์จะต้องเลือกจากพาเนล Color และสามารถเปลี่ยนแปลงเฉดสี ของเกรเดียนท์ได้ตามต้องการ 12 3 57 6 4 1. คลกิ เพือ่ เลอื กสเี ส้นหรอื สพี น้ื 2. คลิกเลือกรูปแบบการไลส่ ี Linear หรือ Radial 3. คลกิ แล้วเลอื กรูปแบบการเรียงตอ่ ของสี 4. คลกิ เลือกก�ำหนดค่าสีใหก้ ับจดุ แรก 5. คลกิ เลือกจดุ สีท่ีสองแล้วก�ำหนดคา่ สีใหก้ บั จุดท่สี อง 6. คลกิ เลือกจุดสที ่สี อง 7. คลกิ เลอื กก�ำหนดค่าสีให้กับจดุ ทสี่ อง

การสร้างภาพเคลอ่ื นไหวเบอื้ งต้น Adobe Fla1s05h CS6 ถ้าต้องการเก็บสีเกรเดียนท์ท่ีสร้างนี้ไว้ในพาเนล Color Swatches เพ่ือสะดวกในการเรียกใช้ ภายหลัง ให้คลิกปุ่ม แล้วเลือก Add Swatch จากเมนขู องพาเนล เพ่ิมจุดสี เราสามารถเพิ่มจุดสีได้มากกว่าปกติท่ีเราจะเห็นการไล่สองสีที่เป็นจากสีหน่ึงไปยังอีกสีหนึ่ง ถา้ ตอ้ งการใช้โทนสที ี่มากกว่าสองสีสามารถเพ่มิ จุดสีต่อไปได้ 1. คลิกบนแถบสี 2. ก�ำหนดสีให้กับจุดสใี หม่ 2 1

Adobe10F6lash CS6 บทท่ี 5 เติมแตง่ แต้มสีภาพดว้ ยสีสันให้สวยงาม ลดจดุ สี สามารถท�ำโดยคลิกลากจดุ สีออกจากแถบสเี พื่อลบจุดสอี อก 1. เลือกที่จุดสีท่ีตอ้ งการลบ 2. ลากจุดสีท่ีต้องการลบไปยังนอกพื้นที่เพื่อท�ำการลบ จุดสี 3. เม่ือลากออกจะไดผ้ ลดังรปู 2 1 3 ย้ายต�ำแหนง่ จดุ สี การไล่จุดสีน้ันต�ำแหน่งของจุดสีมีผลต่อลักษณะการไล่โทนสีเกรเดียนท์ ซึ่งเราสามารถย้าย ต�ำแหน่งของจุดสีตา่ ง ๆ โดยคลกิ ลากจดุ สไี ปไวต้ รงมมุ ภาพหรือกลางภาพ 1. เลอื กจดุ สที ี่ตอ้ งการย้ายต�ำแหน่ง 2. ท�ำการเลอ่ื นจุดสีไปทางซา้ ยหรือทางขวา 21

การสรา้ งภาพเคลื่อนไหวเบอ้ื งต้น Adobe Fla1s07h CS6 3. จะไดผ้ ลลัพธ์ดงั ภาพ 3 ปรบั การเรียงต่อของสเี กรเดียนท์ สเี กรเดียนทท์ ง้ั สองแบบ สามารถก�ำหนดรูปแบบการเรยี งตอ่ กนั (Overflow) ของสีแตล่ ะช่วงได้ โดยการเรียงต่อกันน้ี จะปรากฏข้ึนก็ต่อเมื่อมีการปรับทิศทางและการกระจายของสีจนมีขนาดเล็กกว่า ขนาดของออบเจก็ ต์ ลกั ษณะการเรยี งต่อของสีเกรเดยี นทม์ ี 3 รูปแบบ ดงั นี้ Extend ใชช้ ุดสเี ดียวตอ่ หนึง่ ออบเจ็กต์โดยไมม่ กี ารเรยี งต่อใด ๆ Reflect เรียงตอ่ สีแบบสลบั แนวการไลส่ ีแต่ละชดุ จนเต็มออบเจ็กต์ Repeat เรยี งตอ่ สใี นแนวเดิมแตล่ ะชุดจนเตม็ ออบเจ็กต์ วิธกี ารปรับของเกรเดียนท์ 1. คลิกเลือกเคร่ืองมือ Gradient Transform 2. คลิกเลือกวัตถุ 3. คลิกลากจุดควบคมุ ตา่ ง ๆ ซึง่ มรี ปู แบบการปรบั แต่งดังตอ่ ไปนี้ - จุดปรับหมุน - จดุ ปรับการกระจาย - จุดศนู ยก์ ลางสี

Adobe10F8lash CS6 บทที่ 5 เติมแตง่ แตม้ สภี าพด้วยสสี นั ใหส้ วยงาม 1 23 การกำ�หนดความโปรง่ ใสของสี (Alpha) ในชน้ิ งานเราสามารถวางออบเจก็ ตไ์ วใ้ นทตี่ า่ ง ๆ ซง่ึ สามารถวางทบั กนั ได้ ดงั นน้ั ถา้ เราจะใหเ้ หน็ ออบเจ็กตท์ ้ังสองชิ้นทีว่ างทบั กันอยู่น้นั จงึ ไดม้ ีการก�ำหนดความโปร่งใสใหก้ ับออบเจก็ ต์ ซง่ึ จะเหน็ ชดั มาก หรอื นอ้ ยขนึ้ อยกู่ บั ความโปรง่ ใสของสี โดยก�ำหนดจากคา่ Alpha ซง่ึ 100% คอื สที ที่ บึ ทสี่ ดุ และ 0% คอื สที อี่ อ่ นทส่ี ดุ 1. คลกิ เลือกออบเจ็กต์ 2. เลอื กสเี สน้ หรือสพี ื้น 2 3. คลิกลากหรือป้อนค่าความโปรง่ ใส 3 1

การสรา้ งภาพเคลอ่ื นไหวเบอื้ งต้น Adobe Fla1s09h CS6 4. เมอื่ ปรับค่า Alpha = 100% 4 5 5. เมอื่ ปรบั คา่ Alpha = 80% 6. เม่ือปรับคา่ Alpha = 50% 6 7 7. เม่ือปรับคา่ Alpha = 10% การก�ำ หนดสดี ้วยภาพบิตแมป ในการใส่สีน้ันเราสามารถใส่สีเป็นภาพบิตแมปได้นอกจากการใส่สีธรรมดา โดยโปรแกรมจะดึง ภาพทอ่ี ยู่ในไลบรารมี่ าใหเ้ ลอื ก แต่กส็ ามารถน�ำรปู จากภายนอกมาใสใ่ นไลบรารกี่ ่อนได้ 1. คลิกเลอื กออบเจก็ ต์ 2. เลอื กสีเสน้ หรือสพี ื้น 3. เลอื กรปู แบบสีเปน็ Bitmap

Adobe11F0lash CS6 บทท่ี 5 เตมิ แตง่ แต้มสีภาพด้วยสสี ันใหส้ วยงาม 2 13 4. เลือกโฟลเดอร์ทจี่ ัดเก็บไฟล์รปู ภาพ 4 5 6 5. เลือกภาพ 6. คลิกปมุ่ Open จะได้รูปภาพตามท่เี ลอื กไว้

การสรา้ งภาพเคล่ือนไหวเบอื้ งต้น Adobe Fla1s11h CS6 การปรบั แตง่ พื้นบิตแมป หลังจากน�ำภาพบิตแมปมาใช้เป็นสีเส้นหรือพ้ืนของรูปทรงแล้ว ยังสามารถปรับแต่งขนาด ต�ำแหน่ง โดยใช้เครื่องมือ Gradient Transform โดยมจี ดุ ปรบั ดงั นี้

Adobe11F2lash CS6 บทท่ี 5 เตมิ แต่งแต้มสภี าพด้วยสสี นั ใหส้ วยงาม 1. รูปแสดงการย้ายต�ำแหน่งภาพ 1 2 2. รปู แสดงปรับความกวา้ ง 3. รูปแสดงปรบั ความสูง 3 4. รปู แสดงขนาดภาพตามสดั สว่ นเดมิ 4 5. รปู แสดงบิดภาพในแนวนอน 5

การสรา้ งภาพเคล่อื นไหวเบ้ืองตน้ Adobe Fla1s13h CS6 6. รูปแสดงบดิ ภาพแนวตัง้ 6 7. รูปแสดงปรบั หมนุ ภาพ 7 การเปลย่ี นสีและคุณสมบัตขิ องเสน้ ด้วยเครอ่ื งมอื Ink Bottle Tool Ink Bottle Tool เปน็ เครือ่ งมอื ทใ่ี ช้ในการเปลีย่ นคุณสมบตั ขิ องเสน้ (Stroke) นอกจากนี้ยงั ใช้ เติมเสน้ ขอบให้กบั รปู ทรงท่ไี มม่ ีเสน้ ขอบได้ดว้ ย 1. คลกิ ท่ีเครอ่ื งมอื Ink Bottle 2. ก�ำหนดสี ขนาด และลักษณะเส้นตามต้องการ 3. เลือกบนเส้นหรือสีพน้ื ของรูปทรง หรอื คลกิ ทเ่ี สน้ ขอบหากรูปทรงไม่มีสีพนื้ 12 3

Adobe11F4lash CS6 บทที่ 5 เติมแต่งแต้มสีภาพดว้ ยสสี นั ให้สวยงาม การเติมสีพนื้ ด้วยเครื่องมอื Paint Bucket Tool Paint Bucket Tool เป็นเครอ่ื งมือส�ำหรบั เตมิ สพี น้ื (Fill) ใหก้ บั ภาพ ไมว่ ่าบรเิ วณนนั้ จะมสี พี ้ืน เติมอยู่แล้วหรือเป็นพ้ืนที่ว่างท่ีมีเส้นขอบ เราสามารถเลือกท่ีจะเติมได้ทั้งแบบสีเรียบ สีเกรเดียนท์ และ รูปภาพบิตแมป โดยพื้นท่ีท่ีเติมไม่จ�ำเป็นต้องเป็นรูปปิดสมบูรณ์ แต่สามารถก�ำหนดขนาดช่องว่าง บนเสน้ ขอบรูปที่จะยอมให้เติมสไี ด้ 1. คลิกเครอ่ื งมอื Paint Bucket 2. เลือกออปชั่นของเครอ่ื งมือ โดยมีรายละเอยี ดดงั นี้ - Gap Size ที่ Option ของเครือ่ งมอื - Don’t Close Gaps เติมสีเฉพาะรปู ลายเส้นทปี่ ลายบรรจบกันสนิท - Close Small Gaps เติมสีทีช่ อ่ งวา่ งมีขนาดเล็ก - Close Medium Gaps เตมิ สที ่ีช่องวา่ งมขี นาดปานกลาง - Close Large Gaps เติมสีแม้วา่ ช่องว่างจะมขี นาดใหญ่ ถ้าชอ่ งวา่ งใหญม่ ากเกนิ ไป จะไมส่ ามารถเตมิ ได้ 3. ก�ำหนดสพี ้ืนตามตอ้ งการ 4. คลิกดา้ นในรูปทรง 3 1 4 2

การสรา้ งภาพเคล่ือนไหวเบือ้ งตน้ Adobe Fla1s15h CS6 การดดู สีภาพอื่นมาใช้ด้วยเครื่องมือ Eyedropper Tool เม่ือเราได้ท�ำการสร้างชิ้นงานมาแล้ว ถ้าต้องการเปลี่ยนสีให้กับชิ้นงานจะต้องมีการเลือกสีสัน ใหเ้ หมาะสม ซึ่งจะมวี ธิ ีการในการเลอื กสีสันให้กับช้ินงาน ดงั นี้ 1. คลิกเคร่อื งมอื Eyedropper 2. เลอื กบนสีเส้นหรอื สีพ้นื บนออบเจ็กตเ์ พ่ือเป็นต้นแบบของสี 3. คลิกบนออบเจก็ ตท์ ่ีตอ้ งการน�ำสไี ปใชจ้ นครบ 12 การเลือกสีให้เหมาะสมตามตอ้ งการ ในการท�ำชิ้นงานน้ันเม่ือท�ำเสร็จแล้ว จากนั้นเราต้องการปรับเปล่ียนสีให้กับช้ินงานก็สามารถ ท�ำไดเ้ ช่นกนั โดยมวี ิธกี ารดงั ต่อไปน้ี การสลับสีระหวา่ ง Stroke กบั Fill หลังจากคลิกเครื่องมือสร้างชิ้นงานในกล่องเคร่ืองมือ แล้วคลิกปุ่ม Swap Colors 1 ครั้ง สังเกตว่าสีที่อยู่ในกรอบ Stroke Color จะสลบั กบั Fill Color แล้ว พรอ้ มส�ำหรบั การใชง้ านตอ่ ไป

Adobe11F6lash CS6 บทท่ี 5 เตมิ แตง่ แต้มสภี าพดว้ ยสีสนั ใหส้ วยงาม การยกเลิกการเตมิ สีใหก้ บั บางส่วนของช้นิ งาน ในบางคร้ังการสร้างช้ินงานก็จ�ำเป็นจะต้องใช้งานเฉพาะส่วนของเส้นขอบรูป (Stroke) หรือ ตอ้ งการเพยี งแคส่ รา้ งชิ้นงานไมใ่ ห้มขี อบ แต่ตอ้ งการใหม้ ีการเตมิ สเี ฉพาะในสว่ นของ Fill กส็ ามารถท�ำได้ ดว้ ยการคลกิ ปุ่ม No Color การเลือกใชง้ านเฉพาะสีขาวกบั สดี �ำ ในบางคร้ังการสร้างช้ินงานก็อาจจะไม่ต้องการสีสันที่มากมายนัก เราสามารถก�ำหนดให้ใช้สี เพยี ง 2 สีก็ได้ คือ สขี าวกบั สีด�ำ ซ่งึ จะสามารถท�ำได้ดว้ ยการคลิกปมุ่ Black and White สรปุ ท้ายบท โมเดลสี คอื ระบบการแทนคา่ สที เี่ ปน็ มาตรฐาน โดย RGB คอื การแสดงสขี องเครอ่ื งคอมพวิ เตอร์ และ HSB คือ การแสดงสีของสายตามนุษย์ โดยในโปรแกรม Flash สามารถใช้ได้ท้ังการผสมสี จากหลายสี และการใชเ้ พยี งสีเดียว หรอื น�ำรูปภาพมาเป็นลวดลายแทนสกี ไ็ ด้

การสร้างภาพเคลอื่ นไหวเบอ้ื งตน้ Adobe Fla1s17h CS6 แบบทดสอบและกจิ กรรมการฝกึ ทักษะ บทที่ 5 เติมแตง่ แต้มสภี าพด้วยสสี นั ใหส้ วยงาม ตอนที่ 1 : อธบิ าย (หมายถงึ การใหร้ ายละเอียดเพิ่มเติม ขยายความ ถ้ามตี วั อย่างให้ยกตวั อย่าง ประกอบ) 1. โมเดลสี (Color Model) คอื อะไร 2. ใน Flash CS6 มโี มเดลสีใหเ้ ลือกใช้ 2 แบบ คอื อะไรบา้ ง 3. โมเดล RGB เกดิ จากอะไร 4. โมเดล HSB คอื อะไร 5. ปมุ่ นมี้ ีหน้าท่ีการทำ�งานอยา่ งไร 6. Duplicate Swatch ของพาเนล Swatches มีลักษณะการทำ�งานอยา่ งไร 7. เกรเดียนท์ (Gradient) คืออะไร 8. ลกั ษณะการเรยี งตอ่ ของสเี กรเดยี นทม์ ี 3 รปู แบบ อะไรบ้าง 9. Ink Bottle Tool มีการทำ�งานอยา่ งไร 10. Paint Bucket Tool เปน็ เคร่ืองมอื ทม่ี หี น้าทีก่ ารทำ�งานอยา่ งไร ตอนที่ 2 : จงเลอื กค�ำ ตอบทถี่ กู ต้องท่สี ุดเพียงข้อเดยี ว 1. โมเดล RGB เกิดจากการรวมตัวของสเปกตรัมของสใี ดบ้าง ก. สีแดง (Red) เขยี ว (Green) น้ำ� เงิน (Blue) ข. สแี ดง (Red) เขียว (Green) มว่ ง (Purple) ค. สีน�ำ้ เงินแกมเขยี ว (Cyan) เหลอื ง (Yellow) ม่วง (Purple) ง. สีขาว (White) ด�ำ (Black) เทา (Gray) 2. จดุ ท่ีแสงสามสีรวมกนั ในโมเดล RGB จะเกิดสีอะไร ก. สดี �ำ ข. สเี ทา ค. สขี าว ง. สแี ดง 3. ถา้ ตอ้ งการกำ�หนดสีของเสน้ ตอ้ งเลอื กใช้งานเครือ่ งมือใด ก. Ink Bottle Tool ข. Gradient Transform ค. Fill Color ง. Stroke Color

Adobe11F8lash CS6 บทที่ 5 เติมแต่งแต้มสภี าพด้วยสีสันให้สวยงาม 4. Fill Color คือเคร่ืองมือที่มหี นา้ ท่กี ารทำ�งานอย่างไร ก. เลอื กก�ำ หนดสขี องเส้น ข. เปลยี่ นคุณสมบัตขิ องเสน้ ค. เลอื กกำ�หนดสขี องพน้ื ง. กอ๊ ปป้หี รือสร้างสีใหม่ 5. ถา้ ตอ้ งการปรบั สใี หก้ ลับเป็นค่าเร่ิมต้น (Default) คอื พื้นเป็นสีขาวและเสน้ เปน็ สดี �ำ ต้องใชค้ �ำ สัง่ ใด ก. ข. ค. ง. 6. ถ้าต้องการก๊อปป้ีหรือสร้างสีใหม่ท่ีกำ�ลังเลือกในตารางให้เกิดเป็นสีเดียวกันข้ึนมาอีกช่องหนึ่งที่ส่วน ท้ายของตารางสีต้องใชค้ �ำ ส่ังใด ก. Replace Colors ข. Duplicate Swatch ค. Add Colors ง. Delete Swatch 7. Clear Colors เปน็ คำ�สง่ั ทีใ่ ช้ส�ำ หรบั ท�ำ อะไร ก. ลบสที ี่กำ�ลงั เลือกในตารางส ี ข. ลบสที ้ังหมดออกจากตาราง ยกเว้นเพียงสขี าว สีด�ำ และสเี กรเดยี นทข์ องสีขาวและด�ำ ค. ลบสที งั้ หมดออกจากตาราง ง. ลบสที ก่ี ำ�ลงั เลอื กในตารางสี ยกเวน้ เพยี งสขี าว สีด�ำ และสีเกรเดยี นท์ของสขี าวและด�ำ 8. ถา้ ตอ้ งการกำ�หนดความโปรง่ ใสของสตี อ้ งก�ำ หนดคา่ ในข้อใด ก. Gradient ข. Fill ค. Stoke ง. Alpha 9. ค่า Alpha เทา่ ใดท่ที ำ�ให้ความโปรง่ ใสของสีไม่มีสีเลย ก. Alpha = 100% ข. Alpha = 10% ค. Alpha = 1% ง. Alpha = 0% 10. Paint Bucket Tool เป็นเคร่อื งมือสำ�หรบั ใช้งานอะไร ก. เคร่ืองมอื ส�ำ หรบั เตมิ สีพน้ื (Fill) ให้กบั ภาพ ไม่ว่าบรเิ วณนนั้ จะมสี พี ้ืนเตมิ อยแู่ ล้วหรอื เปน็ พืน้ ที่ ว่างทม่ี เี สน้ ขอบ ข. เลือกกำ�หนดสีของเสน้ ค. เลอื กกำ�หนดสีของพืน้ ง. เครือ่ งมือทใี่ ชใ้ นการเปลยี่ นคณุ สมบตั ขิ องเส้น (Stroke) ตอนที่ 3 : อธิบายค�ำ ศัพท์ (หมายถึง การใหร้ ายละเอยี ดเพม่ิ เตมิ ขยายความ ถา้ มตี ัวอย่างใหย้ ก ตวั อยา่ งประกอบ) 1. Color Model 6. Sort by Color 7. Gradient 2. Color Swatches 8. Linear 3. Replace Colors 4. Load Default Colors 9. Radial 10. Overflow 5. Clear Colors

การสร้างภาพเคล่ือนไหวเบื้องตน้ Adobe Fla1s19h CS6 ใบงานที่ 5.1 ให้นักศึกษาเติมสีสันให้ภาพท่ีกำ�หนด โดยต้องให้ได้สีสันท่ีเหมือนภาพต้นแบบทุกสี และนำ� รปู วาดสว่ นตา่ ง ๆ มาประกอบใหเ้ หมอื นภาพตน้ แบบ ซง่ึ ในใบงานนน้ี กั ศกึ ษาตอ้ งใชเ้ ครอ่ื งมอื Eyedropper Tool ภาพตน้ แบบ 1. เปดิ ไฟล์ Lesson 5 Color1.fla ขึ้นมา 2. นำ�ไฟล์รูปภาพตน้ แบบเข้าสู่โปรแกรม โดยเลือกเมนู File > Import > Import to Stage

Adobe12F0lash CS6 บทที่ 5 เติมแต่งแต้มสภี าพดว้ ยสสี นั ใหส้ วยงาม 3. ไฟล์ Lesson 5 Color1.fla จะมี 3 เลเยอร์ คือ เลเยอร์ Face, เลเยอร์ Hair 1 และเลเยอร์ Hair 2 ถา้ ต้องการลงสีส่วนใดตอ้ งคลกิ เลอื กเลเยอรน์ ั้นก่อนจงึ จะลงสไี ด้ 4. จากนัน้ ใสส่ ใี หไ้ ดต้ ามรปู โดยใช้ Eyedropper Tool ชว่ ยดูดสจี ากรปู ภาพตน้ แบบ 5. เทสที ี่ไดล้ งในรูปภาพส่วนตา่ ง ๆ ตามภาพต้นแบบ 6. จากนั้น นำ�ส่วนตา่ งๆ มาประกอบเรียงตามล�ำ ดบั ให้ได้ดงั ภาพตน้ แบบ หากส่วนใดไมม่ เี สน้ ขอบ ต้องเอาเสน้ ขอบออก

การสรา้ งภาพเคล่ือนไหวเบ้ืองตน้ Adobe Fla1s21h CS6 ใบงานที่ 5.2 ให้นักศึกษาวาดรูปดินสอเหมือนใบงานที่เคยปฏิบัติมา แล้วลงสีโดยใช้เทคนิคการลงสีแบบ เกรเดียนท์ ลงสใี หไ้ ดแ้ สงเงาเหมือนตน้ แบบมากท่สี ุด โดยใหเ้ ลือกสีเองตามใจชอบ ภาพตน้ แบบ ข้นั ตอนการลงสีแบบเกรเดยี นทส์ ว่ นต่าง ๆ 1. ในส่วนบนของดินสอ ประเภทของเกรเดียนท์เป็นแบบ Radial Gradient ปรบั ค่าสตี ามต้องการ 2. เลือกเครื่องมือ Gradient Transform Tool เพื่อใช้ปรับแต่งตำ�แหน่งการไล่สีให้ได้ ตามต้องการ

Adobe12F2lash CS6 บทที่ 5 เตมิ แต่งแต้มสภี าพดว้ ยสสี ันใหส้ วยงาม 3. ในสว่ นอน่ื ๆ ประเภทของเกรเดยี นทเ์ ปน็ แบบ Linear Gradient และใชเ้ ครอ่ื งมอื Gradient Transform Tool ปรบั แต่งต�ำ แหนง่ ใหไ้ ดต้ ามความตอ้ งการ

Adobe Flash CS6 6บทที่ รจู้ กั กบั Timeline และ Frame จุดประสงค์เชงิ พฤตกิ รรม (Behavioral Objectives) หลงั จากศึกษาจบบทเรียนนี้แลว้ นักศกึ ษาจะมีความสามารถดงั นี้ 1. อธิบายส่วนประกอบของ Timeline ได้ 2. บอกความหมายของหมายเลขเฟรมได้ 3. ระบุชนดิ ของเฟรมได้ 4. ปฏบิ ัติการขยายหรือเลือกเฟรมได้ 5. บอกขั้นตอนการกำ�หนดความเร็วในการเคลอ่ื นไหวภาพได้ 6. อธิบายวธิ ีการสรา้ งคยี ์เฟรมได้ 7. ปฏบิ ตั ิการก๊อปป้เี ฟรมใหม่ได้ 8. ปฏบิ ตั ิการสร้างซีนใหม่ได้

บทท่ี 6Adobe12F4lash CS6 บทท่ี 6 รจู้ กั กบั Timeline และ Frame รจู้ กั กบั Timeline และ Frame ในการสร้างภาพแอนเิ มชัน จำ�เป็นต้องมกี ารสร้างสว่ นแบง่ ย่อย ๆ หลาย ๆ สว่ นมาประกอบกัน เพ่ือให้ครบองค์ประกอบเป็นแอนิเมชัน 1 ชิ้น โดยแต่ละส่วนจะทำ�งานบนไทม์ไลน์ และส่วนประกอบ ท้ังหมดนัน้ จะประกอบดว้ ยภาพนงิ่ ในแต่ละเฟรมเพอ่ื เป็นงานแอนเิ มชนั 1 ช้นิ ร้จู ักกบั Timeline ไทมไ์ ลน์ (Timeline) เปน็ สว่ นทใี่ ชใ้ นการควบคมุ การเคล่ือนไหวของภาพและสามารถวางเสยี ง เขา้ ไปได้ ประกอบดว้ ย 2 สว่ นหลกั คอื เลเยอร์ (Layer) และเฟรม (Frame) เลเยอรน์ นั้ เปรยี บเสมอื น เป็นแผ่นใสที่ใช้จัดวางออบเจ็กต์หลาย ๆ ชั้นให้เรียงซ้อนกัน ส่วนเฟรมเปรียบเทียบได้กับช่องท่ีใช้บรรจุ เน้ือหาเพ่ือแบ่งภาพเคลื่อนไหวออกเป็นข้ันตอนย่อย ๆ เหมือนกับเป็นภาพน่ิงหรือฟิล์มภาพยนตร์แต่ละ ภาพมารวมกันหลาย ๆ ภาพเพือ่ ความสมบูรณ์ สว่ นประกอบของไทมไ์ ลน์ ไทม์ไลน์มสี ่วนประกอบหลกั 2 สว่ น คือ เลเยอรแ์ ละเฟรม แตภ่ ายในเลเยอร์และเฟรมยังมสี ่วน ประกอบย่อยอ่นื อกี มากมาย

การสรา้ งภาพเคลื่อนไหวเบ้อื งตน้ Adobe Fla1s25h CS6 ลอ็ ค/ปลดล็อคเลเยอร์ แสดงเลเยอรใ์ นแบบโครงรา่ ง หมายเลขเฟรม ซ่อน/แสดงเลเยอร์ หัวเลน่ (Play Head) เลเยอร์ เปิดเมนูของ ไทม์ไลน์ สรา้ งเลเยอร์ Center Frame หมายเลขเฟรมปัจจบุ นั ช่วงเวลาท่ีผา่ นไป Onion Skin Modify Onion Makers อตั ราการแสดงเฟรม สรา้ งโฟลเดอร์ กำ�หนดการแสดง Onion ลบเลเยอร์ Onion Skin Outline แก้ไขหลายเฟรม รู้จกั กับเลเยอร์ (Layer) เลเยอร์เปรียบเสมือนกับแผ่นใสหลาย ๆ แผ่นวางซ้อนกัน โดยในเลเยอร์ที่ไม่มีรูปจะสามารถ มองเหน็ เลเยอรท์ อ่ี ยดู่ า้ นลา่ ง ส�ำหรบั การสรา้ งชน้ิ งานหรอื ภาพเคลอื่ นไหวตา่ งๆ ดว้ ย Flash ควรแยกชน้ิ งาน เป็นอสิ ระจากกันออกไปในแต่ละเลเยอร์ เพ่ือใหเ้ กิดความสะดวกในการแกไ้ ขและปรบั แต่งช้ินงานไดง้ ่าย ย่งิ ขึน้ เฟรม (Frame) เฟรมจะอยู่ในส่วนของหน้าต่างไทม์ไลน์ ลักษณะจะเป็นช่องสี่เหล่ียม ๆ เล็ก ๆ เรียงต่อกันไป ตามแนวนอน เฟรมจะท�ำหนา้ ทใี่ นการแจกแจงรายละเอยี ดความเคลอ่ื นไหวตา่ ง ๆ ของชน้ิ งานทป่ี รากฏ บน Stage หมายเลขเฟรม (Frame Number) หมายเลขเฟรมเป็นส่วนประกอบหนึ่งที่อยู่บน Timeline ซึ่งเป็นส่วนท่ีอยู่บนสุดอยู่เหนือเฟรม ท้งั หลายขึน้ ไป โดยจะแสดงเปน็ ตัวเลข 1, 5, 10, ….. โดยทีต่ วั เลขน้ี หมายถงึ ล�ำดบั ทขี่ องเฟรมทเี่ รียง กนั ไปเรอื่ ย ๆ ซ่งึ ในแตล่ ะขีดเลก็ ๆ ที่ยังไมไ่ ดแ้ สดงหมายเลขเฟรมเอาไว้น้นั จะมีหมายเลขเฟรมก�ำกับอยู่ ในตัวด้วยเชน่ กัน

Adobe12F6lash CS6 บทที่ 6 รจู้ กั กบั Timeline และ Frame หัวอ่าน (Play Head) เป็นเส้นสีแดงคอยบอกต�ำแหน่งว่าก�ำลังท�ำงานอยู่ท่ีเฟรมใด เราสามารถกดปุ่ม Enter เพื่อให้ หวั อ่านเคลอื่ นทเี่ พื่อดูภาพเคลือ่ นไหวท่เี ราท�ำไวต้ รงสเตจได้โดยทไี่ มต่ ้องรนั โปรแกรม ชนิดของเฟรม เฟรมแบ่งออกได้เป็น 2 ประเภท ได้แก่ คีย์เฟรม (Keyframe) และเฟรมระหว่างกลาง (In - Between Frame) 1. คียเ์ ฟรม (Keyframe) คือ เฟรมท่มี ีออบเจ็กต์วางอยู่ ซึ่งออบเจก็ ตน์ ั้นสามารถเลอื ก แก้ไข หรือปรับแต่งต่าง ๆ ได้ โดยในช่องเฟรมจะเปล่ียนจากรูป (เฟรมเปล่า) เป็นรูป (คีย์เฟรม) ส�ำหรับคีย์เฟรม 1 ช่อง จะใช้แสดงภาพน่ิง 1 จังหวะ แต่หากต้องการสร้างภาพเคลื่อนไหวแล้วต้องเพ่ิม คีย์เฟรมเข้ามาหลายเฟรมเพื่อใส่ออบเจ็กต์ภาพน่ิงในแต่ละจังหวะ ซึ่งหลักการนี้สามารถสร้างภาพ เคลือ่ นไหวแบบ Frame - by - Frame ได้ 2. เฟรมระหว่างกลาง (In - Between Frame) คือ เฟรมที่ใช้ขยายช่วงเวลาในการแสดง เนือ้ หาของคยี เ์ ฟรมใหย้ าวขึน้ ดงั นั้น จงึ ไมส่ ามารถเลือกหรอื ปรบั แต่งเนื้อหาท่ีแสดงในเฟรมระหว่างกลางได้ แต่อย่างไรก็ตาม ช่วงเวลาที่ขยายอาจก�ำหนดให้ออบเจ็กต์ในคีย์เฟรมเคลื่อนไหวได้ หรืออาจแสดงเป็น เพียงภาพนิ่งก็ได้เช่นกัน โดยจะแสดงสัญลักษณ์ของเฟรมต่างกันไปตามลักษณะของเน้ือหาหรือการ เคลอื่ นไหวท่ถี ูกก�ำหนด ดงั นี้ คีย์เฟรมภาพน่ิง ขยายเวลาในการแสดงเน้ือหาท่ีไม่เปล่ียนแปลงของคีย์เฟรม โดย แสดงชว่ งเวลาของเน้ือหาด้วยเฟรมสีเทา Motion Tween ภาพเคลือ่ นไหวแบบเคลอ่ื นที่ โดยแสดงชว่ งของการเคลื่อนไหวด้วย รปู ลกู ศรสดี �ำบนพนื้ สีม่วง Shape Tween ภาพเคลื่อนไหวแบบเปล่ียนแปลงรูปร่าง โดยแสดงช่วงการ เคลือ่ นไหวด้วยรปู ลกู ศรสีด�ำบนพืน้ สีเขียว เส้นประ แสดงถึงภาพเคลือ่ นไหวท่ไี มส่ มบูรณ์ การขยายเฟรม การขยายเฟรม คือ การขยายช่วงเวลาในการแสดงเน้ือหาให้ยาวออกไปท้ังภาพเคล่ือนไหว และภาพนิง่ สามารถใช้วธิ ีในการขยายเฟรมได้เชน่ เดยี วกัน

การสร้างภาพเคลอ่ื นไหวเบอื้ งต้น Adobe Fla1s27h CS6 วิธกี ารขยายเฟรม 1. กดคีย์ F5 1 2. คลกิ ค�ำสัง่ Insert > Timeline > Frame 3 3. คลิกขวาที่ชอ่ งเฟรมแล้วเลอื กค�ำสงั่ Insert Frame 2

Adobe12F8lash CS6 บทท่ี 6 รจู้ กั กบั Timeline และ Frame การเลอื กเฟรม เมื่อจะจัดการกับเฟรมของมูฟวี่ต้องท�ำการเลือกเฟรมก่อน ซ่ึงวิธีเลือกเฟรมแบ่งออกเป็น หลายกรณี ดงั นี้ 1. เลือกเฟรมเพยี งเฟรมเดยี ว ให้ใช1เ้ มาสค์ ลกิ ที่เฟรมนน้ั 2. เลือกหลายเฟรมที่อยู่ติดกัน คลิกเลือกเฟรมเริ่มต้นก่อน แล้วกดคีย์ Shift พร้อมคลิกท่ี เฟรมปลายทาง หรอื ใช้เมาส์คลิกลากตามจ�ำนวนเฟร2มท่ีต้องการ 3. เลอื กหลายเฟรมทไ่ี ม่ตดิ กนั คลิกเลือกเฟรมเรม่ิ ตน้ กอ่ น แลว้ กดคยี ์ Ctrl พรอ้ มคลิกท่เี ฟรม อืน่ ๆ เพม่ิ ข้ึน 3 4. เลือกเฟรมพร้อมกันหลายเลเยอร์ ให้คลิกเลือกเฟรมเริ่มต้นของเลเยอร์ด้านบนก่อน แล้ว กดคยี ์ Shift พรอ้ มคลิกที่เฟรมสุดทา้ ยของเลเยอรด์ า้ นลา่ ง 4

การสรา้ งภาพเคลือ่ นไหวเบือ้ งต้น Adobe Fla1s29h CS6 การแทรกเฟรม ถ้าเราต้องการเพิ่มเฟรมแทรกระหว่างเฟรมหนึ่งกับอีกเฟรมหน่ึง สามารถท�ำได้โดยการคลิกขวา ตรงต�ำแหนง่ เฟรมที่ต้องการ จากน้ันเลือก Insert Frame เพอื่ เพ่ิมเฟรม หรือกด F5 หรอื สามารถเลือก Insert > Timeline > Frame การลบเฟรม คลิกขวาที่คีย์เฟรมท่ีต้องการลบ และเลือก Remove Frames หรือสามารถเลือก Insert > Timeline > Remove Frames การย้ายเฟรม การยา้ ยเฟรมใหค้ ลิกเลือกเฟรมท่ีตอ้ งการย้าย แล้วลากเฟรมไปวางทีใ่ หม่ ความเร็วในการแสดงภาพเคลอ่ื นไหว (Frame Rate) การก�ำหนดความเร็วในการแสดงภาพเคลื่อนไหวนั้น สามารถท�ำได้ด้วยการวัดความเร็วใน หนว่ ยจ�ำนวนเฟรมท่ีแสดงภาพชน้ิ งานภายใน 1 วินาที ทเ่ี รยี กว่า Frame Per Second อกั ษรยอ่ fps ซงึ่ ความเร็วในการแสดงภาพเคลอื่ นไหวน้ีจะเปน็ ตวั ก�ำหนดวา่ ภาพเคล่อื นไหวท่จี ะปรากฏขน้ึ มานนั้ จะมี ความนุ่มนวลมากนอ้ ยเพยี งใด หรือในบางครงั้ ภาพเคลื่อนไหวทไ่ี ด้อาจจะเปน็ ภาพกระตกุ ก็ไดเ้ ช่นกัน

Adobe13F0lash CS6 บทท่ี 6 รจู้ กั กบั Timeline และ Frame เมื่อมกี ารเปิดโปรแกรมข้ึนมาใหม่ทุกคร้งั จะมีการก�ำหนดความเร็วในการเคลอ่ื นไหวภาพเอาไวท้ ่ี 12 fps ซึ่งหมายความว่า ในเวลา 1 วินาที จะสามารถแสดงภาพเคล่ือนไหวได้จ�ำนวน 12 เฟรมแบบ ต่อเนอื่ ง หากต้องการเปล่ยี นให้แสดงภาพไดจ้ �ำนวนชา้ ลงหรอื เรว็ ข้นึ หรอื อาจเรยี กไดว้ า่ อยากจะเปลี่ยน จ�ำนวนเฟรมทแ่ี สดงในเวลา 1 วนิ าที ใหม้ จี �ำนวนมากขนึ้ หรอื นอ้ ยลงกส็ ามารถท�ำไดเ้ ชน่ กนั โดยมขี นั้ ตอน ดงั นี้ 1. ดับเบ้ลิ คลกิ ที่ Frame Rate 2. ในช่อง Frame Rate ใสค่ า่ ความเร็วเฟรมใหเ้ ปน็ ตัวเลข 30 3. คลกิ เมนู Control > Play หรอื กดปมุ่ Enter เพอ่ื เปน็ การทดสอบการเคลอื่ นไหวของชนิ้ งาน ตา่ ง ๆ บน Stage กจ็ ะพบว่ามคี วามเรว็ เพ่ิมข้นึ กว่าเดมิ คียเ์ ฟรม (Keyframe) โดยปกตเิ มอ่ื มีการเปดิ ไฟล์ใหมข่ ้นึ มาจะปรากฏเฟรมท่ี 1 ของเลเยอร์ 1 ข้นึ มาอัตโนมตั ิ สามารถ สงั เกตไดจ้ ากจดุ ทอ่ี ยู่ในเฟรม คียเ์ ฟรมเปน็ ตัวชว่ ยในการก�ำหนดขนาดความยาวของมูฟวไี่ ด้ การสรา้ งคยี ์เฟรมใหม่ (Insert Frame) การเพม่ิ เฟรมแบบ Insert Frame ใหม่สามารถท�ำได้โดย Insert > Timeline > Frame หรือ กดป่มุ F5 ในการเพิ่มเฟรมแบบ Insert Frame นนั้ จะเปน็ การเพิ่มแบบเฟรมตอ่ เนื่องลากยาว

การสร้างภาพเคล่ือนไหวเบอ้ื งตน้ Adobe Fla1s31h CS6 การเพมิ่ เฟรมแบบ Insert Keyframe ใหม่ สามารถท�ำไดโ้ ดย Insert > Timeline > Keyframe หรือ กดปุม่ F6 ในการเพ่ิมเฟรมแบบ Insert Keyframe น้นั จะเป็นการตัดเฟรมแลว้ เร่มิ ตน้ ใหม่เพื่อวาง วัตถุชิ้นใหม่หรือมีความเปล่ียนแปลง การเพม่ิ เฟรมแบบ Insert Blank Keyframe ใหม่ สามารถท�ำได้โดย Insert > Timeline > Blank Keyframe หรือกดปุ่ม F7 ในการเพิ่มเฟรมแบบ Insert Blank Keyframe น้ันจะเป็นการเพิ่ม เฟรมเปล่าเขา้ มา การลบเฟรม การลบเฟรมสามารถท�ำได้โดยการกดปุ่ม Shift + F5 หรือคลิกขวาบนเฟรมที่เราต้องการลบ แลว้ เลอื ก Remove Frames หรือเลอื กค�ำสงั่ Edit >Timeline> Remove Frames การก๊อปปเ้ี ฟรม (Copy Frame and Paste Frame) กรณีที่ต้องการก๊อปปี้เฟรม มักจะเป็นท่ีนิยมใช้กันส�ำหรับการสร้างภาพเคล่ือนไหวโดยทั่วไป เน่ืองจากง่ายและประหยัดเวลาในการควบคุมการท�ำงานแล้ว ยังสามารถสร้างภาพเคลื่อนไหวให้มีความ ซบั ซ้อนข้นึ ดว้ ยวธิ กี ารวางเฟรมเริม่ ตน้ ให้อยู่ในต�ำแหนง่ ท่ีต่างกันออกไป 1. เปิดไฟล์ใหม่ที่ต้องการท�ำงานข้ึนมา คลิกเคร่ืองมือสร้างวงกลมในกล่องเคร่ืองมือเพื่อสร้าง วงกลมขึ้นมา 1 วง 2. คลิกก�ำหนดสีพ้นื ภายในวงกลมให้เปน็ สขี าว 3. คลกิ เมาสซ์ า้ ยค้างไว้แลว้ ลากเพื่อสรา้ งวงรี 1 วงบน Stage

Adobe13F2lash CS6 บทที่ 6 รจู้ กั กบั Timeline และ Frame 1 3 2 4. คลิกเมาส์ขวาในวงรี เลอื กเมนู Convert to Symbol… 4

การสรา้ งภาพเคลื่อนไหวเบ้อื งตน้ Adobe Fla1s33h CS6 5. ช่อง Name : ใหต้ ั้งช่อื ตามต้องการ 7 6. ก�ำหนดชนิดของ Symbol ใหเ้ ปน็ Graphic 7. คลิกปมุ่ OK เพอ่ื เป็นการยนื ยัน 5 6 8. คลิกขวาทเี่ ฟรม 10 เลือก Insert Keyframe จะปรากฏวงรเี หมือนกับเฟรมท่ี 1 8

Adobe13F4lash CS6 บทที่ 6 รจู้ กั กบั Timeline และ Frame 9. เลือกเมนู Modify > Transform > Scale 9 10. คลิกค้างบนจุดตรงมุมวงรี เมอ่ื เมาสเ์ ปล่ียนรูปเปน็ ลูกศรแลว้ ลากเพือ่ ขยายขนาดของวงรี 11. คลิกเมาส์ขวาที่เฟรมใดเฟรมหน่ึงระหว่างเฟรมท่ี 1 กับเฟรมที่ 10 แล้วคลิกขวาเลือกเมนู Create Motion Tween 12. กดปมุ่ Enter เพอ่ื เป็นการทดสอบการขยายของวงรี 13. คลิกทเ่ี ฟรม 1 ในเลเยอร์ 1 ขณะทก่ี ดปมุ่ Shift ค้างไว้ แลว้ คลกิ เฟรม 10 เพ่อื เลอื กเฟรม ที่ 1 ถึงเฟรมท่ี 10 14. คลกิ ปุ่มเพิม่ เลเยอร์ 3 ครัง้ จะปรากฏเลเยอร์ใหมข่ นึ้ มา 3 เลเยอร์

การสรา้ งภาพเคลอื่ นไหวเบอ้ื งตน้ Adobe Fla1s35h CS6 14 15. คลกิ เมาส์ขวาบนเฟรมทเี่ ลอื ก แลว้ เลอื กเมนู Copy Frames 15

Adobe13F6lash CS6 บทท่ี 6 รจู้ กั กบั Timeline และ Frame 16. คลิกที่เฟรม 3 ของเลเยอร์ 2 คลิกขวาเลือกเมนู Paste Frames เพ่ือคัดลอกเฟรมจาก เลเยอร์ 1 มาวางในเฟรมที่ 3 ของเลเยอรน์ ้ี 16 17. ใหค้ ลกิ ทีเ่ ฟรม 5 ของเลเยอร์ 3 แลว้ คลิกขวาเลือกเมนู Paste Frames เพอ่ื คดั ลอกเฟรม จากเลเยอร์ 1 มาวางในเฟรมที่ 5 ของเลเยอร์นี้ 18. ให้คลิกที่เฟรม 7 ของเลเยอร์ 4 คลิกขวาเลือกเมนู Paste Frames เพื่อคัดลอกเฟรม จากเลเยอร์ 1 มาวางในเฟรมท่ี 7 ของเลเยอรน์ ี้ 19. กดปมุ่ Shift ทีแ่ ปน้ คยี ์บอรด์ คา้ งไว้ ในขณะที่คลกิ เฟรมที่ 17 ของเลเยอร์ 4 แล้วคลิกเฟรม ท่ี 25 ของเลเยอร์ 1 เพือ่ เลอื กเฟรมทไี่ ม่เกี่ยวขอ้ งกับการเคลื่อนไหว 19

การสรา้ งภาพเคล่ือนไหวเบอ้ื งตน้ Adobe Fla1s37h CS6 20. คลิกเมาส์ขวาเลือกเมนู Remove Frames เพ่ือท�ำการลบเฟรมที่ไม่เก่ียวข้องกับการ เคล่อื นไหวออกไป การกำ� หนด Label ให้กบั เฟรม หรอื การกำ� หนดสัญลกั ษณ์ใหก้ บั คยี ์เฟรม 1. คลกิ เลือกคยี ์เฟรม 2. ท่พี าเนล Properties ให้พิมพ์ช่ือหรือหมายเหตุลงในชอ่ ง Name 3. คลกิ แล้วเลอื กประเภท Label 23 1 ตวั อย่างชน้ิ งานจากการสร้างเฟรม 1 1. คลิกเฟรมที่ 1

Adobe13F8lash CS6 บทท่ี 6 รจู้ กั กบั Timeline และ Frame 2. น�ำภาพที่ตอ้ งการเปน็ ภาพนงิ่ ลงบนสเตจ File > Import > Import to Stage… 2 3. คลิกขวาเลือกท่เี ฟรม 5 เลือก Insert Keyframe 3

การสร้างภาพเคลอ่ื นไหวเบอ้ื งตน้ Adobe Fla1s39h CS6 4. ท�ำการพิมพต์ ัวเลข 1 ลงไป 4 5. คลกิ ขวาเลือกที่เฟรม 10 เลอื ก Insert Keyframe 5

Adobe14F0lash CS6 บทท่ี 6 รจู้ กั กบั Timeline และ Frame 6. ลบภาพและตัวหนังสือออก จากน้ันเพิ่มภาพที่ต้องการเป็นภาพนิ่งลงบนสเตจ File > Import > Import to Stage… จ�ำนวน 2 ภาพ 6 7. คลกิ ขวาเลือกทเ่ี ฟรม 15 เลอื ก Insert Keyframe และท�ำการพิมพ์ตวั เลข 2 ลงไป 7 8. จากน้ันลอง Compile ดูผล 9. เน่ืองจากผลที่ได้แสดงเร็วไปให้ท�ำการขยับเฟรมให้แสดงความเร็วเหมาะสมโดยเพิ่มเฟรม ของแตล่ ะ Keyframe ไปอย่างละ 20 เฟรม

การสร้างภาพเคลอ่ื นไหวเบ้อื งต้น Adobe Fla1s41h CS6 9 10. จะได้ผลลพั ธด์ งั รูป

Adobe14F2lash CS6 บทที่ 6 รจู้ กั กบั Timeline และ Frame ซนี (Scene) ซีน (Scene) คือ การแบ่งมูฟว่ีท้ังเร่ืองออกเป็นตอนหรือฉาก เปรียบได้กับฉากหน่ึง ๆ ใน ภาพยนตร์หรือละคร ซ่ึงมีการเปล่ียนสถานที่เกิดเหตุการณ์และตัวละครที่แสดงที่แตกต่างกันไป ประโยชน์ของการแบ่งซีนเพื่อช่วยลดความสับสนในกรณีที่มูฟว่ีมีความยาวมาก ท�ำให้ง่ายต่อการสร้าง จดั การและแก้ไข การจัดการกับซีนนั้นจะต้องใช้พาเนล Scene ดังน้ัน ให้เปิดพาเนลน้ีข้ึนมาก่อน โดยใช้ค�ำส่ัง Window > Other Panels > Scene ส�ำหรบั ส่วนประกอบของพาเนล มีดังน้ี เมนูของพาเนลซีน รายชือ่ ซนี เพ่มิ ซนี ลบซีน ก๊อปปีซ้ ีน การสร้างซีนใหม่ ปกติการสร้างไฟลเ์ อกสารโปรแกรมจะสร้าง Scene 1 ไวใ้ ห้อยแู่ ล้ว และหากต้องการเพม่ิ ซีนใหม่ ขึ้นมาก็สามารถท�ำได้ โดยคลิกเลือกซีนใดซีนหน่ึงไว้ก่อนแล้วคลิกค�ำสั่ง Insert > Scene หรือคลิก ปมุ่ Add Scene ในพาเนล Scene ซ่ึงซนี ที่สรา้ งใหมจ่ ะปรากฏด้านล่างซนี ทีเ่ ลือกไว้ การเลือกทำ� งานกับซีน เม่ือมีการเพิ่มซีนแล้ว สามารถเลือกท�ำงานกับซีนใดซีนหน่ึงได้ โดยคลิกเลือกชื่อซีนจากพาเนล Scene หรอื คลกิ ค�ำสงั่ View > Go to > ชอ่ื ซีน

การสรา้ งภาพเคลอ่ื นไหวเบ้ืองตน้ Adobe Fla1s43h CS6 การใช้ Onion Skin โดยทวั่ ไปการสรา้ งเนอื้ หาใหก้ บั เฟรม เราจะมองเหน็ เฉพาะภาพของเฟรมปจั จบุ นั หากใช้ Onion Skin เราจะสามารถมองเห็นภาพของเฟรมอื่น ๆ ได้ด้วย ท�ำให้ทราบว่าในเฟรมปัจจุบันจะต้องปรับให้ ออบเจ็กตเ์ คลือ่ นไหวไปแคไ่ หนและอยา่ งไร เม่อื เทยี บกบั เฟรมก่อนหนา้ และเฟรมถัดไป วิธีการใช้ Onion Skin 1. คลกิ ปุม่ เมอ่ื ตอ้ งการใชง้ าน Onion Skin 1 2. คลกิ ปมุ่ เมอ่ื ตอ้ งการใช้ Onion Skin Outlines 2 Onion Skin จะท�ำให้เนื้อหาของเฟรมอ่นื ๆ ปรากฏให้เหน็ ในเฟรมปจั จบุ ัน โดยมีรายละเอยี ด ตามความเปน็ จรงิ เพยี งแตจ่ ะมสี ซี ีดจางกว่าปกติ Onion Skin Outlines จะท�ำใหเ้ นอ้ื หาของเฟรมอืน่ ๆ ปรากฏเป็นรปู โครงรา่ งท่ีมแี ต่เสน้ ขอบ เทา่ นั้น ส่วนเน้อื หาของเฟรมปัจจุบนั จะถูกแสดงตามปกติ