TUTORIEL FLASH 
Jouer une animation Flash transparente par-dessus du contenu
L'explication de l'un des effets courants de la publicité en ligne, utilisant DHTML. (30/03/2004)

De plus en plus fréquentes, les animations Flash transparentes se superposent - sous certains navigateurs - aux textes et images d'une page Web. Bien sûr, afin de ne pas gêner plus que de raison, ces animations doivent disparaître en bout de quelques secondes pour laisser la place au contenu attendu.
Réaliser ce type d'effet est finalement simple : voici comment procéder.

Transparence
Avant toute chose, il faut évidemment avoir une animation à portée de la main. Celle-ci doit être courte (respectons les lecteurs) et sans image de fond. Pour obtenir l'effet de transparence, il faut se rendre dans le menu "Fichier/Paramètres de publication…" de Flash, et dans l'onglet HTML choisir l'option "Sans fenêtre transparente" du menu déroulant "Mode fenêtre". Publiez votre animation, et vous obtenez un fichier SWF avec son fichier HTML. Lancez le fichier HTML pour voir l'animation, puis modifiez la valeur de l'attribut BGCOLOR de la balise BODY pour vérifier que votre animation est bien transparente.

Intégration
Reste que si l'on ajoute du texte autour de cette animation, pas grand chose d'intéressant ne se passe : il faut pour bien faire utiliser les "couches" ou "layers". Nous allons donc placer notre animation Flash dans une balise DIV, qui prendra l'argument style="" avec entre autres la propriété "z-index" prenant la valeur 1 (ou plus). Celle-ci nous permet de placer le contenu de notre couche dans un plan différent de celui du reste de la page. La "surface" de notre page, où se trouvent le texte, les images et autres, est placée sur le plan z-index='0'. Les plans placés à des valeurs supérieures apparaissent donc "devant" le contenu de la page, et ceux placés à des valeurs inférieures (négatives) apparaissent "derrière", ce qui permet de réaliser l'effet désiré.

Combiné avec notre Flash transparent, nous obtenons donc une animation placée devant notre texte, celui-ci restant visible.

Respect the user
Reste un dernier détail : marquer la durée d'affichage de notre animation. Cela peut se faire de deux manières, les deux combinant les capacités de JavaScript et CSS :

1) Créer une fonction JavaScript (placée dans le code APRES les balises DIV de l'animation) réalisant un décompte et cachant ensuite l'animation :
<script>
nbrSecondes = 5;
setTimeout('cacheFlash()',nbrSecondes*1000);
function cacheFlash()
  {
  document.getElementById("flash").style.visibility="hidden";
  }
</script>

Notez que cela ne coupera pas le son…

2) Si vous avez besoin que l'animation se joue obligatoirement en entier, placez la fonction cacheFlash() dans le fichier HTML, et ajoutez sur la dernière image-clé le code suivant :
getURL('javascript:cacheFlash()');
Avant cela, le code doit bien entendu couper le son de l'animation…

Voici notre exemple et son code source.

 
Xavier Borderie, JDN
 
Accueil | Haut de page