Animated Bitmap Class
The AnimatedBitmap class provides functionality for Bitmap objects that are animated by using a series of still images. When creating a new AnimatedBitmap you provide a BitmapData object that contains an image that consists of the ’single-frame’ images for the animation.
What are the advantages over using a generic MovieClip? When writing games you might have several animated graphics (also called sprites, but not related to the AS3 Sprite class) that should run with a different framerate than the game’s global framerate. Let’s say your game runs with a global framerate of 99 and you put several animated sprites into your game that were created for playing back with a framerate of 24. With a MovieClip all those sprites would also play with a framerate of 99 which means they play way too fast. However with an AnimatedBitmap you can set every framerate individually. There are a couple of other advantages like that a Bitmap is more lightweight than a MovieClip and it has a isPlaying() method. Also it changes the way of how to embed assets. Instead of embedding many files for one animation only one image for a whole animation sequence is embedded which has positive effects on the file size. The ring sequence used in the demo has 21 frames that use 102Kb as single images but only 44Kb when they are combined to one image.
The following demonstration plays with a global framerate of 99 but all AnimatedBitmap instances play at a framerate of 24 …
You can download the class including demo source code and demo image here:
[Download AnimatedBitmap Class v1.1]
Update: The class is now part of the hexagonLib and can be found here. You want this version because it’s the one that is being maintained.
Changes in v1.1
The timer object used to time the frame animation has now been made external. For this purpose a custom FrameRateTimer class has been added. This has the advantage that AnimatedBitmap objects don’t use their own timer objects anymore. Instead you can use one timer for many animated objects if they use the same framerate. This saves memory and CPU cycles. However you are still able to use one FrameRateTimer for every animated object if it is desired.
An IAnimatedDisplayObject interface has been added so that future animated display object types can be integrated more easily.
Also included is a jsx script for Photoshop CS named HDRS- CreateImageSequence that can be used to easily create a ’single-frames image’ with Photoshop. Simply run the script in Photoshop and choose the images in the file browser that appears. Photoshop will then generate a single image with all the frames laid out horizontally. All images should have the same size to get a correct animation sequence. Also sometimes you need to fine-tune the position of some frames, e.g. for the ring in the demo (which was rendered to single frame images from a 3D modeler) I had to adjust the horizontal alignment on some frames because otherwise the animation would glitch to left/right by some pixels.
Hey man, wicked cool. Not bad performance with all those animated bitmaps. I’m doing a little digging around about implementing the infamous Mode 7 effect in Flash. Have heard of this being done, or where I might read up on the subject? All I seem to find is Wikipedia articles.
Thanks,
D
Hi Darren, I have yet to cover Mode7 for myself (damn, there are so many nice things that you can do now with AS3!) but Andre Michelle has a nice Mode7 demo written for Flash 8 on his lab…. http://lab.andre-michelle.com/mode7 maybe that gets you forward.
Hi,
Great example, I’m quiet new to AS3 and I would like to try this animation with my own sequence.
Is it possible for me to get the .FLA as well to examine it?
Regards,
Soj
Hi Soj, check out the downloadable zip file! I’ve added a fla that shows how to use the class in the Flash IDE. All you have to do is change the Main class a bit and use it as the Document Class and link the bitmap from the library.
Hi Sascha, Thank you. I’ve examined the FLA and am now able to embed the bitmap file. So the Embed metatage can only be used for Flex I quess?
Thats right! The embed meta tag is only for use with the Flex compiler (but not necessarily for Flex-only projects).
Cool, Thanks for sharing.
sorry i am trying to use this amazing class..but i can’t get as3 to load dinamically an external *.png file wich is 7680×320, i need to load external images, or project would be very big, using library images…
using library images i had to split a 32 frames walk cycle in 16 from 10240×320 to 5120×320, and check last frame in those sequences to start the next..
pls, any workaround for the maximum size of an external image file?
Not sure about that loaded files would have a size restriction but the Flash Bitmap object has a restriction to something roughly over 3000×3000 (exact values are in the docs). If you need to display larger bitmaps that that then there’s a workaround though using DisplayObject.scrollRect. I’m not sure if this is related to your problem however.
ok, I have some 32 images walk cycles…240×320, total sequence is 7680×320.
Last thing wich works..is to split it in 4 different images, so I can externally load them…after that, I use some Switchs to read the getCurrentFrame, and compare it to getTotalFrames, so it can stop and removeChild the actual Animated Bitmap and plays the next…I am new to as3 sure someone can help me making my code a lot more efficient…as I just write all needed functions because there are lot I dont know how to fit in my project..thanks
have a look at this…
http://mausart.pastebin.com/m296194ee
i am not sure what to do to remove the animated bitmaps wich is playing
how can I externally load 4 png files, and make also dinamically a bitmapdata with all them, so it would be the whole sequence in one AnimatedBitmap.
I mean, how can I “add” bitmaps just like strings do?
well you could concatenate the images together but then at some point there’s the bitmap size limit as stated above. In a project I’ve worked on some days ago I had a similar problem. I had to load a huge image with a dimension of 4096×3072. The loading itself was no problem but this wouldn’t fit on a Bitmap object so you have to use scrollRect to ‘cut out’ parts of the images into smaller pieces … e.g.
imageBitmap.scrollRect = new Rectangle(0, 0, 1024, 1024);
var bd:BitmapData = new BitmapData(1024, 1024, false);
bd.draw(imageBitmap);
I hope this helps. Otherwise maybe you might have more luck in a forum like actionscript.org.
mm I was having some problems loading big images with strings like these..
“images/gif/SpideySequence01.gif”
“http://www.mausart.com/images/gif/SpideySequence01.gif”
but no problem with this one
“http://www.merimoreno.com/projects/mausart/images/gif/SpideySequence01.gif”
I have my domain(www.mausart.com) with redirected url to that other domain..so maybe was that
have to change and add more things…pls have a watch…U think it’s chumpky because of the Carousel class is there when the animated bitmap is?
maybe both are using some kind of bitmap snapshot and no gogd together ..thanks for your awesome class, now I can use only one Animated Bitmap per cycle
I really would like to make my characters much more alive and interactive with this old school technique, new as3 awesome class
For anyone wanting to help me a little, pls add me to your msn account “themautrix AT hotmail.com”
Hello,
Open demo, change document class as ” xPos += sizeW + 50; ” and boom! When animated objects do not touch each other or have a little distance between them, framerate fails, they start to run slow…
Thank you for your website
I made with photoshop backgrounds for myspace or youtube and ect..
my backgrounds:http://tinyurl.com/5b8ksl
Hope you had a good day and thank you again!
Sascha, this is just great, and the source is so simple. I’ve had my eye on it for almost a year now, and have finally popped it into the game I’m developing. Smacks of sweetness. Should’ve been one of the Adobe DisplayObject classes.
Nice work!!
PS. You have the best website header too, I am jealous. Paradroid ‘90 forever!
Thanks for you answer before on my short post about variable names
I wrote a class that is based on the same concept you have here. My version loops through a MovieClip to create a BitmapData array, so the animation can be embedded compressed as Flash Video. Here is the article, where I discuss the pros and cons of my approach (source code included).
Cheers, Nicolas
What is RingClass? Is it missing?
Thank you