logo Send us mail:
WhatsApp or call:
+234 (0)808 881 1560
Back to Flash and ActionScript
How to Create Motion Tween Animation in Flash CS3
Ishola Ayinla    Jul 4, 2017 at 12:24 PM    1    3201

Hello everybody!

Please how can I create motion tween animation in Adobe Flash CS3?

Back to Flash and ActionScript

1 Answer
Ishola Wasiu says...
Jul 4, 2017 at 11:32 PM

Motion tween animation is one of the most widely used in Flash, so it makes sense to begin with it. You are going to learn:

  • How to draw a basketball using the great drawing tools available,
  • How to create a movieclip symbol, which is a must for any motion tween animation,
  • How to create keyframes,
  • How to create easing effect for better realism and more.

You can see the example of the animation you are going to create below. It is the classic example: an animated, bouncing ball.

1. Creating the basketball movieclip

1.1 Open a new Flash document by selecting File > New. In the window that opens, select Flash File (ActionScript 3.0) and click OK.

1.2 Click on the Rectangle tool icon and hold your mouse until the menu appears. Select the Oval tool (O).

1.3 Go to the the bottom of the Tools panel and block the stroke color, because you won't need it here. Just click on the small color square near the pencil icon and when the palette shows up, click the No color button (see it in the image below, on the right). For the fill, choose any color you like.

1.4 At the very bottom of the same panel, check if Object Drawing and Snap to Objects options are unselected (turned off).

1.5 Click anywhere on the stage with the Oval tool (O), start dragging your mouse and draw a circle.

1.6 Select the circle by clicking on it with the Selection tool (V). Go to the Property inspector and enter the new dimensions for the circle: 85 px.

1.7 Deselect the circle by clicking anywhere on the stage with the Selection tool (V).

1.8 Select the Paint bucket tool (K) and go over to the Color panel.

1.9 In the Colors panel, do the following:

  • Click the paint bucket icon to select the fill color.
  • Choose Radial in the Type drop-down menu.
  • Add two more crayons (the little colored squares near the gradient bar). Do this by simply clicking anywhere between the two existing ones, the black and the white.

1.10 Now, click and drag the first crayon a little bit to the right and change its color to #EFA201.

1.11 Move the other crayons as well, so that they match the positions shown in the image below. Also, change their colors to (from left to right):

  • #EFA201
  • #FF5B15
  • #FF5B15
  • #000000

1.12 Using the still selected Paint bucket tool (K), click on the circle to fill it with your newly made radial fill.

1.13 Select the Oval tool (O). Go to the Property inspector and select a solid, black line with a thickness of 1 for the stroke. Then block the fill color by choosing the no color option for it, just like you did before for the stroke color.

1.14 Draw an ellipse on the stage, like the one shown below.

1.15 Select the Free transform tool (Q) and click on the ellipse with it to select it. Then rotate it. Do this by bringing your mouse over any of the corners, clicking and dragging.

1.16 Use the Selection tool (V) to:

  • Select the ellipse and drag it over the circle.
  • Click on an empty area to deselect the ellipse.
  • Select the outer part of the ellipse, which is sticking out of the circle.
  • Delete this part by pressing either Delete or Backspace on your keyboard.

1.17 Play around with the oval tool to get a few more curves, add them to the circle until you have a nice looking basketball:

1.18 Now, still using the Selection tool (V), select the whole basketball. Click and drag around it to select all the fills and strokes too.

1.19 Select Modify > Convert to Symbol (or press F8) to convert this drawing into a movieclip symbol.

  • Select Movie clip as type.
  • Call it basketball and click OK.

You'll notice that a blue outline has appeared around your basketball. This is Flash telling you that this is a symbol and not a simple drawing.

1.20 Go to the timeline and click on the little dot beneath the padlock to lock this layer. Then double-click on its name and rename it to basketball.

1.21 Click on the Insert Layer button to make a new layer and call it floor.

1.22 Click and drag the floor layer downwards, until you see a thick dotted line appear. Release your mouse button then.

1.23 The floor layer will now be beneath the basketball layer.

This makes sense, because the basketball will bounce off the floor, so it has to be in a layer above it.

1.24 Creating the floor is easy. Just select the Rectangle tool (R) and draw a nice rectangle at the bottom of the stage. Make sure it spans the stage from side to side.

I used a linear gradient because I find it more real that way. I also removed the outline (stroke).

1.25 Lock the floor layer. You won't be adding anything inside it anymore. And it's better to have it locked so you don't put anything in it by accident. I always work like that.

Also, unlock the basketball layer.

2. Making your first motion tween animation

2.1 Select the ball by clicking on it once with the Selection tool (V). Move it upwards into the start position - somewhere near the top edge of the stage. You can move it either by clicking and dragging it with the Selection tool or by using the arrow keys on your keyboard.

NOTE: When moving objects with arrow keys in Flash, pressing an arrow key moves your object by 1 pixel at a time. If you want to move it faster, just hold down Shift and then press the arrow key(s). Your object will then move by 10 pixels after each press of an arrow key.

2.2 Right-click in frame 11 of the basketball layer and select Insert Keyframe from the contextual menu.

...and a new keyframe will appear.

NOTE: A Keyframe is a point in your timeline where something changes. Whenever you want to create movement, or animate a property of a movie clip, add something, you must insert a Keyframe. On the other hand, a Frame is used to prolong the duration of a Keyframe, whenever yo

Full Details