4

Flash Slideshow Tutorial – Using Slideshow on Your Flash Websites

flash-slideshow-tutorial
Share!

Dynamic and scalable Flash slideshows embedded in flash websites is one of the things Flash works best for. In this slideshow tutorial you will learn to develop a simple slideshow in Flash. i.e. you will learn how to make the backbone of a Flash slideshow. You can then use the same method to implement all sorts of slideshows and you can build up functionality on this basic slideshow.

Before I begin, for those of you who want an easy way out of this flash tutorial, you can make a free website with Wix with an awesome Flash slideshow. Now for those of you who are still interested in reading this Flash slideshow tutorial, I will continue.

There are two key steps to making a slideshow in Flash.

  • Implementing a method to load external images in Flash
  • Timing the loading of images

Fortunately Flash has built in classes for both of these steps. To implement the first step we use the UILoader class and to implement the second step we use the Timer class.

Okay, now lets start building the slideshow. Create a new ActionScript 3.0 file in Flash. The first step is to place the UILoader on stage.  Goto Windows>Components or press the shortcut Ctrl+F7 to open the components windows. Now click on “User Interface” and drag UILoader on the stage.

Now resize the UILoader to your required size and give it a variable name from from the properties window as shown in the image below. I named my UILoader as “uiLoader_mc”.

Thats it for the UILoader part. Now for the ActionScript code which controls the change of images. Insert a new layer in your Flash and press F9 key to open the Actions panel. Add the following code in the Actions panel.

var images:Array = new Array(“Images/1.png”,”Images/2.png”,”Images/3.png”);
var currentImage:uint = 0;
var lastImage:uint = 2;

var timer:Timer = new Timer(1000);

timer.addEventListener(TimerEvent.TIMER,changeImage);

function changeImage(e:TimerEvent){
    uiLoader_mc.source = images[currentImage];
    currentImage++;
    if(currentImage > lastImage){
        currentImage = 0;
    }
}

timer.start();

Now place 3 images named “1.png”, “2.png ” and “3.png” in a folder named “Images” and put the Images folder in the same folder as the flash application. Now press Ctrl+Enter to test the application. If you did everything right then the slideshow should be running now.

If you are new to ActionScript then you are probably wondering what the code in the Actions panel actually means. Don’t worry, I will explain it to you.

In the first line we are creating an array of strings, each element in the array is a link to an image. So, basically the variable images  contains the links to all the images. The next line declares a variable named currentImage and sets it to zero. This variable will contain the number of the image that is to be loaded next. The next line declares a variable which stores the index of the last image in the array images. So, if you have 3 images in total then the variable lastImage will contain one less than the total number of images. The next line in code is very important, it creates the Timer object which I talked about earlier. The timer object will time the changing of images in the slideshow.  The value in parenthesis contains the number of microseconds between each tick of the timer object. The next line timer.addEventListener(TimerEvent.TIMER,changeImage) listens to each tick of the timer and calls the function changeImage on each tick. Now going to the function changeImage  . The first line in this function sets the source of the UIloader on our stage to the currentImage which contains the link to the next image to be loaded. The lines after this in the function increment the currentImage and set it to point to the next image to be loaded. The if condition checks that if the currentImage has exceeded the total number of images then it sets it back to 0 again. Finally the last line starts the timer and hence starting the looping of images.

I hope you have understood everything . If you practice a little then you will master the art of making slideshows in no time. As I said before that this is a backbone for flash slideshows. You can add as much topping to this as you want. If you have understood the core functionality then it wouldn’t be difficult for you to implement other functionality in this slideshow too.

If you’re feeling like Flash is just too complicated, then I recommend using the free drag and drop flash site builder from Wix, which will allow you to make a Flash website with an awesome Flash slideshow.

Tip: Use coupon webdesigndev220 if you choose to upgrade to Premium monthly combo package and get the 1st month for only 99 cents.

Get Free Email Updates!

Sign up now and receive an email when we publish new content.

We will never give away, trade or sell your email address. You can unsubscribe at any time.

About the Author

Iggy Ko

Facebook Twitter Google+

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

Iggy KoFlash Slideshow Tutorial – Using Slideshow on Your Flash Websites

Comments 4

  1. Ivan Molina

    i tried this tutorial and something is wrong… :
    those are the errors is showing me.

    Scene 1, Layer ‘AS3′, Frame 1, Line 1 1093: Syntax error.
    Scene 1, Layer ‘AS3′, Frame 1, Line 1 1084: Syntax error: expecting rightparen before png.
    Scene 1, Layer ‘AS3′, Frame 1, Line 1 1093: Syntax error.
    Scene 1, Layer ‘AS3′, Frame 1, Line 1 1093: Syntax error.
    Scene 1, Layer ‘AS3′, Frame 1, Line 1 1093: Syntax error.
    Scene 1, Layer ‘AS3′, Frame 1, Line 1 1093: Syntax error.
    Scene 1, Layer ‘AS3′, Frame 1, Line 1 1093: Syntax error.

  2. Ameer

    About the syntax error:
    You’ll have to replace the double quotations in the first line and then every thing will be ok :)

  3. Karen

    I have got the same error message also. No need to place the image to the layer or create a movie for the layer? The test movie came out blank.

Leave a Reply

Your email address will not be published. Required fields are marked *