article(s) dans votre panier VOIR

Animations grossissement / rétrécissement des vignettes

  • Vidéo 19 sur 57
  • 3h27 de formation
  • 57 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Animations grossissement / rétrécissement des vignettes
00:00 / 07:44
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
49,00€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Avec ce tutoriel vidéo pour maîtriser la programmation dans Animate CC, l’auteur vous fait une animation de grossissement ou le rétrécissement des vignettes. Le but de cette formation est de mettre en place la programmation du grossissement ou le rétrécissement des vignettes. Dans un premier temps, pour faire le grossissement d’une vignette, vous devez créer un événement de survol. A partir de cet événement, vous créez une fonction pour le traçage de la vignette. Cette action faite, vous ajoutez l’instruction createjs.Tween.get(evt.target).to. Pour continuer, vous ouvrez une accolade puis vous mettez les propriétés que vous souhaitez animer. Pour cela, vous saisissez scaleY :1, scaleX :1, alpha :1. A titre d’information, la valeur des scale à 1 se réfère à un grossissement de 100% de la vignette. Après avoir fermé l’accolade, vous mettez par la suite la durée du mouvement et vous déterminez l’accélération. Concernant cette dernière, vous saisissez l’instruction createjs.Ease.quadInOut. Cette instruction signifie qu’il y aura une accélération puis une décélération sur la fin du mouvement, lors du survol du curseur sur une vignette. Dans le cadre de l’amélioration de l’animation, vous changez l’index d’un élément. Pour cela, toujours dans la fonction function on de l’événement de survol, vous mettez _this.vignettes.setChildIndex (evet.target, _this.vignettes.getNumChildren() -1. En notant que le paramètre getNumChildren indique le nombre de vignettes du symbole menu vignette. Pour la prochaine étape, afin de créer une animation de rétrécissement, vous mettez en place un événement de sortie de survol. Par la suite, vous attribuez une fonction à cet événement. Dans cette fonction vous écrivez l’instruction createjs.Tween.get(evt.target).to puis vous ouvrez une accolade. Dans celle-ci, vous saisissez scaleY :.8, scaleX :.8 alpha :.4. Ainsi, vous obtenez un rétrécissement de 80% au niveau de la vignette lors de la sortie de survol du curseur. Pour conclure, cette vidéo vous permet de donner une animation aux vignettes.