Home > Dev, Featured, Random Picks > Animated Bitmap Class

Animated Bitmap Class

September 23rd, 2007 Leave a comment Go to comments

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 …

animbitmap_demo.jpg

You can download the class including demo source code and demo image here:

Download AS3 AnimatedBitmap Class v1.1.0 (118.29 kB, downloaded 8611 times)


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.

  1. October 25th, 2007 at 12:29 | #1

    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

  2. October 25th, 2007 at 17:35 | #2

    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.

  3. Soj
    November 26th, 2007 at 21:16 | #3

    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

  4. November 27th, 2007 at 13:56 | #4

    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.

  5. Soj
    November 27th, 2007 at 23:49 | #5

    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?

  6. November 28th, 2007 at 00:28 | #6

    Thats right! The embed meta tag is only for use with the Flex compiler (but not necessarily for Flex-only projects).

  7. January 13th, 2008 at 00:22 | #7

    Cool, Thanks for sharing.

  8. themautrix
    February 26th, 2008 at 07:40 | #8

    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?

  9. February 26th, 2008 at 12:44 | #9

    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.

  10. themautrix
    February 27th, 2008 at 06:43 | #10

    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

  11. themautrix
    February 27th, 2008 at 06:46 | #11

    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?

  12. February 29th, 2008 at 02:21 | #12

    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.

  13. themautrix
    February 29th, 2008 at 21:24 | #13

    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”

  14. June 19th, 2008 at 08:42 | #14

    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…

  15. November 2nd, 2008 at 14:29 | #15

    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!

  16. December 20th, 2008 at 05:57 | #16

    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!

  17. November 28th, 2009 at 11:47 | #17

    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

  18. Edward
    December 9th, 2009 at 04:48 | #18

    What is RingClass? Is it missing?
    Thank you

  19. May 17th, 2010 at 09:56 | #19

    This seems like a great class! But…
    It’s not Flex compatible :-) I spent whole day trying to make it work with Flex containers and still no luck.

    Why Flex? It has many goodies I don’t want to give up, especially in Flex 4.

    So, any advices, help or code will be greatly appreciated :-)

    Cheers

  20. me
    August 12th, 2010 at 14:43 | #20

    your fricking google search highlighting makes this too hard to read, its stupid and cant be turned off, you lost a reader bye

  21. June 2nd, 2011 at 17:04 | #21

    Great!, thank you very much, this is very useful to me.

  1. September 23rd, 2007 at 02:25 | #1
  2. September 23rd, 2007 at 11:25 | #2
  3. September 23rd, 2007 at 11:25 | #3
  4. September 24th, 2007 at 13:03 | #4
  5. September 27th, 2007 at 07:09 | #5
  6. September 28th, 2007 at 15:45 | #6
  7. December 2nd, 2007 at 10:40 | #7
  8. July 24th, 2008 at 07:16 | #8
  9. July 29th, 2008 at 17:24 | #9
  10. August 1st, 2008 at 12:16 | #10
  11. August 24th, 2008 at 08:20 | #11
  12. September 3rd, 2008 at 11:55 | #12
  13. May 11th, 2009 at 10:43 | #13
  14. May 14th, 2010 at 01:12 | #14
  15. May 14th, 2010 at 01:12 | #15
  16. May 17th, 2010 at 01:23 | #16
  17. May 19th, 2010 at 19:15 | #17
  18. July 15th, 2010 at 14:48 | #18
  19. August 15th, 2010 at 17:09 | #19
  20. August 19th, 2010 at 10:56 | #20
  21. September 20th, 2010 at 21:01 | #21
  22. October 3rd, 2010 at 14:58 | #22
  23. December 13th, 2010 at 19:15 | #23
  24. December 16th, 2010 at 16:41 | #24
  25. February 4th, 2011 at 10:52 | #25
  26. March 6th, 2011 at 22:03 | #26
  27. August 4th, 2011 at 03:04 | #27
  28. October 31st, 2011 at 22:37 | #28
  29. April 12th, 2012 at 15:30 | #29
  30. June 30th, 2012 at 16:46 | #30
  31. August 1st, 2014 at 19:43 | #31
You must be logged in to post a comment.