Sunday, 20 March 2011

TimelineLite in Actionscript 3

TimeLinelite is a library from the author of TweenLite that allows you to group instances of TweenLites together to form a sort of coded timeline movie clip container. TimeLinelite gives you more power and control over the functionalities of your tweens.

Here are some of my examples. The first example uses the append() method which adds the TweenLite instances to the end of the timeline. The code below will move the mc1, mc2 and mc3 movieclip’s x position 100 pixel, one after the other.

var timeline:TimelineLite = new TimelineLite();
timeline.append( new TweenLite(mc1, 0.5, {x:100}) ); 
timeline.append( new TweenLite(mc2, 0.5, {x:100}) ); 
timeline.append( new TweenLite(mc3, 0.5, {x:100}) );

The append() method has an optional offset parameter which will offset the insertion point of a tween. This parameter can be a positive or a negative number. A positive number will cause a delay before the tween is inserted, and a negative number will overlap the previous tween. The code below will create a 1 second delay for the second and third tween. If you change the 1 for a -1 it will overlap the first tween.

var timeline:TimelineLite = new TimelineLite();
timeline.append(, 0.5, {x:100}) ); 
timeline.append(, 0.5, {x:100}), 1 ); 
timeline.append(, 0.5, {x:100}), 1 );

The second example uses the insert() method. This method inserts a Tweenlite instance into the timeline at a specific time or label.

var timeline:TimelineLite = new TimelineLite();
timeline.insert(, 0.5, {alpha:0}), 1.5); 
timeline.insert(, 5, {y:100}) , 0 ); 
timeline.insert(, 0.5, {x:100}),0.5);

The code above starts by tweening mc2’s y position 100 pixels, then mc3’s x position 100 pixels and finally mc’s alpha property to 0. The third example uses the prepend() method to add a Tweenlite instance at the beginning of the timeline.

var timeline:TimelineLite = new TimelineLite();
timeline.insert(, 0.5, {alpha:0}), 1.5); 
timeline.insert(, 0.5, {y:100}) , 0 ); 
timeline.insert(, 0.5, {x:100}),0.5);

timeline.prepend( TweenLite.from(mc4, 1, {alpha:0}) );

There is also the appendMultiple(), prependMultiple(), and insertMultiple() methods which allow you to append, prepend and insert multiple Tweens at once. The fourth example controls the playback of the timeline using the play() and reverse() methods. The other playback methods include: pause(), resume() and restart().

var mcArray:Array = new Array();
var timeline:TimelineLite = new TimelineLite({onComplete:completeHandler});

for(var i:uint = 0; i < 30; i++){
 var mc:Mc = new Mc();
 mc.x = stage.stageWidth/2 - mc.width/2;
 mc.y = stage.stageHeight - mc.height;
 var r:Number =Math.random();
 timeline.append([i], 1, {y:0,
     x:Math.random() * stage.stageWidth,
     rotation:Math.random() * 30 + 10,
     scaleX: r,  scaleY: r,
     alpha: 0.3 + Math.random() * 0.8

function completeHandler():void{
 TweenLite.delayedCall(1, function(){ timeline.reverse();  });    

The overall speed of timeline can be changed using the timescale property. The default value is 1. The speed can be doubled if the timescale is set to 2, and can be halved if the timescale is set to 0.5. It is also possible to scrub through the timeline with a slider by using the currentProgress property of the timeline.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP