Saturday, November 29, 2008

How to Use Hints in Flash Animations

Animating shapes in Adobe Flash consist of morphing one shape into another in a shape-tweened animation.

But what if this shape does not morph into the next shape the way you want it to?

This is where hints come in.

What are hints? A hint is a guide in Adobe Flash that gives a vector shape in one frame instructions on how to morph into another vector shape in another frame.

You can use one or more hints in each of these morphing shapes.

Here is a Flash animation of the letter S turning into the shape of a sea serpent without hints:



As you might have figured, this is not how I want my S to turn into a sea serpent.

Now, here is a Flash animation of the letter S turning into the shape of a sea serpent with hints. The S morphs into the shape of a sea serpent the way I want it to:



This animation was done using the following steps:

  1. Making Flash animations hint-ready

  2. Using hints


Making Flash animations hint-ready:

Before you apply hints to a Flash animation, you must always make sure that the following requirements are filled:

  • Each shape must be a vector shape. You can create these two shapes in Adobe Flash using the Pen tool, or a vector graphics program like Adobe Illustrator. If you create these vector shapes in a program other than Flash, you must import them into Flash.

  • Each shape must be in the same layer.

  • Both shape/frames must be shape-tweened.

  • Each shape must appear at different consecutive frames in this layer.

  • Each shape must have the same number of points.

  • Each shape must have one outline or one fill color, but NOT both.

  • Each point in one shape must be close to a corresponding point in other shape (more on this later).


In this animation, the first four requirements are already filled, so I will just focus on the last three ones.

First, we will count the number of points in each shape:

  1. Select Preview Mode, then Outlines in the View menu at the top of the screen.

  2. The animation is now in outline mode.

  3. Make sure you're in the frame with the start shape. In this case, it is Frame 1.
    Frame 1

  4. Select the Subselection tool by either pressing A or clicking it once in the toolbox, if is not already selected.
    subselection tool

  5. Click the start shape with the Subselection tool.

  6. Count the points in this shape, then write the number down.


One of the things I find annoying about Flash and Illustrator is that there's no automatic way to count the points in a shape. So you have to do it manually.

  1. Now go to the frame with the end shape. In this case, it is Frame 28.
    Frame 28

  2. Click the end shape with the Subselection tool.
    Frame 28 shape selected

  3. Count the points in this shape, then write the number down.


Now see if the end shape has the same number of points as the start shape. If so, you may proceed. If not, repeat Steps 3 to 9.

Next, we will make sure that each shape animation has one outline or one fill color, but not both, and that each animation is in a separate layer.

  1. Go back to Frame 1, and select View > Preview > Anti-Alias.
    Anti-Alias View

  2. Now you can see the colors of the animation.
    Anti-Aliased view

  3. If you look near the upper left-hand corner of the screen, you should see two layers: one named sea serpent outline, the other name sea serpent fill.
    Layers

  4. In the layer named sea serpent fill, click the dot under the eye, which shows or hides layers. There should now be an X where the dot was, and the start shape should now only have a black outline.

    outlines only

  5. Now go to the frame with the end shape. In this case, it's Frame 28. The end shape should also now only have a black outline.

  6. Play the animation by hitting the Return or Enter key, which should also have only a black outline. This is what it should look like:
    animation outline

  7. Go back to Frame 1 and click the X, which should become a dot again.

  8. In the layer named sea serpent outline, click the dot under the eye, which shows or hides layers. There should now be an X where the dot was, and the start shape should now be purplish-blue with no black outline.

    sea serpent fill

  9. Now go to the frame with the end shape. In this case, it's Frame 28. The end shape should also now be purplish-blue with no black outline.

    Frame 28 shape

  10. Play the animation, which should also be purplish-blue with no black outline. This is what the middle frames should look like:
    ss fill tween


Now, we will make sure that each point in one shape is close to a corresponding point in the other shape.

