The MotionBlurClip class

Now, rather than extending MotionTrail, you’ll take the effect in a different direction by extending MotionBrush again. A motion blur effect will add a dose of realism to any animation. Motion blurring originates from motion pictures. The blur occurs when an object moves too fast for the camera to keep it in focus. This effect is a little more complex than MotionTrail, so it will require more new code, but several steps will look familiar at this point.

1. Save a new version of your existing document as MotionBlurExample.fla.

2. Create a new class called MotionBlurClip.

3. Save the ﬁle as MotionBlurClip.as in the examples/ com/anim/fx directory.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

4. Update the ﬁrst line in the script to reﬂect the proper package:

package com.anim.fx {

5. Update the class declaration so that your class extends MotionBrush:

public class MotionBlurClip extends MotionBrush {

6. Add the following properties inside the package declaration (i.e., on a new line after public class

MotionBlurClip extends MotionBrush { ):

protected var lastX:Number; protected var lastY:Number; protected var blurFilter:BlurFilter; protected var blurIntensity:Number = 1;

These properties will store the information necessary to render the appropriate blur effect. The lastX and lastY properties will store the location of the symbol on the previous frame. Coupled with the blurIntensity properties, the lastX and lastY will be used to deter- mine how much blur should be applied (because they reﬂect the current velocity of the symbol). The

blurFilter property will store the actual BlurFilter object.

7. Add a new init method below the constructor method: protected override function init():void {

blurFilter = new BlurFilter(0, 0); lastX = this.x; lastY = this.y; hideSymbol = true; clearCanvasOnUpdate = true;

initStageListeners(); }

The init method is similar to the previous init methods that you’ve written except that it also assigns values to the properties added to the MotionBlurClip class.

8. Make sure the constructor calls the init method by adding the following highlighted code:

Chapter 3 Introduction to ActionScript Classes

public function MotionBlurClip() { init(); }

9. Add a new onFrame method (that will overwrite the onFrame method in the superclass):

protected override function onFrame(e:Event):void{ var xdiff:Number = Math.abs(lastX - this.x) | 0; var ydiff:Number = Math.abs(lastY - this.y) | 0; lastX = this.x; lastY = this.y;

setBlur(xdiff, ydiff); super.onFrame(e);

} Similar to the onFrame method in the MotionTrail

class, this onFrame method applies some code and then executes the onFrame method in the superclass (MotionBrush). The xdiff and ydiff variables store the difference between the previous location of the instance and the current location. Each line uses the absolute value method found in the Math class to ensure that the assigned values are positive. The bitwise OR operator (|) followed by the 0 ensures that if the preceding value is not a number, the xdiff and ydiff variables default to a value of 0. This is necessary for occasions when the lastX and lastY values have not been set (such as on the ﬁrst frame).

10. Add the new setBlur method to implement the blur effect: protected function setBlur(xAmount:Number, ➥ yAmount:Number):void{

blurFilter.blurX = xAmount * blurIntensity; blurFilter.blurY = yAmount * blurIntensity; symbolCanvas.filters = [blurFilter];

} The setBlur method assigns the blurX and blurY values

of the blurFilter using the position changes multiplied by the blurIntensity setting. The blurFilter is then passed to the symbolCanvas instance within an array.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

This is set up to mimic the filters property used on display objects, which is always an array.

11. Ensure that the following import statements are included (you may have to add the line for

MotionBrush): import flash.filters.BlurFilter;

import flash.events.Event; import com.anim.fx.MotionBrush;

The completed MotionBlurClip code should now read: package com.anim.fx {

import flash.filters.BlurFilter; import flash.events.Event; import com.anim.fx.MotionBrush;

public class MotionBlurClip extends ➥ MotionBrush{

protected var lastX:Number; protected var lastY:Number; protected var blurFilter:BlurFilter; protected var blurIntensity:Number = 1;

public function MotionBlurClip() { init(); }

protected override function init():void { blurFilter = new BlurFilter(0, 0); lastX = this.x; lastY = this.y; hideSymbol = true; clearCanvasOnUpdate = true;

initStageListeners();

protected override function ➥ onFrame(e:Event):void{

var xdiff:Number = Math.abs(lastX -

➥ this.x) | 0;

Chapter 3 Introduction to ActionScript Classes

var ydiff:Number = Math.abs(lastY - ➥ this.y) | 0;

lastX = this.x; lastY = this.y;

setBlur(xdiff, ydiff); super.onFrame(e);

protected function setBlur(xAmount:Number, ➥ yAmount:Number):void{

blurFilter.blurX = xAmount * ➥ blurIntensity;

blurFilter.blurY = yAmount * ➥ blurIntensity;

symbolCanvas.filters = [blurFilter]; }

12. Save your MotionBlurClip class and return to the Sym- bolCanvas class. Add the following methods below the

getBitmap method in the SymbolCanvas class: public function get filters():Array {

return _filters; }

public function set filters(filterArr:Array):void { _filters = filterArr; bmp.filters = _filters;

} The preceding code uses two special types of methods

known as a getter and a setter. From the outside of the class, these methods are applied as if they are a single property. This allows you to keep your actual property private, as well as allowing you to execute other code after the value has been set. The get method is called

when no assignment operator (equal sign) is used; thus, it returns the value as if it were a property. When

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

an assignment operator is used (e.g., symbolCanvas. filters = myFilterArray ), the set method accepts the parameter to be set (which is whatever follows the assignment operator).

13. Add a private variable for the ﬁlters at the top of the SymbolCanvas code and below the package statement

(after the existing properties):

It is common convention to use an underscore (_) at the beginning of

private var _filters:Array;

a private property.

14. Add this line inside the top of the initSymbolCanvas method to initialize the _filters property value:

_filters = new Array(); The (now totally) completed SymbolCanvas class

should read: package com.anim.fx {

import flash.display.DisplayObject; import flash.display.MovieClip; import flash.display.Bitmap; import flash.display.BitmapData; import flash.geom.Point; import flash.geom.Matrix; import flash.geom.ColorTransform; import flash.filters.BitmapFilter;

class SymbolCanvas {

private var offset:Point; private var bmd:BitmapData; private var bmp:Bitmap; private var src:DisplayObject; private var clearOnUpdate:Boolean; private var hideOriginal:Boolean; private var _filters:Array;

public function SymbolCanvas(symbol: ➥ DisplayObject, hideOriginalSymbol:Boolean=false, ➥ clearCanvasOnUpdate:Boolean=true){

Chapter 3 Introduction to ActionScript Classes

initSymbolCanvas(symbol, ➥ hideOriginalSymbol, clearCanvasOnUpdate);

private function initSymbolCanvas(symbol: ➥ DisplayObject, hideOriginalSymbol:Boolean,

➥ clearCanvasOnUpdate:Boolean):void{ _filters = new Array();

src = symbol; clearOnUpdate = clearCanvasOnUpdate; hideOriginal = hideOriginalSymbol;

initBitmap(); if(hideOriginal) src.visible = false; }

private function initBitmap():void { var targ:MovieClip = src.parent as ➥ MovieClip; bmd = new BitmapData(src.stage. ➥ stageWidth, src.stage.stageHeight, true, ➥ 0xffffff);

bmp = new Bitmap(bmd); bmp.cacheAsBitmap = true; offset = targ.globalToLocal(new

➥ Point(0, 0)); bmp.x = offset.x;

bmp.y = offset.y; targ.addChildAt(bmp, targ. ➥ getChildIndex(src)); }

public function update():void{ if(clearOnUpdate) bmd.fillRect(bmd. ➥ rect, 0); var matrix:Matrix = src.transform. ➥ matrix; matrix.translate(-offset.x, ➥ -offset.y); bmd.draw(src, matrix, src.transform. ➥ colorTransform, src.blendMode); bmp.bitmapData = bmd; }

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

public function dispose():void{ bmd.dispose(); src.parent.removeChild(bmp);

if(hideOriginal) src.visible = true;

public function fade(alphaMult:Number= ➥ .5):void {

if(clearOnUpdate) return; var cTransform:ColorTransform =

➥ new ColorTransform();

cTransform.alphaMultiplier =

➥ alphaMult;

bmd.colorTransform(bmd.rect, ➥ cTransform);

public function getBitmap():Bitmap { return bmp; }

public function get filters():Array { return _filters; }

public function set filters(filterArr: ➥ Array):void {

_filters = filterArr; bmp.filters = _filters;

15. Save your class and return to the MotionBlurExample.ﬂa document.

16. Open the Symbol Properties for your symbol and update the Class ﬁeld to read com.anim.fx.MotionBlurClip.

Chapter 3 Introduction to ActionScript Classes

17. Test your MotionBlurExample movie and observe the new effect (Figure 3.26).

Figure 3.26 The MotionBlurClip class applied to the rocket symbol.

The MotionBlurClip class