Flash CS3 Documentation

Programming ActionScript 3.0 > Getting started with ActionScript > Example: Animation portfolio piece

Example: Animation portfolio piece

This example is designed to give you a first opportunity to see how you can piece together bits of ActionScript into a complete, if not ActionScript-heavy, application. The animation portfolio piece is an example of how you could take an existing linear animation (for example, a piece created for a client) and add some minor interactive elements appropriate for incorporating that animation into an online portfolio. The interactive behavior that we'll add to the animation will include two buttons the viewer can click: one to start the animation, and one to navigate to a separate URL (such as the portfolio menu or the author's home page).

The process of creating this piece can be divided into these main sections:

1. Prepare the FLA file for adding ActionScript and interactive elements.
2. Create and add the buttons.
3. Write the ActionScript code.
4. Test the application.

Subtopics

Preparing to add interactivity

Before we can add interactive elements to our animation, it's helpful to set up the FLA file by creating some places to add our new content. This includes creating actual space on the Stage where buttons can be placed, and also creating "space" in the FLA file for keeping different items separate.

To set up your FLA for adding interactive elements:

1. If you don't already have a linear animation to which you'll be adding interactivity, create a new FLA file with a simple animation such as a single motion tween or shape tween. Otherwise, open the FLA file containing the animation that you're showcasing in the project, and save it with a new name to create a new working file.
2. Decide where on the screen you'll want the two buttons to appear (one to start the animation and one to link to the author portfolio or home page). If necessary, clear or add some space on the Stage for this new content. If the animation doesn't already have one, you might want to create a splash screen on the first frame (you'll probably want to shift the animation over so it starts on Frame 2 or later).
3. Add a new layer, above the other layers in the Timeline, and rename it buttons. This will be the layer where you'll add the buttons.
4. Add a new layer, above the buttons layer, and name it actions. This will be where you'll add ActionScript code to your application.

Creating and adding buttons

Next we'll need to actually create and position the buttons that will form the center of our interactive application.

To create and add buttons to the FLA:

1. Using the drawing tools, create the visual appearance of your first button (the "play" button) on the buttons layer. For example, you might draw a horizontal oval with text on top of it.
2. Using the Selection tool, select all the graphic parts of the single button.
3. From the main menu, choose Modify > Convert To Symbol.
4. In the dialog box, choose Button as the symbol type, give the symbol a name, and click OK.
5. With the button selected, in the Property inspector give the button the instance name playButton.
6. Repeat steps 1 through 5 to create the button that will take the viewer to the author's home page. Name this button homeButton.

Writing the code

The ActionScript code for this application can be divided into three sets of functionality, although it will all be entered in the same place. The three things the code needs to do are:

• Stop the playhead as soon as the SWF file loads (when the playhead enters Frame 1).
• Listen for an event to start the SWF file playing when the user clicks the play button.
• Listen for an event to send the browser to the appropriate URL when the user clicks the author home page button.

To create code to stop the playhead when it enters Frame 1:

1. Select the keyframe on Frame 1 of the actions layer.
2. To open the Actions panel, from the main menu, choose Window > Actions.
3. In the Script pane, enter the following code:

   stop();
   

To write code to start the animation when the play button is clicked:

1. At the end of the code entered in the previous steps, add two empty lines.
2. Enter the following code at the bottom of the script:

   function startMovie(event:MouseEvent):void
   {
       this.play();
   }
   

   This code defines a function called startMovie(). When startMovie() is called, it causes the main timeline to start playing.

3. On the line following the code added in the previous step, enter this line of code:

   playButton.addEventListener(MouseEvent.CLICK, startMovie);
   

   This line of code registers the startMovie() function as a listener for playButton's click event. In other words, it makes it so that whenever the button named playButton is clicked, the startMovie() function is called.

To write code to send the browser to a URL when the home page button is clicked:

1. At the end of the code entered in the previous steps, add two empty lines.
2. Enter this code at the bottom of the script:

   function gotoAuthorPage(event:MouseEvent):void
   {
       var targetURL:URLRequest = new URLRequest("http://example.com/");
       navigateToURL(targetURL);
   }
   

   This code defines a function called gotoAuthorPage(). This function first creates a URLRequest instance representing the URL http://example.com/, and then passes that URL to the navigateToURL() function, causing the user's browser to open that URL.

3. On the line following the code added in the previous step, enter this line of code:

   homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);
   

   This line of code registers the gotoAuthorPage() function as a listener for homeButton's click event. In other words, it makes it so that whenever the button named homeButton is clicked, the gotoAuthorPage() function is called.

