Celebrating the Achievements of ChildrenTM


Amazing Kids! Animation Tutorials
Tutorial #2
Flash Animation Tutorial #2 for Kids & Teens:
Frame by Frame Animation 

By Samik Dutta, age 16

The following animation tutorial is the second tutorial written for Amazing Kids! 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."
 

____________________________________________________________________________________________

Note: 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.  Don't forget to read Lesson 1 on "Tweening."
______________________________________________

Lesson 2: Frame by Frame Animation

Here's my next lesson, "Frame by Frame Animation." 

In this lesson you have to use your imagination & your drawing skills the most. 

First of all you have to know what Frames, Keyframes & Inbetweens are. 
 

  • "Frame" - A frame is the unit of time used in producing animation. 
  • "Inbetweens" - Inbetweens are the frames those are used in the middle of two key poses or key frames. 
In the earlier days, the artists who drew these inbetweens to make a smooth motion were called "Inbetweeners." 

The more inbetweens that are used, the smoother the animation will be. 

Nowadays, in cgi animation, (cgi means "computer generated image") and in Web-based animation programs such as FLASH, computers are used most of the time to create the inbetweens. 
 

  • "Keyframes" - Keyframes are the main drawings for the animations. 
For example, a ball drops to the floor from the sky. 

The keyframes for this animation will be #1, the first frame when the ball is in the sky:
Keyframe1 
 
 

and #2 when the ball drops on the floor.

Keyframe2 
 

In the gap between the 2 keyframes, "Inbetweens" are used for the smooth...


fall. 
__________________________________________________________________________________

Now let's start Lesson#2. 

Open Flash4. 

(1) Draw a bunny with the mouse. 

Draw him in the same pose as below.


First we will animate his hands to make him say goodbye. 

Then we will make him go out of the screen by hopping around. 

In timeline click layer1 and rename it to "Bunny." 

Don't draw the background yet. 

Click the dot at the timeline and press F6 in the keyboard to add another
frame. 

Click the Onion Skin button in the Timeline. 

Flash's Onion Skin allows you to see all the frames below for editing 
just like an Animator's lightbox. 

At frame 2 erase his right hand by the erase tool. 

See picture below. 

Did you notice you can still see his hand?  You can see the last frame because of the "Onion skin." 

Now draw the erased part so it looks like the pic below.

Now again add another frame and erase the hand in that frame, then draw the erased part again to make it look like his waving his hand, up & down.

Here's the next frame:

Now press F5 two times to make 2 copies of this frame. 

At frame 5, press the del button in the keyboard to delete the image of this frame. 

Go to Frame 2 press Ctrl C to copy this frame. 

Then go to frame 5 and click Edit/Paste in place from the menu bar or Ctrl+Shift+V from the keyborad. 

Click F5 two times again, at frame 7 press F6 and then delete. 

Go to frame 3 and repeat the steps above as many times as you want to make him wave his hand. 

After waving his hand 4 to 5 times we will animate him hopping around. 

(2) Now this step is bit tough and needs a lot of imagination. 

Add another keyframe by pressing F6 and then Del. 

Turn on "Onion Skin" if you have turned it off. 

In this frame we will draw him in a way so he seems to be turning to the left side of the screen: 


Next we will use "Anticipation," one of main rules of animation. 

Anticipation is an action opposite to the main action. 

Anticipation also allows the viewer to know something before it occurs. 

Like say you are throwing a ball, to throw the ball first you have to pull back your hand a bit to get the momentum and then throw the ball. 

The viewer will know that you are going to throw that ball when you are pulling your hand back. 

For a better understanding on Anticipation visit: www.awn.com/tooninstitute/ 


Next make a crouch pose:


Next draw like this: 

The line behind the bunny is called "motion blur" or "motion lines," used to show an illusion of motion. 

Continue this steps till you reach the end of frame or Stage, to make it look like he's getting out of the screen. 

Add Follow through & Overlapping Action & the details at the eyes, ear & hair. 

Give a finishing touch to make it look better. 

Add a layer and rename it to "BG" then lock this layer and draw a background of your choice. 

Then pull this layer below to layer "Bunny." 

Save your file by chosing File/Save. 

And render the Animation by File/Export Movie and give a name then click OK . 

Congratulations!  You have learned the techniques of Flash Animation. 

That's all folks. 

Your Final Animation should look like this:

Nothing Happening?
Click Here to get the Flash plug-in.


 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