Créez vos publicités dynamiques

DCO ENABLER FLASH V2

INTRODUCTION

 

ADventori propose une simple bibliothèque ActionScript 3.

Il vous suffit d’intégrer notre composant dans votre « movie library » pour qu’elle puisse interagir avec votre AdServer.

Cette bibliothèque crée un packagecom.adventori.

La publicité sous Flash se doit de respecter les recommandations de l’IAB, Le FLA et SWF devront être délivrés à ADventori pour l’AdServing.

Note : ADventori n’est pas limité sur le poids de la création, mais pour optimiser la livraison, nous recommandons de garder vos SWF sous les 100kbytes.



INSTALLATION DE L’ENABLER ADVENTORI

 

Téléchargez et installez le fichier ADventori_v2.zxp et vérifiez que la version installée est bien la 2.0

  • L’installation de l’Enabler ADventori se fait premièrement dans Adobe Extension Manager (cf exemple) :

install-composant2_v2

  • Ensuite, dans Flash il vous faudra intégrer le composant à votre bibliothèque dans la première frame . Glissez le composant à côté de votre scène pour que celui-ci soit actif et prenne en compte les paramètres d’ADventori (cf exemple) :drop_enabler-1024x3211

Testez votre bannière , normalement vous devriez voir dans la console l’initialisation de la librairie :

initialisation



FLASH : PARAMÉTRAGE DE LA PUBLICATION

 

  1. Ouvrir le panneau de Paramètres de publication:
    • Fichier > Paramètres de publication
  2. Choisir la cible et le type de script :
    • Cible : Flash Player 9
    • Script : ActionScript 3.0
  3. Configurer les paramètres avancés :
    • Cocher les paramètres comme ci-contre
    • Autoriser l’accès au réseau
    • Désactiver l’accélération matérielle

Astuce : Pour faciliter le paramétrage de vos prochaines campagnes, créez un profil « ADventori Dynamic Display »

parametres-publication-flash



GÉRER LE CLIC

 

La méthode setClickListener gère l’action du clic sur la bannière.

Les clics sur la publicité doivent être envoyés à l’AdServer, pour les comptabiliser et renvoyer l’internaute vers la bonne page.

  • Pour se faire, vous devez créer un rectangle de la taille de votre publicité
  • Puis le transformer en symbole bouton et l’appeler mc_clickTag
  • Idem pour son occurrence que vous devez nommer de la même manière pour que le paramètre d’AdServing soit pris en compte

 

Bannière avec une redirection

Le code se présente comme ci-dessous et doit être placé sur le premier calque (calque supérieur) de votre animation :

ADventori.setClickListener(mc_clickTag);

 

Bannière avec plusieurs redirections

Dans le cas où vous avez plusieurs produits, qui ont chacun une url de redirection :

import com.adventori.*;
ADventori.initData({ items: [{"id":1,"data":{"url":"http://item1"}},{"id":2,"data":{"url":"http://item2"}}]});
Une zone cliquable par produit

Dans le cas de deux zones cliquables (clip1 et clip2), une sur chaque produit :

		 
          ADventori.setClickListener(clip1,data.items[0]);
          ADventori.setClickListener(clip2,data.items[1]);
            
Une zone cliquable fixe globale

Dans le cas d’une seule zone cliquable fixe (mc_clickTag), sur laquelle les produits défilent :

	
	  //Mise en place du Clicktag fixe global
          var item;
          ADventori.setClickListener(mc_clickTag,function(e:Event):void{ADventori.click(e,item);});

          //Frame 1 : assignation au premier item
          item=data.items[0];
          //Frame 20 : assignation au deuxième item
          item=data.items[1];
            

 

  • Pour vérifier que le clickTag est actif, cliquez à l’intérieur de l’export SWF de votre publicité (Ctrl + Entrée pour le lancer à partir de Flash)
  • La mention “[ADventori] click: item=(url_recuperer)” doit apparaitre dans l’onglet “Sortie” de votre animation lors de chaque clic

 



LES PARAMÈTRES DYNAMIQUES

 

Vous pouvez recevoir toute valeur dynamique envoyée par l’AdServer en utilisant le code suivant d’ActionScript3 n’importe où dans la timeline :

ADventori.initData({nom du paramètre :"Valeur par défaut..."});
ADventori.data["nom du paramètre"];
  • « nom du paramètre » doit contenir le nom du paramètre envoyé par notre AdServer. Ce nom dépend du scénario défini pour la campagne, et sera fourni par ADventori.
  • « Valeur par défaut… » est la valeur par défaut si le paramètre d’AdServer d’ADventori n’est pas renseigné. Cette valeur permet de tester simplement la création sans l’AdServer d’ADventori.


AJOUT ET PARAMÉTRAGE D’UN CHAMP DE TEXTE DYNAMIQUE

 

  • Créez le texte en tant que champ de texte dynamique
  • Nommez l’occurrence (ex : mc_text)
  • Intégrez la police : Cliquez sur Incorporer
    1. Choisissez les plages de caractères nécessaires (Majuscules, Minuscule, Chiffres caractères spéciaux etc…)
    2. Ajoutez manuellement :

!"%&'()*+,-./0123456789:;<=>?
@ABCDEFGHIJKLMNOPQRSTUVWXYZ \
abcdefghijklmnopqrstuvwxyz
©«®»ÀÂÄÆÇÈÉÊËÎÏÒÔÖÙÛÜàâäæçèéêëîïòóôöùûü•€

  • Définir le comportement : Dans la plupart des cas, le champ texte doit être en multiligne

Proc_image9



DYNAMISER UNE ZONE DE TEXTE

 

