Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Team Think Labs | Shape Tween Tip 01: Bounding Box Cheat
single,single-post,postid-1619,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive

Shape Tween Tip 01: Bounding Box Cheat

Flash first introduced the shape tween in 1842 [citation needed], allowing one group of vector shapes to morph into another over a length of frames. It was an awesome tool then, and remains one today … when/if it works. For a shape on frame 01 to smoothly transition to a different shape on frame 10, everything has to be (obnoxiously) just right. There is no one catch-all method that will work for every situation, as a shape tweens behavior is largely  unpredictable, especially when using complex shapes with more than one color. That said – the FX that are possible with the ‘ol green tween are very impressive and run extremely light on the file-size frontier — it’s worth the time to get familiar with the tool and hopefully this tip can save you a headache, or at least decrease its duration…

STEP ONE: Select the vector points you’d like to shape tween and duplicate them onto their own layer. Using a stroke with no fill, draw a rectangle outside the bounds of your shape. Now paint bucket fill (set to ‘Dont Close Gaps’) the empty space with a solid color fill and delete all strokes.



STEP TWO: Create your second keyframe, modify the graphics as desired, and create the tween. Scrub through your timeline, you’ll see the difference.

STEP THREE: When your tween is where ya want it, go ahead and make that color fill a #CCCCCC w/1% opacity on every frame. You can always make it this 1% neutral gray color from the onset as well.