Graphic Effects Learning Guide for Flash: Vectors

Adobe Flash Professional CS5 provides drawing tools as a visual metaphor for creating and editing vector shapes. Use the drawing tools or the Graphics API in ActionScript to create artwork in your FLA file or dynamically at runtime.

Unlike bitmap graphics, vector graphics are images composed of lines and points defining the outline of a shape (see Figure 1). At their core, vector graphics are mathematical equations that define the outline. Since the definition of a vector graphic is to be lightweight, so are the vector images themselves.

Vector graphics are ideal for web-based images because of their small file size and their flexibility with handling graphic transformations. Since vectors are defined mathematically, they have no finite resolution; they can be scaled up or down and transformed while still maintaining a high-quality image.

For more information on vector paths, see the About drawing section of the Flash Professional online help as well as the vector graphics section of the Flash glossary.

Flash Professional provides a range of tools for drawing and editing vector graphics. You can use the shape drawing tools in the Tools panel as an easy way to visually create vectors (see Figure 2).

If you need to create odd shapes or complex graphics, you can use the Pen Tool to draw them, just as you would in Adobe Illustrator or Adobe Fireworks (see Figure 3).

Use the drawing tools to draw graphics on the Stage. The general workflow for creating and editing vector images includes drawing shapes, selecting them, and then editing their attributes in the Properties panel. For example, after creating a vector shape you can select it and change its size, location, fill color, stroke color, and stroke attributes in the Properties panel.

For more information on drawing images, see the Drawing section of the Flash Professional online help.

You can use the Trace Bitmap command to render bitmaps into vector format at varying degrees of detail. This feature in Flash Professional is a great way to create interesting visual effects by abstracting bitmap images (see Figure 4).

To convert a bitmap to a vector:

1. Create a new ActionScript 3 FLA file and save it as trace-bitmap.fla.
2. Rename Layer 1 to assets.
3. Import an image into Flash Professional (File > Import > Import to Stage).
4. Select the image and launch the Trace Bitmap dialog box (Modify > Bitmap > Trace Bitmap).
5. Adjust the threshold, area, and curve settings to produce a detailed or abstract image (see Figure 5). The lower you set the Color threshold value and Minimum area value, the more shape detail will be produced.

6. Click OK to apply the effect.
7. Save the file.

Note: Converting a bitmap to the vector format produces many vector shapes that can lead to excessive file sizes if rendered in great detail. Check your file size as you experiment with the effect to find the right balance of image detail versus file size.

As your designs grow in size, you'll need to consider performance and optimization. When you have vector 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 overlapping it change, 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 as bitmaps 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 will not 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 is rendered more quickly.

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

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

Applying bitmap caching is not always recommended because it can negatively affect SWF file performance in certain circumstances. 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 Properties panel, select the Cache as bitmap option in the Display section.

You can use ActionScript to enable caching or scrolling, as well as to control backgrounds. You can use the Properties panel 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 Properties panel 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 do that, 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 is rendered much faster.

To cache a movie clip using ActionScript:

1. Create a new FLA file and name it cache-bitmap.fla.
2. Create or import a complex vector graphic that covers the Stage of the FLA file.
3. Select the vector graphic and convert it to a movie clip symbol (Modify > Convert to Symbol) named Image.
4. With the instance selected on the Stage, name it my_mc in the Properties panel.
5. Rename Layer 1 to assets and add a new layer named actions above it.
6. Select Frame 1 of the actions layer and open the Actions panel (Window > Actions).
7. Copy and paste the following code in the Script window of the Actions panel:

8. Select Control > Test Movie to test the document.
9. Save the file.

By caching the complex vector background graphic, the movie can animate graphics on top of it without having to redraw the background image during each frame of movement.

Note: You cannot apply caching directly to Classic text fields. If you wish to apply caching to a Classic 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.

For more information on bitmap caching, see the Scaling and caching symbols section of the Flash Professional online help.

Display objects such as Sprites and movie clips can be used as a canvas for drawing at runtime. You can use their graphics property to render vector shapes using a drawing API. The Graphics object can be used to easily generate rectangles and ellipses, irregular shapes, and 3D effects using triangles.

To draw a shape using ActionScript:

1. Create a new ActionScript 3 FLA file and save it as drawing.fla.
2. Rename Layer 1 as actions.
3. Select Frame 1 of the actions layer and open the Actions panel.
4. Copy and paste the following code in the Script window of the Actions panel:

5. Take a moment to review the code. First, a Sprite is created as a canvas followed by several lines of code that define the stroke and fill of a circle. Before the oval is added to the Stage, it's centered on the screen using its x and y coordinates.
6. Run the Test Movie (Control > Test Movie) command to see the shape appear at runtime.
7. Save the file.

For more information on drawing with ActionScript, see the Using the drawing API section in the ActionScript 3 Developer's Guide.

This section of the Graphics Effects Learning Guide provides an overview of vector graphics options in Flash Professional. Check out Flash Player 10 Drawing API by Trevor McCauley for more information on the range of features available in the drawing API for Flash Player.