How to: Custom navigation buttons

SlideShowPro for Flash allows you to replace its default navigational buttons with your own. This chapter will show you how.

Step One: Create a Movie Clip

Above: Create New Symbol dialog

The first step is to create a new Movie Clip in your FLA Library. This clip will contain your first navigation button. To do this, click the "Add symbol" button in the bottom-left corner of the Library panel (Window > Library). A new dialog titled "Create new symbol" will appear. For the purposes of this walkthrough, we'll give it a name of "myicon_gallery." Enter that into the "Name:" field.

Next, click on the "Advanced" button in the lower-right of the same dialog. In the new area that appears below, select "Export for ActionScript".

Enter the same name again ("myicon_gallery") in the "Identifier" field if using the AS2 version, or the "Class" field if using AS3 version (you'll know you're using the AS3 version if the "Identifier" field is grayed out). When complete click "OK". AS3 users may see a dialog noting that a class will be created, which is fine. Click "OK" to finish.

Step Two: Create/place graphic in Movie Clip

After clicking "OK" Flash will create a new Movie Clip in your Library and automatically open it for editing. Import a graphic into here, or create your own vector graphic using Flash's drawing tools. The recommended dimensions for navigation icons are 16 pixels high (for the "Numbers" NAVIGATION/Link Appearance) or 24 pixels high (for the "Thumbnails" NAVIGATION/Link Appearance). Your artwork should be registered to the top left of the Stage. In other words, with "X" and "Y" set to 0.

Tip: If you are using text fields for your custom buttons, you should include a shape underneath the text for the button's hit area. Without one, empty spaces in the text won't be clickable. You can make this shape either the same color as your navigation bar, or give the shape an instance name and make the alpha 0 with ActionScript. E.g., "bg_mc._alpha=0"

Step Three: Create other navigation buttons

Repeat the previous two steps to create your other buttons. The available buttons are "gallery," "previous image group," "previous image," "next image," "next image group," "pause," "play," "full screen" and "normal screen."

Step Four: Give SlideShowPro an instance name

With your Movie clips complete, give SlideShowPro for Flash an instance name. For the purposes of this walkthrough, we'll name the component my_ssp.

Step Five: Add ActionScript

Now it's time to add the ActionScript that assigns your Movie Clips to SlideShowPro for Flash. In a new timeline layer, add the following to the first keyframe:

my_ssp.navIcons = [
      "myicon_gallery",
      "myicon_prevImageGroup",
      "myicon_prevImage",
      "myicon_nextImage",
      "myicon_nextImageGroup",
      "myicon_navPause",
      "myicon_navPlay",
      "myicon_mediaPlayerPause",
      "myicon_mediaPlayerPlay",
      "myicon_fullScreen",
      "myicon_normScreen",
      "myicon_videoPlay"];

Note: Like "myicon_gallery," all of the Linkage Identifiers in the code above are for example only should be replaced with the actual Identifiers you've given your MovieClips.

This bit of code assigns your Movie Clips using SlideShowPro's navIcons property. Your Movie Clips must be in this array order!

If you don't want to replace all of the buttons, simply find the numerical position of the button you wish to replace by counting up (starting at 0), then assign your linkage, like so:

my_ssp.navIcons[0] = "myicon_gallery";

The above will only replace the gallery button.

Step Six: Publish

Publish your movie, and your custom icons should appear!

Page last modified by tdominey on March 02, 2009, at 08:31 AM