Flash AS3 code implements filter animation effect

We will add the blur and diagonal angle filters to the image. All the animations are made with corner 3.0 and move your mouse over the image to see the effect. When you have mastered this, you will also be able to create other filter effects. Well, let's start with opening your flash.

Set the environment:
1. Create a new document with a size of 500x250.
2. Import two images to the stage (about 200x200). You can import a square image and a garden image like me.
3. Convert the two images to MC. You can use the names you like and move the registration points to the center.
4. Get them the instance names: "apple01" and "apple02 ".

Enter AS3 open your action panel and enter the following code:

// Use an animation filter

Var blurSpeed: Number = 1;

Var bevelSpeed: Number = 5;

// Add a MOUSE_OVER event listener for two apples

Appleapple01.addEventListener (MouseEvent. MOUSE_OVER, mouseOverApple01 );

Apple02.addEventListener (MouseEvent. MOUSE_OVER, mouseOverApple02 );

// Add the MOUSE_OUT event listening for the two Apple

Appleapple01.addEventListener (MouseEvent. MOUSE_OUT, mouseOutApple01 );

Apple02.addEventListener (MouseEvent. MOUSE_OUT, mouseOutApple02 );

/* Add ENTER_FRAME for two apples so that we can draw them at every frame of time */

Apple01.addEventListener (Event. ENTER_FRAME, enterFrameApple01 );

Apple02.addEventListener (Event. ENTER_FRAME, enterFrameApple02 );

// Create and append the blur filter to apple01

Var blur: BlurFilter = new BlurFilter ();

Blur. blurX = 20;

Blur. blurY = 20;

Blur. quality = BitmapFilterQuality. HIGH;

Apple01.filters = [blur];

// Create an angle filter for apple02

Var bevelFilter: BevelFilter = new BevelFilter (10, 45, 0 x, 1, 0 xffffff, 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;

// Called when the mouse moves over apple01

Function mouseOverApple01 (event: MouseEvent): void {

MouseIsOverApple01 = true;

}

// Called when the mouse moves over apple02

Function mouseOverApple02 (event: MouseEvent): void {

MouseIsOverApple02 = true;

}

// Called when the mouse is removed from apple01

Function mouseOutApple01 (event: MouseEvent): void {

MouseIsOverApple01 = false;

}

// Called when the mouse is removed from apple02

Function mouseOutApple02 (event: MouseEvent): void {

MouseIsOverApple02 = false;

}

// This function is used to draw the animation of apple01.

Function enterFrameApple01 (event: Event): void {

// Blur if the mouse moves over the Apple

If (mouseIsOverApple01 = true ){

Blur. blurX-= blurSpeed;

Blur. blurY-= blurSpeed;

}

/* If the mouse is removed from the Apple and the Blur does not exceed 20, we will increase the blur. */

If (mouseIsOverApple01 = false & blur. blurX <= 20 ){

Blur. blurX + = blurSpeed;

Blur. blurY + = blurSpeed;

}

/* After changing the blur filter, I need to re-allocate the filter */

Apple01.filters = [blur];

}

// This function is used to draw the animation of apple02.

Function enterFrameApple02 (event: Event): void {

// If you move the mouse over this apple, we will add a blur filter until 100.

If (mouseIsOverApple02 = true & bevelFilter. blurX <100 ){

BevelFilter. blurX + = bevelSpeed;

BevelFilter. blurY + = bevelSpeed;

// We need to assign a strength to the corner to make it visible.

BevelFilter. strength = 5;

}

// If the mouse is removed from apple02, Blur is reduced.

If (mouseIsOverApple02 = false ){

BevelFilter. blurX-= bevelSpeed;

BevelFilter. blurY-= bevelSpeed;

}

/* If we confirm that the blur filter is being used, we will make the entire corner invisible. (Strength is 0). Otherwise we will see some ugly curves. */

If (bevelFilter. blurX = 0 ){

BevelFilter. strength = 0;

}

/* When we change the diagonal filter, we need to re-allocate the filter */

Apple02.filters = [bevelFilter];

}

It's done! Test the video. If you have any questions, visit the forum! The following code is provided 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 (10, 45, 0 x, 1, 0 xffffff, 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];

}

Effect.