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):
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.
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.
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.
…here’s the result:
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).
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.
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.
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.
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.
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.
2.8 Select Modify > Document to access the Document Properties window. Increase the Frame rate to 24 fps. Click OK.
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