Working with symbols

Symbols are the very essence of what makes Flash..., well, Flash. You can convert anything you draw or import into a symbol. And in almost all cases you should.

Here's why: When an object is converted into a symbol, it automatically becomes an item in the Flash document's Library. Every Flash document has its own Library from which you can drag a symbol to the Stage. When you do, the object on the Stage is referred to as an instance. No matter how many instances of a symbol reside on the Stage, Flash needs to load it only once. This is how Flash delivers streaming animations while maintaining small file sizes. It's extremely efficient to reuse symbols as many times as possible. You can also apply effects to instances such as Scale, Tint, Alpha, and Brightness, and apply motion tweens in combination with one or more effects.

However, before I get too far ahead of myself, I should introduce you to symbols and describe the different types.

Create an object, such as a simple shape. Select it and then convert it to a symbol by choosing Modify > Convert to Symbol or by pressing the F8 key. This opens the Convert to Symbol dialog box (see Figure 24).

Figure 24. Enter the name of the symbol in the Convert to Symbol dialog box.

In the Convert to Symbol dialog box you can type a name for your symbol, select from one of three behaviors and determine the registration point of your object:

• Movie clip: Movie clips are dynamic, which means they can be targeted with ActionScript, the programming language of Flash. They can have any number of layers and frames, but their timelines are independent of all other timelines. Think of a solar system: each planet is a movie clip, looping endlessly and independently around a sun, which is the main Timeline.
• Button: Buttons have four states: Over, Up, Down, and Hit. These are represented as keyframes in a button symbol's timeline. You can place graphics in any of these states and then apply ActionScript to the instance of a button to add interactivity to your Flash movie.
• Graphic: Graphic symbols are very similar to movie clips with the exception that they are not dynamic and cannot be targeted with ActionScript. However, you can place a graphic symbol inside a movie clip symbol if the object needs to be dynamically controlled. Like movie clips, graphic symbols can have any number of frames and layers. Animators prefer to place entire animations inside a graphic symbol's timeline, allowing it to be controlled via the Property inspector in the parent timeline. The most important feature is that they will always be in sync with the main Timeline and all other graphic symbol's timelines. This is very important when trying to create frame-based animations—which is why most animators prefer working with graphic symbols for fixed-frame output formats (such as video).

In this animation tutorial, I recommend using graphic symbols. This enables you to scrub the Timeline to see your animation play while inside the Flash authoring environment. The term scrubbing refers to the practice of moving the playhead back and forth manually to play the contents of the Timeline. The content in movie clip symbols do not play beyond Frame 1 unless you test your movie or publish it as a SWF file.

Cleaning up your sketches

Every good design usually starts with the time-tested pencil and paper. I've had some of my most creative moments during long and boring management seminars and sometimes a doodle on a cocktail napkin can be the inspiration for a great character. The fact is, you never know when or where you'll be inspired, so keep a pencil in your back pocket or behind your ear at all times.

You can sketch in Flash using any of the tools I've previously discussed. If you have drawings on paper that you'd like to use as the basis for a Flash character, you'll need to scan and save them as graphics files. Most scanners come with software that makes this process easy. Some of the more widely used graphic formats that Flash can import are PNG, GIF, JPEG, TGA, and TIFF. (For details, check out the TechNote, Supported File Formats for Flash CS4 Professional.)

After you import your sketch into Flash, think about how to break it apart into individual pieces. This is the hard part. It's a conceptual process that depends ultimately on your style of animation and the style of your character.

Form follows function, if I may borrow a phrase from Volkswagen's marketing campaign, and this is crucial to your character's design. You must visualize how you think your character might move, which ultimately dictates its overall design.

The next example shows both the original sketch and the finished product after redrawing it in Flash (see Figure 25). This character was made entirely with the Oval and Rectangle tools. Notice how I used the original sketch as a reference, making subtle changes and adjustments as I fine-tuned the image, tracing it with the drawing tools in Flash.

Figure 25. From sketch to Flash—my trademark character.

After inserting a blank keyframe (F7) next to your sketch, you can turn on the Onion Skin feature to see a ghost of your sketch. Use any of the drawing tools to do your work, using the onion-skinned sketch as your guide. As you can see in Figure 26, I used the Oval tool to create the head of the boy character. When you create body parts and various accessories for your character, try to imagine and then draw the entire shape. You must visualize your character as if it were truly a 3D object existing in space. Even though this is a two-dimensional format, thinking like a 3D artist can help you visualize how certain parts will be "attached" to others.

Figure 26. Character's head defined by an oval shape.

When you finish drawing a specific part of your character, copy and paste it to a new layer. I like to select it and convert it to a symbol at this time. You can also start naming your layers, but I recommending waiting until after you've created all of the symbols. Check out the unique Flash trick described in the next step for more details.

Placing symbols on layers to save production time

I always convert my objects to symbols and name them, following a simple, yet descriptive naming convention. For example, I name the symbols to correspond with the graphics used for each part of the digital puppet: head1, eye1, mouth_wide, and so on.

However, I do not take the time to name all of my layers because there's a much easier and faster way. After I create and namedall of my symbols, I simply select them all and copy them. Then I create a new layer and select the option to paste them in place by choosing Edit > Paste in Place (or pressing Ctrl+Shift+V on Windows or Command+Shift+V on Mac). This operation places all of the symbols on one layer, yet they remain separate symbols.

Before completing the next step, delete all of the other layers so that you have only the single layer that contains all of your character symbols.

The next step is the coolest part. Select all again and then right-click (or Command-click on Mac) your character and select the option to Distribute to Layers from the context menu (see Figure 27).

Figure 27. Select all of the symbols, then right-click and select the option to Distribute to Layers.

Voilà! Flash not only placed each symbol on its own layer but named each layer (see Figure 28) based on its symbol name! Nice trick, huh?

Figure 28. Body parts and symbols for my trademark character in the Timeline.

Page 3 of 4

Previous Page

Next Page