article(s) dans votre panier VOIR

Intégration CSS et jQuery d'’une animation SpriteSheet avec Animate sur Photoshop CC

  • Vidéo 41 sur 81
  • 6h09 de formation
  • 81 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
Intégration CSS et jQuery d’une animation SpriteSheet avec Animate
00:00 / 11:00
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,90€
  • Téléchargement + VOD à vie
  • Exercice / Validation des acquis
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans ce tuto Photoshop, Arzhur Caouissin va intégrer l'image Sprite Sheet sur Edge pour créer l'animation.

Le formateur créer un dossier images dans lequel il va placer les deux sprite-sheets mais le dossier va servir tout au long de cette formations pour placer les différentes images au fur et à mesure. Nous allons maintenant dans Edge animate et créons un nouveau document. Nous enregistrer immédiatement le document dans le même dossier dans lequel se trouve images en l'appelant index.html. Edge va directement trouver les deux images du dossier images. Edge se repose sur trois codes, du Java Script, du CSS 3 et du jQuery, il crée donc un document html et trois documents js.

De retour sur Edge, pour insérer l'image dans l'espace de travail, il suffit de faire un glissé déposer. Il désactive les animations et replace son image dans l'interface. Il recadre l'image pour n'afficher qu'un seul sprite et le place au milieu de la scène puis il va créer de clés pour animer le masque. Il place une nouvelle clé sur la deuxième image et déplace le masque pour afficher une autre partie de l'image. Pour replacer l'image au milieu de la scène, on active les clés de position, on place une première clé à la première image, puis une deuxième à la deuxième image qu'il va cette fois modifier en retirant la largeur de l'image. On continue de la même façon pour les autres images. Une fois l'animation terminée, on change les paramètres du document pour avoir la même couleur de fond que l'image.

Pour créer une boucle on copie et colle les clés à la suite et pour que le personnage se déplace, on crée un symbole, on ajoute deux clés de déplacement (début et fin) puis on ajoute une transition.