Sunday, May 8, 2011

Flash Assignment 4 – Working with Symbols and the Library

Photo credit: Mindy McAdams, uploaded via Flickr, Creative Commons License


4.1 Managing Library Content:

The Library is panel in the Flash interface where all of the assets of a Flash project file are stored.  Assets include photographs or other graphic images, sound and video files.  Any symbols (graphics, buttons or movie clips) that we create in the Flash project will automatically be stored in the library.  In addition, we can import items into the library from external sources.

Some projects may have a large number of objects in the library, making it difficult to find anything.  We can address this by organizing our library into folders, where we can group together items with a common theme, or common item type.

Within the library panel, we also have options for viewing and editing the properties of the various items therein.

4.2 Understanding Symbols:

Symbols are essentially templates for an item.  We may use that template to create multiple instances of that item.  For example, were we to create a Flash project illustrating 99 bottles of beer on a wall, we might begin by creating a single symbol of a bottle of beer.  We could then use that symbol to create 99 instances of beer bottles.  Note that this does not mean that all of our bottles would necessarily have to look identical; we could make individual modifications to each instance of the bottle.  On the other hand, if we wanted to make a similar modification to all instances of the bottle, say, make them all splits rather than long necks, we could propagate that change by simply modifying the bottle symbol.

Symbols in Flash can take the form of a graphic object, a movie clip or a button.

Graphic object and movie clip symbols are similar in that they can have an unlimited number of frames associated with them on the timeline.  The main difference between the two lies in the property of the movie clip that allows each instance of itself on the stage to be uniquely identified, and thus referenced when writing code.

A button is a graphic image with four specific frames built into its timeline.  These frames correspond to the button in its normal or “up” state, it’s mouse-over state, and its down or pressed state.  The fourth frame is used to designate the live or clickable area of the button.

There are several ways to create a symbol in Flash.  We may create a piece of artwork on the stage and drag it over to the library, which will result in it being converted to a symbol automatically.  Also, we may select our artwork and choose the menu option Modify=>Convert to symbol.  Alternatively, we may begin with the menu option Insert=>New symbol.  Finally, we may work from the library panel, where there is a new symbol option on the library options menu, as well as a new symbol button on the library panel.


Graphic symbols are the building blocks of Flash projects.  They can form the basis from which button symbols are made, and multiple graphic symbols can be used within movie clip symbols. 

As an interesting aside in this lesson, our tutor demonstrates placing a symbol on a layer to be used only for reference.  Right-clicking on the layer name and selecting Guide renders this layer inert, meaning that it will not publish into the final Flash product. 

Similarly, we learn how edit a symbol alongside other objects that we might like to use for reference by using edit in place mode for symbol editing.

4.4 Understanding Movie Clip Symbols:

Aside from instance naming, as previously discussed, movie clip symbols differ from graphic symbols in that they have timelines that are independent of the main stage timeline.  Graphic symbols too can be animated and have timelines, but those timelines are bound within the main stage timeline.

Note that we can modify individual instances of our movie clip symbols, as well as modify the symbol blueprint itself.  However, the propagation of template changes through the instances that have already been changed is somewhat complex, and might take some trial and error to get just right.

Also in this section, our tutor exposes us to the 3D rotation and translation tools.  Caution; wackyness may ensue if one gets too carried away with these.

4.5 Movie Clip vs. Graphic Symbols:

Here we get a demonstration of the behavior of graphic vs movie clip symbols with respect to the timeline properties discussed above.  Additionally, we gat a bit of a primer on creating motion tweens, adding and deleting frames from a timeline, and learn that a keyframe is designated as a frame within a timeline in which some property of an object is changed.  

4.6 Understanding Button Symbols:

In creating a button symbol, the four frames previously discussed are automatically generated on the timeline.  The important thing to remember when building the contents of the frames, important to remember inasmuch as it is not very intuitive, is that one must insert a keyframe into the blank frames that were auto generated.  This is easily done by right-clicking the frame on the timeline and selecting insert keyframe.

Another handy feature touched-on here is the use of the onion skin view option.  When working on any of the buttons frames, selecting the onion skin option at the bottom of the timeline panel allows one to see any or all of the other frames as transparencies.  This is particularly handy when defining the live or clickable area of the button.

Finally, we see how invisible buttons can be useful in web design, allowing feedback to be generated when a user mouse’s over a particular area of a graphic image or other Flash-generated area.  For instance, when one navigates to the website of a global entity, one is frequently greeted with a map of the world and asked to select one’s region in order to be directed to the appropriate web page.  Mousing over different areas of the globe prompts the mouse-over frame of invisible buttons to display, which might contain text such as “North America” or “Europe”, advising the user as to which region’s home page will load if that area is clicked.

No comments:

Post a Comment