How do i create an animation in AS3?

Question

I am making a game in AS3 for a school project (using the AIR api). I have about a year's worth of experience in AS3, so i would say i'm proficient but not an expert. Anyway, i have never attempted to do sprite animations in AS3 and i'm not quite sure how to approach it.

If i create a list of bitmaps and call addChild() and removeChild() to display each frame of the animation, it would affect the framerate as these functions are not very efficient (i have tried this before and it tanked my framerate if i had too many animations going at once). I have also tried creating a list of BitmapData objects, adding a bitmap to the display list, and then pointing it to a different BitmapData each frame, but this does not seem to work at all.

So what is the best way to do this? In XNA, for example, i would create a sprite class that draws to the screen using a sprite batch, then i would create a list of sprite objects and cycle through them to create the animation. Is there any way to achieve a similar result in actionscript?

What didn't work about cycling through BitmapDatas with one Bitmap? It's been a while since I've done AS3, but I don't see an obvious reason not to do it that way. — 31eee384
@31eee384 Apparently he has set cacheAsBitmap on that bitmap or on any of the parents of that bitmap in true, this screws bitmap based animation. — Vesper
@31eee384 i did actually find a way to get it to work, i just had to set the bitmap data immediately after creating the bitmap object before i try to change any of the properties. — android927

Andrei Nikolaenko Andrei Nikolaenko · Accepted Answer · 2015-02-01T13:27:33

First (simple) method: you can just use multi-frame MovieClip for animation. Put an image in each frame, put a MovieClip on the stage and that's all. You can control this animation using play(), stop(), gotoAndPlay(), gotoAndStop(). It will work without much problems for a generic platform game (I did that myself long ago).

Second (advanced) method: use bitmap blitting. For each animation, create a bitmap image that holds each frame of the animation. Use this image as a source for copying pixels into your current animated object. You just need to copy a particular rectangle area inside a source bitmap that corresponds to the current frame.

The actual blitting happens here

destinationBitmapData.copyPixels(sourceBitmapData, areaRectangle, destinationPoint);

Where destinationBitmapData is your "canvas" that you're blitting to; sourceBitmapData is the source image holding all animation frames; areaRectangle is the Rectangle inside the source image defining which area to copy; destinationPoint is left-top coordinate of the copy area in your canvas.

The destination canvas can be just one small object (like your game character that is moving around) or the entire game screen with all objects. I.e. instead of blitting and adding each object separately, you can just have one big canvas and blit any necessary parts directly to it.

That said, there is already a number of various ready-made engines that use blitting and even advanced techniques like 3D acceleration for 2D sprites.

One of them is Starling.

How do i create an animation in AS3?

1 Answers