Pages

Friday, May 23, 2014

Taming the shape tween

Shape tweening is for any coders who knows flash, as well as any confirmed flash artist, very handy and if you are not a full on artist who knows his animation book by heart it can help you create a simple logo animation in a jiffy.

But sometimes the gods of Flash Author work in mysterious ways and shape tweening can become a nightmare, here's a tip to sail your way on calmer waters.

We are going to animate a simple isometric cube extruded from the top.
so we go from this on the left to that on the right

Those are 3 shapes, each on one layer, with at each end a key frame, and of course in between, a shape tween. (I wanted my first frame to be only the top square so the two side shapes only appear at frame 2)

Now let's see how it turned out


Obviously not so good, you can see that flash tried to resolve the shape in-between in a rather bizarre way. This is actually very logical, since Flash looks for the shortest path for every point in the first frame to the last, but I won't explain this further now. You can see however that the right side shape turned out pretty well.

Now to remedy that, you could draw your shape on every frame, this is long, tedious and not very future-proof as you'll have to redraw everything for the slightest change in frame number.
The other solution is to tell Flash what points are actually the same in the start and end shapes,
to do that, just go in Modify > Shape > Add Shape Hint (cmd+shit+H on mac).
This will pop a marker on your shape that pins and labels a point that Flash will recognize through the tweening process.

place your four markers on the corners of your shape (for any other shape place them where relevant, you can even place them inside the shape if necessary) remember the label on each one to replace them in the right order later.

 Now go to the last key frame, the markers should be waiting for you at the gravity center of your shape, place them one by one in their respective corner

 


That's it! Flash now knows exactly what to do with each point and will produce a nice tween just for you!


No comments:

Post a Comment