Share
Dans la vidéo précédente, je vous ai montré comment implémenter les commandes de lecture de base. Aujourd'hui, je vais parler de l'utilisation d'étiquettes pour marquer et naviguer vers des emplacements précis dans un TimelineLite. Les étiquettes dans TimelineLite fonctionnent de la même manière que les étiquettes de cadre dans les scénarios Flash IDE. Je vais vous montrer de nombreuses façons d'ajouter des étiquettes et de les utiliser intelligemment. Nous examinerons également quelques fonctionnalités exclusives à TimelineMax..
Jetons un coup d'oeil à l'exemple que nous allons construire dans la vidéo:
Vous pouvez trouver tous les fichiers utilisés pour créer le fichier SWF ci-dessus dans les fichiers source de ce didacticiel..
Il existe deux méthodes que vous pouvez utiliser pour ajouter des étiquettes à un TimelineLite.
addLabel (label: String, time: Number): void
Ajoute une étiquette à un moment donné. Il est très courant de passer la durée actuelle de la timeline en tant que durée.
Accentsconagua
tl.append (TweenMax.to (align_mc, 1, x: endX)); tl.append (TweenMax.to (align_mc, .2, autoAlpha: 0)); // ajoute une étiquette nommée transform immédiatement après la fin de l'interpolation précédente. tl.addLabel ("transform", tl.duration) tl.append (TweenMax.to (transform_mc, 1, y: endY)); insert (tween: TweenCore, timeOrLabel: * = 0): TweenCore
Lors de l'utilisation insérer() pour insérer une interpolation, celle-ci sera insérée à l'heure ou à l'étiquette spécifiée dans le deuxième paramètre. Si vous insérez une étiquette qui n'existe pas encore, cette étiquette sera automatiquement placée à la fin de la timeline, puis l'insertion sera interpolée. Cette technique fait insérer() agir comme un ajouter() avec la valeur ajoutée de créer une étiquette.
tl.append (TweenMax.to (align_mc, 1, x: endX)); tl.append (TweenMax.to (align_mc, .2, autoAlpha: 0)); // insère une interpolation et l'étiquette de transformation immédiatement après la fin de l'interpolation précédente. tl.insert (TweenMax.to (transform_mc, 1, y: endY), "transform");
Intuitif de TimelineLite gotoAndPlay () et gotoAndStop () les méthodes fonctionnent exactement comme ces mêmes méthodes de l'objet MovieClip. Bien que cette vidéo se concentre sur l’utilisation de gotoAndPlay avec une étiquette, vous pouvez également passer un moment..
// saute à l'étiquette de couleur et joue à tl.gotoAndPlay ("color"); // saute 1 seconde dans la timeline et arrêtez tl.gotoAndStop (1); TimelineMax nous donne la capacité unique de jouer à un label particulier avec le tweenTo () méthode. Si MovieClips avait une telle méthode, elle s'appellerait jouer à(). À la fin de cette série, je vous montrerai comment ajouter une aisance à un tweenTo () ainsi que plusieurs autres astuces.
En raison de la nature introductive de cette série, certaines fonctionnalités de TimelineLite / Max relatives aux étiquettes ne sont pas couvertes. Les utilisateurs avancés voudront peut-être se renseigner sur l'option suppressEvents paramètre pouvant être utilisé avec gotoAndPlay () et gotoAndStop () dans la documentation.
TimelineMax dispose d'un certain nombre de fonctionnalités pour déterminer le nom des étiquettes en fonction de leur relation avec la position actuelle de la tête de lecture ou une heure spécifiée. Ces propriétés et méthodes permettent de calculer dynamiquement quelle que soit l'étiquette la plus proche.
currentLabel - L'étiquette la plus proche qui est à ou avant l'heure actuelle.
getLabelBefore (heure: nombre) - Retourne l'étiquette précédente (le cas échéant) précédant le paramètre time. Si vous ne passez pas de temps, le temps actuel sera utilisé.
getLabelAfter (heure: nombre) - Retourne la prochaine étiquette (le cas échéant) APRÈS le paramètre time. Si vous ne passez pas de temps, le heure actuelle sera utilisé.
En raison des puissantes propriétés et méthodes de TimelineLite / Max, il est extrêmement facile de naviguer et de contrôler vos chronologies basées sur des scripts. Les caractéristiques liées aux étiquettes dont nous avons parlé aujourd'hui ne font qu'effleurer la surface de ce qui peut être fait. Une fois que vous maîtriserez ces techniques de base, vous créerez des chronologies avec des fonctionnalités de plus en plus dynamiques. Supposons que vous vouliez empêcher un utilisateur de cliquer sur le bouton "bibliothèque" une fois qu'il se trouvait dans la section bibliothèque. Vous pouvez simplement ajouter une logique au gestionnaire de clic du bouton qui prend en compte les éléments suivants:
Si l'étiquette précédente est identique à celle du bouton sur lequel vous venez de cliquer, ne faites rien..
N'hésitez pas à convertir cela en ActionScript si vous souhaitez obtenir un crédit supplémentaire;)
Dans le prochain tutoriel, je vais montrer des techniques avancées pour ajouter des tonnes d'interpolations à une timeline avec très peu de code et une précision extrême..
Si vous avez des questions ou des commentaires sur ce tutoriel, postez simplement un commentaire ci-dessous..
Merci d'avoir regardé!
