Fun with code (since 2006)

Introducing Banana Slice

12.14.07 Posted in Actionscript 3 by

Banana Slice

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).

Banana Slice Component

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 :)

A Flash animation should have appeared here, but it seems that your browser has an older version of the Flash Player or it is not installed at all. Please, install the last release of the Flash Player now, then reload this page.

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 ;)

56 Responses to “Introducing Banana Slice”

  1. [...] fact, Thibault Imbert explained it clearly in his article : « Worse than that, if you apply a filter to a DisplayObject, the Flash Player caches [...]

  2. [...] improve the rendering performance of any animation. This would be in fact the same behavior as the Banana Slice component I talked [...]

  3. [...] merci à Thibault et son composant Banana Slice pour l’inspiration : Tweet → HD Video Accélérée avec la classe StageVideo du Player [...]

  4. dhemitus says:

    …and where is the source ? :-)

  5. Chad Spicer says:

    DO you think you are going to release the component? Or has anyone seen another code set like this?

  6. Maru says:

    @Chad Spicer, @dhemitus
    You should check out my AnimatedBitmap & AnimatedBitmapData classes, inspired by Banana Slice here > (in French), sources > and docs (in English) >

Leave a Reply

Open Sort Options

Sort comments by:
  • * Applied after refresh
Fun with code since 2006.