A–C
D–H
I–Z
Developer services
Project centers
Community resources
- Adobe Cookbooks (share code)
- CSS Advisor (browser bug fixes)
- Exchanges (share components)
- Adobe Labs
- Adobe Open Source
- Forums
- RSS feeds
- Bug base
- User groups
- Adobe Community Experts (ACE)
- Developer events
Integration
Product documentation
Downloads
Samples
Training and books
- Online training
- Classroom training
- Certification
- Adobe Developer Library
- Adobe Press
- Safari Books Online
Newsletters
Blogs
Archives
ADC program
Additional resources
Table of Contents
Creating Your Own FlashHelp Skins (Part 1): The Structure of FlashHelp Skins
Customizing Flash Skin Files (FLA)
Now it's time to roll up your sleeves and dig right into the individual FLA files that comprise the Standard template. In this article, I'll cover the Toolbar and the Navigation Bar. First, note the files that comprise the Toolbar.
| Element | File Name |
|---|---|
| Toolbar Background | skin_background_tb.fla |
| Table of Contents Button | skin_button_tb_toc.fla |
| Index Button | skin_button_tb_index.fla |
| Search Button | skin_button_tb_search.fla |
| Glossary Button | skin_button_tb_glossary.fla |
| Print Button | skin_button_tb_print.fla |
| Search Field | skin_textfield.fla |
| Logo Icon | skin_button_tb_poweredBy.fla |
Figure 6. Toolbar
In this skin, the Toolbar Background and Logo Icon are static images, although you are free to customize them with animation or audio as you like. Note that the Background automatically tiles to fill the required area, so it is advisable to set the size of the Background larger than the size of the end user's screen.
The Search Field is a more complex FLA that I will discuss in the second article in this three-part series.
Most of the Toolbar consists of buttons. Open the Table of Contents button, skin_button_tb_toc.fla, to see what makes it tick.
Figure 7. Table of Contents Button
The Table of Contents button (like the other Toolbar buttons) contains six separate movie clips: button_mc, left_mc, right_mc, icon_mc, textfield_mc, and label_mc. Left_mc and right_mc are non-scaling clips that always remain on the sides of button_mc, which scale to accommodate the text in textfield_mc and label_mc. Textfield_mc and label_mc are two nested clips used to create the button's text label.
Note that the button label itself, such as the word "Contents," is dynamically loaded at runtime, so here the button has the placeholder text of "Label."
The last movie clip, icon_mc, is the button icon. (Note: Some template buttons only use a graphic rather than a movie clip for the icon.) In this particular button, the icon is positioned on top of left_mc.
The Navigation Bar is very similar in structure to the Toolbar. There are four buttons in the Navigation Bar, laid over one background:
| Element | File Name |
|---|---|
| Navigation Bar Background | skin_background_nav.fla |
| Close Navigation Bar Button | skin_button_nav_close.fla |
| Next Topic Button | skin_button_nav_next.fla |
| Previous Topic Button | skin_button_nav_previous.fla |
| Synchronize Table of Contents Button | skin_button_nav_sync.fla |
Figure 8. Navigation Bar
You will find a simpler structure when you examine the buttons that appear on the Navigation Bar. These buttons do not need to scale, so they have fewer movie clips in the FLA files
Labeled Frames
Most of the movie clips in buttons have labeled frames in their Timelines to designate the various button states, as previously described. (One exception is label_mc in the ToolBar buttons, which does not have a Timeline because it is nested inside textfield_mc, which does.) The button states appear in the Timelines as follows:
Figure 9. Labeled frames in Timeline designate button states.
Normal: Plays when the button first loads, when the mouse moves off the button, and when the user unselects the button.
Over: Plays when a user mouses over the button
Down: Plays when a user clicks or holds the button
Selected: Plays when the user selects the button
Disabled: Plays when the button is disabled
Note: The Disabled state is primarily used in the Navigation Bar buttons. Although the Disabled state is included in the Timelines in the ToolBar buttons for consistency in design, you never use it because the ToolBar buttons never enter a disabled state.
Procedure for Customizing
You can customize all of the movie clips in the ToolBar and Navigation Bar. Use the following procedure to modify the appearance of a background or button and view the results:
- Copy the template folder before beginning to customize.
- In the copied template folder, open the template start page (start.htm) in your browser.
- In the copied template folder, open the FLA file that you want to edit in Flash.
- Customize the movie clip(s) contained in the FLA file.
- Preview the FLA file in Flash and generate the SWF file in the same folder to replace the existing SWF file.
- Refresh your browser to see the edits in the FlashHelp runtime.
Use this procedure to experiment with different effects. You may want to look at the other two FlashHelp skin templates in the FlashHelp SDK or the FlashHelp gallery for ideas. For example, in the Toolbar buttons in the Vertical template, left_mc, right_mc, textfield_mc, and label_mc have been removed, and icon_mc is positioned on button_mc.
Figure 10. Button from vertical template Toolbar.
Where to Go from Here
In the second article in this three-part series, you'll learn about customizing the other elements and the XML Skin File (FHS). Until then, practice customizing the Toolbar and Navigation Bar and see what you can come up with. If you would like to share your creation with other FlashHelp designers, you can upload it to the RoboHelp Help Community by clicking the Submit Skin link at http://www.helpcommunity.ehelp.com/skins/flashhelp/skins.asp.
