Tutorial:Motion tweening
From Anipedia
- How to prepare a drawing for tweening
- How to motion tween a symbol
- The use of registration, rotation points, scale and skew
- How to use easing and the graph editor
- How to copy motion
Contents |
[edit] Step 1: Creating a symbol
A motion tween is the fluid animation of a symbol in Flash. A tween controls speed, rotation, skewing and scale of a symbol.
However, a motion tween cannot be made without turning a drawing into a symbol. There are several ways to create a symbol. In this tutorial you will learn two. First, click and hole on the Create Rectangle tool on the toolbar (
) and select the circle. This can also be done by hitting its sequence of shortcut keys R, O, R, O. Click and drag on the stage to create a circle.
Your circle should look something like this. To create a perfectly round circle, hold down shift when clicking and dragging.
Now on the timeline, you can see that the white box (a blank keyframe), has turned gray. This means that on that layer, there is a drawing that is not being tweened. This is the circle you just created.
Your circle is a drawing, but it is not a symbol. Remember, drawings need to be symbols to be tweenable. The first method to turn a drawing into a symbol is quick, but not recommended, because you have less control over some preferences about the symbol. This method is done by right-clicking on the gray keyframe and selecting "create motion tween". This will automatically turn everything on the layer into a tweenable graphic. Do not do that for this tutorial. We are going to create a symbol using the selection tool.
Go to your toolbar and hit the selection tool (
), or hit its shortcut key, V. Click and drag around the circle on the stage. It will now have a dotted texture over it, which is letting you know the drawing is selected. Hit F8. This is the "create symbol" shortcut. It can also be done by right-clicking on a drawing and selecting "create symbol".
Once you hit OK, you will notice that your circle no longer has a dotted texture over it, but has a small blue bounding box around it. This means you have successfully turned your circle into a movie clip symbol, and it is ready to be tweened.
[edit] Step 2: How to Motion Tween
Now that you have a symbol, it is time to create your first motion tween. This is done in the timeline. If your timeline is not visible, hit CTRL+ALT+T, or go to Window and make sure Timeline is checked.
Your tween should look something like this:
Now we can move on to some more advanced functions of tweens.
[edit] Step 3: Center and rotation points
Every symbol has its own center and rotation point. A center point was established by the registration part of the convert to symbol process. It is marked by a little cross in the middle of your symbol (
). This can be useful for determining a good part on a symbol that is the focus point of your drawing or object. A tween does not look at a center point for rotation, and can be edited at any time without affecting animation. A rotation point, however, is critical to how a symbol behaves when you rotate it on a tween.
Select your circle by clicking on it with the selection tool. (If you cannot select it, move your timeline to a frame with a keyframe on it. You cannot select a symbol if it is in the middle of a tween on your timeline.) Right-click on your circle and select "Free Transform".
You will notice the blue bounding box has changed to a black bounding box with 8 control points and a white circle in the middle. The 8 control points handle scale, and the white circle is your rotation point, which is now editable. Changing the rotation point on a symbol that is already tweened will generate undesired results. This is because Flash is now tweening the same symbol with a different rotation point, causing an error that will generally make the symbol drift off and reappear in its proper place at the end of a tween. It is common practice to choose your rotation point before you begin tweening. Otherwise, if you change your mind later on, you will have to edit the rotation point on every other keyframe.
Let's try tweening with a rotation. Right-click on your tween and select Remove Tween. Right-click on your keyframe to the right and select Clear Keyframe. Go to frame 1. Select your circle. It should still be in Free Transform mode. Click and drag your rotation point to the top left corner control point. It should lock in place. Now, hover your mouse nearby the outside of the bottom right hand corner control point. Your mouse should turn into a circle-shaped arrow. Click and drag around your circle. The circle should be rotating around the rotation point you just moved. While moving, it should look something like this:
Now your circle is rotating around that rotation point. Go ahead and undo the rotation you just did (CTRL+Z). Create another keyframe a few dozen frames away, and on that keyframe rotate the circle about 45 degrees (you can get exact 45 degree increments of rotation by holding SHIFT while rotating). Right-click the gray space in-between the two keyframes, and select "Create Motion Tween". Hit "Enter" and it will play. Your animation should look something like this:
Also try clicking and dragging one of the 8 control points on the last keyframe of your timeline. This will make your circle larger. Hold SHIFT will dragging to keep the width and height consistent. Play the animation again, and you will notice the circle gets larger as it animates. Control points in-between the boxes are for skewing. This is also a keyable, or animatable attribute.
| A rotation tween with scale change. | A rotation tween with skew change. |
If you want your circle to do a full rotation, you have to tell Flash to do this in a properties window. Rotation is set to "auto", which is user-controlled. But creating a full rotation tween is impossible without telling flash to do a full rotation, since 360 degrees will land you in the same spot. You can tell Flash to do full circle rotations in the Properties window. To get the Properties window, select any frame of the tween on the timeline, select the Properties tool (
) or go to Window > Properties > Properties, or hit CTRL+F3. Now your properties window will appear.
Before doing this next part, remove your tween by right-clicking and selecting Remove Motion Tween, and remove your 2nd keyframe by right-click and selecting Clear Keyframe. Hit F6 to make a new keyframe in its place.
Now you can learn how to optimize your tweens for stronger timing with the easing tool and graph editor tool.
[edit] Step 4: Easing and the Ease In/Ease Out Graph
A default tween equates the same distance of motion from one frame to another. The idea of easing is to start a tween by making one end of the tween faster or slower than the other, resulting in smoother and more believable motion. The ease tool is found in the Properties window - the same place you did your full clockwise rotation.
After you set the easing bar either way, watch your animation by pressing "Enter" or going to Control > Test Movie, and notice how it will change the speed of the tween.
Easing allowed for some control of the speed of a tween, but it is very limited compared to the Graph Editor. Right next to to the easing tool is a button that says "Edit...". With the tween selected, click this button and the Graph Editor window will appear. Flash calls this the Custom Ease In/Ease Out window.
Take a look at the animations with their coinciding graphs:
|
No Easing |
Slow In 100% |
Slow Out 100% |
 |
 |
 |
