My First Motion Tween

Animation Tweens

Before digital animation, animators had to draw or paint by hand - often with large teams of artists working on separate elements of the production. Animators would draw a start and end frame, then teams of ‘Tweeners’ would complete the ‘inbetween’ drawings.

Keyframing involves creating images at significant points in the timeline, then allowing the software to fill in the movement so that one image seamlessly transitions into the next. These automatic transitions between keyframes are called ‘inbetweens’, or ‘tweens’.

There are different types of ‘tween’ available in Adobe Animate that allow you to quickly and easily create smooth animation between your keyframes.

Motion & Classic Tweens

Motion and classic tweens both create movement, size, and rotational changes between two keyframes - as they smoothly translate a shape from one position to the next.

Take a look at this Adobe article on tweens for more information on the differences between the two types.

Shape Tweens

As the name suggests, shape tweens seamlessly transition one shape into another. As you can see below, shape tweens can also create motion transitions if the two shapes are in different positions.

Creating a classic tween

OVERVIEW

This tutorial will walk you through the basic process of animating in Adobe Animate.

The Two Rules of Adobe Animate Animation*

1. Objects to be animated MUST BE A SYMBOL.

2. Objects to be animated MUST BE ON THEIR OWN LAYER.

*These don't necessarily apply to traditional, frame-by-frame animation or to shape tweens.

...And One Other Important Note

Unlike most animation programs, Adobe Animate requires you to add time (frames) to the timeline before you can animate. Right-click > Insert Frame or use F5 to add frames.

Animating a Ball Moving Across the Screen

Let's animate a ball rolling across the stage.

Draw a circle. Use either the brush tool or the shape tool.
Select it, and convert it to a graphic symbol by choosing Modify > Convert to Symbol, or using F8.
Make sure the type is "Graphic," and name it something appropriate, like "ball."
Right-click on frame 20 and choose > Insert Frame, or use F5 to add frames to the timeline.
There is already a keyframe on frame 1. Go to frame 20 and add another keyframe by right-clicking > Insert Keyframe, or by using F6.
Move the circle to the other side of the stage.
Scrub through the timeline.

At this point, the ball remains on one side for 19 frames, and then jumps over to the other side. We want it to move smoothly. Rather than adding keyframes and moving the ball manually, we can use a tween.

8. Right click on the frames in between the two keyframes, and choose > Create Classic Tween. The frames will turn purple with an arrow to indicate the tween.

9. Scrub through the timeline, or better yet, play the animation by hitting Enter/Return.

Adding Easing

Our ball moves across the stage, but it is very mechanical and boring. Let's add some easing.

10. Click in a frame in the tween to display the tween properties in the properties panel.
11. Under the Tweening options, click and drag on the yellow easing number to the right and set the ease to 100 to ease out (faster in the beginning, slower towards the end).
12. Hit Enter/Return to see the effect.

Page updated

Report abuse