Flash External Images

External Images or SWF files in Flash - Download Zip

This tutorial teaches you how to load in external jpeg files or swf files into flash. Here are a few things you should know first.
1) Flash only accepts non progressive jpeg files. Make sure to uncheck that box when you save them out
2) Flash displays them at 100% so make sure to size your files before bringing them into flash or add a mask in flash to help control image size.
3) Save all the time. It's much easier to hit save than to re-do the entire thing. SAVE OFTEN!

Step 1: Setting Up - Create a new flash document and save it. Now open your library and add two movie clips. Name them ImageBorderMC and ImageMC. Also make sure to have a few images or swf files available for you to use.

Step 2: Control - Go back to the main stage of your scene and add in a button. Make it however you want and call it button1. Now click on the button, hit F9 and add this code

on (release) {
_root.importImage = "twistermc.jpg";
_root.changeImage = "yes";
}

What we are doing is creating a variable called importImage on the root level. When the button is clicked it then assigns an image name, twistermc.jpg, to importImage. You can now add more instances of that button or create a new button for each image you want to load. I have three external images I want to load so I'll make three buttons on the stage. Make sure to change the actions to the new image name for each new button.

Step 3 : Image Layout - Lets open the ImageMC and draw a box the same size as the images we want to load in. Mine are 89x89 so I'll create a box that big. Now I have a placeholder. Next we need to align that box to the stage. Open the align options and click on Align Left Edge and Align Top Edge

Open ImageBorderMC and add ImageMC into that movie clip. Now go back to the main stage and add ImageBorderMC to the stage. Move ImageBorderMC to the location you'd like the image to appear.

2 Things to Remember
a) ImageMC will only contain the image aligned to the left and top edges. No matter what you do in this movie clip it will always look exactly the same.
b) ImageBorderMC is the movie clip that we add any of the 'pretty' elements. Borders, drop shadows, alphas, whatever. Whatever you do in this movie clip with appear around all images.

Step 4 : Load Images Actions- Now that we have the looks setup we need to add in the actions to load the image. There are two separate things we must do. The first is to open up ImageMC, add a new layer for actions, and add this code to frame one.

this.loadMovie("images/"+_root.importImage);

My images are in an images directory to keep my folders clean. If yours are not than you just need to have this.loadMovie(_root.importImage);

Go back to ImageBorderMC add an actions layer, on frame 3 add a key frame and add this code

if (_root.changeImage == "yes") {
_root.changeImage = "no";
} else {
gotoAndPlay(2);
}

On frame 4 add a blank key frame to your actions layer. Then add a frame (F5) at frame 3 of your other layers. The actions layer should be one frame longer than the other frames.

What we did in frame 1 of ImageMC was to load the image. In ImageBorderMC frame three checks to see if we need to load a new image. Every time we click on a button we said '_root.changeImage == "yes"' which tells flash to load a new image.

Step 5 : Done! - Well that's basically it. Now if you test your movie it will work but you will get an error. This is because we didn't give the variable _root.importImage a default value. So i suppose we should do that back at frame one of the main scene.

_root.importImage = "twistermc.jpg";

Now you are free to go and make it look pretty. Have fun.

-Thomas