[ Not for Circulation ]
Working With Animation: Intermediate Flash
Creating a Frame-by-Frame Animation
To create a frame-by-frame animation, you define each frame as a keyframe and
create a different image for each frame. Each new keyframe initially contains the
same contents as the keyframe preceding it, so you can modify the frames in the
animation incrementally.
1. Select the frame and layer where you want the animation to begin.
2. Create an artwork for the first frame.
3. In the next frame, press F6 to insert a keyframe.
4. Make changes to the artwork to begin the animation process.
5. Insert a keyframe in the next frame.
6. Make changes to the artwork to continue the animation process.
7. Continue to insert keyframes and alter/move the artwork until you have
completed the animation.
8. Test your movie by playing the animation.
9. To see all the steps in your animation, lower the frame rate for your movie. [
Modify > Document ]
Information Technology Services, UIS
1
[ Not for Circulation ]
Onion Skinning
Flash displays one frame of the animation sequence at a time on the Stage. To
help you position and edit a frame-by-frame animation, you can view two or
more frames on the Stage at once. The frame under the playhead appears in full
color, while surrounding frames are dimmed, making it appear as if each frame
were drawn on a sheet of translucent onion-skin paper and the sheets were
stacked on top of each other. Dimmed frames cannot be edited.
1. Open the onion.fla file inside your workshop folder on your desktop.
2. Select Frame 2 and press F6 to add a keyframe to the frame.
3. In Frame 2, click on the snowboarder artwork to select it, and move it up and
to the right, as though he is advancing in his jump.
4. At the bottom of the Timeline, there is a row of buttons grouped together.
Click the button first from left, the Onion Skin button. A faint ghost image
will appear on the stage.
5. With Onion Skinning turned on, select the Free Transform tool.
6. With the Free Transform tool selected, click on the snowboarder in Frame 2
to select the shape, if it is not already selected.
7. Move your cursor to the upper right corner of the bounding box until it
changes to a round arrow. Rotate the artwork a bit to make the jump look
more realistic.
8. Select Frame 3 and press F6 to insert another keyframe so you can create the
third frame of your animation.
9. With Onion Skinning still turned on, select the snowboarder artwork in
Frame 3 and move it to the right. Select the Free Transform tool and rotate
the snowboarder again, just as you did in step 7.
10. Finish the snowboarder jump by repeating steps 8 and 9 twice.
11. Choose Control > Loop Playback so that you can see you animation
repeatedly.
12. Press the return [Macintosh] or Enter [Windows] key to test your movie.
Information Technology Services, UIS
2
[ Not for Circulation ]
Shape Tweening Text
1. Open the textTween.fla file in the workshop folder on your desktop.
2. On the tween layer, press F7 on Frame 10. This adds a blank keyframe to
Frame 10. You are adding a blank keyframe rather than a keyframe because
you want to add new artwork on Frame 10, not copy the artwork on Frame 1.
3. Notice that after the first frame, the word “boarding” disappears. This
happens because the boarding layer has only one frame, while the tween
layer now has 10 frames. In order for the word “boarding” to appear in the
entire animation, click on Frame 10 and press F5 on Frame 10 in the boarding
layer to add frames up to Frame 10 on that layer.
4. In the Toolbox, select the Text tool. Select Frame 10 on the tween layer, click
on the Stage and type the letter X in Frame 10 just before the letter “b” in the
word “boarding”.
5. Using the Selection tool, click to select the large X on the Stage and drag to
position it before the letter “b”.
6. With the X still selected, choose Modify > Break Apart. The text is broken
apart and modified into a shape, ready to be tweened.
7. Click on Frame 5, which is the middle of the range between the two
keyframes.
8. In the Property Inspector, click to see the Tween drop-down menu and select
Shape.
9. Press the return [Macintosh] or Enter [Windows] key to test your tween. Your
snowboard should turn into the letter “X”.
The Symbol and Instance Structure
You can create a symbol from selected objects on the Stage, or you can create an
empty symbol and make or import the content in symbol-editing mode.
Symbols can have all the functionality that you can create with Flash, including
animation. By using symbols that contain animation, you can create movies with
a lot of movement while minimizing file size.
Information Technology Services, UIS
3
[ Not for Circulation ]
Symbol
A reusable object that serves as a master from which you can create copies
[instances].
Instance
A copy of the original symbol. You can alter the elements of an instance without
altering the symbol.
Library
The Library is a container where Flash stores and organizes symbols, bitmap
graphics, sound clips, and video clips.
Creating a Graphic Symbol
1. Create a new file.
2. Choose Insert > New Symbol. This will open the Symbol Properties dialog
box.
3. For Name: type myFirstSymbol, and for Type: select Graphic.
4. Click OK.
5. From the Toolbox, select the Line tool and draw a star in the middle of the
Stage.
6. Using the Selection tool, select and delete each of the internal lines of the
star.
7. Using the Paint Bucket tool, fill the star with a color of your choice.
8. Using the Selection tool, select and delete the lines around the star.
9. Click on Scene 1, to return to the main timeline of your project.
10. Choose Window > Library to open the library for the file.
11. Click on the myFirstSymbol icon in the Library and a Preview will appear in
the preview portion of the Library window.
Button States
Buttons are actually four-frame interactive movie clips. When you select the
button behavior for a symbol, Flash creates a Timeline with four frames. The
first three frames display the button's three possible states; the fourth frame
defines the active area of the button.
Information Technology Services, UIS
4
[ Not for Circulation ]
Up
The Up keyframe holds the artwork that defines what the button looks like
before the user’s mouse interacts with the button.
Over
The Over keyframe is what the button looks like when the user points the mouse
over the Hit area of the button. This is also referred to as the rollover state of the
button.
Down
The Down keyframe defines what the button looks like when it is clicked.
Hit
The Hit keyframe of the button is always invisible to the user. It defines the area
of the button that is reactive to the mouse. This is what makes the button
clickable.
Creating a Rollover Button
1. Open the rolloverButton.fla file from the workshop folder on the desktop.
2. Choose Insert > New Symbol to create a new Button symbol.
3. The Symbol Properties dialog box will be displayed. Name the symbol
btnRollo and set the Behavior to Button. Click OK.
4. Choose View > Grid > Show Grid. This will cover the Stage with a grid,
which is not exported with your movie.
5. In the Toolbox, select the Line tool. Make sure that the Stroke Color is set to
black, and draw a small triangle that spans over two grid boxes in height.
6. Select the Paint Bucket tool. Set the Fill Color with a shade of gray.
7. Using the Selection tool, double-click on a stroke to select it and press the
delete key on your keyboard. You should have a solid gray triangle without
a stroke around it.
8. Click on the Over frame and press F6 to add a keyframe on the Over frame of
the button.
9. Select the Paint Bucket tool and choose white for the fill color. Click once
inside the triangle to fill the triangle with white.
Information Technology Services, UIS
5
[ Not for Circulation ]
10. Press F6 on the Down state to add a keyframe. Set the Fill Color to the same
color you used for the Up stage of the button. Click once inside the triangle
and fill the triangle with gray.
11. Press F6 in the Hit frame of the button. This will define the “hot” area of the
button. You have just created your first button!
12. In the Information Bar click on Scene 1 to return to Scene 1 of the Main
Timeline.
13. Choose Window > Library to open the Library. Click on btnRollo symbol in
the Library and click on the Play button on the Controller in the Preview
window to preview the button in the Library.
14. Choose View > Grid > Show Grid to deselect this option and hide the grid
on the Stage. Drag the instance of the button to the Stage.
15. Choose Control > Enable Simple Buttons to allow you to test the button on
the Stage.
16. Choose Control > Enable Simple Buttons again to deselect this option.
17. Save your file and choose Control > Test Movie to test your movie.
Rollover Buttons with Text
1. In the Library, double-click on the Button symbol’s icon to open the button’s
Timeline.
2. In the Button symbol’s Timeline, rename Layer 1 to triangle, and lock the
triangle layer.
3. Insert a new layer and name the layer Text.
4. In the Toolbox, select the Text tool. In the Property Inspector, choose
Verdana for the Font, 16 for the Font Size, and white for the Text Color.
5. Click on the Stage to the right of the triangle and type the word
BACKGROUND in upper case. This will add frames to the word that
appears across the different button states.
6. Press F6 to add a keyframe to the Over state of the button.
7. Select the text and change the color to dark gray. Preview your movie and
return to the edit stage.
Information Technology Services, UIS
6
[ Not for Circulation ]
8. Move the playhead to the Hit frame and select the Hit stages for the two
frames.
9. Ctrl-click [Macintosh] or Right-click [Windows] and choose Remove Frames
from the drop-down menu.
10. Lock the text layer, inset a new layer, and drag it below the triangle layer.
Rename this layer to hit.
11. Click in the Hit frame on the hit layer and press F7 to add a blank frame.
12. Unlock all the layers and select the Onion Skin button.
13. In the Toolbox, select the Rectangle tool. On the Stage, draw a rectangle that
covers both the triangle and the text.
14. Deselect the Onion Skin button.
15. In the Information Bar, click on Scene 1 to leave the Button symbol’s
Timeline and return to the Main Timeline.
16. Make sure Control > Enable Simple Buttons is selected to test your button
on the Stage.
17. Save the file.
Duplicating a Button
1. In the Library, ctrl-click [Macintosh] or Right-click [Windows] on the
btnRollo symbol. Choose Duplicate from the menu that appears.
2. In the Duplicate Symbol dialog box that appears, type btnSafety in the
Name field and make sure Behavior: Button is selected. Click OK.
3. Double-click on btnSafety in the Library to open the button’s Timeline.
4. Lock the hit layer.
5. On the text layer, click on Frame 1 and type the work SAFETY. Repeat the
steps for Frame 2.
6. Return to Scene 1 and drag an instance of btnSafety to the Stage.
7. Repeat steps 1 through 6 to create another button. Name the button
btnSkiing and the text for the button should read SKIING.
8. Choose Edit > Select All to select both the buttons on the Stage.
Information Technology Services, UIS
7
[ Not for Circulation ]
9. Choose Window > Align to open the Align panel and make sure the To Stage
button is not selected/depressed.
10. Select Align Left Edge and Distribute Vertical Center to make all the
buttons align to the left and be equally spaces.
Movie Clips
A movie clip is like a mini-movie in Macromedia Flash MX: it has its own
Timeline and properties. A movie clip symbol in the library can be used multiple
times in a Flash document; each use is called an instance of the movie clip.
Creating a Movie Clip
1. Open the movieClip.fla file from the workshop folder on your desktop.
2. Click the Insert Layer button to add a new layer to the Timeline. Name the
layer fillTween.
3. Choose Window > Library and drag an instance of gfxFill onto the Stage in
the fillTween layer. Using the arrow keys on your keyboard, position the
gfxFill instance so that it covers the X outline exactly.
4. Select Frame 20 and press F6 to add a keyframe. Select Frame 40 and press
F6 to add a keyframe.
5. Make sure that the playhead is over Frame 40 and select the instance on the
Stage. Using the Property Inspector, for the Color option, choose Alpha and
0%.
6. Move the playhead to Frame 1 and select the instance on the Stage. Using the
Property Inspector, for the Color option, choose Alpha and 0%.
7. In the Timeline, click to the right of the fillTween layer name to select all the
frames in the layer. In the Property Inspector, choose Tween: Motion.
8. Select Frame 40 of the outline and text layer. Press F5 to add frame up to
Frame 40 for both the layers.
9. Press the return [Macintosh] or Enter [Windows] key to test the animation.
Information Technology Services, UIS
8
[ Not for Circulation ]
10. Click to the right of the text layer name to select all the frames of the layer.
Shift-click to the right of the outline and fillTween layer names to select all
the frames on both those layers as well.
11. With all the frames selected, choose Edit > Timeline > Cut Frames. This will
cut all the frames you have selected.
12. Choose Insert > New Symbol and type Name: mcOutlineFill. Make sure
Behavior: Movie Clip is selected and click OK. You will now be inside the
movie clip’s timeline.
13. Inside the movie clip’s outline, select the first keyframe and choose Edit >
Timeline > Paste Frames. This will paste all the frames and all the layers
inside the Movie Clip.
14. Click on Scene 1 to return to the Main Timeline. The three layers are there
but they do not contain any content on them.
15. Select the text layer and click the Trashcan icon in the Timeline. Repeat this
process for the outline layer.
16. Double-click the fillTween layer and rename this layer movieClip.
17. In the Timeline, click on Frame 2 and shift-click on Frame 40. Ctrl-click
[Macintosh] or Right-click [Windows] and from the drop-down menu, choose
Remove Frames.
18. From the Library, drag an instance of mcOutlineFill Movie Clip to the Stage.
19. Save your movie and choose Control > Test Movie.
Acknowledgement: Content for this document is derived from Macromedia Flash Hands-on
Training by Kymberlee Weil and developed by Lynda Weinman.
Information Technology Services, UIS
9