Règles de création d’animations Flash

De plus en plus de publicités sont créées en mode Flash sur les portails de Canoë. Elles se retrouvent un peu partout sur le site, superposées de manière
quelque peu désordonnée. Un grand nombre de publicités s’affichent par-dessus le contenu de la page pour une durée plus ou moins longue.

Nos portails sont en constante évolution et certaines informations seront bientôt présentées en mode d’animation Flash. Nous avons donc établi certaines

Ces règles nous permettent de gérer de façon juste et convenable, la superposition des publicités selon les circonstances.

Paramètre WMODE

Lorsqu’une animation Flash est intégrée dans une page Web, la définition du paramètre WMODE en transparence ou en opaque permet, entre autres, de
gérer la superposition des animations. L’image ci-dessous est un exemple de problème de superposition où l’animation foldover se retrouve sous la bannière
située dans le haut de l’écran, tandis qu’elle devrait être sur le dessus.

Exemple de problème de superposition

Pourquoi définir le paramètre WMODE ?

• Si le paramètre WMODE n’est pas défini, l’arrière-plan du flash sera opaque et l’animation apparaîtra toujours devant les autres couches (layers )
DHTML, par défaut.
• Si le paramètre WMODE est établi à « Transparent », toute la zone du flash qui ne contient pas d’arrière-plan deviendra transparente. Ce qui signifie
que même si l’arrière-plan est peint en couleur, celui-ci ne s’affichera pas. L’avantage de la transparence, c’est qu’il est possible de jouer avec la profondeur
en DHTML. L’animation Flash peut donc être affichée par-dessus les éléments de la page Web.

Attention : Une animation Flash ne s’affichera pas par-dessus une autre animation dont le paramètre WMODE n’aurait pas été défini.

• Si le paramètre WMODE est établi à « Opaque », il n’y aura pas de transparence, mais il sera possible de jouer sur la profondeur.

Dans un cas où une animation ne déborde pas de sa grandeur originale, le paramètre doit être mis à « Opaque ».

Si l’animation est de type Pub flottante, Foldover, DHTML, Voken , etc., elle doit être mise en mode transparence. Donc, le paramètre WMODE doit être défini
à « Transparent ». Ainsi, on pourra voir la page HTML derrière l’animation.

Note : Le paramètre WMODE de chaque animation doit obligatoirement être défini à « Transparent » ou à « Opaque ».

Paramètre z-index

Il faut aussi prévoir l’empilement des animations Flash (les couches) définies par le paramètre z-index.

Lorsque plusieurs éléments sont positionnés de façon absolue dans une page Web et que ces éléments se superposent, les éléments sont généralement
affichés les uns sur les autres selon l'ordre dans lequel ils ont été définis. Mais il est possible de modifier l’ordre d’affichage des éléments.

La propriété CSS z-index permet de définir un niveau d’empilement. Chaque nombre correspond à une couche. Plus le chiffre est élevé plus l’animation sera
placée vers l'avant, plus il est bas plus l'animation sera placée en arrière-plan.

Le tableau ci-dessous présente l’ordre à suivre pour la superposition des animations Flashs.

Type d’animation z-index

Dhtml, Foldover, Pub flottante, 1 000 000
Voken
Superbanner 100 000
Bigbox 10 000
Sky 1 000
Contenu local, bouton et autre 100
Navigateurs

Il est à noter que, selon le navigateur utilisé, le comportement des animations Flash en transparence diffère. Seul Internet Explorer rend bien la transparence
sans complication. Dans le cas des autres navigateurs, la zone de transparence qui est par-dessus des éléments d’une page HTML empêche l’accès à ces
éléments. Par exemple, si des liens sont situés sous une zone de transparence Flash, il sera impossible de cliquer sur ces liens.

Pour faire afficher une animation flash en transparence, les éléments ci-dessous doivent être pris en considération.

Le navigateur de l’utilisateur doit

être détecté.
Si le navigateur est Internet Explorer, l’animation Flash doit être affichée selon le standard établi plus haut.
Si le navigateur n’est pas Internet Explorer, un effet de survol (rollover ) JavaScript (comme pour une image) doit être appliqué sur deux éléments div.
o Un premier élément div contiendra l’animation Flash de grandeur minimum sans transparence. Cet élément div sera affiché par défaut.
o Le deuxième élément div contiendra l’animation Flash incluant la transparence. Cet élément div ne sera pas affiché par défaut (css display : none).
o Lorsque la souris survole la première animation Flash, le javascript inverse l’affichage des deux animations.

Marche à suivre pour le suivi des clics

1) Cliquer à droite dans la zone « Timeline » et créer une nouvelle couche appelée « clickTag » dans l’en-tête du film.
2) Sélectionner l’outil de dessin, et dessiner un rectangle couvrant tout le film dans la nouvelle couche.
3) Cliquer à droite dans le rectangle et sélectionner l’option « Convert to symbol » pour convertir le format du rectangle en bouton.
4) Entrer « clickTag » dans le champ de nom avant de sélectionner le symbole « button » et de cliquer sur OK.
5) Copier et coller le code ci-dessous dans le panneau de sélection :

on (release) {
if ((_level0.clickTag.substr(0, 5) == "http:")or(_level0.clickTag.substr(0, 6) == "https:")){
getURL(_level0.clickTag, "_blank");}}

6) Dans la zone des propriétés, définir la couleur Alpha à 0% pour que le rectangle soit transparent.

Notes : Le bouton sert à vérifier que l’URL de clickTag débute bien par « http: » ou « https: ». Sans cette mesure de sécurité, un utilisateur malveillant peut
créer une adresse URL en langage JavaScript lui permettant d’accéder à vos témoins ou d’utiliser vos licences.

De plus, la variable clickTag est de type _level0.clickTag. Ainsi, si le bouton est un film dans un film, ce sont les variables envoyées par l’appel initial au
fichier SWF qui seront utilisées.