Billboard Transition Effects in Flash CS3 and ActionScript 3

The Billboard Class

The Billboard class extends the Sprite class. The Billboard class has three public methods: the constructor, 'doTransition', and 'changeNumSlices'.

The constructor. The constructor is evoked with the keyword 'new' and takes four parameters:

new Billboard(imgs:Array,w:Number,h:Number,s:int)

The Billboard class constructor takes four parameters. The first parameter is an array of BitmapData objects corresponding to your collection of images. All images should be of the same size. Otherwise, undesirable clipping or stretching will occur. w and h parameters represent the width and the height of the billboard that will be created when the constructor is evoked. Billboard's dimensions can be different from the images' dimensions. They should be proportional to the dimensions of your images, though. Otherwise, the images will be distorted. The last parameter represents the number of vertical or horizontal slices that each image will be divided into intially.

The constructor of the Billboard class requires that images be passed to it as an array of BitmapData objects. In our eaxmples, we get the BitmapData objects corresponding to our images by importing the images to the Library and linking them to AS3. If you have many images or larger images, you may want to load them at runtime. You can use for that purpose our custom ImageLoader class presented in the tutorial: Cube in Bloom: Distorting Images in AS3, 3D Menu on a Cube. Or you can use any other method. After embedding or loading your images, you access their corresponding BitmapData objects and pass them to the constructor of the Billboard class.

doTransition method:

doTransition(s:String):void

The method takes a String parameter, "horizontal" or "vertical" which determines the direction of transition. The method will do nothing if the slices are in the process of moving.

changeNumSlices method:

changeNumSlices(n:int):void

The second public method, changeNumSlices, changes the number of slices into which each picture is cut.

The Timeline Code in Example 1

If you look at the code on the MaiTimeline of billboard_1.fla or billboard_2.fla, you will see that the Billboard class is very easy to use. Here is the complete code in billboard_1.fla. We created two buttons, btnHorizontal and btnVertical, on the Stage as well as the input box, slicesBox. Pic1, ...,Pic4 have been stored in the Library and linked to AS3 via the Linakge item in the Library menu.

import flash.filters.DropShadowFilter;

import com.flashandmath.bitmaps.Billboard;

var bdPic1:BitmapData=new Pic1(320,240);

var bdPic2:BitmapData=new Pic2(320,240);

var bdPic3:BitmapData=new Pic3(320,240);

var bdPic4:BitmapData=new Pic4(320,240);

var slices:int=10;

var board:Billboard=new Billboard([bdPic1,bdPic2,bdPic3,bdPic4],320,240,slices);

this.addChild(board);

board.filters=[ new DropShadowFilter() ];

board.x=110;

board.y=55;

slicesBox.restrict="0123456789";

slicesBox.maxChars=2;

slicesBox.text=String(slices);

btnHorizontal.addEventListener(MouseEvent.CLICK, flipHorizontal);

function flipHorizontal(e:MouseEvent):void {

var curSlices:Number=Number(slicesBox.text);

if(curSlices<1){

curSlices=1;

slicesBox.text="1";

}

if(curSlices>20){

curSlices=20;

slicesBox.text="20";

}

if(curSlices!=slices){

slices=curSlices;

board.changeNumSlices(slices);

}

board.doTransition("horizontal");

}

btnVertical.addEventListener(MouseEvent.CLICK, flipVertical);

function flipVertical(e:MouseEvent):void {