Accessibility

Graphic Effects Learning Guide for Flash CS4 Professional

Adobe

 

Note: This learning guide introduces graphic effects in Adobe Flash CS4 Professional and provides you with tools for developing your skills. Always consult Flash CS4 Professional Help first when learning to use new features.

Adobe Flash CS4 Professional provides a number of features for producing impressive graphic effects. These features, along with the improved workflow of Flash CS4, open up an endless list of effect and production possibilities.

Besides the drawing features and video capabilities, these graphic effects make up a category of tools promoting expressiveness—the ability to enhance the look and feel of your project.

Here is a summary of a few of these important features:

You can apply filters and blend effects in either Flash CS4 Professional using the Property panel during authortime or with ActionScript code at runtime.

Note: The ActionScript samples in this article are written in ActionScript 3 and must be used within an ActionScript 3 file. See the Flash 8 version of this article for samples that can be used in an ActionScript 1 or ActionScript 2 file. Also, if you have not upgraded yet to the latest version of Flash, you can check out the Flash CS3 version of this article.

Requirements

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

Flash CS4 Professional

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.

Graphic Effects Learning Guide for Flash: Filters

Filters add interesting visual effects to text, buttons, and movie clips. Filters are most often associated with applying drop shadows, blurs, glows, and bevels to graphic elements. A feature unique to Adobe Flash Professional is that you can animate the filters using motion tweens. For example, if you create a ball with a drop shadow, you can simulate the look of the light source moving from one side of the object to another by changing the position of the drop shadow from its beginning and ending frames in the Timeline.

After you apply a filter, you can change its options at any time or rearrange the order of filters to experiment with combined effects. You can enable or disable filters or delete them in the Property inspector. When you remove a filter, the object returns to its previous appearance. You can view the filters applied to an object by selecting it; doing so automatically updates the filters list in the Property inspector for the selected object.

This section describes the process of adding a filter to a movie clip instance and creating a simple drop shadow effect.

Applying filters

You can apply one or more filters to selected objects using the Property inspector. Each time you add a new filter to an object, it is added to the list of applied filters for that object in the Property inspector. You can apply multiple filters to an object, as well as remove filters that have been previously applied. Applying different filters affects the appearance of a movie clip instance (see Figure 1).

Examples of filter effects

Figure 1. Various examples of filter effects applied to movie clip instances

(+) View larger

To apply a filter:
  1. Select a movie clip, button, or text object on the Stage to which you want to apply a filter. You can apply filters only to text, button, and movie clip objects.
  2. Select the Filter tab in the Property inspector.

  3. Click the Add filter (+) button in the lower left of the Property inspector and select a filter from the Filters pop-up menu (see Figure 2). The filter you select is applied to the object and the controls for the filter settings appear in the Property inspector.

    Add Filter menu in the Property inspector

    Figure 2. Adding a filter to the Filter tab in the Property inspector

  4. Notice that the filter's adjustable parameters fill the filter list area. Experiment with the filter settings until you get the look you want.

To remove a filter:
  1. Select the movie clip, button, or text object that you want to remove a filter from.
  2. Select the filter you want to remove in the list of applied filters.
  3. Click the Delete filter (trash can icon) to remove the filter.

You can create a filter settings library that allows you to easily apply the same filter or sets of filters to an object. Flash CS4 stores the filter presets you create in the Property inspector under the Filters area, seen when a compatible object is selected on the Stage. You can save, delete, assign, or rename presets by clicking the Presets button at the bottom of the Property inspector.

To enable or disable a filter applied to an object:
  1. Select the object on the Stage containing the filter.
  2. Select the filter in the filter list which you want to enable or disable.
  3. Click the Enable or disable filter button (eyeball icon) at the bottom of the filter list.

Note: Alt-click the eyeball icon to toggle the enable state of the other filters in the list To the opposite state of the selected filter.

To enable or disable all filters applied to an object:
  1. Select the object on the Stage containing the filter.
  2. Click the Add filter button (page icon) in the Property inspector and then select Enable All or Disable All from the pop-up menu.

At this point, you may want to try applying a basic filter effect yourself. An easy example to start with is applying a drop shadow, so try it out by using the following steps.

Creating a skewed drop shadow

Use the Drop Shadow filter's Hide object option to create a more realistic look by skewing the shadow of an object (see Figure 3). To achieve this effect, you need to create a duplicate movie clip, button, or text object, apply a drop shadow to the duplicate, and use the Free Transform tool to skew the duplicate object's shadow.

Skewing the Drop Shadow filter to create a more realistic-looking shadow

Figure 3. Skewing the Drop Shadow filter to create a more realistic shadow

To create a skewed drop shadow:
  1. Select the movie clip or text object whose shadow you want to skew.
  2. Duplicate (select Edit > Duplicate) the source movie clip or text object.
  3. Select the object in the background and skew it using the Free Transform tool (Q).

  4. Apply the Drop Shadow filter to the duplicated movie clip or text object, and select the object option (see Figure 4). The duplicated object is hidden from view, leaving only the skewed shadow.

    The Hide object option of the Drop Shadow filter can be useful for creating realistic shadow effects.

    Figure 4. The Hide object option of the Drop Shadow filter can be useful for creating realistic shadow effects.

  5. Adjust the Drop Shadow filter settings and the angle of the skewed drop shadow until you achieve the look you want.

