Flash Tutorials

The aim of the tutorial is to learn how to create a Flash Movie which loads an Array (list) of external images such as Jpegs or Gifs. These images would then be loaded individually into the Flash Movie as and when the user wished to look at them. This makes the Flash Movie much smaller and reduces the pre-load time for the Flash Movie. The individual images would each have there own pre-loader, so that there is a small delay before loading individual images but no long wait at the beginning of the Movie.

Step One: Setting up the Flash Movie

1. Open a new: Flash Movie
2. Go to: Modify - Document
3. Set the Movie to: 550 x 400
4. Click: OK
5. In the Timeline use the Insert Layer button to add 6 layers so you have a total of: 7 Layers
6. Rename Layer 7 to: ActionScript
7. Rename Layer 6 to: Timer Loader
8. Rename Layer 5 to: Messages
9. Rename Layer 4 to: Loader
10. Rename Layer 3 to: Movie Holder
11. Rename Layer 2 to: Border
12. Rename Layer 1 to: Buttons

You should now see this in the Timeline:

All the Layers on the Main Stage.

Step Two: Setting up the Buttons

The buttons enable the user to browse forward and backwards through the images.

The Next Button

1. Select Frame 2 on all the layers
2. Right click in the Timeline on a: Selected Frame
3. Select: Insert Blank Keyframe like this:

1. Select Frame 3 on all the layers and
2. Right click in the time line
3. Select Insert Blank Keyframe

You should have this:

1. Select Frame 2 of the Layer: ActionScript

2. Add this code to that frame:

   // Get how much of the movie has loaded so far and compare it to how much of the movie has to be loaded
   if (this.getBytesLoaded()>=this.getBytesTotal()) {
   // If the movie has fully loaded then go to and stop at the next frame
   gotoAndStop(3);
   // If the movie hasn't fully loaded
   } else {
   // Then go back to frame 1 and play from frame 1 to check again
   gotoAndPlay(1);
   }
   

3. Select Frame 3 of the Layer: Buttons

4. Create a button and position it at the bottom right of the Stage: Create a Button

Notes: If you wish you can drag one out of the Common Library. For Flash MX 2004: Window - Other Panels - Common Libraries - Buttons

For older versions of Flash: Window - Common Libraries - Buttons

If you use a Common Library button do not use any of the Components, Knobs or Fader buttons.

It is important that any button text is actually inside the button itself, that way if the button is hidden the button text will be hidden too. To edit your Button right click (Mac: Ctrl click) and select: Edit

1. Right click on button and select: Edit
2. Use your Text Tool to give your button a text label: Next

The Text Layer contains the Button Label: Next

My Button.

1. Go back to using the: Selection Tool
2. If the Edit Bar is closed, open it (Flash MX 2004 only): Window - Toolbars - Edit bar

Note: For earlier versions of Flash the Edit Bar is visible when the Tools are visible: Window - Tools

1. Return to the Main Stage by clicking on the Scene 1 button in the Edit Bar:

2. Add this ActionScript to the button: .

   //  On mouse down do the following
   on (press) {
       //  Call the function named: Next
       Next();
   }
   

The Previous Button

1. On the bottom **left **of the Stage: Create another Button
2. This button should have the text label: Previous

My second Button.

1. Add this ActionScript to the button

   //  On mouse down do the following
   on (press) {
       //  Call the function named: Previous
       Previous();
   }
   

Step Three: Creating a Message Display Box

On the Main Stage is a message box which is used to tell the user that they have arrived at the beginning or end of the list of images.

1. Select Frame 3 of the Layer: Messages
2. Select the Text Tool:
3. Drag a Text box onto the stage: Text Box
4. If the Property Inspector is closed, open it: Window - Properties (Ctrl F3)
5. In the Property Inspector set the Text Box to: Dynamic Text

Selecting Dynamic Text from the Property Inspector.

1. If the Show Border Around Text is selected, deselect it:
2. Give the Text Box a Variable Name (Var): MessageDisplay

Don't get the Variable Name (Var) mixed up with the Instance Name! Note there is no Instance Name.

1. Return to the Selection Tool:
2. Move your Message Box towards the: Center Bottom of the Stage

Step Four: Creating the Movie Border

The border goes around the outside edge of the Flash Movie. It is not an essential part of this Movie and you can skip this section and move to the next step if you wish.

1. Select the Frame 3 on layer: Border
2. With the Rectangle Tool draw a border around the Main Stage of your Movie: Draw a Border
3. Return to the Selection Tool:
4. Click in the centre of the rectangle and press: Delete

Step Five: Creating a Progress Bar[/st]

The progress bar is the small black bar that expands giving you a visual representation of the percentage of the Movie (or in this case image) that is loading. It looks something like this:

Progress Bar.

