Bitmap images can be manipulated in the Flash workspace by positioning and sizing them. Graphic effects can be applied directly to bitmap instances by using the BitmapData class or a Pixel Bender shader function in ActionScript. In addition, you can work with bitmap caching to improve graphics rendering performance in some situations.

This section describes how to create bitmap effects using ActionScript. The first example shows how to use the BitmapData class and the second example shows how to create a Pixel Bender shader. You'll also take a look at best practices for bitmap caching.

Requirements

To follow along with this learning guide, you will need to install the following software:

Flash CS4 Professional

• Try
• Buy

Prerequisite knowledge

This article assumes you are familiar with the Flash Professional workspace and have a basic knowledge of working with FLA files. An intermediate knowledge of ActionScript is required for the sections of this learning guide that discuss how to create graphic effects programmatically.

Working with the BitmapData class

The BitmapData class enables you to manipulate bitmap data within an existing image, to convert vector images into bitmaps, or to create new bitmaps from scratch on the fly. By manipulating a bitmap instance directly using ActionScript, you can create very complex images and effects without incurring the overhead of constantly redrawing the content from vector data in Adobe Flash Player. The BitmapData class can be used for special effects on images, on-demand video, and webcam video.

A BitmapData object contains an array of pixel data. This data can either represent a fully opaque bitmap or a transparent bitmap containing alpha channel data. Both types of BitmapData objects are stored as a buffer of 32-bit integers. Each 32-bit integer determines the properties of a single pixel in the bitmap. The 32-bit integer 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 numbers (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 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 ActionScript 3.0 FLA file and save it as noise.fla.
2. Add the following ActionScript to Frame 1 of the Timeline:
   

   import flash.display.Bitmap;
   import flash.display.BitmapData;
   
   // Load image
   var pictLdr:Loader = new Loader();
   var pictURL:String = "http://www.helpexamples.com/flash/images/image1.jpg";
   var pictURLReq:URLRequest = new URLRequest(pictURL);
   pictLdr.load(pictURLReq);
   pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded); 
   addChild(pictLdr);
   
   // Create bitmap data object
   var noiseBmd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true);
   var noiseBm:Bitmap = new Bitmap(noiseBmd);
   addChild(noiseBm);
   
   // Initialize image when loaded
   function imgLoaded(event:Event):void
   {
      pictLdr.x = (stage.stageWidth - pictLdr.width) / 2;
      pictLdr.y = (stage.stageHeight - pictLdr.height) / 2;
      pictLdr.addEventListener(MouseEvent.MOUSE_MOVE, redrawEffect);
   }
   
   // Draw effect!
   function redrawEffect(event:MouseEvent):void
   {
      var low:Number = 30 * event.stageX / stage.stageWidth;
      var high:Number = 200 * event.stageY / stage.stageHeight;
      noiseBmd.noise(Math.round(Math.random() * 100000), low, high, 8, true);
   }

   This code creates an image with an overlying bitmap data instance. When the mouse's position changes, the coordinates are used to calculate changes in the applied noise effect.

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

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

Custom filter effects with Pixel Bender

The Pixel Bender Toolkit lets you create custom effects called shaders. Shaders can be used to create advanced graphic effects with image and data processing in SWF files exported to Adobe Flash Player 10 or later.

Adobe Pixel Bender is a programming language used to manipulate image content at the pixel level using a shader function. The shader function is called to render an effect on each pixel in the image. Where possible, the shader function is called for multiple pixel coordinates at the same time. This improves performance over the capabilities of the BitmapData object.

The Pixel Bender Toolkit is included with the Creative Suite 4 bundle. It's an easy-to-use interface for creating Pixel Bender shader functions for use in your SWF applications. With Pixel Bender, you will commonly create the following:

• Drawing fills
• Blend modes
• Custom filters

Working with Pixel Bender shaders generally falls into one of two categories: creating the Pixel Bender filter in the Pixel Bender Toolkit and applying the Pixel Bender filter to the SWF content in ActionScript code.