Where to go from here

For more information on working with filters during authoring, see the About filters section of the Using Flash CS4 Professional online documentation.

Graphic Effects Learning Guide for Flash: Filters and ActionScript

You can apply filters using the Flash CS4 user interface, or you can apply filters or groups of filters to movie clips, buttons, or text fields using ActionScript.

If you use ActionScript to apply the filters to an instance, you can also use a displacement map filter or convolution filter, which are not available in the Flash user interface. Filters are applied to the vector definitions, so there is no file size overhead related to storing a bitmap image within the SWF file. You can also write ActionScript that modifies an existing filter applied to a text field, movie clip, or button to create dynamic effects.

This section describes the process of adding a filter to a movie clip instance using ActionScript.

Applying a filter with ActionScript

Let's try applying a basic filter effect using ActionScript code. An easy example to get started with involves applying a bevel filter. In the steps below, we've included a code example.

To apply a bevel filter:
  1. Create a new ActionScript 3 FLA file called bevel.fla.
  2. Create a new movie clip that contains a graphic or image, and give it the instance name my_mc.
  3. Select Frame 1 of the Timeline and add the following ActionScript:
    import flash.filters.BevelFilter;
          
// define a bevel filter
var bevel:BevelFilter = new BevelFilter(4, 45, 0x99CCFF, 1, 0x003399, 1, 10, 10, 2, 3);

// set strength
bevel.strength = 5;

// apply the filter to my_mc
my_mc.filters = [bevel];
  4. Select Control > Test Movie to test the document.

For information on the parameters you can pass to the bevel filter, see the BevelFilter section of the Flash CS4 Professional ActionScript 3 Language Reference.

Applying different filters with code works pretty much the same way. However, different filters need different information when you apply the filter. For example, the color matrix filter requires an array. You can use the color matrix filter to modify the brightness of an instance, as the following example demonstrates.

To apply a color matrix filter:
  1. Create a new ActionScript 3 FLA file document and save it as brightness.fla.
  2. Add the following ActionScript to Frame 1 of the Timeline:
    import flash.display.*;
import flash.net.URLRequest;
import flash.events.Event;
import flash.filters.ColorMatrixFilter;

var pictLdr:Loader = new Loader();
var pictURL:String = "http://www.helpexamples.com/flash/images/image2.jpg";
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
addChild(pictLdr);

function imgLoaded(event:Event):void
{
    var myElements_array:Array = [1, 0, 0, 0, 10,
    0, 1, 0, 0, 100,
    0, 0, 1, 0, 100,
    0, 0, 0, 1, 0];
    var myColorMatrix_filter:ColorMatrixFilter = new ColorMatrixFilter(myElements_array);
    pictLdr.content.filters = [myColorMatrix_filter];
}

    This code dynamically loads a JPEG image using a Loader instance. After the image has completely loaded and has been placed on the Stage, the instance's brightness is altered by using a color matrix filter.

    For more information on the color matrix, see the ColorMatrixFilter section of the Flash CS4 Professional ActionScript 3.0 Language Reference.

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

    After you apply a filter, you can manipulate it using ActionScript, such as adjusting the filter properties or animating the filter. For more information, see the Filtering display objects section of Programming ActionScript 3.0 for Flash.

    Note: There are two additional filters that you can apply using ActionScript code, but they are not available using the Flash CS4 user interface: the convolution filter and the displacement map filter. For information on these filters see the following sections of the Flash CS4 Help pages:

For more information on the variety of filters available, please see the Available display filters section of Programming ActionScript 3.0 for Flash.

Applying multiple filters with ActionScript

You access the array of filters applied to an object through standard ActionScript calls using the DisplayObject.filters property. This returns an array that contains each filter object currently associated with the movie clip. By adding more than one filter to an objects filters array, you can apply multiple effects. The effects will be applied in the order they are listed in the array.

It's important to note that setting the filters property duplicates the filters array that you pass into it (demonstrated in the following example) and does not store the filter as a reference. When getting the filters property, it returns a new copy of the array. One negative implication of this approach is that the following code will not work:

// This will not work
my_mc.filters[0].push(myFilter);

Because the previous code snippet returns a copy of the filters array, it modifies the duplicate. The following code example adds a blur filter to the end of an object's existing filter list:

// This will work:
import flash.filters.BlurFilter;
var filterList:Array = myClip.filters;
filterList.push(new BlurFilter(3,3,2));
myClip.filters = filterList;

The advantage of this is that you can copy the filters from one object, modify them and apply them to another object without worrying about affecting the original object's filters.

Adjusting filter properties with ActionScript

By adding more than one filter to an object's filters array you can apply multiple effects. The filters will be applied in the order they are listed in the array. This returns an array that contains each filter object currently associated with the movie clip. Each filter has a set of properties unique to it. The filters can be accessed and modified just like a regular array object, although getting and setting the filters using the filters property returns a duplicate of the filters object instead of a reference.

// This will not work
my_mc.filters[0].blurX = 20;