Pour créer un champ de texte dynamique, ajoutez un nom d’occurence, et définissez la valeur du texte (setText). Une fois la créa dynamisée par notre AdServer, les textes changeront en fonction des paramètres établis ( Géolocalisation, météo, date/heure, cookies, retargeting… )

import com.adventori.*;
ADventori.initData({mc_text:'CECI EST LE PREMIER TEXTE'});
ADventoriDisplay.setText(mc_text,ADventori.data["mc_text"]);

 



ADAPTER LA TAILLE DU TEXTE

 

La méthode adaptText permet de réduire la taille de la police sur un élément donné :

ADventoriDisplay.adaptText(mc_text, 10);

Elle s’assurera que le texte reste bien à l’intérieur du champ de texte défini.

Le facteur de réduction permet d’optimiser l’affichage du texte et d’adapter la taille de la police en fonction de l’espace réservé au champ texte.

  • « mc_text » : Nom attribué au champ texte dynamique
  • « 10 » : Taille de la police minimum acceptée
Exemple : Si la police est de 14 pts, la méthode réduira la taille de la police de 14 à 10 pts pour faire entrer l’ensemble du texte dans l’espace réservé. Si le texte est toujours trop long suite à la réduction, les caractères non affichés sont résumés par “…”

Bien sûr, les valeurs dynamiques peuvent être simplement insérées en combinant les deux techniques avec la méthode setAndAdaptText:

ADventoriDisplay.setAndAdaptText(mc_text, data['mc_text'], 10);

 

AdaptText

 



ALIGNER VERTICALEMENT VOTRE TEXTE

 

Cette méthode centrera verticalement le contenu de votre texte :

ADventoriDisplay.verticalAlign(mc_text);
  • « mc_text » : Nom de votre champ texte



AJOUTER UNE IMAGE DYNAMIQUEMENT

 

Cette méthode vous permet de charger des images via l’url et d’adapter la taille de l’image en fonction de son parent :

import com.adventori.*;
ADventoriDisplay.addAndAdaptImage(mc_img,"http://url.to/image","http://url.to/image/if.not.found");
  • mc_img: L’endroit ou vous voulez ajouter votre image (ou nom de votre clip)
  • « http://url.to/image » : Url de votre image principale
  • « http://url.to/image/if.not.found » : Url de votre image de backup

Si l’url est un paramètre dynamique, vous pouvez combiner les deux fonctionnalités :

ADventori.initData({image1:'http://url/image1.jpg',image2:'http://url/image2.jpg'});
ADventoriDisplay.addAndAdaptImage(mc_img,ADventori.data['image1'],'http://urlparDefaut');
  • mc_img: Le clip ou l’endroit qui doit contenir l’image
  • ADventori.data[‘image’] Url de votre image dynamique
  • http://urlparDefaut Url par défaut si l’image principale ne s’affiche pas

AddAndAdaptImage

Dans cet exemple nous avons ajouté la même image dans trois clips de dimensions différentes.

 

Conserver le point d’ancrage en haut à gauche du clip :

scale_ancrage

Autres méthodes de personnalisation disponibles :

  • addImage (clip , url, default_url) : Cette méthode ajoute une image sans en modifier la taille.
  • addAndAdaptImageWithPosition (clip, url, default_url, coordX, coordY, width, height) : Cette méthode ajoute une image et règle les dimensions et l’emplacement de l’image dans son parent.
Précaution : La sécurité Flash exige la présence d’un fichier « crossdomain.xml » à la racine de votre domaine, et demande leurs disponibilités en HTTP et HTTPS (Plus d’info…). ADventori possède un cache media destiné à traiter ces besoins. Contactez-nous directement pour mettre en place un cache pour vos medias.



PRÉCHARGER LES IMAGES

 

Si vos images s’affichent en cours de lecture , vous pouvez utiliser la fonctionnalité preloadImages.

Cette méthode vous permettra de lancer la bannière une fois que toutes les images sont en cache :

import com.adventori.*;
ADventori.initData({image1:'http://image1.jpg',image2:'http://image2.jpg'});
stop();
ADventoriLoader.preloadImages([ADventori.data['image1'],ADventori.data['image2']],onComplete);
function onComplete(o:Array){
	  play();
          ADventoriDisplay.addImage(stage,ADventori.data['image1'],Url de votre image de backup);
	  ADventoriDisplay.addImage(stage,ADventori.data['image2'],Url de votre image de backup);
}

Cet exemple initialise les urls des images, stoppe la lecture, précharge toutes les images, et une fois chargées reprend la lecture. Pour finir les images sont intégrées dans la scène.

Précaution : Cette méthode est particulièrement utile lorsque le poids des images est important.



GÉRER LES LOOP

 

La librairie ADventori vous permet également de gérer le nombre de boucles de votre créa avec la fonctionnalité maxLoops.

 

ADventori.maxLoops=2;

Placez le maxLoops à la dernière frame de la bannière

Dans cet exemple, la bannière s’arrêtera au bout de la deuxième lecture.



TEST ET VALIDATION DES BANNIÈRES

Pour tester une bannière, rien de plus facile.

Il suffit de zipper votre fichier Swf et de la tester sur cette Page de test :

:

ADventori.initData({mc_text:"CECI EST LE PREMIER TEXTE",mc_text2:'CECI EST LE DEUXIÈME TEXTE',mc_text3:'CECI EST LE TROISIÈME TEXTE'});

Les paramètres dynamiques contenus dans ADventori.initData doivent apparaitre:

Page_Test_Enabler1

 

Vous pouvez changer vos wording par defauts , afin de simuler vos scenarios

Cliquez sur Display creative , les paramètres dynamiques seront transmis à la bannière

 

Page_Test_Enabler2