This can be accomplished by simply making sure that the points in each shape are more or less evenly spread out, though they don't have to be equally apart from each other.

  1. Go back to Frame 1, and select Preview Mode, then Outlines in the View menu at the top of the screen.




  2. Turn on Edit Multiple Frames by clicking its icon near the top of the screen. You should now see a dark gray area with metallic knobs on each side at the top of the screen, where the frame numbers are.

  3. Put your cursor on the right knob, which is called End Onion Skin. Click the right knob, and pull it all the way to Frame 28. You should now see both the start shape and the end shape.

  4. Click the Subselection tool if it is not already selected, and then select all by pressing Command-A if you're using a Mac, or Control-A if you're using a PC.


Now there should be points distributed all over each shape; even though many of these points are more spread outin the sea serpent shape, and not all of the points are equally spaced in either shape. This is OK.

It is very important that each shape have points that are distributed all over it; even though these points do not have to be perfectly equally apart from each other.

Now we'll actually get to use hints!

How to apply hints

  1. Go back to Frame 1.

  2. Click Edit Multiple Frames so that the dark area area with metallic knobs vanishes.

  3. Click the X under the eye in the sea serpent outlines layer so it is now visible.

  4. Select View > Preview Mode > Anti-Alias so the S is now purplish-blue with a black outline.

  5. In the sea serpent fill layer, click the dot under the eye to hide this layer, and click the dot under the padlock to lock this layer. Then click the X in the sea serpent outline layer so that it becomes a dot again. The sea serpent outline layer should now only be visible and editable.
    outlines visible only

  6. Select Modify > Shape > Add Shape Hint.
    add first hint

  7. A new red dot with the letter a appears on the stage. This is the hint.
    new starting hintA

  8. Go to the frame with your end shape; in this case, Frame 28. You should also find this red dot with the letter a on the stage.
    new ending hintA

  9. Go back to Frame 1, and click and drag the red dot/hint to the top tip of the S. It should automatically snap to this tip.
    start hintA

  10. Go to Frame 28, and click and drag the red dot/hint to the tip of the sea serpent's tail. It should also automatically snap to there, and turn green.
    end hintA

  11. Go to Frame 1. Notice that hint a in Frame 1 is now yellow. Select Modify > Shape > Add Shape Hint to add a new hint.
    start hintB

  12. Move this hint - marked with the letter b - to the bottom tip of the S. It should automatically snap there.
    start HIntB

  13. Go to Frame 28 and move hint b to the tip of the sea serpent's nose. Notice it turn green like hint a.
    end HintB

  14. Go to Frame 1. Notice that hint b, like hint a, is now green. Select Modify > Shape > Add Shape Hint to add a new hint.
    start hintC

  15. Move hint c to the top tip of lower part of the S. It should automatically snap there.
    start HintC

  16. Go to Frame 28 and move hint c to the top of the sea serpent's head. Notice it turn green, like hints a and b.
    end hintC

  17. Play the animation by pressing the Return button if you're using a Mac, or the Enter button if you're using a PC. This is what it should look like:

  18. Click the dot under the eye to show the sea serpent fill layer, and click the dot under the padlock to unlock this layer.
    Layers

  19. In the sea serpent outline layer, click the dot under the eye to hide this layer, and click the dot under the padlock to lock this layer. The sea serpent fill layer should now only be visible and editable.
    ss outlines hidden

  20. Repeat Steps 4 to 16 in the sea serpent fill layer. The results will be the same, except the hints may not turn green and yellow.

  21. Play the animation by pressing the Return button if you're using a Mac, or the Enter button if you're using a PC. This is what it should look like:

  22. Click the X under the eye to show the sea serpent outlines layer, and click the dot under the padlock to unlock this layer.

  23. Select Control > Test Movie to test your movie. This is what it should look like:


Notice how all these hints were added in a counter-clockwise direction, starting at the upper left-hand corner of the shape. It is always best to add hints this way.

Positioning hints is a process of trial and error. It can take some time to position hints so they make your tweened shapes morph the way you want them to. But the more you practice, the faster you'll be able to figure this out.

I also always try to use as few hints as possible, because I often get the best results that way.