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:
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.
21 Responses to “Animated Bitmap Class”
By Darren
on Oct 25, 2007 | Reply
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
By admin
on Oct 25, 2007 | Reply
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.
By Soj
on Nov 26, 2007 | Reply
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
By sascha/hdrs
on Nov 27, 2007 | Reply
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.
By Soj
on Nov 27, 2007 | Reply
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?
By sascha/hdrs
on Nov 28, 2007 | Reply
Thats right! The embed meta tag is only for use with the Flex compiler (but not necessarily for Flex-only projects).
By Developer
on Jan 13, 2008 | Reply
Cool, Thanks for sharing.
By themautrix
on Feb 26, 2008 | Reply
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?
By admin
on Feb 26, 2008 | Reply
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.
By themautrix
on Feb 27, 2008 | Reply
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
By themautrix
on Feb 27, 2008 | Reply
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?
By admin
on Feb 29, 2008 | Reply
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.
By themautrix
on Feb 29, 2008 | Reply
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”
By Cem Ozturk
on Jun 19, 2008 | Reply
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…