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 SWF movie,
- 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. I have made a tutorial which explains how to create an entire dynamic JPEG gallery with preloaders, that works across all major browsers!
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.
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.
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 JPEG loader shown in this tutorial.
If we want the images to load only once, and keep them loaded when we go back, can that be possible?
hi luka i want to add some more pics into this header.swf which is runing on my site pls help i dont have flash
Hi Luka, thank you so much for publishing this excellent tutorial. I got more interested to work in Flash after seeing this tutorial.
I need a help from you, I wish to create the Flash movie as exactly created in http://www.atpworldtour.com to my site http://www.vsupportu.com
I know this is not an easy process to explain here, I would be really happy if you can just guide me the possible ways to achieve this. May be I require an idea to do this.. Thanks in advance..
Hi Luka, thank you so much for publishing this excellent tutorial.
But how to auto control the function execution by the interval timer and not only by the button-clicked ?
Thanks in advance..
[…] being said I found some leads for future research if I ever I need to dynamically load some flash (lead1 & lead2). Here is a simple example I wrote of displaying a bitmap on […]
Thank you soo … much … Needed this … helped me alot of hazzle with the loading time …
your guide is very nice. i can understand from your guide
thanks
Hi Luka
Great Tutorial, really easy to understand. i have one question, maybe you can help…. the flash movie works fine on my pc but when i upload it and try and view, all it does is shows the flash container with teh buttons, when you click on a button, no image appears. any ideas, would help alot.
Cheers
HI LUKA,
GREAT TUTORIAL AND I ALSO TRYING TO MAKE THE SAME FOR MY PERSONAL PHOTO GALLERY BUT HAVE STUCK. THE PROBLEM IS I WANT TO MAKE THE PHOTOGRAPHS APPEAR AND DISAPPEAR WITH THE NAME AND THENAME SHOULD BE WRITTEN IN THE INPUT BOX INSTEAD OF YOUR 1 2 3 DYNAMIC BOXES
FOR EXAMPLE IF I WRITE DAVID AND DAVID PHOTOGRAPH SHOULD APPEAR I HAVE DONE IT BY NUMBERING BUT I WANT TO DO IT WITH THE NAMES
WOULD U PLEASE HELP IN THIS REGARD
How great is this? Now I don’t have to create new flash slide shows for each of my photo displays. I can update these presentations easily and allow my clients to add images to their sites. Thanks heaps. I as with many others appreciate the time it takes to supply such information.
Keep up the good work.
John
I got Nan Poblem in Mozilla and Chrome….Work Correctly in IE 8
i’ve using flash player version 10
Thankyou for this tutorial
I found this tutorial very useful, thanks!
However, I’m struggling with how to make the images themselves clickable so they can each open up a different popUp browser window with an enlargement of the image.
Or, if this isn’t possible, I’d be happy to add another button ("enlerge") who’s function changes according to which image is loaded.
I hope that makes sense!
Can you help me with this?
sir can i ask something?sir can you teach me how to link picture from other picture..lets say when i click thr mouse picture it will show the monitor picture ..i hope you can help me thnx in advance
percentage loading is not working in firefox mozilla can u help me.
I am a Special Edn teacher who is trying to learn Flash 8 on my own. Your seciotn on ActionScript Explained has helped me tremendously – makes me understand simple basic actionscript that I have no previous knowledge of. I truly appreciate your website. Thanks.
Thanks U rock!
Very clear yet complete tutorial, thanks for the good work! 🙂
thanks ! Is it possible to animate the photos automatically from one image to another? In this file, you have to click to load the images. Is there a way for the 1st image to load automatically, then it’ll animate to the 2nd image, and then 3rd image? Thanks
hey Luka I’m just designing a website fro my friends wedding photos and while looking for useful scripts i stumbled upon yours it all works like a charm a part of the preloader i copied it exactly from you’re code BTW u forgot to close some {} but i found it 🙂 anyway the issue is that i in the infoField text field i only get the % sign no actual percentage data it all looks god on paper but somehow it doesn’t work tested ie8 Mozilla Firefox 3,6 its all the same
great tutorial but it didn’t work in vb6.0.:) do you have the other way to load it in vb?thanks.
Thank you sir…
I am a beginner in AS.
This was great useful for me to optimize my site
can you help me to achieve transitions between images in this file.
Hi, just wanna ask the code so that once the image was displayed, on a mouse click it will disappear and load another image again. Thanks
Hello, rather than having individual buttons for each image is there a way I code it so that it loads "image1[+1].jpg" or something in order to load the next file i.e. image2
Hello again, a second question; I was wondering if anyone knew the code needed in order to get "it" to display an error message if an image fails to load. Rather than just having a blank space I thought it would be nice if it said "no image" or something, there is another function I wanted it to do in the instance of a failed URL load so if you could just tell me the code to link the instance of an error to a function, I would be extremely gratefull.
Cheers
thank you you solved my problem very well done! (if you wanna see, the site will be online in a few days and you can find the clip with your flash function (i modified) in HET PRODUCT -> DEMO
Thanks
thank you:)
see… this was reeeeallly helpful for me but i have a little problem. the loading percentage is not visible, it has a Nan% showing up in it’s place. what did I get wrong? can you help?
thxx
Thank sir…
This was great useful for me.
thank you
this was great useful for me
Thank you very much for the tutorial, everything works very well. But now I need to convert my AS2 to AS3. How would you do that with empty movie clip placeholder?
hello there….
Many thanks for the tutorial..it helps alot, mainly when we are begginers.
I have used this tutorial but the problem is that the first image does not appear automaticcaly …i would like that to happen in my project..can you please let me know the codes for that???
Very much appreciated
Thanx for this tetorial I think its very helpfull
Thanks everything work fine.
What I would like to know is how do I load the first image by default? When loading the .swf first appear like a blank white box with only my buttons visible.
If I click any buttons it work, but I need it to load an image by default.
Thanks I was sitting on this point for a while and was experimentating with my flash program. However no matter what I tried, I could not load the external JPGs into the SWF movie. Thanks after going through the tutorial it is working now.
[…] Loading JPEG images in Flash dynamically – learn it the easy way … Oct 14, 2008 … You can see that in the image below. Leaving the Progressive option unchecked during JPG export in … […]
[…] Loading JPEG images in Flash dynamically – learn it the easy way … Oct 14, 2008 … Learn how to load external JPG images into your Flash site with this easy lesson . […]
thank you! is very very useful