Animation

Animation

          องค์ประกอบที่สำคัญสำหรับการสร้างงานมัลติมีเดีย คือการสร้างผลงาน เมื่อเข้าเยี่ยมชมผลงานเกิดความชื่นชม น่าติดตามและเกิดความประทับใจ การสร้าง Animation เพื่อนำไปใช้ในรูปแบบต่างๆ สามารถทำได้โดยใช้เครื่องมือที่ได้เรียนรู้มาทำการสร้างเป็นออบเจ็กต์ในรูปแบบที่ต้องการ ซึ่งสามารถทำได้หลายๆวิธี เช่น Frame by Frame คือการนำออบเจ็กต์หรือภาพหลายๆภาพมาต่อกันเป็นผลงาน Animation , Motion Tweening คือ การสร้างแอนิเมชั่นให้มีการเคลื่อนไหว , Tweening Shape คือ ใช้กับออบเจ็กต์ตั้งแต่ 2 ชิ้นและต้องการแปลงจากชิ้นหนึ่งไปยังอีกชิ้นหนึ่งได้ ,Guide Layer คือ ต้องการสร้างแอนิเมชั่นให้เคลื่อนไหวไปตามเส้นไกด์ , Mask Layer คือ ต้องการสร้างผลงาน Animation ในลักษณะเหมือนกับมีแสงไฟกำลังหมุนและส่งลงบนภาพ

การสร้างภาพเคลื่อนไหว

Timeline Effects 

เป็นรูปแบบการเคลื่อนไหวที่โปรแกรมได้เตรียมไว้ให้แล้ว...

Copy to Grid

          เป็นการก็อปปีอ็อบเจ็คมาวางเรียงกันเป็นลักษณะตาราง แต่จะไม่มีการเคลื่อนไหวใช้คำสั่ง
Insert->Timeline Effect->Assistants->Copy to Grid
Grid Size / ROWS            จำนวนแถวของอ็อบเจ็ค
Gird Size / COLUMNS    จำนวนคอลัมน์ของอ็อบเจ็ค
Grid Space / ROWS         ระยะห่างระหว่างอ็อบเจ็คในแต่ละแถว
Grid Space / COLUMNS ระยะห่างระหว่างอ็อบเจ็คในแต่ละคอลัมน์

Distributed Duplicate

          แสดงการเคลื่อนไหวโดยค่อยๆ แสดงอ็อบเจ็คที่ได้ก็อบปีมาวางไว้ด้านหลังอ็อบเจ็คต้นฉบับ 
ใช้คำสั่ง Insert->Timeline Effect->Assistants->Distributed Duplicate
Number of Copies จำนวนอ็อบเจ็คทั้งหมดที่ต้องการแสดง
Offset Distance X   ระยะห่างของอ็อบเจ็คแต่ละชิ้นในแนวนอน
Offset Distance Y   ระยะห่างของอ็อบเจ็คแต่ละชิ้นในแนวตั้ง
Offset Rotation       กำหนดองศาให้อ็อบเจ็คแต่ละชิ้นหมุน
Offset Start Frame จำนวนเฟรมที่ปรากฏในแต่ละรูป ถ้ากำหนดเป็นศูนย์ภาพจะไม่เคลื่อนไหว ถ้า                                            กำหนดจำนวนมากจะทำให้การเคลื่อนไหวช้าลง
Exponential  รูปแบบการเพิ่ม-ลดขนาด

Distributed Duplicate (Cont.)

Scale  ปรับขนาดอ็อบเจ็ค
Change Color  มีการไล่โทนสี
Final Color  สีที่ค่อยๆ เปลี่ยนไป
Final Alpha  ความโปร่งใสไปยังอ็อบเจ็คชิ้นสุดท้าย

Blur

          ทำให้อ็อบเจ็คค่อยๆ เบลอและจางลงเรื่อยๆ
