3204-2102 เทคนิคการสร้างภาพเคลื่อนไหว

2 จุดประสงค์รายวชิ า 1. เข้าใจการสร้างภาพเคลอื นไหวคอมพวิ เตอร์ 2. มที กั ษะในการสร้างภาพเคลือนไหวคอมพวิ เตอร์ 3. มีคณุ ลกั ษณะนิสยั ทีพงึ ประสงค์ และเจตคติทดี ีในวิชาชีพคอมพวิ เตอร์ธรุ กิจ สมรรถนะรายวิชา 1. แสดงความรู้เกยี วกบั หลกั การสร้างภาพเคลือนไหวในงานธรุ กิจ 2. สร้างภาพเคลอื นไหวด้วยคอมพวิ เตอร์ คาํ อธิบายรายวชิ า ศกึ ษาและปฏิบตั เิ กยี วกบั ภาพเคลอื นไหว ประเภทและชนิดของไฟล์ภาพแบบ Bitmap ภาพ แบบ Vectorหลกั การ สร้างภาพเคลือนไหว การจดั การไฟล์ภาพเคลอื นไหว การเลอื กใช้โปรแกรมสร้างภาพเคลือนไหว การนาํ เสนอผลงาน การ ประยกุ ต์ใช้งานภาพเคลอื นไหวในงานธุรกจิ กรณีศกึ ษา

