Composant "Effet d'image"

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

Le composant "Effet d'image" permet d'appliquer différents effets visuels basés sur JavaScript à une image (voire, dans certains cas, à deux images) : Avant et après, Respiration, Affichage et Vague.

Image Effect component - Google Web Designer

Pour utiliser le composant "Effet d'image" :

1. Ouvrez le panneau Composants, puis le dossier Éléments graphiques et effets.

2. Double-cliquez sur le composant Effet d'image  , ou faites-le glisser vers l'espace de création.

3. Double-cliquez sur le composant dans l'espace de création ou cliquez sur le bouton Paramètres… dans le panneau Propriétés. La boîte de dialogue "Effet d'image" s'ouvre.

4. Faites glisser une image vers l'espace de création de la boîte de dialogue ou cliquez sur Sélectionner des images pour sélectionner une image.

5. Choisissez le type d'effet d'image souhaité dans la liste déroulante du panneau Propriétés.

6. Certains types d'effet utilisent deux images. Vous pouvez sélectionner la seconde image dans la bibliothèque ou importer un fichier image de votre système de fichiers.

7. Personnalisez l'effet en ajustant ses propriétés (décrites ci-dessous).

Propriétés

Outre les propriétés de l'ensemble du composant, vous pouvez configurer celles de chaque effet inclus dans le composant.

Propriétés du composant "Effet d'image"

Propriété	Description
Nom	Définit le nom du composant "Effet d'image".
Échelle	Détermine la façon dont des images de tailles différentes s'affichent dans le composant. En savoir plus Redimensionner l'image pour l'ajuster à l'espace Recadrer l'image pour remplir l'espace Aucune Agrandir l'image pour remplir l'espace
Définir la durée maximale de l'animation	Lorsque cette case est cochée, la lecture automatique de l'animation s'arrête après la durée spécifiée en secondes.

Propriétés de chaque type d'effet

Vous pouvez accéder aux propriétés de chaque type d'effet dans la boîte de dialogue "Effet d'image". Ouvrez cette boîte de dialogue en double-cliquant sur le composant "Effet d'image" dans l'espace de création ou en cliquant sur Paramètres… dans le panneau "Propriétés", puis sélectionnez le type d'effet pour afficher ses propriétés.

Aucun

Aucun effet n'est appliqué à l'image.

Avant et après

L'effet "Avant et après" applique une transition de type balayage entre deux images, qui s'inverse une fois terminée, puis se répète.

  

Propriété	Description
Images
Image de base	Image affichée au-dessus ou à gauche du séparateur. Le bouton Remplacer les images  permet de permuter l'image de base et l'image secondaire.
Image secondaire	Image affichée au-dessous ou à droite du séparateur. Le bouton Remplacer les images  permet de permuter l'image secondaire et l'image de base.
Séparateur
Angle	Angle de la ligne de séparation entre les deux images, compris entre 0 et 180 degrés. La valeur par défaut est 90 (une ligne verticale).
Estompage	Douceur des bords des images le long du séparateur. La valeur 1 provoque une transition nette, tandis que des valeurs plus élevées floutent les bords.
Interaction	Lorsque la case Suivre la souris est cochée, le séparateur suit le curseur de la souris.
Animation
Lecture automatique	Lorsque la case Lecture automatique est cochée, l'animation démarre au chargement du composant.
État initial
Position	Position de départ du séparateur au début de l'animation.
Délai	Durée (en secondes) qui s'écoule avant le démarrage de la lecture automatique de l'animation.

Respiration

L'effet "Respiration" développe et contracte l'image de manière élastique.

   

Propriété	Description
Images
Image de base	Image à laquelle appliquer l'effet.
Respiration
Vitesse	Vitesse de l'animation. La valeur 0 désactive l'animation, tandis que des valeurs plus élevées en accélèrent la lecture.
Effet horizontal
Expansion	Magnitude de l'expansion horizontale de l'image.
Contraction	Magnitude de la contraction horizontale de l'image.
Effet vertical
Expansion	Magnitude de l'expansion verticale de l'image.
Contraction	Magnitude de la contraction verticale de l'image.
Durée de retenue
Expansion	Durée (en secondes) pendant laquelle l'image reste entièrement développée.
Contraction	Durée (en secondes) pendant laquelle l'image reste entièrement contractée.
Courbes
Courbes horizontales	Nombre de courbes créées par la distorsion horizontale.
Courbes verticales	Nombre de courbes créées par la distorsion verticale.

