AS3: Motion Blurring with Flash, part 2
To build more on the motion blur in AS3 tip, I am breaking the code out in more of a OOP structure. I use FDT3 extensively to create my AS3 projects, so this tip will be more focused on usind FDT3 for the code with minimal Flash CS4 setup.
For this tip you will need basically one Flash file and one .as file, named FilterBlur.as. If you are using FDT3 you will need to compile a .swc to access the fl.transitions classes, or download it here – http://apdevblog.com/update-using-flvideo-package-w-eclipse-and-fdt3/. Then you will need to link the .swc as a “linked library”.
The Flash file will be fairly simple, just the stage and one movie clip, in my case a blue rectangle. When creating the movie clip make sure you check the “Export for ActionScript” box, and set the Base Class as “FilterBlur”. This links the FilterBlur.as class directly to the movieclip instance, letting you use “this” in the .as file. After you set this up, any action within the class that refers to “this” will affect the movieclip instance. That’s it on the Flash side, now on to the FilterBlur.as class.
In the same directory that you create the Flash file, the name of the Flash file doesn’t matter, create a new ActionScript 3.0 class name “FilterBlur.as”. If you put this in a different directory, such as “com.blah.blah”, just make sure your path within the movieclip refers to the same location.
Click on the rectangle below to see a demo of the blur effect.
I will break down the code more when I get a chance, but below is the final class detail. Copy and paste this class code into your FilterBlur.as file.
package { //Basic classes import flash.events.MouseEvent; import flash.display.MovieClip; import flash.events.Event; // //Filter class, specifically for the Blur import flash.filters.BitmapFilterQuality; import flash.filters.BlurFilter; // //Transition class for the tween easing setting of Strong import fl.transitions.easing.Strong; // //Transition class needed for the Tween import fl.transitions.*; // public class FilterBlur extends MovieClip { //Private variables private var tweenWidth : Tween; private var tweenHeight : Tween; private var tweenXLoc : Tween; private var tweenYLoc : Tween; private var xBlurOn : Number = 50; private var yBlurOn : Number = 50; private var tweenState : int = 0; private var tweenStateCount:int = 4; //Public variables public var stageWidth : Number = stage.stageWidth; public var stageHeight : Number = stage.stageHeight; public var thisWidth : Number = 100; public var thisHeight : Number = 75; public var thisXLoc : Number = (stageWidth / 2) - (thisWidth / 2); public var thisYLoc : Number = (stageHeight / 2) - (thisHeight / 2); //Constructor public function FilterBlur() { //I like to set this in the beginning so the Flash player is not constantly trying to locate it this.width = thisWidth; this.height = thisHeight; this.x = thisXLoc; this.y = thisYLoc; //Main listener to handle the MOUSE_DOWN on the movieclip instance this.addEventListener(MouseEvent.MOUSE_DOWN, blurInitiate); } //Handle the tween logic public function blurInitiate(e : MouseEvent) : void { //Reset the tweenState count each call tweenState = 0; //Turn the blur effect on blurON(null); //Constantly watch the tweenState count to turn off the blur this.addEventListener(Event.ENTER_FRAME, watchBlur); //Width and Height tweenWidth = new Tween(this, "width", Strong.easeIn, thisWidth * 2, thisWidth, 1, true); tweenWidth.addEventListener(TweenEvent.MOTION_FINISH, aggregateTweens); tweenHeight = new Tween(this, "height", Strong.easeIn, thisHeight * 2, thisHeight, 1, true); tweenHeight.addEventListener(TweenEvent.MOTION_FINISH, aggregateTweens); //X and Y tweenXLoc = new Tween(this, "x", Strong.easeIn, thisXLoc - (thisWidth / 2), thisXLoc, 1, true); tweenXLoc.addEventListener(TweenEvent.MOTION_FINISH, aggregateTweens); tweenYLoc = new Tween(this, "y", Strong.easeIn, thisYLoc - (thisHeight / 2), thisYLoc, 1, true); tweenYLoc.addEventListener(TweenEvent.MOTION_FINISH, aggregateTweens); /* Increment the tweenState count. I do this as there are FOUR tweens going on at one time and I want to make sure all FOUR tweens are completed before moving on. This ensures that each tween has ended before the blurOFF function is called. */ function aggregateTweens(e : TweenEvent) : int { switch (e.currentTarget) { case tweenWidth: tweenWidth.removeEventListener(TweenEvent.MOTION_FINISH, aggregateTweens); return tweenState += 1; break; case tweenHeight: tweenHeight.removeEventListener(TweenEvent.MOTION_FINISH, aggregateTweens); return tweenState += 1; break; case tweenXLoc: tweenXLoc.removeEventListener(TweenEvent.MOTION_FINISH, aggregateTweens); return tweenState += 1; break; case tweenYLoc: tweenYLoc.removeEventListener(TweenEvent.MOTION_FINISH, aggregateTweens); return tweenState += 1; break; default: tweenState = 0; } return tweenState; } } //Watch for state count to turn blur off / We could throw events to access this, but an int increment is simpler here. public function watchBlur(e : Event) : void { if(tweenState == tweenStateCount) { //If the count is equal to 4 or the total tweens the call the blurOFF function. blurOFF(null); //Clean up the ENTER_FRAME event listener this.removeEventListener(Event.ENTER_FRAME, watchBlur); } } //Set the blur filter ON public function blurON(e : Event) : void { var blur : BlurFilter = new BlurFilter(); blur.blurX = xBlurOn; blur.blurY = yBlurOn; blur.quality = BitmapFilterQuality.MEDIUM; this.filters = [blur]; } //Set the blur filter OFF public function blurOFF(e : Event) : void { var blur : BlurFilter = new BlurFilter(); blur.blurX = 0; blur.blurY = 0; blur.quality = BitmapFilterQuality.MEDIUM; this.filters = [blur]; } } }


Recent Comments
connatser on AS3 Playground: Simple Particles:
thanks Richard, and thanks for checking it out!...
connatser on AS3: Motion Blurring with Flash, part 1:
I agree, thanks. I will get some source files together and update the post....
Chris on AS3: Motion Blurring with Flash, part 1:
would be a lot easier to follow this tute for a beginner if you'd inclu...
rv on AS3 Playground: Simple Particles:
great example, nice job....
ericfickes on 360Flex: Stoked to get a break and hear great devs.:
Hey Brian, be sure to say hi at 360. Jun and I are pretty excited about th...