Using the "Moods" templates, create two simple interactives that switch between
different facial expressions, one of which uses "tweens" to create animated
changes.
Specifications
Size: 550 x 400 (default Flash size)
Frame Rate: 12 fps (default)
Length: 15 frames
Due Date: week 6 (11/13)
Deliverables: both the FLA and exported SWF files.
Open moods1. Note how it is laid out: at frames 1, 5,
10, and 15 are columns of keyframes with different shapes (features of
the face). As a result, at frame 1 the expression is neutral; at 5 the face
is "happy;" at 10 "sad;" and at 15 "angry."
Make a new layer; call it "buttons."
Create 1-3 buttons.
Draw a shape.
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, "happy_btn."
Inside the button timeline you can specify different "over" and "down"
colors/designs.
Put the button next to "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."
In the "labels/action" layer, label the keyframes "home," "happy," "sad,"
and "angry," respectively. To label a keyframe, select it in the timeline,
then in the Properties window, on the left side, type the label name into the
box that says "<Frame Label>."
Click on the first keyframe in the
labels/actions layer (the one labeled "home"). Open the Actions window.
In the Actions window write:
stop();
Select the button next to "Happy" (make sure the button is
selected, not the frame). In the Actions window, write the following
script: on (release) {
gotoAndStop("happy");
}
Select the "Sad" button. In the Actions window write: on (release) {
gotoAndStop("sad");
}
Do the same for the "Angry" button (but make sure it's pointing to the
"angry" 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 "Moods2." Note the differences. There are still four sections:
neutral, happy, sad, and angry. But 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.
Label the keyframes at 1, 10, 20 and 30 "home," "happy," "sad," and "angry."
These frames mark the beginnings of each mood sequence.
Once again, place a stop(); on the first
frame.
Now also add "stops" to frames 19, 29, and 39.
Create a button layer. On it, make one or more buttons and place them by
the moods (as we did with "Moods1").
Select the happy button and in the Actions window write the following
script: on (release) {
gotoAndPlay("happy");
}
Notice the difference—"gotoAndPlay" instead of "gotoAndStop." You'll see why
in a second. Add the same action to the other two buttons, changing "happy"
to the appropriate labels.
Now it's time to add the "tweens." On the "mouth" layer click somewhere
between frames 10 & 19 and choose Shape Tween in the Properties
window. Note how the mouth now moves from neutral to smile. Also tween between
20 & 29, and 30 & 39. I think you can see where this is headed. Add tweens
between frames 20 & 29 and 30 & 39 on the two "eye" layers. Tween between
30 & 39 on the "head" layer.
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 a fourth mood.
Add sound effects.
Customize your faces.
Create a cool looking interface & buttons.
Point Breakdown
10 pts
Went above & beyond and made something special
9 pts
Above and beyond the basics.
8 pts
Did the basics; it works, but it's nothing fancy.
7 pts
Something's not working right.
0-6 pts
Poor showing; mostly incomplete or full of errors.
