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

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.