ใช้คำสั่ง Insert->Timeline Effect->Effects->Blur
Effect Duration   จำนวนเฟรมในการแสดงภาพเคลื่อนไหว
Resolution            จำนวนอ็อบเจ็คที่แสดงให้เห็นจังหวะของการเบลอ
Scale                        ขนาดของอ็อบเจ็คโดยเปรียบเทียบเป็นจำนวนเท่า
Allow Horizontal Blur กำหนดให้เบลอตามแนวนอน
Allow Vertical Blur       กำหนดให้เบลอตามแนวตั้ง

Direction of Movement กำหนดทิศทางการเบลอโดยคลิกปุ่มลูกศร

Drop Shadow

          สร้างเงาให้กับอ็อบเจ็ค แต่จะไม่มีการเคลื่อนไหว
ใช้คำสั่ง Insert->Timeline Effect->Effects->Drop Shadow
Color สีของเงา
Alpha Transparency ความโปร่งใสของเงา
Shadow Offset X  ระยะห่างของเงาในแนวนอน
Shadow Offset Y  ระยะห่างของเงาในแนวตั้ง

Expand

          ใช้ย่อ-ขยายอ็อบเจ็ค มักนำมาใช้กับข้อความ
ใช้คำสั่ง Insert->Timeline Effect->Effects->Expand
Effect Duration จำนวนเฟรมในการแสดงภาพเคลื่อนไหว
Expand/Squeeze/Both เลือกรูปแบบการขยายขึ้น/ย่อลง/ย่อแล้วขยาย
Direction of Movement กำหนดทิศทางการย่อ-ขยาย
Shift Group Center by X ย้ายตำแหน่งตรงกลางในแนวนอน
Shift Group Center by Y ย้ายตำแหน่งตรงกลางในแนวตั้ง
Fragment Offset ระยะห่างของอ็อบเจ็คที่ขยายออกหรือย่อเข้า
Change Fragment Size by HEIGHT เปลี่ยนแปลงขนาดความสูงขณะย่อ-ขยาย
Change Fragment Size by WIDTH เปลี่ยนแปลงขนาดความกว้างขณะย่อ-ขยาย

Explode

          ใช้ทำให้อ็อบเจ็คแตกกระจายออก
ใช้คำสั่ง Insert->Timeline Effect->Effects->Expand
Effect Duration   จำนวนเฟรมที่ใช้แสดงภาพเคลื่อนไหว
Direction of Explosion    ทิศทางการแตกกระจาย
Arc Size X   ความโค้งของการกระจายในแนวนอน
Arc Size Y   ความโค้งของการกระจายในแนวตั้ง
Rotate Fragments  องศาการหมุน
Change Fragments Size by X   เปลี่ยนขนาดความกว้าง
Change Fragments Size by Y   เปลี่ยนขนาดความสูง
Final Alpha   กำหนดความโปร่งใสไปยังอ็อบเจ็คชิ้นสุดท้าย

Transform

          ใช้สำหรับเคลื่อนย้ายอ็อบเจ็ค พร้อมกับการเปลี่ยนแปลงต่างๆ ของอ็อบเจ็ค
ใช้คำสั่ง Insert->Timeline Effect->Transform/Transition->Transform
Effect Duration  จำนวนเฟรมที่ใช้ในการแสดงภาพเคลื่อนไหว
Change Position by/Move to Position  ตำแหน่งการเคลื่อนที่
Scale  ปรับเปลี่ยนขนาด
Rotate or Spin  องศาการหมุน หรือจำนวนรอบในการหมุน
Times  ทิศทางการหมุน
Change Color กำหนดให้มีการเปลี่ยนสีขณะเคลื่อนที่
Final Color     กำหนดสีไปยังอ็อบเจ็คชิ้นสุดท้าย
Final Alpha    กำหนดความโปร่งใสไปยังอ็อบเจ็คชิ้นสุดท้าย
Motion Ease   จังหวะการเคลื่อนที่ ตั้งค่าเป็นลบจะเคลื่อนที่จากช้าไปเร็ว ตั้งค่าเป็นบวกจะเคลื่อนที่จากเร็วไปช้า

Transition

          ใช้สำหรับการเคลื่อนไหวโดยให้ค่อยๆ หายไป หรือค่อยๆ ชัดขึ้น
