GreenSocks tweening platform

De EduTech Wiki
Aller à la navigation Aller à la recherche

Greensock est une librairie fonctionnant comme une sorte d'extension du langage d'ActionScript. Elle permet de programmer de manière rapide et efficace, en simplifiant la création de codes dans ActionScript pour par exmeple:'(tweening, transforming, loading)'. Pour utiliser cette libraire, il vous faudra d'abord l'installer proprement. Allez lire cette page pour installer Greensock ou pour découvrir d'autres librairies.

Ressources: Tutoriel TimelineLite de Greensock (en anglais).

Voici un exemple réalisé avec Greensock:

Allez voir l'exercice: Télécharger ensuite le fichier source: Ou copier le code ci-dessous et insérez-le dans votre projet. N'oubliez pas de changer le nom des instances (box1-4 et button) et de les remplacer par les vôtres!


//Ces lignes de codes d'abord ont été prise du site http://www.greensock.com/timelinelite/ 
//Puis elles ont ensuite été modifiées selon le tutoriel qui se trouve ici car il y avait quelques bugs... Source: http://www.greensock.com/timeline-basics/
//Vous remarquerez que les lignes de codes ne sont pas tout à fait similiares au tutoriels, elle ont été changées pour la réalsiation de l'exercice.

//ces lignes de codes ont été prise du site http://www.greensock.com/timelinelite/ 
//Elles ont ensuite été modifiées selon le tutoriel car ça plantait complètement...! Source: http://www.greensock.com/timeline-basics/


import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;


TweenMax.to (R2D2, 4, 
  {bezier:[{x:170, y:120}, {x:50, y:250}, {x:440, y:330}],
          orientToBezier:true, 
          ease:Bounce.easeOut});

//create the timeline and add an onComplete callback that will call myFunction() when the timeline completes

var timeline:TimelineLite = new TimelineLite({onComplete:myFunction});
timeline.append(new TweenLite(box1, 1, {y:"-120"}));
timeline.append(TweenLite.to(box2, 1, {y:"-100"}));
timeline.append(TweenLite.to(box3, 1, {y:"-80"}));
timeline.append(TweenLite.to(box4, 1, {y:"-60"}));

function myFunction():void {
	trace("Voilà, l'animation a été jouée jusqu'à la fin sans erreur!!!");
}

timeline.appendMultiple([new TweenLite(box1, 1, {alpha:0}),
						 new TweenLite(box2, 1, {alpha:0}),
						 new TweenLite(box3, 1, {alpha:0}),
						 new TweenLite(box4, 1, {alpha:0})], 1, TweenAlign.START, 0.2);
						 
button.addEventListener(MouseEvent.ROLL_OVER, overHandler);
button.addEventListener(MouseEvent.ROLL_OUT, outHandler);

function overHandler(event:MouseEvent):void {
	timeline.reverse();	
}
function outHandler(event:MouseEvent):void {
	timeline.play();
}