Flash Explained

This lesson will be the first in a series where all the animation techniques in Flash CS3 will be explained in detail. 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.

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.

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 frames the playhead in your Flash movie passes through in 1 second.

Fine. Close the test movie window now.

Top of page

3. Making the ball bounce

Now, you are going to repeadetly insert new keyframes and change the position of the ball to be able to create the bouncing movement.

3.1 To avoid having to prolong the duration of the first keyframe in the floor layer each time you are moving your ball around, insert a Frame in frame 80 of the floor layer. Do like you did before: right-click on the frame and select Insert Frame.

You will easily remove any surplus frames later, don't worry about it.

3.2 Right-click in frame 21 and insert a Keyframe there. If you are not sure where you are in the timeline, just look below the layers. There, you can clearly see where you are. The image below shows you the number of your current keyframe circled in red.

3.3 Select the ball with the Selection tool (V). You shoul place the ball upwards again, because it is supposed to rebound of the floor. But, this time, you should move it a little bit downwards. I moved it by 40 pixels downwards. Why is this so? Because you must simulate reality. And in the real world, the Earth's gravity force pulls the ball so it never returns in its starting position, but always rebounds to a lower position than the last time.

3.4 After you have positioned the ball, right-click between the 2nd and 3rd keyframes in the basketball layer and select Create Motion Tween from the contextual menu, just like you did for the first segment of your animation.

Test your Flash movie again (Control > Test Movie) and see how the ball is going up and down. Don't be surprised if it suddenly disappears. This is because the floor layer lasts longer than the basketball layer in the timeline.

3.5 You have to return the ball to the floor now, in a new keyframe. Instead of having to reposition it each time (on the floor, the ball will always land on the same spot) manually, you can accomplish this more easily.

Right-click on the second keyframe in the basketball layer and select Copy Frames from the contextual menu.

3.6 OK, now right-click in frame 28 and select Paste Frames.

In this new, 4th keyframe, the ball will be positioned exactly as it is in the 2nd keyframe. This is because when you copy a keyframe in Flash, all of its contents get copied too. Every single object inside it, with all of its properties (position, size, etc) gets copied.

3.7 Create the 3rd motion tween animation by clicking between the 3rd and 4th keyframes and selecting it from the menu.

You certainly noticed that this segment of the animation, the third motion tween, is a little bit shorter than the previous ones. This is also to make it all look more real: since the Earth's gravity pull is acting on the ball, there is now a shorter distance for it to go from the highest point to the floor. The ball's fall gets shorter, so you have to make your motion tween shorter accordingly.

3.8 Repeat the steps from 3.2 to 3.7, each time repositioning the ball in its upper position and just copying and pasting a keyframe for the 'floor' position. Also, make the motion tween segment smaller each time. You can see how I did it below. The numbers at the bottom of the image indicate the keyframes in the timeline.

3.9 Test your movie (Control > Test Movie) and see if you are satisfied with the result.

Top of page

4. Adding the easing effect to your motion tween animation

The motion tweens you made so far are fine, but still the animation doesn't look realistic. Why? Because currently the ball isn't accelerating and decelerating. And the gravity pull does just that: In real life, while the ball is falling, it should be gaining in speed because of the gravitational pull. Meaning its speed should increase as it is approaching the ground. This is called acceleration.

Also, when bouncing back up, its speed should decrease, again because of the gravitational pull. As it is moving up, its slowing down. This is called deceleration.

Luckily, Flash has just got an option in store for you - the easing option - which is made for simulating acceleration and deceleration. Let me show you how to apply it to your current animation.

Save your document before proceeding! Always remember to do that.

4.1 Select the first keyframe in the basketball layer.

4.2 Go to the Property Inspector. You will find the easing option on its left side. Click the little arrow next to it and a slider will appear. Drag it down until the value reaches -100. This is called easing in or accelerating.

4.3 Test your movie (Ctrl+Enter on a PC or Cmd+Return on a Mac) and watch how the ball accelerates towards the floor during the first segment of the animation.

4.4 Back to the authoring environment (Flash working space), select the second keyframe by clicking on it.

4.5 This time, set the Ease option to 100, which means easing out or decreasing speed (decelerating).

4.6 For each subsequent keyframe, you should set the easing option a value that's smaller then the previous one, because the ball is losing power with each bounce. Here's how you should set it to get a natural effect - a ball that slowly comes to a halt:

And that would be it. Test your movie to see the ball bouncing. You have just learned how to do a basic motion tween animation in Flash CS3, the difference between frames and keyframes, and how to achieve an easing effect. In next Flash CS3 animation lessons, I will explain to you how to animate shapes, morph them, how to animate effects and more.

Download the source file for this lesson

Comments

Submit a comment