Because the previous code snippet returns a copy of the filters array, it modifies the duplicate. In order to modify the blurX property, you need to use the following ActionScript code instead:

// This will work
var filterList:Array = my_mc.filters;
filterList[0].blurX = 20;
my_mc.filters = filterList;

The following example blurs an image based on the current position of the mouse pointer on the Stage. Whenever the mouse cursor moves horizontally or vertically, the blurX and blurY properties of the blur filter are modified accordingly.

To adjust a movie clip's filter properties:
  1. Create a new ActionScript 3 FLA file and save it as adjustfilter.fla.
  2. Add the following ActionScript to Frame 1 of the Timeline:
    import flash.display.*;
import flash.net.URLRequest;
import flash.events.Event;import flash.filters.BlurFilter;
var pictLdr:Loader = new Loader();
var pictURL:String = "http://www.helpexamples.com/flash/images/image2.jpg";
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded); 
addChild(pictLdr);

function imgLoaded(event:Event):void{
   pictLdr.filters = [new BlurFilter(10, 10, 2)];
   pictLdr.x = (stage.stageWidth - pictLdr.width) / 2;
   pictLdr.y = (stage.stageHeight - pictLdr.height) / 2;
   pictLdr.addEventListener(MouseEvent.MOUSE_MOVE, redrawEffect);
} 
		  
function redrawEffect(event:MouseEvent):void{
   var tempFilter:BlurFilter = pictLdr.filters[0];
   tempFilter.blurX = Math.floor((event.stageX / stage.stageWidth) * 100);
   tempFilter.blurY = Math.floor((event.stageY / stage.stageHeight) * 100);
   pictLdr.filters = [tempFilter];
}
  3. The previous code example is split into three sections. The first section imports the flash.filters.BlurFilter class and other necessary packages so that you don't have to use the fully qualified class name when you refer to each class. The second section loads an image and assigns it to a display object with its initial settings. The third section of code responds to the mouse movement on the Stage and adjusts the blur accordingly.
  4. Select Control > Test Movie to test the document. When you move the mouse cursor horizontally along the x-axis, it modifies the blur filter's blurX property. Moving the mouse cursor vertically along the y-axis modifies the blur filter's blurY property. The closer the mouse cursor is to the upper left corner of the Stage, the less blurring will be applied to the movie clip.

Where to go from here

For more examples of working with filters at runtime, check out the Filter Workbench sample in the Programming ActionScript 3.0 for Flash online documentation. You can download the source files from the following link:

Graphic Effects Learning Guide for Flash: Animated filters

You can animate movie clips that have filters applied to them. In Flash CS4, tweens are attached directly to the objects they are animating. Keyframes along the timeline show at which points the characteristics of the animating object have changed—position, transformations, and filters included. By creating a motion tween and changing the filter properties at different keyframes, you can easily animate filters to create light source effects, highlights, bevels, and distortions.

This section describes the process of animating a filter effect using the Flash workspace in one example and ActionScript in another.

Animating filters using the Flash user interface

Follow these steps to add a filter manually in Flash:

  1. Create a new ActionScript 3 FLA file and save it as anifilter.fla.
  2. Create or add a movie clip instance on the Stage at Frame 1.
  3. Select the instance and open the Filters tab.
  4. Click the Add filter (page icon) button and select Glow from the pop-up menu.
  5. In the Filters tab, change the Blur X and Blur Y values to 25.
  6. Right-click frame 1 of the Timeline and choose the Add Motion Tween option. Notice that Flash CS4 automatically adds 24 frames along the Timeline. Select the movie clip instance and drag it to a new location on the Stage.
  7. Select the Motion Editor tab to view the animation in the Motion Editor panel. Scroll down the list of animated properties until you reach the Filters section.

  8. Right-click frame 24 of the Blur X row of the Glow filter properties. Insert a keyframe (see Figure 5).

    Motion Editor panel

    Figure 5. The Motion Editor panel is a new addition to Flash CS4 which allows you to easily edit all aspects of your tweened animations.

    (+) View larger

  9. Change the Blur X value associated with the new keyframe to 5.
  10. Select Control > Test Movie to test the animated filter.

Note: Flash CS4 Professional supports advanced control over every editable property in a tween with the Motion Editor. For more information, please see the Editing property curves with the Motion Editor section of Using Flash CS4 Professional.

Animating filters with ActionScript

You can use ActionScript, such as the Tween class, to animate filters at runtime. This approach allows you to apply interesting, animated effects to your Flash applications.

In the first example, you apply a Glow filter to a movie clip instance. Using an enterFrame event handler, you animate the amount of glow that's applied to the movie clip.

To animate a filter using code:
  1. Create a new ActionScript 3 FLA file document and save it as animFilter.fla.
  2. Draw a graphic on the Stage, select it, and then select Modify > Convert to Symbol.
  3. Name the movie clip symbol and then click OK.
  4. Select the movie clip instance on the Stage and then type my_mc in the Instance Name text box in the Property inspector.
  5. Add the following ActionScript to Frame 1 of the Timeline:
    import flash.filters.GlowFilter;
var dir:Number = 1;
my_mc.blur = 10;
my_mc.filters = [new GlowFilter()];
my_mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

