Introduction to Flash - Creating a Motion Tween

This tutorial will show you how to create basic motion with Flash, referred to as a motion tween. Download the files to see working examples or start by creating a new file. First go to File > New...

This will bring up the New Document window, in the general tab only one option is available to you so click on Flash Document and click Ok to complete,

A blank flash document will appear ready to begin animating. We have already looked at the timeline and layers so now we can get on and use them by creating our first animated object in Flash. To keep it quite simple I am going to stick to basic shapes, you can experiment with more elaborate designs later. To start with click on the Oval tool.

Oval tool

Using the Oval tool I have clicked and dragged to form a simple circular shape to the left of the stage or work area. Remember if you hold the Shift key down as you draw out the circle it will always be in perfect proportion. Once you have completed your shape release the mouse and move to the black arrow tool or selection tool so we can move it around and manipulate it later. You will also notice that a Keyframe, black circle has appeared in the first frame of the timeline this tells you and Flash that an object exists on the stage that can be animated.

Black arrow tool

Animation has a number of rules to create motion, most importantly the object mustbe solid when moving it from one place to another. This can be a little complicated to understand at first but essentially unlike most drawing packages when you draw an object in Flash, as we have here, Flash does not see one object it sees every single pixel as a separate object. Animation of this type must have only one item per layer animating at any one time. Therefore the picture here is not viable. Flash needs to recognise the circle we have drawn as one object not hundreds on one layer so we need to group the pixels together to form a solid shape. Therefore with your black arrow selected click and drag across the shape you have drawn without touching it. This is best done by clicking far away from it and dragging diagonally until you have picked up every pixel.

When you have successfully selected every pixel in the shape with the Black arrow tool the image should look like it has a pattern across it, this is known as the Moiray Pattern, a graphic design term to describe pixel visibility.

Keeping the pattern go to Modify > Group. Selecting group will link all the individual pixels together to form a solid shape that can be animated. Now go to the next step...

A successful grouping of the pixels is illustrated by a blue keyline around the object, it is always a square / rectangular shape and is invisible to the end user. Now move to the next step...

Now we can create the animation of the ball shape moving across the screen. As you will have noticed we created our first Keyframe when we created the shape but animation needs more than one Keyframe so first we decide on where on the timeline our animation will finish, remember Flash works at 12 frames per second so 12 frames on is 1 second of animation. that in mind I have clicked on a random frame on the layer. Once you have highlighted a frame continue to the next stage.

Now is a good idea to name your layer as you will find as your animations become more elaborate and you end up with lots of layers a description of its contents becomes very useful. Double click on the layer name and type a new description, keep it short but useful, in my case I have called the layer ball. Now click else where and the name will save.

With the frame highlighted select Insert > Timeline > Keyframe. This will add a new frame to the timeline.

The timeline will now look something like this, two Keyframe's separated by a grey space. We have now created a block of time for the animation to occur within. With the black arrow still selected, click and highlight the new Keyframe, then click the shape on the stage, then continue.

Click on the shape and move it by keeping the left mouse button down, to the other side of the stage then let go of the mouse. This places the object into a new location and tells Flash the finishing location of the shape at the end of the animation. The first Keyframe indicates the start point of the animation Now go to the next step...

Animation always starts at the beginning, so to complete the process click on the first Keyframe again and you will be transported to the shape in the original location. At the moment this is in essence a animated gif with a series of frames where the object has changed but it is not strictly animated. Then come the magic. Move down to the Properties bar and from the Tween menu select Motion, then go to the next step...

Success will result in blue replacing the grey space in between and a solid arrow pointing in the direction of the second Keyframe, if you have a broken arrow there is a problem, possibly the object was not group and therefore the process needs to begin again. This is a completed Motion Tween.

Press the Return button and Flash will play the result, you should see the ball shape moving smoothly across the screen from start to end point. Well done. This is now complete, select another option from the main menu.