Composant "Feuille de sprites"

Ce composant n'est pas compatible avec les annonces AMP HTML, les annonces vidéo ni les annonces illustrées.

Le composant "Feuille de sprites" vous permet de créer des animations de sprites ou d'afficher séparément des sprites sous forme d'images, tout en utilisant un seul fichier image source.

  

Feuille de sprites comportant huit sprites utilisés pour créer une animation. Chaque sprite peut également être affiché individuellement, sans faire partie d'une animation.

Pour ajouter le composant "Feuille de sprites" à votre projet :

1. Ouvrez le panneau Composants, puis le dossier Éléments graphiques et effets.
2. Faites glisser le composant Feuille de sprites  dans l'espace de création.
3. Dans la section regroupant les propriétés du composant Feuille de sprites du panneau Propriétés, saisissez l'URL du fichier image de la feuille de sprites dans le champ Source. S'il est enregistré en local, cliquez sur le bouton Parcourir  du champ afin de sélectionner le fichier sur votre ordinateur.
4. Saisissez les paramètres Décalage axe X, Décalage axe Y, Largeur de l'image et Hauteur de l'image pour le sprite que vous souhaitez afficher. Si vous créez une animation, ce sprite sera affiché dans la première image de cette dernière.
5. En fonction de votre utilisation de la feuille de sprites, suivez les étapes suivantes pour afficher d'autres sprites ou créer une animation.

   Pour afficher d'autres sprites, procédez comme suit :

   1. Ajoutez un composant "Feuille de sprites" supplémentaire.
   2. Configurez le nouveau composant en utilisant la même source, mais en spécifiant les décalages et les dimensions de l'image du sprite que vous souhaitez afficher dans ce composant.

   Pour créer une animation de sprites, procédez comme suit :

   1. Développez la section Propriétés avancées du panneau Propriétés pour le composant "Feuille de sprites".
   2. Saisissez le nombre d'images dans votre animation. Le composant affiche un sprite par image et part du principe que chaque sprite a la même taille.
   3. Cochez la case Lecture automatique si vous voulez que l'animation se lance automatiquement. Vous pouvez également déclencher l'animation en configurant un événement avec l'action Feuille de sprites > Lire ou Activer/Désactiver l'animation (décrite ci-dessous).

Propriétés

Propriété	Description
Nom	Nom du composant.
Source	URL de l'image utilisée en tant que feuille de sprites. Cette propriété peut être associée à des données dynamiques.
X Offset (Décalage axe X)	Décalage, en pixels, entre le bord gauche de la feuille de sprites et le sprite.
Y Offset (Décalage axe Y)	Décalage, en pixels, entre le bord supérieur de la feuille de sprites et le sprite.
Largeur de l'image	Largeur, en pixels, du sprite.
Hauteur de l'image	Hauteur, en pixels, du sprite.
Alignement	Position du sprite dans le composant : center (centre) bottom (bord inférieur) bottom left (bord inférieur gauche) bottom right (bord inférieur droit) left (gauche) right (droite) top (bord supérieur) top left (bord supérieur gauche) top right (bord supérieur droit)
Échelle	Pour afficher des sprites dont la taille diffère par rapport à celle du composant, utilisez l'une des options suivantes : Redimensionner l'image pour l'ajuster à l'espace Recadrer l'image pour remplir l'espace Aucune Agrandir l'image pour remplir l'espace

Propriétés avancées

Les propriétés avancées vous permettent de configurer une animation de sprites. Cliquez sur l'icône de développement  à côté de Propriétés avancées dans le panneau des propriétés du composant pour modifier les propriétés suivantes :

Propriété	Description
Number of Frames	Nombre d'images qui composent l'animation. Si vous saisissez un nombre supérieur au nombre de sprites de votre feuille, votre animation comportera des images vierges à la fin.
Duration	Durée d'affichage de chaque image, en millisecondes.
Number of Loops	Nombre de répétitions de l'animation. Saisissez la valeur 0 si vous souhaitez que l'animation se répète indéfiniment.
Lecture automatique	Si cette case est cochée, l'animation se lance automatiquement.
End on frame one	Si cette case est cochée, l'animation s'arrête sur la première image à l'issue de la dernière boucle.
Reverse (Sens inverse)	Si cette case est cochée, l'animation se lance en sens inverse.

Événements et actions

Événements envoyés par le composant "Feuille de sprites"

Vous pouvez déclencher d'autres actions en fonction des événements suivants du composant "Feuille de sprites" :

Événement	Description
Mis en pause	Envoyé lorsque l'animation est mise en pause.
Terminé	Envoyé à la fin de l'animation.
Lecture lancée	Envoyé lorsque la lecture de l'animation commence.
Nouvelle lecture	Envoyé lorsque l'animation redémarre.

Pour sélectionner l'un de ces événements dans la boîte de dialogue Événement, définissez le composant "Feuille de sprites" en tant que cible.

Actions effectuées par le composant "Feuille de sprites"

Les actions suivantes du composant "Feuille de sprites" peuvent être déclenchées en réponse à d'autres événements :

Action	Options de configuration
Créer une animation	Décalage axe X : décalage, en pixels, entre le bord gauche de la feuille de sprites et le sprite. Décalage axe Y : décalage, en pixels, entre le bord supérieur de la feuille de sprites et le sprite. Largeur de l'image : largeur, en pixels, du sprite. Hauteur de l'image : hauteur, en pixels, du sprite. Frames : nombre d'images qui composent l'animation. Duration : durée d'affichage de chaque image, en millisecondes. Loops : nombre de répétitions de l'animation. Elle se répète indéfiniment si vous saisissez la valeur 0. Lecture automatique : lorsque cette case est cochée, l'animation se lance automatiquement. Reverse (Sens inverse) : si cette case est cochée, l'animation se lance en sens inverse.
Lire	Lance l'animation à partir de l'image affichée avant l'arrêt ou la mise en pause.
Mettre en pause	Met en pause l'animation en cours.
Activer/Désactiver l'animation	Lit/Met en pause l'animation.
Nouvelle lecture	Lance l'animation à partir de la première image.
Retour rapide	Affiche l'image précédente de la série.
Avance rapide	Affiche l'image suivante de la série.
Atteindre l'image	Affiche l'image spécifiée.

Lorsque vous sélectionnez l'une de ces actions dans la boîte de dialogue Événement, définissez le composant "Feuille de sprites" en tant que destinataire.

Découvrez comment configurer des événements.

Aperçu

Une fois que vous avez spécifié une source, des décalages et des dimensions d'images, Google Web Designer affiche un aperçu statique du composant "Feuille de sprites" dans l'espace de création. Vous pouvez ainsi vous assurer que vous avez correctement configuré le sprite.

Les animations de sprites ne peuvent pas être prévisualisées dans l'interface de Web Designer. Pour visualiser l'exécution d'une animation, prévisualisez votre document dans votre navigateur préféré. Pour ce faire, cliquez sur le bouton Aperçu dans l'angle supérieur droit.