Accentsconagua

Guide de démarrage TimelineLite Ultimate Contrôle de la lecture

Code
Share

Lors de la session précédente, j'ai expliqué comment créer un TimelineLite de base. Aujourd'hui, je vais vous montrer les méthodes et les propriétés que vous utiliserez pour contrôler la lecture de votre TimelineLite. En combinant ces méthodes et propriétés, vous pouvez étendre la fonctionnalité intégrée de TimelineLite pour créer des contrôles d’avance rapide et de lecture / pause. Je vais également vous montrer à quel point il est facile de configurer un composant Slider à utiliser comme nettoyeur TimelineLite..

TimelineLite en action

Jetons un coup d'œil au résultat final sur lequel nous allons travailler:

Vous pouvez trouver tous les fichiers utilisés pour créer le fichier SWF ci-dessus dans les fichiers source de ce didacticiel..

Regarder le screencast

Méthodes de lecture TimelineLite

Les méthodes suivantes vous permettent de contrôler avec précision la lecture de votre TimelineLite.

  • jouer() -Commence à jouer à partir de la position actuelle.
  • pause() - Arrête la chronologie.
  • sens inverse() - Fait reculer la chronologie. Si vous souhaitez uniquement inverser la direction de la ligne de temps et ne pas poursuivre la lecture, vous pouvez passer un paramètre forceResume de false - i.e. inverse (faux).
  • CV() - Commence à jouer à partir de la position actuelle sans changer de direction (avant ou arrière).
  • redémarrer() - Lit la chronologie depuis le début

Commandes de lecture personnalisées

En combinant les méthodes et propriétés intégrées, il est facile de créer des fonctionnalités avancées:

Avance rapide - Vous pouvez créer un contrôle d’avance rapide en augmentant la timeScale propriété et forçant la lecture dans une direction avant.

 fonction privée fastForwardHandler (e: MouseEvent): void tl.timeScale = 4; tl.play ();

Basculer Play / Pause - Pour basculer entre les états de lecture et de pause, annulez simplement la en pause propriété. Il est important de s'assurer que timeScale et renversé les propriétés sont définies sur les valeurs normales, car elles pourraient être modifiées à l'aide des boutons d'avance rapide et de retour rapide.

 fonction privée playPauseHandler (e: MouseEvent): void resetTimeScale (); tl.reversed = false; tl.paused =! tl.paused;

Épurateur de composant de curseur - Le composant Slider permet de parcourir assez facilement la timeline en modifiant le progrès en cours de la chronologie. Le curseur est réglé sur des valeurs de sortie comprises entre 0 et 100. Dans le code, cette valeur est convertie en un nombre compris entre 0 et 1..

 import fl.controls.Slider; import fl.events.SliderEvent; slider.addEventListener (SliderEvent.THUMB_DRAG, sliderChange); fonction privée sliderChange (e: SliderEvent): void tl.currentProgress = slider.value * .01; // force la timeline à s'arrêter lorsque le scrubber est relâché. tl.pause ();

Devoirs

Quoi? Tu me donnes des devoirs? Oui! Je veux que tu sois le meilleur. Flex votre esprit avec ce petit défi.

  • Créer un TimelineLite qui anime six éléments
  • Créez des boutons play, pause et reverse comme dans le fichier de démonstration ci-dessus
  • Créer des boutons avec des fonctionnalités composées comme le retour rapide et le ralenti

Pour apprendre vraiment ce matériau, rien de mieux que de plonger et de se salir les mains.

Conclusion

Jusqu'à présent, je vous ai donné pas mal d'informations sur la création et le contrôle des animations TimelineLite. Bien que la façon dont vous contrôlez les animations de scénario TimelineLite et Flash IDE présente des similitudes évidentes, j'aime beaucoup la façon dont TimelineLite donne aux animateurs beaucoup plus de contrôle avec les animations. sens inverse(), redémarrer(), et CV() méthodes. le timeScale et progrès en cours les propriétés ouvrent des possibilités vraiment intéressantes qui seront discutées encore plus à l'avenir.

Dans la vidéo suivante, je vous montrerai comment ajouter des étiquettes aux instances de TimelineLite afin de pouvoir naviguer facilement dans certaines sections de votre scénario. Les étiquettes TimelineLite fonctionnent de manière très similaire aux étiquettes d'image dans l'IDE Flash, mais avec certaines fonctionnalités ajoutées. Ça va être très amusant.

Si vous avez des questions ou des commentaires sur ce tutoriel - ou sur vos devoirs;) - n'hésitez pas à poster un commentaire ci-dessous.

Merci d'avoir regardé!

Code
×