Skip to Content

How to load an external movie into Flash

Author: Bill Trikojus

 
1

Document setup

 
2

Using loadmovie

 
3

Targets

 
4

Actionscript for targets

 
5

Levels

 
 
 
1

Document setup

 
 


"Should I make my site in separate scenes or should I break it up into smaller parts or what? Tell me now!!!!"

: )

OK I've had a couple of people ask me about this so I thought I would make a tutorial.

This is what you will be making -



You can download the source files for this tute here.

 
2

Using loadmovie

 
 


One of the major problems with many poorly designed flash sites is that you have to wait for the entire thing to download before you can view anything. Luckily, Flash comes with an action that lets you break your site up into little swf's and just load in different bits when needed. A common way of using this is to have the navigation and a welcome message load when the user connects to the site, and then when a button is clicked, the corresponding content is loaded. Using loadMovie with a Flash page is similar to using frames when building an HTML webpage. With frames, you divide up the webpage into sections, give each section a name and then load different pages into each. As you will see, loadMovie uses a similar concept.

UPDATE:
Since writing this tute, Flash has obtained the very handy feature of being able to also load external JPEG images using loadMovie. The process is exactly the same as with swfs, but be aware that Flash can only handle non-progressive JPGs (when you 'Save for Web' from photoshop you will have the option to save as a progressive jpg - make sure this box is not checked). Yet another update: Flash can now also load external PNG files which is great if you need to preserve transparency in your external images.

You can load an external movie(swf) into your webpage in 2 ways - into a level and into a target. When loading into a target, you have an mc (movieclip) on your stage with an instance name, for example, of "content". You would then give your button an action such as

//portfolioBut is the instance name of our button
portfolioBut.onRelease=function(){
//portfolio.swf is the name of our external swf file.
// content is the path to the mc instance that we want to load our external movie into
content.loadMovie ("portfolio.swf");
}

which would load the movie portfolio.swf into the content mc. Levels are similar to layers in a way. Something on level 5 will appear above something on level 1. When loading into levels, it is best to use the loadMovieNum action. I won't go too in depth regarding levels now as this will all become obvious as we go...

 
3

Targets

 
 


OK let's get into it. Load Flash and leave the stage as the default size (550X400) but change the frame rate to 21 and the background colour to dark grey. Draw a rectangle that 250 wide by 300 high. Select the rectangle and convert it to a movieclip - name it "content" and give it an instance name of "content". Make sure the registration point for this new symbol is set to the top left - this is very important! When Flash loads in an external movie, it takes the top-left point of the external movie and aligns it with the cross-hair of the mc you are loading it into.

Convert to symbol

Now position your content mc so that it is centered vertically and over the right hand side of the stage.

Save your movie as main.fla into a folder called "how to use loadMovie". Now make a new file. Set its stage size to 250 wide by 300 high (the same size as our content mc) but don't worry about the background colour or the frame rate. When an swf is loaded into another movie, it takes on the frame rate of the parent movie and the background becomes invisible. However, it would probably be best to set the background colour to the same dark grey that you used in your main.fla (this will help for choosing colours etc..). Type on to the stage the words "I just got loaded into a target.". Use Arial, 8pt, white. Make sure it is set to "static text" and check the box that says "Use device fonts". This means that if the user doesn't have the font that you have specified then it will default some other font that they do have installed (usually something like Arial). This has 2 advantages -

1 - Flash doesn't have to embed the font in your swf therefore reducing the file size

2 - Flash does not anti-alias the text which will improve the clarity of the type when using a small point size. Test the movie now and you will see the effect.

There are numerous disadvantages to using device fonts as well but I won't go into those now.

Ok save your new movie as content1.fla into the same folder as main.fla. Go into the publish settings for content1.fla (File/Publish settings) and uncheck the HTML box so that just the swf box is checked. Click on the Publish button then click OK. Go back to main.fla, make a new actions layer and put this action in the first frame -

content.loadMovie ("content1.swf");

Now test your movie.

See what happens? Flash loads in the external movie and aligns the top left corner of the stage in your external movie with the cross hair of your target clip. You will also notice that when the external movie loads in it replaces the box graphic that was inside your content mc.  

 
4

Actionscript for targets

 
 


OK now we can target our loaded movie and tell it to do whatever we want. Go to your content1.fla, make a new actions layer and put a stop action in the first frame. Create a keyframe in frame 2 of the actions layer and put a stop action in there as well. Click on frame 2 of the layer that has the text on it and create a keyframe. Change the text in frame 2 to "you just targeted me and it felt so good". Publish your movie (File/Publish). OK now go back to your main.fla. Name the layer that has the content clip on it "content" and create a new layer - name it buttons. OK click on the first frame of your buttons layer and draw a small rectangle. Select the rectangle, convert it to a button and name it button. Give your new button an instance name of "button1". Now place this action on frame 1 of the actions layer, underneath the loadMovie action that is already there.

button1.onRelease=function(){
content.gotoAndStop(2);
}

