Graphic Effects Learning Guide for Flash: Bitmaps
Requirements
Prerequisite knowledge
This guide 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.
User level
Beginning
Required products
- Flash Professional (Download trial)
- Pixel Bender Toolkit (Macintosh)
- Pixel Bender Toolkit (Windows)
Sample files
You can manipulate bitmap images in Adobe Flash Professional CS5 by transforming their position, scale, rotation, and so on. Graphic effects can be applied directly to bitmap instances by using the drawing API, BitmapData class, or a Pixel Bender shader function in ActionScript.
Unlike vector graphics, bitmap graphics are composed of a grid of color pixels which collectively form an image (a map of bits). The number of pixels in the grid determines the resolution of the image. Bitmap images for print design usually are created in high resolution (300 dpi or higher) while bitmap images for the web are created at the standard monitor resolution of 72 dpi.
Besides importing and manipulating bitmaps in Flash Professional, you can use ActionScript to apply graphic effects directly to bitmap instances.
3D effects with bitmaps
You can easily transform and animate a bitmap in 3D space by embedding it in a movie clip symbol and using the 3D Rotation tool and the Timeline (see Figure 1).
You can create complex effects, such as texture mapping, using the Drawing API. The Graphics object, which creates the Drawing API in Flash Player, can be used to render a bitmap image into a series of triangles that in turn can be distorted in space. Triangles are commonly used in three-dimensional rendering as a way to optimize drawing performance and create the illusion of wrapping images around a shape.
For more information on creating 3D effects with bitmaps, see the Using triangles for 3D effects and the UV mapping sections of the ActionScript 3 Developer's Guide.
Effects with BitmapData
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 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 percent 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 an old television set, 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:
- Create a new ActionScript 3.0 FLA file and save it as noise.fla.
- Rename Layer 1 as actions.
- 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.
- Select Control > Test Movie to test the file.
Moving the mouse along the x-axis affects the low parameter; moving the mouse pointer along the y-axis affects the high parameter.
For more information on working with bitmaps in ActionScript, please see the Working with bitmaps section of the ActionScript 3 Developer's Guide.
Effects with the Pixel Bender Toolkit
The Adobe 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 Flash Player 10 or later. You can download the Pixel Bender Toolkit using the links at the top of this page.
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 Adobe Creative Suite 4 and later. Its interface is easy to use for creating Pixel Bender shader functions for your SWF applications. With Pixel Bender, you can create drawing fills, blend modes, and 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:
- Open the Pixel Bender Toolkit and click the Open a filter button.
- From the default list of filters, choose the invertRGB.pbk file.
- 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.
- 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:
- Create a new ActionScript 3 FLA file and save it as shader.fla.
- Rename Layer 1 to actions.
- 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();
rectangle.x = (stage.stageWidth - rectangle.width) / 2;
rectangle.y = (stage.stageHeight - rectangle.height) / 2;
addChild(rectangle);
var shader = new Shader(loader.data);
var shaderFilter:ShaderFilter = new ShaderFilter(shader);
rectangle.filters = [shaderFilter];
}
- 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.
For more information on working with Pixel Bender, please see the Working with Pixel Bender shaders section of the Flash Professional online help. Also visit the Pixel Bender Technology Center.
Where to go from here
This section of the Graphics Effects Learning Guide provides an overview of effects which can be directly applied to bitmap images using ActionScript. Spend some time experimenting with the drawing API and BitmapData class to learn more about applying effects to your bitmaps.
Check out these resources for more information on 3D effects on bitmaps:
- Flash Player 10 Drawing API (Trevor McCauley)
- Flash texture mapping (Trevor McCauley)
- 3D Flash video without code (Lee Brimelow)
Check out these resources for more information on working with the BitmapData class:
- Creating movie clips with reflections in ActionScript 3 (Ben Pritchard)
- Using the BitmapData class in ActionScript 3 to render video (David Van der Voort and Tommi West)
- Using BitmapData.hitTest for collision detection (Mike Chambers)
Check out these resources for more information on working with Pixel Bender:
- Pixel Bender basics for Flash (Charles Ward)
- Loading Pixel Bender filters in Flash 10 (Lee Brimelow)
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
More Like This
- Graphic Effects Learning Guide for Flash: Inverse kinematics
- Graphic Effects Learning Guide for Flash: Transformations
- Graphic Effects Learning Guide for Flash: Blend modes
- Graphic Effects Learning Guide for Flash: Overview
- Graphic Effects Learning Guide for Flash: Filters
- Graphic Effects Learning Guide for Flash: Vectors
- Graphic Effects Learning Guide for Flash: Text
- Graphic Effects Learning Guide for Flash: Color
- Graphic Effects Learning Guide for Flash: Tiles and patterns
- Graphic Effects Learning Guide for Flash: Masks
