Showing the Images in Sequence


At this point, you have a skeletal application that loads a series of external images into a Flash application and is ready to display their titles. Now you need to show the images sequentially.

A slide show can be a fairly simple application to code. In the simplest version, you turn on and off the visibility of the images, one at a time, over a set interval of time. To do this, you need a function to cycle through the images and control their visibility.

1.

First, you need to get the reference to all movie clip holders that have images successfully loaded into them. Add a line to create a new array to the top of the code on the first frame of the actions layer:

var loadedImages = new Array();


2.

Now skip to the displayXML function on the first frame of the actions layer, just after the empty movie clip is created, and add the following shaded line of code to save the new movie clip to the array for later use:

var i_max = myXML.firstChild.childNodes.length; for(i=0; i<i_max; i++){     // create an empty clip to load the image into     var targ:MovieClip = this.createEmptyMovieClip("image" + i, 100 + i);     //define a function for the onLoadInit event handler     imageListener.onLoadInit = function(targ) {         // save image holder clip to an array         loadedImages.push(targ);         // get the index number for this image         var temp = targ._name;         targ.i = temp.slice(5);         // set position as the manually created clip         targ._x = holder_mc._x;         targ._y = holder_mc._y;         // save title         targ.myTitle = myXML.firstChild.childNodes[targ.i].attributes.title     }; }


3.

You want to show a different image after every increment of a specified interval of time. ActionScript has a method to call a function at set intervals called setInterval(). You use this to control the display of your loaded images. Place the following code at the top of the Actions panel, above all other code. It enables you to call a function named cycleImages() every 1000 milliseconds (which equals one call per second). By saving a value for myTime and using the myTime variable in the setInterval function, you can easily reset the time interval either by hand or by programming additional code later in the application.

var myTime = 1000; var myInterval = setInterval( cycleImages, myTime);


4.

Next, add the cycleImages function, which has two main jobs to accomplish: show the next image and hide the previous image. This code goes at the bottom of the existing code.

function cycleImages(){     nextImage._visible = true;     lastImage._visible = false; }


5.

Now you need to tell Flash which is the next image and which is the last image. If you know what the index number is for the current image, you can get the path to the movie clip from the loadedImages array and save it as the next image. Add the following lines of code, which create the variables that track what the next and current images are in the cycle of images.

cycleImages(){     var nextImage:MovieClip = loadedImages[iNext];     var lastImage:MovieClip = loadedImages[iLast];          nextImage._visible = true;     lastImage._visible = false; }


6.

Next, you need to create a new object to keep track of what index you're currently using in the array. Naming the object control will help you remember what the data it's holding is to be used for. You can give your control object a property named slideNum to hold the current index number for the images array. This is how Flash knows which image target clip to display next. Add the following lines just after the close of the cycleImages function code. Initializing at 0 when you first declare the property sets up the image count as the first in the array:

var control:Object = new Object(); control.slideNum = 0;


7.

Next, insert a counter-incrementer into the cycleImages function so that it moves on to the next image in the array the next time it's called by setInterval.

cycleImages(){     // get the holder clips for the next image and the last     var nextImage:MovieClip = loadedImages[iNext];     var lastImage:MovieClip = loadedImages[iLast];     // show the next image and hide the last image     nextImage._visible = true;     lastImage._visible = false;     // increment index counter of the images array     control.slideNum++; }


8.

Now set the values for iNext and iLast, which are dependent on the current value of control.slideNum:

cycleImages(){     // get the next index and the last index     var iNext = control.slideNum;     var iLast = control.slideNum - 1;     // get the holder clips for the next image and the last     var nextImage = loadedImages[iNext];     var lastImage = loadedImages[iLast];     // show the next image and hide the last image     nextImage._visible = true;     lastImage._visible = false;     // increment index counter of the images array     control.slideNum++; }


9.

This is great, but after it goes through the array of images once, the counter just keeps going and no more images are displayed. You need a way to loop back to the beginning of the image series again.

First, loop through by getting the length of the loadImages array to get the total number of images. Then use this result to test whether the slideNum counter is less than the total. If it's less, then Flash gets the next image in the array. If it's greater than or equal to the total, it's time to go back to the beginning of the array again. The next image will be at index 0 and the last will be at the end of the array, which is the total minus one. (Recall that the arrays start counting at zero; so, for example, the last element in an array with 10 elements in it has an index of 9.) You need to reset the control.slideNum to zero as well.

cycleImages(){     var iTotal = loadedImages.length;     if(control.slideNum < iTotal){         var iNext = control.slideNum;         var iLast = control.slideNum - 1;     } else if (control.slideNum >= iTotal){         control.slideNum = 0;         var iNext = 0;         var iLast = iTotal-1;     }     // get the holder clips for the next image and the last     var nextImage = loadedImages[iNext];     var lastImage = loadedImages[iLast];     // show the next image and hide the last image     nextImage._visible = true;     lastImage._visible = false;     // increment index counter of the images array     control.slideNum++; }


10.

You also need to change the title, which is displayed in the text field you manually created earlier in Step 4 of the "Creating the Flash Slide Show Document" section. This can be accomplished with one line of code. When the cycleImages function is called by setInterval, the image title is changed to the title for the currently displayed image:

cycleImages(){     var iTotal = loadedImages.length;     if(control.slideNum < iTotal){         var iNext = control.slideNum;         var iLast = control.slideNum - 1;     } else if (control.slideNum >= iTotal){         control.slideNum = 0;         var iNext = 0;         var iLast = iTotal-1;     }     // get the holder clips for the next image and the last     var nextImage = loadedImages[iNext];     var lastImage = loadedImages[iLast];     // show the next image and hide the last image     nextImage._visible = true;     lastImage._visible = false;     // show title for this image     title_txt.text = nextImage.myTitle;     // increment index counter of the images array     control.slideNum++; }


Before you move on, take a step back and take a look at the entire code set on the first keyframe in the actions layer. It's always a good idea to keep the big picture in mind as you progress in your project.

If you haven't already, save and test the file.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net