Loading external JPGs into your main SWF movie

In this tutorial, you will learn a cool thing that Flash can do: to load an external JPG (or JPEG, as you wish) image while the main SWF is running.

Loading external JPG images in Flash has many benefits:

• you don't have to put the images in your SWF, so that its size will be much smaller and it will load much faster,
• if you ever decide to change a picture, you just change it and upload it without having to modify the SWFmovie,
• you can make a simple interface which will be used to load as many different images as you want.

Before continuing, just one note: this tutorial will teach you how to make an interface for loading JPEG images into Flash. It also features a preloader for the JPEGs that will be loaded, but this works in Internet Explorer only. The JPG images still load in Firefox and Opera, but without the preloader. I haven't figured out why this is so - yet. If you do discover the reason for that, please contact me.

Please click on the numbers in the flash example below to see the JPG images being loaded into Flash.

Setting up the JPG images and the Flash movie

1. Before starting the work in Flash, please download my images that you'll use in this tutorial.

It is important to keep in mind that before the advent of Flash 8, only non-progressive JPGs could be loaded into Flash. So, to be backwards compatible (for people who don't have the latest version of Flash Player installed), be sure that your JPEGs are non-progressive.

How to achieve that? Simple - just leave the "Progressive" box unchecked, when exporting your image, whether you're doing it in Photoshop or Fireworks. You can see that in the image below.

NOTE When inserting images into you website, whether it is a Flash or HTML one, ALWAYS optimize them! It hurts my eyes to see greatly designed sites that take ages to load because of images that weren't resized and/or optimized. You don't need to have an expensive piece of software like Photoshop to do this. There are lots of image-editing programs which are affordable, like ACDSee for example, or completely free, like Google's Picasa. Optimizing your images doesn't mean that they will look ugly. You can always reduce the file size for an image significantly without having to sacrifice the quality. If your images need to be high-quality, like wallpapers for example, make a thumbnail - a small preview of the actual image, so that your user can decide whether to click and wait for the bigger image to load or not.

2. Create a new folder on your hard disk just for the purpose of this tutorial. Place the images you just downloaded in this folder. Also, this is the folder you are going to save your flash movie to.

3. In Flash, open a new document. Go to Modify > Document to open the Document Properties dialog box. Set the dimensions of the movie to 477 by 340 pixels. You can set any dimensions you want - I used these specific ones because of the format of my images, just for this tutorial. Click OK.

Creating an empty movie clip for image loading

4. Call the first (and so far the only one) layer image loader.

5. Select Insert > New Symbol. In the dialog box that appears, select Movie clip as type and insert empty movie clip as name and click OK.

You are just creating an empty movie clip which will serve for loading externally stored JPG images.

To have an empty movie clip, you must now click on the link "Scene 1" above the timeline.

You will return to the main scene, but the movie clip will be created, without any contents - graphics, text, etc. It is now stored in the Library.

6. Open the Library by selecting Window > Library (or press Ctrl+L). You will see your newly created movie clip in there.

7. Click on the movie clip in the Library and drag it onto the stage. Release mouse over the stage. You have just placed an instance of the empty movie clip on the stage. This movie clip, being completely without any drawings or other visual elements, is represented only by its registration point.

Although it may not seem so, this movie clip has all the properties and possibilities like any other one: you can change its position, transparency, dimensions, etc.

8. With the movie clip still selected, go to the Properties panel below the stage and set the coordinates as follows: X: 4, Y: 25. This is done in order for the images to display nicely, centered horizontally on the stage and just below the buttons' interface which you will add in a few steps. Remember, you could place your movie clip anywhere, these coordinates you just set are made for this specific case.

REMEMBER When placing a movie clip that will serve as a placeholder, loader for images, it is important that the coordinates are set to round numbers. That means, if you have a coordinate like 24.3, you should manually set it to a round number: 24.0. Otherwise, your images and graphics that are going to be loaded into the aforementioned movie clip are going to look blurry instead of clear and sharp.

9. You will now give this movie clip an Instance name. With this name, you can control your movie clip with ActionScript. This is the only way to do it. The Library name of the movie clip (empty movie clip in this case) doesn't mean a thing for ActionScript. It is merely a name by which you can more easily find the movie clip you're looking for in the Library if you happen to have a few dozen movie clips, buttons, etc. in a bigger flash movie.

So, once again, go to the left side of the Properties panel, and type imageLoader in the Instance name field and hit Enter to confirm.

Making a text field for image preloading

10. Lock this layer. Create a new layer and call it text field.

11. Select the Text tool (T). In the Properties panel again, set the type of the text field to Dynamic Text (on the left). Choose a font you like and set its size to 18 or something similar. The Dynamic text field type is the one which you can control via ActionScript.

12. Click on the stage and drag a text field. Press Esc to exit from text editing mode.

Again, check in the left side of the Properties panel to see if the coordinates of the field are set to round numbers. If they are, cool. If they are not, make them so. Click in the Instance name field above the coordinates, type infoField and hit Enter to confirm. Again, it is obligatory to give an Instance name to your text field so that you can manipulate it later with ActionScript.

13. Click on the small icon that indicates center-aligned text (1 in the image below). Next, click on the Embed button (2).

The Character Embedding dialog box will appear. Click on the Numerals option to select it, then click in the "Include these characters" field, type in the % sign (yep, percentage) and click OK.

Creating the interface

14. Lock the text field layer. Make a new layer and call it buttons. This is the place where your interface for pictures loading will be situated.

15. Select the Rectangle tool (R). Click and drag on stage while holding Shift to draw a square. Make a 15 by 15 pixel square (you should now how to do that by now - select the square and go to the left part of the Properties panel). I used black hairline stroke for the outline color and white for the fill color. Choose whatever style and colors suit you best.

16. Select the square (both the outline and the fill). Select Modify > Convert to Symbol. Choose Button as type and name it button 1. How imaginative, huh?

17. Double-click on the newly created button on the stage. You have just entered inside it, so that now you are looking at the button's timeline.

18. Right-click on the Hit frame, and select Insert frame. This prolonges the duration of the keyframe until the last frame - the Hit state of the button. This is important, because the Hit state defines the clickable area of a button. So, the area of the square defines what is clickable in this case.

19. Right-click on the Over frame and select Insert Keyframe.

20. Repeat this procedure for the Down state. Why is this neceassary? You'll see in next step.

21. Select the Over keyframe.

You will now define what happens when a user rolls over your button. You will create a color change. That's why there's a keyframe necessary in the Down state. If you hadn't inserted it, the Over state would be the same as the Down state.

22. Now that you have clicked on the Over frame, you have selected every drawing that is present in that state.

In the Colors part of the Tool panel, select black as Fill color.

What you just achieved is a rollover effect. Once a user rolls over the button with her mouse, she will see the square change the fill color, as you can see in the small flash movie below.

You have just to add a number to your button, with the rollover effect too. Of course, if that doesn't look well with the overall design of your site, you can skip this part.

23. Call this layer square and lock it (remember, you are still working inside the button). Create a new layer and call it text.

24. Select the Text tool (T). Choose a font you like. In the Properties panel, on its left side, choose Static text in the drop-down menu.

25. Click somewhere on the stage, write "1" (without the quotation marks, of yourse) and hit Esc to exit text editing mode.

26. By using the arrow keys, center the text in relation to the square. Make sure that the text field is set to round coordinates - check that in the Properties panel.

Also, be sure that the "Selectable" option in the Properties panel is turned off. This is the leftmost icon in the picture below.

This is necessary, if you don't want that the cursor for selecting text appears when the user places her mouse over the button. It might make one think that the button isn't a button really. Also, the button won't work properly. See what I mean in the picture showing that:

27. On this layer, repeat the steps you did with the square: Insert a keyframe in the Over and Down states, then select the Over state.

28. Using the Selection tool (V), click on the text field on the stage (once) to select it. In the Properties panel, select white as text color.

That's it! You have just made the first button for your interface! Now, go back to the main scene by clicking on the "Scene 1" link above the layers.

29. Give the button an Instance name, again, in the Properties panel. Call it imgbtn1 and hit Enter to confirm.

This isn't necessary. However, it facilitates a lot of things. You will make two more buttons, that will serve to load two more images. If you hadn't had Instance names, you'd have to put ActionScript on each individual button.

By giving each button an Instance name, you can put all code on the main (root) timeline, on the same place. Beacuse, you can assign actions to buttons by referencing them via their Instance names. That is far more practical if any changes need to be made anytime after, than going over each button and making the necessary modifications. OK? Cool :)

