ActionScript3:Using addChild and removeChild

From virtualMV2015wiki
Jump to: navigation, search
 Home  Flash11 (CS5) | Flash10 (CS4) <


Icon Objective.png

Objective

By the end of this page you will be able to:

  • Use a button menu to navigate through self-contained movieClips within your ActionScript3 Movie using addChild and removeChild methods to load and unload your movieClips to and from the stage.

Introduction

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.
Sd createmenu.png

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.

Sd menubuttons.png

Return to Scene 1, open the Actions Panel and add the following ActionScript3 to call the menu to the stage:

var mainmenu:MovieClip = new menu(); // assigns the menu movieClip to the variable mainmenu so we can use it
stage.addChild(mainmenu); //adds the mainmenu movieClip to the stage
mainmenu.x = 25; //sets the x position
mainmenu.y = 10; //sets the y position

Test your movie, you should now have your menu loading into your main stage area. Save your files.

Create the menu item MovieClips

Following the procedure above to create a new MovieClip named contact.

  • 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 menu movieClip 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 homeButton.
  • Add a new layer, name it actions. With frame one of the actions layer selected, add the following ActionScript:
homeButton.addEventListener(MouseEvent.CLICK, gotoMenu);
 
function gotoMenu(event:Event):void {
		stage.removeChild(this);
}

In the library, you can now duplicate this movieClip twice, giving new names and identifiers - movie and web.

Open the menu movieClip.

With frame one of the actions layer selected, add the following:

movieButton.addEventListener(MouseEvent.CLICK, gotoMovie);
webButton.addEventListener(MouseEvent.CLICK, gotoWeb);
mailButton.addEventListener(MouseEvent.CLICK, gotoMail);
 
 
function gotoMovie(event:Event):void {
		var moviescene:MovieClip = new movie();
		stage.addChild(moviescene);
}
function gotoWeb(event:Event):void {
		var webscene:MovieClip = new web();
		stage.addChild(webscene);
 
}
function gotoMail(event:Event):void {
		var contactscene:MovieClip = new contact();
		stage.addChild(contactscene);
}

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

Final Movie

A simple example of using addChild and removeChild to navigate through a single swf by calling movieClips to the stage on button clicks.

Try Me


Sd hottipicon.png HOT TIP! Add the following ActionScript to the gotoMenu button function to kill all sounds as just removing the Playback Component doesn't seem to stop the sound from continuing

SoundMixer.stopAll();

Related Information

For other ways to link up your AS3 swf's, check out these:


Icon References.png References


 

Day, S. (2010). ActionScript3:Using addChild and removeChild. Retrieved January 19, 2018, from http://www.virtualmv.com/wiki/index.php?title=ActionScript3%3AUsing_addChild_and_removeChild