function enterFrameHandler(event:Event):void
{   
	my_mc.blur += dir;

	if ((my_mc.blur >= 30) || (my_mc.blur <= 10)) {
		dir *= -1;
	}
	var filter_array:Array = my_mc.filters;
	filter_array[0].blurX = my_mc.blur;
	filter_array[0].blurY = my_mc.blur;
	my_mc.filters = filter_array;
 }

    This code applies a glow filter to your movie clip instance on the Stage and defines an enterFrame event handler, which is responsible for animating the filter effect. The enterFrame event handler animates the glow filter between a blur of 10 and 30 pixels. After the animation is greater than or equal to 30, or less than or equal to 10, the direction of the animation reverses.

  6. Save your changes to the file and then select Control > Test Movie to test the SWF file.

Filters and Flash Player performance

Here's an important thing to remember as you apply filters to movie clips in your files: The type, number, and quality of filters you apply to objects can affect the performance of SWF files as you play them. The more filters you apply to an object, the greater the number of calculations Flash Player must process to display correctly the visual effects you've created. For this reason, Adobe recommends that you apply only a limited number of filters to a given object.

The actual impact at runtime is heavily dependent on the screen area that the filters are being applied to and how often the player has to redraw the filter. The player will automatically cache movie clips with filters applied as bitmaps to avoid having to redraw them each frame. When a movie clip is modified by rotating, resizing, or otherwise changing its appearance, the player redraws the clip and its effects. Note that translating (moving) a movie clip does not cause a redraw. For more information on bitmap caching, see the section on Runtime bitmap caching.

Each filter includes controls that let you adjust the strength and quality of the applied filter. Using lower settings improves performance on slower computers. If you are creating content for playback on a wide range on computers, or are unsure of the computing power available to your audience, set the quality level to low in order to maximize playback performance.

Tip: When applying a blur filter with ActionScript, using values for blurX and blurY which are powers of two (such as 2, 4, 8, 16, and 32) can be computed faster and offer the benefit of a 20–30% performance improvement.

Where to go from here

Try to animate different filter types to see the effects. Pay attention to the performance and rendering quality as you experiment.

To learn more about animation optimization and to see what's possible with animated filters, check out Grant Skinner's article, Varicose-g: High-performance graphics in Flash.

Graphic Effects Learning Guide for Flash: Blend modes

Blend modes create composite images by blending the color of pixels in overlapping objects. Blending enables you to create unique effects by blending the colors in overlapping movie clips, as well as adding a dimension of control to the opacity of objects and images. You can use blend modes to create highlights or shadows that let details from an underlying image show through, or to colorize a desaturated image.

A blending mode contains these elements:

This section describes the process of applying blend modes to instances using the Flash CS4 workspace and ActionScript.

Blend modes in Flash CS4

Because blend modes depend on both the color of the object to which you're applying the blend and the underlying color, you'll need to experiment with different colors to see what the result will be. Try experimenting with the different blend modes to achieve the effect you want.

Flash CS4 provides the following blend modes:

Note: The Erase and Alpha blend modes require that a blend mode other than Normal be applied to the parent movie clip.

Blend mode examples

Different blend modes affect the appearance of an image in different ways. Be aware that the resulting effect of a blend mode may be considerably different, depending on the color of the underlying image and type of blend mode you apply (see Figure 6).

Examples of blend modes

Figure 6. Examples of blend modes

(+) View larger

Applying a blend mode

You use the Property inspector to apply blend modes to selected movie clips.

To apply a blend mode to a movie clip:
  1. Add a few overlapping movie clip instances on the Stage. Simple shapes composed of different colors will illustrate the effect well.
  2. Select the movie clip instance (on the Stage) to which you want to apply a blend mode.
  3. Select a blend mode from the Blending pop-up menu under the Display section in the Property inspector. The blend mode is applied to the selected movie clip instance.
  4. Verify that the blend mode you've selected is appropriate to the effect you're trying to achieve.

You might need to experiment with both the color and transparency settings of the movie clip and then try applying different blend modes to achieve the effect you want. For information on adjusting the color of a movie clip, see the Applying blend modes section of Using Flash CS4 Professional.

Applying a blend mode using ActionScript

You can also apply blend modes to instances using ActionScript code. For example, you can apply the difference blend mode using the following code.

Type the following ActionScript on Frame 1 of the Timeline:

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

function imgLoaded(event:Event):void
{
	pictLdr.blendMode = "difference";
}

Note: The code sample above is written in ActionScript 3 and must be used within an ActionScript 3 file (the default Flash CS4 setting).

Then select Control > Test Movie to test the document.

To see how different blend modes are applied to an image, follow along with the next example. The code below loads a dynamic image and allows you to apply different blending modes to the image by selecting a blending mode from a combo box on the Stage.

To apply blend modes to an image using ActionScript:
  1. Create a new ActionScript 3 FLA file and save it as blendmodes.fla.
  2. Drag a ComboBox component instance onto the Stage and give it an instance name of blendMode_cb. Place the ComboBox instance somewhere along the top edge of the Stage.
  3. Add the following ActionScript to Frame 1 of the Timeline:
    import fl.data.DataProvider;
