Activity 2


The resources on paths (below) are from:


Whenever you draw a line or shape in Flash, you create a line called a path. A path is made up of one or more straight or curved segments. The beginning and end of each segment is denoted by anchor points, which work like pins holding a wire in place. A path can be closed (for example, a circle), or open, with distinct endpoints (for example, a wavy line).

You change the shape of a path by dragging its anchor points, the direction points at the end of direction lines that appear at anchor points, or the path segment itself.

Components of a path
A.Selected (solid) endpoint B.Selected anchor point C.Unselected anchor point D.Curved path segment E.Direction point F.Direction line.
A.Selected (solid) endpoint B.Selected anchor point C.Unselected anchor point D.Curved path segment E.Direction point F.Direction line.


Paths can have two kinds of anchor points: corner points and smooth points. At a corner point, a path abruptly changes direction. At a smooth point, path segments are connected as a continuous curve. You can draw a path using any combination of corner and smooth points. If you draw the wrong type of point, you can always change it.

Points on a path

A. Four corner points B. Four smooth points C. Combination of corner and smooth points.

A corner point can connect any two straight or curved segments, while a smooth point always connects two curved segments.

A corner point can connect both straight segments and curved segments.
Note: Don’t confuse corner and smooth points with straight and curved segments.

A path outline is called a stroke. A colour or gradient applied to an open or closed path interior area is called a fill. A stroke can have weight (thickness), colour, and a dash pattern. After you create a path or shape, you can change the characteristics of its stroke and fill.

Direction lines and direction points

When you select an anchor point that connects curved segments (or select the segment itself), the anchor points of the connecting segments display direction handles, which consist of direction lines that end in direction points.The angle and length of the direction lines determine the shape and size of the curved segments. Moving the direction points reshapes the curves. Direction lines don’t appear in the final output.

After selecting an anchor point (left), direction lines appear on any curved segments connected by the anchor point (right).

A smooth point always has two direction lines, which move together as a single, straight unit. When you move a direction line on a smooth point, the curved segments on both sides of the point are adjusted simultaneously, maintaining a continuous curve at that anchor point.

In comparison, a corner point can have two, one, or no direction lines, depending on whether it joins two, one, or no curved segments, respectively. Corner point direction lines maintain the corner by using different angles. When you move a direction line on a corner point, only the curve on the same side of the point as that direction line is adjusted.

Adjusting direction lines on a smooth point (left) and a corner point (right).

Direction lines are always tangent to (perpendicular to the radius of) the curve at the anchor points. The angle of each direction line determines the slope of the curve, and the length of each direction line determines the height, or depth, of the curve.

Moving and resizing direction lines changes the slope of curves.


Part 1

In activity 3, students will transfer their character design skills developed in this Unit using shapes and paths. The main difference is that Flash is a 2D animation application, whereas Illustrator allows you to create powerful 2D characters.

  • Create a “Activity 2″ subfolder in your Unit 1 folder.

How to create a shape tween

Watch this video first:

shape tween in adobe flash from Digital Voices on Vimeo.

The following steps show how to create a shape tween from frame 1 to frame 30 of the Timeline. However, you can create tweens in any part of the Timeline that you choose.

  1. In frame 1, draw a square with the Rectangle tool.
  2. Select frame 30 of the same layer and add a blank keyframe by choosing Insert > Timeline > Blank Keyframe or pressing F7.
  3. On the Stage, draw a circle with the Oval tool in frame 30.You should now have a keyframe in frame 1 with a square and a keyframe in frame 30 with a circle.
  4. In the Timeline, select one of the frames in between the two keyframes in the layer containing the two shapes.
  5. Choose Insert > Shape Tween.Flash interpolates the shapes in all the frames between the two keyframes.
  6. To preview the tween, scrub the playhead across the frames in the Timeline, or press the Enter key.
  7. To tween motion in addition to shape, move the shape in frame 30 to a location on the Stage that is different from the location of the shape in frame 1.Preview the animation by pressing the Enter key.
  8. To tween the colour of the shape, make the shape in frame 1 a different colour from the shape in frame 30.
  9. To add easing to the tween, select one of the frames between the two keyframes and enter a value in the Ease field in the Property inspector.Enter a negative value to ease the beginning of the tween. Enter a positive value to ease the end of the tween.
  10. Save as:  firstlastname_activity3.fla in your activity 3 folder,
  11. Export movie as:  firstlastname_activity3.swf in your activity 3 folder,
  12. Create another shape tween of your choice
  13. Save as:  firstlastname_activity3b.fla in your activity 3 folder,
  14. Export movie as:  firstlastname_activity3b.swf in your activity 3 folder,


  • Find your previous post (activity 2) and select reply.

  • Post the your three files here: 

  • Insert “your name” and “Unit 3, Activity 2″ in the text-box.



    Control shape changes with shape hints

    • To control more complex or improbable shape changes, you can use shape hints. Shape hints identify points that should correspond in starting and ending shapes. For example, if you are tweening a drawing of a face as it changes expression, you can use a shape hint to mark each eye. Then, instead of the face becoming an amorphous tangle while the shape change takes place, each eye remains recognizable and changes separately during the shift.
      Shape hints contain letters (a through z) for identifying which points correspond in the starting and ending shapes. You can use up to 26 shape hints.
    • Shape hints are yellow in a starting keyframe, green in an ending keyframe, and red when not on a curve.
    • For best results when tweening shapes, follow these guidelines:
    • In complex shape tweening, create intermediate shapes and tween them instead of just defining a starting and ending shape.

    Make sure that shape hints are logical. For example, if you’re using three shape hints for a triangle, they must be in the same order on the original triangle and on the triangle to be tweened. The order cannot be abc in the first keyframe and acb in the second.

    Shape hints work best if you place them in counterclockwise order beginning at the top-left corner of the shape.

    Use shape hints

    1. Select the first keyframe in a shape-tweened sequence.
    2. Select Modify > Shape > Add Shape Hint. The beginning shape hint appears as a red circle with the letter asomewhere on the shape.
    3. Move the shape hint to a point to mark.
    4. Select the last keyframe in the tweening sequence. The ending shape hint appears somewhere on the shape as a green circle with the letter a.
    5. Move the shape hint to the point in the ending shape that should correspond to the first point you marked.
    6. To view how the shape hints change the shape tweening, play the animation again. To fine-tune the tweening, move the shape hints.
    7. Repeat this process to add additional shape hints. New hints appear with the letters that follow (bc, and so on).