18 décembre av. des Champs Elysées, Paris, France

Transcription

1 18 décembre av. des Champs Elysées, Paris, France

2 Sommaire Spécifications fichiers Flash p 3.. Scripts Rich-Média p 12 Vidéo p 41 2

3 Spécifications pour fichiers Flash Clicktag p 4.. Boutons «Ouvrir / Fermer» p 5.. 3

4 Spec : clicktag Dans l objectif de rendre cliquable les créations, voici le code à implémenter sur l ensemble du déroulement de l animation: Action script 2 : on (release) { geturl(_root.clicktag, _root.target); } Action script 3 : var clicktag:string=root.loaderinfo.parameters.clicktag; var target:string=root.loaderinfo.parameters.target; //fonction exécutée en réponse à l'événement function onclic(pevt:event):void { } var redirect:urlrequest = new URLRequest( clicktag ); navigatetourl (redirect, target); lebouton_btn.addeventlistener(mouseevent.click, onclic); //lebouton_btn est un exemple de nom de l occurrence du bouton dans la créa 4

5 Spec : flash transparent / interstitiel Si le flash contient un bouton de fermeture, celui-ci doit activer la fonction : Si Flash inférieur à version 8 : on (release) { geturl("javascript: pub_ist_hd()"); } Si Flash supérieur ou égal à la version 8 : on (release) { flash.external.externalinterface.call("pub_ist_hd"); } Si Flash en Action Script 3 : import flash.external.externalinterface; //fonction exécutée en réponse à l'événement function onclic(pevt:event):void { ExternalInterface.call("pub_ist_hd"); } leboutonferme_btn.addeventlistener(mouseevent.click, onclic); //leboutonferme_btn est un exemple de nom de l occurrence du bouton dans la créa 5

6 Spec : expand-multidirectionnel Si le flash contient un bouton de fermeture, celui-ci doit activer la fonction : Si Flash inférieur à version 8 : on (release) { geturl("javascript: pub_ist_collapse()"); } Si Flash supérieur ou égal à la version 8 : on (release) { flash.external.externalinterface.call("pub_ist_collapse"); } Si Flash en Action Script 3 : import flash.external.externalinterface; //fonction exécutée en réponse à l'événement function onclic(pevt:event):void { ExternalInterface.call("pub_ist_collapse"); } leboutonferme_btn.addeventlistener(mouseevent.click, onclic); //leboutonferme_btn est un exemple de nom de l occurrence du bouton dans la créa 6

7 Spec : expand-multidirectionnel Si le flash contient un bouton d ouverture, celui-ci doit activer la fonction : Si Flash inférieur à version 8 : on (release) { geturl("javascript: pub_ist_expand()"); } Si Flash supérieur ou égal à la version 8 : on (release) { flash.external.externalinterface.call("pub_ist_expand"); } Si Flash en Action Script 3 : import flash.external.externalinterface; //fonction exécutée en réponse à l'événement function onclic(pevt:event):void { ExternalInterface.call("pub_ist_expand"); } leboutonouvrir_btn.addeventlistener(mouseevent.click, onclic); //leboutonouvrir_btn est un exemple de nom de l occurrence du bouton dans la créa 7

8 Spec : reveal Si le flash contient un bouton de fermeture, celui-ci doit activer la fonction : Si Flash inférieur à version 8 : on (release) { geturl("javascript: xclose()"); } Si Flash supérieur ou égal à la version 8 : on (release) { flash.external.externalinterface.call("xclose"); } Si Flash en Action Script 3 : import flash.external.externalinterface; //fonction exécutée en réponse à l'événement function onclic(pevt:event):void { ExternalInterface.call("xClose"); } leboutonferme_btn.addeventlistener(mouseevent.click, onclic); //leboutonferme_btn est un exemple de nom de l occurrence du bouton dans la créa 8

9 Spec : reveal Si le flash contient un bouton d ouverture, celui-ci doit activer la fonction : Si Flash inférieur à version 8 : on (release) { geturl("javascript: xopen()"); } Si Flash supérieur ou égal à la version 8 : on (release) { flash.external.externalinterface.call("xopen"); } Si Flash en Action Script 3 : import flash.external.externalinterface; //fonction exécutée en réponse à l'événement function onclic(pevt:event):void { ExternalInterface.call("xOpen"); } leboutonouvrir_btn.addeventlistener(mouseevent.click, onclic); //leboutonouvrir_btn est un exemple de nom de l occurrence du bouton dans la créa 9

