Defining Content Types

Understanding the behavior of various media types and learning to streamline asset management unlocks the true potential of Flash for combining compelling content with small file sizes. The basic structures for storing, reusing, and modifying content within a Flash project are not complicated, but the reason for using various symbol types does deserve explanation.

Raw Data

When you create graphics directly in Flash, using the shape tools, text tool, or any of the other drawing tools, you produce raw data or primitive shapes. You can copy and paste these elements into any keyframe on the Timeline, but they do not appear in the project Library. Each time the element appears, Flash has to read and render all the points, curves, and color information from scratch because the information is not stored in the Library. Even if the shape looks exactly the same on keyframe 10 as it did on keyframe 1, Flash has to do all the work to re-create the shape every time it appears. This quickly bloats the size of the .swf file. Also, because each element is completely independent, if you decide to make any changes, you have to find and edit each appearance of an element manually. This is a daunting task if your project involves animation or nested symbols.

Tip 

The Find and Replace feature (Option/Alt+F), makes it much easier to accomplish mundane editing tasks on multiple items within your Flash project file. We introduce the myriad uses for Find and Replace in Chapter 9, "Modifying Graphics."

Tip 

If you want to convert a raw graphic into a Drawing Object after it has been created, select the graphic on the Stage and apply the Modify ð Combine Objects ð Union command from the main menu. The raw graphic will then behave exactly like any other Drawing Object. To revert a Drawing Object to a raw graphic, use the Modify ð Break Apart command.

Drawing Objects

You create Drawing Objects by turning the Object Drawing option toggle on in the Tools panel while using any of the drawing or shape tools. Drawing Objects were introduced in Flash 8 to make it easier to work with raw graphics. Drawing Objects have some of the characteristics of a raw shape, a group, and a Graphic symbol. They can be modified directly on the Stage (without having to click in to Edit mode) but they are self-contained and will not merge with or cut into other graphics on the same layer — unless you apply one of the Combine Objects commands. They can be Motion tweened like a symbol but they are not stored in the Library unless they are converted into one of the true symbols types. The hybrid characteristics of Drawing Objects will suit some workflows very well, but some graphic artists will prefer to work in normal or Non-Object Drawing mode. Drawing Objects can be combined seamlessly with raw graphics and symbols, and turning the Object Drawing option on or off will not have any effect on graphics you have already created.

Caution 

Shapes or lines made with the new Drawing Object toggle turned on have some special behaviors in the authoring environment, but like primitive shapes and groups, Drawing objects are not stored in the Library unless they are converted into symbols.

Groups

The first step toward making raw data more manageable is to use groups. By grouping a filled shape with its outline stroke, for example, it becomes easier to select both parts of the shape to move around in your layout. If you added a text element that you also wanted to keep aligned with your artwork, you could add this to the group as well. Groups can be inclusive or cumulative, so that you can select multiple elements and create one group (z/Ctrl+G) that can be accessed on the same edit level by double-clicking the whole group once. If you add another element (even another group) to the first group, you will find that you have to click in to a deeper level to edit individual elements. In this way, groups can grow more and more complicated, which is helpful if you're trying to keep multiple elements in order.

The important thing to remember about groups, however, is that they are not symbols. Although groups have a similar selection highlight to symbols, you will notice that they don't have a crosshair icon in the center, and that the group information won't appear in your project Library. No matter how careful you are about reusing the same raw data and grouping elements to keep them organized, when it comes to publishing your movie (.swf) or trying to update any single element, you will be no better off than if you had just placed raw elements wildly into your project. Flash still treats each shape and line as a unique element, and the file size grows exponentially each time you add another keyframe containing any of your raw data, even if it is grouped. The best way to use groups in your project is for managing symbols, or to organize elements that you plan to keep together and convert into one symbol.

Caution 

Using groups will help organize raw shapes or other elements in your .fla files, but it will not help to optimize the final .swf file. Using a lot of groups in your project file can actually add weight to the final published .swf.

Native Symbols

Imported sound, video, bitmap, or font symbols are stored automatically in the Library to define instances of the asset when it is used in the project. In addition, three basic container symbol types can be created in the Flash authoring environment: Movie Clip symbols, Graphic symbols, and Button symbols, which all have timelines that can hold images, sounds, text, or even other symbols. Although it is possible to make the behavior of a symbol instance different from the behavior of the original symbol, it is generally best to decide how you plan to use a certain element and then assign it the symbol type that is appropriate to both its content and expected use in the project.

Tip 

Dragging a primitive shape or group into the Library panel from the Stage automatically invokes the Convert to Symbol dialog box so that you can name and assign a symbol type to the element before it is added to your Library.

