Straight-ahead Drawn Animation with Flash

The method that I will describe bellow is a great way to create paperless animation using a graphics tablet!

First of all, launch Adobe Flash and create a new document (choose ActionScript 3.0). Once the document has opened, you can then change its dimensions by using the Properties Inspector (to activate the Inspector, click anywhere on the stage). From here, you can adjust the following:

  • For “Size,” enter whatever dimensions you like, such as “960 x 540″ — which is one quarter of 1080p. Flash uses vector graphics.  Therefore, you can work with lower dimensions. Later on, when you export the animation, you can resize the dimensions and render a high-definition image sequence instead .
  • Background: White. If you prefer another colour, you are free to select whatever colour you wish. Furthermore, you can change the colour of the Stage later on.
  • Frame rate: Flash uses a default value of 12 fps. However, for video, you might choose to use 24 fps. When you export an image sequence later on, you can import the files into Premiere Pro, After Effects, etc. at 24 fps.

Referring to Flash’s Timeline, you should notice that a new document will begin with a default blank keyframe at Frame 0. This will be the first of a series of frames that you will set aside for straight-ahead digital animation. You should then take the following steps:

  • Right-click on a “protoframe,” which you will locate further down the timeline (e.g., frame 100).
  • From the context pull-down menu, choose Insert Blank Keyframe.
  • Go back to Frame 0 on the Timeline and left-click the first blank keyframe, and, while holding down the Shift Key, click on the last frame in the Timeline (the blank key frame that you established in the preceding step). As a result, frames 1 to 100 should become highlighted in the Timeline.
  • While the frames are selected, right-click with the mouse and choose Convert to Blank Keyframes. Consequently, frames 1 to 100 will become individual blank keyframes. The frames have now become, figuratively, a stack of digital animation sheets.
  • If you plan to do double-frame animation (that is, two frames per image, played back at 12 images per second at 24 frames per second), you can convert your stack of single-frame digital animation sheets to double-frame. To do so, left-click on a blank key frame and then right click and choose Insert Frame. You can also do this by simply clicking the F5 key on the keyboard. It might seem to be a great deal of work to add frames to the selection of blank keyframes but, really, the process won’t take long.
  • Once you select a blank keyframe, when you draw on the stage with a graphics pen, the blank keyframe will then become a keyframe. I recommend that you draw with the brush tool, rather than the pencil.

For animation, you will probably find it useful to use the Onion Skin option, to make your drawings translucent, as though you are working on an animation light-table.

  • To activate this function, click the Onion Skin button located along the bottom region of the Timeline.
  • If you look at the lower edge of the Timeline, you will find a series of buttons — Centre Frame, Onion Skin, Onion Skin Outlines, Edit Multiple Frames, and Modify Markers. Onion Skin is the button with a “white and blue square side-by-side.
  • When you select the Modify Markers button, you can change the range that the Onion Skin function reveals. By setting “Anchor Marker,” the left-hand bracket will stay in one place while you move the right-hand bracket. “Marker Range 2″ will highlight the two frames before the Playhead and the two frames after. Similarly, “Marker Range 5″ will highlight 5 frames on either side. “Marker Range All” will select all of the frames in a sequence.
  • On the Timeline, move the End Onion Skin bracket toward the last file in the sequence to select a series of frames.

To animate, all that you need to do now is to click on Frame 1 in the Timeline. Make a drawing on the Stage. By doing so, the blank keyframe (with a hollow circle in the frame) should then convert to a keyframe (depicted with a solid circle in the frame).

When you are ready to make the next drawing in the sequence, click on frame 2 and then make another mark on the Stage. You will undoubtedly notice that the first image is translucent, similar to a tracing.

Continue with the same process for the subsequent images.

To flip your drawings:

  • Use the Comma Keystroke [ , ] to advance forward by a frame, and the Period Keystroke [ . ] to move back by a frame. By clicking rapidly on the two keys, you can flip your drawings, very effectively.
  • Alternatively, drag the playhead back and forth, over a region of drawings.

To play the sequence, use the controller (go to the main menu > Window > Toolbars > Controller). You can also play the animation by using the Return or Enter Key.