Flash
Work Environment
Timeline
In addition to having height and width, movies have an added dimension of time. This is what the Timeline represents. Understanding how the Timeline works is critical to designing in Flash.
Some movies play from start to finish and stop, some loop endlessly, and some start and stop when the user clicks a button or link. All of these methods of playback are oriented to the Timeline.
Before we begin, if you are using Flash 5, go to Edit > Preferences and select the General tab. For Timeline Options enable Flash 4 Frame Drawing. The screen shots throughout the course were made with this option enabled. You might find this option helpful in understanding the timeline display. Flash MX and MX 2004 use this same timeline drawing method by default, therefore you don't need to select this option for these versions of Flash.
Frames
Let's look at the Timeline more closely. You'll notice that the grey bar in the top row is divided into numbered segments. Underneath it are corresponding grey and white rectangles. These rectangles are called frames.
A frame is a moment in time. If the frame rate is set to 12 fps, each frame represents 1/12 of a second. Likewise, a span of 12 frames will take one second to play. The length of a movie is determined by the number of frames of content created.
The red rectangle with a red line extending downward through the frame is called the playhead. Once you have added content to the movie, you can drag the playhead back and forth across the Timeline to view the contents of the frames in sequence. This is sometimes called 'scrubbing' through a movie.
Inside frame 1 you'll see a hollow circle. This denotes a blank keyframe. Every new layer begins with a blank keyframe on the first frame. We'll explain what keyframes are in a moment.
The best way to show you more about the Timeline is to do a practice exercise and talk about what happens on the Timeline as you create a movie.
Practice Exercise: Your First Animation
Open the practice2.fla file you created earlier and we'll add to it. The shortcut to open files is Ctrl + O (Cmd + O) or go to File > Open. Before we start, here are a couple of tips. If you want to shift the Stage around in the work area, press the space bar. The cursor will turn into the Hand tool and you can click and drag the Stage while holding down the space bar.
Adjust View of the Stage
If
you want to resize your view of the Stage, one method is to use the zoom
control menu located in the bottom left corner of the Stage window
(top right in Flash MX and MX 2004). Click on the down arrow and select Show
Frame from
the pop-up menu. Notice that the Stage is resized to display as large as possible
in the Work Area without any part of it being hidden. Another option in this
menu is Show All. Flash will resize the Stage
magnification to fill the window with the areas that contain content. Changing
your magnification of the Stage doesn't affect the actual dimensions of the
movie that you set in the Movie Properties dialog.
Drawing the Start of an Animation
Click on the Rectangle tool in the Toolbox. On the left side of the Stage, click and drag the mouse to create a rectangle, like the one shown below.
Look at frame 1 and notice how it has changed - there is a black circle displayed against a grey background. Grey shading in a frame means that there is a static image on Stage in that frame; i.e., there hasn't been any animation applied to the image. The black circle is the symbol for a keyframe that contains some content.
A keyframe marks an important moment in time; for example, when an image appears on the Stage or when an object begins or ends a transition. We're going to morph the rectangle into a different shape. We have a starting keyframe so the next step is to add a keyframe at the end of the transition.
Drawing the End of an Animation
Click inside keyframe 15 and press F7 or go to Insert > Blank Keyframe.
The playhead has moved to frame 15 and frames 1-14 have been shaded in grey. In frame 14 a hollow rectangle is displayed. This means that all of the frames from frame 14 back to the previous keyframe contain the same static image.
Before we draw a new shape, let's change the colour. Click on the colour chip beside the paint bucket icon in the "Colours" section of the Toolbox. A palette will pop up. Pick the colour red by clicking on it. This will change the interior (or fill) colour of the next shape you draw to red.
Click on the Oval tool. On the right side of the Stage, click and drag to create a circle or oval. Notice that frame 15 is now a keyframe, which is indicated by the black dot.
Click and drag the playhead back and forth along the Timeline between frames 1 and 15. Not much is happening yet. The blue rectangle appears on Stage during the first 14 frames and the red circle is in the 15th frame.
Applying a Shape Tween
The beauty of Flash is that once you define a starting point and an ending point, Flash will fill in the in-between frames, a process known as tweening. We will go into much more detail about this in later lessons but let's try it now so you can see what it can do. First you need to display the Frame panel using one of the following methods:
- Right-click (Ctrl-click) on the Timeline in the middle of the span of grey frames. Anywhere between frames 1 and 14 will work. Then, select Panels > Frame from the pop-up menu.
- Go to the Modify menu, and choose Frame.
- Go to Window > Panels > Frame.
- Use the shortcut Ctrl + F (Cmd + F).
- In Flash MX and MX 2004, frame options can be found in the Property Inspector, with a frame on the timeline selected.
Click on the pop-up menu beside the word "Tweening". Select Shape tweening.
Notice that the range of cells between the two keyframes is now green and there is an arrow running between keyframes. The arrow indicates the presence of a tween and green is the colour for a shape tween.
Viewing the Animation
Now let's check out your animation! Drag (scrub) the playhead back and forth along the Timeline to see the effect. There are three properties that have been changed in this animation: shape, position, and colour.
Now is as good a time as any to mention that there are 100 levels of Undo in Flash. That is the default but it can be changed in the program Preferences dialog located in the Edit menu. You might want to change this number if your system does not have a lot of memory.
There are many other ways to view your movie. One way to view it within the authoring environment is to press the Enter (Return) key. This will set the playhead moving to the right, where it will stop on the last frame. To set the playback to loop endlessly, go to the Control menu, choose Loop Playback and then press Enter (Return) to play the animation again. To stop a looping playback, press Enter (Return) another time or click on the Timeline. Save your work.
Here is an example of the movie we made in this exercise.
Timeline Summary
A moment of time in a Flash movie is represented by a frame. Frames are arranged along the Timeline. Once you have added content to your movie that spans more than one frame, you can view the frames in sequence by dragging the playhead through the Timeline or by pressing Enter (Return) to automatically play the movie.
A keyframe marks an important moment in time; for example, when an image appears on the Stage or when an object begins or ends a transition. It is displayed as a solid black circle within a frame. Frames with a grey shaded background contain static images. When a static image spans a number of frames, the last frame it appears in will contain a hollow rectangle.
The term tween refers to Flash's ability to fill the frames between two keyframes to create a transition or animation. In a shape tween, the tweened frames have a green background with an arrow running through them.
Timeline Keyboard Shortcuts:
- Open an existing document: Ctrl + O (Cmd + O)
- Save: Ctrl + S (Cmd + S)
- Open Frame panel: Ctrl + F (Cmd + F)
- Activate the Hand tool temporarily: space bar
- Insert blank keyframe: F7
- Play/stop movie: Enter (Return)
Flash - TOC - Introduction - Books -
Work Environment - Links - Questions - Quiz -
1 - 2 - [ 3 ] - 4 - 5 - 6 - 7 -