ใช้คำสั่ง Insert->Timeline Effect->Transform/Transition->Transition
Effect Duration  จำนวนเฟรมในการแสดงภาพเคลื่อนไหว
In/Out  การปรากฏแบบจางแล้วค่อยชัดขึ้น หรือชัดแล้วค่อยจางลง
Fade      กำหนดให้เปลี่ยนแบบการจาง
Wipe     กำหนดให้เปลี่ยนแบบค่อยๆ หายไป
Motion Ease  จังหวะการเคลื่อนที่

สามารถแก้ไข Effect โดยเลือกอ็อบเจ็คที่ต้องการ คลิกเมนู 

Modify > Timeline Effects > Edit Effect

สามารถลบ Effect โดยเลือกอ็อบเจ็คที่ต้องการ คลิกเมนู
Modify > Timeline Effects > Remove Effect

สามารถแสดงงานที่สร้างขึ้นโดยคลิกเมนู 

Control > Test Movie

Frame-by-Frame

เป็นการสร้างภาพเคลื่อนไหวจากภาพนิ่งหลายเฟรมเรียงต่อกัน

โดยการกำหนดคีย์เฟรม (Key Frame) ขึ้น โดยคลิกขวาในเฟรมที่ต้องการ แล้วเลือก 

         Insert Keyframe หรือกดปุ่ม F7 โดยแต่ละคีย์เฟรมจะมีภาพที่แตกต่างกัน 

สามารถหน่วงเวลาการแสดงภาพในคีย์เฟรม โดยสร้างเฟรมต่อท้ายคีย์เฟรมนั้น โดยการคลิกขวา            ในเฟรมที่ต้องการ แล้วเลือก Insert Frame หรือกดปุ่ม F5

สามารถลบเฟรมที่สร้างขึ้น โดยคลิกขวาในเฟรมที่ต้องการ แล้วเลือก Remove Frames

Tween Animation

Motion Tween

เป็นการเคลื่อนที่ของภาพจากจุดหนึ่งไปยังอีกจุดหนึ่ง หรือเปลี่ยนคุณสมบัติจากแบบหนึ่งเป็นอีกแบบหนึ่ง

การสร้าง Motion Tween

• กำหนดคีย์เฟรมแรกซึ่งมีภาพในตำแหน่งเริ่มต้น
• กำหนดอีกเฟรมหนึ่งให้เป็นคีย์เฟรมถัดมา แล้วทำการเปลี่ยนตำแหน่งหรือเปลี่ยนคุณสมบัติของภาพนั้น
• คลิกขวาในเฟรมที่อยู่ระหว่างคีย์เฟรมแรกและคีย์เฟรมถัดมา แล้วเลือก Create Motion Tween จะปรากฏเส้นลูกศรระหว่างคีย์เฟรมนั้น

การปรับแต่งระหว่างการเคลื่อนไหว

สามารถปรับแต่งคุณสมบัติของอ็อบเจ็คเพื่อให้อ็อบเจ็คมีคุณสมบัติเปลี่ยนไปขณะเคลื่อนไหว 

โดยทำการคลิกเฟรมระหว่างการเคลื่อนไหว จะปรากฏ Property Inspector ตั้งค่า

Scale เลือกเพื่อให้ขนาดอ็อบเจ็คเล็กหรือใหญ่ให้สัมพันธ์กับจังหวะการเคลื่อนที่

Ease จังหวะในการเคลื่อนที่

Edit  ปรับจังหวะการเคลื่อนที่จากเส้นพาธ

Rotate หมุนอ็อบเจ็ค และระบุจำนวนรอบในการหมุน

Motion Path

สามารถกำหนดให้อ็อบเจ็คเคลื่อนที่ในเส้นทางที่ต้องการได้

หลังจากที่สร้าง Mot

ion Tween แล้ว สามารถสร้าง Motion Path ดังนี้

