Implementing filter animation with AS3 code

In this tutorial, we'll add a blur and bevel filter to the picture. All animations are made with Actionscript 3.0. Move your mouse over the picture to see the effect. When you have mastered these you will also be able to create some other filter effects. All right, open your flash and let's get started.

Setting up the environment

1. Create a new document, size 500x250
2. Import two pictures to the stage (approx. 200x200). You can import a picture of a square and a garden like me.
3. Convert two pictures to MC, you can take your favorite name; Move the registration point to the center.
4. Give them the instance name: "Apple01" and "APPLE02" respectively.

Enter AS3 Open your action panel enter the following code:


//using animated filters


var blurspeed:number = 1;


var bevelspeed:number = 5;


//For two apples add mouse_over event listening


Appleapple01.addeventlistener (MOUSEEVENT.MOUSE_OVER,MOUSEOVERAPPLE01);


Apple02.addeventlistener (Mouseevent.mouse_over, MOUSEOVERAPPLE02);


//These two apples add mouse_out event listening


Appleapple01.addeventlistener (MOUSEEVENT.MOUSE_OUT,MOUSEOUTAPPLE01);


Apple02.addeventlistener (Mouseevent.mouse_out, MOUSEOUTAPPLE02);


/* Add enter_frame to two apples so we can draw them every other frame/


Apple01.addeventlistener (EVENT.ENTER_FRAME,ENTERFRAMEAPPLE01);


Apple02.addeventlistener (Event.enter_frame, ENTERFRAMEAPPLE02);


//Create and attach a blur filter to APPLE01


var blur:blurfilter = new Blurfilter ();


Blur.blurx = 20;


Blur.blury = 20;


blur.quality = Bitmapfilterquality.high;


apple01.filters = [Blur];


//Create a bevel filter for APPLE02


var bevelfilter:bevelfilter=new bevelfilter (Ten, 45,0x000000,1, 0xffffff,1,0, 0, 0, Bitmapfilterquality.high, Bitmapfiltertype.inner,false);


apple02.filters = [Bevelfilter];


//Set the missing value (when the mouse is not moved to the Apple)


var mouseisoverapple01:boolean = false;


var mouseisoverapple02:boolean = false;


//When the mouse is moved over the APPLE01 call


function MouseOverApple01 (event:mouseevent): void {


mouseIsOverApple01 = true;


}


Call
when the mouse is moved over the APPLE02

function MouseOverApple02 (event:mouseevent): void {


MOUSEISOVERAPPLE02 = true;


}


//Call
when mouse moves out of apple01

function MouseOutApple01 (event:mouseevent): void {


mouseIsOverApple01 = false;


}


//Call
when mouse moves out of APPLE02

function MouseOutApple02 (event:mouseevent): void {


mouseIsOverApple02 = false;


}


//This function draws the APPLE01 animation


function EnterFrameApple01 (event:event): void {


//If the mouse moves on the apple to reduce the blur


if (mouseIsOverApple01 = = True) {


Blur.blurx-= blurspeed;


Blur.blury-= blurspeed;


}


/* If the mouse moves out of the apple, and the blur does not exceed 20, we increase the blur. */


if (mouseIsOverApple01 = = False && Blur.blurx <= 20) {


Blur.blurx = blurspeed;


Blur.blury = blurspeed;


}


/* I need to reassign the filter after changing the blur filter */


apple01.filters = [Blur];


}


//This function draws the APPLE02 animation


function EnterFrameApple02 (event:event): void {


//If the mouse moves over this apple, we add the blur filter until 100


if (mouseIsOverApple02 = = True && Bevelfilter.blurx < 100) {


Bevelfilter.blurx = bevelspeed;


Bevelfilter.blury = bevelspeed;


//We need to assign a strength to the bevel to make it visible


bevelfilter.strength = 5;


}


//If mouse moves out of apple02, reduces Blur


if (mouseIsOverApple02 = = False) {


Bevelfilter.blurx-= bevelspeed;


Bevelfilter.blury-= bevelspeed;


}


/* If we are certain that the blur filter is being used, we make the entire bevel invisible. (Strength is 0). Otherwise we'll see some ugly curves. */


if (Bevelfilter.blurx = = 0) {


bevelfilter.strength = 0;


}


/* When we change the bevel filter, we need to reassign the filter/


Apple02.filters = [Bevelfilter];


}


, you're done! Test videos, if you have any questions, please visit the forum! A happy day!

The following code for research var blurspeed:number = 1;


var bevelspeed:number = 5;


Appleapple01.addeventlistener (MOUSEEVENT.MOUSE_OVER,MOUSEOVERAPPLE01);


Apple02.addeventlistener (Mouseevent.mouse_over, MOUSEOVERAPPLE02);


Appleapple01.addeventlistener (MOUSEEVENT.MOUSE_OUT,MOUSEOUTAPPLE01);


Apple02.addeventlistener (Mouseevent.mouse_out, MOUSEOUTAPPLE02);


Apple01.addeventlistener (EVENT.ENTER_FRAME,ENTERFRAMEAPPLE01);


Apple02.addeventlistener (Event.enter_frame, ENTERFRAMEAPPLE02);


var blur:blurfilter = new Blurfilter ();


Blur.blurx = 20;


Blur.blury = 20;


blur.quality = Bitmapfilterquality.high;


apple01.filters = [Blur];


var bevelfilter:bevelfilter=new bevelfilter (45,0x000000,1, 0xffffff,1,0, 0, 0, Bitmapfilterquality.high, Bitmapfiltertype.inner,false);


apple02.filters = [Bevelfilter];


var mouseisoverapple01:boolean = false;


var mouseisoverapple02:boolean = false;


function MouseOverApple01 (event:mouseevent): void {


mouseIsOverApple01 = true;


}


function MouseOverApple02 (event:mouseevent): void {


MOUSEISOVERAPPLE02 = true;


}


function MouseOutApple01 (event:mouseevent): void {


mouseIsOverApple01 = false;


}


function MouseOutApple02 (event:mouseevent): void {


mouseIsOverApple02 = false;


}


function EnterFrameApple01 (event:event): void {


if (mouseIsOverApple01 = = True) {


Blur.blurx-= blurspeed;


Blur.blury-= Blurspeed;


}


if (mouseIsOverApple01 = = False && Blur.blurx <= 20) {


Blur.blurx = blurspeed;


Blur.blury = blurspeed;


}


apple01.filters = [Blur];


}


function EnterFrameApple02 (event:event): void {


if (mouseIsOverApple02 = = True && Bevelfilter.blurx < 100) {


Bevelfilter.blurx = bevelspeed;


Bevelfilter.blury = bevelspeed;


bevelfilter.strength = 5;


}


if (mouseIsOverApple02 = = False) {


Bevelfilter.blurx-= bevelspeed;


Bevelfilter.blury-= bevelspeed;


}


if (Bevelfilter.blurx = = 0) {


bevelfilter.strength = 0;


}


apple02.filters = [Bevelfilter];


}