Add Library Items to Stage – Flash ActionScript 3

With the new Flash^R CS3 and ActionScript 3, we no longer are limited to programming along the Timeline with Frames. Now we can use ActionScript. In this tutorial, our goal is to "call" or run a movie clip with ActionScript. But, the movie clip is not on the stage when the website is loaded. It is stored in the Flash Library. As with most things in Flash, there are many ways to do this. In this tutorial, we will use the addEventListener to listen for the mouse click that will tell Flash that we want to display the movie clip. Then, we will use addChild to add the movie clip to the Display List.

Start a new Flash ActionScript 3 project and set the Document settings as you wish. Also, you should already have a button created on the stage which we will program to open the movie clip from the Library and an Actions layer in the Timeline to hold our ActionScript.

In the example, I have already created an invisible button, called "AboutButton", that will display the movie clip and added a tool tip to the button that says "Author/Artist Bio". (You can find tutorials for invisible buttons and tool tips in the Special Effects section of the Site Map.) Now. I am ready to create the movie clip and add the ActionScript to my button to make it work.

The first thing we will do is add a new layer to the Timeline for the movie clip. We will put this layer just under the Actions layer. We are placing this layer on top of all the other layers (except the Actions layer) because we want the movie clip to display on top of the button that opens it. This is an easy way to be sure that your visitor cannot open the movie clip more than once before closing it. You can name this layer anything you wish. Since my movie clip will display my bio, I named the layer "Bio".
On Frame 1 of the Bio layer, I can now draw or import a graphic that will be my new movie clip. In my case, I imported a graphic that looks like parchment paper (File – Import – Import to Stage). Reposition the graphic if necessary. Remember to position the graphic directly over the button that opens the movie clip. Once in position, make a note of the X and Y values in the Property Inspector. You will need these later.
Now we will convert the graphic to a symbol. Select the graphic and click Modify – Convert to Symbol. Set the following settings in the dialog box. You may need to click the Advanced button to open the advanced options in the dialog box so that we can use the Export for ActionScript option.

Name – Bio
Type – Movie Clip
Registration – Upper Left Square
Export for ActionScript – Checked
Class – BioParch

When the Class warning appears after you complete the dialog box, just click OK.
Now I need to add the text of my bio. Double click on the movie clip to enter the edit mode. With the Text tool, add the text on top of the graphic. Then click on Scene 1 to go back to the main Timeline.

When you converted the graphic to a movie clip, it was added to the Library and the one on the stage became a copy of that original in the Library. So now that we are finished adding the text, we can delete this copy. Select the movie clip and delete it from the stage.

Now, we are ready to program the button to open the original movie clip from the Library. Select Frame 1 on the Actions layer and open the Actions panel. Add the following code. Remember that I named my button "AboutButton" and the movie clip Class was named "BioParch".

AboutButton.addEventListener(MouseEvent.CLICK, goBio);
function goBio (e:MouseEvent):void {
var newBio:BioParch = new BioParch();
this.addChild(newBio);
newBio.x = 25;
newBio.y = 45;
}

The above code tells Flash to add an Event Listener to the AboutButton button and when it is clicked to run the goBio function. The goBio function creates a new variable called newBio which references the BioParch movie clip in the Library. Then we add this to the Display List with addChild. Finally, we set the X and Y positions on the stage for the movie clip. These are the X and Y positions that you wrote down before.

OK, test your movie and click on your button to load the movie clip from the Library. But we have not programmed a button to close the movie clip. So, you will need to close the Flash movie instead. In the next tutorial, we will create and program a button to close the movie clip and remove both from the stage.

	Diane Cipollo BellaOnline's Flash Editor