3 บบที่ 1 ความรเู้ บือ้ งตน้ เกยี่ วกบั Flash 1.1 โปรแกรม 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(อะโดบี แฟลช) ซ่ึงยังหมายถึง Macromedia Flash Player และโปรแกรมอื่น ๆ ที่ใช้ในการเขียนส่ือมัลติมีเดียท่ีเอาไว้ใช้สร้างเน้ือหาเก่ียวกับ Flash ซ่ึงตัว Flash Player พัฒนาและเผยแพร่โดย อะโดบีซิสเต็มส์ (เร่ิมต้นพัฒนาโดยบริษัท ฟิวเจอร์แวร์ ตอนหลังเปล่ียนเป็น แมโครมีเดีย ซ่ึงภายหลังถกู ควบรวมกจิ การเขา้ กับ Adobe .swf ไฟล์ .swf เป็นไฟล์ที่สมบรู ณ์, ถกู compiled แล้ว ไมส่ ามารถแก้ไขได้อีกสามารถเล่น ได้ในเคร่ืองทตี่ ิดตงั้ โปรแกรม Flash Player .fla ไฟล์ .fla เป็นไฟล์ต้นฉบับของโปรแกรม Flash โปรแกรมที่ใช้เขียน Flash สามารถแกไ้ ขได้ และ compile ให้เปน็ ไฟล์ .swf ได้ .flv ไฟล์ .exe เป็นไฟล์ท่ีถูก compiled แล้ว เป็น Application ซ่ึงได้รวมเอาโปรแกรม เสริม (Flash Player) เข้าไว้ด้วยกันไม่สามารถแก้ไขได้สามารถเล่นได้กับเคร่ือง คอมพิวเตอร์ เคร่ืองทไี่ ม่ไดต้ ดิ ตัง้ โปรแกรมเสริม

4 1.2 การเปิดใช้งานโปรแกรม วธิ ที ี่ 1 ดบั เบิลคลกิ รูปสญั ลักษณ์ icon Desktop ดงั ภาพ วธิ ีท่ี 2 คลิกปมุ่ Start > Programs > Macromedia > Macromedia Flash 8 โปรแกรมจะเริ่มทางานแล้วเข้าสหู่ นา้ ต่างตอ้ นรบั ดังภาพ

5 1.3 สว่ นประกอบของโปรแกรม Flash 8 หมายเลข 1 คือ Title Bar แสดงปุ่มควบคุมหลัก (Control Menu) ชื่อโปรแกรม และปุ่มควบคุม หน้าตา่ งโปรแกรม หมายเลข 2 คอื Menu Bar แสดงรายการคาสั่งตา่ งๆ ของโปรแกรม หมายเลข 3 คือ Toolbar แสดงปุ่มเคร่ืองมือการทางานมาตรฐานของโปรแกรม เช่น ปุ่มเปิดงานใหม่ เปดิ ไฟล์เอกสาร, จัดเกบ็ ไฟล์ เปน็ ต้น หมายเลข 4 คอื Toolbox แสดงปมุ่ เครือ่ งมอื เก่ยี วกับการวาดภาพ สร้างภาพ หมายเลข 5 คอื Timeline หน้าตา่ งแสดงเสน้ ควบคมุ เวลาสาหรบั การนาเสนอผลงาน ประกอบดว้ ยสว่ น ทางาน เกี่ยวกับ Layer และ Timeline หมายเลข 6 คอื Stage พื้นท่ีส่วนท่ีใช้ในการวางวัตถุต่างๆ หรืออาจจะเรียกว่า \"เวที\" เมื่อมีการนาเสนอ ผลงานจะ แสดงเฉพาะวตั ถุบน Stage เท่านั้น หมายเลข 7 คือ Panel หน้าตา่ งควบคุมฟังก์ชนั งาน ซ่งึ มีหลายฟังก์ชนั (หลายหนา้ ต่าง)

6 แถบคาสง่ั (Menu Bar) แถบคาส่ัง (Menu bar) ประกอบด้วยคาสั่งต่าง ๆ สาหรับใช้งานทั่วไป เหมือนโปรแกรมอื่น ๆ ไดแ้ ก่ เมน Fู ile, Edit, Insert, Modify, Text, Commands, Control, Windows และ Help แถบเครือ่ งมือ (Tool Bar) ในการเปดิ ใชง้ านครั้งแรกแถบเครอ่ื งมอื จะไมแ่ สดงให้คลกิ ที่เมนู Windows > Toolbars > แลว้ คลิก ทาเครอ่ื งหมายถูกท่ี Main, Controller และ Edit Bar ดังภาพ กล่องเครอ่ื งมือ (Toolbox) กล่องเคร่ืองมือ (Toolbox) เป็นส่วนท่ีเก็บเคร่ืองมือต่างๆ เพ่ือให้สามารถเรียกใช้งานได้สะดวกและ รวดเรว็ ข้นึ แบ่งเปน็ กลมุ่ ตา่ งๆ เพ่อื สะดวกในการเรยี กใช้งาน ดงั ภาพ 1. รายละเอยี ดกลมุ่ เคร่อื งมือสาหรบั เลือก

7 2. รายละเอียดกลมุ่ เคร่ืองมือสาหรับวาดและตกแต่งภาพ 3. รายละเอยี ดกลมุ่ เคร่ืองมอื สาหรับปรับมมุ มอง 4. รายละเอียดกลุ่มเครอ่ื งมือสาหรบั ปรับสีเส้นและสพี ้นื หลงั 5. ถาดเคร่ือง (Palate Tool) อยดู่ ้านขวามอื ของหนา้ จอเช่น ถาดปรบั แตง่ สี ถาดเกบ็ ทรพั ยกรต่างๆ ถาดปรับแต่งสี (Color Mixer Palate) ถาดเก็บทรัพยากรต่างๆ (Library Palate) เช่น ใช้เลือกสเี ส้นและสีพนื้ หลงั รวมถึงผสมสีแบบตา่ งๆ ซิมโบล เสียง ภาพ วิดโี อ เป็นตน้

8 Timeline Frame และ Layer Timeline เปน็ ส่วนท่ีกาหนดความสั้นยาวของมูฟวี่ (Movie) Frame เปน็ ส่วนท่เี ก็บข้อมูลซ่งึ อาจเป็นคาส่ัง รปู ภาพหรือข้อความท่ีแสดงให้ผู้ชมได้เห็น Layer เปน็ สว่ นทีเ่ กบ็ ข้อมลู แยกออกจากกันเปน็ ชนั้ ๆเหมือนแผน่ ใสเพือ่ งา่ ยตอ่ การจัดการและแก้ไข Stage เปน็ พ้นื ทีแ่ สดงมฟู ว่ี (Movie) ท่ีอยใู่ นเฟรม (Frame) และ เลเยอร์ (Layer) 1. ปมุ่ แสดงหรือซ่อน Timeline 11. ปุ่มลบเลเยอร์ 2. เลเยอร์ เฟรมจะต้องวางบนเลเยอร 12. ปมุ่ เซ็นเตอรเ์ ฟรม 3. ป่มุ ซ่อนและแสดงข้อมลู บนเลเยอร์ 13. ปุ่มโอเนยี น สกิน 4. ปมุ่ อนุญาตให้แก้ไขและป้องการแก้ไข 14. ปุ่มโอเนยี น สกนิ แบบโครงรา่ ง 15. ปุ่มแก้ไขเฟรมหลายเฟรมพร้อมกัน ข้อมลู บนเลเยอร์ 16. ปุม่ โอเนียนมาร์คเกอร์ 5. เพลย์เฮดหวั อา่ นเฟรมแต่ละช่อง 17. บอกตาแหนง่ หมายเลขเฟรมในขณะทางาน 6. หมายเลขประจาเฟรม 18. บอกความเร็วการแสดงกเ่ี ฟรมต่อวนิ าที 7. เฟรม เปรยี บเหมอื นช่องเก็บเหตุการณข์ องมูฟวี่ 19. เวลาทีใ่ ชใ้ นการมูฟว่ี 8. ปมุ่ สรา้ งเลเยอร์ใหม่ 9. ปุม่ สร้างไกด์เลเยอร์ 10.ปุ่มสร้างโฟล์เดอรเ์ ลเยอร์

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

10 ขน้ั ที่ 3 ใช้เมำสล์ ำกเสน้ ปรบั ขนำด เปล่ยี นสี ตำมตอ้ งกำร ตัวอยำ่ งกำรประยุกต์ใช้งำน 1. ลำกเสน้ ตำมตอ้ งกำร 2. คลิกลกู ศรสดี ำ (Selection Tool) 3. คลกิ เสน้ ที่ไม่ต้องกำรแล้ว ลบทิ้งโดยกด ปุ่ม Delete ที่ Keyboard 4. เลอื กภำพวัตถุ โดยดับเบลิ คลกิ หรือลำกคลมุ ภำพวตั ถุ 5. ตกแต่งเสน้ โดยกำหนดท่ี หน้ำต่ำง Properties

11 ตวั อย่างงานท่ีสร้างจาก Line Tool แบบฝึกสรา้ งวัตถุดว้ ย Line Tool

12

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

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

15

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

17 ตวั อย่างงานท่ีวาดดว้ ย Oval Tool แบบฝึกสรา้ งวัตถดุ ว้ ย Oval Tool

18

19

20 4. การสร้างวัตถดุ ้วย Ractangle Tool เคร่ืองมอื Rectangle Tool (เครอื่ งมอื วำดรูปสี่เหลี่ยม)เปน็ เครอื่ งมอื สำหรับวำด สี่เหลยี่ ม ซง่ึ มี ส่วนประกอบเป็นเสน้ รอบรปู และสพี ืน้ เช่น เดยี วกบั วงร/ี วงกลม นอกจำกนน้ั เครอ่ื งมือนี้ยัง มี modifier สำหรบั ปรบั มุมใหม้ ลี กั ษณะโคง้ มนได้อกี ด้วย ขั้นที่ 1 คลิกเลือกเคร่อื งมือท่ี Tool Box ขั้นที่ 2 กำหนดควำมโค้งมนของสเ่ี หลีย่ มได้โดยคลกิ ท่ี สญั ลักษณ์ ดังภำพ ขั้นท่ี 3 คลิกลำกเมำสบ์ นสเตจในแนวทำงทะแยงตำม ขนำดท่ีต้องกำรถ้ำตอ้ งกำรส่ีเหล่ียมจตั รุ สั ใหก้ ด คยี ์ Shift คำ้ งไว้ขณะท่ีลำกเมำส์ ตวั อยา่ งงานท่ีวาดดว้ ย Rectangle Tool

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

22

23 5. การสรา้ งวตั ถุด้วย Pencil Tool เครื่องมอื Pencil มไี วส้ ำหรบั ลำกเสน้ Line โดยอำศัยเสน้ ทำงที่ เมำส์ผำ่ น เหมำะสำหรับงำนท่ี เป็น Freehand หรอื มีอปุ กรณ์เสริม Option (ตวั เลอื ก) - Straighten - ลำยเส้นท่ีออกมำจะถูกดดั ให้ตรง - Smooth - ลำยเส้นทอ่ี อกมำจะถูกดดั ให้เป็นส่วนโค้ง - Ink – ลำยเสน้ ท่ีออกมำจะถูกดดั ใหส้ ่วนโคง้ แต่จะพยำยำมรักษำเส้นเดิมให้ มำกทสี่ ดุ ข้นั ท่ี 1 คลกิ เลอื กเครื่องมือท่ี Tool Box ขน้ั ท่ี 2 กำหนดลักษณะของเส้นทีห่ น้ำต่ำง Options ข้ันที่ 3 ใชเ้ มำส์ลำกเส้น ตำมตอ้ งกำร ตวั อย่างงานทีส่ ร้างด้วย Pencil Tool

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

25

26 6. การสรา้ งวัตถดุ ้วย Brush Tool กำรสรำ้ งวัตถุ (Object) ด้วยเคร่ืองมือ Brush Tool เครอื่ งมอื Brush มไี วส้ ำหรับลำกเส้นวำดเป็น รูปรำ่ งตำ่ งๆ โดยอำศยั เส้นทำงทเี่ มำส์ผำ่ น เหมำะสำหรับงำนที่เป็นFreehand หรือมีอุปกรณ์เสริม ขนั้ ที่ 1 คลิกเลือกเครื่องมือท่ี Tool Box ขน้ั ที่ 2 กำหนดขนำดและลกั ษณะของเส้นที่หน้ำตำ่ ง Options ขัน้ ที่ 3 เลอื กสีจำกสีของพ้ืนหลังแลว้ ใช้เมำส์ลำกเส้นตำมต้องกำร ตัวอยา่ งงานท่สี รา้ งด้วย Brush Tool

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

28

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

30 ขั้นที่ 3 ใชเ้ มำสจ์ ับที่จดุ ที่ต้องกำร แล้วดึงหรือยำ้ ยไปในทิศทำง หรอื ตำแหน่งที่ต้องกำร และสำมำรถคลิกท่ีจุดของแฮนเดลิ แดรกเมำสล์ ำกปรบั เปล่ียนรปู รำ่ งตำมต้องกำร การเลอื กพนื้ ที่อิสระด้วยเครือ่ งมือ Lasso Tool เคร่อื งมือ Lasso Tool ใชส้ ำหรบั เลือกอ็อบเจ็กต์ โดยกำรวำดเสน้ แบบอิสระรอบอ็อบเจ็กต์ ตวั อยำ่ งกำรใชง้ ำน ขน้ั ท่ี 1 Import ภำพกรำฟิกเข้ำมำในโปรแกรม โดยคลกิ File > Import > Import to Stage แล้วเลือกภำพ ตำมตอ้ งกำร ขัน้ ที่ 2 คลกิ ทภี่ ำพ แลว้ คลิกเมนู Modify > Break Apart เพ่อื ทำใหภ้ ำพ Bitmap กลำยเป็นภำพเวคเตอร์ เพอ่ื จะได้แก้ไขได้ ขน้ั ที่ 3 คลกิ เลอื กเคร่ืองมือ Lasso Tool ขัน้ ที่ 4 คลิกเมำส์ท่ีภำพ 1 ครง้ั แลว้ แดรกเมำสล์ ำกบรเิ วณทต่ี ้องกำรเลอื กในภำพ

31 ขั้นที่ 5 ใชเ้ มำส์จบั ภำพบรเิ วณทเี่ ลือก ยำ้ ยตำแหน่งตำมต้องกำร การเลอื กพ้ืนท่เี ป็นรปู ทรงต่างๆ กำรเลอื กพ้นื ท่เี ป็นรปู ทรงตำ่ งๆ ดว้ ยเครือ่ งมือ Polygon Mode ตัวอย่ำง กำรใชง้ ำน ขั้นที่ 1 Import ภำพกรำฟิกเข้ำมำในโปรแกรม โดยคลกิ File > Import > Import to Stage แล้วเลอื กภำพ ตำมตอ้ งกำร ภำพที่ 1 ขน้ั ที่ 2 คลกิ ทภี่ ำพ แลว้ คลกิ เมนู Modify > Break Apart เพอ่ื ทำให้ภำพ Bitmap กลำยเป็นภำพเวคเตอร์ เพ่ือจะได้แก้ไขได้ ขน้ั ท่ี 3 คลกิ เลือกเคร่อื งมือ Lasso Tool ขน้ั ท่ี 4 คลิกเลือก Polygon Mode

32 ขั้นท่ี 5 แล้วใช้เมำส์คลิกจุดเริ่มต้นในภำพ 1 ครัง้ แล้วเลอื่ นเมำสไ์ ปตำแหน่งที่ 2 แลว้ คลิก 1 ครั้ง และเลื่อนไปตำแหน่งถดั ไป และคลิก ตอ้ งกำรกจ่ี ุดก็ได้ จนกว่ำจะวนรอบบรรจบทจ่ี ุดเริ่มต้น ขั้นที่ 6 ใช้เมำส์จับภำพบรเิ วณท่ีเลือก ยำ้ ยตำแหนง่ ตำมต้องกำร การหมนุ และปรับเปลยี่ นวัตถุ (Object) ด้วยเคร่ืองมอื Free Transform Tool เครือ่ งมือ Free Transform Tool มีหน้ำท่คี ือกำรหมนุ วัตถุ หรอื ปรับเปลี่ยนขนำด กลับทิศทำงวตั ถุ ตวั อย่ำง กำรใช้งำน ขน้ั ที่ 1 เคร่อื งมือ Free Transform Tool ขน้ั ที่ 2 คลิกเลอื กวตั ถุทีต่ ้องกำร

33 ขั้นท่ี 3 กำรหมนุ กำรย่อ-ขยำย กำรปรับเปลี่ยนทศิ ทำงของวัตถุ

34 กำรดดั บิดวตั ถุ

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

36 ข้ันที่ 5 ทาจนครบข้อความที่ตอ้ งการดังภาพ ข้นั ท่ี 6 ทดสอบ Movie โดยกดCtrl+ Enter หรอื คลกิ เมนู Control > Test Movie จะได้ไฟล์ Movie เป็น .swf รปู แบบที่ 2. การสรา้ งภาพเคลือ่ นไหวแบบย้ายตาแหนง่ วตั ถุ ขน้ั ที่ 1 สร้างวัตถขุ ึ้นมา 1 ชนิ้ จะวาดเป็นภาพธรรมดา ขน้ั ท่ี 2 คลกิ ขวาทเ่ี ฟรมท่ี 2 หรอื กด หรอื ทาเป็น ซิมโบลก็ได้ บนเฟรมท่ี 1 ปุ่ม F6 เพ่ือเพิม่ คยี เ์ ฟรม (Keyframe)

37 ขนั้ ที่ 3 ใชล้ ูกศรสีดา (Selection Tool) คลิกแล้วย้าย ข้นั ท่ี 4 ทาซ้าขั้นท่ี 2 คอื คลิกขวาท่ีเฟรมถัดไป ตาแหน่งวัตถขุ ยับจากตาแหน่งเดมิ เลก็ น้อย คือเฟรมที่ 3 หรอื กดป่มุ F6 เพ่ือเพิ่มคยี เ์ ฟรม จากนัน้ ใชล้ ูกศรสีดา (Selection Tool) คลิกแลว้ ยา้ ยตาแหน่งวตั ถุอีกเล็กน้อย ข้ันที่ 5 เพมิ่ คยี เ์ ฟรมต่อไปเร่ือยๆ และ ขยบั วตั ถุ ไปเรือ่ ยจนกระท่ังไดภ้ าพเคลื่อนไหวตามตอ้ งการ จากน้นั ตรวจสอบการเคล่อื นไหวโดยการคลกิ ที่หวั อา่ น(Play Head) แล้วลากเมา้ สซ์ ้าย-ขวา

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

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

40 2. การสร้างภาพเคลือ่ นไหวแบบ Shape Tween Shape Tween คือการสร้างภาพเคลอื่ นไหวใหว้ ตั ถุเปล่ียนรปู ร่างจากรปู หนึง่ เป็นอีกรปู หนง่ึ เชน่ จาก รูป สเี่ หลย่ี มเป็นรปู วงกลม หรอื จากรูปเปน็ ข้อความ เปน็ ต้น ข้นั ที่ 1 คลิกที่เฟรมท่ี 1 แล้ววาดรปู วตั ถุขน้ึ มาหนึ่งรปู ข้นั ที่ 2 คลกิ ที่เฟรมท่ี 1 (สาคัญมากเพราะถา้ ไมค่ ลิกตัวเลือกจะไมแ่ สดงข้นึ ในหน้าตา่ ง Properties) เลือกคาสงั่ Shape ในช่อง Tween ขัน้ ท่ี 3 คลกิ ขวาที่เฟรมท่ี 20 แล้วเลอื กคาส่ัง Insert Keyframe

41 ขนั้ ท่ี 4 คลกิ เฟรมที่ 20 แลว้ กดปุม่ Delete ลบวตั ถุเดิมออกตอนนีบ้ นไทม์ไลน์จะมีแถบเสน้ ประสเี ขยี ว ขั้นท่ี 5 วาดรปู ทต่ี อ้ งการให้เปลย่ี นลงไปในเฟรมที่ 20 ขน้ั ที่ 6 กดปุ่ม Ctrl+Enter เพอ่ื ทดสอบการเปลย่ี นแปลงจะเห็นภาพค่อยๆเปลีย่ นจากรูปหน่งึ เปน็ อีกรปู หน่ึง

42 3. การสรา้ งภาพเคลอ่ื นไหวแบบ Motion Tween การสรา้ งภาพเคล่ือนไหวแบบนี้ เปน็ การเคลื่อนทข่ี องเน้ือหาจากจดุ หนงึ่ ไปยังอีกจดุ หน่งึ หรือเปลย่ี น คณุ สมบัตจิ ากแบบหนึง่ ไปเป็นอีกแบบหน่ึง เหมาะสาหรบั การทาภาพเคล่อื นไหว แบบต่อเนอื่ งสม่าเสมอ เช่น เมฆลอย พัดลมกาลังหมุน ยานบนิ รถกาลังแลน่ เปน็ ตน้ 1. การสรา้ งภาพเคลอื่ นไหวแบบลอยในแนวเสน้ ตรง ข้นั ที่ 1 คลิกเลือกคยี ์เฟรมจดุ เรม่ิ ต้น ขั้นท่ี 2 สรา้ งวัตถุ หรือเนื้อหาตามตอ้ งการ ขนั้ ที่ 3 คลกิ ขวาทค่ี ีย์เฟรม คลกิ เลือกเมนู Create Motion Tween

43 ข้นั ที่ 4 กาหนดระยะหา่ งจากจุดแรกตามต้องการ ขัน้ ท่ี 5 จบั วัตถทุ ่ี stage แลว้ ปรบั เปลย่ี น เช่น หา่ ง 15 เฟรม คลกิ ท่ีเฟรมที่ 15 แลว้ เพ่มิ คยี ์ คุณลักษณะ เช่น ยา้ ยตาแหนง่ ย่อ-ขยาย เปลีย่ นสี เฟรม โดยกด F6 หรือคลกิ เมนู Insert > Timeline > หรืออ่นื ๆ Keyframe ตามตอ้ งการ ขน้ั ที่ 6 ทดสอบ Movie โดยกด Ctrl+ Enter หรือ จะไดไ้ ฟล์ Movie เป็น .swf คลิกเมนู Control > Test Movie เมื่อสรา้ งวัตถุและกาหนดการเคลอ่ื นไหวแลว้ ในขณะทวี่ ตั ถุเคลอื่ นไหว สามารถปรบั แตง่ ใหม้ ี คณุ ลกั ษณะอื่นๆ ไปพร้อมๆ กันได้ โดยกาหนดเพิม่ เตมิ ไดจ้ าก หน้าตา่ ง Properties

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

45 ขนั้ ท่ี 3 คลกิ ขวาเฟรมท่ี 20 เลอื กคาส่งั Insert Keyframe แลว้ ขยายรูปใหใ้ หญ่ขนึ้ ดว้ ย Free Transform Tool ขน้ั ท่ี 4 กดปุ่ม Ctrl+Enter เพอ่ื ดูตัวอย่างภาพเคล่ือนไหว จะเหน็ ภาพค่อยใหญ่ขึน้ 6. สร้างการเคลือ่ นไหวแบบปรบั ใหค้ ่อยชัดหรือจางลง (Alpha) Alpha เป็นการปรับค่าความโปร่งของวตั ถุถ้าคา่ alpha (อัลฟา่ ) มาก เราจะมองวัตถุน้นั ชัดเจน ถา้ คา่ alpha น้อยลงเราจะมองเห็นภาพวตั ถนุ ้ันเลอื นๆ

46 ขั้นตอนที่ 1 คลกิ ทีเ่ ฟรมท่ี 1 แลว้ วาดรปู ท่ีตอ้ งการลงไป ขั้นท่ี 2 คลกิ ขวาที่เฟรมที่ 1 แล้วเลอื กคาส่ัง Create Motion Tween ข้นั ท่ี 3 คลกิ ขวาเฟรมที่ 20 เลือกคาส่งั Insert Keyframe แลว้ ขยายรปู ให้ใหญ่ขึ้นดว้ ย Free Transform Tool (ไม่ขยายก็ได้)

47 ขน้ั ท่ี 4 คลิกที่วตั ถุเพอ่ื ให้ตวั เลือกปรากฏข้นึ ที่ Properties จากน้นั เลอื ก Alpha แล้วปรับคา่ Alpha เปน็ ค่าท่ี น้อยลง จะไดภ้ าพทีจ่ างลงมองทะลุพื้นหลังได้ ขัน้ ท่ี 5 กดปุ่ม Ctrl+Enter เพ่อื ดูตัวอยา่ งภาพเคลือ่ นไหว จะเห็นภาพค่อยใหญ่ขน้ึ และจางหายไปแต่ตาแหนง่ ไมเ่ ปลย่ี นเนอ่ื งจากเราไม่ได้ย้ายตาแหน่งของวัตถุ นักเรยี นสามารถเปลี่ยนให้วงกลมใหญเ่ ป็นเล็กได้ หรือ จากจางไปเข้มได้เพยี งปรับเปลย่ี นคา่ คุณสมบตั ิ ของวัตถุตามคียเ์ ฟรมเร่ิมตน้ และคียเ์ ฟรมปลายทาง

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

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

50 ขัน้ ท่ี 8 ปรับแต่งเพิ่มเติมโดยการคลกิ ทตี่ าแหนง่ เฟรมที่ 1 แล้วเลือก Orient to path ใน หนา้ ตา่ ง Properties เพอ่ื กาหนดทศิ ทางการหนั ของวตั ถุให้ถกู ต้อง (หมายเหตุ* เวลาทดสอบจะมองไม่เหน็ เสน้ ทีเ่ ราวาดนะครบั ) 8.การสร้างภาพเคลื่อนไหวแบบ Mask Layer การ Mask คอื การบงั ส่วนที่ไมต่ ้องการให้เห็นไว้ และโชว์เฉพาะส่วนท่ตี ้องการ ลกั ษณะเดยี วกับการส่อง ไฟไปทีว่ ัตถุ ในความมืด ซึ่งจะเห็นวตั ถุเฉพาะบริเวณที่ไฟส่องเท่าน้นั