Final Result Preview

Let's take a look at a screenshot of the final slideshow we will be working towards:

Background

Interface images and examples are provided using Flash CS4 and Actionscript 2 but other versions of Flash as far back as version 8 should be able to follow along without problems. This tutorial assumes at least a working knowledge of Actionscript since I'm not going to explain every line, however even if you simply copy and paste you should be able to get this to work.

Step 1 – Create a Project Folder

With a project of this type it's important to keep everything organized so that Flash can find things as it needs them. So create a project folder on your computer where you can place ALL the files related to this project.

Step 2 – Prep the Assets

Find images for your slideshow. I used several images from http://www.sxc.hu (sxc_hu_410471_5588.jpg, sxc_hu_1151936_79441078.jpg, sxc_hu_1152040_85122875.jpg, sxc_hu_1154131_54136948.jpg).

Create an “assets” folder inside your project folder. Open up your favorite image editor and resize your photos so they're all a similar size. I resized my images so that the longest side (height or width) is 700px and allowed the image editing software to maintain the image proportion.

Since external assets don't benefit from a Flash preloader this would be an excellent time to optimize your images for speedy downloads. Flash can load png, jpeg, or gif files so make sure your final images are in one of those formats and save them into the assets folder you just created.

Step 3 – Create a New Actionscript 2 Flash File

Step 4 – Setting Up The Stage

Resize your stage to be a little larger than the images you created in Step 2. The goal is to make sure that what ever images are displayed don't get cut off in the final presentation. I used 800px x 800px to give the 700px images 50px of space on all sides. Now is also a great time to change the frame rate to 30fps for nice smooth transitions and pick a background color of your choice.

Step 5 – Setting Up The Timeline

Rename “layer 1” to “background”. Create a new layer and call it “content”. Create one more layer and call it “script” and it's a good idea to lock this layer. Anything you place on the background layer will display behind the slideshow. If you look at the example, the text is in this layer.

Step 6 – Create a Shell For The Loaded Images

Use the drawing object to create a white square on the stage. Select the square and convert it to a symbol (F8). Make sure the registration point is in the top left corner and call the clip “shell”. Give the clip an instance name of “shell_mc”.

Step 7 – Add the Photo Background

Inside “shell_mc” select the white box and convert it to a symbol (F8). Again, make sure the registration is in the top left and name the clip “background”. Give the new movieClip an instance name of “background_mc”. Lastly, name the layer "background" and lock it.

Step 8 – Create Loading Text

Inside “shell_mc” create a new layer called “text”. Use the text tool to create static text that says “loading image”. Move the text to x:20 and y:20 so that it ends up underneath the image.

Step 9 – Add an Image Load Target

Create another new layer inside “shell_mc” called “images”. Create a blank movieClip called “pics” then drag it from the library to the newly created "images" layer. Move the clip to x:10 and y:10 and give it an instance name of “pics_mc”.

Step 10 – Create a Shape to Mask the Image

Inside “shell_mc” create a layer above “images and name it “mask”. Make a new square, convert it to a movieClip called “mask” and give it an instance name of “mask_mc”. Move the clip to x:10 and y:10.

Step 11 – Convert the Shape to a Mask

Right click on the “mask” layer and select Mask. Make sure that the “mask” and “image” layer icons change to look like the example.

Step 12 – Create an Image Frame

Inside “shell_mc” create a layer above “mask” and name it “frame”. In the tool palette, select a stroke color and a different fill color, then create a square on the “frame” layer. Select the fill area and delete it leaving only the border. Double click the border to select it and convert it to a movieClip called “border”. Give the movieClip and instance name of “border_mc” and place it at x:10 and y:10.

Step 13 – Add a Drop Shadow

Go back to the root timeline and select “shell_mc”. Go to the properties panel and twirl down the Filters arrow. Click the small “page” icon and select drop shadow. This will add a little depth.

Step 14 – Create XML File and Add Structure

We're done with Flash for the moment and need to create an XML file to keep track of our pictures. Open your favorite text editor (pretty much anything that can edit HTML will work) and create a new file. Save the file in your project folder as content.xml. Now we need to add a structure to the file so Flash can understand how to use the information, we can do that with the following code:

<?xml version='1.0' encoding='UTF-8'?>
<gallery></gallery>

Step 15 – Add Image Paths to XML File

