Composant Swirl

Le composant Swirl vous permet de concevoir des créations dans un format d'affichage immersif à l'aide d'un modèle 3D interactif. En cas de défilement d'une page contenant une annonce, l'animation 3D initiale est associée à ce mouvement. Les utilisateurs peuvent interagir directement avec le modèle et développer l'annonce pour qu'elle s'affiche en plein écran.

Ce composant est destiné à être utilisé uniquement dans les créations de Display & Video 360 qui l'incluent et n'est pas compatible avec Microsoft Edge.

Pour ajouter le composant "Swirl" à votre projet :

1. Ouvrez le panneau Composants, puis le dossier Éléments graphiques et effets.
2. Faites glisser le composant Swirl vers l'espace de création.
3. Double-cliquez sur le composant pour ouvrir la boîte de dialogue de modification.
4. Sélectionnez le calque de modèle 3D dans le panneau Calques.
5. Dans le champ URL du panneau Propriétés, recherchez le fichier GLB de l'élément 3D à utiliser. Vous pouvez également modifier d'autres propriétés (voir ci-dessous).
6. Ajoutez des calques en faisant glisser des fichiers image à partir de votre système de fichiers vers l'espace de création ou le panneau Calques (Windows ou Mac uniquement). Vous pouvez également cliquer sur le bouton Importer des éléments  en bas du panneau Bibliothèque. Vous pouvez ajouter des images en tant que calques uniquement dans le composant "Swirl".
7. Positionnez chaque calque à l'emplacement auquel il doit apparaître au début et à la fin de l'animation, à l'aide des onglets Début et Fin. Vous pouvez faire glisser le calque à l'emplacement voulu, ou utiliser les champs définissant la position de début et de fin dans le panneau Propriétés.
8. Définissez des options de configuration supplémentaires selon vos besoins (voir ci-dessous).
9. Si vous êtes satisfait du composant (vous pouvez le prévisualiser lorsque vous travaillez dessus), cliquez sur Enregistrer. Vous êtes alors redirigé vers l'interface standard de Google Web Designer.

Options de configuration

Pour configurer le composant, double-cliquez dessus dans l'espace de création, ou sélectionnez-le, puis cliquez sur Paramètres  dans le panneau Propriétés.

Ajouter un état médian

Pour mieux contrôler l'animation du composant Swirl, vous pouvez ajouter un état médian et modifier les propriétés des calques à ce stade.

1. Passez la souris sur la droite de l'onglet Début, puis cliquez sur le bouton . L'onglet Milieu s'affiche.
2. Par défaut, l'état médian se situe à mi-chemin entre le début et la fin de l'animation. Vous pouvez ajuster la chronologie de l'animation.
3. Accédez à l'onglet Milieu pour définir les propriétés des calques à ce stade.

Pour supprimer l'état médian, passez la souris sur la droite de l'onglet Milieu, puis cliquez sur X.

Modifier la chronologie de l'animation

La chronologie de l'animation du composant Swirl est déterminée par l'avancée du défilement sur la page. Par défaut, l'animation démarre lorsque le bord supérieur du composant commence à apparaître sur la page (0 %) et se termine lorsque le bord inférieur disparaît du haut de la page (100 %). Si vous avez ajouté un état médian, vous pouvez également ajuster le moment où il se produit pendant l'animation. Vous pouvez ajuster la chronologie de l'animation des deux manières suivantes :

• Dans le panneau Chronologie de l'animation, faites glisser les cases de début, de milieu et de fin, ou le curseur, vers le pourcentage souhaité.
• Saisissez les pourcentages de début, de milieu et de fin dans les champs du panneau Chronologie de l'animation.

Rendre transparent l'arrière-plan du modèle 3D

1. Sélectionnez le modèle 3D.
2. Dans le panneau Propriétés, cochez la case Arrière-plan transparent du modèle 3D.

Ajouter un repère de geste

1. Sélectionnez le modèle 3D.
2. Dans le panneau Propriétés, cliquez sur le menu déroulant Icône, puis choisissez une image dans la bibliothèque, ou cliquez sur Parcourir pour sélectionner une image dans votre système de fichiers.
3. Vous pouvez également saisir du texte à afficher avec l'icône dans le champ Texte.

