logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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




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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Motion 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor