Symbols

BUTTON SYMBOLS

-Button symbols provide you with a quick and relatively simple way to create a standard rich media button. These buttons can be created out of nearly any type of artwork, including other symbol instances, and can support a static or normal state, a rollover state, and a down state. The artwork for these states is constructed using keyframes, but rather than relying on frame numbers, the interface for construction of a button symbol uses Up, Over, and Down to identify where the keyframes for these states should be placed. -The Hit state for a button is not visible, but the artwork in the keyframe defines the clickable area of the button. If a button has no Hit state, the current keyframe artwork is used to determine the clickable or live area of the button. If a button has only a Hit state, it is an invisible button that will show up in light blue during authortime but will be invisible at runtime.

SYMBOLS AND ACTIONSCRIPT

-Combining symbols with ActionScript is where things start to get really interesting within Flash CS6 development. Both button and movie clip symbols can be accessed via an instance name that is assigned using the Properties panel. -ActionScript can be used to directly manipulate the properties of these instances. Another common interaction is using ActionScript to listen to a button or movie clip symbol instance using an event listener. This allows Flash CS6 to react to events that occur involving those instances. Mouse clicks, frame playhead movement, loading, and unloading are some examples of events that can be used as triggers for other operations.

CREATING A SYMBOL

-Creating a symbol from an existing rich media element is fairly simple. Just select the symbol and choose Modify > Convert To Symbol from the menu. You can also press F8 to do the same thing. (Since this is done often, you may want to memorize that shortcut.) -Once you choose to convert an element to a symbol, you will be given the option to select the name for the symbol, the type, and a registration point. There is also a panel to access advanced options that are used primarily for linkage as a class within ActionScript. This is usually necessary only if you want to place objects on the stage dynamically with code. NOTE: It is a good practice to always name your symbols with no spaces, no special characters, and starting with an uppercase letter. This has to do with how Flash views symbols, and will make it easier as you explore more advanced topics.

TYPES OF SYMBOLS

-Flash CS6 provides three types of symbols: -Button -Movie clip -Graphic -The choice isn't always clear, but learning more about each of these symbol types can help you choose the symbol type that will work within your rich media application. NOTE: If you aren't sure which symbol type to select, choose movie clip -- by far the most capable of the three. With a little bit of coding, it can be made to do just about anything that can be done with the other two formats.

SYMBOL INSTANCE PROPERTIES

-Fortunately, symbol instances can be more than exact copies of the original symbol definition in the Library panel. You can modify the individual properties of each or any instance using the Property inspector or tools like the Transformation tool. These changed properties affect only the selected instance and will not alter the original symbol definition. -Embedding additional symbols and elements within a symbol definition can also provide a means to customize each instance using ActionScript. A common application is to include a dynamic text field within a symbol definition. Using ActionScript, the content of this text field can be altered at the instance level. The nesting can get a bit complicated, but having only a single element in the Library panel can make it worth it if you ever need to make global changes.

GRAPHIC SYMBOLS

-Graphic symbols are one method of nesting a sub-timeline within the main Flash movie timeline. These symbols are fairly simple to create, and the operation of the timeline is exactly the same as that of the main timeline. -The main purpose of the graphic symbol is to create reusable graphical elements and simple animations within an efficient package.

SHARING SYMBOLS

-It is a good practice to break large projects up in to multiple Flash CS6 movies. This can create a problem, however, in that the standard interface elements would need to be duplicated within each FLA file. This is wasteful and would make editing interface elements very cumbersome, as each individual file would need to be opened to make the same edit. -By saving a Flash CS6 FLA file that has only assets in the Library panel, you can create an external library that can be shared among several Flash CS6 files. To access this external library, you just need to import it by choosing File > Import > Open External Library. NOTE: If you are working with a group, and anybody in that group changes an asset in the external shared library, the asset will be updated for everyone. This can be a really good thing -- or a really bad thing. Assets will not be updated for any FLA file already using the library, but the library will be changed for any new FLA files created after the edit. Establishing good workflow rules can help minimize problems caused by sharing libraries.

MOVIE CLIP SYMBOLS

-Movie clip symbols are where the fun really starts. They can be viewed as reusable Flash movies within Flash CS6 movies. A movie clip symbol has a timeline just like the main Flash CS6 movie, and is the main symbol for creating custom functionality within Flash CS6. -Movie clip symbols can be controlled with ActionScript as well as through timeline manipulation, making them an extremely flexible tool for customizing an interface.