Le repère de geste apparaît sur le modèle 3D pour inviter l'utilisateur à interagir avec lui.

Faire pivoter le modèle 3D

1. Sélectionnez le modèle 3D.
2. Dans le panneau Propriétés, définissez le paramètre Lacet pour le début, le milieu et la fin de l'animation.

Le lacet correspond à la rotation du modèle autour d'un axe vertical.

Ajouter des calques d'images

Il existe deux façons d'ajouter un calque :

• Faites glisser un fichier de votre système de fichiers vers l'espace de création ou le panneau Calques (Mac ou Windows uniquement).
• Cliquez sur le bouton Importer des éléments  en bas du panneau Bibliothèque.

Les nouveaux calques du composant Swirl doivent être des images. Un seul calque de modèle 3D est autorisé. Il est inclus par défaut.

Déplacer des calques

1. Sélectionnez le calque que vous voulez déplacer.
2. Sélectionnez l'onglet Début, Milieu ou Fin.
3. Positionnez le calque en procédant de l'une des manières suivantes :
   • Faites glisser le calque vers sa nouvelle position.
   • Définissez la position de départ, du milieu ou de fin dans le panneau Propriétés. Vous ne pouvez modifier que les propriétés qui correspondent à l'onglet actif. Les boutons Faire correspondre à la position de départ, Faire correspondre à la position du milieu et Faire correspondre à la position de fin  permettent de copier l'autre position.

Accédez à l'onglet Début, Milieu ou Fin pour ajuster l'autre position du calque.

Remplacer des images

1. Dans l'espace de création, faites un clic droit sur l'image à remplacer, puis sélectionnez Remplacer l'image dans le menu contextuel.
2. Sélectionnez une image provenant de la bibliothèque ou cliquez sur le bouton Importer des fichiers  pour sélectionner un fichier image enregistré sur votre ordinateur.

La nouvelle image remplace celle d'origine. Si vous aviez redimensionné l'image que vous venez de remplacer, la nouvelle image présente également les dimensions modifiées. Dans le cas contraire, la nouvelle image conserve ses dimensions d'origine.

Réorganiser les calques

Dans le panneau Calques, faites glisser un calque vers sa nouvelle position dans la liste.

L'ordre des calques détermine leur position respective. Les calques répertoriés en haut de la liste apparaissent devant ceux indiqués plus bas.

Supprimer des calques d'image

1. Sélectionnez le calque que vous souhaitez supprimer.
2. Cliquez sur le bouton Supprimer  en bas du panneau Calques.

Le calque de modèle 3D est obligatoire pour le composant Swirl. Vous ne pouvez pas le supprimer.

Redimensionner des calques

1. Sélectionnez le calque que vous voulez redimensionner.
2. Redimensionnez le calque en procédant de l'une des manières suivantes :
   • Dans le panneau Propriétés, définissez la largeur et la hauteur du calque. Cliquez sur le bouton Limiter les proportions  pour indiquer si les proportions entre la largeur et la hauteur sont fixes ou non.
   • Dans l'espace de création, faites glisser l'une des poignées de redimensionnement au niveau des angles et des bords du calque.

Le calque est mis à l'échelle conformément à la taille spécifiée pour toute la durée de l'animation.

Modifier l'opacité du calque

1. Sélectionnez le calque que vous voulez modifier.
2. Dans le panneau Propriétés, définissez l'opacité de début ou de fin sur une valeur comprise entre 0 (transparent) et 1 (opaque).

Le calque de modèle 3D est toujours opaque à la fin de l'animation.

Modifier le lissage de vitesse de l'animation du calque

1. Sélectionnez le calque que vous voulez modifier.
2. Dans le panneau Propriétés, sous Propriétés avancées, sélectionnez un type de lissage de vitesse dans la liste déroulante Lissage de vitesse.

Le lissage de vitesse personnalisé n'est pas disponible.

Masquer et afficher des calques

Dans le panneau Calques, cochez la case située à côté de la vignette du calque (sous le bouton Masquer tous les calques ).

