Adding Bitmap Animations With Flex and Actionscript

In part 6 we introduced collision detection, which allowed us to destroy and crash into the enemies on the screen. But the enemies just disappeared, which was a little unsatasifying. In this article we will add animations, which in turn will allow us to include some nice explosions.

If there is one thing Flash is famous for, it's animation. Flex does allow you to use the same vector based animations that have been so popular with Flash, however for our game we will be using good old frame based animations. There are two reasons for this. The first is that frame based animation is easier to create, and more applicable to the style of game we are making. The second is that I am not an artist and have to make do with the free artwork that I can find out on the web, which in this case is frame based :).

The image above shows what I mean by frame based animation. It is a series of frames that are displayed in sequence to produce an animation. Have you ever drawn a little animation in the corners of your textbook at school? It's the same concept.

To implement animations we first need to make some changes to the GraphicsResource class. Lets take a loot at that now.

package

{

import flash.display.*;

public class GraphicsResource

{

public var bitmap:BitmapData = null;

public var bitmapAlpha:BitmapData = null;

public var frames:int = 1;

public var fps:Number = 0;

public function GraphicsResource(image:DisplayObject, frames:int = 1, fps:Number = 0)

{

bitmap = createBitmapData(image);

bitmapAlpha = createAlphaBitmapData(image);

this.frames = frames;

this.fps = fps;

}

protected function createBitmapData(image:DisplayObject):BitmapData

{

var bitmap:BitmapData = new BitmapData(image.width, image.height);

bitmap.draw(image);

return bitmap;

}

protected function createAlphaBitmapData(image:DisplayObject):BitmapData

{

var bitmap:BitmapData = new BitmapData(image.width, image.height);

bitmap.draw(image, null, null, flash.display.BlendMode.ALPHA);

return bitmap;

}

}

}

The changes here are quite simple. We add two properties: frames and fps. The frames property is a count of how many frames of animation are included in the image held by the GraphicsResource. Using the explosion image above as an example, the frames would be set to 7. The fps property defines the frames per second that the animation will play.

The GameObject class does not know about animations. If you initialized a GameObject with the image above, the entire image would be displayed on the screen rather than an animated sequence. To enable animations we need to create a new class: AnimatedGameObject. Lets look at that code now.