Blur trail effect with actionscript 3

In my first post, I will show you how to create a blur trail effect using flash and actionscript 3.

 

 

You can adjust the blur amount and particle size to see what kind of effect you can achieve with this technique.

This example assumes that you have basic actionscript 3 knowledge and you are familiar with the actionscript 3 drawing API.

You can download the .fla file and the source code here

This code draw a triange on the screen and rotate it 25 degrees clockwise:

 myShape = new Shape();
 myShape.graphics.beginFill(0xFF00FF, 0.4);
 myShape.graphics.moveTo(0,-10)
 myShape.graphics.lineTo(0, 10);
 myShape.graphics.lineTo(20, 0);
 myShape.graphics.lineTo(0, -10);
 myShape.x = 150;
 myShape.y = 150;
 myShape.rotation = 25;

Next, we draw a circle and copy its pixels in a bitmapData object:

 var myCircle:Shape = new Shape();
 myCircle.graphics.beginFill(0xFF00FF);
 myCircle.graphics.drawCircle(size*.5,size*.5,size*.5);
 particle = new BitmapData(size,size,true,0xFFCC00);
 particle.draw(myCircle);

The draw() method draws the source display object (myCircle) into a bitmap image.

Then we create a new bitmap with the dimension of the stage and a blurfilter that will be applied to this bitmap on every ENTER_FRAME event.

 blurEffect = new BlurFilter(blurAmount,blurAmount,1);
 pt = new Point();
 rect = new Rectangle(0,0,size,size);
 effectRect = new Rectangle(0,0,300,300);
 effectPt = new Point(0,0);
 bitmapDataLayer = new BitmapData(300,300,true,0xFFCC00);
 var bitmapLayer:Bitmap = new Bitmap( bitmapDataLayer);
 this.addChild(bitmapLayer);          
 this.addChild(myShape);          
 this.addEventListener(Event.ENTER_FRAME, perFrame, false, 0, true);

On every ENTER_FRAME event,  we check if the triangle is out of bounds and if so, change its direction so it s always visible on the stage:

 if ((myShape.x >= 280)||(myShape.x <= 20)||(myShape.y >= 280)||(myShape.y <=20)) {
      myShape.rotation += 45;
  }

and copy the pixels of the bitmapData that contains the circle into the big bitmap at the position of the triangle and apply the blurfilter to this bitmap:

 pt.x = myShape.x - size*.5;
 pt.y = myShape.y - size*.5;
 bitmapDataLayer.copyPixels(particle, rect, pt );
 bitmapDataLayer.applyFilter(bitmapDataLayer, effectRect, effectPt, blurEffect);

So every particle on the stage get blured on every frame, disappearing after being blured several times, creating the blur trail effect.

That' s it for the explanation, it' s not very detailed so feel free to ask any question in the comments!

 

 

Thank you!I did not have a lot of time to post new content lately. I will try update the game section and write new blog posts more frequently now.  

kokosan | Sun, 05/18/2008 - 09:10

Hi,
Enjoyed your site. Have bookmarked it and keep coming back.
Jarav

Anonymous (not verified) | Fri, 05/16/2008 - 00:54