This tutorial will teach you to create a slideshow using the advancedLoader. If you have not already done so we recommend you follow the basic tutorial in order to fully understand how the advancedLoader component works.
Having installed the advancedLoader component using the Macromedia extension manager, open Flash and start a new file.
Open the components panel ('Window' > 'components') and drag a copy of the advancedLoader onto your stage. Give it the instance name 'al' (without the quotes). Size your component to the desired size for your images. For the purposes of this tutorial leave the component's parameters at their default settings.
Using image editing software create a series of images (you will require at least three) to form your slideshow. You should size these images to the same size as your advancedLoader component on the stage. (Prior to Flash 8 these images must be non-progressive .JPGs.) Save your images in the same directory as your .FLA file. For the purposes of this tutorial name them 'image-01.jpg', 'image-02.jpg', 'image-03.jpg' etc..
Press control-F8 (Windows) or command-F8 (Mac) to create a new symbol to represent a fast-forward button (which will allow users to manually skip images in your slideshow). The create new symbol dialogue box will appear. Give your symbol a name, select 'Movie clip' as the symbol's type and click 'OK'.
On this symbol's timeline, draw a background for your button and create an icon over the background to represent a fast forward action.
Repeat these steps in order to create a rewind button.
Back on the main timeline drag both your fast-forward and rewind buttons out of your library ('Window' > 'Library') onto your stage beneath the advancedLoader component. Give them the instance names 'forward' and 'rewind' respectively.
Create a new symbol to act as a play/pause button for your slideshow. On this symbol's timeline use the rectangle tool to create a background for this button. On the timeline select frame 2 and press F5 to add a new frame so that the background stretches over two frames.
Create a new layer on this timeline. Select frame 2 and press F6 to add a keyframe so that both frames on the new layer are keyframes.
On keyframe 1 draw an icon to represent the play action. On keyframe 2 draw an icon to represent a pause action.
Create a new layer, select frame 1 and in the actions panel ('Window' > 'Actions') type the following script:
stop();
Back on your main timeline drag your play/pause button out of your library and onto the stage. Give it the instance name 'playpause'.
On the main timeline create a new layer and name it actions. Select the keyframe on the timeline and in the actions panel type the following script:
imgList = ["image-01.jpg", "image-02.jpg", "image-03.jpg", "image-04.jpg", "image-05.jpg", "image-06.jpg", "image-07.jpg", "image-08.jpg", "image-09.jpg"];
This array contains the filenames of each of the images in your slideshow (If they do not already match you should alter this script to match the file names of the images you wish to make up your slideshow). You can modify the contents of your slideshow by adding and deleting filenames from this list.
Directly underneath this script type the following script:
function showNext()
{
imgList.push(imgList.shift());
al.load(imgList[0]);
}
The 'showNext()' function loads the next image in your slideshow into the advancedLoader. The first line of this function uses the array method 'shift()' to remove the first element of your array and the array method 'push()' to add it to the end of the array. The next line of this function uses the advancedLoader's 'load()' method to load the first image in your array. By using this technique we modify the array so that its elements change position in a cyclic pattern.
Directly below that function type the following script:
function showPrevious()
{
imgList.unshift(imgList.pop());
al.load(imgList[0]);
}
The 'showPrevious()' function loads the previous image into the advancedLoader. It mirrors the 'showNext()' function by using the array methods 'unshift()' and 'pop()' to remove the final element of the array and reinsert it at the array's start.
Directly beneath these functions type the following script:
forward.onRelease = function()
{
this._parent.showNext();
}
rewind.onRelease = function()
{
this._parent.showPrevious();
}
This code provides functionality to the fast forward and rewind buttons so that when released the fast-forward button calls the 'showNext()' function and the rewind button calls the 'showPrevious()' function.
Directly beneath this script type the following script:
playpause.onRelease = function()
{
if(playpause._currentframe == 1)
{
playpause.gotoAndStop(2);
alInterval = setInterval(showNext, 5000);
}
else
{
playpause.gotoAndStop(1);
clearInterval(alInterval);
}
}
This script gives functionality to the play/pause button. When this button is released the script's 'if' statement checks to see whether the movieclip is on the first frame (the play position) or on the second frame (the pause position). If the button is in the play position it creates a new 'setInterval' called alInterval to call the 'showNext()' function over and over again at an interval of 5000 milliseconds (which is 5 seconds). It also sets the play/pause button to the pause position.
If the play/pause button is already in the pause position the script clears the setInterval so that the 'showNext()' function is no longer called every 5 seconds and the slideshow is therefore paused. It also moves the play/pause button to frame 1 which is the play position.
Directly beneath the rest of your script type the following code:
al.load(imgList[0]);
This script begins your slideshow by loading the first image in your array as soon as the movie loads.
You can now save and test your movie. You will be able to manually move through images by pressing the fast forward and rewind buttons and you can have the slideshow change images automatically or pause by toggling the play/pause button.