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

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.

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(); }

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(); }

nextImage_btn.addEventListener("click",onNextImage);
prevImage_btn.addEventListener("click",onPreviousImage);
nextImgGroup_btn.addEventListener("click",onNextImageGroup);
prevImgGroup_btn.addEventListener("click",onPreviousImageGroup);
toggleDisplayMode_btn.addEventListener("click",onDisplayMode);
gallery_btn.addEventListener("click",onGallery);

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