Working with Bitmaps

The BitmapData class lets you create arbitrarily sized transparent or opaque bitmap images and then manipulate them in various ways at runtime. By manipulating a BitmapData instance directly using ActionScript, you can create very complex images without incurring the overhead of constantly redrawing the content from vector data in Flash Player. The methods of the BitmapData class support a variety of effects that are not available through the Filters tab in the Flash workspace.

A BitmapData object contains an array of pixel data. This data either can represent a fully opaque bitmap or a transparent bitmap containing alpha channel data. Either type of BitmapData object is stored as a buffer of 32-bit integers. Each 32-bit integer determines the properties of a single pixel in the bitmap. It is a combination of four 8-bit channel values (from 0 to 255) that describe the alpha transparency and the red, green, and blue (ARGB) values of the pixel.

Just as RGB colors are typically represented as six-digit hex number (for example, red is 0xFF0000), ARGB is represented as an eight-digit hex number, where the first two digits represent the alpha channel, the second two represent the red channel, and so on (for example, 50% opaque red would be represented as 0x80FF0000).

The following procedure dynamically loads a JPEG image onto the Stage and creates a noise effect, similar to static on a television, using the BitmapData class. The noise effect is redrawn with a random pattern every 100 milliseconds (1/10 of a second). Moving the mouse pointer along the x-axis and y-axis affects how much static is drawn at every interval.

To create a noise effect with the BitmapData class:

1. Create a new Flash document and save it as noise.fla.

2. Add the following ActionScript to Frame 1 of the Timeline:

   import flash.display.BitmapData;
    createTextField("status_txt", 90, 0, 0, 100, 20); 
   status_txt.selectable = false;
    status_txt.background = 0xFFFFFF;
    status_txt.autoSize = "left"; 
   function onMouseMove() {
        status_txt._x = _xmouse;
        status_txt._y = _ymouse-20; 
       updateAfterEvent(); 
   }
    this.createEmptyMovieClip("img_mc", 10);
    img_mc.loadMovie(
     "http://www.helpexamples.com/flash/images/image1.jpg");
    var noiseBmp:BitmapData = 
     new BitmapData(Stage.width, Stage.height, true);
    attachBitmap(noiseBmp, 20);
    setInterval(updateNoise, 100); 
   var grayScale:Boolean = true;
    function updateNoise():Void {
        var low:Number = 30 * _xmouse / Stage.width;
        var high:Number = 200 * _ymouse / Stage.height; 
       status_txt.text = 
     "low:" + Math.round(low) + ", high:" + Math.round(high);
        noiseBmp.noise(Math.round(Math.random() 
         * 100000), low, high, 8, grayScale);
    } 

   This code creates a text field with the instance name status_txt, which follows the mouse pointer and displays the current values for the high and low parameters for the noise() method. The setInterval() function changes the noise effect, which is updated every 100 milliseconds (1/10 of a second) by continuously calling the updateNoise() function. The high and low parameters for the noise() method are determined by calculating the pointer’s current position on the Stage.

   
3. Select Control > Test Movie to test the document.

Moving the mouse pointer along the x-axis affects the low parameter; moving the mouse pointer along the y-axis affects the high parameter.

Runtime Bitmap Caching

As your designs in Flash grow in size, whether you are creating an application or complex scripted animations, you need to consider performance and optimization. When you have content that remains static (such as a rectangle movie clip), Flash does not optimize the content. Therefore, when you change the position of the rectangle movie clip, or other elements change in its general vicinity, Flash redraws the entire rectangle in Flash Player 7 and earlier.

In Flash Player 8, you can cache specified movie clips and buttons to improve the performance of your SWF file. The movie clip or button is a surface, essentially a bitmap version of the instance’s vector data, which is data that you do not intend to change much over the course of your SWF file. Therefore, instances with caching turned on are not continually redrawn as the SWF file plays, which lets the SWF file render quickly.

A cached bitmap is not created, even if you set it to cache, if one or more of the following occurs:

• The bitmap is greater than 2880 pixels in height or width
• The bitmap fails to allocate (out of memory error)

You should not always apply bitmap caching because in certain circumstances it can negatively affect SWF file performance. It also slightly increases RAM usage at runtime because the player must maintain both the vector data and cached bitmap in memory.

Note: You can update the vector data, at which time the surface is recreated. Therefore, the vector data cached in the surface does not need to remain the same for the entire SWF file.

To specify bitmap caching for a movie clip:

1. Select the movie clip or button symbol on the Stage.
2. In the symbol Property inspector, select the Use Runtime Bitmap Caching check box.

You can use ActionScript to enable caching or scrolling and to control backgrounds. You can use the Property inspector to enable caching for a movie clip instance. If you do not want to use ActionScript, you can select the Use Runtime Bitmap Caching option in the Property inspector instead

If you use ActionScript, you can use three new properties for button and movie clip instances. Using these properties you can cache as a bitmap, set a background color for a movie clip (opaqueBackground), and set a property that lets your users quickly scroll the movie clip content (scrollRect).

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 complex vector animation renders much faster.

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.

   You can find a complex vector graphic in the finished source file for this example in the following directory, which was created when you installed Flash:

   In Windows, browse to boot driveProgram FilesMacromediaFlash 8Samples and TutorialsSamplesActionScriptBitmapCaching

   On Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Samples/ActionScript/BitmapCaching

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

Click anywhere on the Stage to enable bitmap caching. Notice that the animation changes from appearing to animate at one 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 on the star instances 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.

Note: You cannot apply caching directly to text fields. You need to place text within a movie clip to take advantage of this feature. For an example, see the sample file in the Flash install folder: Samples and TutorialsSamplesActionScriptFlashType.