1 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว หน่วยที่ 3 หลักการทำงานของโปรแกรม สร้างภาพเคลื่อนไหว
2 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว สาระสำคัญ ในหน่วยการเรียนนี้ อธิบายเกี่ยวกับหลักการสร้างภาพเคลื่อนไหว ควรเริ่มต้นจากการทำความเข้าใจ การทำงานของส่วนประกอบหน้าจอ เครื่องมือการใช้งานต่าง ๆ การใช้งานสเตจ การจัดการวัตถุบน พื้นที่ ภาพรวมหน้าจอการทำงานในโปรแกรม Flash หน้าที่และการทำงานของแถบเมนูบาร์ (Menu Bar) หน้าที่และการทำงานของสเตจและพื้นที่การทำงาน (Stage/Pasteboard) หน้าที่และการ ทำงานของแผงเครื่องมือ (Tools) หน้าที่และการทำงานของพาเนล (Panels) หน้าที่และการทำงาน ของไทม์ไลน์(Timeline) การทดสอบชิ้นงานบนสเตจ การ Save (บันทึก) ไฟล์ Flash ขั้นตอนการ บันทึกเอกสาร Flash การบันทึกอัตโนมัติ (Auto Save) การเผยแพร่และนำไปใช้งาน (Publish) การ ออกจากโปรแกรม สมรรถนะพื้นฐาน - ใช้งานโปรแกรมสร้างภาพเคลื่อนไหว เรื่องที่จะศึกษา 1. ภาพรวมหน้าจอการทำงานในโปรแกรม Flash 2. การทดสอบชิ้นงานบนสเตจ 3. การ Save (บันทึก) ไฟล์ Flash 4. ขั้นตอนการบันทึกเอกสาร Flash 5. การบันรทึกอัตโนมัติ (Auto Save) 6. การเผยแพร่และนำไปใช้งาน (Publish) 7. การออกจากโปรแกรม จุดประสงค์เชิงพฤติกรรม 1. อธิบายส่วนประกอบหน้าจอการทำงานในโปรแกรมสร้างภาพเคลื่อนไหว 2. อธิบายหน้าที่และการทำงานของแถบเมนูบาร์ได้ 3. อธิบายการใช้งานสเตจและพื้นที่การทำงานได้ 4. อธิบายหน้าที่และการทำงานของแผงเครื่องมือ (Tools) ได้ 5. อธิบายหน้าที่และการทำงานของพาเนล (Panels) ได้ 6. สามารถทำงานกับ Timeline ได้ 7. สามารถทดสอบชิ้นงานบนสเตจได้ 8. สามารถสร้าง บันทึกเอกสาร Flash ได้ 9. สามารถเผยแพร่และนำไปใช้งานได้
3 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว ภาพรวมหน้าจอการทำงานในโปรแกรม Flash ภายในเนื้อหาหน่วยการเรียนรู้นี้อธิบายถึงส่วนประกอบหน้าจอการทำงานโปรแกรม สร้างภาพเคลื่อนไหว หรือโปรแกรม Flash และความรู้เบื้องต้น และทำความเข้าใจก่อน เรียนหน่วยถัดไป 1. ไอคอนโปรแกรม Flash ภาพที่ 3.1 ไอคอนโปรแกรม Flash http://programmanual.blogspot.com/2015/01/flash.html 2. แสดงหน้าจอการสร้างเอกสาร Flash เมื่อเปิดโปรแกรม Flash โปรแกรมจะแสดงหน้าต่างดังรูป โดยแบ่งออกเป็น 3 ส่วน ดังนี้ 1) Create from Template คือ ชุดคำสั่งที่ใช้ในการสร้างงานใหม่ แต่จะเป็นกา สร้างโดยการเลือกใช้Template หรือแม่แบบสำเร็จ ภาพที่ 3.2 ภาพตัวอย่าง หน้าจอการสร้างเอกสาร Flash ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
4 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 2) Open a Recent Item คือ ชุดคำสั่งที่มีความสามรถในการเรียนเปิดใช้งานไฟล์งาน เดิมที่เคยสร้างขึ้นมาเพื่อทำการแก้ไขและปรับปรุงต่อ 3) Create New คือ ชุดคำสั่งที่ใช้ในการสร้างงานใหม่ โดยจะมีไฟล์งานใหม่ โดยจะมีไฟล์ งานชนิดต่าง ๆ ให้เลือก ดังนี้ ActionScript 3.0 สร้างไฟล์งานปกติ โดยใช้ภาษา ActionScript 3.0 ActionScript 2.0 สร้างไฟล์งานปกติ โดยใช้ภาษา ActionScript 2.0 AIR สร้างไฟล์งานในรูปแบบของ Adobe AIR ที่ใช้งานข้ามระบบได้ AIR for Android สร้างไฟล์งานเพื่อใช้นำเสนอระบบ Android AIR for ios สร้างไฟล์งานเพื่อใช้ในการนำเสนอระบบ Apple ios Flash Lite 4 สร้างไฟล์งานเพื่อใช้งานร่วมกับ Flash Lite 4 (สำหรับนำเสนอบนอุปกรณ์มือถือ) ActionScript 3.0 Class สร้างไฟล์ Class ของ ActionScript 3.0 ActionScript 3.0 Interface สร้างไฟล์ Interface ของ ActionScript 3.0 ActionScript File สร้างไฟล์เพื่อใช้เขียนสคริปต์ ActionScript Communication File สร้างไฟล์เพื่อใช้เขียนสคริปต์ติดต่อกับเซิร์ฟเวอร์ Flash JavaScript File สร้างไฟล์เพื่อใช้เขียนสคริปต์ร่วมกับ JavaScript Flash Project สร้างไฟล์งานที่รวมทั้งหมด
5 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 3.แสดงส่วนประกอบของหน้าจอการทำงานโปรแกรม Flash ดังต่อไปนี้ ภาพที่ 3.3 ส่วนประกอบหน้าจอการทำงานในโปรแกรม Flash https://sites.google.com/site/krukengflash/hnwy-kar-reiyn-ru-thi-1/swn-prakxb-khxng-flash-cs6 1) แถบเมนู (Menu Bar)คือ ส่วนสำหรับแสดงรายการคำสั่งต่าง ๆ ของ โปรแกรม 2) สเตจและพื้นที่การทำงาน (Stag and Pasteboard) พื้นที่สีขาวบริเวณ กลางจอคือ สเตจ เป็นพื้นที่ใช้จัดวางวัตถุต่าง ๆ ที่ต้องการอสดงให้เห็นใน ชิ้นงาน ส่วนพื้นที่สีเทาด้านนอกบริเวณสีขาวคือพื้นที่การทำงาน เป็นบริเวณที่ สามารถนำวัตถุ ต่าง ๆ มาวาง พักไว้วางซ้อนไว้ได้เพราะบริเวณนี้จะไม่ แสดงผลเวลาที่เรา Export Movieเป็นไฟล์ .swf 3) พาเนล (Panels) คือ หน้าต่างที่ใช้การกำหนดค่าในการปรับแต่งวัตถุ 4) กล่องเครื่องมือ (Toolbox) คือ กลุ่มของเครื่องมือในการสร้างงานและการ จัดวัตถุต่าง ๆ 5) ไทม์ไลน์ (Timeline) สำหรับควบคุมการทำงานและกำหนดการนำเสนอ ผลงานตลอดจนการเคลื่อนไหวต่าง ๆ
6 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 3.1 หน้าที่และการทำงานของแถบเมนู (Menu Bar) แถบเมนูเป็นแถบที่รวบรวมคำสั่งในการใช้งานทั้งหมดเกี่ยวกับการสร้าง ชิ้นงานนอกจากนี้ยังรวมไปถึงการตั้งค่าเกี่ยวกับโปรแกรมทั้งหมด ดัง ตัวอย่างภาพแถบเมนูดังต่อไปนี้ 1.) แถบเมนู Flie รวมคำสั่งการสร้างชิ้นงาน การเปิด/ปิด ชิ้นงาน การบันทึกชิ้นงาน การนำเข้าการส่งออกไฟล์ การเผยแพร่ไฟล์ การปลิ้น และการปิดโปรแกรม 2.) แถบเมนู Edit คำสั่งที่เกี่ยวกับการจัดการ ตัด คดลอก วาง แก้ไขชิ้นงาน และการกำหนดตุณสมบัติต่าง ๆ ที่มี ผลต่อการปรับแต่งภาพ 3.) แถบเมนู View คำสั่งเกี่ยวกับการปรับมุมมองชิ้นงาน การแสดง/การซ่อน เส้นไม้บรรทัดการแสดงเส้นตาราง บนสเตจและพื้นที่การทำงาน 4.) แถบเมนูInsert คำสั่งเกี่ยวกับการเพิ่ม ซีน เลเยอร์ เฟรม สัญลักษณ์อื่น ๆ ลงบนไทม์ไลน์ 5.) แถบเมนู Modify คำสั่งเกี่ยวกับการจัดการวัตถุและชิ้นงาน การรวมวัตถุ 6.) แถบเมนู Text คำสั่งเกี่ยวกับการจัดการแก้ไข ปรับแต่งข้อความทั้งหมด 7.) แถบเมนู Commands ช่วยสร้างงานอัตโนมัติใน Flash สามารถสร้างคำสั่งด้วย JavaScript หรือเปิดไฟล์ JavaScript อื่น ๆ เพื่อใช้สร้างชิ้นงาน โดยสามารถดาวน์โหลดคำสั่งเพิ่มเติมได้จากเว็บ Adobe Exchange สามารถแปลงเนื้อหา Flash เป็นรูปไฟล์ในรูปแบบ .SWC ด้วยการใช้ ActionScript 3.0 การคัดลอก ส่งออก และนำเข้า ไฟล์ชิ้นงานเป็น Motion XML ภาพที่ 3.4 แถบเมนู ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
7 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 8.) แถบเมนู Control คำสั่งจัดเตรียมการควบคุมการเล่นเพื่อทดสอบภาพเคลื่อนไหวในหน้าต่าง โปรแกรม Flash Player และหน้า HTML 9.) แถบเมนู Debug คำสั่งดีบั๊ก คือ การตรวจสอบการทำงานบนของไทม์ไลน์ คุณสมบัติของวัตถุและ ActionScript เช่นเดียวกับการทดสอบ สามารถบั๊กแอนิเมชันในสภาพแวดล้อมที่แตกต่าง กัน เช่น Flash Professional, AIR Debug Launcher (เดสก์ท็อป), AIR Debug Launcher (มือถือ) หรือ บนอุปกรณ์ผ่าน USB 10.) แถบเมนู Window สำหรับการเปิด - ปิด ใช้งาน พาเนลอื่น ๆ โดยการเลือกแสดงเครื่องมือที่ ต้องการใช้ให้เหมาะลมกับการใช้งานปัจจุบัน 11.) แถบเมนู Help เมนูใช้โปรแกรม Adobe Flash ที่มาพร้อมกับผลิตภัณฑ์และลิงก์ไปยังเว็บไซต์ Adobe (แหล่งข้อมูลช่วยเหลือและสนับสนุน) 3.2 หน้าที่และการทำงานของสเตจและพื้นที่การทำงาน (Stage and Pasteboard) ส่วนประกอบของสเตจ (Stage) สีขาว และพื้นที่การทำงาน (Pasteboaed) สีเทา ประกอบด้วย 7 ส่วนดังนี้ ภาพที่ 3.5 ส่วนประกอบสเตจ (Stage) และพื้นที่การทำงาน (Pasteboard) https://sites.google.com/site/flashbykrupany/swn-prakxb-khxng-porkaerm-adobe-flash-cs6
8 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 1) แถบแสดงชื่อไฟล์ แสดงชื่อไฟล์ปัจจุบันที่กำลังใช้งาน 2) แถบสถานะซีน (Scene) แสดงชื่อไฟล์ปัจจุบันที่กำลังใช้งาน 3) แถบแก้ไขซีน (Edit Scene) สามารถเลือกซีนที่ต้องการแก้ไขได้ 4) สเตจ (Stage) พื้นที่สีขาวที่ใช้ทำงานสร้างชิ้นงานหรือจัดวางอ็อบเจกต์ 5) พื้นที่การทำงาน (Pasteboard) พื้นที่สีเทาบริเวณล้อมรอบสเตจ 6) แถบแก้ไขซิมโบล (Edit Symbols) สามารถเลือกซิมโบลที่ต้องการแก้ไขได้ 7) ย่อ/ขยายหน้าจอการทำงาน สามารถปรับขนาดหน้าจอตามความต้องการ 3.3 หน้าที่และการทำงานของพาเนล (Panels) พาเนล คือ หน้าต่างที่รวบรวมเครื่องมือสำหรับใช้ในการปรับแต่งอ็อบเจกต์ ซึ่งในFlash ได้มีการพัฒนาพาเนลต่าง ๆ ไว้อย่างเป็นหมวดหมู่ พาเนลสำคัญที่ควรรู้จัก มีดังนี้ 1) Property Inspector เป็นพาเนลที่ใช้แสดงคุณสมบัติแบบต่าง ๆ ของอ็อบเจกต์ที่ เราคลิกเลือก ซึ่งสามารถปรับแต่งคุณสมบัติเหล่านี้ได้ ทั้งนี้รายละเอียดที่ Property Inspector จะเปลี่ยนไปตามอ็อบเจกต์ที่เลือก ภาพที่ 3.6 พาเนล Properties https://www.google.com/searchperty
9 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 2) พาเนล Filters เป็นพาเนลที่ใช้ปรับแต่งหรือเป็นการใส่เอฟเฟกต์ให้กับ ตัวอักษรมูฟวี่คลิป และปุ่มกด 3) พาเนล Color เป็นพาเนลที่เลือกใช้สีและผสมสีตามที่ต้องการ ซึ่งที่จะนำไปใช้ ปรับแต่งสีให้กับทั้งภาพวาดและตัวอักษรได้อย่าง่ายดาย โดยมีให้เลือก 2 รูปแบบ คือ Color Mixer ใช้ผสมสีเองตามที่ต้องการ และ Color Swatches ใช้สีจากจานสีตามที่ โปรแกรมกำหนดมาให้ ภาพที่ 3.7 พาเนล Filters ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.8 พาเนล Color ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
10 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 4) พาเนล Library คือ หน้าต่างควบคุมเกี่ยวกับชุดวัตถุของโปรแกรม ได้แก่ Symbols, Buttons, Movies 5) พาเนล Code Snippets เป็นพาเนลที่ใช้สำหรับสร้างโค้ด ActionScript เพื่อให้ ชิ้นงานนั้นสามารถโต้ตอบกับผู้ใช้งานได้ เช่น ปุ่มกด ภาพที่ 3.9 พาเนล Library ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.10 Code Snippets ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
11 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 6) พาเนล Aling มีปุ่มคำสั่งในการจัดเรียงอ็อบเจกต์ให้เป็นระเบียบ เช่น ให้ จัดอยู่ในแนวเดียวกัน ชิดซ้าย ชิดขวา เรียงหน้ากระดาน หรือให้มีระยะเท่ากัน 3.4 หน้าที่และการทำงานของกล่องเครื่องมือ (Toolbox) เป็นแผงเครื่องมือที่รวบรวมเครื่องมือที่ช่วยให้คุณสามารถวาดภาพ ระบายสี และ ปรับเปลี่ยนชิ้นงาน หรือวัตถุได้อย่าง่ายและรวดเร็ว สังเกตว่าเครื่องมือถูกจัดกลุ่มเข้ากันด้วย ฟังก์ชันที่คล้ายกัน ภาพที่ 3.11 พาเนล Align ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.12 แผงเครื่องมือ ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
12 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 1) กลุ่มเครื่องมือการเลือก (Selection Tools) Selection Tool (V) เลือกวัตถุชิ้นงาน Subselection Tool (A) ปรับแต่งรูปทรงวัตถุชิ้นงาน Free Transform Tool (Q) ปรับแต่งวัตถุชิ้นงาน ยืดหด ย่อ หรือขยายขนาดของ วัตถุ Gradient Transform Tool (F) ปรับแต่งการไล่โทรสีแบบ Linear และ Radial 3D Rotation Tool (W) หมุนวัตถุ (ภาพและตัวอักษร) ตามแนวแกน X, Y และ Z ในมุมมอง 3 มิติ 3D Translation Tool (G) เคลื่อนที่วัตถุตามแนวแกน X, Y และ Z ในมุมมอง 3 มิติ Lasso Tool (L) กำหนดพื้นที่ด้วยการลากเส้นอิสระ 2) กลุ่มเครื่องมือการวาดและการพิมพ์ (Drawing and Type Tools) Pen Tool (P) วาดเส้นตรงหรือโค้งด้วยปากกา Add Anchor Point Tool (=) เพิ่มจุดแองเคอร์ Delete Anchor Point Tool (-) ลบจุดแองเคอร์ Convert Anchor Point Tool (C) ปรับเปลี่ยนเส้นโค้งให้เป็นมุม Text (T) พิมพ์ตัวอักษร Line (L) วาดเส้นตรง Rectangle Tool (R) วาดสี่เหลี่ยม Oval Tool (O) วาดวงกลม Rectangle Primitive Tool (R) วาดสี่เหลี่ยมแบบปรับแต่งรูปทรงได้ 1. ตารางแสดงหน้าที่และการทำงานของแผงเครื่องมือ (Tools) สามารถแบ่งกลุ่มเครื่องมือการใช้งานหลักออกเป็น 6 กลุ่มดังต่อไปนี้ 1) กลุ่มเครื่องมือการเลือก (Selection Tools) 2) กลุ่มเครื่องมือการวาดภาพและการพิมพ์(Drawing and Type Tools) 3) กลุ่มเครื่องมือตกแต่งและการแก้ไขภาพ (Retouching Tools) 4) กลุ่มเครื่องมือมุมมอง (Navigation Tool) 5) กลุ่มเครื่องมือสีและเส้น (Colors Area) 6) กลุ่มเครื่องมือตัวเลือกเพิ่มเติม (Options Area)
13 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 2) กลุ่มเครื่องมือการวาดและการพิมพ์ (Drawing and Type Tools) Oval Primitive Tool (O) วาดวงกลมแบบปรับแต่งรูปทรงได้ PolyStar Tool วาดรูปห้าเหลี่ยม (สามารถเพิ่มเหลี่ยมได้เอง) Pencil (Y) ดินสอวาดภาพ Brush Tool (B) ระบายสี Spray Brush Tool (B) พ่นสีสเปรย์ Deco (U) เติมลวดลายให้กับวัตถุชิ้นงาน 3) กลุ่มเครื่องมือตกแต่งและแก้ไขภาพ (Retouching Tools) Bone Tool (M) สร้างกระดูกให้กับวัตถุชิ้นงาน Bind Tool (M) ปรับแต่งการเคลื่อนไหววัตถุชิ้นงานที่สร้างด้วย Bone Tool Paint Bucket Tool (K) เทสีลงในวัตถุ Ink Bottle Tool (S) ใช้สำหรับใส่เส้นขอบให้กับ Object ที่ไม่มีเส้นขอบ Eyedropper (I) ดูดสีจากชิ้นงานที่ต้องการ Eraser (E) ลบเส้นหรือสีของวัตถุชิ้นงาน 4) กลุ่มเครื่องมือมุมมอง (Navigation Tool) Hand (H) เลื่อนหรือย้ายหน้าจอการทำงานให้สะดวกต่อการ ทำงาน Zoom (Z) ย่อ หรือขยาย หน้าจอการทำงาน 5) กลุ่มเครื่องมือสีและเส้น (Colors Area) Stroke Color กำหนดสีเส้น Fill Color กำหนดสีพื้น Black and white กำหนดเส้นเป็นเส้นสีดำและพื้นเป็นสีขาว Swap Colors สลับสีเส้นกับสีพื้น
14 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 6) กลุ่มเครื่องมือตัวเลือกเพิ่มเติมจะแสดงด้านล่างเมื่อคลิกกลุ่มเครื่องมือที่ 1-5 (Options Area) Snap to Objects จัดตำแหน่งอิงจุดกึ่งกลาง (Center Point) ของวัตถุ Smooth ลดเหลี่ยมของวัตถุชิ้นงาน หรือทำให้ขอบมน Straighten ทำให้วัตถุชิ้นงานเป็นเส้นตรง 3.5 หน้าที่และการทำงานของไทม์ไลน์ (Time line) ไทม์ไลน์อยู๋ด้านล่างของสเตจ เป็นพื้นที่กำหนดรายละเอียดการเคลื่อนไหวของชิ้นงานหรือ วัตถุ โดยการนำชิ้นงาน หรือวัตถุจัดวางเรียงต่อกันแต่ละช่วงเวลา จนกลายเป็นภาพเคลื่อนไหว หน้าต่างแสดงเส้นควบคุมเวลาสำหรับการนำเสนอผลงาน 1. ส่วนประกอบไทม์ไลน์ 1) Layer เลเยอร์ใช้สำหรับสร้างเฟรม โดยเฟรมทำงานบนเลเยอร์ 2) Show/Hide Layer แสดงหรือซ่อนเลเยอร์ 3) Lock/Unlock Layer ล็อก/ปลดล็อกเลเยอร์ 4) Show All Layer as Outlines แสดงเลเยอร์ทั้งหมดเป็นเส้นโครงร่าง 5) Play Head เส้นหัวอ่านเฟรมแต่ละช่อง 6) หมายเลขประจำเฟรม 7) Current Frame แสดงเฟรมที่หัวอ่านเฟรม กำลังเล่นในปัจจุบัน 8) Blank Key Frame คีย์เฟรมว่าง 9) Blank Frame เฟรมว่าง 10) New Layer สร้างเลเยอร์ใหม่ 11) New Layer สร้างโฟลเดอร์ใหม่ 12) Delete Layer ลบเลเยอร์ 13) ปุ่มควบคุมการเล่นเฟรม 14) ปุ่มแสดงเส้นเฟรม เพื่อสร้างปรับเปลี่ยนวัตถุเดี่ยว หรือวัตถุทั้งหมด 15) Frame Rate แสดงจำนวนเฟรมต่อ 1 วิ 16) Elapsed Time แสดงเวลาที่ใช้เป็นวินาที 17) Key Frame คีย์เฟรม จุดสีดำสำหรับกำหนดค่า เพื่อสร้างความเคลื่อนไหวในแต่ละ ช่วงเวลาให้กับคลิปวีดีโอจำเป็นต้องมีคีย์เริ่มต้น และคีย์สิ้นสุด 18) Action Script เฟรมที่สร้างคำสั่ง Script ภาพที่ 3.13 ส่วนประกอบไทม์ไลน์ ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
15 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 2. แป้นคีย์ลัดที่คว 1) F5 เพิ่มเฟรม 2) F6 เพิ่มคีย์เฟรม 3) F7 เพิ่มคีย์เฟรมว่าง 4) F8 แปลงเป็นซิมโบล 5) F9 เปิดหน้าต่างคำสั่ง Action Script 6) F12 การ Preview เอกสาร Flash ด้วยไฟล์ .HTML 7) Enter การทดสอบเอกสาร Flash บนไทม์ไลน์ 8) Ctrl + Alt + Enter การ Preview เอกสาร Flash ด้วยไฟล์ .swf 3) การเปลี่ยนชื่อเลเยอร์ 1) เลือกเลเยอร์ที่ต้องการเปลี่ยนชื่อ 2) ดับเบิ้ลคลิกที่เลเยอร์ และพิมพ์ชื่อเลเยอร์ที่ต้องการเปลี่ยนชื่อ 3) คลิกพื้นที่ว่างเพื่อใช้ชื่อใหม่ ภาพที่ 3.14 ภาพตัวอย่างการเปลี่ยนชื่อเลเยอร์ ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
16 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 4. การล็อกเลเยอร์ 1) คลิกที่จุดใต้ไอคอน 2) คลิก ล็อก เพื่อล็อกเลเยอร์ การล็อกเลเยอร์ เป็นการป้องกันการ เปลี่ยนแปลงเมื่อสร้างหรือแก้ไขชิ้นโดยไม่ตั้งใจ 3) เมื่อยกเลิก การล็อกเลเยอร์ คลิก สามารถแก้ไขงานในเลเยอร์ได้ 5. การสร้างเฟรม 1) เลือกเฟรม 48 ในเลเยอร์พื้นหลังการสร้างเฟรม 2) คลิกขวา เลือก Insert Frame หรือกดคีย์ลัด (F5) และเลือกแทรกเฟรม ภาพที่ 3.15 ภาพตัวอย่างการล็อกเลเยอร์ ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.16 ภาพตัวอย่างการเลือกเฟรม ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.17 ภาพตัวอย่างแทรกเฟรม ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
17 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 3) สร้างเฟรมในเลเยอร์ จนถึงจุดที่เลือกเฟรม 48 เรียบร้อย เมื่อกำหนดค่า เฟรมไว้ที่ 24 เฟรม ต่อวินาที ดังนั้นภาพเคลื่อนไหวปัจจุบันในเอกสาร Flash จึงใช้เวลาสองวินาที การเพิ่มเฟรมหลายเฟรม การเพิ่มเฟรมบนไทม์ไลน์ ยังมีวิธีการทำที่สะดวกและรวดเร็ว ดังนี้ 1) เลือกเฟรมหลายเฟรมบนไทม์ไลน์ 2) กดปุ่ม Shift บนแป้นพิมพ์ค้างไว้ 3) ใช้เมาส์คลิกเลือกที่จุดต้องการเพิ่มเฟรมหลายเฟรมในเลเยอร์ 4) คลิกขวา เลือก Insert Frame 5) บนไทม์ไลน์จะปรากฏเฟรมที่เลือกไว้ หรือใช้คีย์ลัดในการเพิ่มเฟรมหลายเฟรมบนไทม์ไลน์ โดย กด F5 บนแป้นพิมพ์บน ไทม์ไลน์จะปรากฏเฟรมที่เลือกไว้ 6. การสร้างคีย์เฟรม (Kye Frame) คีย์เฟรม คือ การเปลี่บยแปลงเนื้อหาบนสเตจ คีย์เฟรมจะถูกระบุไว้ในไทม์ไลน์เป็น วงกลมเล็กบนเฟรม หากคีย์เฟรมเป็นวงกลมว่าง เรียกว่า คีย์เฟรมว่าง (Blank Key Frame) หมายความว่าไม่มีการกระทำสิ่งใดในเฟรมนั้น หากคีย์เฟรมเป็นวงกลมสีดำ เรียกว่า คีย์เฟรม (Key-Frame) หมายความว่ามีการกระทำในเฟรมนั้น ๆ 6.1 ขั้นตอนการสร้างคีย์เฟรม 1) เลือกเฟรม 24 บนเลเยอร์ photo2 เมื่อเลือกเฟรม แฟลชจะแสดงหมายเลข เฟรมใต้ไทม์ไลน์ ภาพที่ 3.18 ภาพตัวอย่างแสดงเฟรมที่เพิ่มขึ้น ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.19 ภาพตัวอย่างการเลือกเฟรม ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
18 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 2) กดแป้นพิมพ์คีย์ลัด F6 เพื่อเพิ่มคีย์เฟรม 3) คีย์เฟรมว่างถูกเพิ่มขึ้นจะปรากฏในเลเยอร์ photo2 ในเฟรม 24 4) ในเลเยอร์ photo2 เลือกคีย์เฟรมว่าง ที่เฟรม 24 5) คลิกลากรูปภาพจาก พาเนล Library ไปยังสเตจ สังเกตว่า จากคีย์เฟรมว่าง (วงกลม ว่างเปล่า) เป็นคีย์เฟรม (วงกลมสีดำ) รูปภาพที่ถูกนำเข้ามาจะแสดงบนสเตจจนถึงเฟรม ที่ 48 เท่านั้น เมื่อคลิกเส้นหัวอ่านเฟรม (Play Head) บนไทม์ไลน์ไป จากเฟรมที่ 25 เลื่อนไปจนถึงเฟรมที่ 48 จะ เห็นว่ารูปภาพที่ถูกนำเข้าไปนั้น ยังแสดงอยู่บนสเตจ แต่เมื่อคลิกเลื่อนเส้นหัวอ่านจากเฟรม จากเฟรม ที่ 49 สังเกตว่ารูปภาพที่ถูกนำเข้าไปนั้น จะไม่แสดงบนสเตจ 6.2 การย้ายคีย์เฟรม 1) เลือกมร่าเลเยอร์ photo2 คลิกแล้วลากคีย์เฟรม 24 ไปที่เฟรม 12 ภาพที่ 3.20 ภาพปสดงการเพิ่มคีย์เฟรมว่าง ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.21 ภาพแสดงการเพิ่มคีย์เฟรม ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.22 ภาพแสดงการย้ายคีย์เฟรม ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
19 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 2) ย้ายคีย์เฟรม ไปที่เฟรม 12 สำเร็จ 6.3 การลบคีย์เฟรม การลบคีย์เฟรม ไม่ควรใช้ปุ่ม Delete ในการลบ เพราะทำให้เนื้อหาของคีย์ เฟรมบนสเตจหายไปทั้งหมด ซึ่งการลบคีย์เฟรม มี 2 วิธี 1) วิธีที่ 1 ลบด้วยคำสั่ง Clear Keyframe เลือกคีย์เฟรมที่ต้องการลบคลิกขวาและเลือก Clear Keyframe 2) วิธีลบด้วยคีย์ลัด เลือกคีย์เฟรม กดแป้นคีย์บอร์ด Shift + F6 คีย์เฟรมของคุณจะถูกลบ ออกจากไทม์ไลน์ 6.4 การสร้างโฟลเดอร์เลเยอร์ การสร้างโฟลเดอร์เลเยอร์ เป็นการจัดระเบียบเลเยอร์ให้ทำงานสะดวกมาก ขึ้น ซึ่งมีวิธีการ ดังนี้ 1. คลิกปุ่ม New Layer ที่ด้านล่าง ของ Timeline 2. ดับเบิลคลิก ที่โฟลเดอร์ใหม่และเปลี่ยนชื่อ 3. ลากเลเยอร์ที่สร้างไว้ทั้งหมดเข้าไปในโฟลเดอร์ ภาพที่ 3.23 ภาพแสดงการย้ายคีย์เฟรมสำเร็จ ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.24 ภาพแสดงคำสั่งการลบ Keryframe ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.25 ภาพแสดงสร้างโฟลเดอร์เลเยอร์ ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
20 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 7. การย้อนกลับจั้นตอนการทำงาน บางครั้งที่คุณปรับแต่งภาพแล้วเกิดความผิดพลาด หรือได้ผลลัพธ์ออกมาไม่ ตรงกับความไม่ต้องการ การย้อนกลับการทำงานน่าจะเป็นทางเลือกที่ดี โดยใช้ คำสั่ง Undo / Redo และ History โดยมีขั้นตอนการทำงาน ดังต่อไปนี้ 7.1 การใช้คำสั่ง Undo Undo การยกเลิกขั้นตอนการทำงานโดยไปที่คำสั่ง Edit > Undo Select None หรือกดคีย์ลัดบนแป้นพิมพ์ Ctrl + Z 7.2 การใช้คำสั่ง Redo Redo เป็นคำสั่งย้อนกลับการทำงานที่ถูก Undo ไว้โดยให้ไปที่ คำสั่ง Edit > Redo Select None หรือกดปุ่มคีย์บนแป้นพิมพ์ Ctrl + Y 7.3 การใช้พาเนล History การยกเลิกทำได้หลายขั้นตอนใน Flash วิธีง่ายที่สุดคือใช้ พาเนล History เป็นการแสดงรายการ 100 ขั้นตอนล่าสุดที่ได้ทำไว้ ซึ่งหากปิดโปรแกรม Flash จะเป็นการสร้างประวัติการ ทำงานทั้งหมดในพาเนล History ขั้นตอนการใช้พาเนล History มีดังต่อไปนี้ 1) เปิดหน้าต่างพาเนล History คลิกเมนู Window > เลือก Other Panels > เลือก History ภาพที่ 3.26 ภาพแสดงการเลือก Undo Select None ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.27 ภาพแสดงการเลือก Redo Select None ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
21 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 2) ปรากฏพาเนล History ภาพที่ 3.28 ภาพแสดงการเปิดพาเนล History ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.29 ภาพแสดงพาเนล History ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
22 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 3) คลิกเลือกไปยังขั้นตอนการแก้ไขที่ต้องการ หากลบขั้นตอนใน พาเนลประวัติแล้วดำเนินการข้นตอนเพิ่มเติมขั้นตอนที่ลบจะไม่สามารถใช้ได้อีก ต่อไป การทดสอบชิ้นงานบนสเตจ ขณะที่กำลังสร้างชิ้นงานในเอกสาร Flash สามารถดูตัวอย่างชิ้นงานโดยรวมเพื่อปรับเปลี่ยนแก้ไข ชิ้นงานได้ตลอดเวลา ด้วยขั้นตอนต่อไปนี้ 1) วิธีที่ 1 คลิกปุ่ม Play บนไทม์ไลน์ 2) วิธีที่ 2 กดปุ่ม Enter บนแป้นพิมพ์ 3) วิธีที่ 3 คลิก Control > เลือก Play การ Save (บันทึก) ไฟล์Flash เมื่อเราสร้างงานจากโปรแกรม Flash เสร็จเรียบร้อย การบันทึกไฟล์ Flash จะได้ไฟล์ชนิด.fla ซึ่งเป็นไฟลฺต้นฉบับ ไม่สามารถนำไปใช้งานได้ ก่อนนำไฟล์ภาพทำสร้างด้วย Flash ไปใช้งาน จำเป็นต้อง บันทึกในฟอร์แมตที่เหมาะสม 1) การบันทึก Save เป็นการบันทึกเอกสาร Flash ครั้งแรก 2) การบันทึก Flash As เป็นการบันทึกเอกสาร Flash โดยแยกข้อมูลที่จะบันทึกออกมาเป็น เอกสาร Flash อีกไฟล์ เป็นการบันทึกเอกสารให้เป็นชื่ออื่น 3) การบันทึกเป็น Flash As Template หากเราต้องการบันทึกชิ้นงานเป็นเทมเพลตเพื่อนำไปใช้ เป็นไฟล์ต้นแบบในการสร้างชิ้นงานอื่น ๆ ต่อไป โดยเราจะต้องกำหนดรายละเอียดและ คำอธิบายไว้ด้วยก่อนคลิกปุ่ม Save เพื่อบันทึกชิ้นงาน ภาพที่ 3.30 ภาพแสดงการเลือกปุ่ม Play ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
23 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว ขั้นตอนการบันทึกเอกสาร Flash 1) คลิกเมนู File 2) เลือก Save เพื่อบันทึกเอกสาร Flash หรือกดคีย์ลัดบนแป้นพิมพ์ (Ctrl + S) เลือก Save As เพื่อทำการบันทึกเอกสาร Flash ใหม่ หรือกดคีย์ ลัดบนแป้นพิมพ์ (Ctrl + Shift + S) 3) สังเกตว่าเอกสาร Flash ได้ผ่านการบันทึกแล้วหรือไม่ ก็ดูได้จากชื่อไฟล์ใน Title Bar หากมีเครื่องหมาย * แสดงว่ายังไม่ผ่านการบันทึก ภาพที่ 3.31 ภาพแสดงการบันทึกเอกสารFlash ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.32 ภาพแสดงเครื่องจุดสังเกตการณ์บันทึกเอกสาร Flash ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
24 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว การบันทึกอัตโนมัติ (Auto Save) การบันทึกเอกสาร Flash ยังมีอีกคุณสมบัติหนึ่ง คือ การบันทึกเอกสาร อัตโนมัติตามช่วงเวลาที่กำหนดค่าไว้ สามารถตั้งค่าไฟล์ Flash โดยเลือกบันทึก อัตโนมัติได้ ระหว่าง 1-1440 นาที (24 ชั่วโมง) และคุณสมบัติกู้คืนอัตโนมัติจะ สร้างไฟล์สำรองในกรณีที่เกิดความผิดพลาดจากโปรแกรม Flash 1. ขั้นตอนการบันทึกเอกสาร Flash อัตโนมัติ 1) คลิก Document เลือกเมนู Modify หรือกดคีย์ลัดบนแป้นพิมพ์ (Ctrl + J) 2) ปรากฏหน้าต่าง Document Settings 3) ทำเครื่องหมายถูกหน้า Auto Save กำหนดเวลาทุก ๆ 1 นาที 4) คลิก OK ภาพที่ 3.33 ภาพแสดงการเปิด Document ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.34 ภาพแสดงการตั้งค่า Document Settings ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
25 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว การเผยแพร่และนำไปใช้งาน (Publish) เมื่อสร้างชิ้นงาน Flash เสร็จแล้ว ก็มาถึงข้นตอนการเผยแพร่ชิ้นงาน ซึ่งสามารถตั้งค่านามสกุลไฟล์ที่ ต้องการนำไปใช้ในแต่ละประเภท 1. ลักษณะนามสกุถลไฟล์(Formats) Formats จะเป็นการเซตนามสกุลของไฟล์ที่จะถูกสร้างขึ้น ประกอบด้วย Flash (.swf) ไฟล์แฟลช HTML .(html) ไฟล์ html ที่จะถูกฝังโค้ดแฟลชให้โดยอัตโนมัติ Gif Image (.gif) ไฟล์ภาพประเภท gif JPEG Image .(jpg) ไฟล์ภาพประเภท jpg PNG Image (.png) ไฟล์ภาพประเภท png Window Projector (.exe) ไฟล์โปรเจกเตอร์นามสกุล exe Macintosh Projector ไฟล์โปรเจกเตอร์เครื่อง Macintosh นามสกุล app QuickTime with Flash Track (.mov) ไฟล์วีดีโอนามสุกล mov เปิดด้วย QuickTime Player 2. ขั้นตอนการเผยแพร่ชิ้นงาน (Publish) 1) คลิกเมนู File 2) เลือก Publish Settings หรือ กดคีย์ลัดบน แป้นพิมพ์ Ctrl + Shift + F12 ภาพที่ 3.35 ภาพแสดงการเปิดหน้าต่าง Publish Settings ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
26 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว Publish Settings เลือกนามสกุลไฟล์ที่ต้องการสร้างเมื่อกด Publish รวมถึง เซตค่าต่าง ๆ คีย์ลัด Ctrl + Shift + F12 Publish Preview เลือกดูผลลัพธ์แต่ละประเภทโดยจะเลือกดูได้เฉพาะทีเลือกไว้ในเมนู Publish Settings เท่านั้น Publish ทำการสร้างไฟล์นามสกุลต่าง ๆ ทั้งหมด ตามที่ได้เลือกไว้ใน Publish Settings คีย์ ลัด Alt + Shift + F12 3) ปรากฏหน้าต่าง Publish Settings 4) พิมพ์ชื่อเอกสารไฟล์ Flash ตรง Output File 5) ตรงช่อง Publish ติ๊กถูก Flash (.swf) 6) ตรงช่อง Other Formats ติ๊กถูก Formats ที่ต้องการ ในที่นี้เลือก HTML Wrapper และ Win Projector 7) คลิก Publish 8) คลิก OK ภาพที่ 3.36 ภาพสดงหน้าต่าง Publish Settings ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
27 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 9) ไฟล์ที่ได้จากการ Publish Settings การออกจากโปรแกรม เราสามารถออกจากโปรแกรม Flash ได้เมื่อจบการใช้งาน โดยมีวิธีดังนี้ 1) เลือกเมนู File 2) คลิก Exit หรือกดคีย์ <Ctrl> + Q ภาพที่ 3.37 ภาพแสดงตัวอย่างไฟล์ที่ได้จากการ Publish ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง ภาพที่ 3.38 ภาพแสดงการออกจากโปรแกรม Flash ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
28 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว 3) หากต้องการปรับเปลี่ยนหรือแก้ไขชิ้นงาน แล้วยังไม่ได้บันทึกไฟล์ไว้ จะปรากฏไดอะล็อกถามก่อนว่า จะ ต้องการ Save ไฟล์นี้หรือไม่ ถ้าเราต้องการให้คลิก Yes แต่ถ้าไม่ต้องการให้คลิก No ภาพที่ 3.39 ภาพแสดงหน้าต่างให้เลือกก่อนปิดโปรแกรม Flash ที่มา : จากการทบทวนวรรณกรรมของผู้เรียบเรียง
29 ความรู้พื้นฐานเกี่ยวกับโปนแกรมสร้างภาพเคลื่อนไหว บรรณานุกรม การสร้างการ์ตูน Animation ด้วยโปรแกรม Adobe Flash Professional CS 5 สืบค้นเมื่อวันที่18 เมษายน 2562 จาก http://www.100ydesign.com ธเนศ หาญใจ. (2552). การ์ตูนแอนิเมชัน. สืบค้นเมื่อวันที่ 10 พฤษภาคม 2562, จาก http://www.kanlayanee.ac.th/animation/web/animation.htm นรินทร์ เรืองแสน. (2551). สร้างการ์ตูน Animation ด้วย Flash. พิมพ์ครั้งที่ 2. กรุงเทพฯ : บริษัทพิมพ์ดี จํากัด.ปรกฤษฎิ์สายหัสดี. (ม.ป.ป). สอนการทํางานของโปรแกรม Adobe Flash CS 5 สืบค้นเมื่อวันที่ 13 พฤษภาคม 2562 จาก http://www.indeshttp://www.indeschool.net ปุณยวีร์ รุจิปริตานันท์ . ( 2553 ) . Flash Cartoon Animation , กรุงเทพฯ บริษัท พิมพ์ดี จํากัด ปุณยวีร์ รุจิปริตานันท์ . ( 2553 ) . Flash Cartoon Animation , กรุงเทพฯ โปร วิชั่น ศันสนีย์ จํากัด . ( ม.ป.ป. ) . ออกแบบการ์ตูนแอนิเมชัน 2 มิติ เรื่อง ความดีย่อมชนะทุกสิ่ง สืบค้น เมื่อ วันที่ 5 กุมภาพันธ์ 2562 จาก http://www.10musica.net/Tmr9kIXQQO6/2/ สิทธิชัย ทิพย์สิงห์. ( 2559 ) ความรู้เบื้องต้นเกี่ยวกับ Flash . [ ออนไลน์ ] . สืบค้นเมื่อวันที่ 15 มีนาคม 2562 จาก http://kroojan.com/flash/content/flash-intro.html สุชญา ธนสารกิตติ . ( 2556 ) . การสร้างภาพเคลื่อนไหวด้วยโปรแกรม Adobe Flash , สาขาวิชา คอมพิวเตอร์ธุรกิจ คณะเทคโนโลยีสารสนเทศ มหาวิทยาลัยราชภัฏพิบูลสงคราม. สุรพงษ์เวชกุวรรณมณี. ( 2550 ) พื้นฐานการสร้างงานเคลื่อนไหว 2 มิติ , กรุงเทพฯจูปิตัส จํากัด อิศเรศ ภาชนะกาญจน์ . ( 2557 ) . Flash CS6 Essential . นนทบุรี ไอ ซีดี Kannikabuuis . ( 2556 ) , เทคนิคการวาดภาพด้วยโปรแกรม Adobe Flash . สืบค้นเมื่อวันที่ 20 กุมภาพันธ์ 2562 จาก https://kannikabuuis.wordpress.com/2013/01/23/ Adobe Flash Narin Roungsan . ( 2551 ) สร้างการ์ตูน Animation ด้วย Flash , กรุงเทพฯ พิมพ์ดี