Affichage

L'effet "Affichage" dévoile la partie correspondante d'une deuxième image dans une zone de mise au point elliptique.

  

Propriété	Description
Images
Image de base	Image affichée en dehors de la zone de mise au point. Le bouton Remplacer les images  permet de permuter l'image de base et l'image secondaire.
Image secondaire	Image secondaire dévoilée par la zone de mise au point. Le bouton Remplacer les images  permet de permuter l'image secondaire et l'image de base.
Mise au point
Rayon	Rayon de la zone de mise au point le long des axes X et Y. Le bouton Verrouiller les proportions du rayon  permet de conserver les proportions lorsque vous modifiez un rayon.
Estompage	Douceur des bords de la zone de mise au point. La valeur 0 définit des bords nets pour la zone de mise au point, tandis que des valeurs plus élevées les floutent.
Effet	Lorsque la case Verrouiller l'affichage est cochée, l'image secondaire reste visible une fois que la zone de mise au point s'est déplacée.
Animation
Lecture automatique	Schéma de mouvement pour la zone de mise au point. Déplacement aléatoire (par défaut) : la zone de mise au point se déplace de manière aléatoire sur l'image et change de direction pour rester sur celle-ci. Déplacement aléatoire avec renvoi au côté opposé de l'image : la zone de mise au point se déplace de manière aléatoire sur l'image et apparaît sur le côté opposé après avoir atteint le bord. Cercle : la zone de mise au point se déplace en formant un cercle. Aucun
Vitesse	Vitesse de déplacement de la zone de mise au point. La valeur 0 désactive l'animation, tandis que des valeurs plus élevées en accélèrent la lecture.
Interaction	Lorsque la case Suivre la souris est cochée, la zone de mise au point suit le pointeur de la souris.

Vague

Anime des tranches de l'image par ondulation.

   

Propriété	Description
Images
Image de base	Image à laquelle appliquer l'effet.
Vague
Type	Forme de vague utilisée dans l'effet. Standard : l'animation fait onduler l'image. Lentille : l'animation contracte et développe l'image pour former un mouvement de vague symétrique.
Orientation	Direction de l'animation sous forme de vague. Horizontale Verticale
Vitesse	Vitesse de l'animation sous forme de vague. La valeur 0 désactive l'animation, tandis que des valeurs plus élevées en accélèrent la lecture.
Magnitude	Force des vagues. La valeur 0 désactive l'effet, tandis que les valeurs plus élevées génèrent des vagues plus fortes.
Longueur	Distance entre les crêtes des vagues. Plus cette distance est courte, plus le nombre de vagues est élevé dans l'effet.
Sens inverse	Lorsque la case Sens inverse est cochée, les vagues se déplacent de gauche à droite (pour l'orientation horizontale) ou de bas en haut (pour l'orientation verticale).
Découpe	Lorsque la case Découpe est cochée, chaque image de l'animation est redessinée, ce qui empêche l'apparition d'un effet de traînée.
Avancé
Zone de vague	Partie de l'image affectée par l'effet de vague.
Pleine intensité	Partie de l'image où l'effet de vague atteint la magnitude maximale. La magnitude de l'effet se réduit progressivement dans les autres parties de la zone de la vague.

Événements et actions

Événements envoyés par le composant "Effet d'image"

Vous pouvez déclencher d'autres actions en fonction de l'événement suivant du composant "Effet d'image" :

Événement	Description
Lecture automatique terminée	Événement envoyé lorsque l'animation en lecture automatique atteint sa durée maximale.

Actions effectuées par le composant "Effet d'image" et par chaque effet

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

• Lire
• Mettre en pause

Lorsque vous sélectionnez l'une de ces actions dans la boîte de dialogue "Événement", définissez le composant "Effet d'image" ou l'effet spécifique en tant que destinataire.

Découvrez comment configurer des événements.

Aperçu

Lorsque vous travaillez dans la boîte de dialogue "Effet d'image", l'espace de création montre à quoi ressemble le composant une fois animé. Si vous modifiez des propriétés, l'animation est réinitialisée.

Vous pouvez également prévisualiser le document dans votre navigateur préféré en cliquant sur Enregistrer en bas de la boîte de dialogue, puis sur le bouton Aperçu.