Caching a movie clip

To cache a movie clip instance, you need to set the cacheAsBitmap property to true. After you set the cacheAsBitmap property to true, you might notice that the movie clip instance automatically pixel-snaps to whole coordinates. When you test the SWF file, you should notice that any complex vector animation renders much faster.

A surface (cached bitmap) is not created, even if cacheAsBitmap is set to true, if one or more of the following occurs:

To cache a movie clip:

  1. Create a new Flash document, and name the file cachebitmap.fla.
  2. Type 24 into the fps text box in the Property inspector (Window > Properties > Properties).
  3. Create or import a complex vector graphic into the FLA file.

    For a sample source of a complex vector graphic, CacheBitmap, see the Flash Samples page at www.adobe.com/go/learn_fl_samples. Download the Samples zip file and navigate to the ActionScript2.0/CacheBitmap folder to access the sample.

  4. Select the vector graphic, and select Modify > Convert to Symbol.
  5. Type star into the Name text box, and then click Advanced (if the dialog box is not already expanded).
  6. Select Export for ActionScript (which also selects Export in first frame).
  7. Type star_id into the Identifier text box.
  8. Click OK to create the movie clip symbol, with the linkage identifier of Star.
  9. Select Frame 1 of the Timeline, and then add the following ActionScript to the Actions panel:
    import mx.transitions.Tween;
    
    var star_array:Array = new Array();
    for (var i:Number = 0; i < 20; i++) {
        makeStar();
    }
    function makeStar():Void {
        var depth:Number = this.getNextHighestDepth();
        var star_mc:MovieClip = this.attachMovie("star_id", "star" + depth, depth);
        star_mc.onEnterFrame = function() {
            star_mc._rotation += 5;
        }
        star_mc._y = Math.round(Math.random() * Stage.height - star_mc._height / 2);
        var star_tween:Tween = new Tween(star_mc, "_x", null, 0, Stage.width, (Math.random() * 5) + 5, true);
        star_tween.onMotionFinished = function():Void  {
            star_tween.yoyo();
        };
        star_array.push(star_mc);
    }
    var mouseListener:Object = new Object();
    mouseListener.onMouseDown = function():Void {
        var star_mc:MovieClip;
        for (var i:Number = 0; i < star_array.length; i++) {
            star_mc = star_array[i];
            star_mc.cacheAsBitmap = !star_mc.cacheAsBitmap;
        }
    }
    Mouse.addListener(mouseListener);
    
  10. Select Control > Test Movie to test the document.
  11. Click anywhere on the Stage to enable bitmap caching.

    You'll notice that the animation changes from appearing to animate at 1 frame per second, to a smooth animation where the instances animate back and forth across the Stage. When you click the Stage, it toggles the cacheAsBitmap setting between true and false.

If you toggle caching on and off, as demonstrated in the previous example, it frees the data that is cached. You can also apply this code for a Button instance. See cacheAsBitmap (Button.cacheAsBitmap property) in the ActionScript 2.0 Language Reference.

For examples of scrolling movie clips, see scrollRect (MovieClip.scrollRect property) in the ActionScript 2.0 Language Reference. For information on alpha channel masking, which requires you to set the cacheAsBitmap property to true, see About alpha channel masking.

For samples about applying bitmap caching to an instance and to scrolling text, see the Flash Samples page at www.adobe.com/go/learn_fl_samples. The following samples are available:


Flash CS3


 

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/9.0/main/00000869.html