How to Use Masks, the Blur Effect and Timer Events in AS3
This is a little demo I created to help familiarize myself with some of the special effects available in AS3. It started off as a stage light sweeping in random directions across the background image. The stage light was created by drawing a circle and applying that as the "mask" for the background image. The stage light expands and contracts by changing the scaleX and scaleY of the circle by random values.
I later decided to add a "blur" effect, which is a filter available via the BlurFilter class in AS3. Once you create an instance of BlurFilter, you can pass it on to a display object by placing it into an array. Code is presented below.
package {
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.filters.BlurFilter;
public class StageLight extends Sprite {
// this is how you add MyStage.jpg from library to AS3
var bdStage : BitmapData = new MyStage(600, 400);
var bStage : Bitmap = new Bitmap(bdStage);
var circle : Sprite = new Sprite;
var tSweep : Timer = new Timer(30, 50); // about 30 frames per second
var blur : BlurFilter = new BlurFilter();
var filterArray = new Array();
var startX : int = Math.random() * 600; // x coordinate
var startY : int = Math.random() * 400; // y coordinate
var startR : int = 1 + Math.random() * 5; // radius 1..5 of original size
var startB : int = 10 + Math.random() * 20; // blur filter 10..30
var destX : int = Math.random() * 600;
var destY : int = Math.random() * 400;
var destR : int = 1 + Math.random() * 5;
var destB : int = 0;
public function StageLight() {
// add the stage to the background
addChild(bStage);
// create a circle for the mask
circle.graphics.beginFill(0xFF0000);
circle.graphics.drawCircle(0, 0, 50);
circle.x = startX; circle.y = startY;
addChild(circle);
// apply the mask to the stage
bStage.mask = circle;
// apply the blur filter
blur.blurX = blur.blurY = startB;
blur.quality = 1;
filterArray[0] = blur;
bStage.filters = filterArray;
// set timer events for sweeping light effect
tSweep.addEventListener(TimerEvent.TIMER, doSweep);
tSweep.addEventListener(TimerEvent.TIMER_COMPLETE, newSweep);
tSweep.start();
}addChild(bStage);
// create a circle for the mask
circle.graphics.beginFill(0xFF0000);
circle.graphics.drawCircle(0, 0, 50);
circle.x = startX; circle.y = startY;
addChild(circle);
// apply the mask to the stage
bStage.mask = circle;
// apply the blur filter
blur.blurX = blur.blurY = startB;
blur.quality = 1;
filterArray[0] = blur;
bStage.filters = filterArray;
// set timer events for sweeping light effect
tSweep.addEventListener(TimerEvent.TIMER, doSweep);
tSweep.addEventListener(TimerEvent.TIMER_COMPLETE, newSweep);
tSweep.start();
// creates a new destination point for the stage light
public function newSweep(e : TimerEvent) {
startX = destX;
startY = destY;
startR = destR;
startB = destB;
destX = Math.random() * 600;
destY = Math.random() * 400;
destR = 1 + Math.random() * 5;
if (Math.random() > 0.5) { destB = 10 + Math.random() * 20; }
else { destB = 0; }
tSweep.reset();
tSweep.start();
e.updateAfterEvent();
}startY = destY;
startR = destR;
startB = destB;
destX = Math.random() * 600;
destY = Math.random() * 400;
destR = 1 + Math.random() * 5;
if (Math.random() > 0.5) { destB = 10 + Math.random() * 20; }
else { destB = 0; }
tSweep.reset();
tSweep.start();
e.updateAfterEvent();
// continues the current sweep of the light
public function doSweep(e : TimerEvent) {
var n : Number = tSweep.currentCount / tSweep.repeatCount;
circle.x = startX + n * (destX - startX);
circle.y = startY + n * (destY - startY);
circle.scaleX = circle.scaleY = startR + n * (destR - startR);
blur.blurX = blur.blurY = startB + n * (destB - startB);
filterArray[0] = blur;
bStage.filters = filterArray;
}circle.x = startX + n * (destX - startX);
circle.y = startY + n * (destY - startY);
circle.scaleX = circle.scaleY = startR + n * (destR - startR);
blur.blurX = blur.blurY = startB + n * (destB - startB);
filterArray[0] = blur;
bStage.filters = filterArray;
}
}