Ce petit tutorial a pour but de vous montrer comment "déplacer" une animation
Flash vers l'avant ou vers l'arrière d'une page HTML.
Pour cela, nous allons voir comment rendre le fond d'un *.swf transparent, puis
paramétrer les calques de la page HTML de manière à obtenir l'effet escompté.
Enfin, pour obtenir cet effet il vous faut Flash 5 (ou version supérieure), et
malheuresement cette astuce ne semble fonctionner que sous IE.
OBTENIR UN FOND TRANSPARENT :
Suivez les étapes ci-dessous.
- Créez votre animation comme vous avez l'habitude le le faire, en veillant
toutefois à ne pas changer la couleur de fond (puisque celle-ci ne servira
à rien);
- allez ensuite dans "Fichier > Paramètres de publication...", cochez
"HTML" si ce n'est pas déjà fait puis rendez-vous dans l'onglet
correspondant. Vous devriez apercevoir un paramètre nommé "Mode fenêtre".
Réglez-le sur "Sans fenêtre transparent";
- publiez votre animation après l'avoir enregistrée.
À ce stade, si vous testez la page html vous ne constaterez aucune différence
d'affichage. En fait, la seule chose que nous avons ajouté dans le code HTML
est la ligne "<PARAM NAME=wmode VALUE=transparent>" ainsi que l'attribut
"wmode" de la balise <EMBED>. Nous allons maintenant voir comment exploiter
ceci.
PLACER L'ANIMATION DANS LA PAGE HTML :
Nous allons réaliser un exemple simple qui consiste à afficher l'animation en
haut à gauche de la page par dessus un texte, ce dernier sera donc visible
par transparence derrière le *.swf.
- Commencez par placer la code HTML d'insertion de l'animation Flash
(normalement situé entre les balises <OBJECT> et </OBJECT>) dans un calque
à position absolue. Voici à quoi cela devrait ressembler :
<div style="position:absolute;top:0;left:0">
<ob ject>
...
</object>
</div>
Les propriétés top:0 et left:0 signifient que ce calque sera situé en haut
à gauche de la page;
- maintenant écrivez votre texte en ne vous préoccupant pas du <div> que
ous avons créé précédemment.
- lancez la page web. Si vuous avez bien suivi les instructions précédentes,
il devrait être masqué en partie par l'animation.
Pour créer un texte avec l'animation en arrière-plan, la seule chose à faire est
de le placer dans un <div> possédant un z-index supérieur que celui dans lequel
est inclus le *.swf.
Exemple :
<div style="position:absolute;top:0;left:0;z-index:1> ;
Mon texte
</div>
Nous mettons z-index:1 car l'animation Flash est située en z-index:0. De même,
nous aurions pu mettre z-index:-1 pour avoir le même résultat que dans l'exemple
précédent. Et vous pouvez aussi changer la profondeur du calque du *.swf pour que
celle-ci soit derrière... Je vous laisse tester toutes les possibilités !
Et n'oubliez pas qu'à ce jour ça ne marche que sous Internet Explorer.
Si vous avez des questions, posez-les dessous.