Back to Top
sunshine
Untitled Document

   

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 


  สาระการเรียนรู้

1. หลักการสร้างเอฟเฟ็กต์ภาพเคลื่อนไหวด้วยมาสก์เลเยอร์ 
2. สร้างเอฟเฟ็กต์ภาพเคลื่อนไหวด้วยมาส์กเลเยอร์ได้

 

 มาทำแบบทดสอบก่อนเรียนก่อนนะคะ  
    แบบทดสอบ หน่วยที่ 12    








Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

    การสร้างเอฟเฟ็กต์ให้กับภาพเคลื่อนไหว

     เป็นการสร้างเอฟเฟ็กต์ภาพเคลื่อนไหวโดยแปลงจากรูปทรงหนึ่งไปเป็นอีกรูปทรงหนึ่ง โดยโปรแกรมแฟลช จะคำนวณเฟรมแทรกระหว่างทั้งสองคีย์เฟรมให้เอง

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



แปลงรูปสุนัขเป็นรูปแมว

       เอฟเฟ็กต์แอนิเมชันแบบเชฟทวีน จะทำให้กับออบเจ็กต์ที่เป็นรูปทรงเท่ากัน หากเป็นอินสแตนซ์บิตแมป หรือ ข้อความ เราจะต้องใช้คำสั่ง Break apart เพื่อแปลงให้เป็นลายเส้นพื้นฐานก่อน จึงจะนำมาใช้ได้ (ในกรณีที่เป็นข้อความเราจะต้องใช้คำสั่ง Break Apart ถึงสองครั้ง จึงจะได้ตัวอักษรที่เป็นรูปทรงพื้นฐาน ดังที่ได้กล่าวไปแล้วในหน่วย “ซิมบอล และ อินสแตนซ์”) ดังตัวอย่างในรูปเราต้องการแปลงรูปสุนัขให้เป็นรูปแมวที่ซิมบอลให้กลายเป็นรูปทรงธรรมดาก่อน ดังนี้

 

       จากนั้นคลิกเลือกเลเยอร์ที่จะวางรูปทรงเริ่มต้น และกำหนดเฟรมเริ่มต้นภาพเคลื่อนไหวให้เป็นคีย์เฟรมคลิกลากรูปสุนัขมาวางบนสเตจ และใช้คำสั่ง Break Apart เพื่อแปลงรูปนี้เป็นลายเส้น แล้วกำหนดช่องเฟรมสุดท้ายของภาพเคลื่อนไหวเป็นคีย์เฟรม จะเห็นว่าโปรแกรม Flash จะก็อปปี้รูปสุนัขในคีย์เฟรมก่อนมาไว้ในคีย์เฟรมนี้ให้โดยอัตโนมัติ ให้เราลบรูปทรงดังกล่าว และคลิกลากแมวมาวางบนสเตจและใช้คำสั่ง Break Apart เพื่อแปลงรูปนี้เป็นลายเส้น

 

 

ต่อไปให้คลิกขวาที่คีย์เฟรมแรก เลือกคำสั่ง Create Shape Tween  เมื่อกดคีย์  Enter  จะเห็นการเปลี่ยนรูปทรงจากรูปสุนัขเป็นรูปแมว

 

 

ผลลัพธ์การสร้างเอฟเฟ็กต์แบบแปลงรูปร่าง

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

    สร้างเอฟเฟกต์ภาพเคลื่อนไหวด้วยมาสก์เลเยอร์

       การใช้มาสก์เลเยอร์เป็นเหมือนกับการเจาะช่างหรือหน้าต่างให้มองเห็นเลเยอร์ทีอยู่ใต้เลเยอร์ดังกล่าวได้เพียงบางส่วน ดังตัวอย่างอย่างเราสร้างเราสร้างเลเยอร์มาสก์เลเยอร์นี้ ผลที่ได้คือภาพในเลเยอร์ที่อยู่ภายใต้จะถูกบดบงทั้งหมดยกเว้นที่มองเห็นผ่านช่องวงรีดังรูป

 

 

 

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

 

 

 


Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

   การประยุกต์ใช้มาสก์เลเยอร์

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

 1.ให้เราสร้างรูปทรง ข้อความ หรือนำอินสแตนซ์มาวางบนมาสก์เลเยอร์ ที่จะใช้มองทะลุผ่านไปเป้นเลเยอร์อื่นที่เรียงซ้อนอยู่ โดยบริเวณสีพื้นจะเปลี่ยนเป็นโปร่งใส และบริเวณไม่มีสีจะเป็นทึบ ดังตัวอย่างเรากำหนดไว้เป็นรูปวงกลมที่มีสีพื้นแบบเกรเดียนท์ เพราะต้องการให้มองทะลุไปเห็นเนื้อหาของเลเยอร์ภายใต้แต่แสดงเอฟเฟกต์โปร่งใสสลับทึบตามการไล่สีของวกลมด้วย (แต่ไม่สามารถใช้เอฟเฟกต์ได้ เพราะโปรแกรม Flash ไม่สนใจลักษณะลายเส้นที่เราใช้วาดรูปทรง หรือสีอะไรที่ใช้)

 

  2.คลิกขวาที่เลเยอร์SportLightและเลือกคำสั่งMask เพื่อแปลงเลเยอร์นี้เป็นมาสก์เลเยอร์ สังเกตได้จากไอคอน Mask Layer ที่แสดงตรงชื่อเลเยอร์โดยเลเยอร์ที่อยู่ใต้มาสก์เลเยอร์1 ชั้นจะถูกบดบังและเราจะมองเห็นเนือหาในเลเยอร์นี้ผ่านรูปวงกลมที่กำหนดไว้บนมาสก์เลเยอร์เท่านั้น

 

 

  3.ให้เราคลิกมาสก์เลเยอร์และคลิก เพื่อปลดล็อก (ในขณะที่ปลดล็อกมาสก์เลเยอร์จะไม่ทำงานคือจะไม่บังเนื้อหาในเลเยอร์ที่เรียงซ้อนอยู่ข้างใต้ จนกว่าเราจะล็อกเลเยอร์นี้อีกครั้ง) จากนั้น ให้ใช้โมชั่นทวีนเคลื่อนที่มาสก์เลเยอร์ และคลิก เพื่อล็อกมาสก์เลเยอร์อีกครั้ง

 

 

เมื่อเสร็จสิ้นขั้นตอน และกดคีย์  Enter ดูผลลักพธ์ที่ได้ เราจะได้ภาพสุนัขที่แสดงลอดออกมาจากมาสก์เลเยอร์เป็นบางส่วน (ที่เคลื่อนที่ตามมาสก์เลเยอร์ไปเรื่อย ๆ เหมือนการส่องไฟสปอตไลท์)  ดังนี้

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

   

 

 

  

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

 

   

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player