Motion Tweening More Advance

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).

Selecting the Oval tool in Flash CS3.

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.

Removing the stroke color.

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

Unselecting the object drawing and snap to objects options in Flash CS3.

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

A flat color circle drawn on stage in Flash.

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.

Adjustin the dimensions of a drawn shape.

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.

Beginning to adhust the radial fill.

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

Adding crayons to the radial fill in Flash CS3.

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

Hexadecimal color values of crayons for the radial color fill.

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

Filling the circle with the radial fill.

1.13 Select the Oval tool (O). Go to the Property inspector and select a solidblack 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.

The options for the Oval tool in the Property inspector.

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

An ellipse outline.

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.

Rotating the ellipse.

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.

Adding a nice line to the basketball.

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:

A basketball drawn in Flash CS3.

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.

Selecting a drawing.

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.

The creation of a movieclip symbol in Flash CS3.

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.

Locking and renaming a layer.

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

Inserting a fresh layer.

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

Dragging a layer to switch its position on the timeline.

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

The new layer hierarchy.

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.

Drawing a simple rectangle in Flash.

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.

Locking a layer.

Top of page

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.

Placing the ball into the initial position.

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.

Inserting a new keyframe in the timeline in Flash CS3.

…and a new keyframe will appear.

A new keyframe just appeared.

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 you want it to last more, but without changes. You will see this in a moment.

2.3 You should move the ball to a point where it will touch the floor. But you can’t see the floor now, because it exist only in the first frame of its layer. To change this, right-click on frame 11 of the floor layer and select Insert Frame.

Inserting a simple frame in your timeline.

…here’s the result:

A frame.

As you can see, the frame is represented by a small rectangle in your timeline. This shows you that the first keyframe of the floor layer lasts until frame 11 without any change. It has been prolonged in duration by the addition of a simple frame. And that’s exactly what you need, because the floor needs to be seen at all times, together with the ball, but without any changes.

Also, notice that you have added a frame while this layer has been locked. That’s perfectly OK. You can add or remove frames and keyframes from a layer even while it’s locked. Since you won’t be making any modifications to the floor layer, it is best to keep it locked, thus preventing any possibility of accidentaly adding or removing something from it.

2.4 Click on the second keyframe of the basketball layer to select it and then select the ball on the stage by clicking on it once with the Selection tool (V).

Selecting a keyframe and a movieclip.

2.5 Now that you have selected the basketball movieclip, move it towards the floor by using either the combination of Shift+down arrow on your keyboard (by far the easiest option) or with your mouse. I recommend using the keyboard, because you will move the ball straight down, while it is possible that you can accidentally move it left or right with your mouse. Since you need the ball to fall straight down, use your keyboard. Move it down to the floor.

The ball has been moved down.

2.6 OK. You will now animate this ball. Right-click either on the first keyframe of the basketball layer or anywhere between the two keyframes and select the Create Motion Tween option from the contextual menu.

Creating a Motion Tween animation in Flash CS3.

If you have done everything as I’ve shown you up until now, you should see a continuous arrow appear between the two keyframes, on a magenta background.

Your fist motion tween made in Flash CS3.

The image above shows how a successful motion tween looks like in the timeline. If anything went wrong, the arrow would be discontinued (dashed). That’s how Flash tells you that something doesn’t click.

To be able to make a successful motion tween animation, please note the following: You must use either a movieclip symbol (which is my favorite symbol, because of its versatility) or a graphic symbol. You cannot animate a simple drawing. If you try that, Flash will attempt to animate it, and you will get unexpected and bad results. Also, remember that for a motion tween to be successful, a single symbol must be present in the layer where the animation is taking place (either a movieclip or a graphic symbol). You can not have multiple symbols or a movieclip and some other drawings or objects in the same layer if you want to have a good motion tween animation.

2.7 Test your Flash movie by selecting Control > Test Movie.

You will see your ball falling to the floor again and again. This is standard Flash behavior – an animation will loop endlessly unless you stop it via ActionScript, but that is not important right now. As you certainly noticed, the ball is somewhat slow. Let’s speed up the animation. Close the test window by pressing the close button in its upper right corner, to return to the Flash authoring environment.

Closing the testing movie window.

2.8 Select Modify > Document to access the Document Properties window. Increase the Frame rate to 24 fps. Click OK.

Increasing the frame rate option.

2.9 Test your animation again by selecting Control > Test Movie. You should see your ball move much faster now. This is the result of the frame rate increase. The abbreviation fps means frames per second. It is the number of