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

Flash Tutorial - Loading External Images using Components

Free Tutorial

This tutorial shows you how to load external images into Flash using an Array (list) and Flash MX 2004 Components. This means that the pictures are not loaded preloaded into Flash. Therefore the Flash Movie does not have to load all the pictures before you can start to view the first picture. If you preload all the images into FLash there can be a long wait before the user can view the first picture.

Important Cross Ref: This tutorial uses Flash 8 / MX 2004 Components. The ActionScript for Components in earlier version of Flash is different. If you do not have Flash 8 or MX 2004 please use the previous tutorial on: Loading External Images

Using Components

There is a Library of Components that come with Flash and these components have predefined tasks. This makes the build/development of your Flash Movie quicker and easier. As you can see form the illustrations below they include things like Buttons, Check Boxes, Scroll bars etc. In this tutorial we are going to use the Buttons and Progress Bar.

The disadvantage of using Components is that they tend to increase the size of the Flash Movie. If you are using a lot of Components in your Movie this may not matter as it is using the first few components that makes all the difference. After that additional Components don't tend to make a great deal of difference to the file size.

The Movie you are about to make will end up at least 100KB.! If you follow the previous tutorial and build the Progress Bar and Buttons yourself (on use Buttons from the Button Library) you will find your Flash Movie is little more than 5KB! That is a big difference.

As you can see from the Illustrations below one of the advantages of using Flash MX 2004 Pro is that it comes packed with many more Components. If the use of Components is an important part of your Flash work you may consider upgrading to Flash Pro.

Flash MX 04 Components.

Flash MX 04 Pro Components.

Below is the example of the Flash Movie that you will create in this tutorial.

Example: Download the Flash file  Int 130a

The images are loaded into the Flash Movie one at a time.

Step One: Building the Flash Movie

Cross Ref: You may wish to read these tutorials first so that you know how to build and use preloader's: Arrays, Preloader and Advanced Use of Preloader's

1. Open a new: Flash Movie
2. Go to: Modify > Document
3. Set the Movie to: 550 x 400
4. In the Timeline use the Insert Layer button to add 2 layers so you have a total of: 3 Layers
5. Name the top Layer (Layer 3): ActionScript
6. Name the middle Layer (Layer 2): Components
7. Name the bottom Layer (Layer 1): Border
8. Select all the Frames on all the layers (use the Ctrl Key for multiple selection) and right click (Mac: Ctrl click). Select: Insert Blank Keyframes
   
   
   Inserting Blank Keyframes into all Layers on Frame 2. Note the Layer Names.
   
   
   You should now see this:
   
   
   All Layers now have Blank Keyframes in Frames 1 and 2.
   
   
9. Select Frame 2 of the Layer: Components
10. Select the Text Tool:
11. Drag a Text box onto the stage: Create Text Box
12. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
13. In the Property Inspector set the Text Box to: Dynamic Text
14. Give the Text Box a Variable Name (Var): MessageDisplay
    
    
    Don't get the Variable Name (Var) mixed up with the Instance Name!
    
    
15. Go back to using the Selection Tool:
16. Open the Component Panel: Window > Development panels > Components(Ctrl F7)
17. Drag a Button Component to the stage and position it bottom left: Button Component on Left
18. Add a second Button Component to the bottom right of the Stage: Button Component on Right
19. Add a Progress Bar Component to the Stage and position in the center: Progress Bar Component
    
    
    Your Stage should look similar to this.
    
    
20. Select the Button Component on the right and in the Property Inspector give it an Instance Name: Next
21. In the Property Inspector change the Label to: Next
    
    
    Instance Name and Button Label are both set to: Next
    
    
22. Select the Button Component on the left and give it an Instance Name of : Previous
23. Change the Label value to: Previous
    
    
    Instance Name and Button Label are both set to: Pervious
    
    
24. Select the Progress Bar Component and give it the Instance Name: myProgressBar
25. Set the source to: MyImagesHolder
26. Change the mode to: polled
    
    
    Settings for the Progress Bar Component.
    
    
    Optional: If you wish to have a border around your Movie complete the next three points. Otherwise skip this bit and continue just below the illustration of the red border.
    
27. Select Frame 2 of the: Border Layer
28. With the Rectangle Tool draw a border around your Movie: Draw a Border
29. Use the Selection Tool to: Delete the Fill
    
    
    Flash Movie with a red border.
    
    
30. In Frame 2 of the Component Layer select your: Progress Bar
31. Copy the Progress Bar: Edit > Copy
32. Select Frame 1 of the: Components Layer
33. In Frame 1 paste it into the same position on Stage: Edit > Paste in Place
34. In the Property Inspector set the Movie to: polled
35. Set the source to: _root

Note: NOT _root. It's without the dot on the end.

36. Give the Progress Bar an Instance Name: myProgressBar
    
    
    The settings for the Progress Bar on Frame 1.

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!