While I was writing the Bitmap Programming chapter of my book, I wanted to write something about vectors rasterizing.
As you may know, the cacheAsBitmap property introduced in the Flash Player 8 and available in AS3 through the DisplayObject.cacheAsBitmap property must be used when DisplayObjects are being moved ONLY. If you apply any other transformation, the bitmap version of the DisplayObject gets updated in memory for each transformation made , this results in an quite high CPU occupancy rate.
Worse than that, if you apply a filter to a DisplayObject, the Flash Player caches it automatically and creates 2 bitmaps in memory : One to work with pixels and another one to generate the filtered result. This time, for each transformation made to the DisplayObject, the two bitmaps previously generated are updated in memory. This time, your CPU occupancy rate is gonna go crazy.
To see traditional animations with MovieClip's and filters check this page and have a look at you CPU occupancy.
Now, I would like to introduce the "Banana Slice" component.
Banana Slice, is a tiny component that you can drag and drop and assign a specific MovieClip. At runtime, the component rasterizes the whole MovieClip and replaces its content by an animated bitmap. Of course, the MovieClip methods can still be called on it, everything is totally transparent (especially cool for non-coders).
By using this technique, you get better performance, each MovieClip can have its own frame rate as I am using an internal Timer object to play frames. Another cool thing is that you can set you Stage.quality to StageQuality.LOW once bitmap frames are generated, you will still get an anti-alias animation.
The SWF below is using the Banana Slice component with a single MovieClip and a few filters, your CPU occupancy should be ok now 
Sources will be posted very soon, as soon as I get more time to clean some parts of the code 
I'd like to thank Mama from yamago for the original idea
Comments (45)
Thibault, you make us look good and bad all at the same time! Fantastic work, cant wait to get my hands on it.
wow!!
Awesome! Very useful.
i’m start crying now, (happy indeed) ;D thx!
Haha, very nice dude. Who came up with the name for that component?
haha
First, I wanted to call it “Salami Slice”, but that’a design pattern name so I gave up the idea of Salami
Finally I choosed the Banana, that reminds me Mario Kart
Dude, when do I bring the macarons ?
Oh man this is going to make so much more interest for the flash game developer.
Excellent work!
salami was a good idea too ..
has you developped an AS3 class without any visual/graphics component/ and with the same property and method ?
i’ve just realized that the “dead time” of your book was in februar and not in december, i though it was december, mistake ?
Goog job !!
just excellent !
one more reason to buy your book ^^
Hi baptiste,
Classes will be available if you want to rasterize your animations without the component
Concerning the book, It was supposed to be released in end December/January but I haven’t finished yet. It will be released in beggining of February
Thibault
Hi nicoptere,
hehe thank you !
We will make another dinner when the book will be out
Thibault
Yeah it’s cool… but the more interesting thing of this post is that we gonna have a dinner !
but where is the sausage ?
ahaha, I gave up the sausage idea finally
I had a similar idea recently but aimed more towards particle systems, the particle system would run through once, but render each frame to a bitmapdata object and then I could reuse the generated animation at a much lower cpu cost.
Neato! I really like the idea of dropping functionality into a MovieClip this way.
Nice one. I just used a similar technique to speed up flv playback in a flash game. I gave up on the whole idea of using bitmaps as a buffer for other graphics as it was too memory consuming (especially in FF, IE shows some different behaviour). Do you have any hints on bitmaps and memory issues?
I’m your big fans and wish to bug one copy of your book, but I cant read french thus..
Hi Bryian,
I’d love to see it translated in English, let’s ask O’Reilly aha
kind regards,
Thibault
Great project and a super tool for anybody making games.
I can’t wait for you to post the source. Do you have an idea about when you’ll post the code?
Keep up the fantastic work!
Hi Mikkel,
I will post the sources in a few weeks, I am quite busy with the book right now
stay tuned
I will happily learn french just so I can read your book
Haha, very nice Pleh
Hey, wondering if we might be able to get a hold of this component. If you like we can pay you for your effort. Seems like only thing left was code cleanup, but if this project is solid other than that we should be fine. Thanks for your time and help.
Hi Chris,
I will post it soon, I just want it to be nicely optimized.
You don’t have to pay
I will send you an email when it’s posted or ready 
regards,
Thibault
Very cool, can’t wait to try it out.
Hi Thibault,
can’t wait to get a glimpse of the code ever since I read this post. I’d love to use it in a game project or two and analyse the difference in performance. Just trying to push it a little here: Hurry!!
Thanks a lot for your time and sharing this (soon)!
michel
This looks great. I’m a flash animator and this would be a great tool for speeding up character animations with lots of motion. Can’t wait to try it out!
I’m really excited to see how you did this and what effect it has on my projects–really looking forward to it! Please write a new post when you do so that I don’t have to keep checking this page
Cheers!
Has this project died with your new job or is it still – to be reliesed soon?
regards
/Mikkel
Hi Mikkel,
no it’s not dead for sure, I am just very busy with the book right now.
I will get back to it in a few weeks and will post an update and let you know
kind regards
Looks good, so do you take a snapshot of each frame and loop through that using BitmapData.draw()? Very cool idea.
After running for a few minutes my frames/second drop from ~24 to ~8 in the animation using banana-slice. And I’ve got a fast machine. Perhaps some optimization is needed.
Hi Jacob,
Thanks for the information, I will definitely double check that and optimize it
kind regards
Hey, this is definitely something that would be useful for game programming. Hopefuly you can find the time to clean the sources.
Bravo et félicitations
Can you send me sources when available?
Thanks!
Any word on when you may be able to publish this component. I’ve got lots of frame by frame animations that are starting to chug and I’d love to see how much banana slicing them would speed em up.
Thanks
I hadn’t seen this before, but I’ve recently written a similar system for caching animations. It’s not a simple drag & drop component like yours, and I’m sure yours is much better, but while we’re waiting for the release of your component, here’s AnimationSlicer http://blog.vandenoostende.com/?p=47
You gotta be careful if you deploy something like this in a big production: once you need to slice more then a few animations you’ll need to queue your slicing over multiple frames or your Flash Player will choke terribly. This is because draw() is really slow. Also keep in mind that you’l need only one bitmapData of each frame of an animation for ALL the instances you will show (set each Bitmap’s bitmapData-property with it). Don’t forget to resize the bitmapData’s to the smallest size possible (with getBounds()), saves a ton of transparent pixels.
Wonderful
hey Thibault, still no source ?!
I just wanna say WOW
Man, I just need this beautiful class !!! Tell us when and how
Hey there all folks who waiting for bananas, check out my rasterizer – http://blog.minim.pl/?p=181
Did the source ever get published for this? Or even a published preview?
Waiting for the Godot…
So where can i download it????
Trackbacks/Pingbacks (3)
[...] few weeks ago, I stumbled upon Thibault Imbert’s Banana Slice Component and since I’m always on the lookout for new techniques to improve the performance of my [...]
[...] Read the whole article Posted in Development | Leave a Comment [...]
[...] Imbert introduced some time ago a Banana Slice – a very neat idea of drastically reduce animations cpu occupancy by rasterizing (vectors to [...]