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.
|