Untitled Document

Loading External Content: Using loadMovie

When you have multiple movies and images embedded in your Flash movie, it can quickly grow in size and be difficult to maintain quick download times. One solution is to keep heavy content outside of the main Flash movie and only retrieve it when the viewer requests to see it. The ActionScript command loadMovie() lets you do this. The command loads an external Flash movie (a SWF file) into another Flash movie. By keeping content separate from the interface, you also make your project more modular, which makes editing and swapping out individual pieces easier.

Create the Titles and Graphics
1. Select the Text tool and create the title for your Flash project. Be sure to select Static text in the Property Inspector (instead of Dynamic or Input text). Create additional borders and other design elements. Rename this layer "Graphics".
Create the Buttons
2. Insert a new layer and rename it "Buttons".
3. Select the Text tool again and click on the stage to begin typing the title of your first button. When you're finished, select the Selection tool (the black arrow tool) to exit the Text tool. Choose Modify>Convert to Symbol. Enter a name for your Button symbol, select Button, and click OK.
4. Now you will need to edit your new Button symbol in order to define how your button looks when a mouse cursor interacts with it. Enter symbol-editing mode by doing any one of the following: -Double-click on the item or preview window in the Library -Choose Edit>Edit symbols -On the top right-hand corner of your Flash document, click on the Edit Symbols buttons.
5. You will see four distinct states on the timeline of your Button symbol: UP, OVER, DOWN, and HIT. The UP state shows what the button looks like when the mouse cursor is not interacting with it.
6. Choose Insert>Timeline>Keyframe. A new keyframe is created in the next frame, which is the OVER state, and the contents of the previous keyframe is copied into it. Select the text in the OVER state and change its color in the Property Inspector. The OVER state shows what the button looks like when the mouse cursor hovers over it.
7. Choose Insert>Timeline>Keyframe. A new keyframe is created in the next frame, which is the DOWN state, and the contents of the previous keyframe is copied into it. Select the text in the DOWN state and change its color in the Property Inspector. The DOWN state shows what the button looks like when the mouse button is depressed over the button.
8. Choose Insert>Timeline>Keyframe one more time. A new keyframe is created in the last frame, which is the HIT state, and the contents of the previous keyframe is copied into it. The HIT state indicates the area that is "hot", or the clickable area of the button. Since you'll want the entire area around the text to be "hot" (responsive to a button click), select the Rectangle tool and draw a filled box to cover the text. The color of your rectangle doesn't matter because it is only indicating the clickable area of your button. The viewer will never see the HIT keyframe of your button. The filled rectangle will sit under your text because Flash will always display text over shapes unless they are separated on different layers.
9. Return to the main movie timeline by clicking on the "Scene 1" button on the upper left-hand side of your Timeline. Create additional Button symbols by repeating steps 3-9.
Name Your Buttons
10. Return to the main movie timeline. Select your first button on the stage. In the Property Inspector, enter a name in the <Instance Name> field. By naming a button, you can identify it with ActionScript and attach code to it. Select the other buttons on the stage and give them unique names. Note that you must follow a few rules on naming: -Names must not contain spaces or special characters. Underscores are okay. -Names must not begin with a number. -You can not use names that Flash uses as special commands in the ActionScript language itself (such as this, new, Sound, Math, etc.), so make your names unique. -Add the suffix, _btn, to your name to identify it as a button. -Be mindful of upper- and lower-cases. Note also that the name of your button on the stage (called an instance) is different from the name of the button symbol in your Library (created in step 12). The name of the symbol in your Library is merely an organizational aid. The name you give your instance in the Property inspector is the one that ActionScript will use to identify it.
Create the Movie Clip Placeholder
11. Each button will show the viewer different content by loading in an external Flash movie (an SWF file). These external SWF files will load into a movie clip, which you must now create. The movie clip is a special Flash symbol that has its own independent timeline. In this example, you will create a movie clip to act as a placeholder for the external SWF files.
12. Insert a new layer, and rename it "Placeholder".
13. Choose Insert>New Symbol. Enter a name for your new movie clip symbol and choose Movie Clip. Click on the upper left-hand corner of the set of tiny boxes to set the Registration point of your new symbol to the upper-left. Click OK. You will enter symbol editing mode for your new movie clip symbol.
14. At this point, you have two choices. You can either exit symbol editing mode immediately, leaving your new movie clip symbol empty. Or, you can import or create graphics inside of your movie clip symbol so your placeholder will have an initial visual element before the external content replaces it. For this example, import a photo into your movie clip symbol, making sure that the top-left corner aligns with the tiny cross-hairs on the stage which represent the registration point. Also, be sure that your photo is the same size as your external SWF content. This photo is 320x240 pixels.
15. Return to the main movie timeline. Drag an instance of your new movie clip symbol from the Library onto the stage. If you chose not to put anything in your movie clip symbol, then your instance on the stage will be represented by a simple white circle.
15. Select the movie clip instance that is on your stage. In the Property Inspector, enter a name in the <Instance Name> field.
Create the External Content
16. Open a new Flash document. Change the stage size in the Property Inspector to exactly fit your external content. In this example, we will import video that is 320x240 pixels.
17. Choose File>Import>Import to Stage and select the first video. In the Video Import Wizard dialogue box that opens, choose to embed the video. See the tutorial for more information on embedding videos in Flash.
18. Place the video so that it covers the entire stage.
19. Insert a new layer and rename it, "Actionscript".
20. Select the last frame in the "Actionscript" layer and choose Insert>Timeline>Keyframe.
21. Open the Actions panel by choosing Window>Actions. Add a stop(); action.
22. Save your Flash movie and choose Control>Test Movie in order to export an SWF file.
23. Create additional external Flash content by repeating steps 16-22.
Assign ActionScript to your Buttons
24. Return to your first Flash movie that contains your buttons and movie clip placeholder. Insert a new layer and rename it "Actionscript".
25. Select the first keyframe of the "Actionscript" layer and open the Actions panel. Enter the following code: goodgirl_btn.onRelease=function(){ placeholder_mc.loadMovie("lucy1.swf"); } where goodgirl_btn is the name of your first button, placeholder_mc is the name of the movie clip placeholder, and "lucy1.swf" is the name of the first external SWF file. Be sure to include the quotation marks around the name of the SWF file. The loadMovie command loads a specific SWF file into your Flash movie and puts it into a movie clip, completely replacing its content. The top-left corner of the external SWF will always line up with the movie clip's registration point. Enter additional Actionscript code for each button that you have on the stage.
25. Save your Flash file in the same folder as your external SWF files and publish.
26. The final Flash result. Download the FLA file here. Download the individual, external Flash movies, lucy1.fla, lucy2.fla, and lucy3.fla. For the individual Quicktime movies, download lucy1.mov, lucy2.mov, and lucy3.mov.