• ให้คลิกที่คีย์เฟรมแรก
• คลิกปุ่ม Edit Multiple Frames แล้วเลื่อน End Onion Skin ให้ครอบคลุมทุกเฟรมที่เคลื่อนไหว
• คลิกปุ่ม Add Motion Guide โดยเลเยอร์ Motion Guide จะต้องอยู่เหนือเลเยอร์อ็อบเจ็ค
• ใช้เครื่องมือ Pen หรือ Pencil วางเส้นทางการเคลื่อนที่
• คลิกที่คีย์เฟรมแรก จัดให้จุดกลางอ็อบเจ็คตรงกับจุดเริ่มต้นของเส้นทาง และคลิกที่คีย์เฟรมที่สอง จัดให้จุดกลางอ็อบเจ็คตรงกับจุดสิ้นสุดของเส้นทาง

Shape Tween

เป็นการเปลี่ยนแปลงจากรูปร่างหนึ่งไปอีกรูปร่างหนึ่ง

อ็อบเจ็คที่สามารถเคลื่อนไหวแบบนี้จะเป็นอ็อบเจ็คพื้นฐานที่วาดขึ้น หรือหากเป็นอ็อบเจ็คกลุ่มจะ            ต้องแยกส่วน (Break Apart) ก่อน โดยคลิกที่เมนู Modify > Break Apart

หากอ็อบเจ็คนั้นเป็นข้อความต้องทำการ Break Apart 2 ครั้ง

การสร้าง Shape Tween

• สร้างคีย์เฟรมเริ่มต้น และสร้างอ็อบเจ็ค
• คลิกที่คีย์เฟรมเริ่มต้น กำหนด Tween ที่ Property Inspector เป็น Shape
• สร้างคีย์เฟรมถัดมา และสร้างอ็อบเจ็คสิ้นสุด
• คลิกที่คีย์เฟรมที่สอง แล้วลบอ็อบเจ็คเริ่มต้นออก

ปรับรูปแบบระหว่างการเปลี่ยนแปลง

• Ease กำหนดจังหวะในการเคลื่อนที่
• Blend กำหนดรูปทรงการเปลี่ยนแปลง ให้เปลี่ยนอย่างราบเรียบ (Distributive) หรือให้คงมุมหรือเส้นตรงไว้ (Angular)

Mark Layer

สามารถมองภาพเลเยอร์ล่างโดยผ่านจากการเจาะทะลุอ็อบเจ็คในเลเยอร์บนที่กำลังเคลื่อนที่อยู่             โดยใช้เทคนิค Mark Layer

โดยสร้างเลเยอร์ล่างให้เป็นพื้นหลัง  และสร้างเลเยอร์บนทำการเคลื่อนที่แบบ Motion Tween              บนพื้นหลัง

จากนั้นคลิกขวาที่เลเยอร์บน เลือก Mask

Symbol 

          การสร้างชิ้นงานโดยใช้ Symbol และ Instance ทำให้การสร้างชิ้นงานสะดวก เนื่องจาก Symbol คือ ตัวแทนของออบเจ็กต์ที่สร้างขึ้นมาใช้งานใน Movie เมื่อต้องการสร้างออบเจ็กต์นั้นขึ้นมาใช้งานอีกจะได้ไม่ต้องสร้างขึ้นมาใหม่ให้สิ้นเปลืองเวลา เนื่องจากสามารถนำ Instance ของ Symbol ที่ทำ การสร้างขึ้นมาใช้งานแทนได้เลย สามารถเรียกใช้ซ้ำกี่ครั้งก็ได้แต่ขนาดแฟ้มข้อมูลไม่เพิ่มขึ้น นอกจากนี้ยังสะดวกต่อการปรับปรุงหรือเปลี่ยนแปลงเมื่อเปลี่ยนแปลง Symbol Instance ต่างๆที่เรียกจาก Symbol นี้จะเปลี่ยนแปลงโดยอัตโนมัติ

