Student Showcase

We will take a look at your new work which is ready to share.

For the Shape Tweens Assignment, we will discuss the following aspects of each:

  • Overall strength of the animation
  • Degree to which the file meets the needs of the assignment

Download

Classic Tweening Exercise Files

Classic Tweening

  • Classic tweening is often a better option than shape tweening for rotation.
  • Classic tweens require self-contained entities such as symbols, primitives, drawing objects, and grouped elements.

Rotation

Complete the PepperSymbol.fla tutorial in Chapter 7: Classic Tweening, Rotation pp. 379-381.

  • Rotation can be fine-tuned through the Properties panel. Click on the first keyframe of the tween, and look for the Rotate dropdown.

Classic Tween Properties

  • Ease and Edit apply a range of easing to the tween; Edit providing more advanced options.
  • Rotate, as we saw above, controls the type of rotation and the number of times it occurs.
  • Snap helps position a symbol along its motion guide (more on thsi later).
  • Orient to path applies only to tweens along a motion guide. It determines whether a symbol points toward the direction in which it moves.
  • Scale means that the current tween includes a change in scale.
  • Sync allows for some flexibility in looping animations, swapping graphic symbols, etc. More on this option later.

Scaling, Stretching, and Deforming

Continue the PepperSymbol.fla tutorial in Chapter 7: Classic Tweening, Scaling, stretching, and deforming pp. 382-384.

  • Distort and Envelope (Modify > Transform) are transformations that can be performed on shapes but not symbols. Therefore, objects with these transformations cannot be Classic tweened.

Easing

Complete the MalletNoEasing.fla tutorial in Chapter 7: Classic Tweening, Easing pp. 384-387.

  • A full Ease In (-100) starts the animation slowly and speeds up toward the end.
  • A full Ease Out (100) starts the animation quickly and slows down toward the end.

Using Animation

A Closer Look at the Timeline

timeline diagram
  1. Center Frame: In timelines that are long enough to scroll, this button centers the timeline on the playhead (the playhead does not move from the frame it is on).
  2. Onion Skin: A toggle button to turning on Onion Skinning (more on this soon).
  3. Onion Skin Outlines: A toggle button to turning on Onion Skin Outlines (more on this soon).
  4. Edit Multiple Frames: This button allows you to select more than one keyframe at a time, in order to edit many frames in one swoop.
  5. Modify Onion Markers: Contains a dropdown menu that controls functionality of the onion skin buttons.
  6. Current Frame: Indicates the current position of the playhead. You can move the playhead by scrubbing or entering a new value.
  7. Frame Rate: Indicates the movies frame rate in (frames per second.) You can scrub or type in a new value.
  8. Elapsed Time: Indicates how far into the movie the playhead is located, in seconds according to the frame rate and the frame number. You can move the playhead by scrubbing or entering a new value.

Onion Skinning

Complete the CuriousRabbit.fla tutorial in Chapter 7: Using Animation, Onion skinning pp. 397-399.

  • Onion skinning can allow you to see “through” the current drawing to what had gone on in the previous frames. This can aid in drawing sequential keyframes.
  • You can choose to see through as many frames as you like, backward or forward, in solids or in outlines.
  • When viewing onion skins, drawings get lighter as they are more distance from the playhead.
  • Onion 2 lets you see two frames behind and in front of the playhead (total of 5 frames); Onion 5 lets you see 5 on either side (total of 11).
  • As you drag the playhead, onion markers move with you.
  • The markers can be moved directly next to the playhead to increase or decrease the number of onion skinned frames.
  • Onion Skin Outlines does the same thing as Onion Skin, but shows outlines without fills (wireframe format).

Modifying Multiple Frames

Swapping graphic symbols

Complete the RabbitSwap.fla tutorial in Chapter 7: Using Animation, Swapping graphic symbols pp. 401-402.

You can swap a graphic symbol across multiple keyframes (which have tweens between them) at once. This techinque has two parts:

    1. Swap the symbol in the first keyframe.
    2. Click any frame between each pair of keyframes to select the tween span, then click Sync in the Properties panel (including the first tween.)

