CATALOGUE Design et Infographie Formation Photoshop Apprendre Photoshop CC pour le Web Créer une Animation avec un Sprite Sheet

Créer une Animation avec un Sprite Sheet

Introduction aux animations Spritesheet
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Photoshop CC pour le Web
Revoir le teaser Je m'abonne
Transcription
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction aux Sprite Sheets

Objectifs

Les objectifs de cette vidéo sont :

  • Comprendre ce qu'est un Sprite Sheet.
  • Créer un Sprite Sheet à partir d'un document Photoshop multicalque.
  • Adapter le Sprite Sheet pour une utilisation optimale sur des appareils mobiles comme l'iPad.
  • Intégrer et piloter une animation Sprite Sheet avec JavaScript ou CSS dans un logiciel d'animation.

Résumé

Cette vidéo explique comment créer une animation en utilisant un Sprite Sheet, une série d'images assemblées en un seul fichier, pour des performances optimales sur divers appareils.

Description

Un Sprite Sheet est une animation représentée sous la forme d'une suite d'images collées dans un seul document, généralement au format JPEG ou PNG. L'objectif est de créer une animation légère, portable, et flexible sur laquelle on peut interagir facilement, contrairement aux vidéos ou aux animations scripts.

Dans cette vidéo, nous allons animer un personnage qui saute, une tâche difficilement réalisable avec des commandes JavaScript ou CSS seules. Nous partirons d'un document Photoshop structuré sur plusieurs calques et le réorganiserons en une seule image aplatie.

Il est essentiel de considérer les contraintes des appareils, comme l'iPad, qui peuvent avoir des problèmes de performance avec des images de tailles supérieures à 1024x768 pixels. Nous verrons donc comment scinder notre Sprite Sheet pour une meilleure compatibilité.

Finalement, nous intégrerons cette image dans un logiciel d'animation comme Animate pour éviter de coder manuellement, et nous piloterons l'animation avec des commandes JavaScript ou CSS, en croppant visuellement la Sprite Sheet selon la cadence souhaitée.

Voir plus

Questions - réponses

Qu'est-ce qu'un Sprite Sheet?
Un Sprite Sheet est une animation représentée sous la forme d'une suite d'images collées dans un seul document, généralement en format JPEG ou PNG.
Pourquoi préférer un Sprite Sheet à une vidéo pour les animations?
Les Sprite Sheets sont légers, portables et flexibles, permettant des interactions plus faciles et une meilleure performance sur des appareils mobiles par rapport aux vidéos.
Comment adapter un Sprite Sheet pour une utilisation sur iPad?
Il est conseillé de scinder le Sprite Sheet en plusieurs parties pour que la taille des images reste inférieure à la résolution de l'écran de l'iPad, évitant ainsi les problèmes de performance.

Programme détaillé