AS3: Motion Blurring with Flash, part 1

01/01/2010 in RIA Comments

The other day I needed to help out a co-worker and create some menu animation in Flash CS3. To set the stage, there are 4 bars that come out from left to right, each in a slightly different default position and each needed independent characteristics. After setting up the initial project, creating the buttons, etc. I began the AS3 code needed to move the bars. To simplify the article I am just using one bar. In my project I am calling a method containing conditionals (if/then) to determine whether the button stays or not. My full code example will be given later.

To move a instance of a movieclip in AS3 you will need to call the following classes:

import fl.transitions.*;
import fl.transitions.Tween;
import fl.transitions.easing.*;

Then create a listener to call the method, which is a bit of code created give a button access to method. A listener defines the event for which to call the method (function) that contains the code we want to run. In this case I am using a MouseEvent event with a value of MOUSE_OVER, which is case sensitive. mainBtn01 corresponds to the instance name of the button, btnBaropen corresponds to the method name that we are calling.

mainBtn01.addEventListener(MouseEvent.MOUSE_OVER, btnBaropen);

To start moving the button we will need to set a Tween variable:

var btnTween:Tween;

Now we can create the method containing the Tween parameters. btnTween relates to the new var we set for a new Tween, the we create a new Tween and follow with the values. btnBar01 relates to the button instance name, “x” relates to the x coordinate, Strong.easeOut relates to the motion – so the button comes out with emphasis and eases out, the first -150 is the starting x coordinate, and 4 is the second x coordinate, .25 relates to 1/4 of a second, and true makes the preceding statement of .25 become a “second”. Without using true the value of time is in milliseconds.

function btnBaropen(event:MouseEvent):void{
     btnTween = new Tween(btnBar01, "x", Strong.easeOut, -150, 3, .25, true);
}

You can also use the new Transition Manager classes. Without getting in to detail, the following is an example of an instance being faded in with the Transition Manager class.

]
TransitionManager.start(btn01, {type:Fade, direction:Transition.OUT,
duration:.5, easing:None.easeNone, ccw:true});

Now for the coolness, adding motion blur the bar in and out. We only want the bar to look like it is moving sideways, so we will only blur on the x coordinate. To use this function we will need to call a few more classes.

import flash.display.Sprite;
import flash.filters.BitmapFilterQuality;
import flash.filters.BlurFilter;

Then we set our listeners to watch for the beginning of the bar movement, remember it is btnTween, and the finish of the movement. We will use the TweenEvent:MOTION_CHANGE value to watch for the beginning, and TweenEvent:MOTION_FINISH value to watch for the end. One listener will call a method to start the blur (blurOn) and the other to stop the blur (blurOff).

btnTween.addEventListener(TweenEvent.MOTION_CHANGE, blurOn);
btnTween.addEventListener(TweenEvent.MOTION_FINISH, blurOff);

Finally we will create the methods to control the blur effects that our listeners are invoking. Our first method (second is similar so I will only detail the first) is called blurOn and is a TweenEvent. We set a variable “blur” as a BlurFilter and then create a new instance of that BlurFilter. I am only going to blur X, so blur.blurX = 3. I am setting the quality at Medium, and then assigning the bar with the blur filter. So you can see blurOn sets a blur on the X coordinate, then blurOff turns the blur off when the motion is complete. Pretty simple, no?

function blurOn(event:TweenEvent):void{
    var blur:BlurFilter = new BlurFilter();
    blur.blurX = 3;
    blur.blurY = 0;
    blur.quality = BitmapFilterQuality.MEDIUM;
    btnBar01.filters = [blur];
    }
 
function blurOff(event:TweenEvent):void{
    var blur:BlurFilter = new BlurFilter();
    blur.blurX = 0;
    blur.blurY = 0;
    blur.quality = BitmapFilterQuality.MEDIUM;
    btnBar01.filters = [blur];
    }

So, now here is the completed script:

import fl.transitions.*;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.display.Sprite;
import flash.filters.BitmapFilterQuality;
import flash.filters.BlurFilter;
    //Button listener to call the open and blur funtion
    mainBtn01.addEventListener(MouseEvent.MOUSE_OVER, btnBaropen);
 
   //Sets tween object, moves bar across screen
    var btnTween:Tween;
 
    //Method to slide out button bar and half circles, based on Mouse event
    function btnBaropen(event:MouseEvent):void{
 
       btnTween = new Tween(btnBar01, "x", Strong.easeOut, -150, 20, .25, true);
 
       //Listener to control Blur on/off
        btnTween.addEventListener(TweenEvent.MOTION_CHANGE, blurOn);
        btnTween.addEventListener(TweenEvent.MOTION_FINISH, blurOff);
 
        //Method to control blur
        function blurOn(event:TweenEvent):void{
            var blur:BlurFilter = new BlurFilter();
            blur.blurX = 3;
            blur.blurY = 0;
            blur.quality = BitmapFilterQuality.MEDIUM;
            btnBar01.filters = [blur];
            }
        //Method to control blur OFF
        function blurOff(event:TweenEvent):void{
            var blur:BlurFilter = new BlurFilter();
            blur.blurX = 0;
            blur.blurY = 0;
            blur.quality = BitmapFilterQuality.MEDIUM;
            btnBar01.filters = [blur];
            }
}