import flash.display.*;
import flash.net.URLRequest;
import flash.events.Event;

// Create a list of mode typesvar 
var blendMode_dp:Array = new Array();
blendMode_dp.push({data:"add", label:"add"});
blendMode_dp.push({data:"alpha", label:"alpha"});
blendMode_dp.push({data:"darken", label:"darken"});   
blendMode_dp.push({data:"difference", label:"difference"});   
blendMode_dp.push({data:"erase", label:"erase"});
blendMode_dp.push({data:"hardlight", label:"hardlight"});
blendMode_dp.push({data:"invert", label:"invert"});
blendMode_dp.push({data:"layer", label:"layer"});
blendMode_dp.push({data:"lighten", label:"lighten"});
blendMode_dp.push({data:"multiply", label:"multiply"});
blendMode_dp.push({data:"normal", label:"normal"});
blendMode_dp.push({data:"overlay", label:"overlay"});
blendMode_dp.push({data:"screen", label:"screen"});
blendMode_dp.push({data:"subtract", label:"subtract"});

// Initialize the combobox
blendMode_cb.dataProvider = new DataProvider(blendMode_dp);
blendMode_cb.addEventListener(Event.CHANGE,changeHandler);

// Create an event handler for the combobox
function changeHandler(event:Event):void { 
   pictLdr.blendMode = event.target.selectedItem.data;
}

// Create a colored rectangle for the overlay
var rect:Shape = new Shape();
rect.graphics.beginFill(0xFF0000);
rect.graphics.moveTo(100,100);
rect.graphics.lineTo(350,100);
rect.graphics.lineTo(350,350);
rect.graphics.lineTo(100,350);
rect.graphics.lineTo(100,100);
addChild(rect);

// Load an image to view the modes
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);

// Layout the image when it has downloaded
function imgLoaded(event:Event):void
{
    pictLdr.x = (stage.stageWidth - pictLdr.width) / 2;
    pictLdr.y = (stage.stageHeight - pictLdr.height) / 2;
}

    This ActionScript code populates the combo box with each type of blending mode, so the user can view each effect on the dynamically loaded image. A colored rectangle is drawn behind an image loaded from the server. The two images create a blending effect which displays differently each time a new blending mode is selected in the combo box.

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

Where to go from here

Flash Player 10 introduces the ability to assign a Pixel Bender shader as a blend mode to produce a new range of visual effect possibilities. Please see Using a shader as a blend mode in the Programming ActionScript 3.0 for Flash online documentation for more information.

Graphic Effects Learning Guide for Flash: Bitmaps

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.

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:

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.

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

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.

Graphic Effects Learning Guide for Flash: Text

Font rendering in Adobe Flash Player controls the way your text appears in a SWF file—that is, how it is rendered (or drawn) at runtime. Flash CS4 offers the advanced anti-aliasing options available in ActionScript 2 and ActionScript 3, as well as the new Flash Text Engine (FTE), which gives developers far greater control over text rendering and layout.

This section describes how to work with anti-alias text controls in the TextField class and the new controls in the Flash Text Engine.

Working with text anti-aliasing

Flash Player 8 and later offers two types of anti-aliasing: normal and advanced. The advanced font rendering technology helps make text appear legible and clear at small to regular font sizes, such as when you apply advanced anti-aliasing to your text fields. You can enable advanced anti-aliasing using either the Flash CS4 authoring tool or ActionScript. The improved capabilities mean that embedded text appears at the same level of quality as device text, and fonts appear the same on different platforms.

Anti-aliasing results in smooth text so that the edges of characters displayed onscreen look less jagged—which can be particularly helpful when you want to display text at small sizes. Anti-aliasing is supported for static, dynamic, and input text if the user has Flash Player 7 or later.

Advanced and custom anti-alias features support the following:

Advanced and custom anti-alias features do not support the following:

Note: When text is animated, the player turns off advanced anti-aliasing to improve the appearance of your text while it's moving. After the animation is complete, anti-aliasing is turned back on. Subpixel rendering is also disabled for fields with advanced anti-aliasing when they are cached as bitmaps, have a filter applied to them, or are drawn into a BitmapData object.

There are five different font rendering options available in Flash CS4. To choose an option, select the text field and open the Property inspector. Select an option from the Font rendering method pop-up menu:

When you open a FLA file created for use with Flash Player 7 or earlier, the Property inspector sets the anti-alias option to its equivalent anti-aliasing option from Flash MX 2004 to the file's text.

To use the Anti-alias for Readability or Custom Anti-Alias options with your text fields:
  1. Create a new FLA file.
  2. Select the Text tool and create new text fields on the Stage.
  3. Type inside the text field to create text.
  4. Select the text field to which you want to apply the Anti-Alias for Readability or Custom Anti-Alias option.
  5. In the Property inspector, select Anti-Alias for Readability or Custom Anti-Alias from the Font Rendering Method pop-up menu.

Tip: Advanced anti-aliasing is not recommended for very large fonts (larger than 48 points).

