Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Summary:

Create your Player in Flash

    ●  Learn the basics of Frame by Frame animation.


Learn About:

Onion Skin Keyframes Brush Tool

  •   This tutorial is part of the Run and Jump Platform Game Project.

  •   It is first in a series:

  •   81_player_Fl.htm   •   82_game_background_Fl.htm  •   83_game_visuals_Fl.htm   •   131_parallax_background_Fl.htm   •   43_stop_scene_game_Fl.htm   •   24_Star_Rotating_Fl.htm  •  65_locked_door_fl.htm

Other People's Work:

Here are some examples of work inspired by this tutorial.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Step #1: Open a New Blank Document in Flash ~

Open a New Blank Document in Flash:

 


Step #2: Brush Tool ~

Get the Brush Tool or hit the keyboard shortcut letter (B) …

brush

… and lower the Brush size - Start very small ~

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #3: 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.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Note: The higher the smoothing number, the better your drawing will look.

TRY IT!

Bad   bad  better Better  


Step #4: Draw with the Brush ~

Draw a head on the stage. Fill it with color if you wish.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Draw a body and arms & legs too.


Step #5: Adjusting the Lines and Fill ~

You can reshape lines using the Selection Tool.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 


Just grab the edges and drag!

Adjusting lines is one of the great benefits of Vector Graphic in Flash.



Get the Paint Bucket Tool paint bucketor hit the keyboard shortcut letter: (k) …

… picking a Fill Color from the color palette, …

fill-color-fl-11.png

… selecting Close Large Gaps under Gap Size at the bottom of your Tools palette …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… and fill in your head.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #6: Create a Movie Clip ~

Select everything by hitting the keyboard shortcut: Cmd(⌘)+A and hit F8 (or Right-Click and select: ) …


… and make sure to set the Registration point to bottom center.


Step #7: Open the Movie Clip ~

Double-click on the symbol with the Selection Tool to open it …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Now you are working INSIDE the Movie Clip.
movie within a movie

Remember: A Movie Clip is a movie WITHIN a movie.


Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #8: Add a Keyframe ~

Hit F6 f6 (or Right-Click and select: ).


Step #9: Onion Skin ~

Click on the Onion Skin button. This allows you to see the outline of the all the frames.

onion skin


Step #10: Making your Movie Clip walk ~

Get the Eraser Tool or hit the keyboard shortcut letter (e) …


… and erase the leg.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #11: Redraw the Leg ~

Draw a new leg a little farther beyond the old one …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… and do the back leg too.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #12: Don't Forget the Arms ~

Erase the arms and move them too …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #13: Repeat the Process ~

Hit F6 AGAINf6(or Right-Click and select: ) so you now have 3 Frames …

3 frames

… and erase the both legs and draw them again a little further out.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Don't forget the arms …

arms 2


Step #14: Now make the Legs go Backwards ~

Hit F6 a third timef6 and begin to draw the legs going back the other way …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Do the same to the Arms …

arm


Step #15: Again with the Backwards ~

Hit F6 a forth time and move the legs back again.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Do this as many times as necessary …

.. and hit the keyboard shortcut: Cmd(⌘)+Enter cmd enter keysto view your work!

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Last Step: Save your Work ~

Save your work as - FIRST_NAME_LAST_NAME_PROJECT_NAME.fla]

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

•   ALWAYS save your projects using the following naming convention:
FIRST_NAME_LAST_NAME_PROJECT_NAME


  •   DO NOT name your project any other way - Improperly named projects will not receive credit and you will be sad.


  •   NEVER leave your work on the desktop or depend on a flash drive - instead, save your work in a folder you can find later - preferably on a virtual drive where it can be backed up.


If your Ready, move on to: 82_game_background_Fl.htm