Loading External Images	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Loading External Images using Components

Free Tutorial

Step Two: The ActionScript

1. Select Frame 1 of the: ActionScript Layer
2. Now add this code (if you wish miss out the gray comments):

//  Detect when the progress bar has loaded the movie
myProgressBarListener = new Object();
myProgressBarListener = function (eventObject) {
    //  Play the next frame now that the movie has been preloaded
    nextFrame();
};
myProgressBar.addEventListener("complete", myProgressBarListener);
//  Stop movie from moving on
stop();



All the content for Frame 1 is now complete so you Movie should look similar to this:


Frame 1 completed.


Select Frame 2 in the Layer: ActionScript

Add this code (if you wish miss out the gray comments):

//  Set up the variables

/*  Set this number to the same as the top number in your Array (list) of pictures. That is the total number of images minus one! This is because the Array starts at zero. In this case there are eleven Jpegs in total. See illustration at the bottom of this web page.  */
var NumberOfImages = 10;

/* Set the location of the images e.g. the path to the image like: images or http://www.MyWebSite.com/images and sets the variable name to: 'LocationToImages'.
Never use an address on your local computer like this: c:\myFolder\MyImages (unless you are only ever going to play the Movie from your Computer. */
var LocationToImages = "images/";

//  Set the image format i.e. Gif, Jpeg, Png etc..
//  Variable name: 'FileType'
var FileType = ".jpg";

//   Sets the size of the images you want to load.
var MyImageWidth = 530;
var MyImageHeight = 350;

//  Set the location of the images in the Flash Movie.
//  X is horizontal
//  Variable name 'MyImagesHolderX'
var MyImagesHolderX = 10;

//  Y is vertical position in the Flash Movie.
//  Variable name 'MyImagesHolderY'
var MyImagesHolderY = 10;

//  Declare 'x' as a variable and set it's value to 0
var x = 0;

//  Create a Movie Clip to load images into
_root.createEmptyMovieClip("MyImagesHolder", 0);

//  Declare an array
var MyArray = new Array();

//  Declare 'i' as a variable and set it's value to 0
var i = 0;

//  While the variable 'i' is less than the number of images do the follow
while (i<=NumberOfImages) {

//  Add the following together: 'file location' , 'file number' and 'file type'.
//  Then add it to the array as one hole string. For example:
//  MyArray[0] = images/0.jpg,
//  MyArray[1] = images/1.jpg,
//  MyArray[2] = images/2.jpg
//  etc...
MyArray[i] = LocationToImages+i+FileType;

//  Increase the value of 'i' by 1
i++;
}

//  Code for the Next button
//  Detect when the next button is clicked:
NextListener = new Object();
Next.addEventListener("click", NextListener);

//  Call the code below if the next button is clicked
NextListener.click = function() {

//  Clear any message alerts
MessageDisplay = "";

//  Set the variable 'x' as one greater than last time
x = x+1;

//  So long as the variable 'x' isn't the same as the total number of images, then do the following:
if (x<=NumberOfImages) {

//  Set the progress bar to monitor loaded content
myProgressBar.mode = "polled";

//  Make the progress bar visible
myProgressBar._visible = true;

//  Load the next image along from the last image loaded
loadMovie(MyArray[x], _root.MyImagesHolder);
} else {

/* Set the variable 'x' back to the variable 'NumberOfImages'. This resets the variable 'x value so that when the user reaches the end of the  available images. The variable 'x' will not change in value and their for will not try to load any more images from the array.  */
x = NumberOfImages;

/* If the variable 'x' is the same as the variable 'NumberOfImages' then don't load the next image as there aren't any more. Instead alert the user they have reached the end of available images.  */
MessageDisplay = "No more images available";
}
};

//  Code for the Previous button
//  Detect when the previous button is clicked:
PreviousListener = new Object();
Previous.addEventListener("click", PreviousListener);

//  Call the code below if the previous button is clicked
PreviousListener.click = function() {

//  Clear any message alerts
MessageDisplay = "";

//  Set the variable 'x' as one less than last time
x = x-1;

//  So long as the variable 'x' isn't equal to or less zero then do the following:
if (x>=0) {

//  Set the progress bar to monitor loaded content
myProgressBar.mode = "polled";

//  Make the progress bar visible
myProgressBar._visible = true;

//  Load the previous image along from the last image loaded
loadMovie(MyArray[x], _root.MyImagesHolder);
} else {

/*  Set the variable 'x' back to zero. This resets the variable 'x value so that when the user reaches the start of the available images. The variable 'x' will not change in value and there for will not try to load any more images from the array.  */
x = 0;

/*  If the variable 'x' is the same as or less then zero then don't load the previous image as there aren't any more. Instead alert the user they have reached the end of available images.  */
MessageDisplay = "No more images available";
}
};

//  Set the progress bar to monitor loaded content
myProgressBar.mode = "polled";

//  Load the first image from the array when the movie starts
loadMovie(MyArray[x], _root.MyImagesHolder);

//  Detect when an image is being loaded has finished loading
myProgressBarListener = new Object();

//  Run this code when the image being loaded has finished loading
myProgressBarListener = function (eventObject) {

/*  Set the progress bar to manual mode so that we can reset its value back to 0 ready for the next image. We don't want it staring from 100 !  */
myProgressBar.mode = "manual";

//  Reset the progress bar back to zero
myProgressBar.setProgress(0, 100);

//  Now the image has been loaded we can hide the progress bar component
myProgressBar._visible = false;

//  Set the image loaded to the size we desire if it's not already the size we need
MyImagesHolder._width = MyImageWidth;
MyImagesHolder._height = MyImageHeight;

//  X is horizontal
MyImagesHolder._x = MyImagesHolderX;

//  Y is vertical
MyImagesHolder._y = MyImagesHolderY;
};

//  Detect when the progress bar had loaded the image file
myProgressBar.addEventListener("complete", myProgressBarListener);

//  Stop the movie on this frame
stop();


You will need to create a sub folder called images and place your pictures in that before you test your Movie: Control > Test Movie (Ctrl + Enter)

Note: If you used a different folder name to that used in the code above do not use the name images but use your own folder name.

The Folder structure.

• All the Jpegs are in a folder called: images
• Eleven images numbered: 0 to 10 (not 1 to 11).
• The Flash Movie (or swf file) is not in the images folder but: One level up

That's it!