10 Spec : corner Complément aux sepcs (bouton fermer): Si Flash inférieur à version 8 : on (release) { geturl("javascript: corner_hide()"); } Si Flash supérieur ou égal à la version 8 : on (release) { flash.external.externalinterface.call("corner_hide"); } Si Flash en Action Script 3 : import flash.external.externalinterface; //fonction exécutée en réponse à l'événement function onclic(pevt:event):void { ExternalInterface.call("corner_hide"); } leboutonferme_btn.addeventlistener(mouseevent.click, onclic); //leboutonferme_btn est un exemple de nom de l occurrence du bouton dans la créa 10

11 Spec : corner Complément aux sepcs (bouton ouvrir): Si Flash inférieur à version 8 : on (release) { geturl("javascript: corner_show()"); } Si Flash supérieur ou égal à la version 8 : on (release) { flash.external.externalinterface.call("corner_show"); } Si Flash en Action Script 3 : import flash.external.externalinterface; //fonction exécutée en réponse à l'événement function onclic(pevt:event):void { ExternalInterface.call("corner_show"); } leboutonouvrir_btn.addeventlistener(mouseevent.click, onclic); //leboutonouvrir_btn est un exemple de nom de l occurrence du bouton dans la créa 11

12 Scripts Rich-Media Introduction p 13 Corner p 14 Expand multidirectionnel p 17 Flash Transparent p 21 Image en background p 24 Interstitiel p 27 Reveal p 30 Sky flottant p 33 Wallpaper p 36 Glossaire p 39 12

13 Introduction L ensemble des scripts Rich-Media pré-programmés ne fonctionnent qu avec des créations hébergées en dur sur les serveurs de Smart ou sur un serveur externe via le redir. image. Ils ne fonctionnent pas avec les redirects agence. Les paramètres des scripts pré-programmés ne sont pas tous nécessaires au bon fonctionnement des scripts. Ils permettent cependant de s adapter à un maximum de spécificités de chaque support et aux attentes de chacun. Pour la bonne diffusion des campagnes via les tags Smart, la fonctionnalité Java Script du navigateur doit être activée. Un plugin flash doit être également présent pour la bonne lecture des créations flash. Il n y a pas de limitation technique concernant le poids des créations à diffuser. Il est cependant important de se référer aux tranches de facturation définies dans votre contrat, établies en fonction du poids des créations. 13

14 Corner Définition Démo Affiche une création en flash dans un des 4 angles, qui se déroule par passage de la souris ou clic et s'enroule ensuite de la même manière. Spécifications Création de départ : 1 fichier flash Bouton : Cf. introduction Spécifications techniques pour la réalisation du flash: 14

15 Corner Programmation Emplacement : tag dhtml Sélectionner le script pré-programmé «Corner» Les images contiennent la création flash qui intègre la totalité de l'animation (déroulement ET enroulement) le flash doit impérativement avoir le paramètre "transparent" La gestion des 2 zones cliquables (ouverte et fermée) se fait dans le flash 15

16 Corner Paramètres Corner ancré en haut à droite : par défaut Corner ancré en haut à gauche Corner ancré en bas à droite Corner ancré en bas à gauche Largeur de la création une fois repliée (pixels) : OBLIGATOIRE Hauteur de la création une fois repliée (pixels) : OBLIGATOIRE 16

17 Expand multi-directionnel Définition Démo Affiche une création qui s élargit au passage de la souri ou en cliquant dessus Spécifications Création de départ : 1 ou 2 fichiers flash, gif, jpg Bouton : Cf. introduction 17

18 Expand multi-directionnel Programmation Options Emplacement : n importe quel tag fixe Sélectionner le script pré-programmé «Expand multi-directionnel» Bien distinguer les cas où 1 ou 2 créations sont utilisées Dans le cas où l'expand doit afficher des créations en alternance, charger le création de la taille repliée, puis celle de la taille dépliée Dans le cas de l utilisation d une seule création, bien spécifier la largeur et la hauteur de la création repliée L'image contient la création flash ou gif à afficher, dont seulement une partie est initialement dévoilée Deux créations affichées en alternance (une pliée, l autre dépliée) 18

