You've had some practice loading external text dynamically, and loading external MP3 sounds. The process for loading external images and SWF files isn't a lot different in terms of principle: there's a master file that acts like a host, where buttons or movie clip symbols trigger code that locates the text file, or MP3 and places it within a container (in the case of text) or simply plays the music, in the case of an MP3 file.

Working with external images is pretty much like loading external text dynamically; you create a "container" for the image, and buttons that direct Flash to locate and display the appropriate image or SWF in the container.

(Remember to optimize any images you'll be using so they are the correct dimensions, and 72 pixels per inch.)

Then you create the buttons that the viewer will press to see the images or SWFs, and name each button instance.

Finally, you add the ActionScript to the first frame of the actions layer to load the images.

Let's do a quick exercise to practice this.
external files AS2

First, optimize 3 or 4 images in Photoshop or Fireworks. Remember to Save As so you don't overwrite the original (or use Save for Web and Devices), and select JPG as file type. You may see warnings to UNcheck the Progressive download, but that's no longer an issue, and in fact, you might save some file size if you do select Progressive.

Open a new Flash ActionScript 2 file and add two additional layers. Name the layers "container," "buttons," and "actions."

Save the file now, as you won't be able to test it unless you do. Place it in the same location/folder as the images you prepared.

Create an empty movie clip by pressing Command F8 / Ctrl F8. Name this movie clip "emptyClip" (no quotes). This will open the symbol's timeline. Don't put anything on this timeline—just exit out of edit mod e, back to the main timeline. You'll see the movie clip symbol in the Library, even though it doesn't have any visual content.
circle with a cross in it.

The cross represents the top left corner of the movie clip, and the files that load will be positioned by matching the top left corner of the file to this cross. Make sure you place this movie clip symbol where you want the top left corner of the images or SWFs to be in relation to the rest of the stage.

Select this empty movie clip and give it an instance name in the Properties panel (theClip is a good one).

Lock the "container" layer and select the first frame of the buttons layer. Create the graphic you want to use for buttons, and press F8 to turn it into a symbol. Remember to use Button for type.

Give this button an instance name that's fairly generic, like button1, in the Properties panel.
Option-drag / Alt-drag two or three more instances of the button on the stage, and change the instance names to button2, button3, and so on in the Properties panel.

Lock the buttons layer and highlight the first frame of the actions layer (which should also be locked to prevent placing objects on that layer).

Open the Actions pane and add this code, replacing the names of the images with YOUR image names, and the instance names of the buttons with yours, and so on:

loadMovie("pixname1.jpg", theClip);

myBtn1.onRelease = function(){
loadMovie("pixname2.jpg", theClip);
};
myBtn2.onRelease = function(){
loadMovie("pixname3.jpg", theClip);
};
myBtn3.onRelease = function(){
loadMovie("pixname4.jpg", theClip);
}

In the first line, the loadMovie piece is the keyword that looks for an external file—in this case, the "pixname1.jpg" file. Within the parentheses, you place the name of the image you want to load in quotes, since it's a string, followed by the instance name of the empty movie clip symbol. Putting it like this, with no reference to a button instance, will load the image as soon as the SWF starts playing.

The next lines are identical, except you first refer to the button instance name, and use dot notation to add the event (onRelease) as a function.

Save your movie again (in the same folder/location as the images (remember you had to do that with loading external text and MP3s as well)), and test it. Nice!

Loading external SWF files is absolutely identical to loading images; just substitute the image names (photo.jpg) with the name of the SWF file you want to play (flashfile.swf). Remember to put it in quotes, since it's a string. And remember to save the "master" Flash file in the same folder as the SWF files you are using.

EXTERNAL FILES AS3

Assemble the JPGs and/or SWFs you plan to use, and place them in the same folder; you'll recall that when loading external files, it's a lot easier to manage things when they are all saved to the same location.

Start with a new Flash AS3 file, and set the stage size to something larger than the default; 800 by 500 is a reasonable size.

Save this file in the same folder where you've placed the image files. It would make sense to call it "master.fla" or something similar so you remember that this will be the one you publish in the end.

Once you have a layout you like, develop any background elements and graphics on layer 1.
You'll need to create a button symbol with three or four instances on the stage; you'll use them to load your images.

Give each button an instance name in the Properties panel, then lock the layer.
Add a new layer for actions and lock it. You will need to create a variable that defines a new URLRequest, and then variables for each image you want to load. As you develop the code, it makes sense to name the loader variables either sequentially, or to reflect the content that the loader will control; you decide (we're using generic variable names in this exercise but remember to be consistent in whatever style you use).

Highlight the first frame in the actions layer and open the Actions pane. Here's the code you need to load one image:

//set Flash up to load an external file
var imageRequest:URLRequest = new URLRequest();

//create the "space" (much like theClip in AS2) where the image will display

var myLoader1:Loader = new Loader();

//set the location of the image; use guides to determine the correct x and y location for your image and change the numbers accordingly

myLoader1.x = 250;
myLoader1.y = 50;

//define the function that will load your image

function loadOne(event:MouseEvent):void {

myLoader1.load(new URLRequest("gorilla.jpg"));

addChild(myLoader1);
}

//set up the event listener for the button, so when it's pressed, your image pops into place!
pix1_btn.addEventListener(MouseEvent.CLICK, loadOne);

Save your file and test your movie.

To load the other images, just add new "myLoader" variables (here, we used myLoader1, myLoader2, etc.), new functions for each loader (we used loadOne, loadTwo, etc.), and a button listener for each function (pix1_btn, pix2_btn, and so on).

When you are writing the code, feel free to delete the comments if you find them distracting and modify it to load all your images.

Note that because we have defined a separate loader variable, function, and listener for each image, they can all appear at the same time on stage, depending on their locations by changing the imageLoader X and Y properties. Nice.

Save your file once you have it all working as you want.

If you wanted something to load immediately, without the user having to press a button, try this code above what you already have:

var firstImage:URLRequest = new URLRequest("gorilla.jpg");

var imageLoader:Loader = new Loader();

imageLoader.x = 250;
imageLoader.y = 50;

imageLoader.load(firstImage);

addChild(imageLoader);

Again, this uses the X and Y properties to position the image where you want it; change those numbers to reflect your layout needs.

Easy enough! Don't forget to save your file.

While you can use a container to hold external images or SWFs (published Flash files), you can also layer them on top of the "master" file, like clear acetate sheets with content. In that case, content on the master stage would be covered by any content in the loaded file. This approach uses the loadMovieNum function, and along with what file you want to load and where, you must also specify the level on which you want the SWF to appear.

You are probably very comfortable working with layers in Flash at this point, since the concept of layers in Flash is essentially the same as using layers in InDesign, Photoshop and Illustrator.

There is another aspect to Flash, however, called levels, and this is where loading one SWF on top of another SWF comes in; one is on a higher level than the other, and is therefore in front, or on top of the other. The "master" SWF has a level of 0 automatically. So you can load multiple files on top of the master simply by specifying higher numbers in the code.

The one caveat to using this technique, however, is that the stage size of all the FLA files (and subsequent SWFs) should be the same. As you saw when loading external JPGs using AS2, the top left corner of the movie clip container was matched with the top left corner of the photo. And in AS3, the top left of the SWF was matched with the top left of the master.

With loadMovieNum, the top left corner of each SWF file will always be placed at the top left of the "master," or host, file—more like AS3.

The process for using loadMovieNum is similar to loading a JPG, but there are some minor prep issues, and codes, that need to be modified.

First off, if you want the files that load on top of the "master" to have a solid color for a background, you must create that as a graphic element on the bottom layer of the file(s) that will load; Flash treats the stage color of a loaded SWF as transparent.

Second, since the stage is transparent, anything in the "master" that isn't covered by actual content on a loaded SWF will show. This is good, as you can place all the buttons, including sound controls, on the master FLA and design the other files to allow them to show and function.

Third, as with loading a JPG automatically in the first frame, you will probably want to load an "intro" SWF immediately, and then load others using buttons.

A primary difference is that you can load multiple SWFs all at once by using different level numbers in the code. You can't do that when using a movie clip "container" unless you create multiple containers and they don't overlap.

Here are the steps, without going into too much detail:

Plan your project! Determine a stage size and make sure all the Flash files you create use the same dimensions, FPS rate, and AS version.

Create a storyboard that defines the design elements that will be consistent throughout—those should all be placed in the "master" FLA—and the area(s) that will change, depending on which SWF is loaded.

Develop a grid using guides that you can recreate in each file to ensure things will line up appropriately.

Save everything in the same folder to keep things organized and to ensure Flash can find the files you want to load.

Create the "master" FLA, and place everything that will remain constant on this timeline; banner/logo, buttons, sound controls, other graphics, and so on.

Then create a separate FLA file for each "page" in the site or presentation. You do not need any HTML files for these pages, as they are linked to the "master" HTML file. You will need SWF files, however, which you can generate easily by testing each movie. Remember to retest any time you make a change so the SWF is updated accordingly.

In the "master" file, on the first frame of the actions layer, you will want to load the "intro" SWF. This is the AS2 code:

loadMovieNum("introfile.swf", 10);

Note that instead of naming a movie clip container, you are using a level number (10). If you want one SWF to disappear when another one loads, use the same level number and one replaces the other automatically. If you want several SWFs to load at the same time, use a different level number for each one. Working in increments of 5 or 10 is good, in case you need to sneak an additional SWF between two existing ones.

The AS2 code for loading other SWFs, using the buttons on your "master" FLA is this:

btnName.onRelease = function () {
loadMovieNum("swfname.swf", 10);
}

"loadMovieNum" in AS3

While there is no more loadMovieNum in AS3, there are other ways to think about loading external files.

Create a new AS3 file to use as the "master." Develop the layout, graphics, and buttons you'll need.

When naming the button instances, use the same name as the SWF you want to load. For instance, if the SWF is called main.swf, then name the button "main" (no quotes, and no SWF extension). Using the same names for both SWFs and buttons saves a lot of coding, as you'll see.

Open the Actions pane and highlight the keyframe in the actions layer where you want the code.

In the Actions pane, type this code:

var myLoader:Loader = new Loader();
myLoader.load(new URLRequest("main.swf"));

addChild(myLoader);

function btnClick(event:MouseEvent):void {
event.target.enabled = false;
this.myLoader.load(new URLRequest(event.target.name + ".swf"));
myLoader.x = 50;
myLoader.y = 50
}

swf1.addEventListener(MouseEvent.CLICK, btnClick);

swf2.addEventListener(MouseEvent.CLICK, btnClick);

swf3.addEventListener(MouseEvent.CLICK, btnClick);

swf4.addEventListener(MouseEvent.CLICK, btnClick);

Here's how it works.

In the first part, you are creating the "container" where the loaded SWF will be placed—and in this example, simultaneously loading a SWF named "main.swf" that will play automatically.
Then you are defining a function that will be used when a button is pressed. Note that this is a very generic function. By naming the buttons the same as the SWFs, we can shortcut the need for having a function for each button.

Within the function, we specify which SWF to load, depending on which button is pressed—note this shortcut in line 2 of the function: (new URLRequest(event.target.name + ".swf")); What this is saying is that whenever a button is pressed, check the instance name of that button and match it with a SWF with the same name + ".swf" – that is, the same name plus an extension of .swf

This function also places the SWF in a specific place on the stage using the myLoader variable; the X and Y properties position the top left corner of the SWF.

The third chunk of code creates the event listener for each button.

Another way to approach this would be to eliminate the X and Y position code.

In that case, SWF you wanted to load would have to have the same stage size as the master, and the content would be positioned relative to the master layout.

If you want to try it this way, start with a new AS3 file.

Add the content you want in this new FLA, and use the guides from the master to position it.

Save this file in the same folder with the master, and then test it to generate the SWF that you'll use in the master.

Flip back to the master FLA. Time to add the code.

Highlight the first frame of the actions layer in the master FLA and open the actions pane. Add this code (you'll no doubt recognize some of it!):

var swfLoader1:Loader = new Loader();
swfLoader1.x=140;
swfLoader1.y=50;

var swfLoader2:Loader = new Loader();
swfLoader2.x=410;
swfLoader2.y=50;

var movieName:String = new String();

addChild(swfLoader1);
addChild(swfLoader2);

function movieLoad1(event:MouseEvent):void {
movieName="swf1.swf";
swfLoader1.load(new URLRequest(movieName));
}
function movieLoad2(event:MouseEvent):void {
movieName="swf2.swf";
swfLoader1.load(new URLRequest(movieName));
}

function movieLoad3(event:MouseEvent):void {
movieName="swf3.swf";
swfLoader2.load(new URLRequest(movieName));
}

function movieLoad4(event:MouseEvent):void {
movieName="swf4.swf";
swfLoader2.load(new URLRequest(movieName));
}

swf1_btn.addEventListener(MouseEvent.CLICK, movieLoad1);
swf2_btn.addEventListener(MouseEvent.CLICK, movieLoad2);
swf3_btn.addEventListener(MouseEvent.CLICK, movieLoad3);
swf4_btn.addEventListener(MouseEvent.CLICK, movieLoad4);

Take a minute to look at this code:

First, we created two new variables for the SWFs (called swfLoader1, and swfLoader2).

Directly under them, we added the X and Y positions where the top left corner should be placed when the file is loaded.

We then defined 2 separate variables for the SWFs. Since they have the same stage dimensions as the master, we don't have to specify a position for the upper left corner.

The third set of variables creates the "container" we can refer to within the functions we need.

The addChild(); code tells Flash what to load (in the parentheses); one for each of the loaders.

Then we defined a function to load the SWF—it's identical to the functions we defined previously to load the JPG images, except we've created new function names, and referred to our new variables.

Finally, we added the swf1_btn listener to invoke the movieLoad1 function. Ditto for the rest of the functions and buttons.

That about wraps up the basics of Flash. There are a lot more very cool/fun things you can do using code, and I hope to create a more "intermediate" document for those. Stay tuned!

back to top