Graphic Effects Learning Guide for Flash: Overview

Adobe Flash Professional CS5 provides a number of features for producing impressive graphic effects. These features, along with the improved workflows in Adobe Creative Suite 5, open up an endless list of effect and production possibilities.

Images can be represented using bitmap or vector graphics in Adobe Flash Player. The drawing tools in Flash Professional draw vector graphics as a native format, but you can import bitmap (and vector) graphics created in other tools such as Adobe Fireworks, Adobe Photoshop, or Adobe Illustrator. You can apply effects to your graphics using the range of features available in the Flash Professional workspace.

Graphic effects features range from simple topics like color management to more involved topics like creating inverse kinematics. Some features have been supported in Flash Player for many versions and some are new to Flash Player 9 or 10. Before you dive into the details, its important to check which Flash Player versions support which features:

• Color management (Flash Player 8–10): Use the Colors, Swatches, and Kuler panels in addition to the fill and stroke color pickers on the Tools panel.
• Color effects (Flash Player 8–10): Use the Color Effects area on the Properties panel to adjust the brightness, tint, or opacity (alpha) of a selected movie clip, button, or text object.
• 2D transformations (Flash Player 8–10): Apply 2D transformations such as scale, skew, rotate, and position using the Transform panel, Properties panel, or the Free Transform Tool.
• 3D transformations (Flash Player 10): Flash Player 10 extends the coordinate space of display objects by adding a z property and rotationX, rotationY, and rotationZ properties.
• 9-slice scaling (Flash Player 8–10): Specify areas on a symbol that will remain undistorted when the symbol's instance is scaled on the Stage.
• Text effects (Flash Player 10): Animate and apply effects to text using the Flash Professional workspace or dynamically using ActionScript at runtime.
• Runtime drawing (Flash Player 8–10): Use ActionScript to draw vector shapes at runtime using the drawing API contained in each display object.
• Bitmap caching (Flash Player 8–10): Optimize playback performance using runtime bitmap caching by specifying that a static movie clip (for example, a background image) or button symbol is cached as a bitmap at runtime. Caching a movie clip as a bitmap prevents Flash Player from having to continually redraw the image, providing a significant improvement in playback performance in some scenarios.
• Bitmap smoothing (Flash Player 8–10): Improve the look of bitmap images on the Stage when they are severely enlarged or reduced. The appearance of these bitmaps in the Flash authoring tool and in Flash Player is now consistent.
• BitmapData (Flash Player 8–10): Create and manipulate bitmaps at runtime using the Bitmap and BitmapData classes in ActionScript.
• Pixel Bender filters (Flash Player 10): Import custom-built filter effects created in the Pixel Bender toolkit.
• Masks (Flash Player 8–10): Create masks using the Layers panel or dynamically using ActionScript. Masks allow you to create the illusion of cropping an image without actually deleting any part of it.
• Effect filters (Flash Player 8–10): Create more compelling designs by applying visual effects to movie clips and text. Filters are natively supported and rendered in real time by Flash Player 8 or later. With these filters, you can make objects glow, add drop shadows, and apply many other effects and combinations of effects.
• Blend modes (Flash Player 8–10): Achieve a variety of compositing effects by using blend modes to change the way the image of one object on the Stage is combined with the images of any objects beneath it.
• Tiles and patterns (Flash Player 8–10): Use the bitmap fill option in the Colors panel or use the Deco and Spray Brush tools to easily create repeating tiles to use as color fills or as a pattern generator.
• Inverse kinematics (Flash Player 10): Create armatures using the Bone tool in Flash CS4 Professional and later by connecting groups of symbols or sections of a drawing shape in a linked armature of movement. Armatures can be active at authortime for tweened animation across pose frames, or at runtime for user-driven animation.
• Copy Motion as ActionScript 3 (Flash Player 9–10): Copy and paste a motion tween, including all of its properties, to another object. You may also copy a motion tween and apply the properties using ActionScript 3 for code-based animation.
• Motion presets (Flash Player 10): Save Flash Player 10 motion tweens for reuse on other objects. You can also choose from a range of prebuilt tween effects.

Note: Flash Player 8 supports only the ActionScript 2 language. Flash Player 9 and later support both the ActionScript 2 and ActionScript 3 languages. The code samples in this learning guide use the ActionScript 3 syntax. See the Flash 8 version of this article for samples that can be used in an ActionScript 1 or ActionScript 2 file.

Most graphic effects features can be applied by using tools in the Flash Professional workspace or by writing ActionScript code. You'll use combinations of both approaches to set the view of the graphics on the Stage at author-time and then control them at runtime.

If you're working with the tools in Flash Professional, you'll find that the effects features are easy to use as long as you know where to look. A common workflow involves selecting the object that you want to affect using the Selection Tool (black arrow) and then using the tools in the Tools panel or the various other panels to apply an effect.

If you're working with ActionScript, you'll apply the effects by writing code that targets a named instance (text, movie clip, button, etc.). A common workflow is to assign ActionScript code to a keyframe on a timeline using the Actions panel. Intermediate and advanced developers often choose to write ActionScript in external files called ActionScript classes. Since ActionScript can only be seen executing in Flash Player, you'll publish the SWF file to see the results of your coding work.

The sections of this learning guide will show you where to find the effect features in Flash Professional CS5 and how to apply the effects to your project. In addition you'll explore how ActionScript can be used to apply each effect at runtime.

Remember that graphic effects such as filters, blend modes, and opacity effects can impact the performance and playback of the SWF file. The actual impact at runtime is dependant upon the size of the screen area being affected and the number of overlapping objects containing complex attributes. Be sure to test your work as you go and if necessary use graphic effects sparingly in your project.

Visit the landing page of the Graphic Effects Learning Guide for Flash and dive into whatever topic interests you.