Tutorials
Shape tweens
Morph a square into a circle with a shape tween, play it, and steer the morph with shape hints.
This page is also a lesson inside Phoenix: choose and start Shape tweens, and Phoenix points at each control as you go. It takes about 8 minutes.
To follow along here instead, start a new document with : 1280 by 720 pixels at 24 frames per second.
In this tutorial you will turn a square into a circle with a shape tween. A shape tween morphs one drawn shape into another: its outline, its position and its colors.
Phoenix has opened a new document for it.
1. Pick the Rectangle tool
Press R, or click the Rectangle tool in the toolbox. It shares a slot with the Oval: press and hold the slot to choose between them.
2. Draw a square
Hold Shift and drag on the left of the stage to draw a square.
Shape tweens work on shapes, not on symbols or groups, so draw it straight onto the stage as it is.
3. Go to frame 30
In the timeline, click the cell under frame 30.
4. Insert a blank keyframe
Press F7, or choose Insert > Timeline > Blank Keyframe. The square holds up to frame 29, and frame 30 starts empty, ready for the shape it should become.
5. Pick the Oval tool
Press O, or hold the Rectangle's slot and choose the Oval tool. Pick another fill color too, if you like: colors tween along with the shape.
6. Draw a circle
Hold Shift and drag on the right of the stage to draw a circle.
7. Make the shape tween
Right-click any frame between 1 and 29 and choose Shape Tween, or click one and choose Insert > Shape Tween.
The span turns green with an arrow.
8. The Frame tab
With a frame of the tween selected, the Properties panel's Frame tab shows Shape Tween in its Tween list. You can make or remove a tween from that list too, and set its Ease there.
9. Play it
Press Enter, or click the play button in the timeline header. The square slides across and rounds into a circle. Press it again to stop.
10. Back to frame 1
Stop playback and click frame 1. Shape hints, which steer a morph, go on the first keyframe of a shape tween.
11. Add a shape hint
Press Ctrl+Shift+H, or choose Modify > Shape > Add Shape Hint. A circle lettered a appears in the middle of the square.
12. Pin it to a corner
Press V for the Selection tool, then drag the hint onto the square's top-left corner. Hints on the first keyframe are yellow.
13. Go to the end keyframe
Click frame 30. The same hint waits there in the middle of the circle.
14. Say where the corner goes
Drag the hint onto the top of the circle's outline. The square's top-left corner will now travel to that point as it morphs.
15. Play it again
Press Enter and watch how the corner now sweeps to the top of the circle. Add more hints, up to 26, for more control; Modify > Shape > Remove All Hints clears them.
What you did
You morphed a square into a circle with a shape tween and steered it with a shape hint.
There are more tutorials, such as Motion tweens and the Motion Editor and Masks.
For everything this tutorial touches on, see Tweens and easing.