Document setup

Using loadmovie

Targets

Actionscript for targets

Levels

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.

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...

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.



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.  

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...

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.