You can also apply Anti-alias for Readability or Custom Anti-alias using ActionScript, which is essential when you need more control over the appearance, content, and formatting of your text fields. Advanced anti-aliasing is available only in Flash Player 8 and later, and can be used only if you embed the font in the library and have the text field's embedFonts property set to true. For Flash Player 9, the default setting for text fields created using ActionScript is normal.

To set values for the TextField.antiAliasType property, use the following string values:

To apply advanced anti-aliasing using ActionScript:
  1. Create a new ActionScript 3 FLA file and save it as antialiastype.fla.
  2. Somewhere off the Stage and out of view, create a new dynamic text field using the Text tool and set the font to Arial.
  3. With the text field selected, click the Character Embedding button in the Property inspector and embed the Arial font set into the text field. This step embeds the font and makes it available to the following code in Step 4.
  4. Add the following ActionScript to Frame 1 of the main Timeline: 
    // Create the field's format
var format:TextFormat = new TextFormat();
format.color = 0x336699;
format.size = 10;
format.font = "Arial";

// Create the text field
var myText:TextField = new TextField();
myText.embedFonts = true;
myText.autoSize = TextFieldAutoSize.LEFT;
myText.antiAliasType = AntiAliasType.ADVANCED;
myText.defaultTextFormat = format;
myText.selectable = false;
myText.mouseEnabled = true;
myText.text = "Hello World";
myText.addEventListener(MouseEvent.CLICK, clickHandler);
addChild(myText);

// Toggle the antialias mode when the text is clicked on
function clickHandler(event:Event):void
{
   if( myText.antiAliasType == AntiAliasType.NORMAL ){
      myText.antiAliasType = AntiAliasType.ADVANCED;
   }else{
      myText.antiAliasType = AntiAliasType.NORMAL;
   }
}

    The previous code is split into four key areas. The first block of code creates a new TextFormat object, which specifies a font and font size to be used for a text field that will be created shortly.

    The second block of code creates a new text field with the instance name myText. In order for the font to be properly embedded, you must set embedFonts to true for the text field instance. The code also sets the text formatting for the new text field to the TextFormat object that you created earlier.

    The third, and final, block of code defines the click handler, which toggles the antiAliasType property between normal and advanced.

  5. Save your changes to the FLA file.
  6. Select Control > Test Movie to test your file.
  7. Click the text field on the Stage.

Clicking the text field switches the anti-alias type from normal (the default) to advanced. When you are dealing with text fields with a smaller font size, setting the anti-aliasing to advanced can dramatically improve the readability of the text.

Tip: Advanced anti-aliasing allows font faces to be rendered at very high quality at small sizes. It is best used with applications that include a great deal of small text. Advanced anti-aliasing is not recommended for very large fonts (larger than 48 points).

Flash Player 10 includes the new Flash Text Engine (FTE) classes, which allow for far more complex text formatting operations including control over text metrics, formatting, and bidirectional justifications. The FTE classes also include improved support for multilingual applications, such as those that switch between Latin text and multibyte Asian text.

The following example shows how the justification can be precisely controlled in a simple text block. In this case, all lines in the text block are justified except the last line.

To apply precise text justification to a text block using the FTE classes:
  1. Create a new ActionScript 3 FLA file and save it as justifiedtext.fla.
  2. Add the following ActionScript to Frame 1 of the main Timeline: 
    import  flash.text.engine.*; 
import flash.display.Sprite; 
var str:String =  "Lorem ipsum dolor sit amet, consectetur adipisicing elit, " + 
   "sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut " + 
   "enim ad minim veniam, quis  nostrud exercitation ullamco laboris nisi ut " + 
   "aliquip ex ea commodo  consequat."; 

var  format:ElementFormat = new ElementFormat(); 
var  textElement:TextElement = new TextElement(str, format);
var  spaceJustifier:SpaceJustifier = new SpaceJustifier("en",  LineJustification.ALL_BUT_LAST);   
var  textBlock:TextBlock = new TextBlock();

textBlock.content =  textElement;
textBlock.textJustifier  = spaceJustifier; 

var textLine:TextLine  = textBlock.createTextLine(null, 150); 
var yPos = 20; 
while( textLine ) 
{ 
   addChild(textLine);
   yPos += textLine.textHeight + 2;
   textLine.x = 15; 
   textLine.y = yPos;
   textLine =  textBlock.createTextLine(textLine, 150);
}
    Notice that the SpaceJustifier class allows you to set the justification to all but the last line with an indicator that the font being justified is in the English language (en). The FTE gives you element-, line-, and block-level access to font rendering.

  3. Save your changes to the FLA file.
  4. Select Control > Test Movie to test your file.

Where to go from here

For more information on programming text fields, please see the Using the TextField class section of the Help pages.

For more information on working with the new Flash Text Engine, please see the Using the Flash Text Engine section of the Help pages.

Graphic Effects Learning Guide for Flash: Inverse kinematics, 3D, copy/paste, and 9-slice scaling

Among the many workflow improvements included with Flash CS4, there is a handful of new graphic effects features that provide new options for animation and graphic production. These features are supported in ActionScript 3 files and require Flash Player 9, or Flash Player 10 in some cases.

This section provides an overview of many of the new graphics related features in Flash CS4.

Inverse kinematics

