• Home
• Tutorials
• Features
• Competitions
• Forum
• RSS

Creating an XML Slideshow in Flash - Page 5

We are going to create the actual slideshow function, or in other words, the engine of code that will run the show. We will need to have a record of all the images that we have loaded and then use an interval to repeatedly cycle through them. In code terms, this will require creating an array to hold a reference to our images as they successfully load, and then create a function to process them, this function will be repeatedly executed using the setInterval method. Here is the outline of this page:

1. Create an array to hold the movie clips containers of our slideshow images.
2. Use the .onLoadComplete event of our listener to launch our slideshow when all of our images successfully load.
3. Create the slideshow function to animate the images in the slideshow.

Creating the Clips Array

We are going to need an array that holds a reference to all of our image clips we loaded. We are going to use this array later to manipulate our images and also to count how many images have successfully loaded before we start the slideshow. We need to declare (ie create) this array once, so go back to the callImages() function and create this array. Remember that an array is created using the square [] brackets.

Tracking Successful Downloads

We are going to use the .onLoadComplete event of our listener to track how many images have successfully loaded. Right below the place where we declared our array, use the following code to add loaded clips to the array using the array .push() method. This method simply adds whatever value you pass to the end of the array - this way the number of items in our array will increase when more images are loaded as they are *pushed* inside the array.

An important thing that we have to do now while we are at the .onLoadComplete event is to make our images invisible. We do not want them to be visible at the start of the show because we want them to fade in one by one instead. To hide loaded images simply set their _alpha property to zero:

You can test your movie now to see that you no longer see any images on stage.

Creating the moveSlide() Function

Our slideshow will be controlled using a function that we will call moveSlide(). This is the most important function i our movie and it will basically have the following task:

1. Fading out the current image on stage.
2. Fade in the next image to be shown on the stage.

This is in essence the only purpose of our function, we are going to create the fade in and out effects using the Tween Class, we can start by coding just that, so at the bottom of all the code you've written so far, type the following:

Of course our code above does not work yet because we do not have any values for current_mc or next_mc. We can retrieve both of these values from our _root.myClips_array that holds a reference to all of our loaded images. To access the property of an array we must locate the position, which will change every time the function cycles, so we will leave that as a variable that we will call target_mc. We will make it increase in value by 1 to indicate that our slideshow moved to the next image before we retrieve the next image.

Our slideshow has a limited number of images in it, so we must check throughout that our target_mc does not exceed the total number of images in our slideshow, to do this, we use a simple conditional that does just that:

Well, believe it or not, our moveSlide() function is now ready. We do not have to specify a value for target_mc because we will not have any existing images on the stage when the show starts and our function will convert it to the number zero through our conditional.

Using setInterval to Repeatedly Execute the Slideshow Function

We are going to make this function switch the slides repeatedly one by one using the setInterval() method. The interval at which the slides will be changed will include the _root.mySpeed variable which we retrieved from our XML file earlier. However, we cannot start the slideshow until we make sure that ALL of our thumbnails have loaded. We can do this by checking that the number of items in our _root.myClips_array equals the number of images we have in our _root.myImagesNo. Here is how to do that using another simple conditional that we have to place within our .onLoadComplete event found in the callImages() function:

Our setInterval is going to start repeatedly executing the function after the interval period we specified in it. This means that we will have to wait after the images finishing loading for a second or whatever time period we specified as the speed before the show actually starts - which is not really the best thing to do. To avoid this problem we are going to call the moveSlide() function once before we set our interval.

All the code relating to the images of our slideshow is now ready, you can test your movie locally to see your slideshow running smoothly.

Summary of this Page

1. Created an array to hold a reference to our loaded images.
2. Used the .onLoadComplete listener event to track how many images have downloaded.
3. Create a function to move the slides in and out using the Tween Class and conditionals.
4. Called this function through an interval after checking that all the images have successfully loaded.

In the final section of our tutorial we are going to create a preloader and display the titles of our images in a text field below the slideshow.

Next page

Home | Tutorials | Features | Competitions | Forum | About Us | Contact Us | Legal | Privacy | Show Us Some Love, Donate! | Subscribe
© 2004-2008 Oman3D - All Rights Reserved