Flash CS3 introduces many new and exciting features and delivers an entirely new experience in Flash dev.
Adobe Flash CS3
Flash MX 2004 - Load Movies with Targets
Streamline your web dev with a collection of Adobe software including the new Flash CS3 Pro.
Adobe Creative Suite 3
Adobe Creative Suite 3
This tutorial was originally intended to be for Flash MX (6), but I decided to go ahead and make it for MX 2004. We're going to mock up a "website" in this tutorial and the movies will load automatically when the main movie loads.
If down the road you want to use buttons instead, all the same things I explain will apply and you can just put the provided Actionscript in buttons instead of the main timeline. For now, we won't use buttons.
First, create a folder on your hard drive because we're going to be creating multiple files and we will save everything in this folder.
After that, let's setup our main stage. In the Properties Inspector (if you don't see it, Window > Properties) set the Size of the stage to 430 x 230. In order to explain easier, I'm going to specify the colors for this project. Make the Background color of your movie #000099.
Now create a new layer on your timeline and name it Actions. Select Frame 1 of this layer and hit F9 to bring up your Actions Panel. Instead of manually creating the empty movie clips that will hold our loaded movies, we're going to use a function called createEmptyMovieClip() to do so. Although we're using targets instead of levels to achieve this, we still need to setup our empty clips on their own levels so they don't interfere with each other.
For those that don't understand levels, think of them as levels or floors of a building. Level 0 or _root would be the ground floor, Level 1 would be the first floor, Level 2 the second floor and so on. Anything loaded into a level will replace anything that is already on that level. So if you have a movie clip on Level 1, and you load another movie clip into Level 1, it replace the original movie clip.
Now the Actionscript. Paste the following into your Actions Panel:
createEmptyMovieClip("menu_holder", 1);
menu_holder._x = 10;
menu_holder._y = 10;
menu_holder.loadMovie("menu.swf");
createEmptyMovieClip("content_holder", 2);
content_holder._x = 120;
content_holder._y = 10;
content_holder.loadMovie("content.swf");
Now a little explaining.
createEmptyMovieClip("menu_holder", 1);
This line, by reasoning, creates the empty movie clip that will hold the loaded movie and assigns it an Instance Name and what Level it's supposed to load in.
menu_holder._x = 10;
menu_holder._y = 10;
These two lines specify where this movie clip will be placed, it's coordinates, or position, on the stage. _x determines the distance from the left of the movie and _ determines the distance from the top of the movie. 0,0 is the very, upper left corner. menu_holder will be placed near the upper left corner, 10 pixels from the top and 10 pixels from the left, content_holder will be placed 10 pixels from the top and 120 pixels from the left, which will make it sit to the right of menu_holder with a few pixels gap in between the two loaded movies.
menu_holder.loadMovie("menu.swf");
This line refers to the empty clip and uses the loadMovie function to load in the specfic movie for that target.
Well that should do it for this movie. Save it to the folder you created earlier, name it mainmovie and Publish your movie as well. After doing so you can close it out and we'll get started on creating the menu and content movies that will load into this one.
Create a new document. Set the size of this movie to 100 x 200. The background color does not matter. When loading movies as targets, the background of the loaded movie is transparent so that you can still see the main movie. If it did otherwise it would just defeat the purpose of this effect. For this tutorial we're going to use a background but we'll need to create it which isn't hard at all. On Frame 1 of the timeline, use your Rectangle tool (turn the stroke color off) and draw out a rectangle to the size of the stage. Now you have your background and that's pretty much it for this movie. You can expand on it later if you like. So save this movie in the same folder with the name of menu and Publish it. Close it out and we'll make the last movie we need.
Create a new document. Set the size of this movie to 300 x 300. Again, the background color does not matter but we need to create one for this movie as well. So, on Frame 1 of the timeline, use your Rectangle tool (turn the stroke color off) and draw out a rectangle to the size of the stage. That's pretty much it for this movie too. You can expand on this one later as well if you like. Save this movie in the same folder with the name of content and then Publish it.
You should end up with 3 project files, mainmovie.fla, menu.fla and content.fla. You should have 3 movies, mainmovie.swf, menu.swf and content.swf. You don't need menu.html and content.html but you will need mainmovie.html. Go into the folder with all your files and launch mainmovie.html which should bring up your main movie and load menu.swf on the left and content.swf on the right. And that's it, you've just learned how to load movies into targets.
Working Example
If down the road you want to use buttons instead, all the same things I explain will apply and you can just put the provided Actionscript in buttons instead of the main timeline. For now, we won't use buttons.
First, create a folder on your hard drive because we're going to be creating multiple files and we will save everything in this folder.
After that, let's setup our main stage. In the Properties Inspector (if you don't see it, Window > Properties) set the Size of the stage to 430 x 230. In order to explain easier, I'm going to specify the colors for this project. Make the Background color of your movie #000099.
Now create a new layer on your timeline and name it Actions. Select Frame 1 of this layer and hit F9 to bring up your Actions Panel. Instead of manually creating the empty movie clips that will hold our loaded movies, we're going to use a function called createEmptyMovieClip() to do so. Although we're using targets instead of levels to achieve this, we still need to setup our empty clips on their own levels so they don't interfere with each other.
For those that don't understand levels, think of them as levels or floors of a building. Level 0 or _root would be the ground floor, Level 1 would be the first floor, Level 2 the second floor and so on. Anything loaded into a level will replace anything that is already on that level. So if you have a movie clip on Level 1, and you load another movie clip into Level 1, it replace the original movie clip.
Now the Actionscript. Paste the following into your Actions Panel:
createEmptyMovieClip("menu_holder", 1);
menu_holder._x = 10;
menu_holder._y = 10;
menu_holder.loadMovie("menu.swf");
createEmptyMovieClip("content_holder", 2);
content_holder._x = 120;
content_holder._y = 10;
content_holder.loadMovie("content.swf");
Now a little explaining.
createEmptyMovieClip("menu_holder", 1);
This line, by reasoning, creates the empty movie clip that will hold the loaded movie and assigns it an Instance Name and what Level it's supposed to load in.
menu_holder._x = 10;
menu_holder._y = 10;
These two lines specify where this movie clip will be placed, it's coordinates, or position, on the stage. _x determines the distance from the left of the movie and _ determines the distance from the top of the movie. 0,0 is the very, upper left corner. menu_holder will be placed near the upper left corner, 10 pixels from the top and 10 pixels from the left, content_holder will be placed 10 pixels from the top and 120 pixels from the left, which will make it sit to the right of menu_holder with a few pixels gap in between the two loaded movies.
menu_holder.loadMovie("menu.swf");
This line refers to the empty clip and uses the loadMovie function to load in the specfic movie for that target.
Well that should do it for this movie. Save it to the folder you created earlier, name it mainmovie and Publish your movie as well. After doing so you can close it out and we'll get started on creating the menu and content movies that will load into this one.
Create a new document. Set the size of this movie to 100 x 200. The background color does not matter. When loading movies as targets, the background of the loaded movie is transparent so that you can still see the main movie. If it did otherwise it would just defeat the purpose of this effect. For this tutorial we're going to use a background but we'll need to create it which isn't hard at all. On Frame 1 of the timeline, use your Rectangle tool (turn the stroke color off) and draw out a rectangle to the size of the stage. Now you have your background and that's pretty much it for this movie. You can expand on it later if you like. So save this movie in the same folder with the name of menu and Publish it. Close it out and we'll make the last movie we need.
Create a new document. Set the size of this movie to 300 x 300. Again, the background color does not matter but we need to create one for this movie as well. So, on Frame 1 of the timeline, use your Rectangle tool (turn the stroke color off) and draw out a rectangle to the size of the stage. That's pretty much it for this movie too. You can expand on this one later as well if you like. Save this movie in the same folder with the name of content and then Publish it.
You should end up with 3 project files, mainmovie.fla, menu.fla and content.fla. You should have 3 movies, mainmovie.swf, menu.swf and content.swf. You don't need menu.html and content.html but you will need mainmovie.html. Go into the folder with all your files and launch mainmovie.html which should bring up your main movie and load menu.swf on the left and content.swf on the right. And that's it, you've just learned how to load movies into targets.
Working Example