Beginners Flash Tutorial – Tweening Objects

Creating Motion with Flash

This Adobe Flash tutorial has been prepared with relation to Flash 8, although the principles covered apply to all versions of Adobe Flash.

This Flash tutorial introduces the fundamentals of using Tweening to create the concept of motion.

Basic Tweening in Flash

This resource has been prepared with relation to Flash 8, although the principles covered apply to all versions

This tutorial introduces Shape and Motion Tweening in Flash.

Tweening is one of the basic building blocks of animation. An animation is basically a sequence of images combined and displayed in a way that makes it appear to the human eye like a moving image. Tweening is one of the processes used to accomplish this.

When creating an animated sequence, a set of still images represent different stages in the animation. The illusion of a moving image is achieved by showing the images in fast succession, for example, the default speed for a movie created in Flash is normally 12 frames per second, meaning that the movie presents 12 still images to the viewer every second.

To achieve such effects manually, animators basically have to create each of the images in turn (one for each frame), which is obviously very labour-intensive. This is where digital tools like Flash can prove extremely useful, as they have built-in functions to create some of the frame images using computation. The idea here is that you just create the images at key points in the animation (keyframes) and use Tweening to get Flash to work out the frames ‘in-between’.

Let’s create a simple animation to demonstrate:

Open Flash and create a new document. Draw a shape on the stage, select it using the select tool

(either double click on the shape or click and drag the area around it).

Convert the shape to a graphic symbol either by pressing F8 or choosing Modify > Convert to Symbol. Give the symbol a name and select the Graphic radio button for the type; press OK.

Now click on Frame 10 and create a Keyframe there by pressing F6 or choosing Insert > Timeline > Keyframe:

Still on Frame 10, move your Graphic symbol to another position on the stage. Test your animation by clicking on Frame 1 and pressing Enter, you’ll see that the shape remains in it’s original position until Frame 10, when it ‘jumps’ to the new position. To achieve a smoother transition between these two images, we’re going to apply a Motion Tween. Click on Frame 1 and choose Motion from the drop-down list on the Properties panel (Window > Properties > Properties if it isn’t visible):

The purple area with the arrow on the Timeline indicates that a Motion Tween is operating between the two Keyframes.

Now select Frame 1 and press Enter again, you’ll see that Flash has animated the sequence by calculating what should appear on each of the frames along the way.

Experiment with the Ease Tween setting (on the Properties panel when you select Frame 1), which controls the amount of acceleration/ deceleration in the movement.

Now to try a Shape Tween, create a new layer in your movie – use the new layer button

or choose Insert > Timeline > Layer, then lock the first layer:

On your new layer, create another shape; this time don’t convert it to a symbol. Select Frame 10 on the new layer and insert a Keyframe (as above). At Frame 10, delete your shape and draw a different one in its place (e.g draw a circle on the first frame and a square on the tenth). Now select Frame 1 and choose Shape Tween from the Properties panel:

The green area on the Timeline indicates the Shape Tween. Now, select Frame 1 and press Enter to see your animated effect.

Again, you can experiment with the Tween controls to explore the various Shape Tween settings.