19 Expand multi-directionnel Paramètres Alternance entre 2 créations (1ère repliée, 2eme dépliée) : OBLIGATOIRE si 2 créas Si 1 seule création enregistrée (au format déplié), largeur de la création une fois repliée (pixels) : OBLIGATOIRE si 1 seule créa Si 1 seule création enregistrée (au format déplié), hauteur de la création une fois repliée (pixels) : OBLIGATOIRE si 1 seule créa Déplier vers la droite Déplier vers la gauche Déplier vers le haut Déplier vers le bas Déplacer le point d'ancrage horizontalement au moment de déplier Déplacer le point d'ancrage verticalement au moment de déplier 19

20 Expand multi-directionnel Nombre maximal de dépliements initiaux à chaque session de l'internaute Temps initial de maintien en position dépliée (secondes) : 0 par défaut Temps de maintien en position dépliée à chaque passage de souris (secondes) : 0 par défaut Temps de maintien en position dépliée après perte du focus de la souris (secondes) : 0 par défaut Déplier l'expand après un clic plutôt qu'après le simple passage de la souris : Flash à afficher en transparence Redémarrage du flash à chaque passage de souris Objets et formulaires à laisser affichés lors du déroulement : permet de ne pas couvrir les éléments situés sous le flash Z-Index : valeur par défaut:

21 Flash transparent Définition Démo Affiche une création en transparence au-dessus du contenu de la page pendant quelques secondes. Synonymes : layer, overlay Spécifications Création de départ : fichier gif, jpg ou flash Bouton : Cf. introduction 21

22 Flash transparent Programmation Options Emplacement : tag dhtml Sélectionner le script pré-programmé «Flash Transparent» Les images contiennent les créations gif, jpg ou flash Le script contient éventuellement le script à y afficher Il s agit du même type de programmation que le pop-up, site-under et le sticker Liaison et synchronisation avec une bannière standard 22

23 Flash transparent Paramètres Largeur : largeur créa par défaut Hauteur : hauteur créa par défaut Position horizontale par rapport au point d'ancrage : pixels, + ou - Position verticale par rapport au point d'ancrage : pixels, + ou - Création ancrée à gauche ou à droite Création centrée horizontalement : oui par défaut Création ancrée en haut en bas Création centrée verticalement : oui par défaut Temps d'affichage maxi (secondes) : valeur par défaut 6s Flash à afficher sans effet de transparence : Objets et formulaires à laisser affichés lors du déroulement : permet de ne pas couvrir les éléments situés sous le flash 23

24 Image en background Définition Démo Il s agit d une image fixe qui s affiche dans le fond de la page, donnant ainsi un effet d habillage du contenu. Synonymes : habillage, background Spécifications Création de départ : fichier gif, jpg ou png Ne fonctionne pas avec des créations Flash 24

25 Image en background Programmation Options Emplacement : tag dhtml Sélectionner le script pré-programmé «Image en background» Possibilité de rendre le background cliquable en chargeant avec la création une URL de lien Possibilité de lier sa diffusion aux autres formats de la page pour un effet de branding complet du site aux couleurs de l annonceur Possibilité d abaisser le site pour un habillage en Π 25

26 Image en background Paramètres Image alignée à gauche Image alignée au centre : positionnement par défaut Image alignée à droite Image positionnée en haut Image positionnée au centre : positionnement par défaut Image positionnée en bas Image répétée horizontalement : affiche l image plusieurs fois horizontalement Image répétée verticalement : affiche l image plusieurs fois verticalement Couleur du fond : FFFFFF=blanc, =noir, celle du site par défaut Décalage du contenu vers le bas : en pixels 0 par défaut Image fixe: en scrollant, seul le contenu du site bouge (le background reste fixe) 26

27 Interstitiel Définition Démo Il s agit d une page publicitaire qui s affiche pendant une durée déterminée lorsqu un internaute souhaite accéder à une page de contenu. Synonymes : pré-home Spécifications Création de départ : fichier flash, gif ou jpg Dimensions : selon support - standard = 800x600 Bouton : Cf. introduction 27