Now we need to add paths to all the images in the slideshow (this is how Flash is going to “find” the images). Inside the <gallery> tags add a new tag called “image” and give it an attribute of “imgurl”. This attribute should equal an image path relative to the xml file. You'll need to create a new “image” tag for each image you plan to use in the slideshow.

<?xml version='1.0' encoding='UTF-8'?>
<gallery>
<image imgurl="assets/sxc_hu_410471_5588.jpg"></image>
<image imgurl="assets/sxc_hu_1151936_79441078.jpg"></image>
<image imgurl="assets/sxc_hu_1152040_85122875.jpg"></image>
<image imgurl="assets/sxc_hu_1154131_54136948.jpg"></image>
</gallery>

Save the file and close your text editor.

Step 16 – Download Tween Max

We're going to use a tweening library to help us animate the transitions between images, so open up your browser, go to http://blog.greensock.com/tweenmaxas2/ and click the "download AS2" button at the top. Open the zip file you downloaded, then copy the "gs" folder and its contents to your project folder.

It's time to go back to your Flash file and start writing some Actionscript. Select the first frame of the "script" layer and open the Actions Panel (Window > Actions). The following steps all require you to edit the contents of the Actions window, so from now on I'm simply going to refer to this as "script". As we go through the steps below you'll see all the script created to that point with the newest additions highlighted.

Step 17 – Include Tween Max

The first thing we need to do is include the tween class we downloaded so that it compiles when the swf is created. Add the following code to your script:

import gs.*; 
import gs.easing.*;

Step 18 – Tell Flash to Load the XML File

(Additional lines: 3-15)

import gs.*; 
import gs.easing.*;

var xmlPath = "content.xml";
var photos_xml = new XML();
photos_xml.ignoreWhite = true;
photos_xml.onLoad = function(success) {
	if (success) { // ----------- load successful

	} else {// ----------- problem loading, check path
		trace("Error loading photos_xml");
	}
}

photos_xml.load(xmlPath);

This is creating a new XML object that targets our "content.xml" file. Since XML files don't load instantly, it's important to check for a completed load. We do this with the onLoad callback that waits for the xml file to be loaded and then performs an action.

Step 19 – Convert XML Data to an Array

First we need to create an array called "imageList". Once the xml file has loaded, we're going to assign the data to the array so that it's easier to access later.

(Additional lines: 7,10)

import gs.*; 
import gs.easing.*;

var xmlPath = "content.xml";
var photos_xml = new XML();
photos_xml.ignoreWhite = true;
var imageList:Array = new Array();
photos_xml.onLoad = function(success) {
	if (success) { // ----------- load successful
		imageList = photos_xml.firstChild.childNodes;
	} else {
		// ----------- problem loading, check path
		trace("Error loading photos_xml");
	}
}

photos_xml.load(xmlPath);

Step 20 – Build Movieclip Loader Framework

Create an image loader object using the movieClipLoader class and use call backs to initiate commands when the movie starts/finishes loading.

(Additional lines: 17-27)

import gs.*; 
import gs.easing.*;

var xmlPath = "content.xml";
var photos_xml = new XML();
photos_xml.ignoreWhite = true;
var imageList:Array = new Array();
photos_xml.onLoad = function(success) {
	if (success) { // ----------- load successful
		imageList = photos_xml.firstChild.childNodes;
	} else {
		// ----------- problem loading, check path
		trace("Error loading photos_xml");
	}
}

var imageLoader:MovieClipLoader = new MovieClipLoader();
var loadListener:Object = new Object();
imageLoader.addListener(loadListener);

loadListener.onLoadInit = function(target_mc:MovieClip, httpStatus:Number):Void {
	
}

loadListener.onLoadComplete = function(target_mc:MovieClip):Void {

}

photos_xml.load(xmlPath);

Step 21 - Create a Load Function

After the loader object exists we need a function to determine the correct images. We also have to add a variable to keep track of the current image. Inside the "loadImage" function the "loadURL" is set to the XML attribute for the image path. Define a new movieClip (targetClip) for a container to load the image into and set that container to have zero opacity with the _alpha property.

The last step in the function is to load the image into the container (imageLoader.loadClip). We also want to run the "loadImage" command as soon as the XML has successfully finished loading.

(Additional lines: 11,18,31-38)

import gs.*; 
import gs.easing.*;