The Bone tool in Flash CS4 lets you create armatures using inverse kimematics. An armature creates coordinated movements within a chain of connected parts. The parts within the armature can be sections of a drawing object or multiple symbol instances.

To create a simple armature:
  1. Create a new ActionScript 3 FLA file and name it ikMovement.fla.
  2. Draw a shape on frame 1 and convert it to a symbol (Modify > Convert to Symbol).
  3. Duplicate the shape (Edit > Duplicate) two times and spread the instances out on the Stage about 50 pixels apart.
  4. Click the Bone tool in the Tools panel. Select the instance farthest to the left and drag the selection to the next instance to the right. Notice the "bone" selection indicator that connects the two instances. The first object that you select is the root joint, from which all other joints in the armature stem. Connect all the instances with the Bone tool.
  5. Choose the Selection tool (V) and click on the instance farthest to the right, and then drag it around the screen. Notice how you can use the armature to position the collection of graphics at authortime.
  6. Select the keyframe in the timeline containing the armature to show its frame properties in the Property inspector. Change the Type field from Authortime to Runtime under the Options section.
  7. Export the SWF file (Control > Test Movie) to see the armature animation at runtime. Drag the shapes around to see the effect.

Note: You can work with armatures with either the Authortime or Runtime setting. In Authortime mode, you can create tweened animations by creating pose frames on the armature layer.

You can create armatures in the Flash CS4 authoring tool for Flash Player 10 and later. For more information, please see the Working with inverse kinematics section of Programming ActionScript 3 for Flash, as well as the Animating with the Bone tool section of Creating animation in ActionScript 3.

3D animation of 2D objects

Flash CS4 and Flash Player 10 support 3D animation of 2D objects using the new z property and rotationX, rotationY, and rotationZ properties of the DisplayObject class. You can access these properties in ActionScript 3 or by using the 3D Rotation Tool (W) in Flash CS4.

To create a 3D tween:
  1. Create a new ActionScript 3 FLA file and name it 3dTween.fla.
  2. Draw a shape on frame 1 and convert it to a symbol (Modify > Convert to Symbol).
  3. Right-click the keyframe containing the shape and choose Create Motion Tween. Make sure the playhead is in the last frame on the Timeline.
  4. Select the 3D Rotation Tool. Click and drag the shape into position.
  5. Export the SWF file (Control > Test Movie) to see the 3D tween play.

Copy and paste motion

One exciting and relatively new feature is the ability to create a motion tween along the Timeline and then copy and paste the exact tweening effect on another object. This feature can act as a consistency tool and offers an easy and efficient method for applying animation effects across a movie or multiple movies.

Note: The process for creating tweened animations has changed in Flash CS4, but the process for copying a tween is the same as it was in Flash CS3.

To copy and paste all the properties of a motion tween:
  1. Create a new ActionScript 3 FLA file and name it pasteMotion.fla.
  2. Name the default layer shape1. Draw a shape on frame 1 and convert it to a symbol (Modify > Convert to Symbol).
  3. Right-click the keyframe on frame 1 of the shape1 layer and choose the Create Motion Tween option. Notice that 24 frames are automatically added to the Timeline.
  4. Change the physical properties of the instance at frame 20 by moving it on the Stage and distorting the shape using the Free Transform (Q) tool. Notice the motion guide line that connects the two instances on the Stage; you can select the line and drag to bend it into a curve if you like.
  5. Select the frames in the timeline layer where the animation exists. Right-click in the selection and choose the Copy Motion option from the context menu.
  6. Create a new layer named shape2 and draw a second shape on the layer. Select the shape and convert it to a symbol.
  7. Right-click the keyframe in the timeline that contains the new instance and choose the Paste Motion option to paste the motion tween to the shape2 layer.
  8. Export the SWF file (Control > Test Movie) to see the animations play.
To save a tween as a motion preset:
  1. Repeat Steps 1–4 in the previous section.
  2. This time, right-click the keyframe and choose the Save as Motion Preset option.

  3. Select the options from the original tween that you want to paste and click the Apply button to apply the effect (see Figure 7).

    The Motion Presets panel

    Figure 7. The Motion Presets panel is a new feature in Flash CS4 enabling you to choose animation presets or create custom presets.

  4. To apply a saved preset, add an instance of a movie clip to a keyframe and select it.
  5. Right-click the preset in the Motion Presets panel and choose the Apply to current location option.
  6. Export the SWF file (Control > Test Movie) to see the animations play.

Copy and paste motion as ActionScript 3

Copying a motion tween as ActionScript 3 allows you to paste the effect as ActionScript. In Flash CS3, the resulting ActionScript uses descriptive data written in XML format along with the ActionScript 3 Animator class to dynamically create the animation effect. In Flash CS4, the resulting ActionScript uses the AnimatorFactory class to produce the effect without XML. These approaches offer a quick way to generate animation in your code-based work or as a consistent way to quickly apply motion animation settings to a number of objects without using the Timeline.

Note: The Animator and AnimatorFactory classes are available in Flash Player 9 and later. The Animator3D and AnimatorFactory3D are available in Flash Player 10 and later for 3D tweens.