To create a filter with the Pixel Builder Toolkit:

1. Open the Pixel Bender Toolkit and click the Open a filter button.
2. From the default list of filters, choose the invertRGB.pbk file.
3. Review the code that appears in the code view. To create a custom filter, you can modify the code to change the way the kernel processes data.
4. Save the file (File > Export Kernel Filter for Flash Player) as invertRGB.pbj to a location on your desktop so you can load it into your application.

To apply the Pixel Builder shader to a SWF file:

1. Create a new ActionScript 3 FLA file and save it as customFilter.fla.
2. Add the following ActionScript to Frame 1 of the Timeline:

   import flash.display.*;
   
   var loader = new URLLoader(); 
   loader.dataFormat = URLLoaderDataFormat.BINARY; 
   loader.addEventListener(Event.COMPLETE, onLoadComplete); 
   loader.load(new URLRequest("invertRGB.pbj")); 
          
   function onLoadComplete(event:Event):void 
   { 
      var rectangle:Shape = new Shape(); 
      var g1:Graphics = rectangle.graphics; 
      var c1:Array = [0x336600, 0x80ff00]; 
      var a1:Array = [255, 255]; 
      var r1:Array = [100, 255]; 
      var m1:Matrix = new Matrix(); 
      m1.createGradientBox(300, 200); 
      g1.beginGradientFill(GradientType.LINEAR, c1, a1, r1, m1); 
      g1.drawEllipse(0, 0, 300, 200); 
      g1.endFill(); 
      addChild(rectangle); 
      
      var shader = new Shader(loader.data); 
      var shaderFilter:ShaderFilter = new ShaderFilter(shader);
      rectangle.filters = [shaderFilter];
   }

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

This code loads the invertRGB kernel and applies it as a filter to the gradient shape. The effect inverts the green gradient and changes the color. Comment out the second-to-last line to see the actual color of the gradient.

Note: Pixel Bender shaders can be used for image processing or data processing.

Run-time bitmap caching

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

In Flash Player 8 or later, 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. Since instances with caching turned on are not continually redrawn by Flash Player as the SWF file plays, the SWF file renders more 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)

Applying bitmap caching is not always recommended, because in certain circumstances it can negatively affect SWF file performance. Bitmap caching also slightly increases RAM usage at runtime because the player must maintain both the vector data and cached bitmap in memory.

To specify bitmap caching for a movie clip:

1. Select the movie clip or button symbol on the Stage.
2. In the Property inspector, select the Cache as bitmap option under the Display section.

You can use ActionScript to enable caching or scrolling, as well as 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 Cache as bitmap caching option in the Property inspector instead.

If you use ActionScript, you can use three properties for button and display object instances. Using these properties, you can specify bitmap caching, set a background color for a display object (opaqueBackground), and set a property that allows your users to quickly scroll the movie clip content (scrollRect).

To cache a display object instance, you need to set the cacheAsBitmap property to true. After you set the cacheAsBitmap property to true, you might notice that the 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 using ActionScript:

1. Create a new FLA file, and name the file cachebitmap.fla.
2. Create or import a complex vector graphic that covers the Stage of the FLA file.
3. Select the vector graphic and select Modify > Convert to Symbol.
4. With the instance selected on the Stage, name it my_mc in the Property inspector.

5. Select Frame 1 of the Timeline and then add the following ActionScript to the Actions panel:

   // Turn on bitmap caching for the large background
   my_mc.cacheAsBitmap = true;

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

By caching the complex vector background graphic, the movie animates over the top of it without having to redraw the image during each frame of movement.

Note: You cannot apply caching directly to text fields. If you wish to apply caching to a text field, you can place a text field within a movie clip first, and then apply caching to the movie clip that contains the text field.

Where to go from here

For more information on working with bitmaps, please see the Working with bitmaps section of the Programming ActionScript 3.0 for Flash online documentation.

For more information on working with Pixel Bender, please see the Working with Pixel Bender shaders section.

About the author