Vous pouvez masquer ou afficher tous les calques en cliquant sur le bouton Masquer tous les calques .

Le masquage d'un calque peut faciliter le travail sur un autre et empêcher le calque masqué d'apparaître dans l'aperçu de la configuration, mais n'a aucune incidence sur l'aperçu dans un navigateur ni sur la création publiée.

Afficher et masquer les calques fantômes

1. Sélectionnez un calque d'image.
2. Dans le panneau Propriétés, sous Propriétés avancées, cochez la case Calq. fantôme.

Un calque fantôme est une version translucide du calque aux positions inactives (que vous n'êtes pas en train de modifier). Vous pouvez ainsi comparer visuellement les positions de départ, de milieu et de fin. Les calques fantômes servent uniquement de référence. Ils n'apparaissent ni dans les aperçus, ni dans le fichier publié.

Propriétés

Propriétés du composant Swirl

Propriété	Description
Nom	Nom du composant Swirl.
Facteur de défilement	Valeur comprise entre 0 et 1 indiquant jusqu'où l'internaute a fait défiler l'écran. Cette propriété n'est utilisée que pour l'affichage dans l'espace de création Google Web Designer. La valeur par défaut est 0,5.

Vous pouvez afficher et modifier les propriétés des calques lorsque vous êtes dans la boîte de dialogue de modification du composant "Swirl" et qu'un calque est sélectionné.

Propriétés du calque de modèle 3D

Remarque : Les composants "Swirl" créés avant le lancement de la version 11.0.0 de Google Web Designer comportent des propriétés différentes pour le calque de modèle 3D.

Propriété	Description
Nom	Nom du composant "Modélisation 3D".
URL	Fichier source au format GLB de l'élément 3D. Utilisez Khronos glTF Validator pour vous assurer que votre fichier GLB est valide. Pour les anciens composants "Swirl" URL ou ID de l'élément 3D. Seuls les éléments hébergés dans Poly pour lesquels le partage par lien est activé sont acceptés. La taille du fichier d'un élément doit être inférieure ou égale à 2 Mo, car le chargement des éléments plus volumineux risque d'échouer dans Google Web Designer. Reportez-vous au guide sur les éléments 3D pour connaître les exigences supplémentaires. Les URL doivent commencer par https://poly.google.com/view/. L'ID se trouve à la fin de l'URL de la page d'affichage Poly (https://poly.google.com/view/0CkCZrXqCWW, par exemple). Exemples : https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW Actualiser les éléments  : pour actualiser l'élément 3D, cliquez sur ce bouton dans le champ URL. Si aucune modification ne s'affiche, il est possible que l'élément soit toujours en cours de traitement. Attendez une minute, puis réessayez.
Arrière-plan transparent du modèle 3D	(Pour les anciens composants "Swirl" uniquement.) Cochez cette case si vous voulez que l'arrière-plan du composant "Modélisation 3D" soit transparent.
Repère de geste
Icône	Image à afficher sur le modèle 3D pour inviter l'utilisateur à interagir avec celui-ci. Le repère de geste se déplace légèrement pour attirer l'attention de l'utilisateur jusqu'à ce que la limite de l'animation soit atteinte. Il disparaît dès que l'utilisateur commence à interagir avec le modèle.
Texte	Texte à afficher sous l'icône de repère de geste. S'applique uniquement si une icône de repère de geste est spécifiée.
Définir la durée maximale de l'animation	Cochez cette case, puis définissez une durée en secondes pour l'animation du repère de geste.
Position et taille
Début	Distance du calque par rapport au côté gauche et à la partie supérieure du composant Swirl au début de l'animation. Cette propriété est modifiable lorsque l'onglet Début est sélectionné.
Milieu	Distance du calque par rapport au côté gauche et à la partie supérieure du composant Swirl lorsque l'animation est à l'état médian. Cette propriété est modifiable lorsque l'onglet Milieu est sélectionné.
Fin	Distance du calque par rapport au côté gauche et à la partie supérieure du composant Swirl à la fin de l'animation. Cette propriété est modifiable lorsque l'onglet Fin est sélectionné.
Taille	Largeur et hauteur du calque. Cette propriété a un impact sur toute la durée de l'animation.
Rotation
Lacet	Rotation de début, de milieu et de fin du modèle autour d'un axe vertical, en degrés.
Style
Opacité	Opacité de début, de milieu et de fin du calque, représentée par une valeur comprise entre 0 (transparent) et 1 (opaque).
Propriétés avancées
Lissage de vitesse	Type de lissage de vitesse pour l'animation du calque. Le lissage de vitesse personnalisé n'est pas disponible.

Propriétés des calques d'images

Propriété	Description
Source	Source du fichier image (non modifiable).
URL de sortie	URL de sortie lorsque l'internaute clique sur l'image.
Position et taille
Début	Distance du calque par rapport au côté gauche et à la partie supérieure du composant au début de l'animation. Cette propriété est modifiable lorsque l'onglet Début est sélectionné.
Milieu	Distance du calque par rapport au côté gauche et à la partie supérieure du composant lorsque l'animation est à l'état médian. Cette propriété est modifiable lorsque l'onglet Milieu est sélectionné.
Fin	Distance du calque par rapport au côté gauche et à la partie supérieure du composant à la fin de l'animation. Cette propriété est modifiable lorsque l'onglet Fin est sélectionné.
Taille	Largeur et hauteur du calque. Cette propriété a un impact sur toute la durée de l'animation.
Style
Opacité	Opacité de début, de milieu et de fin du calque, représentée par une valeur comprise entre 0 (transparent) et 1 (opaque).
Propriétés avancées
Lissage de vitesse	Type de lissage de vitesse pour l'animation du calque. Le lissage de vitesse personnalisé n'est pas disponible.
Calq. fantôme	Lorsque cette propriété est activée, une version translucide du calque s'affiche à la position inactive (celle que vous n'êtes pas en train de modifier).