28 Interstitiel Programmation Options Emplacement : tag dhtml Sélectionner le script pré-programmé «Interstitiel» Les images contiennent les créations gif, jpg ou flash Le script contient éventuellement le script à y afficher Ajouter un lien de fermeture anticipé dans le flash Ajouter un logo cliquable dans la page de l interstitiel Possibilité de lier sa diffusion aux autres formats de la page pour un effet de branding complet aux couleurs de l annonceur 28

29 Interstitiel Paramètres Temps d'affichage maxi (secondes) : valeur par défaut 9s Point d ancrage et centrage de la création dans la page : par défaut la création est entièrement centrée Couleur du fond : transparent par défaut Présence d'un lien de fermeture anticipée : absent par défaut Lien de fermeture anticipé sous la création : au-dessus de la créa par défaut Texte du lien de fermeture anticipée : par défaut : "Accéder directement au site" Couleur du texte de fermeture anticipée : par défaut le lien est noir Opacité du fond (0 à 100) : 100 signifie opaque Z-index : valeur par défaut: 1000 URL Logo : URL d hébergement du logo (il sera placé au-dessus de la créa) URL Lien Logo : si vide, le logo n est pas cliquable 29

30 Reveal Définition Démo Il s agit de l'affichage d'un format bannière expand qui décale le site vers le bas pendant quelques secondes à l ouverture et/ou au passage de la souri Synonymes : moving banner Spécifications Création de départ : 1 fichiers flash, gif ou jpg (il ne s agit pas de deux créas alternées!) Bouton : Cf. introduction 30

31 Reveal Programmation Options Emplacement : n importe quel tag fixe (optimisé pour la méga-bannière) Sélectionner le script pré-programmé «Reveal» Il n y a qu une seule créa à charger Définir la taille de départ et celle d arrivée du format Le décalage n est prévu que vers le bas de la page Créa dépliée au démarrage / Créa dépliable plusieurs fois 31

32 Reveal Paramètres Hauteur de la création une fois repliée (pixels) : OBLIGATOIRE en pixel Créa dépliée au démarrage Temps initial de maintien en position dépliée (secondes) Temps de maintien en position dépliée après perte du focus de la souris (secondes) : 0 par défaut Créa dépliable plusieurs fois : non par défaut 32

33 Sky flottant Définition Il s agit d un format skyscrapper standard dont l affichage suit la barre de scrolling. La bannière reste ainsi visible même pendant la lecture du footer de la page. Démo Spécifications Création de départ : fichier flash, gif ou jpg 33

34 Sky flottant Programmation Options Emplacement : n importe quel tag fixe ou dhtml Sélectionner le script pré-programmé «Sky flottant» Possibilité de l activer sur un autre type de format 34

35 Sky flottant Paramètres Site centré : par opposition à un site aligné à gauche Largeur du site : OBLIGATOIRE - en pixels Position verticale par rapport au point d'ancrage : pixels, positif ou négatif Vitesse : de 1 à 10 pixels par seconde 35

36 Script Wall Définition Démo Il s agit d un banner accolé à un skyscraper formant un «L inversé» sur le coin droit de la page (format couramment utilisé dans les pays germanophones) Synonymes : wallpaper Spécifications Création de départ : 2 fichiers flash, gif ou jpg 36

37 Script Wall Programmation Emplacement : tag leaderboard Sélectionner le script pré-programmé «Script Wall» Charger les deux formats dans la même insertion sur le format banner Programmer un pixel blanc dans une autre insertion sur le format skyscraper Lier les deux insertions 37

38 Script Wall Paramètres Site centré (par opposition à un site aligné à gauche): par défaut le site est aligné à gauche Largeur du site : OBLIGATOIRE - 0 par défaut (permet de positionner le sky) Alignement Bannière : à droite par défaut Position verticale du Sky par rapport au point d'ancrage (pixels, positif ou négatif) : en haut de la fenêtre par défaut 38

