Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Understanding the Flash Architecture

Understanding how Flash organizes assets and where to put all your content is important before you start to create FLA files. You need to learn where to put your assets, and the kinds of things that they are capable of in Flash.

Sometimes wrapping your head around the structure of a Flash file can take some work. However, if you have ever worked with timeline-based software (such as After Effects or Final Cut Pro), you're a step ahead. Flash is also based on a Timeline that you put your assets on, such as graphics, video, sound, and even code. The following sections describe what you can create in Flash and how you can organize it in a document. The following projects in this book use all these assets and organizational strategies.

Importing Into Flash

You can import many different kinds of files into Flash. This is particularly useful when you have content built using other software that you want to use in Flash, such as graphics made in Photoshop or video edited in After Effects.

The following file formats can import into Flash: PNG, GIF, JPEG, PICT, BMP, TGA, TIFF, QuickTime image, Silicon Graphics, MacPaint, Photoshop, Illustrator, AutoCAD DXF, FreeHand, SWF, AIFF, MP3, Sound Designer II, Sun AU, WAV sound, QuickTime Movie, Video for Windows, MPEG, Digital Video, Flash Video, and PDF.

On Windows, you can also import EMF and WMF files.

You might be able to import video formats other than those listed previously, depending on the codecs you have installed on your computer. A codec is software that you use to compress and decompress files such as video files. Codecs are explained in more detail in Chapter 8. Not all formats are supported on both Macintosh and Windows. You should have QuickTime installed, which Flash uses to help import a variety of file formats. Some companies develop tools that let you import additional kinds of files into an FLA file. For example, Electric Rain has developed an extension that enables you to import the native file format of its software Swift3D. This extension enables you to create 3D content and import it directly into Flash without losing the functionality if you were to import a SWF file instead.

Looking at symbols and instances

Symbols are one of the main parts that make up a Flash document. Symbols form a collection of assets that might form the graphics, bitmap images, video, sounds, fonts, components, buttons, and animation. Symbols are stored in the file's Library (Figure 1.8), and they are assets that you can reuse throughout your file numerous times. You can drag symbols onto the Stage, and even between Libraries of different FLA files.

Figure 1.8. The assets you import into Flash or create in Flash are stored in the Library.

Chapter 6.

Select Window > Library to open the Library. An icon and name represent each symbol, and you can tell what kind of asset the symbol is by referring to the Kind column. When you create a new symbol, you can name and choose the type of symbol it will be. The Use Count column lets you know how many instances of a symbol are used throughout your document.

Before you start to organize a file, you need to understand what symbols are and why they are useful in a file. Symbols help you reduce file size in a SWF because you can reuse a symbol numerous times and it's referenced only once in the Library. You can even modify that single symbol that's in the Library instead of creating a new instance of it (which would increase the file size of your SWF file). You can drag copies of a symbol in the Library to the Stagewhen you do so, it is called an instance. You can give some instances a name using the Property inspector, which means that you can control them usingExercise 2.

For example, you might use ActionScript to change the size, color, or behavior of the instance. All instances, even if they cannot have instance names, can be modified using the Property inspector (Figure 1.9). If you modify an instance using ActionScript or the Property inspector, the modifications change only the instance itself, not the symbol in the Library. If you edit the symbol in symbol-editing mode, all instances that are on the Stage update with your changes. Therefore, you need to be careful when you edit a symbol that you want to change all the instances of it on the Stage as well.

Figure 1.9. You can give a name to an instance on the Stage using the Property inspector.

Exercise 1.

You can even create a symbol using the Library. Click the button in the upper-right corner of the Library panel. The menu that opens is called the Options menu, and you can use it to create a new video symbol or font symbol, and change the settings of selected symbols. You will learn more about this menu in later chapters.

You can create a duplicate of an symbol if you want to make changes to a single instance. You will learn more about this later on in the book.

Understanding symbol functionality

