ENABLER ADOBE ANIMATE CC

Documentation DCO Enabler -> ENABLER ADOBE ANIMATE CC

INTRODUCTION

ADventori-Animate-Logo

Dans ce tutoriel, nous allons vous montrer comment intégrer la librairie ADventori sous Adobe Animate cc pour dynamiser les publicités HTML5. Nous vous invitons à lire le livre blanc écrit par la librairie createJS sur les bonnes pratiques de réalisation dune bannière publicitaire en html5/canvas.

Le point de départ est une bannière respectant les standards IAB :

  • Elle doit être sous la forme dun fichier zip comprenant un seul fichier HTML et tous les éléments nécessaires (img, js, css).

  • Les URLs dans le fichier HTML doivent toutes être relatives.

  • ADventori nest pas limité sur le poids de la création, mais pour optimiser la livraison, nous recommandons de garder un poids sous les 200kbytes.

  • Pour accélérer l’adserving, JavaScript et CSS peuvent être présents directement dans le fichier HTML principal, et les images plus petites être encodées en base64 dans le HTML.

Attention

  • Noubliez pas le GIF de backup pour chaque format.

  • Il est important de respecter la même convention de nommage pour les différents assets entre les différents formats.

  • Les bannières ne doivent pas intégrer de ClickTag ni de ClickCommand. Ils seront intégrés via la bibliothèque ADventori dans une étape suivante.

  • Si nous devons récupérer les images sur un serveur externe, il faut que celui si fonctionne en secure, dans le cas contraire, il y a un rejet lors de l’audit. 

 

Deux tutoriels sont disponibles, le premier (code snippet) est destiné aux non-développeurs, le second aux développeurs plus aguerris.

Nous sommes à votre disposition pour vous aider dans l’utilisation de la librairie ADventori, pour toute question, contactez nous sur op@adventori.com

CODE SNIPPET : bannière dynamisée en quelques clics

Installation / Initialisation

Installation / Initialisation

Installation du code snippet

TEXTFIELD

TEXTFIELD

dynamiser votre texte avec le composant textfield

Movie Clip

Movie Clip

dynamiser vos textes,images et vidéos avec le composant movie Clip

Fonctions utiles

Fonctions utiles

gérer vos click,gérer le nombre de repetition, gérer le mobile

BASES

Installation de l’enabler

Installation de l’enabler

Installer le modèle HTML ADventori

Les paramètres dynamiques

Les paramètres dynamiques

Déclarer vos éléments dynamiques (textes,images,vidéos…)

Gérer le clic

Gérer le clic

Gérer vos types de clics (global, spécifique)

Page de test

Page de test

tester et valider la dynamisation de vôtre bannière

DYNAMISATION DU TEXTE

DYNAMISER UNE ZONE DE TEXTE

DYNAMISER UNE ZONE DE TEXTE

Dans ce tutoriel , vous apprendrez à dynamiser une zone de texte

Adapter la taille du Texte

Adapter la taille du Texte

Dans ce tutoriel , vous apprendrez à adapter votre texte

Aligner verticalement votre texte

Aligner verticalement votre texte

Dans ce tutoriel , vous apprendrez à aligner correctement une zone de texte

PERSONNALISER LA POLICE

PERSONNALISER LA POLICE

Intégrer vos polices locales

DYNAMISATION DES IMAGES

DYNAMISER ET ADAPTER LA TAILLE D’UNE IMAGE

DYNAMISER ET ADAPTER LA TAILLE D’UNE IMAGE

Apprenez à ajouter et adapter vos images dans la bannière

COMPOSANTS

CARROUSEL ADVENTORI

CARROUSEL ADVENTORI

Apprenez à ajouter et adapter votre carousel

Dynamiser une carte GoogleMaps

Dynamiser une carte GoogleMaps

Dynamiser et ajouter une carte

visibilité

visibilité

Déclencher l’animation de votre bannière uniquement quand elle est visible

AJOUTER UNE VIDEO

AJOUTER UNE VIDEO

Apprenez à ajouter et adapter vos vidéos dans la bannière