Making the other buttons for image loading

30. Open the Library (F11). Right-click on the button 1 symbol and select "Duplicate". A dialog box will appear. Call the new symbol button 2. Repeat this once more and create another copy, button 3.

31. Now, double-click on the button 2 symbol in the Library. You will enter inside it. Go to the text layer.

32. Select the Text tool (T) and click on the text field on the Up frame. Change the number 1 in the text field to number 2. Do this for the button's Over and Down states too. At the end, you will have a new button.

33. Double-click on button 3 in the Library and repeat the procedure. Change all instances of number 2 into number 3. Once finished, click on the "Scene 1" link above the layers to return to the main timeline - the stage.

34. Drag an instance of the button 2 and button 3 symbols from the Library onto the stage. You should now have three buttons on the stage, each of which will load a different JPEG image.

Before proceeding, give the new two buttons Instance names. First click once on button 2 on the stage, and in the Properties panel, give it the Instance name imgbtn2. Call the third button imgbtn3.

35. Lock this (buttons) layer. Make a new layer and call it actions. All of the ActionScript for this movie is going to be placed on this layer.

You can lock this layer if you want, because you can put actions on it while it's locked.

36. Click on the first keyframe of the actions layer and press F9 to open the Actions panel. Enter in the following code:

imgbtn1.onRelease = function() {
   infoField._visible = true;
   startLoading("picture1.jpg");
};
imgbtn2.onRelease = function() {
   infoField._visible = true;
   startLoading("picture2.jpg");
};
imgbtn3.onRelease = function() {
   infoField._visible = true;
   startLoading("picture3.jpg");
};
function startLoading(whichImage) {
   loadMovie(whichImage, "imageLoader");
   _root.onEnterFrame = function() {
      infoLoaded = imageLoader.getBytesLoaded();
      infoTotal = imageLoader.getBytesTotal();
      percentage = Math.floor(infoLoaded/infoTotal*100);
      infoField.text = percentage+"%";
      if (percentage>=100) {
         delete this.onEnterFrame;
         infoField._visible = false;
      }
   };
}

