« GreenSocks tweening platform » : différence entre les versions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
Ligne 2 : | Ligne 2 : | ||
Pour utiliser cette libraire, il vous faudra d'abord l'installer proprement. Allez lire [http://edutechwiki.unige.ch/fr/Flash_CS4_-_Utilisation_de_librairies cette page] pour installer Greensock ou pour découvrir d'autres librairies. | Pour utiliser cette libraire, il vous faudra d'abord l'installer proprement. Allez lire [http://edutechwiki.unige.ch/fr/Flash_CS4_-_Utilisation_de_librairies cette page] pour installer Greensock ou pour découvrir d'autres librairies. | ||
Démos: | |||
Allez voir l'exercice: | Allez voir l'exercice: | ||
Télécharger ensuite le fichier source: | 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! | 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! | ||
Tutoriels: | |||
[http://www.greensock.com/timeline-basics/ Tutoriel TimelineLite] de Greensock (en anglais). | |||
Voici un exemple de code réalisé avec Greensock: | |||
<source lang="actionscript"> | <source lang="actionscript"> | ||
//Ces lignes de codes d'abord | //Ces lignes de codes ont d'abord été prises sur le site http://www.greensock.com/timelinelite/ | ||
// | //Je les ai ensuite modifiées selon le tutoriel mentionné plus haut car il y avait quelques bugs... | ||
//Vous remarquerez que les lignes de codes ne sont pas tout à fait | //Vous remarquerez que les lignes de codes ne sont pas tout à fait similaires à ce tutoriel. Elles ont été légèrement modifiées pour la réalisation de l'exercice. | ||
Ligne 25 : | Ligne 26 : | ||
import flash.events.MouseEvent; | import flash.events.MouseEvent; | ||
//La partie nommée 'bezier' a une ingluence sur le texte qui dégringole en montagne russe | |||
TweenMax.to (R2D2, 4, | TweenMax.to (R2D2, 4, | ||
Ligne 31 : | Ligne 34 : | ||
ease:Bounce.easeOut}); | ease:Bounce.easeOut}); | ||
// | |||
//Cette partie est en lien avec les photos et le bouton revers. | |||
//Create the timeline and add an onComplete callback that will call myFunction() when the timeline completes | |||
var timeline:TimelineLite = new TimelineLite({onComplete:myFunction}); | var timeline:TimelineLite = new TimelineLite({onComplete:myFunction}); |
Version du 10 décembre 2011 à 22:27
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.
Démos: 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!
Tutoriels:
Tutoriel TimelineLite de Greensock (en anglais).
Voici un exemple de code réalisé avec Greensock:
//Ces lignes de codes ont d'abord été prises sur le site http://www.greensock.com/timelinelite/
//Je les ai ensuite modifiées selon le tutoriel mentionné plus haut car il y avait quelques bugs...
//Vous remarquerez que les lignes de codes ne sont pas tout à fait similaires à ce tutoriel. Elles ont été légèrement modifiées pour la réalisation de l'exercice.
import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;
//La partie nommée 'bezier' a une ingluence sur le texte qui dégringole en montagne russe
TweenMax.to (R2D2, 4,
{bezier:[{x:170, y:120}, {x:50, y:250}, {x:440, y:330}],
orientToBezier:true,
ease:Bounce.easeOut});
//Cette partie est en lien avec les photos et le bouton revers.
//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();
}