How to: External navigation

SlideShowPro for Flash supports the use of buttons outside of the component to control playback. Here�s how you do it.

Note: The SlideShowPro for Flash product download page has FLAs for this tutorial, including extra code to facilitate looping end-to-end with the next/previous buttons.

Step One: Hide navigation

First, you�ll probably want to remove the embedded navigation in SlideShowPro. Select your instance of SlideShowPro for Flash on the Stage, open the Component Inspector, and set Navigation Appearance to �Hidden.�

Step Two: Assign instance name

Click on the instance of SlideShowPro for Flash on the Stage, open the Properties panel, and type my_ssp into the Instance Name box.

Step Three: Create buttons

Create a new MovieClip for each control you�d like to replace. ActionScript methods include previousImage(), nextImage(), previousImageGroup(), nextImageGroup(), toggleDisplayMode() and toggleGallery(). When finished, place your movie clips anywhere on your stage, and (like we did earlier) give each an instance name through the Properties panel.

For the sake of this walkthrough, I�ve created six MovieClips, and assigned them instance names of nextImage_btn, prevImage_btn, nextImgGroup_btn, toggleDisplayMode_btn, toggleDisplayMode_btn, and gallery_btn.

Note: In case you don�t know, adding _btn to each of the instance names isn�t just good organizational form, but it enables button-related code hints in the Actions panel.

Step Four: Attach ActionScript

Create a new layer in your timeline, and name it �A.� Select the first empty frame, and open the Actions panel (Window > Actions). If using the ActionScript 2 version, enter the following:

nextImage_btn.onRelease = function() { my_ssp.nextImage(); }
prevImage_btn.onRelease = function() { my_ssp.previousImage(); }
nextImgGroup_btn.onRelease = function() { my_ssp.nextImageGroup(); }
prevImgGroup_btn.onRelease = function() { my_ssp.previousImageGroup(); }
toggleDisplayMode_btn.onRelease = function() { my_ssp.toggleDisplayMode(); }
gallery_btn.onRelease = function() { my_ssp.toggleGallery(); }
album1_btn.onRelease = function() { my_ssp.loadAlbum("album-1"); }

If using the ActionScript 3 version, enter the following:

function onNextImage(event:Event):void { my_ssp.nextImage(); }
function onPrevImage(event:Event):void { my_ssp.previousImage(); }
function onNextImageGroup(event:Event):void { my_ssp.nextImageGroup(); }
function onPrevImageGroup(event:Event):void { my_ssp.previousImageGroup(); }
function onDisplayMode(event:Event):void { my_ssp.toggleDisplayMode(null); }
function onGallery(event:Event):void { my_ssp.toggleGallery(); }
function loadAlbum1(event:Event):void { my_ssp.loadAlbum("album-1"); }

nextImage_btn.addEventListener("click",onNextImage);
prevImage_btn.addEventListener("click",onPrevImage);
nextImgGroup_btn.addEventListener("click",onNextImageGroup);
prevImgGroup_btn.addEventListener("click",onPrevImageGroup);
toggleDisplayMode_btn.addEventListener("click",onDisplayMode);
gallery_btn.addEventListener("click",onGallery);
album1_btn.addEventListener("click",loadAlbum1);

You�re done! Publish a new movie and your own buttons will control the main navigation of the component.

Page last modified by afrmx on January 03, 2010, at 03:12 AM