Classic Tween Animation



Watch and Try this

Keypad Shortcuts:
[F8] Converts a graphic to a SYMBOL
[F6] Creates a FILLED keyframe that copies content from its predecessor
Flash_Tween.png
A Basic "Classic Tween" looks like this - try following this recipe on a new flash file:

  • Draw a ball in frame 1, and convert it to a symbol using [F8]
  • Click on frame 24 and use [F6] to make an ending "keyframe"
  • Move the ball symbol in frame 24 down to define the "stop point"
  • Right-Mouseclick on frame 10 (or any frame in between) and choose CREATE CLASSIC TWEEN
  • TIMING - The distance BETWEEN keyframes dictates the speed at which elements move on screen - if you need something to move faster, reduce the number of "tween" frames there are between the keyframes

"Scrub" or Hit CTRL-ENTER to see a preview of your animation


If the timeline looks "broken" or incomplete - you may have broken one ot the three rules of classic tweening:

Three Golden Rules of Classic Tweening:

1. Only Symbols can Tween
  • An element MUST be converted into a SYMBOL before you try to tween it.
  • If you attempt to tween a "non-symbol", Flash will create one or more TWEEN1 symbols in the library. This becomes VERY confusing and should be avoided
  • [F8] Converts any graphic into a SYMBOL
Flash03.jpg
2. Only ONE symbol can be tweened in any Layer
  • Each element being tweened MUST be given it's OWN LAYER
  • You will have to create multiple layers to accommodate all the movement in any scene
Flash04.jpg
3. Flanking Keyframes must Match (for CLASSIC Tweening)
  • A tween needs to be flanked by a STARTING KEYFRAME and an ENDING KEYFRAME that contain identical INSTANCES of a symbol.
  • Think of them as BOOKENDS that MUST match.
  • Use the [F6] key to create a "clone" of the starting keyframe
Flash05.jpg

Exercise:
Remember that frame by frame bouncing ball animation you made last class?
Create your "Bouncing Ball" animation using efficient TWEENS
  • What's easier this time?
  • What's harder, or not as good?

Post or hand in BOTH versions so they can be compared!

Actionscript 3 Motion Tweening

Check out this YouTube intro to AS3 Motion Presets and tweening
Tweening is a very efficient, but technical method of animation in Flash. A single "keyframe" dictates the START of an objects motion, and other "keyframes" dictate the "waypoints" that control the objects location or properties. The computer will create all the logical "in between" frames.
  • Draw a background in layer 1
  • Create a new layer
  • Create an object in frame one of the new layer - ie a red ball
  • Click on frame 24 of that layer and hit F5
  • Right mouse click the in between frames and select MOTION TWEEN

The Two Golden Rules of v3 Motion Tweening:

1. Only Symbols should Tween
  • An element SHOULD be converted into a SYMBOL using [F8] before you start tweening.
  • Name the symbols appropriately, and edit them in the library

2. Each tweened object MUST have it's own layer
  • Each element being tweened MUST be given it's OWN LAYER
  • You will have to create multiple layers to accommodate all the movement in any scene