Lab 06: Flash Animation 1
Overview
Flash (Animate CC) is a software package that allows you to create projects called movies. A movie is much like what you go to see in a movie theater. It is composed of one of more scenes. A scene can be considered a small, self-contained movie and is comparable to a chapter in a book. Our first movie will be a simple movie showing a sunrise and an airplane flying across the sky.
Each scene consists of several frames. A frame is one single picture within a scene. Playing frames in rapid succession gives the human eye the illusion of constant motion. A keyframe is a frame where the action of your object changes significantly. Example: a plane flies across the screen from left to right. Keyframe number one in this case would be the frame where the plane starts on the left side of the screen, keyframe number two in this case would be the frame where the plane stops on the right side of the screen.
In addition to frames, each scene can be made of different layers. To understand the concept of layers, think of a stack of transparencies. You can place different objects of your scene on separate transparencies (layers). To see the complete scene, you would then look at all the transparencies together stacked up. This is essentially the concept of layers. It is recommended to place each object on a separate layer. This practice will make manipulating (animating) your objects much easier.
Objects are also called symbols. Symbols are those objects which make up your scene. Symbols are objects that are stored in your movie's library for reuse. Symbols can easily be reused and/or modified. Symbols can be added to the library by the user.
Each layer has a timeline which shows how the symbols on the layer change over the course of the scene. The amount of time your movie is showing depends on the total number of frames you define.
Our movie will also contain some basic animation. To animate an object, you define two or more keyframes (frames where the action changes significantly). Between those keyframes are several frames which show the transition between those keyframes. This transition can be generated using Flash. The process of transition is called tweening. Tweening is a Flash function which determines the best way to transfer an object from one keyframe to the next.
Our first movie will be an animation showing a nature scene. We will create a movie showing the sun rise and a cloud flying in the sky. The movie will also have credits which show who created this movie. This movie will have one scene, 40 frames and four layers.
Procedure
Note: to access
Flash on any of the COSC Lab PC, use . . .
Start / All Programs / Adobe Animate CC
- Start
Flash per above.
Select File / New / ActionScript
3.0. To ensure that all controls are shown on the screen, select View
/ Magnification / Show All, and select View/Preview Mode/Full. The properties
window should show to the right of your screen by default. If you
don't see this window, select Window / Properties to open it.
- Flash has
a dialog box called Document Properties that allows you to change
the main characteristics of your movie. The default background for each
movie is white. Our movie will show the sky, so we would like to change
the color of the background to blue. Select Modify / Document
and in the dialog box that appears, click on the Background Color
button. In the color palette that then appears, click on a light blue
shade for your background. Then click OK.
- Create a
sun. To help with this step, refer to the picture above. To
make your sun, click and hold the rectangle tool, then select the oval
tool. Use it to drag out a medium sized circle in the lower left
portion of the stage. To fill your circle, choose the Paint Bucket
tool in the Toolbox. Then click on the Fill Color button in
the Toolbox, and in the color palette than appears, choose an
appropriate color for your sun. Finally, click the Paint Bucket tool
inside your sun to fill the sun with your chosen color.
- Animate your
sun. Select the Pointer Tool (Selection Tool) in
the upper left corner of the Drawing Toolbox. Select all of
the sun (the interior and the outline) by drawing a rectangle around
the sun. Next, choose Insert / Classic Tween. Flash converts your
sun automatically to a symbol (placing it in the library).
- Define the
final position of your sun. Click directly under the timeline in
frame 40, the final frame of our animation. We want to use 40 keyframes to
make the sun rise from the lower left to the upper right. This means that
in frame 40, the sun will be in its final position, at the upper right of
the screen. Choose Insert / Timeline / Keyframe to make this a
keyframe. Notice the solid arrow between frame 1 and frame 40 signifying a
successful motion tween. Now we move the sun to its position in
frame 40. With frame 40 still selected, single click on your sun to
select it and drag it to its final position in the upper right area of the
stage.
- Change the color of your sun.
Note that unlike a real sunrise, your sun does not change color as it rises.
In this step, you will make your sun change color as it rises. Select frame 1,
click on your sun once to select it. In the Properties Window (to the right
of the stage) in the color effect list select Tint.
In the color selection square (right next to Tint) select a shade of orange for your sun. Adjust the sliders until your sun change color to a shade of orange. Play your animation to see your sun change color as it rises! Make sure to un-select your sun by clicking anywhere on the canvas outside of the sun. Let's check our animation. To play your animation, choose Control / Rewind then Control / Play.
- Adjust the
path of the sun. When we played the movie we
noticed that the sun is taking a straight path from the lower left to the upper
right. We would like to curve the path a little. Click on the timeline in
frame 20. Flash now shows you the sun in the position in frame 20. Drag
the sun a little further up. Flash now shows a bullet in this frame,
meaning that it now designed this frame as a new keyframe. Control /
Rewind and Control / Play your movie again. Add a few more
keyframes to make the path look like a curve.
- Save your
project on your to your COSC109\CompletedLabAssignments folder. To
do this, choose File / Save As, navigate to your COSC109
folder and give your movie the name Lab06_MyMovie.fla, then click
the Save button.
- Add
another object (cloud) to your movie. Since we
want to animate our new object we will place the new object on its
own layer. To insert a new layer, choose Insert / Timeline
/ Layer. Note that this new layer, called Layer 2, is at the
top of the list of layers. (You might have to move your Toolbox out of the
way to see the layer name.) This means that objects in Layer 2 will
appear on top of objects in Layer 1. If necessary, you can
rearrange the ordering of the layers (called the stacking order)
in a scene. The name of the currently active layer is indicated in bold
face and in this case is Layer 2. You can change the active layer
by clicking on the name of the layer. Try this a few times but leave
Layer 2 as the active layer when you are done.
- Create a
cloud to fly across the sky. Create a
new layer for the cloud. Our keyframes for each layer will be again frame
1 and frame 40. Make sure that layer 2 is the active layer (click on
it if necessary). Draw a cloud on the left, upper side of the stage.