Tutorial : ทำพ่นสีเสปรย์ลงบนภาพ (BitmapData)

สวัสดีครับวันนี้นึกครึ้มอกครึ้มใจเลยเอาบทความการเล่นกับ BitmapData มาให้คนที่ยังไม่เคยเล่นศึกษาดูครับ
ตัวอย่างนี้เป็นตัวอย่างง่ายๆ คือการ Paint สีลงบนรูปของเราโดยจะพ่นแบบ Spary นึกถึงเครื่องมือ Spray
ของ Pintbrush ได้เลยครับ มาเริ่มกันเลยดีกว่านะครับ
ตัวอย่าง
<a href="http://www.codeartschool.com/test/myBitmapDataSpray.swf" target="_blank">http://www.codeartschool.com/test/myBitmapDataSpray.swf</a>
1. สร้าง MC ขึ้นมาตัวนึงเอารูปอะไรก็ได้ใส่เข้าไปใน MC นั้น ตั้งชื่อ Instant Name ว่า "mc"
2. แปะโค๊ดข้างล่างนี้ที่เฟรม

โค้ด:

import flash.display.BitmapData;//import การทำงานกับ BitmapData
var color:Number=0xFFFFFF;//เปลี่ยนค่าสีได้
var radius:Number=30; //รัศมีของ Spray

var myBMP:BitmapData=new BitmapData(mc._width,mc._height); //สร้างตัวแปร Bitmap ขึ้นมาก่อนทำงานกับ Bitmap Data
myBMP.draw(mc); //วาดภาพตัว mc ลงใน Bitmap Data ก่อน
onMouseDown=function(){//เมื่อคลิกเมาส์
onMouseMove=function(){ //สร้าง onMouseMove ขึ้นมา
for(i=1;i<=30;i++){ //วนลูป for เพื่อใส่จุดสีลงไป
myBMP.setPixel(_root._xmouse-mc._x+(random(radius)-(radius/2)),_root._ymouse-mc._y+(random(radius)-(radius/2)),color); // สั่งใส่จุดสีลงไป
}
mc.attachBitmap(myBMP,1); //update ภาพลงใน mc
}
}
onMouseUp=function(){ // เมื่อปล่อยเมาส์
delete onMouseMove; // ลบ onMouseMove ทิ้ง
}

สำหรับหลายๆคนที่สงสัยว่าเรา attachMovie ตัว MC ออกมาแปะก็ได้ใช่ไหมครับ คำตอบถือได้ครับ แต่ทำด้วย BitmapData จะดีกว่าเพราะว่า การที่เรา attach เอา Movie Clip มาแปะก็เท่ากับว่าเพิ่มจำนวน Object เข้าไปใน Stage ของเรา พอพ่นสีมากๆเข้า Object มากๆขึ้น Flash ก็เริ่มอืดครับ แต่ถ้าทำด้วย Bitmap Data มันจะไม่อืดเพราะมันจะเห็นรูปนี้เป็น Object ชิ้นเดียวเท่านั้นไม่ว่าจะพ่นลงไปนานเท่าไหร่ก็ตาม

หวังว่าคงได้ความรู้กันบ้างนะครับ

 BitmapData 

[มังกร]

เริ่ดดดแปะๆก่อน วันหน้าจะมาอ่าน วันนี้ต้องกลับห้องละ 

update โค๊ด as3 ครับ

โค้ด:

import flash.display.BitmapData;

var color:uint = 0xffffff;
var radius:Number = 30;
var bmp:BitmapData = new BitmapData(mc.width,mc.height);
bmp.draw(mc);
addEventListener(MouseEvent.MOUSE_DOWN,StartDrag);
addEventListener(MouseEvent.MOUSE_UP,StopDrag);
function Move(e:MouseEvent):void
{
   for(var i: int =1;i<30;i++)
   {
      bmp.setPixel(root.mouseX - mc.x + (Math.random() * radius - (radius/2)),root.mouseY - mc.y + (Math.random() * radius - (radius/2)),color);
   }
   var myBitmap:Bitmap=new Bitmap(bmp);
   mc.addChild(myBitmap);
}
function StartDrag(e:MouseEvent):void
{
   addEventListener(MouseEvent.MOUSE_MOVE,Move);
}
function StopDrag(e:MouseEvent):void
{
   removeEventListener(MouseEvent.MOUSE_MOVE,Move);
}

  รักป๋าตี้ที่สุดเลย..