Lemieux Design

Flash | Interactive | Web | Graphics | Brand | Video

Archive for the ‘TweenLite’ Category

TweenMax/TweenLite

Posted on: February 20th, 2009 by alemieux

I took an advanced ActionScript class a few weeks ago and was introduced to TweeLite (http://www.tweenlite.com), an AS Tween Library. I was skeptical at first, but after playing with it for a while, it’s got some really great features. On the site, you can preview all of the possible animations and filters. You can also do this with the SWFs that come with the download.

You’ll have to import the appropriate classes to begin with. They are all located in the gs folder.

import gs.*;

Then you have access to the Tweens. Here’s an example [nested in a function] of a MovieClip called mover, being transformed:

function makeGrow(e:MouseEvent):void {
TweenLite.to(mover, 2, {scaleX:6.5, scaleY:6.5, x:300, y:90, rotation: 15, alpha: 0.3, delay:1});
}

As you can see, this is pretty powerful stuff as you can couple more than one property into the function, unlike Flash’s built-in Tween object. The delay property is nice to, because you can set a string of events.

If you have multiple clips you want to move, you can use something called a Tween Group. Here’s an example:

function moveBoxes(e:MouseEvent):void {
TweenGroup.allTo([box1, box2, box3, box4], 1, {y:78});
}

Another thing you can do is apply filters to clips, like Drop-Shadow, Blur, etc. Here’s an example:

function blurThis(e:MouseEvent):void {
TweenMax.to(cross, 1, {blurFilter:{blurX:40}});
TweenLite.to(cross, 2, {x:30, delay: 0.2});
TweenMax.to(cross, 3, {blurFilter{blurX:0}});
}

I’m still working out some things, like getting multiple objects separate tween instances and getting more filter effects to work. But the results are great and easy to implement. There have been other Tween packages in the past, but this one is pretty powerful.