Week 3 Topics

Chapter 4 - Animation Basics

• Timeline area - double clicking the frame rate is a quick way to bring up the document properties box; elapsed time is the time elapsed from Frame 1 to the current Playhead location at the current frame rate
• Blank keyframe (F7)- empty locations, ready for content, represented by a hollow circle in timeline
• Keyframe (F6)- points in timeline when actions or animations occur. Keyframes that contain content are represented by solid circle in timeline. The display remains constant until another keyframe or a blank keyframe occurs in the Timeline. If you add another keyframe, the content (except for actions and sounds) is copied from the previous keyframe.
• Frame (F5)
• Clear Keyframe (Shift F6) - removes the content but leaves the frame.
• Remove Frames (Shift F5) - removes frames

Exercise 2 - Frame-by-Frame Animation with Keyframes (using movieFinal.fla)

1. Hit Enter to preview the animation on the stage. Close the file and select File>New
2. Select Modify>Document. Set the frame rate to 22, select a light blue background, and set the dimensions to 700x350 pixels.
3. Notice the document has a single layer containing a single blank keyframe - this is the way all new documents appear by default.
4. Select the Brush tool with any color other than white and draw the first part of the capital X on the left side of the Stage.-- notice that the keyframe now contains a small black dot which means that it contains content.
5. Insert Keyframe or press F6. This copies all the content of Frame 1 to the new keyframe - draw the second half of the letter X.
6. Press F6 and continue with the next letter - you can click and drag (scrub) the Playhead back and forth to preview. You can do parts of a letter in a frame-- need not do the entire letter.
7. In the Frame View menu, you can display the contents right in the Timeline -- disadvantage is that you see fewer frames in the timeline. Save and close the file.

Exercise 3 - Onion Skinning (using onionFinal.fla and onion.fla)

1. Open the final file. Control>Loop Playback. Hit Enter, then Contro>Loop Playback to turn off. Then view play it back normally (without looping). Close the file and open onion.fla
2. Notice the snow layer has been locked, click on the snowboarder layer and click in Frame 2 and then hit F6 to add keyframe.Click on the snowboarder artwork to select it and move it to the right.
3. At the bottom of the timeline, click the second button from the left (Onion Skin). You will be able to see a ghost image of the Frame 1 content on the stage. This allows you to change the current artwork relative to the ghost images.
4. Onion Skin Markers - After you click the Onion Skin button, a gray bar with a draggable bracket on each end appears at the top of the Timeline. Start Onion Skin and End Onion Skin
5. Select the Free Transform tool in the Toolbox and click on the snowboarder to select it. Move your cursor just outside the upper right corner of the bounding box until it changes to a round arrow -- this indicates you can rotate the artwork. Add additional frames, repeating this. Save the file
6. Free Transform Tool (p. 121) - Corners diagonally (modify scale of object), side (modify width or height of object), clcik between handles dragging toward a handle (skew object), dragging middle handle across other side of object (flip object), click and drag center registration point (change center for transformations)

Exercise 4 - Understanding Frame Rate (using properties.fla) - How many frames your animation will try to play in one second

1. Press Enter to watch the animation play on the Stage.
2. In the Property Inspector, change the frame rate to 6. Press enter to make it take effect (this is a common problem -- when you change something in the Property Inspector, it is often necessary to hit Enter for it to take effect.
3. Press Enter to watch the animation at the slower rate - note it is a little jerky
4. The number of frames divided by the frame rate = length of movie in seconds - recommended frame rate of between 12 and 25 fps, perhaps 20-22.

Exercise 5 - Inserting and Deleting Frames (using frames.fla) - Adjusting the frame rate affects the speed of the animation, but it affects the entire movie. By inserting and deleting frames, one can adjust the speed of parts of the movie.

1. Click on Frame 1 of Layer 1 and click Insert>Frame, or use the keyboard shortcut F5. This extends the timeline Do this again
2. The light gray frames after the keyframe indicate no change in content; the small white square inside a light gray frame indicates the ending point of a frame range, which means the next frame will either be a blank keyframe or a keyframe.
3. To remove frames, click on the frame and select Insert>Remove Frames or the keyboard shortcut Shift F5.
4. Ctrl+click and drag allows you select a range of frames and then you can remove multiple frames at one time.

Note: If one is creating an animation, inserting a keyframe (F6) after a frame also doesn't change the content, but in the above example, using keyframes in the timeline for this purpose would make the timeline harder to read by the developer, because the keyframe is supposed to indicate a change. In addition, it might increase the processing load on the computer, thus potentially slowing down the animation.

Exercise 6- Copying and Reversing Frames (using properties.fla) - Creating a looping animation would be a lot of work if you had to draw all the frames over and over; with Flash the ability to copy, paste, and reverse a sequence of frames makes this easier.

1. Open properties.fla - in the Properties Inspector, make sure the frame rate is set at 12.
2. Click to the right of the layer name -- this selects all the frames on the layer.
3. Click in the selected frames and drag to the right -- while still holding down the mouse button, press te Alt key. A small plus sign witll appear to the right of the cursor, indicating you will duplicate, not move the frames. Release the mouse button
4. With frames 11-20 still selected, selecte Modify>Frames>Reverse. Save and close the file.

Exercise 7 - Testing Movies (using frames.fla) - Using the Test Movie and the Preview in Brower features

1. Open frames.fla. Choose Control>Test Movie. This generates a .swf file in the same folder as the .fla file. By default, all movies will loop.
2. With the swf file still open, select Window>Toolbars>Controller to display a small toolbar to control the animation. Stop, Play, Rewind, Step Back, Play, Step Forward, Go to End. Close the .swf window
3. Choose File>Publish Preview>Default - HTML. This generates an html file in the same folder as the .fla file and launches the browser with a preview of the HTML file (to show the movie) More details in Chapter 16..

FTP

CoreFTP is available for a free download at www.coreftp.com FTP client programs are the easiest way to uploading files from a site on your computer to a site on the server. In most cases, such a file upload is only permitted if an appropriate username and password is entered. Once the files are available on the server, the public typically can access these web pages through their web browser by following links.

Alternatively, one can use a browser to FTP.

Revised: February 4, 2006 Comments to William Pegram, wpegram@nvcc.edu