Création d’une bannière publicitaire extensible HTML5 pour Google DoubleClick
Cette vidéo explique comment créer une bannière publicitaire extensible pour Google DoubleClick avec Adobe Animate.
Publié le
Cette vidéo explique comment créer une bannière publicitaire extensible pour Google DoubleClick avec Adobe Animate.
Bonjour.
Bienvenue dans ce tutoriel sur la création de bannières extensibles avec Adobe Animate.
Dans cette vidéo, vous apprendrez à créer la vôtre.
Avant de commencer, jetons un œil à ce que nous voulons créer.
Voici une bannière extensible pour une compagnie aérienne nommée Skyhigh.
Voici la version réduite de la bannière… et la version déployée.
Une bannière extensible se crée en cinq étapes.
La première est la création d'un masque.
Ouvrez votre animation et créez un masque de la taille de la bannière fermée sur l'image 1.
Pour que la bannière se déploie de gauche à droite, nous placerons le rectangle sur le coin supérieur gauche.
Ensuite, il faut définir la taille de la bannière entièrement déployée et créer une transition entre les versions fermée et ouverte à l'aide d'une interpolation de forme.
Maintenant que nous avons indiqué à Adobe Animate comment déployer la bannière, nous devons lui indiquer comment la réduire.
Notez que le processus de réduction commence à la fin de l'animation.
Nous avons défini l'ouverture et la fermeture de la bannière.
Il suffit maintenant de convertir ce calque en masque et de placer tous les autres calques en dessous.
Prévisualisons notre bannière.
Cliquez sur le petit verrou pour activer le masque.
Le masque fonctionne.
Bravo !
Déterminons ensuite comment les utilisateurs devront interagir avec la bannière.
Pour ouvrir la publicité, ils pourront, au choix, cliquer sur la publicité ou la survoler.
Nous allons vous montrer comment activer une bannière avec un survol.
Ajoutez un calque de bouton et créez un rectangle de la taille de la bannière fermée.
Les utilisateurs pourront survoler toute partie d'une bannière fermée pour l'activer.
Convertissez cette forme en bouton.
Comme les utilisateurs activeront le bouton en le survolant, il doit être invisible.
Pour cela, placez l'état sur Cliqué.
Sélectionnez le bouton et attribuez-lui un nom d'instance.
Examinons le résultat.
Notez que le bouton est visible durant l'extension de la bannière.
Il ne devrait pas l'être.
Il ne devrait être visible qu'au début.
Corrigez cela en insérant une image clé vierge dans l'image 2.
Maintenant que nous avons créé un bouton qui ouvre la bannière, nous devons en créer un autre qui la ferme.
Insérez une image clé à la fin de l'animation et créez un bouton Fermer.
Nommez l'instance.
Vérifions que ce bouton n'est visible qu'à la fin de l'animation.
Prévisualisons à nouveau la bannière.
Ça marche !
Pour comprendre l'étape suivante, prévisualisons la bannière dans un navigateur.
La bannière s'ouvre et se ferme automatiquement dans une boucle sans fin.
Ça ne va pas.
Elle devrait uniquement s'ouvrir et se fermer lorsque les utilisateurs interagissent avec elle.
Corrigeons cela.
Créez un calque Actions.
À l'aide de l'assistant, vérifiez que l'animation s'arrête sur la première image, pour que la bannière ne s'ouvre qu'en cas de survol avec la souris.
Toujours avec l'assistant, ajoutez un arrêt à la fin de l'animation, pour que la bannière se ferme uniquement lorsque les utilisateurs cliquent sur le bouton Fermer.
Prévisualisons le résultat.
La bannière fonctionne correctement.
L'étape suivante permet de vérifier la compatibilité de la bannière avec des plateformes marketing comme Google DoubleClick ou Seismic.
Les plateformes marketing telles que Google DoubleClick fournissent des modèles pré-approuvés à intégrer dans une enveloppe HTML Animate.
La première étape est de télécharger le bon modèle depuis la base de données de modèles de galeries multimédias Google.
En parallèle, nous devons exporter une enveloppe HTML Animate.
Ouvrez les deux fichiers dans un éditeur de texte.
Le modèle Google est à gauche.
Extrayez le code du modèle Google et placez-le dans l'enveloppe HTML Animate.
Nous en avons fini avec le modèle Google.
Vous pouvez le fermer.
Ouvrez le fichier JavaScript et supprimez le code superflu.
Cela peut prendre quelques minutes.
Prenez tout le temps nécessaire pour ne pas faire d'erreur.
Lorsque vous avez terminé, copiez le code du fichier JavaScript et collez-le dans l'enveloppe HTML Animate.
Avant de passer à l'étape suivante, nous devons interpoler du code sur l'enveloppe HTML Animate.
Nous devons ensuite vérifier que Google DoubleClick peut détecter quand les utilisateurs ouvrent ou ferment la publicité.
Pour ce faire, copions le script de l'enveloppe HTML Animate dans le panneau Actions des images appropriées.
Google DoubleClick peut maintenant détecter quand les utilisateurs interagissent avec la bannière, mais pas quand ils cliquent sur le bouton d'appel à l'action.
Faisons cela.
Nous sommes maintenant prêts à publier.
Il est recommandé de créer un profil, car vous pourrez le réutiliser la prochaine fois que vous créerez une bannière similaire.
Importez l'enveloppe HTML Animate et publiez.
Vous trouverez une enveloppe HTML et un fichier JavaScript dans notre dossier de projet.
Notre bannière est prête à être téléchargée sur Google DoubleClick.
Bon travail !
Avant de charger le fichier sur Google DoubleClick, nous devons créer une image de sauvegarde de la version réduite de la bannière.
Google DoubleClick l'utilisera si la bannière ne fonctionne pas correctement.
Compressez les fichiers que nous venons d'exporter, plus l'image de sauvegarde.
Téléchargez le fichier .zip sur votre compte DoubleClick Studio.
Dans l'écran suivant, spécifiez l'URL vers laquelle les utilisateurs seront dirigés en cliquant sur l'appel à l'action.
Enfin, entrez la largeur et la hauteur de la bannière déployée.
Vérifiez si elle fonctionne.
C'est le cas.
Excellent !
L'écran suivant va nous permettre de publier.
Vous savez maintenant comment créer une bannière extensible avec Adobe Animate.
Vous avez également la possibilité de télécharger un modèle offrant tout le code nécessaire pour créer votre bannière extensible.
À vous de jouer !
Ce que vous avez appris :
Animer une bannière et lui appliquer un masque pour donner l'illusion qu'elle se développe ou se réduit
Insérer du code via l'assistant Code afin d'animer la bannière lorsque l'utilisateur clique dessus ou la survole
Créer une enveloppe HTML5 compatible Google DoubleClick et l'ajouter dans Animate
Ajouter un appel à l'action dans la publicité
Vérifier la compatibilité de la publicité avec Google DoubleClick et la charger sur Google DoubleClick Studio
Présentateur
Get It Communications