var xmlPath = "content.xml";
var photos_xml = new XML();
photos_xml.ignoreWhite = true;
var imageList:Array = new Array();
photos_xml.onLoad = function(success) {
	if (success) { // ----------- load successful
		imageList = photos_xml.firstChild.childNodes;
		loadImage();
	} else {
		// ----------- problem loading, check path
		trace("Error loading photos_xml");
	}
}

var currentImage:Number = 0;
var imageLoader:MovieClipLoader = new MovieClipLoader();
var loadListener:Object = new Object();

imageLoader.addListener(loadListener);

loadListener.onLoadInit = function(target_mc:MovieClip, httpStatus:Number):Void {

}

loadListener.onLoadComplete = function(target_mc:MovieClip):Void {
}

function loadImage(){
	var loadURL = imageList[currentImage].attributes.imgurl;
	var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth());
	targetClip._alpha = 0;
	
	// load the new image
	imageLoader.loadClip(loadURL,targetClip);
}

photos_xml.load(xmlPath);

Step 22 - Add a Timer Using the setInterval Function

Build a timer function that will call the "loadImage" function every 5000 miliseconds (5 seconds). Initiate the timer when when the image has completed loading, by placing the call in the onLoadComplete callback.

(Additional lines: 29,32-34)

import gs.*; 
import gs.easing.*;

var xmlPath = "content.xml";
var photos_xml = new XML();
photos_xml.ignoreWhite = true;
var imageList:Array = new Array();
photos_xml.onLoad = function(success) {
	if (success) { // ----------- load successful
		imageList = photos_xml.firstChild.childNodes;
		loadImage();
	} else {
		// ----------- problem loading, check path
		trace("Error loading photos_xml");
	}
}

var currentImage:Number = 0;
var imageLoader:MovieClipLoader = new MovieClipLoader();
var loadListener:Object = new Object();

imageLoader.addListener(loadListener);

loadListener.onLoadInit = function(target_mc:MovieClip, httpStatus:Number):Void {

}

loadListener.onLoadComplete = function(target_mc:MovieClip):Void {
	setTimer();
}

function setTimer(){
	timer = setInterval(loadImage, 5000);
}

function loadImage(){
	var loadURL = imageList[currentImage].attributes.imgurl;
	var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth());
	targetClip._alpha = 0;
	imageLoader.loadClip(loadURL,targetClip);
}

photos_xml.load(xmlPath);

Step 23 - Resize the Image Frame

We need to resize the "background_mc", "border_mc" and "mask_mc" to be the size of the loaded image. The TweenMax/TweenLite library is pretty easy to use. The syntax is TweenLite.to(target clip, time in seconds, {properties:value, ease type}); We also want the image to fade in after it has loaded, so set the _alpha to tween to 100% inside the onLoadComplete.

(Additional lines: 25-27,31)

import gs.*; 
import gs.easing.*;

var xmlPath = "content.xml";
var photos_xml = new XML();
photos_xml.ignoreWhite = true;
var imageList:Array = new Array();
photos_xml.onLoad = function(success) {
	if (success) { // ----------- load successful
		imageList = photos_xml.firstChild.childNodes;
		loadImage();
	} else {
		// ----------- problem loading, check path
		trace("Error loading photos_xml");
	}
}

var currentImage:Number = 0;
var imageLoader:MovieClipLoader = new MovieClipLoader();
var loadListener:Object = new Object();

imageLoader.addListener(loadListener);

loadListener.onLoadInit = function(target_mc:MovieClip, httpStatus:Number):Void {
	TweenLite.to(shell_mc.background_mc, 0.25, {_width:target_mc._width + 20, _height:target_mc._height + 20, ease:Quad.easeOut});
	TweenLite.to(shell_mc.border_mc, 0.25, {_width:target_mc._width, _height:target_mc._height, ease:Quad.easeOut});
	TweenLite.to(shell_mc.mask_mc, 0.25, {_width:target_mc._width, _height:target_mc._height, ease:Quad.easeOut});
}

loadListener.onLoadComplete = function(target_mc:MovieClip):Void {
	TweenLite.to(target_mc, 0.25, {autoAlpha:100, delay:0.25});
	setTimer();
}

function setTimer(){
	timer = setInterval(loadImage, 5000);
}

