วิธีการแรสเตอร์มูวี่คลิปที่มีการเคลื่อนไหว by Ziah

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

AS3 Animation Class

คลาส AS3 Animation สร้างโดยเว็ป efnx.com โดยคลาสนี้จะมีฟังก์ชั่นต่างๆที่เอาไว้รับบิทแมพหลายๆตัวแล้วแปลงออกมาให้เป็นบิทแม็พที่เคลื่อนไหวได้ครับ

ดาวน์โหลดได้ที่ blogefnxcom-animation.zip

วิธีการใช้

Animation จะมีพารามิเตอร์ 3 ค่านะครับซึ่งไม่จำเป็ฯต้องมีก็ได้คือ numFrames:int = 1 width:int = 0 และ height:int = 0

ซึ่งในการนำมาใช้ก็เริ่มจากการอิมพอร์ทและสร้างตัวแปรกันก่อนเลยครับ

import com.efnx.utils.Animation;     //ทำการอิมพอร์ตคลาส

var character:Animation = new Animation();     //สร้างตัวแปร

ในขั้นถัดมาเราจะต้องทำการแรสเตอร์มูวี่คลิปของเรานะครับบ แล้วจึงนำไปใส่อนิเมชั่น สมมติว่ามูวี่คลิปของเราชื่้อ myMC นะครับ

var i:int;

for(i = 1;i<=myMC.totalFrames;i++){ //สร้างการวนลูปทำตามจำนวนครั้งของเฟรมในมูวี่คลิปของเรา

var bitmapData:BitmapData = new BitmapData(myMC.width,myMC.height); //สร้างบิทแมพดาต้าให้มีขนาดเท่ากับมูวี่คลิปของเรา

bitmapData.draw(myMC); //ทำการวาดมูวี่คลิปของเราให้เป็นบิทแมพครับ

character.appendBitmapData(i,bitmapData);  //เป็นคำสั่งของคลาส Animation ให้ทำการเก็บบิทแมพที่ได้วาดแล้วโดยมีการใส่พารามิเตอร์สองตัวคือ เฟรมที่ และ บิทแม็พดาต้าของเรา ซึ่งในที่นี้ก็คือ i หรือก็คือเฟรมของมูฟวี่คลิปและบิทแม็พดาต้าที่เราได้วาดในบรรทัดก่อนหน้า

myMC.nextFrame(); //ทำการเลื่อนเฟรมของมูฟวี่คลิปของเราเป็นเฟรมถัดไปเพื่อที่จะได้ทำการใส่บิทแม็พเพิ่ม

}

character.appendFrameScript(myMC.totalFrames,repeat); //ทำการเรียกฟังก์ชั่นที่ชื่อ repeat ในเฟรมสุดท้ายของของตัวแปร Animation ของเรา

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

function repeat():void
{
character.gotoAndPlay(1); // ฟังก์ชั่นของ Animation ที่ชื่อและการทำงานเหมือนกับของมูฟวี่คลิปเลยครับ ซึ่งก็คือกลับไปเฟรมแรกใหม่
}

เพียงเท่านี้ตัวแปร character ที่มีคลาสเป็น Animation ก็จะมีหน้าตาที่เหมือนกับมูฟวี่คลิป myMC แต่เพียงเปลี่ยนเป็นบิทแมพแล้วล่ะครับ
ศึกษาเพิ่มเติมได้จาก AS3 Animation Class to Replace Movieclip