Creating an XML Slideshow in Flash - Page 4

By Blue_Chi | Flash CS3 | ActionScript 1/2 | Advanced | Page 1, 2, 3, 4, 5, 6

We are going to use the MovieClipLoader Class in this section to load our images onto our movie. This will require using a loop to repeatedly execute the code and create a separate container for each image as required by the MovieClipLoader Class. Loading all the images is a pretty easy process. Here is the outline of this section:

  1. Create an instance of the MovieClipLoader and add a listener to it.
  2. Create a loop to load all the images in one go.

Create An Instance of the MovieClipLoader Class

Again, our code here will be placed within a function called callImages(), we are doing this to keep everything organised. The first task for this function is to create an instance of the MovieClipLoader Class and add a listener to it, a listener is an object that tracks what happens to the object it is attached to, which in this case is the Movie Clip Loader. We will use this listener to tell us how the loading process goes. The code below should be easy to understand if you reviewed our MovieClipLoader Class Tutorial.

function callImages() {

_root.myMCL = new MovieClipLoader();
_root.myPreloader = new Object();
_root.myMCL.addListener(_root.myPreloader);

}

Creating the .loadClip Loop

We are going to create a loop now to load all of our images in one go. Our loop will have the following tasks:

  1. Extract each of the image URLs using the attribute property of _root.myImages (the variable that holds the <image />tags of our XML file).
  2. Create several movie clips to hold each of the images we are loading as required by the MovieClipLoader Class.
  3. Once we have that done, we will use the .loadClip() method to load the stuff we just processed.

Our loop will cycle until the iterator i exceeds the number of images we have in our slideshow, this number is stored in the variable _root.myImagesNo. The code we need to write looks like this:

function callImages() {

_root.myMCL = new MovieClipLoader();
_root.myPreloader = new Object();
_root.myMCL.addListener(_root.myPreloader);

for (i=0; i<_root.myImagesNo; i++) {

temp_url = _root.myImages[i].attributes.url;
temp_mc = myContainer_mc.createEmptyMovieClip(i, myContainer_mc.getNextHighestDepth());

_root.myMCL.loadClip(temp_url,temp_mc);
}

}

We have not used any of the properties of the listener until now - we will do that in the next section. You will just have to add the callImages() function to the .onLoad event handler in the first section of our code this way:

myShowXML.onLoad = function() {

_root.myWidth = myShowXML.firstChild.attributes.width;
_root.myHeight = myShowXML.firstChild.attributes.height;
_root.mySpeed = myShowXML.firstChild.attributes.speed;

_root.myImages = myShowXML.firstChild.childNodes;
_root.myImagesNo = myImages.length;

createContainer();
callImages();

};

You can test your movie now to load your images. They should all be loaded, but you will only be able to see the last one only because all the others ones will be below it!

Summary of this Page

  1. Created the callImages() function.
  2. Created an instance of the MovieClipLoader and added a listener to it.
  3. Used a loop to load all of our images using the .loadClip() method.

In the next section we are going to control the images using the MovieClipLoader listener and then animate them using the Tween Class.

Next page