Phase 5:
Let the user control the animation
Now your tabs are responding to being clicked. The next step is to add functionality so that clicking on the tabs will cause the image to change from one view to the other (geographic to ranking or vice versa). Like this (click on the tabs):
Step 1: Get oriented to the task and comment the code
a. Save a copy of "Medals_4_tabs.fla" as "Medals_5_control.fla"
We're faced with a coding task. First we need to clarify just what the task is:
Then we need to figure out how to write the code to make that happen. A useful strategy is start by writing comments in your code pane that spell out what you want to do.
In ActionScript, comments are written like this:
// Precede a single line with a double forward slash
/* Precede multi-line comments with a forward slash and asterisk,
and end them with an asterisk and forward slash */
b. Insert the following comments in your code:
Step 2: Control the forward animation
a. Watch this video about controlling animation.
Here is a link to the .fla file you saw in the video. You can download it and study it more whenever you want (you don't need to do this now).
Now back to your Medals application.
b. Moving from frame 1 to frame 15 means playing the code from start to finish. Add this line after the comments:
play();
c. Test the movie.
When you click on the "by Ranking" button, you should see the animation. It should look like this (click on the tab):
There are two things we clearly need to fix. One is that the tabs disappear during the animation. The second is that the animation jumps back to frame 1 when it's over.
The reason the tabs disappear is because they only occupy the first frame in the timeline:
d. To correct that, add a frames for each of these layers (click on frame 15 and hit F5 or Insert->Timeline->Frame).
If you test the movie now, you should see the tabs during the entire animation.
Tackling the problem of preventing the animation from jumping back to the first frame is not trivial. There's no easy way to tell the play() method when to stop other than by inserting a "stop()" line in the final frame, but that violates the rule for putting all of the code in one place. Having code in multiple frames has various negative ramifications. So we'll use the strategy for playing the animation backward which you saw briefly in the video about controlling animation.
Step 3: Refine the forward animation
The strategy we'll use for moving forward goes like this:
When the button is clicked, add an Event listener which will listen for the ENTER_FRAME event, which will then trigger another function, which will move the animation forward one frame.
a. Click on the frame where your code is located, open the Actions panel and replace the "play();" line with this:
stage.addEventListener(Event.ENTER_FRAME, moveForward);
Here's what this line will look like in your code:
b. Now go to the end of your code and add the "moveForward" function which you referred to in the line of code you just wrote:
function moveForward(e:Event):void {
// Check to see if the animation has gotten to the last frame
if(currentFrame == totalFrames) {
// Remove the event listener so it stops calling this function:
stage.removeEventListener(Event.ENTER_FRAME, moveForward);
} else {
nextFrame();
}
}
c. Test your movie. When you click on "By Ranking", the animation should run. It should look like this:
Notice that the animation stops at the last frame rather than jumping back to the beginning the way it did before.
Here is an explanation of the code:
The first line is typical of a function triggered by an event:
The second line tests whether the frame the animation is at in this moment is the final frame of the animation:
Note that "currentFrame" and "totalFrames" are in blue because they are ActionScript names rather than made-up names.
The next line removes the event listener. It needs to look identical to the line where you added the event listener (with the exception of the name of the method - "removeEventListener" rather than "addEventListener"):
Step 4: Control the reverse animation
To reverse the animation (so that it runs from frame 15 to frame 1). You'll write code that is parallel to the code you wrote to run the animation forward, but that uses the "prevFrame()" method rather than the "nextFrame()" method.
a. Go the the "else" clause in the "switchViews" function and add an "addEventListener" line that is identical to the one you wrote in the if clause, except that it should call a function named "moveBackward"
b. Write a function called "moveBackward." Make it identical to the "moveForward" function, except:
c. Test your movie. You should now be able to move back and forth between the two views like this:
d. Update your comments to reflect your current code by replacing the two comments in your code which are now obsolete (I'll let you figure out which those are) with these two:
/*Add an event listener that will trigger the "moveForward"
function each time a new frame is entered. */
/*Add an event listener that will trigger the "moveBackward"
function each time a new frame is entered. */
Step 5: Publish your file
You might be wondering how you put a Flash file into a web page. Here's how:
a. Watch this video (which was created with Flash CS4 so it looks a little different, but the gist is the same), then try it yourself (this will create .html and .swf files, but you don't need to hand those in).
FINAL PRODUCT: Medals_5_control.fla
SUMMARY
Take another look at the visualization you're emulating.
In addition to the tabs which switch the view between geographic and ranking, there is a slider which switches the display from year to year. In the next phase, you'll be adding the slider. But for now, lets review what you learned in this phase
Comment code
// Precede a single line with a double forward slash
/* To comment several lines of code,
start the first line with a forward slash and asterisk,
and end the final line with an asterisk and forward slash */
ActionScript methods to control an animation
stop()
play()
nextFrame()
prevFrame()
gotoAndPlay(frame number)
gotoAndStop(frame number)
Dynamically add and remove event listeners
The line for removing an event listener must be identical to the line for adding the event listener (with the exception of the method name 'removeEventListener'):
objectname.addEventListener(eventType, functionName)
objectname.removeEventListener(eventType, functioName)
Publishing a Flash file
This video shows how to 'publish' a Flash file (which means to create an HTML page with the file embedded in it)