39 Glossaire Opacité de fond Elle permet de rendre un élément plus ou moins transparent mais ne règle pas les problèmes de z-index! Point d ancrage Z-index Le point d ancrage d une création se fait par rapport à la fenêtre de votre navigateur (et non par rapport au site ou au tag utilisé). Astuce d utilisation: Création centrée verticalement et en haut pour les sites centrés / Création ancrée en haut à gauche pour les sites non centrés La propriété z-index permet de spécifier la position d'empilement d'un élément par rapport aux autres (notion de profondeur). L'élément ayant la plus grande valeur est au dessus. 39

40 Vidéo Spécifications fichiers vidéo p 41 Players Smart p 42 Player expand vidéo p 44 Player externe p 46 Script Trailer vidéo pour player externe p 48 40

41 Spécifications fichiers Vidéo Définition Une campagne vidéo se programme de la même manière que tout autre campagne dipslay ou Rich-Media Smart propose d utiliser ses propres players mais il est également possible d utiliser des player s externes Spécifications Utilisation d un player Smart Format de la vidéo:.flv Poids préconisé : jusqu à 2 ou 4 Mo en fonction du contrat Utilisation d un autre player Format du player: flash (.swf) Poids préconisé: 50 Ko Format de la vidéo: fichier.flv ou tout autre compatible avec votre player Poids préconisé : jusqu à 2 ou 4 Mo en fonction du contrat 41

42 Vidéo Players Smart Programmation Emplacement : tag pavé Cliquer sur «Activer le player vidéo» Charger le fichier.flv + URL de redirection Sélectionner l un des 4 players Smart actuellement disponibles Sélectionner les options qui vous conviennent : Son activé au démarrage Lecture en boucle Couleur des boutons Présence des boutons de contrôle Présence d'un bouton replay Transparence des boutons (de 0 à 100) Son en mode rollover Couleur des bandes Position des boutons Arrêt image (1 e ou dernière image du film) 42

43 Vidéo Players Smart 43

44 Vidéo Player Expand Vidéo Définition Démo Permet de diffuser une vidéo expand au passage de la souri ou à l ouverture de la page Un player spécifique est disponible à cet effet Programmation Effectuer les étapes décrites dans le silde «Vidéo Players Smart» en choisissant le player expand n 5 (ne fonctionne qu avec ce player) Il est recommandé de charger une vidéo de qualité correspondant à la taille de l expand souhaité Sélectionner le script pré-programmé «Expand Vidéo» 44

45 Vidéo Player Expand Vidéo Paramètres Largeur de la création une fois repliée (pixels) OBLIGATOIRE Hauteur de la création une fois repliée (pixels) OBLIGATOIRE Largeur de la création une fois dépliée (pixels) OBLIGATOIRE Hauteur de la création une fois dépliée (pixels) OBLIGATOIRE Vitesse de dépliement (pixels) Créa dépliée au démarrage : non par défaut Temps initial de maintien en position dépliée (secondes) : 0 par défaut Temps de maintien en position dépliée après perte du focus de la souris (s) : 0 par défaut Créa à déplier vers le haut: vers le bas par défaut Créa à déplier vers la gauche : vers la droite par défaut 45

46 Vidéo Player externe Programmation Options Emplacement : tag pavé Charger le fichier vidéo (.flv ou autre) + URL de redirection dans Smart Désactiver le fichier vidéo Récupérer l URL locale du fichier vidéo Intégrer l URL locale dans le player.swf à l appel de la vidéo Charger le player dans la même insertion que le fichier vidéo et le laisser actif Il est possible d avoir plusieurs vidéos et players en rotation dans la même insertion Il est possible d intégrer définitivement votre player dans Smart si vous l utilisez couramment 46

47 Vidéo Player externe 47

48 Vidéo Trailer vidéo pour player externe Définition Le trailer vidéo permet d éviter l intégration de l URL locale du fichier vidéo dans le player Il suffit d intégrer la variable «file» dans le player à l appel de la vidéo. Smart fera automatiquement le lien entre la vidéo et le player Programmation Emplacement : tag pavé Charger le fichier vidéo (.flv ou autre) + URL de redirection dans Smart Laisser actif le fichier vidéo Charger le player dans la même insertion que le fichier vidéo et le laisser actif Sélectionner le script pré-programmé «Trailer vidéo» Options Il est possible de charger plusieurs fichiers vidéo par insertion, mais qu un seul player par insertion 48