Apprenez à Animer avec Create.js et la Classe Twin

Code : ajout des fonctions Tween d'animation pour animer les états du bouton
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Ateliers créatifs Adobe Animate CC
Revoir le teaser Je m'abonne
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de :

  • Comprendre l'utilisation de la classe Twin dans Create.js.
  • Apprendre à programmer des animations d'objets d'affichage.
  • Savoir manipuler les propriétés scale pour des animations fluides et dynamiques.

Découvrez l'utilisation de la classe Twin de Create.js pour créer des animations d'objets directement via la programmation.

Dans cette leçon, nous explorerons la classe Twin de Create.js, qui est dédiée à l'animation des objets d'affichage. Cette API permet de programmer des animations de manière fluide et efficace. Nous verrons comment cibler un élément, appliquer des transformations de taille (scale), et gérer la durée et l'accélération de ces animations.

La classe Twin facilite la manipulation des propriétés d'un objet survolé, comme un bouton, en modifiant ses dimensions sur les axes X et Y. Vous apprendrez à contrôler la durée de l'animation et l'utiliser des types d'accélération tels que QuadOut pour obtenir des transitions fluides.

En fin de leçon, vous saurez non seulement programmer des animations simples mais aussi comprendre les principes de base des propriétés de transformation des objets dans Create.js, rendant vos éléments interactifs et dynamiques.

Voir plus
Questions réponses
Quel est le but de la classe Twin dans Create.js ?
La classe Twin de Create.js est dédiée à l'animation des objets d'affichage, permettant de créer des animations par programmation facilement.
Quels types de propriétés peut-on manipuler avec Twin ?
Avec Twin, on peut manipuler des propriétés telles que 'scaleX' et 'scaleY' pour ajuster les dimensions des objets sur les axes X et Y.
Comment peut-on modifier la durée de l'animation dans Twin ?
La durée de l'animation peut être modifiée en spécifiant la valeur en millisecondes dans la méthode de transformation, comme par exemple '500' pour une demi-seconde.
on va pouvoir programmer à l'intérieur de nos fonctions. Alors c'est là que je vais faire appel à une nouveauté, c'est l'utilisation de la classe Twin, donc la classe Twin c'est une classe Create.js qui est dédiée, dans l'API Create.js, qui est dédiée à l'animation des objets, des Display Objects, donc des objets d'affichage dans nos animations. Ça va nous permettre de créer des animations par la programmation, vous allez voir assez facilement. Donc pour appeler cette, cette classe Twin, je vais utiliser le mot clé Create.js, donc Create.js point le nom de ma classe. Alors vous voyez que en programmation on a un petit, un petit assistant qui nous aide un petit peu à rédiger nos lignes de code. Get, donc ça c'est pour appeler, pour cibler l'élément sur lequel je veux appliquer cette transformation. Donc l'élément ça va être Event, donc en fait la cible courante de mon événement, donc de l'événement Moose Over, donc c'est à dire l'élément qui est, qui est survolé, en l'occurrence mon bouton. Current Target, et je vais lui appliquer une transformation. Alors là il ne faut pas se tromper, il faut être précis dans la manière dont on rédige le code. Donc c'est parenthèse, accolade, scale Y, donc en fait je vais jouer sur la propriété scale Y, c'est à dire échelle Y, donc échelle verticale de mon objet. Je vais pouvoir jouer également sur une deuxième propriété. Alors cette propriété je vais la mettre, je vais lui donner la valeur 1.2, c'est à dire en gros 120% de son échelle actuelle. Donc actuellement elle est à 100 et je vais lui donner une valeur 1.2, c'est à dire je vais la grossir, je vais lui donner une animation de grossissement de 100, d'une échelle 100 à une échelle 120. Et virgule pour pouvoir rentrer une deuxième propriété, c'est la propriété scale X, à laquelle je vais donner la valeur 1.2. Et je ferme l'accolade. Virgule ça va me permettre de mettre un paramètre pour la durée de mon animation, donc c'est une animation qui va durer 0,2 secondes, donc ce qui va être assez rapide, pas besoin de faire une animation trop lente. Alors on va commencer avec, je vais mettre 500 pour la durée de mon animation, donc ça sera une demi-seconde. Et là je vais pouvoir également gérer une accélération avec la classe Is et QuadOut, qui est en fait un type d'accélération. Il faut savoir que la classe Is, qui est une classe dédiée dans l'API Create.js aux accélérations, comporte plusieurs types d'accélérations. Là je vais juste utiliser le type Quad, avec une accélération en sortie, Out, et fermer ma ligne de code par toujours le point virgule. Donc je vais tester pour voir si ça fonctionne. Déjà sur le survol, je vérifie vite fait si je n'ai pas fait d'erreur, Event Current Target, tout m'a l'air bon. Je reviendrai dessus si jamais j'ai oublié quelque chose, mais a priori ça m'a l'air ok. Alors déjà ça s'affiche, c'est bon signe, ça veut dire qu'il n'y a pas d'erreur. Et effectivement ça fonctionne sans souci. Alors on voit que le mouvement il est assez lent parce qu'il dure une demi-seconde. En fait si je veux l'accélérer, j'ai juste à changer la valeur qui est ici. Par exemple je vais mettre 200 au lieu de 500, ça va être 0,2 secondes. Alors là j'ai mon affichage qui est bloqué. Voilà, j'ai une animation qui est un petit peu plus rapide, plus dynamique. Et pour mon état sortie du survol, je vais juste avoir à récupérer, là je vais gagner du temps, je vais juste avoir à copier toute cette ligne de code, je ne vais pas la retaper à la main, et je vais juste changer la valeur de mon échelle Y et X, et je vais la remettre à 1 en fait. Donc je vais revenir à 100% de la taille de mon bouton. Voilà, donc là vous voyez que c'est déjà beaucoup plus rapide et ça fonctionne nickel, j'ai pas de souci. Donc on a vu comment programmer assez facilement, parce que c'est une première fois donc il faut prendre le temps de bien expliquer les choses, mais rapidement, du moins une fois qu'on est habitué, un comportement de bouton sur un simple movie clip.

Programme détaillé de la formation

Nos dernières formations Animate CC