Frame by Frame

How to animate frame by frame in Adobe Animate

**NOTE** The new version of Animate contains an excellent Bouncing Ball tutorial, I Highly recommend you do this instead of the one below!

In this tutorial, you’ll learn how to create frame by frame animation in Animate. This technique involves changing each keyframe of an animation to create movement. Here is a simple bouncing ball animation created frame by frame.

This tutorial shows you how to create the animation above.

1- Draw a ball

First, we’ll draw a ball using the Brush tool.

Use the second smallest brush size the Brush tool has.

And make sure to set your view as 100%.

2- Create a frame

 Press F7 to insert a blank keyframe into the timeline. This empties any graphics on the stage so that you can start drawing another piece of the animation.

3- Use Onion Skin

This enables you to view the previous images you have drawn, which appear semi transparent.  Click on the icon to enable Onion Skin view.

4- Draw the next action

Make sure you have selected the 2nd frame. Then draw the orb again, but with a slightly different shape.

5- Draw and draw again until you complete the animation

Repeat the procedure to complete the animation! Some tips here, if you can’t see previous animations using the Onion Skin view, make sure the Onion Skin box encompasses all frames. (Refer to figure below)

6- Smoothen the graphics

One more useful tip here, you can smoothen your graphics easily by first selecting the orb you drew using the select tool, then click on the Smoothen icon (refer to figure above) several times. It is located in the Options tab. This feature eliminates shakiness from the graphics you drawn. It should look sleeker now. That is all!

7- View your Animation

To view your animation, go to the Control menu and choose “Test Movie.” Or, use the keyboard shortcut of Ctrl-Enter.

So, not too difficult. Try redoing your animation a few times until you get a version you like.

Here is an introduction to Flash by “Animation vs Animator” artist Alan Becker:


Leave a Comment

Your email address will not be published. Required fields are marked *