A couple of things to note here. You will notice that to target our external movie we just need to target the clip that it has been loaded into. The action you see there is actually a much better way of doing the tellTarget action that you have all used before (they do the same thing, it's just that tellTarget is Flash 4 scripting and can do some weird and unexpected things sometimes). I want you all to get in the habit of using this code rather than tellTarget - OK?

OK test your movie and click on your button.

OK back to content1.fla. Save your movie. Now choose "Save As" and save it as content2.fla (make sure you save it to the same folder as the other flas). OK in the content2.fla, change the text on frame 1 to "I am content 2 and I am better than content 1". Change the text on frame 2 to "something amusing". Save your movie and then publish it.

Back to main.fla. Option-drag your button on the stage to make a copy of it. Change the instance name of the new button to "button2". Add this action underneath the rest of your actions on frame 1 of the actions layer.

button2.onRelease=function(){
content.loadMovie ("content2.swf");
}

Test your movie and click on both the buttons. You will see that the original button still works and sends whatever movie is loaded to frame 2. Obviously, the second button loads the content2.swf you created which replaces whatever has been previously loaded into the content mc.

That's enough for loading into targets I think - experiment with it - see what happens if you load in movies that are bigger than your target etc...

 
5

Levels

 
 


Let's look at loading into levels. Make a new file and set the stage size and background colour to the same as your main.fla. Draw a rectangle 10 pixels high and the width of your stage and place it towards the bottom of the stage. Change the publish settings again so that just swf is selected and click ok. Save your movie to the same folder as the others and name it bar.fla. Publish the movie.

OK back to the main.fla. Click on the first frame in the actions layer and add this line of code -

loadMovieNum ("bar.swf", 1);

This loads the bar swf into level 1. Test your movie.

Important: Once you have loaded a movie into a level, your main movie (main.swf) automatically becomes _level0. Therefore if you want to move the main timeline around (with buttons placed in external movies) you can no longer target _root but must target _level0

eg

_level0.gotoAndStop("framelabel");

As you will soon see, we can also target any of our other levels (that have content loaded into them) in the same way. Another important thing to remember is that if you load another movie into level0 then everything loaded into levels above it will be removed. This is all probably a bit confusing at the moment but will become clearer the more you play with it.

Go back to bar.fla and create an actions layer - put stop actions in frame 1 and 2. Create a keyframe in frame 2 of the layer with the bar in it and change the bar's colour. Save your movie and then publish it.

Back to the main.fla. Option-drag 2 more copies of the button. Give them instance names of "button3" and "button4". Add this to the rest of your actions on the actions layer

button3.onRelease=function(){
_level1.gotoAndStop(2);
}
button4.onRelease=function(){
loadMovieNum ("content2.swf", 0);
}

Test your movie. You will see that the first action sends the bar.swf to the second frame and the second action loads the content2.swf into level0. You will notice that when you do this, main.swf is removed and so is everything else that has been previously loaded in.

It is extremely important when working with loadMovie to plan your site. Otherwise you will lose track of where everything is and targeting different parts of your webpage will be a misery.

You can download the source files for this tute here.

You can read more about levels, layers and depth here.

 

bulletBack


Share

Like this? Click a link below to share it...


Subscribe and Download

Subscribe to the Swinburne Faculty of Design Podcasts

Comments

2008-12-01: Michael Jones said:
I really appereciate this tute.
I like the layout, the simplicity of language and the level of detail..

Thanks

2008-12-19: lau said:
Can you do this with a preloader before de swf loads?

2008-12-19: Bill Trikojus said:
Sure. Check out How to build a flash website
--------
iStaySafe - Emergency App for iPhone


2008-12-24: Marc Fairstein said:
I'm putting together a website and have run into an issue that I figured I'd post up about hoping someone can help me out.

I'm trying to have a button in one flash file load a new swf within an other file.

SWF(A) contains the navigation while swf(B) houses the main content.
I'm trying to set the files up in a way that clicking on a navigation button within file (A) will then load a new swf file on a new level within file(B).

I've been able to do the same thing loading a new swf within the same file, although I'm running into issues trying to get a new swf to load in a separate swf file.
Anyone have any thoughts...

Thanks in advance!

2010-04-22: Cathy said:
I know this hasn't been posted on in ages but I really like how you explain your work.
I was hoping you could help me with an AS2 flash file I've been working on.

I have the 1st SWF with just a loader and the 2nd SWF loading into that but all other SWFs load into the 2nd SWF's loader... the 3rd SWF loads fine but the 4th SWF overlaps the 3rd SWF but the 3rd won't unload it plays both at the same time. ( I hope this isn't too complicated)

Also, I was hoping to have buttons in the 3rd SWF tell it to go back on the timeline and play the 2nd SWF... I can't seem to figure out the code to get it to go backwards to a previous SWF...

I don't know how the AS2 would code either of my problems...

PLEASE HELP!
Thanks for your time!

2011-07-11: enrico said:
Salve.
Vorrei caricare un'immagine esterna a flash.
L'immagine e' in una cartella fuori dal file .fla, so che c'e il comando loadmovie, mi sapreste spiegare come fare.
Grazie mille

2011-10-07: margaret said:
content.loadMovie ("content1.swf");

ERROR it is not a function, doesn't work
Action script 3.0?


2011-10-07: Bill Trikojus said:
This is a very old tute that uses AS1. Change your publish settings and it should work.
Bill
Best Apps for Teens
--------
App to track my kids


2012-02-16: Ray said:
Hi, many thanks for this GREAT tut - however, the movie that i have has some links inside that link to pages inside the ambedded movie (page1 - page2 etc) These do not work when i embedd the movie inside another swf file? Why is that please?

2012-02-16: Ray said:
PS: BTW, i have a "Page Flip" swf movie - the page flip works fine - its just the links do not work at all - i am using AS2.

Post a comment

Garbage posts and SPAM will be deleted.

* Name:
* Email: (will not be made public)
* Comment:
* Reply Notification: