Celebrating the Achievements of ChildrenTM


Amazing Kids! Animation Tutorials
Tutorial #1
Flash Animation Tutorial for Kids & Teens:
Tweening

By Samik Dutta, age 16

The following animation tutorial was written by Samik Dutta.  Samik is a 16 year old teen who lives in India and is home-schooled.  Samik has generously offered to write some animation tutorials for the Amazing Kids! website.  He wants to share his knowledge about animation with other kids and teens.

Hey, thanks, Samik!  We think you're pretty amazing! 

Here's what Samik says about how he learned to do animation:

"I have been animating for 2 years on my own. I have never learnt animation or drawing from anyone. I have been inspired by watching American Animation programs like SPLAT! and many more."
 

____________________________________________________________________________________________

This tutorial will teach the animation process using FLASH.  It will teach how to "tween" and 
how to create a bouncing ball animation.

First of all, you have to learn the basics of FLASH & practice to draw with a mouse like me. 
When you are pretty good at the basics, then I guess this tutorial will be helpful.

To learn FLASH you need to buy a copy of FLASH 4.0 and learn from the tutorials in the 
help menu.  Or you can download a 30-day trial copy at the macromedia.com website: http://www.macromedia.com/software/flash/trial/

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."
_______________________________________________

Lesson 1: Tweening

(1) Open Flash 4, this is the application window.

pic01

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":

pic02

Click the paint bucket and fill the circle with a gradient color of your choice
to make it look like a 3D sphere.

pic03

(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":
 

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 
slow out effect. Check pic05 to see if it matches your animation. 
 

pic05

At frame 25, add another keyframe & drag it again to touch the floor, this time a little bit to the right.

pic06

At frame 30, add another Keyframe & drag it upward.

See pic07:

pic07

Again at frame 35, add keyframe; move the ball to the floor. See pic08:

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."
Scale the ball so it looks like it's stretched:stretch

At frame 10, scale the ball so it looks squashed:

squash

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:

Nothing Happening?
Click Here to get the Flash plug-in.
Squash & Stretch added to the bouncing ball.


To learn more about animation visit www.karmatoons.com & www.awn.com/tooninstitute/

That's all for now!

Samik Dutta

Check out Samik's own amazing animation showcase at:

http://www.geocities.com/samikdutta_2000/home.html

Or email him at:
samikdutta@satyam.net.in


Hey kids!  Do you have some animation tips to share?

Help us write an animation tutorial for the Amazing Kids! Animation Tutorials webpage!  Email your ideas for an amazing animation tutorial to: info@amazing-kids.org.  If accepted, your tutorial may appear in our Animation Tutorials section, right along with Samik's!


Don't forget to check out the new Amazing Kids! Animation Station!

<---Back to the Animation Lessons Page

 Back to the top

About Us | Programs | Get Involved! | Our Heroes
Amazing Kids! Stories | Contests | Links | Contact Us
Comments?  Questions?  Email us!  info@amazing-kids.org