g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Women's Fashion
Small Office/Home Office
Holiday/Seasonal Cooking
Crafts for Kids

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Add Library Items to Stage Flash ActionScript 3

With the new FlashR 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.

  1. 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".

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

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

  4. 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();
    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.

Add Add+Library+Items+to+Stage+%96+Flash+ActionScript+3 to Twitter Add Add+Library+Items+to+Stage+%96+Flash+ActionScript+3 to Facebook Add Add+Library+Items+to+Stage+%96+Flash+ActionScript+3 to MySpace Add Add+Library+Items+to+Stage+%96+Flash+ActionScript+3 to Del.icio.us Digg Add+Library+Items+to+Stage+%96+Flash+ActionScript+3 Add Add+Library+Items+to+Stage+%96+Flash+ActionScript+3 to Yahoo My Web Add Add+Library+Items+to+Stage+%96+Flash+ActionScript+3 to Google Bookmarks Add Add+Library+Items+to+Stage+%96+Flash+ActionScript+3 to Stumbleupon Add Add+Library+Items+to+Stage+%96+Flash+ActionScript+3 to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Animation Software Terms

Why Hype 3.5 and Pro

Tumult Hype and Pro Intro

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2015 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor