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

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:

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.
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).
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.
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:

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.
Using the Selection tool, select all the graphic parts of the single button.
From the main menu, choose Modify > Convert To Symbol.
In the dialog box, choose Button as the symbol type, give the symbol a name, and click OK.
With the button selected, in the Property inspector give the button the instance name playButton.
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:

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

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

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

At the end of the code entered in the previous steps, add two empty lines.
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.
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:

At the end of the code entered in the previous steps, add two empty lines.
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.
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:

From the main menu, choose Control > Test Movie. Flash creates the SWF file and opens it in a Flash Player window.
Try both the buttons to make sure they do what you expect them to.
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).