Animation Flash et bloc div avec opacité définie

Salut à tous,

J'essaye de placer une div au-dessus d'une animation Flash pour créer une sorte d'ombre.
En jouant avec une position: absolute et un z-index, pas de souci, la div se place bien au dessus de l'animation flash. Mais lorsque j'ajoute à cette div une valeur d'opacité (par exemple, opacity: 0.25; -moz-opacity: 0.25; filter:alpha(opacity=25)), vlan! la div repasse en dessous de l'animation Flash!

Note: j'utilise le script SWFObject pour insérer mon animation Flash avec le paramètre wmode: "transparent".

Si quelqu'un a une idée, car là je sèche complètement!

Hello,

Une page en ligne ou un bout de code, peut-être ?

Bonjour Belig,

Oui effectivement cela pourrait être plus clair avec quelques lignes de code.

Alors dans le head du document:

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
	<script type="text/javascript">
		var params = { wmode: "transparent" };
		swfobject.embedSWF("animAID07.swf", "flashMovie", "940", "380","9.0.0");
	</script>

dans le body :

<div id="wrapper">

   <div id="flash-movie"></div>

   <div id="flash-shadow"></div>

</div>

dans le css

#wrapper {position: relative; width: 940px; height: 380px; }
#flash-movie { z-index: 1; }
#flash-shadow { position: absolute; top: 0; left: 0; z-index: 2; background-color: #000; opacity: 0.75; -moz-opacity: 0.75; filter:alpha(opacity=75); }

En vitesse, sans regarder d'avantage, z-index ne fonctionne que si l'élément est positionné.

Essaie en rajoutant un position:relative sur #flash-movie.

Merci de ta réponse. J'avais déjà essayé avec un position:relative mais chou blanc!
J'ai vraiment l'impression que c'est cette histoire d'opacité qui sème le trouble... même problème si j'applique une image de fond de type png-24 avec une faible opacité... Il y doit y avoir un truc avec le flash mais je ne sais pas quoi...

Bon, reprenons...

1°) C'est bien beau de créer une variable, mais si tu la mets pas en paramètre elle sert à rien.

Donc déjà :

swfobject.embedSWF("animAID07.swf", "flash-movie", "100%", "100%","9.0.0", false, false, params); 

J'ai mis 100% pour les tailles, je préfère les fixer dans le code CSS (voir juste en dessous).


2°) Je sais que l'utilisation de SWFObject 2+ est différente de la version 1.5. Le flash n'est pas mis dans la <div>, il la remplace complétement. Il faut donc un parent sur lequel préciser le niveau de superposition, les dimensions, etc.

<div id="wrapper"> 
   <div id="flash-container"><div id="flash-movie"></div></div> 
   <div id="flash-shadow"></div> 
</div> 

#flash-container { position:relative; z-index:1; width:940px; height:380px; }

3°) Il fonctionne le flash ? Si tu utilises le même code que celui que tu as donné, alors je vois pas comment.

Le nom de la <div> (flash-movie) est différent de celui donné au script (flashMovie).

Bonjour Belig,

Merci pour ta réponse! Quel âne, j'avais effectivement oublié de passer la variable en paramètre.

Ceci étant, ça n'a pas résolu mon problème. Mon flash fonctionne bien (j'avais fait une erreur en retapant le code sur Alsacreations, mais la div était bien celle qui était donnée au script) mais la div servant à créer l'effet d'ombre ne se place tjs pas au-dessus, restant derrière le flash.

Si j'enlève à la div ses propriétés d'opacité, celle-ci repasse au dessus du flash par contre.

Bizarre, bizarre...

Voici donc mon code actuel:

var flashvars = {};
var params = { wmode: "transparent" };
var attributes = {};
swfobject.embedSWF("<?php bloginfo('url'); ?>/wp-content/uploads/2010/04/animAID07.swf", "flash-movie", "100%", "100%","9.0.0",flashvars, params, attributes);

<div class="wrapper">		
		
  <div id="flash-container">
		
    <div id="flash-movie"></div>
		
  </div>

  <div id="flash-shadow"></div>
	
</div>

.wrapper { position: relative; }
#flash-container { position: relative; z-index: 1; width: 940px; height: 380px; }
#flash-movie { }
#flash-shadow { position: absolute; z-index: 2; top: 0; width: 940px; height: 5px; background: #000000; opacity: 0.25; -moz-opacity: 0.25; filter:alpha(opacity=25);   }

Attention, je crois qu'il manque un paramètre à ta fonction JS.

swfobject.embedSWF(swfUrl, id, width, height, version, [b]expressInstallSwfurl[/b], flashvars, params, attributes) 

Si tu n'utilises pas l'installation expresse tu dois mettre le paramètre à "false" (comme je l'ai fait dans mon dernier message d'ailleurs, t'avais juste à faire un c/c ).

Et si tu retires juste filter:alpha(opacity=25) dans le code CSS, ça marche toujours pas ?

Me faudrait une page en ligne pour mieux t'aider, la vérité est peut-être ailleurs...



EDIT : Il manque également un left:0 sur #flash-shadow.
Modifié par BeliG (07 Apr 2010 - 11:47)

Salut à tous , j'ai le meme soucis...

En fait des qu'on met opacity avec une virgule ca bloque (avec opacity:1; ou opacity:0; ca marche parfaitement)

Au passage, sous Chrome, ca ne marche pas du tout !

Salut,

Crash95 a écrit :
En fait des qu'on met opacity avec une virgule ca bloque

Ce qui est tout à fait normal puisqu'il ne daut pas utiliser une virgule mais un point :

opacity: 0.6;

Oui enfin peut importe, ca ne marche pas quand meme