To make a decision on what type of symbol to use, it helps to have a clear understanding of the benefits and limitations of each of the symbol types available in Flash. Each symbol type has specific features that are suited to particular kinds of content. Each symbol type is marked with a unique icon in the Library, but what all symbols have in common is that they can be reused within a project as symbol instances, all defined by the original symbol. A Flash project Library may contain any or all of the symbol types in the following sections, all created directly in Flash.

Note 

If you use Timeline Effects to auto-create animation or visual effects, the symbols added to the Library to contain the animation are usually Graphic symbols by default (rather than Movie Clips), so that you can view the final effects just by scrubbing the Timeline.

Graphic Symbols

Graphic symbols are used mainly for static images that are reused in a project. Flash ignores any sounds or actions inside a Graphic symbol. Graphic symbols do not play independently of the Main Timeline and thus require an allocated frame on the Main Timeline for each frame that you want to be visible within the symbol. If you want a Graphic symbol to loop or repeat as the Main Timeline moves along, you have to include another whole series of frames on the Main Timeline to match the length of the Graphic symbol timeline for each loop.

A drop-down menu in the Property inspector enables you to control Graphic symbol playback. Select a Graphic symbol instance in your document and open the Property inspector to access the three settings in the Options for graphics menu:

• Loop: This is the default setting for Graphic symbols. If the Graphic symbol extends along a timeline beyond its original length, the symbol will restart from the beginning. Graphic symbol looping does not play independently of the Main Timeline like Movie Clip looping — you still have to match the number of frames on the Main Timeline with the number of frames that you want to play in the Graphic symbol timeline.

• Play Once: This setting eliminates looping by allowing the Graphic symbol timeline to play, then holding on its last frame if it extends along a timeline beyond its original length.

• Single Frame: This setting will hold the Graphic symbol on one frame so that it will behave like a static graphic. You can select a specific frame within the Graphic symbol timeline to display as the static graphic. The appearance of the Graphic symbol will be the same regardless of how far it extends along a timeline.

Movie Clip Symbols

Movie Clips are actually movies within a movie. They're good for animations that run independently of the movie's Main Timeline. They can contain actions, other symbols, and sounds. You can also place Movie Clips inside of other symbols and they are indispensable for creating interactive interface elements such as animated buttons.

Movie Clips can continue to play even if the Main Timeline is stopped. Thus, they need only one frame on the Main Timeline to play back any number of frames on their own timeline. By default, Movie Clips are set to loop. So, as long as there is an instance of the Movie Clip visible on the Main Timeline, it can loop or play back the content on its own timeline as many times as you want it to, without needing a matching number of keyframes on the Main Timeline. Movie Clip playback can be controlled with ActionScript from any timeline or even from an external code (.as) file.

Button Symbols

Button symbols are used for creating interactive buttons. Button symbols have a timeline limited to four frames, which are referred to as states. These states are related directly to user interaction and are labeled Up, Over, Down, and Hit. Each of these button states can be defined with graphics, symbols, and sounds. After you create a Button symbol, you can assign independent actions to various instances in the main movie or inside other Movie Clips. As with Movie Clips, Button symbols only require one frame on any other timeline to be able to play back the three visible states (frames) of their own timeline.

Components

Components are prebuilt Movie Clips for interactive Flash elements that can be reused and customized. Flash MX-style, or uncompiled, components are visible in the root folder of the Library along with a folder that holds the elements used to build the component. Flash MX 2004-style, or compiled, V2 Components are represented by a single generic icon in the Library. Each Component has its own unique set of ActionScript methods that enable you to set options at run time.

Imported Media Elements

A Flash project Library also stores certain types of imported assets to define instances of the asset when instances are used in the movie. You can place these imported assets into native Flash symbol structures by converting a bitmap into a Graphic symbol or placing a Sound inside a Button symbol, for example.

Bitmaps

Bitmaps are handled like symbols: The original image is stored in the Library and any time the image is used in the project it is actually a copy, or an instance, of the original. To use a bitmap asset, drag an instance out of the Library and onto the Stage. You manage Export settings for individual bitmaps from within the Library by choosing Properties from either the contextual menu or the Library options menu. However, you will not be able to apply Color or Alpha effects or any Flash 8 Filters to the bitmap instance unless you convert it into a native Flash symbol type (Graphic symbol, Button, or Movie Clip).

New Feature 

If you worked with bitmaps in older versions of Flash, you will notice how much better images look in Flash 8. The improved rendering engine does a much better job of smoothing scaled and rotated images and keeps the appearance of bitmaps more consistent between the authoring environment and the Player.

Cross-Reference 

Bitmaps can be targeted with ActionScript to change their appearance dynamically at run time. Although this takes some time to learn, the end result is usually a more optimized file that runs faster and is easier to modify or update. If you feel ready to move on from manual tweens and author-time effects to dynamic code-driven animation and effects, a good place to start is the Flash 8 ActionScript Bible by Joey Lott (Wiley, 2006).

Vector Graphics

