Animation

Tweens and easing

A tween fills in the frames between two poses. Phoenix has three kinds of tween, each suited to a different job.

Classic tweens

1. Put an instance of a symbol on a keyframe.
2. Add a second keyframe later on the same layer (F6) and change the instance there: move it, scale it, rotate it, or change its color effect.
3. Right-click a frame between them and choose Classic Tween, or choose Insert › Classic Tween. You can also pick Classic Tween from the Tween list in the Frame tab's Tweening section.

The span turns lilac with an arrow. Click any frame in it to set its options in the Tweening section:

Ease

How the motion speeds up and slows down. See Easing.

Rotate

Auto turns the shortest way; Clockwise and Counter Clockwise add whole extra turns, as many as you enter; None stops it rotating.

Snap

Snaps the instance's registration point onto a motion guide.

Sync

Keeps a graphic symbol's own animation in step with the timeline. How the graphic plays (loop, play once, single frame and so on) is set on the instance; see Looping for graphics.

To move an object along a curved path, draw the path on a guide layer above it. See Motion guides.

Shape tweens

1. Draw a shape on a keyframe.
2. Add a keyframe later on the same layer and draw, or reshape, the shape it should become. Colors and strokes can change too.
3. Right-click a frame between them and choose Shape Tween, or Insert › Shape Tween, or pick it from the Frame tab's Tween list.

The span turns green. Shape tweens work on shapes, not on symbol instances or groups; break those apart first. Gradients and stroke widths tween along with the outline.

Shape hints

Shape hints tell a shape tween which point of the first shape becomes which point of the last, so a morph keeps its corners where you want them.

1. Put the playhead on the first keyframe of the shape tween and choose Modify › Shape › Add Shape Hint (Ctrl+Shift+H). A lettered circle, starting at a, appears in the middle of the shape.
2. With the Selection tool, drag the hint onto a point of the shape's outline. Hints on the first keyframe are yellow.
3. Go to the tween's end keyframe, where the same letter waits in green, and drag it to where that point should end up.

You can add up to 26 hints. To remove one, drag it off the stage; Modify › Shape › Remove All Hints removes them all. Hints are saved with the tween in FLA files too.

Motion tweens

Put a symbol instance or a text block alone on a keyframe, click a frame of its span, and choose Insert › Motion Tween (or right-click the frame and choose Motion Tween). The span turns blue; a span only one frame long at the end of the layer first grows to one second. From then on you animate by changing the object rather than by adding keyframes:

• Move the playhead to any frame in the span, then move, rotate or scale the object. Phoenix adds a property keyframe there.
• The object's motion path is drawn on the stage with its property keyframes. Drag a property keyframe on the path to move it, or drag the path between keyframes to bend it.
• Press F6 inside the span to add a property keyframe without changing anything, or F7 to end the motion there.
• Lengthen or shorten the span and the motion stretches to fit.
• Check Orient to path in the Frame tab's Tweening section and the object turns as its motion path turns.

The Motion Editor

Open Window › Motion Editor and select a motion tween to see each property as a curve over time: X and Y position, rotation, skew and scale. For a symbol instance, the list also has its color effect (alpha, brightness, tint and the advanced color percentages and offsets) and the numbers of each of its filters, such as blur, strength, distance and angle. Pick a property from the list to edit its curve:

• Drag a point to change the value or the frame; drag its handles to shape the curve.
• Double-click the curve to add a point there, or use Add Keyframe to add one at the playhead. Select a point and press Delete, or use Remove, to delete it; the first point stays.
• Type exact numbers in the Frame and value fields beside the buttons.
• Property ease applies a preset ease (Sine, Quad, Cubic, Back and others) to the stretch after the selected point, or to the whole curve when no point is selected.
• Easy Ease slows the motion into and out of the selected point (every point, with none selected) by flattening its handles a third of the way to the points either side; Ease In and Ease Out do one side only.
• Tick Speed to draw how fast the value changes over the curve, on its own scale: a smooth ease shows as a hill, a sudden start as a cliff.
• Tween ease eases the whole tween, from -100 (ease in) to 100 (ease out). A property that the file marks to ignore the tween's ease keeps its own timing.

Changing an instance's color effect in the Properties panel part way through a motion tween keys it there too, just as moving it does.

Select an instance with the Time Remap behavior and the list has Frame shown (Time Remap): the frame of the symbol it shows, over the frames of its keyframe. Shape it like any other curve: ease out of a freeze, speed up into slow motion, or bend a run backwards. Between two points without handles the frame shown runs in a straight line, as when it is keyed in the Behaviors panel; keying a value there afterwards keeps the curve's handles.

Motion Sketch

To move an instance the way your hand moves, select it and choose Control > Motion Sketch. Press on the stage and move the pointer: the movie plays from the playhead, and the instance follows where you point until you let go or the movie comes round to the start again. The path is kept as a Recorded Motion behavior with a key a frame for how far it moves across and down. Change those keys in the Behaviors panel, turn the behavior off, or sketch again to replace it; Bake turns it into ordinary keyframes.

Easing

Easing makes motion feel natural: real objects take time to get going and to stop. Set the Ease on the Frame tab for any classic or shape tween.

• Classic eases with a single amount: negative values ease in (start slowly), positive values ease out (end slowly).
• Presets come in families such as Quad, Cubic, Sine, Back, Bounce and Elastic, each in In, Out and In Out forms.
• Custom lets you draw your own curve.

Custom ease curves

Click Edit... under Ease to open the curve editor. The horizontal axis is time across the tween; the vertical axis is how far the change has got.

• Drag the points and their handles to shape the curve.
• Linear resets it to a straight line.
• Save... stores the curve under a name in the Preset list, for use in any document; Delete removes one.
• Export... and Import... share curves with other people as JSON files.

Motion presets

Window › Motion Presets... keeps a collection of reusable motions.

Save Current...

Saves the selected motion tween as a preset.

Apply

Applies the chosen preset to the selected object.

Import..., Import Folder...

Brings in motion preset files (.xml).

Export..., Delete

Shares or removes presets.