1. Go to: Insert - New Symbol (Ctrl F8)
2. For Name type: Bar

3. For Behavior select: Movie Clip

4. Click: OK

5. In the Timeline use the Insert Layer button to add 1 layer so you have a total of: 2 Layers
6. Rename layer 1 to: Border
7. Rename layer 2 to: Progress Bar

The Layers.

1. Select Frame 1 of the: Border Layer
2. Select the Rectangle Tool and : Draw a Rectangle
3. Return to the Selection Tool:
4. Click in the centre of the rectangle and press: Delete
5. Select the outline by double clicking on the: **Stroke **(Rectangle Outline)
6. In the Property Inspector set its width to: 102.0
7. Set its height to: 6.0
8. In the Timeline Lock the: Border Layer

Your rectangle should look similar to this.

1. Select Frame 1 of the: Progress Bar Layer
2. Select the Rectangle Tool and: Draw a Rectangle
3. Return to the Selection Tool:
4. Click in the centre of the rectangle to select the: Fill
5. In the Property Inspector change the Fill colour of the rectangle to: **Black **(or anything you like)
6. Double click on the outline Stroke (border) and press: Delete
7. In the Property Inspector set its width to: 10
8. Set its height to: 3
9. Then position it inside the border like so:

Note: You may need to Zoom In:

Black Rectangle positioned inside the border.

1. Right Click on the black rectangle in the Progress Bar Layer and select: Convert to Symbol
2. Give it a Name: Loading bar
3. For Behavior select: Movie Clip
4. For Registration select centre left:

1. Click: OK
2. In the Property Inspector give the new Movie Clip the Instance Name of: ba

The Instance Name in the Property Inspector.*

