ActionScript3:Using addChild and removeChild
|Flash11 (CS5) | Flash10 (CS4) <|
|Table of contents|
By the end of this page you will be able to:
With the introduction of ActionScript3, several features of ActionScript2 are no longer available. ActionScript2 allowed you to load external swf's into your current movie effectively replacing the current movie. This was useful to breakdown a production into smaller files, but unfortunately
loadMovie wasn't carried over into ActionScript3. To achieve a similar effect in ActionScript3, each "section" can be built within a movieClip, then bought to the stage from the library and replaced as necessary (The disadvantage of this is the file size of your movie as everything now is contained within the final swf) or, for the web, it is still a good idea to break into individual swf's and load as URL's using the
URLLoader class to navigate through or alternatively import into a loader, using the Loader Class.
Setting the Stage
In this example, we are going to create a small movie, with 3 menu items that each load a separate movieClip that contains some information and a bit of animation and a "menu" button that will take you back to the menu page. All movieClips, will be dynamically added via ActionScript, but some of the objects within each movieClip will be placed on the stage (it is Ok to use a combination of methods) - so we just need to create a new ActionScript3 Fla and relabel Layer 1 as Actions at this stage.
- Create an ActionScript3 Movie Fla and set the stage size as 400 x 300px and a background colour of your choice. Save with a unique name.
- Re label layer 1 as Actions.
- On the menu bar, click Insert → New Symbol and give your newly created movieClip the name
menu, tick Export for ActionScript, Export in frame One and leave the class name as
menu. Click OK and click OK to any further messages.
Creating the Menu MovieClip
With your newly created
menu movieClip open, add three buttons to the stage, use your own or from the button library. Position them as required. Give them each a unique identifier.
Return to Scene 1, open the Actions Panel and add the following ActionScript3 to call the menu to the stage:
Test your movie, you should now have your menu loading into your main stage area. Save your files.
Following the procedure above to create a new MovieClip named
- Add a new layer, called background. Draw a shape the same size as your stage and in the 0,0 position (400 x 300px). It is important to have a background as we need to hide the
menumovieClip which is sitting at a lower level and will be visible if the levels above have no background fill.
- Add a new layer, called buttons, position a home button and give it an instance name of
- Add a new layer, name it actions. With frame one of the actions layer selected, add the following ActionScript:
In the library, you can now duplicate this movieClip twice, giving new names and identifiers -
With frame one of the actions layer selected, add the following:
eventListener is added to each button, when clicked, the relevant movieClip is called to the stage. The
eventListener on the
homeButton removes the current movieClip, revealing the
menu movieClip on the lower level.
The navigation is now complete, all that is left to do is to add some content into each of the movieClips. This can be done either by calling objects to the stage via actionScript or adding to the stage in the traditional manner. There is no timeline to speak of, all the action occurs in Frame One of each movieClip and all is output into one swf. It is important to keep the file size small, especially if the final production is going to be web based.
A simple example of using
removeChild to navigate through a single swf by calling movieClips to the stage on button clicks.
For other ways to link up your AS3 swf's, check out these:
- ActionScript3:Using the Loader Class to load an external swf
- ActionScript3:Using URLRequest and navigateToURL