function removePrevious(){
	if(prevImg != undefined){
		removeMovieClip(prevImg);
	}
	
	// increment the current image
	if(currentImage < imageList.length -1){
		currentImage = currentImage + 1;
	}else{
		currentImage = 0;
	}
}

function loadImage(){
	var loadURL = imageList[currentImage].attributes.imgurl;
	var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth());
	targetClip._alpha = 0;
	imageLoader.loadClip(loadURL,targetClip);
}

photos_xml.load(xmlPath);

Step 24 - Center the Image

First find the center of the stage by dividing the stage height by 2 and the stage width by 2. Next, since the registration point of the shell is in the top left, move the clip to the left of the center of the stage by half the shell's width and up by half the shell's height (variables clipXTarg and clipYtarg calculate the numbers for each new image). Its important to use the Math.round() function so that the final number doesn't contain a decimal - this forces the final position to a full pixel.

(Additional lines: 28-30)

import gs.*; 
import gs.easing.*;

var xmlPath = "content.xml";
var photos_xml = new XML();
photos_xml.ignoreWhite = true;
var imageList:Array = new Array();
photos_xml.onLoad = function(success) {
	if (success) { // ----------- load successful
		imageList = photos_xml.firstChild.childNodes;
		loadImage();
	} else {
		// ----------- problem loading, check path
		trace("Error loading photos_xml");
	}
}

var currentImage:Number = 0;
var imageLoader:MovieClipLoader = new MovieClipLoader();
var loadListener:Object = new Object();

imageLoader.addListener(loadListener);

loadListener.onLoadInit = function(target_mc:MovieClip, httpStatus:Number):Void {
	TweenLite.to(shell_mc.background_mc, 0.25, {_width:target_mc._width + 20, _height:target_mc._height + 20, ease:Quad.easeOut});
	TweenLite.to(shell_mc.border_mc, 0.25, {_width:target_mc._width, _height:target_mc._height, ease:Quad.easeOut});
	TweenLite.to(shell_mc.mask_mc, 0.25, {_width:target_mc._width, _height:target_mc._height, ease:Quad.easeOut});
	var clipXTarg = Math.round((Stage.width/2)-((target_mc._width+20)/2));
	var clipYTarg = Math.round((Stage.height/2)-((target_mc._height+20)/2));
	TweenLite.to(shell_mc, 0.25, {_x:clipXTarg, _y:clipYTarg, ease:Quad.easeOut});
}

loadListener.onLoadComplete = function(target_mc:MovieClip):Void {
	TweenLite.to(target_mc, 0.25, {autoAlpha:100, delay:0.25});
	setTimer();
}

function setTimer(){
	timer = setInterval(loadImage, 5000);
}

function loadImage(){
	var loadURL = imageList[currentImage].attributes.imgurl;
	var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth());
	targetClip._alpha = 0;
	imageLoader.loadClip(loadURL,targetClip);
}

photos_xml.load(xmlPath);

Step 25 - Identify the Previous Image

We need to find the previously loaded image so that it can be removed. Obviously if the current image is some where in the middle of the list then the previous image is one less than the curentImage number. However, if the currentImage is equal to zero then the previous image (assuming the slideshow has stepped through every image) would be the last image in the array or imageList.length - 1. Take the previous image number and figure out the movieClip path to the previous image shell.

(Additional lines: 32-37)

import gs.*; 
import gs.easing.*;

var xmlPath = "content.xml";
var photos_xml = new XML();
photos_xml.ignoreWhite = true;
var imageList:Array = new Array();
photos_xml.onLoad = function(success) {
	if (success) { // ----------- load successful
		imageList = photos_xml.firstChild.childNodes;
		loadImage();
	} else {
		// ----------- problem loading, check path
		trace("Error loading photos_xml");
	}
}

var currentImage:Number = 0;
var imageLoader:MovieClipLoader = new MovieClipLoader();
var loadListener:Object = new Object();

imageLoader.addListener(loadListener);