Combining Timelines

Movieclip timelines vs. graphic symbol timelines

Complete the CombineTimeline.fla tutorial on page 403.

  • Movieclips operate independently of the timelines they occupy.
  • Graphic symbols are synchronized with the timelines that contain them.
  • What ActionScript can do to:
    • Movieclips: stop, play, jump to various frames
    • Graphic symbols: hold their current position, play through once, loop
  • Sound in graphic symbols is ignored by a containing timeline.
Nesting symbols

Review the Grotto.fla tutorial on pages 404-406.

Motion Guides

Complete the MotionGuide.fla tutorial on pages 408-411.

Motion guides require their own layer, but can direct the path of a tweened, moving object.

    1. Right-click on the layer name of the layer containing the path you want to use (it should be drawn as a vector line.)
    2. Select Guide. The guide layer’s icon changes to a T-square.
    3. Select the layer that contains the tweened object you wanted guide.
    4. Click-and-drag that layer up and slightly to the right so that it locks under your guide layer. The guide layer’s icon changes to a comet.
    5. Click within the object’s tween in the Timeline, and select the Orient to Path checkbox in the Properties panel.

Working with Audio: Lip Synching

Review the TalkingPanda.fla tutorial on pages 406-407 of Foundation Flash CS5 for Designers.

Download

Lip Synching Files

Exercise: Lip Synching

In this exercise, you will be making the talking panda saying something new.

Open the file MakeHimTalk.fla from the Classic-Tweening-Exercise-Files folder. It has been stripped down from the original TalkingPanda.fla file so that you can have him say something new. I’ve also reduced the frame rate from 56 to 24 fps.

  1. Obtain a very short spoken word WAV sound file from somewhere free such as WavSource. Go for two to four words long (right-click on the link to the sound file in order to save it.)
  2. Import the WAV file into the Library.
  3. Click on frame 1 of the voice layer. Drag the sound file from the Library onto the stage. Click on this frame again, and in the Properties panel, under Sound, make sure that Sync is set to Stream.
  4. Double-click on the speaker icon for the sound file in the Library. Make note of exactly how many seconds the clip lasts. Multiply that number by 24, and that is the number of frames you will need in your movie. For example, my sample is 3.3 seconds. I multiplied that by 24 and rounded up to get 80 frames. Click OK.
  5. Remember your number of frames from step 3? Go to that frame number and insert a frame (F5) for each of your layers.
  6. Press Enter (Mac: Return.) You should hear your entire sound file and see the panda and his mouth throughout.
  7. Add a new layer above the mouth layer and name it labels.
  8. Now this will take a bit of time:
    1. Scrub the playhead to the right until you hit the first letter in the sound.
    2. Click on that frame in the labels layer and add a keyframe there (F6).
    3. In the Properties panel, give the frame a Label Name according to the letter or letter combination which is starting in that frame, then press the Tab key to commit it. For example, I heard the letter L starting in frame 7.
    4. Keep moving the playhead right and labelling frames in the labels layer until you have identified all the places where the mouth would change to a new position.
  9. Put keyframes in the mouth layer (F6) that match the placement of keyframes in the labels layer.
  10. Double-click the icon for the mouth icon in the Library. Make note of which keyframes within this graphic symbol corresponding with which letters in human speech. For frame 50, you may need to click the frame and view the full label in the Properties panel. You may want to jot down some notes for the letters in your sound file. For letters not listed, study your own mouth and find the nearest mouth shape. Return to Scene 1.
  11. Click on the keyframe in the mouth layer where the first word begins. Then click on the mouth symbol on the stage. In the Properties panel, under Looping, select Single Frame from the dropdown, and then put the appropriate frame number in the text box. Press the Tab key to commit. For example, for “L” I put 70.
  12. Repeat for the remaining keyframes on the mouth layer.
  13. Test your movie and make adjustments where necessary. It okay if you getting warning about duplicate labels (we won’t be doing any scripting for this file; scripting requires unique labels.)
  14. Save your .FLA file and turn it in.
Instructor Example

SWF file

FLA file

Student Examples

Student 1

Student 2

Student 3