Animating anchor points in Flash CS5 - Shape goes mad!


I'm having problems creating a very simple shape animation in Flash CS5.

I have 20 frames, 3 keyframes (at 1, 10 and 20).

The following screenshots are from Flash, with onion skin turned on for all 20 frames. (Had to pud link to the images since I can't embed them)

When I move a single anchor point, sometimes it's OK, like this:

enter image description here

But if I move the point a little futher, the whole shape morphs into something I never created, like this:

enter image description here

In both cases, I only moved the same single anchor point - the point of the upper spike.

Is there a way of telling Flash that I only want the movement I made and no random morphing ?

6/8/2011 4:18:00 PM

Accepted Answer

It really messes with your mind, doesn't it? Fortunately, it's not hard to understand and it's not hard to fix.

When you Shape Tween (Flash-speak for morphing), the Flash authoring environment does some very fancy mathematical calculations on the geometry of the shape to try to figure out the shortest "distance" from Point(s) A to Point(s) B. If the change is not too great, and/or the shape is simple, you get what you expect. If it's a big change, or a complex shape, things can look pretty weird.

The answer is to use Shape Hinting (Modify > Shape > Add Shape Hint). Rather than get into a detailed explanation, here's the Flash Help Page, and here's a good tutorial by Todd Perkins. He begins, appropriately enough, with the words: "Creating a Shape Tween can be a challenging process..."

Good luck!

6/8/2011 5:20:00 PM