LevelUp! Studio » movieclip https://blog.levelup.in.th Experience the new world. Fri, 26 May 2017 10:06:07 +0000 th hourly 1 http://wordpress.org/?v=3.8.1 วิธีการแรสเตอร์มูวี่คลิปที่มีการเคลื่อนไหว https://blog.levelup.in.th/2011/04/30/how-to-raster-animated-movie-clip%e0%b8%a7%e0%b8%b4%e0%b8%98%e0%b8%b5%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%81%e0%b8%a3%e0%b8%aa%e0%b9%80%e0%b8%95%e0%b8%ad%e0%b8%a3%e0%b9%8c%e0%b8%a1%e0%b8%b9%e0%b8%a7/ https://blog.levelup.in.th/2011/04/30/how-to-raster-animated-movie-clip%e0%b8%a7%e0%b8%b4%e0%b8%98%e0%b8%b5%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%81%e0%b8%a3%e0%b8%aa%e0%b9%80%e0%b8%95%e0%b8%ad%e0%b8%a3%e0%b9%8c%e0%b8%a1%e0%b8%b9%e0%b8%a7/#comments Sat, 30 Apr 2011 16:17:34 +0000 http://blog.levelup.in.th/?p=1017 ในปกติส่วนต่างที่เราใช้แสดงในแฟลชนั้นจะเป็นการแสดงผลของเวคเตอร์ คือเป็นข้อมูลรูปที่ซูมเข้าและออกแล้วไม่มีการแตก แต่ถ้าเรามีจำนวนเวคเตอร์ที่มีการเคลื่อนไหวมากๆนั้นจะทำให้แฟลชของเรามีอาการกระตุก ซึ่งวิธีแก้ก็คือทำการแรสเตอร์เวคเตอร์ตัวนั้นให้เป็นบิทแม็พ หรือเป็นภาพๆหนึ่งเท่านั้น ซึ่งจะทำให้ภาพนั้นคงที่ซูมแล้วก็จะแตก และอาจจะใช้เวลาโหลดนานกว่าเดิมแต่มันจะไม่ทำให้แฟลชของเรากระตุกครับ ซึ่งปกติแล้วการแรสเตอร์จะทำให้เวคเตอร์ ณ เวลาหนึ่งกลายเป็นภาพหนึ่งภาพ แล้วถ้าเราจะแปลงมูฟวี่คลิปที่มีการเคลื่อนไหวให้กลายเป็นบิทแมพที่มีการเคลื่อนไหวบ้างล่ะเราจะทำอย่างไร วันนี้ผมมีคลาสตัวหนึ่งมาเสนอครับ

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

]]>
https://blog.levelup.in.th/2011/04/30/how-to-raster-animated-movie-clip%e0%b8%a7%e0%b8%b4%e0%b8%98%e0%b8%b5%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%81%e0%b8%a3%e0%b8%aa%e0%b9%80%e0%b8%95%e0%b8%ad%e0%b8%a3%e0%b9%8c%e0%b8%a1%e0%b8%b9%e0%b8%a7/feed/ 1