Comp 150 Lab 12

Lab 12: Flash Animation

Comp 150, Dordal, Fri, Apr 28, 2006

Make a cartoon.

The basic idea is to draw a modest number of keyframes and have Flash interpolate frames in between the keyframes. Flash calls this step tweening; specifically, shape tweening. (The other form of tweening is motion tweening, which you're also welcome to try.)

After a pre-class screening of Magical Trevor, I will start with a brief demo of:

creating a Flash document, and putting a ball on the first frame
creating a "shape tween" (below)
distorting the ball using the selection tool

I'll also show you my layerlegs2 animation, which, if it better realized my artistic vision, I would have titled Awakening. Then you're on your own. Think about content! Here are a few content suggestions: fish, bird, bubbles, tree blowing in the wind, stick/blob figure walking, rocket launch.

Here's a list of the steps to create shape-tweened animation:

Create or select a Keyframe where the portion of animation is to start. Draw a new picture, or, more likely, continue from the previous picture. Make sure the keyframe is selected in the Timeline.
Choose Tween: Shape in the zone area at the bottom of the screen (if it's not there, most likely your keyframe isn't selected).
Go 10-20 frames ahead and Insert Keyframe.
In the new frame, your previous picture should appear. Edit it in some way.
Flash will then interpolate intermediate frames so the image will
gradually be modified from the first picture to the last.
If you need a sudden transition, put two keyframes next to each other and add the new features in the second frame.
If you have dissimilar elements, consider using a second layer.

Use CNTL-ENTER to preview your animation.

Drawing

The object-drawing tools are the line, circle, pencil, and pen. You can draw with these and then adjust the object by tweaking it by its handles. The handles come into view when you click on the object with the "subselection" tool (the white arrow, to the immediate right of the "selection" tool).

You can also use the selection tool to drag edges. Position the tool close to an edge so that a little "arc" appears, and drag. If you position the tool close to a vertex, a little "corner" appears and you can drag with that as well.

The selection-tool keyboard shortcut is "V" (no "ctrl" needed); that for the subselection tool is "A".

The pen tool is notorious for having an unexpected interface. What you do is draw a curved shape by clicking at a reasonable number of points. The pen tool interpolates a curve through all those points. If you click and drag, you can establish a small "tangent line" to your curve, to establish its direction. Lengthening the tangent line makes the curve more gradual. Fewer control points is usually better. Click right on the starting point to close the curve.

Note that when you draw circles with the circle tool, they actually have pen-tool-like control points and can be shaped that way (or by using the little-arc form of the selection tool).

Solid (filled in) shapes usually have a line border. It often helps in tweening to delete that line border. Click carefully to select it, and press "delete".

Save your work frequently, and use the help files!

Email me your .fla file, or show it to me.