Flash tutorials loading external images

Flash : Actionscript 2.0

Membuat album foto/gallery dengan
menggunakan component

Flash Tutorials: Loading External Images - webwasp.co.uk http://www.webwasp.co.uk/tutorials/b30-load-images_MX04/tutorial.php

Loading External Images Home • Members • Tutorials • Forum • iSnapChat • Contact Us

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.

1 of 11 12/16/2011 12:24 AM


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

2 of 11 12/16/2011 12:24 AM


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.

3 of 11 12/16/2011 12:24 AM


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

4 of 11 12/16/2011 12:24 AM


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

5 of 11 12/16/2011 12:24 AM


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):

6 of 11 12/16/2011 12:24 AM


// 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.

3. Select Frame 2 in the Layer: ActionScript
4. 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:myFolderMyImages
(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.

7 of 11 12/16/2011 12:24 AM


// 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.

8 of 11 12/16/2011 12:24 AM


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) {


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

// Load the previous image along from the last image loaded
} 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";
}
};


// Load the first image from the array when the movie starts

// 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";

9 of 11 12/16/2011 12:24 AM


// 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();

7. 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!

Please indicate what you thought of this tutorial
10 is the best: 10 9 8 7 6 5 4 3 2 1

• 174060 visitors to this page since Nov 04 •

10 of 11 12/16/2011 12:24 AM


Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

Top of Page • Home • Members • Tutorials • Forum • iSnapChat • Contact Us
All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission.
Please ask as permission is often granted.

11 of 11 12/16/2011 12:24 AM

Flash tutorials loading external images

Recommandé

Recommandé

Contenu connexe

Similaire à Flash tutorials loading external images

Similaire à Flash tutorials loading external images (20)

Plus de SMK Negeri 6 Malang

Plus de SMK Negeri 6 Malang (20)

Dernier

Dernier (20)

Flash tutorials loading external images