Flash Tuts : รูปเบลอๆ เอา Mouse Over แล้วชัด

Posted by kkool | Filed under Flash Actionscript & Design

Please enable Javascript and Flash to view this Flash video.

ทฤษฎีง่ายๆก็คือ มี 3 ชั้น ล่างสุดเป็นภาพรถเบลอ ชั้นสองเป็นภาพรถชัดเจน ส่วนอีกอันเขียนให้ mask เลื่อนตาม cursor โดยมีลูกเล่นนิดนึง

เริ่มเลยดีกว่า

1. เปิด new เป็น Actionscript 3 นะครับ ผมใช้ขนาด 400×220 px
2. หารูปงามๆที่เหมาะกับการค้นหา อิอิ ในที่นี้ผมใช้รูปรถเฟอราร่า สีเหลือง …


3. Import ใส่ Library ไว้ก่อน (File -> Import -> Import to Library)
4. ลากเอามาแปะบน stage จัด aling กลางเป๊ะ
5. Convert รูปนั้นให้เป็น movie clip ด้วยการคลิกรูป กดF8 ตั้งชื่อว่า “Blurred image”
6. ใส่ filter>Blur ให้มัน ตามชอบใจ (ผมใส่ไป 11)
7. สร้าง Layer ใหม่ ให้อยู่ข้างบนนะ ลากรูปรถคันเดิมจาก Libraly มาวางบน stage จัด aling กลางเป๊ะ
8. Convert รูปนั้นให้เป็น movie clip ด้วยการคลิกรูป กดF8 ตั้งชื่อว่า “Original image”
9. ใส่ instance name ของ movie clip “Original image”  ว่า  “origImage”

 
10. วาดรูปสี่เหลี่ยมขึ้นมาอันนึง (เอาเฉพาะ fill นะ ไม่เอา stroke) ให้สูงกว่ารูปคุณซักเยอะนิดนึง (ผมสร้างไว้สูงประมาณ 3-400px นี่ละ) จะเอาเจ้าตัวนี้ละเป็น Mask

11.Convert เจ้าสี่เหลี่ยมนี้ให้เป็น movie clip ด้วยการคลิกรูป กดF8 ตั้งชื่อว่า “Rectangle Mask” เซ็ต registration ให้เป็น TOP-CENTER
12. ลบเจ้า movie clip “Rectangle Mask”  ออกไปจาก Stage เลย (ไม่ต้องกลัว เพราะมันยังมีอยู่ใน Library )
13. เปลี่ยน Linkage ของ  movie clip “Rectangle Mask” ตรง class เป็น “RectangleMask” ไม่ต้องห่วงว่ามันจะหายไป
14. สร้าง Layer ใหม่ขึ้นมาชื่อ as แล้วใส่ Actionscript ช้างล่างนี้ลงไป

//Hide the mouse
Mouse.hide();

//maskContainer holds all the masks
var maskContainer:Sprite = new Sprite();

//Set the maskContainer to be the original image’s mask
origImage.mask = maskContainer;

//Create a new rectangle mask
var recMask:RectangleMask = new RectangleMask();

//Add recMask onto the maskContainer
maskContainer.addChild(recMask);

//Add the maskContainer onto the stage
addChild(maskContainer);

//Easing factore, used in animation
var easing:Number = 0.1;

//Create a timer that is called every 0.2 seconds
var timer:Timer = new Timer(200, 0);
timer.addEventListener(TimerEvent.TIMER, timerEvent);
timer.start();

//We need ENTER_FRAME for the animation
addEventListener(Event.ENTER_FRAME, onEnterFrame);

//This function is called in each frame
function onEnterFrame(event:Event):void {
 //Calculate the speed we want to move the rectangle
 var vx:Number = (mouseX - recMask.x) * easing;
 //Assign the new x position
 recMask.x += vx;
}

//This function is called every 0.2 seconds
function timerEvent(e:Event):void {
 //Create a new rectangle mask
 var rc:RectangleMask = new RectangleMask();
 //Assign it to the same position as our original mask
 rc.x = recMask.x;
 //Add it to the container
 maskContainer.addChild(rc);
 //ENTER_FRAME is used to animtate the scale of the mask
 rc.addEventListener(Event.ENTER_FRAME, scaleDown);
}

function scaleDown(e:Event):void {
 //Get the rectangle mask
 var rc:RectangleMask = (RectangleMask)(e.target);
 //Reduce scale
 rc.scaleX -= 0.05;
 //If the scale is below 0, we remove the rectangle mask
 //from the stage
 if(rc.scaleX < 0) {
  rc.removeEventListener(Event.ENTER_FRAME, scaleDown);
  maskContainer.removeChild(rc);
 }
}
15. กด Ctrl+Enter เชิญทัศนา

Download FLA : Blur Mask Effect

Tags:

Permalink | January 15th, 2009

Leave a Reply