Here is a super slick effect that takes very little effort. Plug 3 tweens into TimelineMax and you’re off to the races! Forget the Flash timeline and those horrible new Motion Tweens. We’ll touch on some extra goodies like the immediateRender property and visible plugin.
Watch The Video
Some cool stuff we will discus
visible plugin
The visible plugin, activated by default in TweenMax, is a real life saver. If you ever want to hide an object that is being tweened as soon as a tween finishes, just plop this into your vars object like so: visible:false. No need to add an onComplete callback or additional zero based tween. It’s all built in!
immediateRender:false
immediateRender is another handy property when you are using tweens that are set to have a duration of zero seconds. Since these tweens have no duration, they complete the instant they are created. To avoid this, simply pass immediateRender:false into your vars object.
tweenTo()
tweenTo allows you to play a TimelineLite/Max instance from where the playhead currently resides to any point in time on the timeline. tweenTo respects the playback speed of the timeline and all easing. You can pass a time or frameLabel into this method. tweenTo(2) will play the timeline to 2 seconds into your timeline. If the playhead is 5 seconds in, the timeline will automatically play backwards. very cool.
ActionScript 3.0 code used in this movie
import com.greensock.*;
import com.greensock.easing.*;
//startValues for the card back
flipper.back.rotationY = -90;
flipper.back.alpha=0;
//speed of 90 degrees of flip
var flipSpeed:Number = .5;
//create TimelineMax instance
var tl:TimelineMax = new TimelineMax({paused:true});
//flip the front 90 degrees
tl.append(TweenMax.to(flipper.front, flipSpeed, {rotationY:90, visible:false, ease:Linear.easeNone}))
//set the back to alpha of 0 as soon as front finishes
tl.append(TweenMax.to(flipper.back, 0, {alpha:1, immediateRender:false}))
//flip the back 90 degrees
tl.append(TweenMax.to(flipper.back, flipSpeed, {rotationY:0, ease:Linear.easeNone}))
//basic button code
flip1_mc.addEventListener(MouseEvent.CLICK, flip1);
function flip1(e:MouseEvent){
// play to the beginning of the timeline
tl.tweenTo(0);
}
flip2_mc.addEventListener(MouseEvent.CLICK, flip2);
function flip2(e:MouseEvent){
// play to the end of the timeline
tl.tweenTo(tl.duration);
}
Download Flash CS4 Source File
flipper_new_cs4
(must export as Flash Player 10+)
Learn More About the GreenSock Tweening Platform
Official GreenSock Site
SnorklTV GreenSock Tips
Merry Christmas