Vector graphics, upon import from other applications, arrive on the Flash Stage as a group, and unlike bitmaps, may be edited or manipulated just like a normal group drawn in Flash. These elements will not be stored in the Library until they have been converted to a native symbol type.

Graphic symbols versus Movie Clip symbols ^[1]

Graphic symbols are a quick and tidy way of placing static information into a timeline, whereas Movie Clip symbols animate independently on their own timeline. Graphic symbols should be used to hold single frames of raw data, or multiple frames when it is important to preview your work while designing it, as with linear animation. You must use Movie Clips when ActionScript is involved, or when an animation must run regardless of what is happening around it. However, using one type of symbol instead of the other may not always involve clear-cut choices, because, often, either works. Consequently, to use symbols effectively, it's important to know the pluses, minuses, and absolutes of both Graphic symbols and Movie Clips. Here are some tips to keep in mind:

• Instance properties of Graphic symbols (height, color, rotation, and so on) are frozen at design time, whereas Movie Clips can have their instance properties set on the fly with ActionScript. This makes Movie Clips essential for programmed content such as games.

• Scrubbing the Main Timeline (previewing while working) is not possible with Movie Clips, although it is possible with Graphic symbols. This makes Graphic symbols essential for animating cartoons. Eyes open, eyes closed — it's that big of a difference.

• Movie Clips can't (easily) be exported to video or other linear mediums. This is only significant if you plan to convert your .swf files to another time-based format.

• A Graphic symbol's instance properties are controlled (modified) at design time, with the options available in the Property inspector. One advantage is that this is simple and sure because you have an instant preview of what's happening. In addition, this information is embedded right in that particular instance of the Graphic symbol — meaning that, if it is either moved or copied, all of this information comes with it.

• You can control a Movie Clip's instance properties at design time or set them with ActionScript. This gives it great flexibility, although it's a little more abstract to work with ActionScript. One advantage is that the actions do not need to be directly linked to the Movie Clip, which has the concurrent disadvantage that you must take care when moving Movie Clips that have visual qualities defined with ActionScript.

• Graphic symbols that are animated (have more than one frame), and are nested with other animated Graphic symbols, may have problems with synchronization. For example, if you have a pair of eyes that blink at the end of a ten-frame Graphic symbol, and you put the Graphic symbol containing those eyes within a five-frame Graphic symbol of a head … the eyes will never blink. The head Graphic symbol will run from frame 1 to frame 5, and then return to frame 1, only displaying the first five frames of the eyes Graphic symbol. Or, if you nest the eyes Graphic symbol into a 15-frame head Graphic symbol, they will blink on frame 10, and then every 15 frames. That's ten frames, then blink, and then they loop back to frame 1; however, when reaching frame 5 this time, the movie they are in loops back to frame 1 (it's a 15-frame movie), and, thus, resets the eyes to frame 1.

• Movie Clips do not have the problem/feature described in the preceding bullet point. They offer consistent, independent timeline playback.

Cross-Reference 

We discuss vectors in greater detail in Chapter 16, "Importing Artwork," and in Chapter 37, "Working with Vector Graphics," which is included as a PDF file on the CD-ROM.

New Feature 

Drawing Objects are a new option in Flash 8 for making vector graphics easier to handle and edit. Drawing Objects have some of the same characteristics as a group but they can also be Motion tweened without being converted into symbols. Although Drawing Objects are a handy option in the authoring environment, they do not get stored in the Library and will have the same impact on file size as other raw vector graphics.

Sounds

The Library also handles Sounds like symbols. However, they can be assigned different playback behavior after they are placed on a timeline. Flash can import (and export) sounds in a range of sound formats. Upon import, these sound files reside in the Library. To use a sound, drag an instance of the sound out of the Library and onto the Stage. You manage export settings for sound files within the Library by choosing Properties from either the contextual menu or the Library options menu. You can define playback behavior and effects with the Property inspector after placing a sound on a timeline.

Cross-Reference 

Importing and using sounds effectively is a critical topic we cover in Chapter 15, "Adding Sound."

Video Assets

Video assets, as with Font symbols, can be embedded or linked. Embedded video assets, like bitmaps, can have Color, Alpha, and Filter effects applied if they are first converted to a native Flash symbol type.

New Feature 

Flash 8 supports alpha channels in video files. This opens up a whole range of exciting new options for integrating video with other Flash content. For comprehensive coverage of working with video in Flash 8, refer to Chapter 17, "Displaying Video."

Font Symbols

Font symbols are symbols created from font files to make them available for use in dynamic text fields. Font symbols can also be defined as shared fonts to make them available to multiple movie files (.swf) without the file size burden of embedding the font into each file individually.

^[1]Authors' note: This comparison was contributed by Robin and Sandy Debreuil for the Flash 5 Bible and we still like how they articulate the important distinction between Graphic symbols and Movie Clip symbols.