Creating a Slideshow

 

1) Before you begin this tutorial you will need to gather together some images you wish to use. For the purposes of this tutorial save three images as 'img1.jpg', 'img2.jpg' and 'img3.jpg' in a single folder.

 

2) Start Flash and create a new file. If you wish to publish for Actionscript 2 start a new Actionscript 2 file, if you wish to publish for Actionscript 3 start a new Actionscript 3 file. Save it in the same folder as the images.

 

3) Open the component panel and locate the flipNavigation folder (for Actionscript 2) or the flipNavigation AS3 folder (for Actionscript 3), open it and drag a copy of the FlipNavigation component out, onto the stage.

 

4) With the component still selected open the properties panel and give it the instance name 'flipNav' (without the quotes).

screen shot 1

 

 

5) With the component still selected on the stage open the component inspector panel and double-click the pages parameter to add images to your component.

Enter the page ID, a title for the page, the type of effect and the URL of the image. Repeat this step until each of your images has been defined.

For the purposes of this tutorial the URLs of your images are the file names of the images you created in step 1 ('img1.jpg', 'img2.jpg' and 'img3.jpg').

screen shot 2

 

Note, if you are using Actionscript 2 you will see a linkageId property, alternately, if you're using Actionscript 3 you'll see a className property. Use either of the properties to load images from your library. For the purposes of this tutorial, leave these properties blank.

 

 

6) Create a new layer on your timeline, select the keyframe and open the Actions panel. In the Actions panel enter the following code to create a function that calls the component's flipNext() method each time it is called. If you are using Actionscript 2 the code should look like this:

function showNext(){
	flipNav.flipNext();
}

Alternately if you are using Actionscript 3 the code should look like this:

function showNext():void {
	flipNav.flipNext();
}

Immediately below the previous code, add the following to call the showNext function you've just created every 5000 milliseconds (which is 5 seconds). (Note that if you wish to change the speed of the slideshow you can do so here, a lower value increases the speed, a higher values decreases it):

var slideshowInterval:Number = setInterval(showNext, 5000);

 

 

7) Save your file in the same directory as your images and test it.