Adobe Animate: Tweening

Tweening

The term Tweening comes from “in-betweening”, it refers to the process of creating smooth transitions from one drawing to another to create the illusion of motion. There are 3 types of Tween in Animate: Motion, Classic and Shape Tweening. You can find out more about the difference between themhere. We will mainly be using Classic and Shape Tweens in this class.

You can watch the finished example below and download the .fla file here:

https://vimeo.com/282334538

Classic Tweens

Classic Tweens can only be applied to symbols. It can be used to tween properties such as position, scale, rotation, color effects such as tint and alpha, among others. To create a classic tween:

  • Drag an instance of a symbol to an empty Keyframe in a layer.
  • Position the playback head where you want to end the tween sequence
  • Right click on the layer and select Insert Keyframe.
  • Click and drag on the instance to change its position.
  • Right-click on the Timeline, between the two Keyframes and select Create Classic Tween. When you test the movie, you will see the element smoothly transition from one Keyframe to the other.
Screen Shot 2018-06-04 at 3.23.00 PM
A Classic Tween will appear as blue with an arrow on the Timeline

Easing

The resulting motion is perfectly regular, thus feeling a bit mechanical. One common way of creating more interesting/realistic motion is applying “ease-in and ease out” on an existing motion path:

  • Click on the Tweened area of the Timeline
  • Toggle the Tweening tab within the Properties panel and click on the little Edit Easingicon.
  • Add 2 points (1 towards the beginning and one towards the end) to create an S shape (the flatter the line is, the slower the motion will be – we want the motion to be slow at the beginning and end of the motion path).
Screen Shot 2018-06-04 at 3.13.43 PM
The pencil “Edit Easing” icon
Screen Shot 2018-06-13 at 2.21.52 PM
The edited motion path

Guide Layer

In cases where the motion isn’t a straight path but a curve or more complex shape, you must use a Guide Layer to define that path and pair it with the element which is supposed to follow it.

  • Create the element that will follow the path on a new layer and name it.
  • Create a new layer for the guide and name it (i.e: nameOfElement_guide) and draw the path (you may use the pen tool, line tool, or pencil tool etc.). Make sure the line is very thin (0.1pt or Style Hairline)
  • Make sure there are corresponding Keyframes on both layers at the beginning and end of the motion
  • Right-click in the area between the two Keyframes in the Timeline of the element and select Create Classic Tween
  • Right-click on the name of the guide layer and select Guide
  • Select the Free Transform Tool (Q), activate the Snap to Objects icon (the little magnet at the bottom of the Tools panel (or go to View > Snapping > Snap to Objects)
  • Go to the first Keyframe for the path and click and drag the element so that its anchor point snaps to the beginning of the path.
  • Go to the last Keyframe for the path and click and drag the element so that its anchor point snaps to the end of the path.
  • Click and drag the element layer to nest it under the Guide layer
  • Preview to see the element follow the path
  • Turn the eye-icon of the Guide layer off to hide it.
Screen Shot 2018-06-07 at 3.20.38 PM
The “sun” layer is nested under a Guide layer called “sun-guide”. The latter is hidden from view and only serves as a reference for the “sun” layer’s motion.