loadListener.onLoadInit = function(target_mc:MovieClip, httpStatus:Number):Void {
	TweenLite.to(shell_mc.background_mc, 0.25, {_width:target_mc._width + 20, _height:target_mc._height + 20, ease:Quad.easeOut});
	TweenLite.to(shell_mc.border_mc, 0.25, {_width:target_mc._width, _height:target_mc._height, ease:Quad.easeOut});
	TweenLite.to(shell_mc.mask_mc, 0.25, {_width:target_mc._width, _height:target_mc._height, ease:Quad.easeOut});
	var clipXTarg = Math.round((Stage.width/2)-((target_mc._width+20)/2));
	var clipYTarg = Math.round((Stage.height/2)-((target_mc._height+20)/2));
	TweenLite.to(shell_mc, 0.25, {_x:clipXTarg, _y:clipYTarg, ease:Quad.easeOut});

	if(currentImage == 0){
		var prevImgNum = imageList.length -1;
	}else{
		var prevImgNum = currentImage - 1;
	}
	var prevImg = shell_mc.pics_mc["pic"+prevImgNum];
}

loadListener.onLoadComplete = function(target_mc:MovieClip):Void {
	TweenLite.to(target_mc, 0.25, {autoAlpha:100, delay:0.25});
	setTimer();
}

function setTimer(){
	timer = setInterval(loadImage, 5000);
}

function loadImage(){
	var loadURL = imageList[currentImage].attributes.imgurl;
	var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth());
	targetClip._alpha = 0;

	imageLoader.loadClip(loadURL,targetClip);
}

photos_xml.load(xmlPath);

Step 26 - Fade Out and Remove

Next we want to fade out the previous image and then when it gets to zero _alpha we need to remove the clip from the stage entirely. The onComplete:removePrevious waits until the fade has completed and then calls a the "removePrevious". As a safety measure its always a good idea to make sure that the clip we're trying to remove actually exists. Therefore use an "if" statement to check that the clip is not undefined (Flash's word for doesn't exist).

(Additional lines: 38,50-54)

import gs.*; 
import gs.easing.*;

var xmlPath = "content.xml";
var photos_xml = new XML();
photos_xml.ignoreWhite = true;
var imageList:Array = new Array();
photos_xml.onLoad = function(success) {
	if (success) { // ----------- load successful
		imageList = photos_xml.firstChild.childNodes;
		loadImage();
	} else {
		// ----------- problem loading, check path
		trace("Error loading photos_xml");
	}
}

var currentImage:Number = 0;
var imageLoader:MovieClipLoader = new MovieClipLoader();
var loadListener:Object = new Object();

imageLoader.addListener(loadListener);

loadListener.onLoadInit = function(target_mc:MovieClip, httpStatus:Number):Void {
	TweenLite.to(shell_mc.background_mc, 0.25, {_width:target_mc._width + 20, _height:target_mc._height + 20, ease:Quad.easeOut});
	TweenLite.to(shell_mc.border_mc, 0.25, {_width:target_mc._width, _height:target_mc._height, ease:Quad.easeOut});
	TweenLite.to(shell_mc.mask_mc, 0.25, {_width:target_mc._width, _height:target_mc._height, ease:Quad.easeOut});
	var clipXTarg = Math.round((Stage.width/2)-((target_mc._width+20)/2));
	var clipYTarg = Math.round((Stage.height/2)-((target_mc._height+20)/2));
	TweenLite.to(shell_mc, 0.25, {_x:clipXTarg, _y:clipYTarg, ease:Quad.easeOut});

	if(currentImage == 0){
		var prevImgNum = imageList.length -1;
	}else{
		var prevImgNum = currentImage - 1;
	}
	var prevImg = shell_mc.pics_mc["pic"+prevImgNum];
	TweenLite.to(prevImg, 0.25, {autoAlpha:0, onComplete:removePrevious});
}

loadListener.onLoadComplete = function(target_mc:MovieClip):Void {
	TweenLite.to(target_mc, 0.25, {autoAlpha:100, delay:0.25});
	setTimer();
}

function setTimer(){
	timer = setInterval(loadImage, 5000);
}

function removePrevious(){
	if(prevImg != undefined){
		removeMovieClip(prevImg);
	}
}

function loadImage(){
	var loadURL = imageList[currentImage].attributes.imgurl;
	var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth());
	targetClip._alpha = 0;

	imageLoader.loadClip(loadURL,targetClip);
}

photos_xml.load(xmlPath);

Step 27 - Next Image in the Sequence

Now we need to increment the currentImage so that when the timer completes, Flash knows which image to load next. Just like the previousImage, if the current image is any number except the last image in the list we simply add one to the currentImage number. However, if the current image is the last item in the list then the "next" image would start the list over with the first image in the list (position zero in the array).

