Illustrate and Animate a Bouncing Ball: Part 1 - Adobe Flash
Part 1 of this tutorial will take Flash novices through the fundamental principles behind drawing and animating vectors in Flash. We'll be drawing and animating a bouncing beach ball. Prior knowledge of Flash will of course help, but the following techniques should be accessible to everyone and with most software versions. Part 2 coming soon...
Final Image Preview
Below is the final animation we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join VECTORTUTS PLUS for just 9/month.
Step 1: New Document
Let's begin by opening a new document (File > New...). Just a Flash File (ActionScript 2.0) document is fine; the Actionscript version isn't relevant as we won't be using any.
Step 2: Document Settings
Use the Properties Inspector at the bottom of your screen to enter the Document Properties, click the dimensions button. First, give your document a title, then give the Stage (the area of your document which will be visible when published) dimensions of 600px by 400px. The background color we'll leave white, but change the Frame Rate to 21 fps (Frames Per Second). 21 fps gives a quick, smooth rate of animation.
Step 3: Layer
Organization is key when working with Flash, so before we start drawing our ball, let's name the layer it's going to sit on. Double click Layer 1 and call it "Ball."
Step 4: Ball
Select the Oval Tool, define a stroke and a fill color, such as those shown. Next draw a uniform circle (by holding Shift and dragging the mouse). Also, use the Properties Inspector to give the Stroke a 3px weight.
Step 5: Symbol Creation
By creating symbols in Flash you can use multiple instances of the same objects within one file. Symbols are all accessible from the Library palette (Window > Library). By changing a symbol, all instances of that symbol within the file will be changed.
We're going to turn our circle into a symbol which will become our ball. Select the whole circle and press F8. Name it "mc_ball," choose to turn it into a Movie Clip symbol and click OK.
Step 6: Shadow
Add a second layer underneath the "Ball" layer and call it "Shadow." Within the first frame of this layer draw an ellipse to form a shadow under the ball. Remove the stroke and color it #E2E0E5. Turn it into a symbol just as you did before with the ball, then name it "mc_shadow."
Step 7: Position
Position the two symbols at roughly the correct height to suggest that the ball is sitting on the ground. In the Align palette (Window > Align) check To Stage and center the two symbols horizontally.
Step 8: Add Keyframes
We've created our symbols in their most basic form, now let's begin to animate them. Hold Shift and click on frame 20 of both layers on the Timeline. Go to Modify > Timeline > Convert to Keyframes or press F6 to turn these frames into Keyframes. Keyframes represent points along the timeline where something happens. This point on the Timeline will be the end of the animation; in other words the ball will have bounced up from the ground, reached it's apex and returned to this starting position. The same applies to our shadow: it will have faded as the ball rose and returned to this starting state at frame 20.
Step 9: High Point
Now let's add the point at which the ball is at it's highest. Select frame 10 on both layers and press F6 to turn them into Keyframes.
Step 10: Move it!
With the Slider still at frame 10, move the ball symbol vertically upwards to some point on the Stage. Select the Free Transform Tool and make the instance of the "shadow_main" symbol wider.
Finally, with the shadow selected, go to Color on the Properties Inspector and change it to an Alpha value of 30%.
Step 11: Tweening
Tweening is the process by which Flash automatically generates all the stages between an objects or shapes two states.
We're going to tween the frames between our first frame and halfway along the animation at frame 10. Select any frame between 1 and 10 on both layers and refer once again to the Properties Inspector. Choose Motion from the Tween select and you'll see the resultant frames turn purple.
Step 12: Easy Tiger
Move the Slider back and forth along the timeline with your mouse and you'll see the ball and shadow nicely animated. The speed of this movement is however completely uniform. We need the ball to decelerate as it reaches it's apex and we can do this with ease (ha ha).
Again, with one frame of each layer selected (within the tweened area) refer to the Properties Inspector. Change the Tweening to Ease out with a value of 100. This will slow down our climbing ball.
Step 13: Back Down to Earth
Having successfully animated the rising of the ball, repeat the tweening steps for frames 11 - 20. This time ease the motion tween in -100, causing the ball to accelerate as it approaches the ground.
Step 14: Check it!
Press Command + Enter to view your animated ball so far. It should look like the animation shown below.
Step 15: Extra Touch of Realism
Assuming our ball is made of something a little more flexible than diamond it's going to change form slightly upon impact with the ground. Let's add one last Keyframe where the ball flattens momentarily.
Select frame 21 on both layers and press F6 to turn them into Keyframes. Then use the Free Transform Tool to squash the "ball" symbol from the top edge (hold Alt as you do so to keep the bottom edge where it is).
Step 16: Attention to Detail
Our bouncing movement is complete. Now we need to add further detail and movement to our ball. Double-click the "ball" symbol on any of the keyframes to enter the timeline of that symbol. You'll see your current location underneath the timeline - you should be within "Scene 1, mc_ball."
Step 17: Layer 2
Click the Insert Layer icon to create a second Layer above the current one. Copy and Paste the circle in place from Layer 1 to Layer 2 (Command + C, Command + Shift + V). Now name the bottom layer "Ball Spinning" and the top one "Shade." Finally, lock the "Ball Spinning" layer.
Step 18: Chop Shop
Draw a large circle somewhere on the stage, making sure it has a different color to the existing circle.
Position the larger circle so that what can still be seen of the yellow circle is about the right shape for shading on the ball. Release all objects.
Now select the larger circle once again and press Delete. By laying un-grouped or non-symbolized forms over one another you combine them in the same way that you do with pixels in paint applications. By now removing the larger circle you're left with just the small crescent which will become the shading on the ball. Select and remove the remaining stroke and color the crescent #E2E0E5.
Step 19: Shadow Opacity
As this crescent acts as shading on our ball it would be nice to give it a Multiply Opacity. In order to do this we have to convert it into a Movie Clip Symbol (you should be used to this action now). Press F8 and name it "mc_ball_shading" (these names are getting dodgy). Refer to the Property Inspector and change it's Blend to Multiply. Perfect!
Step 20: Check it!
Press Command + Enter again to view your animated ball so far. It should look like the animation below.
Step 21: Further Vector Manipulation
Having dealt with the shading you can now lock the layer "Shade" (perhaps even make it invisible to make working easier) and unlock "Ball Spinning." We're going to add a pattern to give our circle to give it that beach ball look. Use the Oval Tool to draw a large oval on the stage. It needs a stroke of 1px and #FFFFFF, but no fill color.
Step 22: Remove Excess
Place the stroke as shown in the image below and release. Now select the portion of the stroke which is outside the ball by simply clicking on it. As with making the shading crescent earlier, all the vectors on this layer have merged together, forming separate regions. Delete the outer portion of the stroke.
Step 23: Rinse and Repeat
Draw a couple of other ovals and place them on top of the circle so that they conjoin at the top somewhere. Then remove the excess from outside the circle. The ovals don't all have to be of equal size or proportions, just try to recreate something a little like the image below. What you will have created is a series of segments which can now be individually colored.
Step 24: Check it!
Color alternate segments with #EA512D and delete all the pieces of white stroke from the ball. Press Command + Enter to view what you've made so far. It should look like the animation below.
Step 25: As the Ball Turns
Let's add a final dimension of movement to the animation, we'll get the ball to slowly spin as it bounces. To do this we first need the ball on layer "Ball Spinning" to be converted into a symbol. Click on the first keyframe of the layer to ensure that everything on it is selected. Now press F8 and name this Movie Clip symbol "mc_ball_base." You'll see it's been added amongst the other symbols in the Library palette (Window > Library).
Step 26: Add Frames
Select frame 32 of the timeline on the layer "Spinning Ball" and press F6 to create a new Keyframe. Select frame 32 of the timeline on the layer above and press F5. This will create a new frame, but as the "Shade" symbol doesn't change state at all we don't need to make this a Keyframe. We just need to ensure that when the Slider reaches this point along the timeline, the "Shade" symbol is present.
Why have we chosen frame 32? Well, in doing so we are going to make our ball rotate once every 32 frames. Our ball bounces once every 20 frames and so this irregular timing will mean that the ball finds itself at continually different spin stages during the bounce. If this isn't yet clear, it soon will be..
Step 27: Rotational Tweening
Select a frame somewhere along the timeline on layer "Ball Spinning" and refer to the Properties Inspector. Select Motion tween as you did with the bouncing movement. This time, we don't want any Ease value, we need the ball to steadily rotate at the same speed. Select CW (Clockwise) from the Rotate drop-down and leave 1 as the amount of times the ball will rotate during the tween. Of course, the "Shade" layer is unaffected and the shading will therefore remain in the same position on the face of the ball.
So there you have it! Press Command + Enter again and check that the movement is as you wanted. Should it need changing, you can increase the amount of frames in the tweens, change the height of the ball, the amount of times it rotates etc. This tutorial has given you an insight into: the Flash timeline and layers, the behavior of Flash vector drawing tools, the hierarchy of Flash symbols and objects, and motion tweening.
I hope you enjoyed it! Part 2 is due for publication next month and will expand on these techniques, enhancing the process with a touch of Illustrator..
Subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles.