Animate a Stick Figure Walking in Flash
● Learn the basics of Frame by Frame animation. Also learn how to make a movie clip move across the screen using a Motion Tween.
✓ Classic Motion Tweens ✓ Onion Skin ✓ Keyframes
Other People's Work:
Here are some examples of work inspired by this tutorial.
Step #1: Open a Blank Document in Flash ~
✗ Open a new Blank Document in Flash …
✗ Select the Brush Tool or hit the keyboard shortcut letter (B) …
✗ Lower the Brush size - Start small ~
Step #2: Smoothing ~
✗ Open Properties (If you don't see Properties, hit the keyboard shortcut Cmd(⌘)+F3 or go to: Window > Properties) and raise the Smoothing level.
Note: The higher the smoothing number, the better your drawing will look.
✗ TRY IT!
Step #3: Draw with the Brush ~
✗ Draw a head on the stage. Fill it with color if you wish.
✗ Draw a body and arms & legs too.
Step #4: Adjusting the Lines and Fill ~
✗ You can reshape lines using the Selection Tool.
✗ Just grab the edges and drag!
✗ Adjusting lines is one of the great benefits of Vector Graphic in Flash.
✗ Get the Paint Bucket Tool or hit the keyboard shortcut letter: (k) …
✗ … picking a Fill Color from the color palette, …
✗ … selecting Close Large Gaps under Gap Size at the bottom of your Tools palette …
✗ … and fill in your head.
Step #5: Create a Movie Clip ~
✗ Select your drawing by clicking on the Layer or hit the keyboard shortcut: Cmd(⌘)+A or go to: Edit > Select All …
✗ … hit F8 (or Right-Click and select: ) make a Movie Clip and convert your man to a Movie Clip Symbol.
Step #6: Open the Movie Clip ~
✗ Double-click on the symbol with the Selection Tool to open it …
Now you are working INSIDE the Movie Clip.
✗ Remember: A Movie Clip is a movie WITHIN a movie.
Step #7: Add a Keyframe ~
✗ Hit F6 (or Right-Click and select: ).
Step #8: Onion Skin ~
✗ Click on the Onion Skin button. This allows you to see the outline of the all the frames.
Step #9: Making your Movie Clip walk ~
✗ Get the Eraser Tool or hit the keyboard shortcut letter (e) …
✗ … and erase the leg.
Step #10: Redraw the Leg ~
✗ Draw a new leg a little farther beyond the old one …
✗ … and do the back leg too.
Step #11: Don't Forget the Arms ~
✗ Erase the arms and move them too …
Step #12: Repeat the Process ~
✗ Hit F6 AGAIN(or Right-Click and select: ) so you now have 3 Frames …
✗ … and erase the both legs and draw them again a little further out.
✗ Don't forget the arms …
Step #13: Now make the Legs go Backwards ~
✗ Hit F6 a third time and begin to draw the legs going back the other way …
✗ Do the same to the Arms …
Step #14: Again with the Backwards ~
✗ Hit F6 a forth time and move the legs back again.
✗ Do this as many times as necessary …
✗ .. and hit the keyboard shortcut: Cmd(⌘)+Enter to view your work!
Step #15: Motion Tween ~
✗ Click on Scene 1 in the menu bar …
✗ … and drag the movie clip just off screen to the left side of the stage.
✗ Then go out to approximately Frame 40, and hit F6 to Insert a Keyframe.
✗ Move the movie clip to the other side of the stage.
✗ Then, right-click again in between the two keyframes and select "Create Classic Tween."
✗ You should see an arrow between the two keyframes if the motion tween works correctly.
✗ Hit the keyboard shortcut: Cmd(⌘)+Enter to View your Work!
Last Step: Save, Attach & View ~
✗ SAVE & Attach your files.