[edit] Control points
As you can see at the beginning and end of each graph their is a black dot. This is a control point. The graph editor can support multiple control points at any point in the graph. Each control point, when selected, has two manipulator handles. If you drag one it drags the other along with it. It controls the curve for that point. This is useful for complicated tweens that may demonstrate, for example, an object being affected by gravity, like a bouncing ball. The only thing in the graph you cannot change is that it must have a minimum of two points (beginning and end), and those points must remain at 0% and 100%, respectively.
In the below images you will learn how to add another control point and how to manipulate it.
This animation was made using the graph beneath it:
My beginning and end control points have steeper curves than the easing slider can make, so if you are not satisfied with the ease sliders, remember that you can edit them in the graph editor, right next to the slider on the Edit... button.
Keep in mind though that if two tweens are sitting next to eachother and one of them has easing, the other one has to match the incoming speed of the other tween, otherwise you will get a strong sudden slowing down or speeding up effect. For example, if you end a tween on a 5% animation speed per frame, the next tween should be coming in at 5% per frame as well for a smooth transition. Sometimes flash will do this automatically for you. An easy and fairly accurate way to do this is to measure where your manipulators are based on points on the graph.
Now that you know how to use the Custom Easing graph editor, it's time to move on to the last part copying motion.
[edit] Step 5: Copying motion
You can keep creating keyframes to make tweens after the first one. But if there is a specific keyframe you would like to duplicate later on, there are two easy ways to do this. The first method is right-clicking on the frame and selecting Copy Frames. You can right-click and Paste Frames anywhere to paste what you had selected. A more controlled and visual way to do this is to click-drag select the frames (click on an area that is not already selected or it will drag a single frame) you wish to copy, hold down ALT and drag them where desired. It will make a duplicate wherever you drop it.