Flash has three primary kinds of symbols that you can create directly in the authoring environment by using tools in Flash: graphics, buttons, and movie clips. You will create some of these symbols later in this chapter, but first you find out what you use each symbol for.

Graphic symbols are useful when you want to add a reusable static image to an FLA file. A graphic symbol might consist of drawings that you made in Flash, simple animations, or images that you import into the file and want to reuse. Graphic symbols do not have an instance name, so you cannot control them by using ActionScript. If you needed to control an image, you would instead make it into a kind of symbol you can control, such as a movie clip.

You can import bitmap images into an FLA file. These images are stored in the Library like symbols, and you can drag instances of the bitmap onto the Stage. You can add several instances of the image without increasing the file size. You do not need to change these imported bitmap images into a symbol unless you require additional functionality that a symbol might provide (such as applying effects, or editing a symbol in one location).

Buttons are symbols containing four states (frames), each state controlling how the button looks and functions in relation to the mouse pointer. You use buttons to create interactivity, such as hotspots, rollover effects, navigational menus, and clickable elements. Buttons are limited in functionality, but they are beneficial for their simplicity. Despite their limitations, buttons are easy to create and use.

Movie clips can be very simple or very complex symbols. Movie clips have their own timelines, just like the main Timeline you see at the top of the authoring environment. This means that a movie clip can run completely independent from the main Timeline. What does this mean? You can have a movie clip that animates when the rest of your SWF file sits still. Or, you can have several movie clips that all animate separately from each other.

Working with the Timeline and frames

When you add content to the Stage, it is organized somewhere on a Timeline. The playhead moves along the Timeline and shows the current frame or executes a script. You can also move the playhead around the Timeline when you are editing an FLA file, which is called scrubbing.

Graphic symbols are ideal if you need to view the symbol's animation while working on the main Timeline because the graphic symbol's Timeline works in sync with the main Timeline. So when you move the playhead on the main Timeline (called scrubbing) you can view the graphic symbol's animation.

The Timelines in Flash are long successions of frames and key frames that exist over time. Frames might or might not contain content, and you might or might not include multiple frames in an FLA file. If you include multiple layers in your document, you can stack frames on top of each other, which lets you layer graphics and animations in your files and also helps you separate content. The Flash authoring environment has several different kinds of frames: keyframes, frames, empty frames, and empty keyframes as shown in the following figure.

Figure 1.10. There are several different kinds of frames in Flash, which appear differently in the Timeline.

Exercise 2.

Frames are used in-between keyframes to fill in parts of an animation. Frames also include content on the Stage that does not change from the previous frame. You can also have empty keyframes and empty frames on the Timeline. However, if you want to add new content to a frame, you must create and select a keyframe.

Most Flash documents include more than one Timeline. Movie clips, buttons, and even graphic symbols include a Timeline (although buttons and graphics have limited timelines). Movie clip timelines are just as robust as the main Timeline above the Stage, which enables you to make a nested SWF file inside your main document.

Button symbols:
These symbols include four frames that represent each state of the button: Up, Over, Down, and Hit. You can add graphics to each of these states and add ActionScript to control the button's functionality and appearance.

Graphic symbols:
These symbols have a Timeline that you can use to create layered drawings and simple animations. Unlike movie clips with their independent timelines, graphic symbol animations run in sync with the main Timeline. The main Timeline must be as long or longer than the graphic symbol's animation, but you can scrub the main Timeline and view the graphic symbol's animation.

Movie clip symbols:
These symbols run independently of the main Timeline. If the main SWF file had only a single frame, you would not need to extend the Timeline of your movie clip. Movie clips, like buttons, can be manipulated by using ActionScript. You can even place ActionScript inside of a movie clip and put other movie clips inside your movie clip.

Generally speaking, you shouldn't nest too many symbols within other symbols. Many layers of nested symbols within nested symbols can make a document exceedingly complex and usually create an FLA that is complicated, intensive, and difficult to work with.

