go to 'Custom Layout Classes'

go to next page

Glyph Class

How do we know that the user clicked on the third thumbnail image in a collection? How is an index associated with an image that can be used to retrieve portfolio properties? How do we place thumbnail images inside containers whose graphic content can be modified by an artist, yet still work within a predictable code structure?

Enter the Glyph Class.

Library Content

Open the portfoliodriver.fla library and examine the glyph MovieClip symbol. Any time a graphic is displayed on screen, you can be guaranteed there is an artist who is very passionate about every pixel in the display. Artists typically want to control the graphics that surround a thumbnail image, behavior on rollover, rollout, and any type of 'selection' indicator. They may also want to control masking of the thumbnail to display the image in something other than an rectangle.

While someone else wants control over practically every aspect of thumbnail appearance, your programming deadlines don't change. I've found it convenient in the past to create clips with specific named instances and allow an artist to change the content of those clips as desired. As long as they don't change the instance names, relevant items such as rollover and rollout clips as well as image containers can be easily referenced.

In the Portfolio Viewer, Glyphs serve as generalized containers for thumbnail images. On the 'base' layer of the glyph symbol, you should see two MovieClips with instance names mOverClip and selectClip. The mOverClip contains the rollOver and rollOut animations. The selectClip is used to indicate which Glyph is currently selected.

There is a blank MovieClip named 'image' on the image layer. This layer is masked, so the thumbnail image is loaded into a masked container.

Each individual element of a Glyph's appearance can be modified inside the Flash IDE. As long as the instance names are not changed, the Glyph class works with the edited symbols.

Glyph Class and Properties

The Glyph class is essentially a MovieClip with button behaviors and some additional properties. Because of the very strong Is-A relationship, the Glyph class extends MovieClip. Right-click the glyph symbol in the library and examine its Linkage properties. Notice that the AS 2 class is Glyph.

Examine the Glyph class source code. The class has two public properties, ID and TITLE. The ID property allows a linear index to be associated with a Glyph. When a Glyph is clicked, an event is dispatched containing a reference to the Glyph as well as the ID value. This allows a sequence of Glyphs to be placed on Stage and associated a unique index with each Glyph, i.e. 0, 1, 2, ... When a Glyph is clicked, the event Object contains the index of the Glyph. This index can be used to look up other properties associated with the selected Glyph.

For the portfolio viewer, the Glyph index is used to reference the portfolio items array and load the complete set of portfolio information associated with a thumbnail image.

Controlled Instantiation

A class that extends MovieClip is placed on Stage with attachMovie(). This method returns a reference to a MovieClip, which is downcast to the subclass type. A downcast is not necessarily safe, and requiring someone to use attachMovie() to instantiate the subclass is a bit of a kludge. It is desirable to provide users with some sort of controlled instantiation method that returns a reference to the subclass, hiding all the instantiation and initialization details from the caller.

Glyph instances are created with a static createGlyph() method. This method creates a Glyph from a linkage ID, instance name, depth, and parent reference. If the Glyph is successfully created, it is initialized and a reference is returned to the caller. If there are any problems creating the Glyph, createGlyph() returns a null reference.

Loading Thumbnails and Events

The Glyph class uses MovieClipLoader to manage loading of thumbnail images into the Glyph's internal container. Notice that the image container, rollOver clip, and selected clip are referenced in the __init() method.

The Glyph class dispatches the following events,

onThumbRollOver - viewer rolls over a Glyph
onThumbRollOut  - viewer rolls out of a Glyph
onThumbLoad    - thumbnail image is loaded into Glyph
click            - Glyph is clicked
error            - load error 

It seems I use the Glyph class (although a more sophisticated version) in almost every project. Since the properties associated with a Glyph vary from project to project, my current version contains a small property manager to handle adding and removing named properties to a Glyph.

I hope you find this class useful in other projects as well.

go to 'Custom Layout Classes'

go to next page