Flash MX 2004 Games : Art to ActionScript

Chapter 3: Simple cut-out animation
Cut-out animation is produced by splitting a character into small segments and then animating
the segments simply by moving and rotating. If you intend to use motion tweening, a very fast
method for moving and rotating symbols in Flash, then you will need to place each segment on
a separate layer. In this chapter we will take a very simple cat character and create several walks
of increasing sophistication. The character was drawn directly in Flash using the drawing tools
discussed in the previous chapter. Then the character was divided into sections by using the Lasso
tool. To select the Lasso tool you need to click the Tools button indicated in Figure 3.2.
Figure 3.2 Selecting
the Lasso tool
Figure 3.3 Selected area
To use the Lasso tool draw around the character by clicking and holding
the left mouse button. The selected area will show an overlaid dot
pattern. To convert a selected area into a symbol press F8 or choose
‘Modify/Convert to Symbol...’ from the menu. In the dialog box choose
‘Graphic’ as the symbol type and enter a descriptive name. The selection
will change from the dot pattern to a bounding box. The name that you
give the symbol will be the name displayed in the Library. You can view
the Library at any time by pressing F11 or selecting ‘Window/Library’ from
the main menu. When the segment is a symbol you can use it as many
times as you like either by dragging it out of the Library or by copying an
instance of it on the stage and then pasting the instance into a new frame or
new layer of the current frame. You can even paste a duplicate of the symbol
in the current layer but remember that this will not work with motion
tweening. The next step is to ensure that the rotation centre is correct.
If you intend to use motion tweening then it is important to choose carefully the point about
which the segment will rotate.
To adjust a symbol’s pivot point select the Free Transform tool from the Tools palette and
move the white circle. The white circle defines the point about which the symbol will rotate.
To get an accurate placement it is usually best to use the Zoom tool. Using the Zoom tool you
can move in and out by selecting either the ‘+’ option or the ‘−’ option and clicking, or you
can drag a rectangle round the area you wish to zoom in on and then Flash will resize to suit this
rectangle. The amount the artwork moves when using the arrow keys is dependent on the scale
35