Hacks #1-7

This book assumes you are familiar with the basics of using Flash to create visual effects and animations using the timeline. If you aren't comfortable with Flash, you might still find the techniques employed here interesting. Once you've learned some Flash basics via either Flash's online help or a tutorial book, you can revisit the hacks that piqued your curiosity. I considered beginning the book with tips on optimization, security, and similar topics. But I decided to defer those until later, hoping that the hacks in this chapter would get you excited about the book and expand your horizons while remaining true to the hacker ethic: "Show me the cool stuff first."

So, in this chapter, I've grouped hacks that show you how to achieve some effects you might not have known about or might have seen and not known how to reproduce. As with all the hacks presented in this book, I hope they educate and ultimately inspire you—not in the sense of "inspiration," as when one views a great piece of art, but in the sense of "motivation." Thus, I hope you are motivated to try these hacks and inspired to create some of your own.

The hacks in this chapter are grouped together because they are all loosely associated with visual effects. Later chapters in this book deal with additional visual effects using transitions and colorization, 3D, masking, and the Drawing API. This chapter includes pixel effects and converting from animated GIFs and Photoshop files to Flash .fla and .swf files (the source document and distribution formats used by Flash). I close the chapter with two hacks that show you how to generate a tree and make it sway in the breeze.

Although Chapter 3 makes the heaviest use of masks, masks are so ubiquitous in Flash [Hack #1] that hacks in other chapters use them as well. So for readers unfamiliar with masks, here is a brief introduction.

Flash animations are created by superimposing one or more layers in an animation (similar to layers as you'd find in Photoshop and other graphics programs). The Timeline panel contains the main timeline, which organizes the layers and displays their contents over time. Masks are traditionally used to create visual effects, such as a spotlight effect, in which one layer is viewed through the "hole" created by the masking layer. That is, the masking layer defines the area of the underlying masked layer that is visible (the remainder is "masked off" and therefore invisible). To create a masking layer (or simply "mask layer") in the authoring tool, insert a new layer in the timeline (using InsertTimelineLayer) in front of the layer you want masked. Then set the mask layer's Type to Mask in the Layer Properties dialog box, accessible under ModifyTimelineLayer Properties. Then, on the mask layer, create the shape to use as the mask. In Flash, areas with pixels in the mask layer allow the masked layer to show through. Areas in the mask layer without pixels block (mask off) the masked layer. For example, if you want to create a spotlight effect in which the masked layer shows through the circle, you could use the drawing tools (WindowTools) to create a black circle as the mask.

Flash MX added the ability to create scripted masks in which a mask defined by one movie clip is used to mask another movie clip's contents. A scripted mask, as the name implies, is a mask applied dynamically at runtime with ActionScript via the MovieClip.setMask( ) method. Applying a runtime mask is akin to creating a mask layer during authoring time, except that it affords much more flexibility. The mask used over a given clip can be changed at runtime, and new masks can be created at runtime. Although you can animate a mask layer in the authoring tool, again, you can create more sophisticated animations by animating the mask at runtime via ActionScript. I hope this brief introduction to masking allows you to get the most out of the various hacks in this book that use author-time and runtime (scripted) masks. For more information on masks see the online Help topic How Do IBasic FlashWork with LayersAdd a Mask Layer, or search the online Help for the term "Mask."

Without further ado, on to the cool stuff.