(Additional lines: 55-59)

import gs.*; 
import gs.easing.*;

var xmlPath = "content.xml";
var photos_xml = new XML();
photos_xml.ignoreWhite = true;
var imageList:Array = new Array();
photos_xml.onLoad = function(success) {
	if (success) { // ----------- load successful
		imageList = photos_xml.firstChild.childNodes;
		loadImage();
	} else {
		// ----------- problem loading, check path
		trace("Error loading photos_xml");
	}
}

var currentImage:Number = 0;
var imageLoader:MovieClipLoader = new MovieClipLoader();
var loadListener:Object = new Object();

imageLoader.addListener(loadListener);

loadListener.onLoadInit = function(target_mc:MovieClip, httpStatus:Number):Void {
	TweenLite.to(shell_mc.background_mc, 0.25, {_width:target_mc._width + 20, _height:target_mc._height + 20, ease:Quad.easeOut});
	TweenLite.to(shell_mc.border_mc, 0.25, {_width:target_mc._width, _height:target_mc._height, ease:Quad.easeOut});
	TweenLite.to(shell_mc.mask_mc, 0.25, {_width:target_mc._width, _height:target_mc._height, ease:Quad.easeOut});
	var clipXTarg = Math.round((Stage.width/2)-((target_mc._width+20)/2));
	var clipYTarg = Math.round((Stage.height/2)-((target_mc._height+20)/2));
	TweenLite.to(shell_mc, 0.25, {_x:clipXTarg, _y:clipYTarg, ease:Quad.easeOut});

	if(currentImage == 0){
		var prevImgNum = imageList.length -1;
	}else{
		var prevImgNum = currentImage - 1;
	}
	var prevImg = shell_mc.pics_mc["pic"+prevImgNum];
	TweenLite.to(prevImg, 0.25, {autoAlpha:0, onComplete:removePrevious});
}

loadListener.onLoadComplete = function(target_mc:MovieClip):Void {
	TweenLite.to(target_mc, 0.25, {autoAlpha:100, delay:0.25});
	setTimer();
}

function setTimer(){
	timer = setInterval(loadImage, 5000);
}

function removePrevious(){
	if(prevImg != undefined){
		removeMovieClip(prevImg);
	}

	if(currentImage < imageList.length -1){
		currentImage = currentImage + 1;
	}else{
		currentImage = 0;
	}
}

function loadImage(){
	var loadURL = imageList[currentImage].attributes.imgurl;
	var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth());
	targetClip._alpha = 0;

	imageLoader.loadClip(loadURL,targetClip);
}

photos_xml.load(xmlPath);

Step 28 - Remove the Timer

Most Actionscript functions occur almost instantly, however loading images requires some amount of time. This amount of time depends on the network connection speed and image size and could therefore be several seconds long. We need to remove the timer until the image has finished loading so that the slide show is a consistent length of time after the image has loaded. One simple line of code (clearInterval) removes the 5 second interval until it is reset by the setInterval running again.

(Additional line: 66)

import gs.*; 
import gs.easing.*;

var xmlPath = "content.xml";
var photos_xml = new XML();
photos_xml.ignoreWhite = true;
var imageList:Array = new Array();
photos_xml.onLoad = function(success) {
	if (success) { // ----------- load successful
		imageList = photos_xml.firstChild.childNodes;
		loadImage();
	} else {
		// ----------- problem loading, check path
		trace("Error loading photos_xml");
	}
}

var currentImage:Number = 0;
var imageLoader:MovieClipLoader = new MovieClipLoader();
var loadListener:Object = new Object();

imageLoader.addListener(loadListener);

loadListener.onLoadInit = function(target_mc:MovieClip, httpStatus:Number):Void {
	TweenLite.to(shell_mc.background_mc, 0.25, {_width:target_mc._width + 20, _height:target_mc._height + 20, ease:Quad.easeOut});
	TweenLite.to(shell_mc.border_mc, 0.25, {_width:target_mc._width, _height:target_mc._height, ease:Quad.easeOut});
	TweenLite.to(shell_mc.mask_mc, 0.25, {_width:target_mc._width, _height:target_mc._height, ease:Quad.easeOut});
	var clipXTarg = Math.round((Stage.width/2)-((target_mc._width+20)/2));
	var clipYTarg = Math.round((Stage.height/2)-((target_mc._height+20)/2));
	TweenLite.to(shell_mc, 0.25, {_x:clipXTarg, _y:clipYTarg, ease:Quad.easeOut});

	if(currentImage == 0){
		var prevImgNum = imageList.length -1;
	}else{
		var prevImgNum = currentImage - 1;
	}
	var prevImg = shell_mc.pics_mc["pic"+prevImgNum];
	TweenLite.to(prevImg, 0.25, {autoAlpha:0, onComplete:removePrevious});
}

