{"id":236,"date":"2012-05-15T22:03:10","date_gmt":"2012-05-16T04:03:10","guid":{"rendered":"http:\/\/www.shscomputers.com\/wordpress\/?page_id=236"},"modified":"2019-12-09T10:44:04","modified_gmt":"2019-12-09T17:44:04","slug":"flash-pro-8-frame-by-frame-animation","status":"publish","type":"page","link":"https:\/\/www.shscomputers.com\/wordpress\/?page_id=236","title":{"rendered":"Frame by Frame"},"content":{"rendered":"

How to animate frame by frame in Adobe Animate<\/h2>\n

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

\n

In this tutorial, you\u2019ll 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.<\/p>\n

\n

<\/object><\/center>This tutorial shows you how to create the animation above.<\/p>\n

1- Draw a ball<\/h2>\n

First, we\u2019ll draw a ball using the Brush tool.<\/p>\n

\"\"<\/a><\/center>Use the second smallest brush size the Brush tool has.<\/p>\n

\"\"<\/a><\/p>\n

And make sure to set your view as 100%.<\/p>\n

\"\"<\/a><\/p>\n

2- Create a frame<\/h2>\n

\u00a0Press F7<\/strong><\/span> 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\u00a0animation.<\/p>\n

3- Use Onion Skin<\/h2>\n

This enables you to view the previous images you have drawn, which appear semi transparent.\u00a0 Click on the icon to enable Onion Skin view.<\/p>\n

\"\"<\/a><\/center><\/p>\n

4- Draw the next action<\/h2>\n

Make sure you have\u00a0selected the 2nd<\/sup> frame. Then draw the orb again,\u00a0but with a slightly different shape.<\/p>\n

\"\"<\/a><\/center><\/p>\n

5- Draw and draw again until you complete the animation<\/h2>\n

Repeat the procedure to complete the animation! Some tips here, if you can\u2019t see previous animations using the Onion Skin view, make sure the Onion Skin box encompasses all frames. (Refer to figure below)<\/p>\n

\"\"<\/a><\/p>\n

6- Smoothen the graphics<\/h2>\n

\"\"<\/a><\/p>\n

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!<\/p>\n

7- View your Animation<\/h2>\n

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

So, not too difficult. Try redoing your animation a few times until you get a version you like.<\/p>\n<\/div>\n

Here is an introduction to Flash by “Animation vs Animator” artist Alan Becker:<\/p>\n