Creating Your Own FlashHelp Skins (Part 1): The Structure of FlashHelp Skins

Basics of Flash Skin Files (FLA)

Each element in a FlashHelp skin, such as a button or icon, is a SWF file published from a FLA file. The number of FLA files in a FlashHelp skin can vary, but for the purposes of this article, you'll use the files in the Standard template, which contains 21 different FLA files. Each FLA file contains one or more movie clips and graphics.

There are several unique characteristics of the FLA files which you must set correctly to achieve a successful FlashHelp runtime. For this reason, it is wise to begin with one of the provided templates when building your own skin. The special characteristics of the FLA files include Components and Instance Names, Labeled Frames, and Positioning.

Components and Instance Names

In Flash, a component is a complex movie clip containing ActionScript code. A FlashHelp skin contains a collection of specialized components featuring ActionScript that is specific to the individual elements that make up the FlashHelp runtime. For example, Toolbar buttons use a Generic FlashHelp Button component.

For each element of a skin to function, you must put an instance of the appropriate component on the Flash Stage with the correct instance name. The files in the three FlashHelp templates in the FlashHelp SDK all have the appropriate components already on the Stage with the correct instance names.

Labeled Frames

Animation in a FlashHelp skin is achieved by having elements transition to various states in response to user actions and messages from the FlashHelp runtime. For example, when a user mouses over a button, the button enters the "over" state. When the mouse moves away, the button returns to its "normal" state. Achieve this effect by coordinating the action of several movie clips that make up the button.

In the FlashHelp Skin Files (FLA), you create transitions between states for a particular element using the Timelines of the movie clips that form that element. Each different state in a movie clip is designated by a labeled frame in the timeline. When an element needs to enter a particular state, the playhead in each movie clip goes to the appropriate labeled frame and play. An ActionScript stop() command at the end of the labeled frame prevents the movie clip from playing into the next state.

The movie clips in the template files all have the appropriate labels and stop commands already in their Timelines.

Figure 5. Movie clip Timeline featuring various states.

Positioning

To position elements correctly during FlashHelp runtime, elements need a common reference point. Do this by positioning most graphics and movie clips at X and Y coordinates 0,0. You can adjust the positioning, but there is a risk of creating disruptions in the FlashHelp runtime by doing so.

All graphics and movie clips in the template files are already positioned correctly, most of them at 0,0.

Page 5 of 6

Previous Page

Next Page