loadListener.onLoadComplete = function(target_mc:MovieClip):Void {
	TweenLite.to(target_mc, 0.25, {autoAlpha:100, delay:0.25});
	setTimer();
}

function setTimer(){
	timer = setInterval(loadImage, 5000);
}

function removePrevious(){
	if(prevImg != undefined){
		removeMovieClip(prevImg);
	}

	if(currentImage < imageList.length -1){
		currentImage = currentImage + 1;
	}else{
		currentImage = 0;
	}
}

function loadImage(){
	var loadURL = imageList[currentImage].attributes.imgurl;
	var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth());
	targetClip._alpha = 0;
	clearInterval(timer);

	imageLoader.loadClip(loadURL,targetClip);
}

photos_xml.load(xmlPath);

Step 29 - Stop the Timeline

Finally, we need to stop the timeline. Flash's default function is to play the timeline continuously unless told otherwise. In the case where there is only one frame on the timeline Flash will continue to attempt to run the same code over and over again, resulting in the same image trying to repeatedly load.

(Additional line: 72)

import gs.*; 
import gs.easing.*;

var xmlPath = "content.xml";
var photos_xml = new XML();
photos_xml.ignoreWhite = true;
var imageList:Array = new Array();
photos_xml.onLoad = function(success) {
	if (success) { // ----------- load successful
		imageList = photos_xml.firstChild.childNodes;
		loadImage();
	} else {
		// ----------- problem loading, check path
		trace("Error loading photos_xml");
	}
}

var currentImage:Number = 0;
var imageLoader:MovieClipLoader = new MovieClipLoader();
var loadListener:Object = new Object();

imageLoader.addListener(loadListener);

loadListener.onLoadInit = function(target_mc:MovieClip, httpStatus:Number):Void {
	TweenLite.to(shell_mc.background_mc, 0.25, {_width:target_mc._width + 20, _height:target_mc._height + 20, ease:Quad.easeOut});
	TweenLite.to(shell_mc.border_mc, 0.25, {_width:target_mc._width, _height:target_mc._height, ease:Quad.easeOut});
	TweenLite.to(shell_mc.mask_mc, 0.25, {_width:target_mc._width, _height:target_mc._height, ease:Quad.easeOut});
	var clipXTarg = Math.round((Stage.width/2)-((target_mc._width+20)/2));
	var clipYTarg = Math.round((Stage.height/2)-((target_mc._height+20)/2));
	TweenLite.to(shell_mc, 0.25, {_x:clipXTarg, _y:clipYTarg, ease:Quad.easeOut});

	if(currentImage == 0){
		var prevImgNum = imageList.length -1;
	}else{
		var prevImgNum = currentImage - 1;
	}
	var prevImg = shell_mc.pics_mc["pic"+prevImgNum];
	TweenLite.to(prevImg, 0.25, {autoAlpha:0, onComplete:removePrevious});
}

loadListener.onLoadComplete = function(target_mc:MovieClip):Void {
	TweenLite.to(target_mc, 0.25, {autoAlpha:100, delay:0.25});
	setTimer();
}

function setTimer(){
	timer = setInterval(loadImage, 5000);
}

function removePrevious(){
	if(prevImg != undefined){
		removeMovieClip(prevImg);
	}
	
	if(currentImage < imageList.length -1){
		currentImage = currentImage + 1;
	}else{
		currentImage = 0;
	}
}

function loadImage(){
	var loadURL = imageList[currentImage].attributes.imgurl;
	var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth());
	targetClip._alpha = 0;
	clearInterval(timer);
	
	imageLoader.loadClip(loadURL,targetClip);
}

photos_xml.load(xmlPath);
stop();

Conclusion

Test your movie (Command + Enter for the Mac, Ctrl + Enter for Windows). You should see a working slideshow that resizes and centers based on the size of the images. I hope you enjoyed following this tut!