Now! Before testing your movie, check the following:

First, make sure that you saved your .FLA in the same folder where you put your images.

Second, if you are working in Flash 8, go to File > Publish Settings. Click on the Flash tab at the top. On the bottom of this dialog box, you will see the "Local playback security" menu. Select the "Access local files only" option and click OK.

37. Test your movie by selecting Control > Test Movie or pressing Ctrl+Enter.

If you click on the buttons, the images will load instantly. If you want to see how it would go on the Internet, with preloading in Internet Explorer, select View > Download Settings > 56K. This will set the simulation to a 56K modem speed. That is a fine setting for checking out how your preloading behaves - DSL may be too fast (but you can try it nevertheless).

Now, select View > Simulate Download. This will simulate a modem speed. Click on the buttons now and you should see the preloader at work, for each single JPG image!

Explaining the ActionScript that makes JPG image loading possible

Let me explain you how this piece of ActionScript code works. First, the buttons' code. I will explain the code for one button only, because it is almost the same for the remaining ones, except for some variable names.

The first line of ActionScript code means the following: the onRelease event (when the user clicks and releases the mouse over the button - a "standard" mouse click) for the imgbtn1 button will execute a function. What will be executed is found {between the curly braces}.

imgbtn1.onRelease = function() {

And just what is situated between the curly braces? The first ActionScript line in there says

   infoField._visible = true;

It sets the visibility property of the text field infoField (the one which shows how much of the image has been loaded) to true. It means, the field becomes visible.

But you never made it invisible in the first place! Yes, that's true, but the field will be made invisible later, when the image loads. So, this has to be here once a user presses a button to see this or some other picture, so that the text field with percentage of the loaded JPEG image shows again.

The next line calls a function. To call a function simply means to execute it. A function doesn't execute by itself - you have to call it. In this case, you are calling a function named startLoading. And you pass it a parameter, too. This parameter is the JPEG image you want Flash to load once a user has pressed this button.

In this case, it is picture1.jpg. It is picture2.jpg for the second button, and picture3.jpg for the third button.

   startLoading("picture1.jpg");
};