Événements et actions

Événements

Les événements permettent de déclencher d'autres actions dans votre annonce. Le composant Swirl envoie l'événement suivant :

Événement	Description
Composant Swirl chargé	Envoyé lorsque tous les éléments inclus dans le composant sont chargés.

Pour sélectionner cet événement dans la boîte de dialogue "Événement", définissez le composant Swirl en tant que cible.

Vous pouvez également définir des événements et des actions pour le modèle 3D inclus dans le composant Swirl.

Prévisualiser

Pendant la configuration

Vous pouvez prévisualiser le composant Swirl pendant que vous le modifiez :

1. Pour activer le mode de modification du composant, double-cliquez sur celui-ci dans l'espace de création.
2. Cliquez sur l'onglet Aperçu situé en haut de la page.
3. Faites défiler l'écran vers le haut et vers le bas pour observer le comportement des calques visibles dans un exemple de mise en page sur un appareil mobile. Les calques masqués ne s'affichent pas.
4. Vous ne pouvez pas modifier le composant lorsque vous le prévisualisez. Cliquez sur l'onglet Début, Milieu ou Fin, apportez vos modifications, puis cliquez à nouveau sur l'onglet Aperçu pour les visualiser.

Dans le navigateur

Pour prévisualiser le composant dans votre navigateur, quittez le mode de modification du composant et utilisez le bouton Aperçu dans Google Web Designer. La page d'aperçu simule la manière dont l'annonce s'affiche sur une page Web comportant suffisamment de contenu pour que vous puissiez faire défiler l'écran au-dessus et au-dessous du composant.

Vous pouvez sélectionner l'une des options de mode d'aperçu suivantes :

• Appareil : sélectionnez un appareil mobile ou Personnalisé.
• Faire pivoter l'appareil  : passez du mode Portrait au mode Paysage, ou inversement.
• Taille de la fenêtre d'affichage : si vous sélectionnez Personnalisé pour l'appareil, vous pouvez définir une nouvelle taille de fenêtre en modifiant la valeur de ce champ ou en faisant glisser les poignées de redimensionnement de l'aperçu.

Les annonces incluant le composant Swirl recourent toujours au mode d'aperçu "Parallaxe" dans le navigateur.