Share
Dans la première partie de cette série, nous avons examiné de manière générale les capacités de TimelineLite. Dans cette vidéo, je vais vous montrer comment utiliser votre première animation TimelineLite. Vous en apprendrez plus sur les différentes méthodes et propriétés qui serviront de base à toutes les leçons à venir.
Vous pouvez trouver tous les fichiers utilisés pour créer le fichier SWF ci-dessus dans les fichiers source de ce didacticiel..
Les méthodes suivantes sont utilisées pour ajouter des tweens à un TimelineLite. Il est très important de comprendre les différences subtiles décrites dans la vidéo..
insérer() - Ajoute des tweens à une chronologie à une heure précise. Si aucun temps d'insertion n'est spécifié, l'interpolation sera insérée à une heure de début égale à zéro seconde..
// cette interpolation sera insérée au début de la timeline tl.insert (TweenLite.to (mc, 1, x: 100)); // cette interpolation sera insérée 2 secondes dans la timeline tl.insert (TweenLite.to (mc, 1, x: 100), 2);
ajouter() - Ajoute des interpolations à une chronologie par rapport à la fin de la chronologie. La valeur de décalage peut être positive ou négative. Un décalage négatif permettra aux tweens de se chevaucher.
// cette interpolation sera directement effectuée une fois que toutes les interpolations précédentes auront terminé tl.append (TweenLite.to (mc, 1, x: 100)); // cette interpolation sera jouée 1 seconde avant que toutes les interpolations précédentes aient terminé tl.append (TweenLite.to (mc, 1, x: 100), -1);
prepend () - Ajoute des tweens au début d'une timeline et avance tous les tweens existants dans le temps.
// cette interpolation se produit avant toute autre interpolation existant dans la timeline tl.prepend (TweenLite.to (mc, 1, x: 100));
Les propriétés suivantes sont très utiles pour ajouter des fonctionnalités à vos scénarios et pour le débogage:
Lors de la construction d'un TimelineLite, vous pouvez transmettre un certain nombre de "propriétés spéciales" au constructeur. La vidéo montre onUpdate, onComplete et en pause. Les propriétés spéciales sont toutes contenues dans un objet vars.
// ce scénario sera initialement mis en pause et lorsqu'il sera terminé // il appellera une fonction appelée completeHandler tl = new TimelineLite (onComplete: completeHandler, paused: true);
TimelineLite a beaucoup plus de méthodes, propriétés et "propriétés spéciales" qui sont trop nombreuses pour être énumérées ici. Je vous exhorte à enquêter sur tout ce qu'il y a à offrir dans la documentation officielle de TimelineLite. Ceux qui sont énumérés ci-dessus sont les plus importants à comprendre pour commencer. Au fur et à mesure que cette série progressera, je vous présenterai plus d'outils que vous utiliserez pour mieux contrôler la configuration et la lecture de vos séquences d'animation..
La prochaine vidéo de cette série se concentrera sur le contrôle d’un TimelineLite en cours de lecture. Il couvrira tout de base jouer() et sens inverse() d'ajouter un contrôle de nettoyage interactif.
Vous trouverez ci-dessous un exemple du code utilisé dans la vidéo pour illustrer la structure de base d’un TimelineLite..
// constructeur tl = new TimelineLite (); // tweens qui introduisent la voiture. // insert () les met tous à un temps de 0 secondes tl.insert (TweenMax.from (gti_mc, .5, x: -500, blurFilter: blurX: 140)); tl.insert (TweenLite.from (gti_mc.wheel1_mc, .5, rotation: -180)); tl.insert (TweenLite.from (gti_mc.wheel2_mc, .5, rotation: -180)); // append () ajoute des tweens par rapport à la fin de la timeline //.5 secondes après la fin des tweens précédents, ce texte s'affichera pendant 1 seconde, puis disparaîtra en fondu jusqu'à tl.append (TweenMax.from (hello_mc, .5, alpha: 0, répéter: 1, répéterDelay: 1, yoyo: vrai), .5); // introduit le deuxième texte .5 secondes après la fin de l'interpolation précédente tl.append (TweenMax.from (colors_mc, .5, alpha: 0), .5); // séquence de teinte tl.append (TweenMax.to (gti_mc.body_mc, .2, teinte: bleu), .5); tl.append (TweenMax.to (gti_mc.body_mc, .2, teinte: rouge), .5); tl.append (TweenMax.to (gti_mc.body_mc, .2, teinte: noir), .5); // dernier texte tl.append (TweenMax.from (black_mc, .5, alpha: 0), 1); // optionnel: insère une boîte noire révélée au début de la timeline tl.prepend (TweenLite.from (cover_mc, .5, y: 0));
Accentsconagua