MOVIE CLIP VS GRAPHIC SYMBOLS

-Movie clips and graphic symbols look very similar within the Flash CS6 authoring environment, but there are some big differences. -The first has to do with the synchronization between the symbol timeline and the main movie timeline. A graphic symbol is linked to the main timeline, whereas a movie clip is an independent object. If the main timeline is changing frames, so is the graphic symbol. If the main timeline is paused, the graphic symbol (which is linked) is paused too. The movie clip timeline doesn't reference the main timeline, and runs completely independently. -Another difference involves the use of ActionScript. ActionScript can access and control movie clips through the instance name assigned in the Properties panel. The graphic symbol has no option to assign an instance name, and is not accessible via ActionScript as an object. -There is also a performance difference. Graphic symbols require less processing. Even with this advantage, many rich media developers make nearly everything movie clips, just to increase the flexibility of the object.

WHAT ARE SYMBOLS?

-Symbols are containers for artwork. They come in three types or "classes" that each have unique characteristics that allow them to be used for animation and interaction. Keep in mind that although Flash refers to "converting" elements to symbols, you are really wrapping the existing elements into symbols. -Using symbols will allow nearly any graphical element to become a button, be animated, or be manipulated by ActionScript code. -Symbols provide Flash with reusable elements that can be placed on the stage multiple times without re-creating artwork. This can drastically reduce file sizes and can also simplify editing a layout by minimizing the number of graphic elements required to produce a rich media application.

EDITING SYMBOLS

-Symbols are edited by double-clicking either on any instance of the symbol on the stage or on the symbol within the Library panel. When the symbol opens, notice that a breadcrumb trail showing the hierarchy of the object shows up in the top-left corner of the stage. You can leave the editing mode by clicking on the scene name in this breadcrumb trail. -It doesn't matter if you double-click the symbol within the Library panel or use the edit-in-place option of double-clicking an instance on the stage. You are still editing the base symbol -- not the individual instance. This means that any changes you make will be made to all instances of that symbol.

SYMBOLS AND OTHER TOOLS IN FLASH: DECO TOOL

-Symbols can also be used as input to other tools within Flash CS6. A great example of this is the Deco tool. The Deco tool is a painting tool that paints symbols rather than fills and strokes. -You can choose the Deco tool and set the Symmetry Brush option. Notice how the Properties panel for the Deco Tool will prompt you for a Module. It is asking you to select a symbol from the library to use as a pattern that will be repeated and reflected when you use the Deco tool on the stage area. NOTE: Flash CS6 allow tools like the Deco tool access complicated animated movie clips as modules. This can look very cool, but it can also create a huge amount of processing overhead in a very short period of time. Always save before you use a complex movie clip as input to another tool.

USING SYMBOLS WITHIN RICH MEDIA

-Symbols provide self-contained reusable elements that are essential to rich media development. This packaging makes them portable and with proper planning can save a huge amount of time and effort. -It can be difficult deciding which type of symbol to use and how to implement that symbol, but with practice you can master the art of nesting symbols and combining different types to get exactly what you want. -Even something as simple as buttons can prove to be confusing. It would seem obvious that a button symbol should be selected for every button. Sometimes buttons need to show other states that aren't included within the button definition, like "selected" or "disabled." If these features are required, you will be better off using a movie clip symbol and writing ActionScript to control the button.

SYMBOLS AND OTHER TOOLS IN FLASH: SPRAY BRUSH

-The Spray Brush is another tool that can use symbols as input. The Spray Brush tool is located under the Brush tool in the Tools Panel. From the Property inspector, you can select a symbol to spray and options for setting scaling and rotation. -This tool allows you to fill large areas with a randomized version of a symbol and create a natural dispersion of these instances.

SYMBOLS AND INSTANCES

-When a symbol is created, it resides in the Flash CS6 movie library. The symbol acts as a blueprint to instruct Flash CS6 on how to construct an instance of that symbol. Instances are representations of the symbol within the Flash CS6 movie timeline. -In simpler terms, a symbol is in the library. When you drag a symbol from the library to the stage, you are creating an instance of that symbol. You can have multiple instances of a single symbol on the stage. If you edit the symbol, all of the instances will also change. This can be a very effective feature for making changes globally within a Flash CS6 application. However, it can also be a bit frustrating if you really wanted each instance to be slightly different.