Swf à fond transparent (html)

Soyez le premier à donner votre avis sur cette source.

Vue 126 525 fois - Téléchargée 8 908 fois

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.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
23
Date d'inscription
samedi 2 décembre 2000
Statut
Membre
Dernière intervention
10 mars 2009

oui merci mais ça ne marche que quand je met dans la balise embed wmode=tranparent.
Biz merci
Messages postés
172
Date d'inscription
samedi 11 août 2012
Statut
Membre
Dernière intervention
9 avril 2011

ben c'est un de mes sites ...

bon alors en détails

cree un nouveau document sous flash mx

sur fond blanc tu dessine un cercle rouge au milieu de ta page

paramètre de publication html fond transparent

crée une page html conforme ( donc avec toutes les balises )

et le fond de ta page html noire

la balise pour le flash

<object type="application/x-shockwave-flash" data="Flash/monanim.swf?"
width="250" height="23">




Il vous manque le plugin flash pour visionner l'animation.

</object>
Messages postés
23
Date d'inscription
samedi 2 décembre 2000
Statut
Membre
Dernière intervention
10 mars 2009

Est ce que ça serait à cause de flash MX ? S'il vous plait...à l'aide!!
merci
Messages postés
23
Date d'inscription
samedi 2 décembre 2000
Statut
Membre
Dernière intervention
10 mars 2009

j'ai donc mis ce code <PARAM NAME=wmode VALUE=transparent> dans mon html dans objet là où se trouve mon swf...mais non ça marche po!
Messages postés
23
Date d'inscription
samedi 2 décembre 2000
Statut
Membre
Dernière intervention
10 mars 2009

(PARAM NAME=wmode VALUE=transparent) j'ai trouvé cela dans un des forums...mais je ne trouve pas ce code dans flash...c koi exactement?
Afficher les 49 commentaires

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.