Symbol & Instance

         ซิมโบลคือภาพนิ่ง ภาพเคลื่อนไหว หรือปุ่ม ซึ่งเป็นต้นฉบับสำหรับการนำมาใช้ได้ไม่จำกัดจำนวนครั้งในรูปของ Instance เมื่อเรานำ Instance ของ Symbol มาใช้บนสเตจ เราสามารถปรับแต่ง Instance นั้นๆได้ เช่น เปลี่ยนสี ขนาด หมุน บิด ฯลฯ โดยที่การปรับแต่งนั้นจะไม่ส่งผลกระทบต่อ Symbol ต้นแบบและ Instance ตัวอื่นที่สร้างจาก Symbol เดียวกันนั้น แต่ถ้าเราแก้ไข Symbol มันจะไปปรับปรุง Instance ทุกตัวที่สร้างจาก Symbol ดังกล่าวโดยอัตโนมัติดังนั้นเมื่อนำ Symbol และ Instance มาใช้ในมูฟวี่จึงทำให้การแก้ไขมูฟวี่ทำได้ง่ายขึ้น

         นอกจากนั้นการใช้ Symbol ในการสร้างมูฟวี่ยังช่วยลดขนาดไฟล์ลงได้ เนื่องจากการอ้างอิงถึง Symbol  ต้องการพื้นที่ในการเก็บข้อมูลน้อยกว่า รวมถึงการเก็บรายละเอียดของออบเจ๊กใหม่แต่ละชิ้นก็ลดน้อยลงด้วย ตัวอย่างเช่น  สามารถลดขนาดไฟล์มูฟวี่ลงได้ถ้าแปลงภาพฉากหลังที่เป็นภาพนิ่งไปเป็น Symbol การใช้ Symbol ยังช่วยให้เล่นภาพได้เร็วขึ้น เนื่องจากบราวเซอร์ จะดาวโหลด Symbol ตัวหนึ่งมาเพียงครั้งเดียว

ประเภทของ Symbol

Symbol ที่คุณจะนำมาใช้ในมูฟวี่มี 3 ประเภท ซึ่ง Symbol แต่ละประเภทนั้นมีคุณสมบัติแตกต่างกัน ขึ้นอยู่กับจุดประสงค์ในการนำไปใช้งาน

• Movie Clip ซิมโบลสำหรับสร้างภาพเคลื่อนไหว สามารถใส่เสียงประกอบได้
• Button ซิมโบลสำหรับสร้างปุ่มใช้ตอบสนองต่อการกระทำของเมาส์
• Graphic ซิมโบลสำหรับอ็อบเจ็คหรือภาพนิ่ง

การสร้าง Symbol

การสร้าง Symbol จากออบเจ็คที่มีอยู่แล้ว

        เมื่อสร้าง Symbol จากออบเจ็คที่มีอยู่แล้วบนสเตจ มันจะเปลี่ยนออบเจ็คต้นแบบบนสเตจนั้น ให้กลายเป็น Instance โดยอัตโนมัติ  มีขั้นตอนดังนี้

• เลือกออบเจ็คบนสเตจ
• คลิกเมนู Modify->Convert to Symbol เลือก  Symbol ตามต้องการ

การสร้าง Symbol ใหม่

• ใช้คำสั่ง Insert->New Symbol  
• เลือกประเภทของ Symbol  ตามวัตถุประสงค์ของงาน

Buttons

โปรแกรม Flash ได้รวบรวมรูปแบบปุ่มต่างๆ ไว้เป็นไลบรารีให้ผู้ใช้สามารถเรียกใช้ได้ โดยที่ผู้ใช้ไม่ต้องสร้างปุ่มขึ้นเอง

คลิกเมนู Window > Common Libraries > Buttons

สามารถเลือกปุ่มที่ต้องการมาวางบนสเตจเพื่อใช้งาน

สถานะปุ่ม

สถานะของปุ่มจะประกอบด้วย 4 เฟรม

เฟรม Up แสดงเมื่อเมาส์ชี้อยู่ภายนอกขอบเขตปุ่ม

เฟรม Over แสดงเมื่อเมาส์ชี้อยู่ภายในขอบเขตปุ่ม

เฟรม Down แสดงเมื่อปุ่มถูกคลิก

เฟรม Hit ใช้กำหนดขอบเขตของปุ่ม

สถานะปุ่ม (Cont.)