You will quickly discover how important it is to use the Edit Bar (Figure 1.11) to navigate though documents that contain nested symbols. The Edit Bar gives you a good idea about what you are editing and where you are within the nested symbols, and allows you to navigate between instances, nested instances, and the main Stage.

Figure 1.11. The Edit Bar shows you when you are in symbol-editing mode. Click the name of an instance to navigate to that instance or click Scene 1 to return to the main Stage.

Navigating layers

Layers on the Timeline are stacked vertically. Each layer can and should be named according to the assets you place on it. You can use layers to separate and group similar assets because this lets you modify a group of elements and find an asset that you are looking for quickly and easily. Using layers also lets you create an effect of depth on the Stage because you can make some graphics appear in front of another, as shown in the following figure.

Figure 1.12. Layers on the Timeline help you create the appearance of depth on the Stage.

[View full size image]

You also add ActionScript to frames on a layer. The ActionScript should always be on frames in the top layer, and you should name the layer actions. Putting your code on a single frame that doesn't contain any graphics makes the code easy to find, and helps you avoid potential conflicts between the code and other assets on the same layer. It is not advisable to place instances and code on the same frame, which could potentially cause conflicts in your SWF file.

Layers can be organized into folders. Layer folders are typically used to hold several layers that are related to each another. For example, you might have all your bitmap graphics on three layers that you put in a single folder. Folders can be named, and you can open and close the folder to view or hide the layers contained within.

Setting preferences

Preferences let you control parts of Flash, from editing vector graphics to settings for the code editor. You can control the default settings for each document you create in Flash.

Select Edit > Preferences (Windows) or Flash/Flash Professional > Preferences (Macintosh) to open the Preferences dialog box (Figure 1.13). This dialog box contains several tabs that let you control different settings in Flash all at once. The General tab contains basic settings that you use to control authoring files. The Editing tab contains settings for drawing, vectors and text. You use the Clipboard tab to control how your images copy to the clipboard, which primarily affects gradients and Freehand text. The Warnings tab lets you choose which warnings you see in the software. The ActionScript tab allows you to make settings for the code editor.

Figure 1.13. The Preferences dialog box lets you control and customize the authoring environment.

You should consider the following preferences in this window:

Undo levels:
Change the undo levels accordingly. The number of Undo levels sets the number of times you can step back through the edits and commands you make in your project by selecting Edit > Undo. You should choose a low number of undos if possible if system resources are a concern. Flash consumes more memory on the computer if you use a high undo level. Instead of relying on a vast number of "undos", you should periodically save new versions of your FLA documents using File > Save As. Not only does this reduce the size of your FLA file by removing the undo history, but it also lets you save older copies to revert back to if you make a large mistake or corrupt a copy of a file.

Change your drawing settings:
There are several ways you can modify how the drawing tools work. The Connect lines setting determines how close two line ends have to be before they snap together to make a single line. The Smooth curves setting determines how much smoothing applies to a line, which removes jagged edges in hand-drawn lines and can improve performance and file size. The Recognize lines setting modifies lines that are nearly straight to exactly straight, and Recognize shapes modifies shapes that you draw so they are precise renditions of common shapes. Click accuracy modifies how close the mouse pointer must be to an object for it to be recognized as clicked and selected.

Customize your Tools panel:
To open the Customize Tools Panel dialog box, select File > Customize Tools Panel (Windows) or Flash/Flash Professional > Customize Tools panel (Macintosh). You can rearrange the Tools panel and even add extra tools into the software if you install them as an extension (plug-in) on your computer (Figure 1.14). For example, you might be able to find and install custom shape tools. You can select tools to add or remove from the panel, and even create menus that open when you click a tool's button on the panel. First, select a tool to modify from the far left of the dialog box. Then select a tool to add to its menu in the list of tools in the pane to the left, and finally click the Add button to add your selection. If you want to remove a tool from a menu, click the tool in the list to the right and click the Remove button.

Figure 1.14. Customize the Tools panel using the Customize Tools Panel dialog box. You can create menus in the Tools panel and add or remove default or custom tools.