Testing the application

At this point, the application should be completely functional. Let's test it to make sure that's the case.

To test the application:

1. From the main menu, choose Control > Test Movie. Flash creates the SWF file and opens it in a Flash Player window.
2. Try both the buttons to make sure they do what you expect them to.
3. If the buttons don't work, here are some things to check for:
   • Do the buttons both have distinct instance names?
   • Do the addEventListener() method calls use the same names as the buttons' instance names?
   • Are the correct event names used in the addEventListener() method calls?
   • Is the correct parameter specified for each of the functions? (Both should have a single parameter with the data type MouseEvent.)

   All of these and most other possible mistakes should give an error message either when you choose the Test Movie command or when you click the button. Look in the Compiler Errors panel for compiler errors (the ones that happen when you first choose Test Movie), and check the Output panel for run-time errors (errors which happen while the SWF is playing--such as when you click a button).

Flash CS3

Comments

Add Comment

.love^ said on Oct 4, 2007 at 1:56 PM :

Very nice, but, I guess the cursor code to change the arrow to the pointing finger could be added to this tutorial section since still.., it's buttons?

adbe_paul said on Oct 4, 2007 at 3:13 PM :

@.love^:
To make the cursor show up when the mouse is over a button or movie clip, simply set its .useHandCursor property to true. For instance, in this sample you would add the following line of code to make the mouse cursor turn into a hand when it's over the play button:
playButton.useHandCursor = true;

No screen name said on Jan 10, 2008 at 2:18 PM :

Hi,
After upgrading to the current flash pIayer, our flash movie doesn't work anymore. The flash movie should be taking the user to another webpage within our website; as of now, it doesn't work when clicking on the movie. Our target button used the following action script code:

on (release) {
getURL("/index.cfm?navid=48&langid=100&itemid=28112&ref=pt74-m");
}

Any helpful information would be great.

Thank you!

nathan_duke said on Jan 24, 2008 at 9:12 PM :

Great little tutorial! Exactly what I was looking for. Although, my animation always cycles back to frame #1 as soon as it reaches the last frame.
I have tried a few code lines in the Actions palette but so far nothing seems to be working. Any suggestions?
-N8

PsydAzaTrans said on Feb 1, 2008 at 10:09 PM :

re: nathan_duke;


Go to the last frame of your animation and add a blank keyframe in the Actions layer, add a...

stop();

green eggs and ham said on Feb 17, 2008 at 6:05 PM :

I understand how to open a new browser window by clicking on a movie clip
but how do you write the script in AS3 so that it opens that window to your
desired size, with no scrollbar, URL field, etc. Thanks!

Todays Past said on Jul 31, 2008 at 1:50 PM :

Very nice. Clean, direct and demonstrates activities that make sense. Hat's off to you.

No screen name said on Sep 12, 2008 at 12:21 PM :

why did I get the error of "1120: Access of undefined property playButton" from the line of "playButton.addEventListener(MouseEvent.CLICK, startMovie);" could not figure out the reason?

adbe_paul said on Sep 12, 2008 at 1:06 PM :

Did you do step 5 under "To create and add buttons to the FLA"?

That's where you assign the instance name to the button. That would be the first thing I would check.

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/9.0/main/00000026.html

Add Comment