Celebrating the Achievements of ChildrenTM
This tutorial will teach the animation process using
FLASH. It will teach how to "tween" and
First of all, you have to learn the basics of FLASH
& practice to draw with a mouse like me.
To learn FLASH you need to buy a copy of FLASH 4.0
and learn from the tutorials in the
After learning the basics, just play & experiment with FLASH.
I think that's the best way to learn anything.
Now let's begin the lessons.
Editor's Note: When you're finished with Lesson
#1, don't forget to check out Samik's Animation
Lesson #2, "Frame to Frame."
(1) Open Flash 4, this is the application window.
The white area is the frame where we will draw and animate is called the "Stage."
There are many buttons in the window.
On the left side is the drawing tools called the "Toolbar."
At the bottom, there's a small window called the "Timeline." (the Timeline was actually at the top of the window, but for convenience I put it at the bottom.)
These are the ones we will be using the most in this tutorial.
(2) Click the Circle tool on the toolbar, and draw a circle at top of the frame as shown in "pic02":
Click the paint bucket and fill the circle with
a gradient color of your choice
(3) Next let's animate the sphere.
We will make a bouncing ball animation.
We will use the Tweening system for this.
In the Timeline, click "layer 1" and rename to "ballbounce."
Click "add layer" and rename this layer to "ground."
Then pull the layer "ground" under layer "ballbounce."
In the layer "ground," draw a line at the bottom for the floor.
Next click layer "ballbounce;" the whole ball is selected.
Lock the ground layer.
Click the dot next to the layer "ballbounce," & press "insert frames" or F5 till you reach frame 10.
At frame 10 click F6, right click frame 10 and choose "properties." Click "tweening/motion" and click "ok."
At frame 1, right click & select "create motion tween."
Click the dot at frame 10 and pull it right till frame 50.
At frame 10 Click F6 to insert keyframe.
Click the sphere and drag downwards to put it to
the floor line like as shown in "pic04":
Drag the slider at the timeline back and forth or play the animation to see if it's correct.
Next Click at Frame 18 and press F6 in keyboard to add another keyframe.
Drag the ball up at Frame 18, but a little below
the original position like at Frame1, to show the
At frame 25, add another keyframe & drag it again to touch the floor, this time a little bit to the right.
At frame 30, add another Keyframe & drag it upward.
Again at frame 35, add keyframe; move the ball to the floor. See pic08:
Repeat the process till 50.
At frame 50, right click & choose "create motion tween."
Then drag the ball to the right till the end of the frame.
If you did the animation perfectly go to the next step.
(4) Now we will add squash & stretch to the bouncing ball.
Go to fr 5 and add a keyframe, select the arrow
tool from the toolbar and click "scale."
At frame 10, scale the ball so it looks squashed:
Continue till 50.
It rolls too fast, so click the dot at frame 50 and drag it right till 60.
Also drag the ground layer to 60.
Add some finishing touches to make it look better.
Finally you have finished the basic FLASH animation.
Here I have exaggerated the Squash & Stretch to better demonstrate it:
The final animation should look like this:
Amazing Kids! Stories | Contests | Links | Contact Us