Knowing how to dynamically load, resize and position images in Flash is the key to making a good flash slide show. I'll show you how to do it here. For free even.
For this tutorial, I'm not going to cover how to get the URL to the image into flash. I'll put it in a variable to keep things simple. If you want to see how to load URLs to multiple images from an XML file, check out the source for my Flash Photo Album
here.
Step 1 - Load the images First let's create a MovieClip to hold the image, and then load the image into it. We're going to use a MovieClipLoader for this so that we can add a listener later.
//create the MovieClipLoader
var mcLoader:MovieClipLoader = new MovieClipLoader();
//create the MovieClip to hold the image
var photoHolder:MovieClip = _root.createEmptyMovieClip("photoHolder", 1);
//load the image
var nextPhoto:String = "Photos/photo1.jpg";
mcLoader.loadClip(nextPhoto, photoHolder);
Step 2 - Add a listener object to the MovieClipLoaderNext, we're going to add a listener object to the MovieClipLoader, so that we can be notified when the image has loaded. In this case, we are going to listen for the onLoadInit event.
//create the listener object
var loadListener:Object = new Object();
//create a function that will be called when the onLoadInit event is fired
loadListener.onLoadInit = function(mc:MovieClip){
//resize code will go here
}
//add the listener to the MovieClipLoader
var mcLoader:MovieClipLoader = new MovieClipLoader();
mcLoader.addListener(loadListener); Step 3 - Resize and Center the image Now lets add the code to resize and center the image.
//make the image half the width of the Stage
mc._width = Stage.width/2;
//keep the proportions the same
mc._yscale = mc._xscale;
//center the image
mc._x = (Stage.width/2) - (mc._width/2);
mc._y = (Stage.height/2) - (mc._height/2);
Step 4 - Putting it all together. Now that we've gone through all of the steps, here is what all of the code looks like together. As an extension, you may want to add a Tween so that the image fades in, or resizes slowly, or slides in from the side!
----------------------------------------------------------
var loadListener:Object = new Object();
loadListener.onLoadInit = function(mc:MovieClip){
mc._width = Stage.width/2;
mc._yscale = mc._xscale;
mc._x = (Stage.width/2) - (mc._width/2);
mc._y = (Stage.height/2) - (mc._height/2);
};
var mcLoader:MovieClipLoader = new MovieClipLoader();
mcLoader.addListener(loadListener);
var nextPhoto:String = "Photos/photo1.jpg";
var photoHolder:MovieClip = _root.createEmptyMovieClip("photoHolder", 1);
mcLoader.loadClip(nextPhoto, photoHolder);