Controlling Timelines (Moods) (Flash AS3)

Introduction

Assignment

Using the "Moods" templates, create two simple interactives that switch between different facial expressions, one of which uses "tweens" to create animated changes.

Version One: Basic Navigation

Download this zipped file, it contains two Flash files: moods_1.fla and moods_2.fla.
Open moods_1. Note how it is laid out: at frames 1, 7, 13, and 18 are keyframes with different shapes (features of the face). As a result, at frame 1 the expression is neutral; at 7 the face is "happy;" at 13 "sad;" and at 18 "angry." If you play the movie all of the expressions flash on the screen in rapid succession. Why are the keyframes spaced at such odd intervals? To make room for labels (see next step...)
In the "faces" layer, label the keyframes "home," "happy," "sad," and "angry," respectively. To label a keyframe, select it in the timeline, then in the Properties window, type the label name into the blank box below "Label." A little red flag will appearabove the keyframe in the timeline, and if there are some blank frames to the right of the keyframe (which there are), the label name should be visible in the timeline too. You will note that the labels should just fit into the spaces provided; this is why I spaced the keyframes the way I did. I could have placed the keyframes right next to one another, but then you wouldn't be able to see the labels in the timeline.
Make a new layer; call it "buttons."
Create 1-3 buttons.
1. Draw a shape.
2. Select the shape then go to Modify > Convert to Symbol. Choose Button Symbol. Call it "button," or if you want to do more than one, "happyButton."
3. Inside the button timeline you can specify different "over" and "down" colors/designs.
Back on the main timeline, put the button next to the word "Happy" (make sure the button is on the button layer).
Drag another instance of the button out of the library and place it next to "Sad" or create a new button for Sad. Repeat the process for "Angry."
Now we need to give each button an instance name; this allows us to write actions specifically targeted to a particular instance (item on stage). Select the button next to "happy;" then in the Properties window, look for a box with <instance name> written in it. Write goHappy_btn in that space. Then select the "sad" button and call it goSad_btn. Finally, call the third button goAngry_btn.
Create a new layer and call it "actions."
Select the first frame in the actions layer and open the Actions window. Inside the Actions window write:
```
stop(); 
```

This will prevent the playhead from moving past this point. If you play the movie now you'll notice that it no longer loops through all of the faces.

Next we need to add some event listeners. Listeners are bits of code that "listen" for specific user actions like button clicks, key presses, mouse moves, etc. We need to add a listener for each button. In the actions panel, below the stop(); add the following new code:
```
stop();
goHappy_btn.addEventListener(MouseEvent.CLICK, onHappyClick);    
goSad_btn.addEventListener(MouseEvent.CLICK, onSadClick);    
goAngry_btn.addEventListener(MouseEvent.CLICK, onAngryClick);  
```
The first part of each listener refers to an instance name for one of the buttons, essentially attaching the code that follows to that particular item. Each event listener has two properties (the bits inside the parentheses): 1) the kind of event it's listening for (in this case a mouse click), and 2) the function that it will perform when the action is performed. In this case, it will perform an action called onHappyClick or onSadClick or onAngryClick. However, those functions don't exist yet! We have to write them, which we will do next...
Add this code after the code you've already written:
```
function onHappyClick(myEvent:MouseEvent):void { 
    gotoAndStop("happy"); 
}    
function onSadClick(myEvent:MouseEvent):void { 
    gotoAndStop("sad"); 
}    
function onAngryClick(myEvent:MouseEvent):void { 
    gotoAndStop("angry"); 
}  
```
Each of these lines creates a new function, gives it a name (like "onHappyClick"), and then details what actions are to be carried out when the function is called (that is, told to run). In this case, each function simply jumps the playhead to the frame that contain the corresponding label.
Make a movie and test it. Do all three buttons work?

Version Two: Adding Tweens

Now we're going to add a little "flair" by adding some tweens.

Now open moods_2. Note the differences. At first glance it looks far more complex with multiple layers and keyframes. But there are still four sections: neutral, happy, sad, and angry. Unlike moods1, this time each of the mood sections starts with a set of "neutral" keyframes and ends with the selected expression; this will allow us to animate a change from the neutral face to the expression for each of the buttons pressed.
Let's add the "tweens." On the "mouth" layer right-click somewhere between frames 10 & 19 and choose Shape Tween from the contextual menu. Note how the mouth now moves from neutral to smile. Also shape tween between 20 & 29, and 30 & 39. I think you can see where this is headed. Add shape tweens between frames 20 & 29 and 30 & 39 on the two "eye" layers. Shape tween between 30 & 39 on the "head" layer.
Label the keyframes at 10, 20 and 30 "happy," "sad," and "angry." These frames mark the beginnings of each mood sequence.
In the labels/stops layer, place a stop(); on the frames 19, 29, and 39.
Create a new button layer. On it, make one or more buttons and place them by the moods (as we did with "Moods1").
Give these buttons the same instance names we used before ("goHappy_btn," "goSad_btn" and "goAngry_btn.")

Create a new actions layer. Then select the first frame and add the following script:

stop();    
goHappy_btn.addEventListener(MouseEvent.CLICK, onHappyClick);    
goSad_btn.addEventListener(MouseEvent.CLICK, onSadClick);    
goAngry_btn.addEventListener(MouseEvent.CLICK, onAngryClick);    

function onHappyClick(myEvent:MouseEvent):void { 
    gotoAndPlay("happy"); 
}    
function onSadClick(myEvent:MouseEvent):void { 
    gotoAndPlay("sad"); 
}    
function onAngryClick(myEvent:MouseEvent):void { 
    gotoAndPlay("angry"); 
}

Notice the difference—gotoAndPlay instead of gotoAndStop. This will cause the playhead to run through the tween animation before it stops at the desired expression.

Test your movie. Do all three buttons work?
Render a .swf file. Turn-in both .fla and .swf files.

Go Above and Beyond

Some possibilities:

Add one or more new moods.
Customize your faces.
Create a cool looking interface & buttons.

Specifications:

Size: 550 x 400 (default Flash size)
Frame Rate: 24 fps (default)
Length: (use provided file)
Deliverables: completed FLA and SWF files (for both versions)
Due Date: week 6 (Tues, Feb 14)

Grading rubric

10 pts	A	Went above & beyond—added a new mood, etc.
8.5 pts	B	Got it working the way it's supposed to
7.5 pts	C	Missing something or has one or two minor errors.
6.5 pts	D	Poor showing; mostly incomplete or full of errors.
0 pts	F	Missing

Daniel C. Fergus

Artist & Educator