Tutorial: Loading and Resizing images

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 MovieClipLoader
Next, 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);

Great Flash Developer Forums

Here's a short list of flash developer forums that I like. It's by no means a comprehensive list, so if you have others that you like, add a link to it in the comments!

www.kirupa.com
www.actionscript.org
www.flashmove.com

Photo Album 1

This photo viewer is like a slide show. You can change out the background image to be whatever you want. You can also add a mask so that only part of the photo is displayed.

If you've got some basic actionscripting skills you can resize the images or change the transition effects. I'll post a variation on this in a few days that will let you select the photo that you want to view in addition to watching the automatic slide show.

**note** Photos are not included with the download, so you have to add some of your own to the Photos directory and update the xml file


Download

Flash MP3 Player

This component is skinnable, so that you can modify it to match your site. Just edit the existing buttons, or create your own.

The playlist is XML driven, so you can easily update the songs. Or if you're an advanced user, you can have the playlist created dynamically by a server side script.

This MP3 player can be used on it's own, or loaded into an existing flash movie.

**note** MP3 files are not included with the download, so you have to add some of your own to the tracks directory and update the xml file

enjoy!

Download