8 August 2011
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.
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:
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:
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:
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 (
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:
// Turn on bitmap caching for the large background my_mc.cacheAsBitmap = true;
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:
import flash.display.Sprite; var oval:Sprite = new Sprite(); oval.graphics.lineStyle(2, 0x0066FF); oval.graphics.beginFill(0xFF9900); oval.graphics.drawEllipse(0,0,100,100); oval.graphics.endFill(); oval.x = (stage.stageWidth – oval.width) / 2; oval.y = (stage.stageHeight – oval.height) / 2; addChild(oval);
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.
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.