To copy a motion tween as ActionScript 3:
  1. Create a new ActionScript 3 FLA file and name it copyAS3Motion.fla.
  2. Name the default layer shape1. Draw a shape on frame 1 and convert it to a symbol (Modify > Convert to Symbol).
  3. Right-click the keyframe containing the instance and choose the Create Motion Tween option. The Timeline automatically extends to 24 frames.
  4. Change the physical properties of the instance at frame 24 to create a tween.
  5. Right-click the frames in the layer containing the tween and choose the Copy motion as ActionScript 3 option.
  6. Create a ActionScript 3 FLA file named pasteAS3Motion.fla.
  7. Name the default layer Assets and draw a second shape on the layer. Select the shape and convert it to a symbol.
  8. With the new shape still selected, assign the instance name my_mc to the instance in the Property inspector.
  9. Add a new layer and name it Actions. Select the keyframe on frame 1 of the Actions layer and paste the motion code from the Clipboard to the Actions panel. Depending on what your original tween looks like, your code will look similar to the following:
    import fl.motion.AnimatorFactory;
import fl.motion.MotionBase;
import flash.filters.*;
import flash.geom.Point;
var __motion_sq_2:MotionBase;
if(__motion_sq_2 == null) {
   import fl.motion.Motion;
    __motion_sq_2 = new Motion();
    __motion_sq_2.duration = 24;


    // Call overrideTargetTransform to prevent the scale, skew,
    // or rotation values from being made relative to the target
    // object's original transform.

    // __motion_sq_2.overrideTargetTransform();


    // The following calls to addPropertyArray assign data values
    // for each tweened property. There is one value in the Array
    // for every frame in the tween, or fewer if the last value
    // remains the same for the rest of the frames.
    __motion_sq_2.addPropertyArray("x", [0,5.63511,11.3635,17.3335,23.9381,32.789,45.597,55.1297,63.5817,71.8295,80.1171,88.5647,97.1921,106.035,115.079,124.33,133.779,143.438,153.271,163.286,173.464,183.794,194.295,204.95]);
    __motion_sq_2.addPropertyArray("y", [0,-12.9125,-25.8012,-38.585,-51.0339,-61.9071,-60.1564,-49.8042,-38.5181,-27.078,-15.6877,-4.38936,6.75406,17.75,28.5647,39.203,49.6592,59.9546,70.0589,79.9907,89.7427,99.3154,108.736,118]);
    __motion_sq_2.addPropertyArray("scaleX", [1.000000]);
    __motion_sq_2.addPropertyArray("scaleY", [1.000000]);
    __motion_sq_2.addPropertyArray("skewX", [0]);
    __motion_sq_2.addPropertyArray("skewY", [0]);
    __motion_sq_2.addPropertyArray("rotationConcat", [0]);
    __motion_sq_2.addPropertyArray("blendMode", ["normal"]);

    // Create an AnimatorFactory instance, which will manage
    // targets for its corresponding Motion.
    var __animFactory_sq_2:AnimatorFactory = new AnimatorFactory(__motion_sq_2);
    __animFactory_sq_2.transformationPoint = new Point(0.499281, 0.499281);

    // Call the addTarget function on the AnimatorFactory
    // instance to target a DisplayObject with this Motion.
    // The second parameter is the number of times the animation
    // will play - the default value of 0 means it will loop.
    // __animFactory_sq_2.addTarget(<instance name goes here>, 0);
}
  10. Delete the comment on the second-to-last line of code and insert the name of your instance in place of the <instance name goes here> text.
  11. Export the SWF file (Control > Test Movie) to see the animations play.

Tip: For dynamic processing of animations, explore using the Timeline object in Flash JavaScript (JSFL) for possibilities in author-time automation. Please see Extending Adobe Flash CS4 Professional in the online Help pages.

9-slice scaling

The 9-slice scaling feature was introduced in Macromedia Flash 8 and now features an improved, more accurate authortime preview in Adobe Flash CS4. This feature allows you to better control the effects of scaling vector graphics within movie clip instances. By using 9-slice scaling you can create graphics that can be scaled without the distortion that often occur in scaling. For example, you may find this feature very useful when creating button graphics with rounded corners where the graphic needs to change size while retaining the shape of the original button.

To turn on 9-slice scaling:
  1. Create a new FLA and name it scalingRectangle.fla.
  2. Using the Circle tool, draw nine circles of the same size (see Figure 8).
  3. Select all nine circles and convert them to a symbol (Modify > Convert to Symbol).
  4. In the symbol properties dialog, check the Enable guides for 9-slice scaling option.
  5. Click OK to accept the settings and then double-click on the instance to enter its symbol editing mode.
  6. Notice the guide lines that appear in the editing mode. Use the cursor to drag the guides to the proper locations to isolate the circles in the corners.

  7. Return to the Stage to view the instance again. Scale it to a larger size using the Free Transform tool. Notice that the circles in the corners do not scale and that the stroke weight remains the same.

    9-Slice Scaling

    Figure 8. Guides available for placement while editing within a symbol with 9-slice scaling enabled

Where to go from here

To learn more and explore what you can do with graphic effects in Flash CS4, check out the Graphic effects section of the Flash Developer Center.

About the author

This content was authored by Adobe Systems, Inc.