ปุ่มที่สร้างขึ้นสามารถเปลี่ยนแปลงได้ตามสถานะต่างๆ

โดยสร้างปุ่มเริ่มต้น แล้วเลือกปุ่มที่สร้างขึ้น คลิกขวา เลือก Convert to Symbolกำหนดชนิดให้เป็น Button

ดับเบิลคลิกที่ซิมโบลปุ่มนั้น จะเข้าสู่โหมดของสถานะปุ่ม

สร้างคีย์เฟรมที่สถานะ Over แล้วเปลี่ยนแปลงลักษณะของปุ่ม

สร้างคีย์เฟรมที่สถานะ Down แล้วเปลี่ยนแปลงลักษณะของปุ่ม

สามารถทดสอบสถานะของปุ่มโดยคลิกเมนู Control > Test Movie

กลับสู่โหมดปกติ โดยคลิกที่ Scene1

การเปิด Library

การเปิด Library ทำได้โดยเลือกคำสั่ง Window->Library

ใน Library จะมีรายชื่อของ Symbol เรียงกันเป็นลำดับพร้อมทั้งรายละเอียดของแต่ละ Symbol เมื่อ            คลิกเลือก Symbol จากรายชื่อ จะปรากฏภาพตัวอย่างของ Symbol นั้นที่ด้านบนของ Library 

เมื่อสร้าง Symbol จะถูกเก็บเข้ามาไว้ใน Library โดยอัตโนมัติ 

         นอกจากนี้ใน Library ยังใช้เก็บรูปภาพบิตแมพ เสียง และ ไฟล์วิดีโอ ด้วยเช่นกัน

การเปลี่ยนแปลงคุณสมบัติของ Symbol

การเปลี่ยนแปลงคุณสมบัติของ Symbol สามารถทำได้โดย

       1. คลิกเมาส์ขวา บน Symbol ที่ต้องการกำหนดคุณสมบัติ

           เลือก Type->เลือกคุณสมบัติของ Symbol 

       2. หรือ คลิกที่ปุ่ม          ด้านล่างของ Library สามารถ

           เปลี่ยนชื่อ และประเภทของ Symbol ได้ใน

          ไดอะล็อกบ็อกซ์  Symbol Properties

การสร้าง Folder

สามารถสร้างโฟลเดอร์ขึ้นมาเพื่อให้ง่ายต่อการจัดเก็บ Symbol จำนวนมากๆ ซึ่งการใช้ โฟลเดอร์ของ Library ก็เหมือนกับการใช้โฟลเดอร์ของ Windows เช่นสามารถสร้างโฟลเดอร์ซ้อนกันหลายๆชั้น และเมื่อต้องการย้าย Symbol ระหว่างโฟลเดอร์ก็ใช้เมาส์คลิกลากชื่อหรือไอคอนของ Symbol นั้นไปปล่อยบนโฟลเดอร์ปลายทาง

การทำสำเนา Symbol

การสำเนา Symbol เพื่อสร้าง Symbol ใหม่ซึ่งมีเนื้อหา

       เหมือนกับ Symbol เดิมที่มีอยู่แล้ว วิธีการทำสำเนามีดังนี้

       1. คลิกเลือก Symbol ใน Library 

       2. เลือกคำสั่ง Duplicate จากเมนู Option ของ Library หรือ

          คลิกขวาที่ชื่อ Symbol แล้วเลือกคำสั่ง Duplicate จากเมนูลัด

การแก้ไข Symbol

การแก้ไข Symbol โปรแกรมจะทำการปรับปรุง Instance ทั้งหมด

ของ Symbol นั้นที่มีการใช้ในมูฟวี่ให้โดยอัตโนมัติ  สามารถเปลี่ยนได้ 2 วิธีดังนี้

       1. คลิกเลือก Symbol ใน Library  คลิกขวาที่ชื่อ Symbol แล้ว

           เลือกคำสั่ง Edit จากเมนูลัด หรือ ดับเบิ้ลคลิกที่ Symbol

       2.  ดับเบิ้ลคลิกที่อ็อบเจ็ค บนสเตจ