Swf à fond transparent (html)
Description
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">
<object>
...
</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.
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">
<object>
...
</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.
Codes Sources
A voir également
- Swf à fond transparent (html)
- Html array - Conseils pratiques -PHP
- Png fond transparent ✓ - Forum VB.NET
- Jpeg transparent - Forum Flash
- Winforms panel transparent - Forum C# / .NET
- Fond ecran simple - Forum Visual Basic
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.