Almost the same code repeats for the other buttons - they call the same function (startLoading), but with different parameter between the parenthesis each time.

imgbtn2.onRelease = function() {
   infoField._visible = true;
   startLoading("picture2.jpg");
};
imgbtn3.onRelease = function() {
   infoField._visible = true;
   startLoading("picture3.jpg");
};

And here's the startLoading function. I will explain to you how it works and what it does.

The first thing you notice is the whichImage variable between the function's parenthesis. When the startLoading function is called with a click of one of the three buttons, a parameter is passed to it. It is either picture1.jpg, picture2.jpg or picture3.jpg, depending on which button has been clicked.

function startLoading(whichImage) {

This parameter is turned into a variable, whichImage, for later use inside the function. You can call it imageBeingLoaded, myImage or whatever you like - the only important thing is that you follow through with this name once you've chosen it.

Inside the function, the first line loads the JPG image into your SWF movie. It is done via the loadMovie method (a method is a function, a command).

The first parameter inside the parenthesis is the name of the image you want to load. This is the variable whichImage I have just mentioned before. Remember, this variable in reality holds the value passed to the function - picture1.jpg or some other, depending on the button that was pressed.

The second parameter is the Instance name of the movie clip into which the JPG image will load. It is the imageLoader movie clip you made at the outset of this tutorial.

   loadMovie(whichImage, "imageLoader");

Now, why is the first parameter written without quotation marks and the second with them? Because the first one is a variable. The value of the variable is different, depending on button pressed.

This technique has a big advantage: instead of putting this function on each button and repeating long lines of code, you just call the same function but pass it a different parameter depending on the button pressed. That is very, very practical, and you should strive to make all of your code like this - more modular. Cool, ain't it? ActionScript is really powerful and easy to learn, too!

OK, you have issued Flash the command to load the image. Now comes the preloader part. The first line starts the onEnterFrame event for the _root (main) timeline, by defining it as a function.

   _root.onEnterFrame = function() {

The onEnterFrame event is executed as many times per second as there are frames per second in your movie speed. This movie speed (fps) is defined in the Document Properties dialog (you can access this by selecting Modify > Document). It is therefore perfect for things that should run all the time, for example checking how much of the image has been loaded, like in this case here.

The three next lines create variables that store how much of the JPEG image has been loaded so far (infoLoaded), what is the total file size of the image (infoTotal) and what percentage of it has been loaded, in relation to its full size (percentage).

      infoLoaded = imageLoader.getBytesLoaded();
      infoTotal = imageLoader.getBytesTotal();
      percentage = Math.floor(infoLoaded/infoTotal*100);

If you want a detailed explanation of the inner workings of a preloader, and the methods included in the three lines above, check out my tutorial on basic preloader.

The next line simply tells that the text displayed in the text field called infoField should equal the value of the percentage variable, followed by a % sign. You can omit this sign if you want to.

      infoField.text = percentage+"%";

Now comes a conditional if statement. The basic mechanism of an if statement works like this: if the condition between the parenthesis is fulfilled, the code between the curly braces which follows will be executed. If the condition fails to check as true, the code that follows will be completely ignored and skipped.

So, in the case of the preloader you're building right now, it says that if the value of the variable percentage is greater than or equals 100 (percentage>=100), the code that comes after, in between the curly braces, will be executed. So, that means, once the JPG image has been fully loaded, that code will be executed.

      if (percentage>=100) {

This code, that executes if the condition turns out as being true, says to delete the onEnterFrame event.

         delete this.onEnterFrame;

This is good and you should always do that, because once the image has been loaded, there is no more sense in running the onEnterFrame event and unnecessarily putting a load on the user's CPU.

Next, you want to make invisible the text field showing the loading status. You certainly don't want the numbers to show over the image once it has been loaded. So you turn its _visible property to false.

         infoField._visible = false;

And, of course, you have to close all the curly braces that you have opened. So there are three of them at the end.

      }
   };
}

OK? That wraps up this tutorial. Hope you had fun!

Download the zipped source FLA file for the menu shown in this tutorial.