Hello everybody.

Je pêche sur un problème qui, parait-il est "simple"...enfin pas de mon point de vue
Ok, alors pour faire simple, j'ai une page HTML faites de <div>.
En background je dois mettre un swf qui en plus doit s'élargir avec la fenêtre du navigateur.
Comment que je fait ? j'ai essayé plusieur truc sans succès comme genre ça :

<div class="fond">
<script type="text/javascript">AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','800','height','600','title','fond toto','src','toto','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','toto' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="600" title="fond toto">
        <param name="movie" value="images/toto.swf" />
        <param name="quality" value="high" />
        <embed src="images/toto.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"></embed>
      </object>
	</noscript></div>


merci pour le coup de main
Wolf
Modifié par wolfetone (21 Aug 2009 - 16:48)
Bonjour,

Il y a plusieurs choses à prendre en compte:
1. Étendre ton animation sur toute la hauteur et toute la largeur du viewport (zone d'affichage du navigateur).
2. Placer l'animation sous le contenu.
3. Éventuellement, garder l'animation fixe dans le viewport quand on fait défiler le contenu.
4. Gérer plusieurs problèmes de superposition (variables suivant les navigateurs et la version du Flashplayer).

Pour le premier problème, c'est relativement simple. Il faut que l'élément BODY ait une hauteur de 100% du viewport, ce qui se gère ainsi:
html {height: 100%;}
body {height: 100%; margin: 0; padding: 0;}

Ensuite, tu peux donner à ton animation Flash une hauteur de 100% et une largeur de 100%. Il faut le faire dans le code HTML à priori (et dans les paramètres de ta fonction JavaScript AC_FL_RunContent qui regénère ce code HTML à la volée). Il vaut mieux supprimer le DIV entre l'élément BODY et ton animation, ou bien il faudra donner à ce DIV une hauteur de 100% également.

(Note que je suppose ici que tu veux une hauteur de 100% du viewport. Si tu veux une largeur de 100% et une hauteur fixe en pixels, alors il faut adapter les valeurs pour les attributs width et height de ton animation... et tu peux oublier la succession de height:100% en CSS sur les éléments parent et ancêtres de l'animation.)

Pour placer l'animation sous le contenu, il faut positionner l'animation en absolu ou en fixe. Si l'animation doit être placée en haut de page et défiler avec le reste du contenu, le positionnement absolu sera adapté. Si l'animation doit rester fixe à l'écran même en cas de défilement, il faut utiliser le positionnement fixe. Bémol dans ce deuxième cas: le positionnement fixe n'est pas implémenté par IE6, donc pour Papy IE6 il faudra dégrader ça en positionnement absolu (donc pas fixe), ou bien supprimer ce fond, ou bien passer par un script JS pour repositionner l'animation à tout moment (et ça c'est assez prise de tête). Pour que le contenu soit au-dessus, il faut positionner le contenu en relatif, pour pouvoir utiliser un z-index. On utilisera par exemple un z-index de 0 pour l'animation Flash, et un z-index de 10 pour le contenu.

Il nous reste les problèmes de compatibilité (hors question du positionnement fixe dans IE6). Et là, tu peux t'apprêter à pleurer:

1. Dans certains navigateurs ou sur certains systèmes d'exploitation, pour que la superposition se fasse correctement (en respectant le z-index), il faudra impérativement utiliser l'attribut wmode (faire une recherche sur le sujet...) avec la valeur "opaque" ou "transparent" (la valeur par défaut étant "window"). Problème: sous Windows "opaque" peut suffire, mais sous Linux il faut "transparent", à moins que ce ne soit l'inverse. Et là où c'est drôle, c'est que un wmode "transparent" fait que Flash est beaucoup plus consommateur en ressources, ce qui pour certaines animations et avec certaines animations Flash peu optimisées peut donner une expérience utilisateur affreuse (site qui rame). Et il est difficile de constater les conséquences exactes, car les performances varient très fortement suivant les capacités de la machine, le système d'exploitation, voire la version du Flashplayer.

2. Sous OS X, d'après mon expérience et d'après les informations que j'ai trouvé, si un contenu HTML est placé par dessus une animation Flash, alors un clic-droit sur ce contenu HTML sera capté par l'animation Flash. Cela, avec des résultats très variables d'un navigateur à l'autre (les détails en anglais).

3. Sous Linux avec Flashplayer 9, il est strictement impossible de placer un contenu HTML par dessus un contenu Flash. C'est un bug corrigé dans la version 10 du Flashplayer pour Linux.

Ma conclusion: contenus HTML (gérés par le navigateur) et Flash (gérés par le plugin) ne font pas bon ménage. Éviter autant que possible de les superposer. Quitte à obliger le webdesigner à revoir sa copie, ou à obtenir des compromis drastiques (pas d'animation Flash en fond sous OS X, pas d'animation Flash en fond avec Flashplayer 9 et inférieurs).

Bon courage. Smiley smile
Salut,

Ok, c'est sympa, je m'en vais de suite tester tout ça et je te tiens au parfum ( ainsi qu'au webdesigner Smiley cligne )
A+