Note: The Instance Name and Movie Clip Names are different. It is always the Instance Name that is important. Remember that Instance Names are case sensitive and must not start with a number or contain spaces. The Movie Clips can be named anything you want (as long as each Movie Clip has it's own unique name). Instance Names do not need to be unique.

Progress Bar ActionScript

You now have to add some code to the Loading bar Movie Clip. What this does is control the width of the bar. So that as more of the object loads the wider bar becomes. The bars width will match the percentage. If 50% has loaded then the bar will be 50 pixels wide etc.

1. Select the Loading bar Movie Clip and add the following code (if you wish leave out the gray comments):

   // When the Flash Movie loads do the following...
   onClipEvent (load) {
   
       //  Call the following function
       function follow(source, target, percent) {
   
           /* Set the variable vector equal to the percentage of the content being loaded and minus current width of this move clip.  */
           vector = (source-target);
   
           //  Set the desp variable equal to the vector variable times by the percent which is the percentage loaded
           desp = (vector*percent);
   
           //  Return the amount loaded
           return (source-desp);
   
           //  Reset the target value
           dd.target = 0;
   
           //  Close the function
           }
   
       // Close the above Clip Event
       }
   
   //  When this Movie Clip enters the frame (every 1/12th of a sec) do...
   onClipEvent (enterFrame) {
   
       //  Call the function from above to reset this Movie Clip's width
       this._width = follow(this._width, target, .2);
   }
   

2. The Progress Bar is now complete. Click on the Scene 1 Tab to return to the Main Stage:

Step Six: Creating the Preloader Movie Clip

The Progress Bar that you have just created is part of another Movie Clip, which controls all the image preloading and displays the Progress Bar and other info such as the percentage loaded:

Progress Bar with Percentage

1. Go to: Insert - New Symbol
2. Name the new symbol: preloaderloader
3. For Behavior select: Movie Clip

4. Click: OK

5. Add 2 Layers so that you have a total of: 3 Layers

6. Rename Layer 1 to: ActionScript
7. Rename Layer 2 to: Text
8. Rename Layer 3 to: Progress

Layers inside the preloaderloader.

The ActionScript Layer

1. Select Frame 1 of the ActionScript Layer and add this code:

   // Set the bar starting width
   bar.ba._width = 0;
   // Stop the preloader from automatically running
   stop();
   

2. On the ActionScript Layer right click on Frame 3 and select: Insert Blank Keyframe

3. Add this code to this new Frame (miss out the gray comments if you wish):

   //  Get the total bytes to be loaded
   total_bytes = (this._parent.MyImagesHolder.getBytesTotal());
   
   //  Get the bytes loaded so far
   loaded_bytes = (this._parent.MyImagesHolder.getBytesLoaded());
   
   //  Work out the difference between the total bytes to load and the bytes loaded so far
   remaining_bytes = (total_bytes-loaded_bytes);
   
   //  Work out the percentage loaded
   percent_done = (int((loaded_bytes/total_bytes)*100));
   
   //  Set the target bar percentage loaded
   bar.ba.target = (percent_done);
   
   //  Display progress of percentage loaded in the text box
   DisplayProgress = (Math.round(bar.ba._width))+" % loaded.";
   
   //  Check to see if everything has loaded
   if (bar.ba._width>99) {
   
       //  If everything has loaded go to the next frame
       gotoAndPlay(4);
   
   //  If everything hasn't loaded then run this code
   } else {
   
       //  Hide the loaded content
       _root.MyImagesHolder._visible = false;
   
       /*  If everything has not loaded return to frame 2 and try again.  This creates a loop and then runs the code above again. This is how everything updates. The values from last time will have changed as more content will have loaded by now.  */
       gotoAndPlay(2);
   
   //  Close the if-else statement
   }
   

4. On Frame 5 of the ActionScript Layer right click select: Insert Blank Keyframe

5. Add this ActionScript to the new frame:

   //  Tell the content that it can now play
   _root.MyImagesHolder.play();
   
   //  Set the image size
   _root.MyImagesHolder._width = _root.MyImageWidth;
   _root.MyImagesHolder._height = _root.MyImageHeight;
   
   //  Show the loaded content
   _root.MyImagesHolder._visible = true;
   
   // reset the bar starting width
   bar.ba._width = 0;
   
   // Enable the previous and next buttons now the image has loaded
   _root.ButtonNext.enabled = true;
   _root.ButtonPrev.enabled = true;
   
   //  Stop on this frame
   stop();
   

The ActionScript Layer should now have three little a's. The ActionScript Layer is now finished.

The Text layer

1. On the Text Layer right click on Frame 2 and select:** Insert Blank Keyframe**
2. Select the Text Tool:
3. Drag a Text Tool on the stage to create a: Text Box
4. Return to using the Selection Tool:
5. Move the Text Box to the: Center of the Stage
6. If the Property Inspector is closed, open it: Window - Properties (Ctrl F3)
7. In the Property Inspector set the Text Box to: Dynamic Text
8. If the Show Border Around Text is selected, deselect it:
9. Give the Text Box a Variable Name (Var): DisplayProgress

Don't get the Variable Name (Var) mixed up with the Instance Name!

1. On the Text Layer right click on Frame 3 and choose:** Insert Frame** (Not a Keyframe)

The Timeline should now look like this. The Text Layer is now Finished.

The Progress Layer

1. On the Progress Layer right click on Frame 2 and choose: Convert to Blank Keyframe
2. Open the Library: **Window - Library **(F11)
3. Drag onto Stage your Movie Clip: Bar
4. Place it just above the Text Box like this:

The Bar is just above the Text Box.

1. In the Property inspector give the Bar Movie Clip an Instance Name: bar

1. On the Progress Layer right click on Frame 3 and choose:** Insert Frame** (Not a Keyframe)

Your Timeline should now look like this.

1. The Preloader is now ready to be placed on to the Main Stage. In the Edit Bar click on the Scene 1 Tab to return to the Main Stage:

2. On the Main Stage Frame 3 select the layer: Loader

3. Open the Library: **Window - Library **(F11)
4. Drag onto Stage the Movie Clip: preloaderloader
5. Place it towards the: Center of the Main Stage
6. In the Property Inspector give it an Instance Name: preloaderloader

Movie Clips Instance Name in the Property Inspector.

Step Seven: Creating an Empty Movie Clip to Hold the Images

This is simply an empty Movie Clip on the Main Stage. The images load in this Movie Clip. The reason for doing this is because it is the only way to control the position of the images. With other methods of loading external images, the pictures simply go in to the center of the Stage. With this method if you move the blank Movie Clip to an alternative position the image will consequently display in this new location. The placement of the blank Movie Clip can be controlled in two ways:

• Placement on the stage when constructing the Flash Movie
• Once on stage the Movie Clip's position can be controlled through ActionScript.

In this case the location of the images is by the location on Stage of the blank Movie Clip not via the ActionScript.

1. Go to: **Insert - New Symbol **(Ctrl F8)
2. Give it the Name: MyImagesHolder

3. For Behavior select: Movie Clip

4. Click: OK

5. Return to the Main Stage by clicking on Scene 1 Tab:
6. Select Frame 3 of the Layer: Movie Holder
7. Open the Library: **Window - Library **(F11)
8. Drag onto Stage the Movie Clip: MyImagesHolder

Note: Because the Movie Clip is empty you will only see a small circle:

1. In the Property Inspector set the Movie's Y value to: 10
2. Set the Movie's X value to: 10
3. In the Property Inspector give it an Instance Name: MyImagesHolder

Movie Clips Instance Name in the Property Inspector.

Step Eight: Creating the Timer Movie Clip

This Movie Clip has a small amount of ActionScript that controls the loading of the first Image. Subsequently images are loaded when the user clicks on one of the buttons.

1. Go to: Insert - New Symbol (Ctrl F8)
2. Give it the Name: Timer

3. For Behavior select: Movie Clip

4. Click: OK

5. On Frame 1 of the Timeline add this code:

   //  This is how we auto load the first image when the movie loads
   //  Auto load the first image from the Array
   loadMovie(_root.MyArray[0], _root.MyImagesHolder);
   
   //  Tell the preloader to preload the first image
   _root.preloaderloader.gotoAndPlay(2);
   
   //  Stop this Movie Clip now the first image has loaded
   stop();
   

6. The Timer Movie Clip is now complete. Return to the Main stage by clicking the Scene 1 Tab:

Step Nine: Placing the Timer on the Main Stage

1. On the Main Stage select Frame 3 on the: Timer Layer
2. Open the Library: Window - Library (F11)
3. Drag on to the Main Stage the: Timer Movie Clip
4. Position it in the: Center
5. In the Property Inspector give it an Instance Name: timer

The Timer Instance Name.

Your Main Stage should now look similar to this.

Step Ten: The ActionScript

It is the ActionScript on frame 1 of the Main Stage that controls the bulk of the information that is needed to load and preload the images.

1. Select Frame 3 of the ActionScript Layer and add the following code:

   //  Set up the variables
   /*  Set the total number of images to load minus one so this will load images counting from zero to ten (eleven images in total).  */
   var NumberOfImages = 10;
   
   /* Set the location of the images e.g. the path to the image like c:myFolderMyImages or http://www.MyWebSite.com/Images  */
   var LocationToImages = "images/";
   
   //  Set the image format i.e. gif, jpg etc…
   var FileType = ".jpg";
   
   //  Set the size of the images you want to load
   var MyImageWidth = 530;
   var MyImageHeight = 350;
   
   //  Declare 'x' as a variable and set it's value to 0
   //  This will count the images as they load
   var x = 0;
   
   //  Hide the loaded content
   _root.MyImagesHolder._visible = false;
   
   // Declare two arrays
   // First array is for the location of the images
   var MyArray = new Array();
   // Second array is for whether an image has already been loaded or not
   var MyArray2 = new Array();;
   
   //  Declare 'i' as a variable and set its 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* = LocationToImages+i+FileType;
   
   //  Increase the value of 'i' by 1
   i++;
   }
   
   //  Code for Next button
   //  Call the code below if the next button is clicked
   _global.Next = function() {
   
   // Disable the buttons until the image has loaded
   _root.ButtonNext.enabled = false;
   _root.ButtonPrev.enabled = false;
   
   //  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) {
   
   //  Load the next image along from the last image loaded
   loadMovie(MyArray[x], _root.MyImagesHolder);
   
   // Check to see if the image has been loaded already or not but checking the second array current index value to see if it's been set to 1 or not
   if(MyArray2[x] == 1){
   
   
   // If the image has already been pre-loaded once, then there is no need to preload it again. Just load the image and skip the preload stage
   _root.preloaderloader.gotoAndPlay(4);
   
   // Otherwise if the image hasn't already been preloaded then do the following
   } else {
   
   // Set the second array current index to the value of 1 so that next time the index is checked flash will know the image has already
   // been pre-loaded once
   MyArray2[x] = 1;
   
   //  Tell the image preloader to play and preload the external images
   _root.preloaderloader.gotoAndPlay(2);
   }
   
   //  Otherwise...
   } 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 therefore will not try to load any more images from the array.  */
   x = NumberOfImages;
   
   // Only enable the previous button
   _root.ButtonPrev.enabled = true;
   
   /*  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 Previous button
   //  Call the code below if the previous button is clicked
   _global.Previous = function() {
   
   //Disable the buttons until the image has loaded
   _root.ButtonNext.enabled = false;
   _root.ButtonPrev.enabled = false;
   
   //  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 than zero then do the following:
   if (x>=0) {
   
   //  Load the previous image along from the last image loaded
   loadMovie(MyArray[x], _root.MyImagesHolder);
   
   // Tell the image preloader to play and preload the external image
   // As the previous image will have already been preloaded once we don't need to preload it again
   
   // so instead skip the preloader stage and just load the image
   _root.preloaderloader.gotoAndPlay(4);
   
   //  Otherwise..
   } 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 therefore will not try to load any more images from the array.  */
   x = 0;
   
   // Only enable the next button
   _root.ButtonNext.enabled = true;
   
   /*  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";
   }
   };
   
   //  Disable the next and previous buttons till the first image automatically loads
   _root.ButtonNext.enabled = false;
   _root.ButtonPrev.enabled = false;
   
   //  Stop the movie on this frame
   stop();
   

Step Eleven: Testing your Movie

Time to test your Movie: To do this you need to prepare your Jpegs (or other types of images).

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

Source: http://www.webwasp.co.uk/tutorials/b30-load-images_MX04/index.php