Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1493 connectés 

  FORUM HardWare.fr
  Graphisme
  Web design

  Comment mettre un flash en arrière plan ?

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Comment mettre un flash en arrière plan ?

n°912045
bricebours​ica
Tout est possible...
Posté le 09-01-2007 à 16:43:16  profilanswer
 

En fait, j'ai une animation flash (réalisée en faire avec swich) qui s'affiche sur une page. Jusque là, no problemo.
Ensuite, j'ai une image gif, complètement indépendante qui s'affiche de temps en autre en fonction de certains critères. Idem avec parfois des petites question avec un div en position absolue.
 
Mon problème est que l'animation flash passe toujours en avant plan et quelque soit les valeurs z-index de l'un ou de l'autre... N'étant pas un grand spécialiste des animations flashs (car je ne suis pas graphiste), je ne comprend pas pourquoi l'object contenant l'animation passe toujours devant tout sans respecter le z-index...
 
Voici un exemple de source :

Code :
  1. <img src='mon_image.gif' border=0 style='position:absolute;top:2px;left:0px;z-index:0'>
  2. <object style='position:absolute;top:15px;left:5px;z-index:1'
  3.   classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
  4.   codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,42,0'
  5.   id=A123456 width=500 height=80>
  6.   <param name=movie value='mon_anim.swf'><param name=quality value=high>
  7.   <embed name='A123456' src='mon_anim.swf' quality=high width=500 height=80
  8.   type='application/x-shockwave-flash'
  9.   pluginspage='http://www.macromedia.com/go/getflashplayer'></embed>
  10. </object>


 
Bref, comment faire pour que l'image gif soit affiché DEVANT l'animation flash ?
(idem pour un div contenant un formulaire par exemple)
 
Merci d'avance à ceux qui m'aiderons et bonne année à tous !


Message édité par briceboursica le 09-01-2007 à 16:50:12

---------------
Brice de www.boursica.com
mood
Publicité
Posté le 09-01-2007 à 16:43:16  profilanswer
 

n°912052
Pyksel
Locker fou !
Posté le 09-01-2007 à 17:10:02  profilanswer
 

Ajoute cette ligne dans ton <object>
 
 

Code :
  1. <param name="wmode" value="transparent">



---------------
Rien est impossible, il suffit d'y croire !
n°912053
FlorentG
Unité de Masse
Posté le 09-01-2007 à 17:10:08  profilanswer
 

Là déjà ton flash à un z-index supérieur au gif, donc c'est normal qu'il s'affiche devant :

Code :
  1. <img .... z-index: 10" />
  2. <object .... z-index: 1">

n°912054
Pyksel
Locker fou !
Posté le 09-01-2007 à 17:12:06  profilanswer
 

FlorentG a écrit :

Là déjà ton flash à un z-index supérieur au gif, donc c'est normal qu'il s'affiche devant :

Code :
  1. <img .... z-index: 10" />
  2. <object .... z-index: 1">



 
Avec ma ligne peu importe l'index du div ou de l'image...


---------------
Rien est impossible, il suffit d'y croire !
n°912056
bricebours​ica
Tout est possible...
Posté le 09-01-2007 à 17:17:31  profilanswer
 

Royal !  :bounce:  
 
le <param name="wmode" value="transparent"> est en fait la chose qui rend l'animation "normale" et lui fait respecter les plans...  
 
quand au z-index, oui, merci aussi FlorentG, j'en avais essayé de toutes sortes, sans succès car je ne connaissait pas le param Pyksel que je remerci aussi ! D'ailleurs, même si je retire tous les z-index, à présent ça fonctionne....
Comme quoi on peu passer un temps fou à chercher un truc tout bête...
 
Merci encore.


---------------
Brice de www.boursica.com
n°912057
Pyksel
Locker fou !
Posté le 09-01-2007 à 17:19:32  profilanswer
 

briceboursica a écrit :

Royal !  :bounce:  
 
le <param name="wmode" value="transparent"> est en fait la chose qui rend l'animation "normale" et lui fait respecter les plans...  
 
quand au z-index, oui, merci aussi FlorentG, j'en avais essayé de toutes sortes, sans succès car je ne connaissait pas le param Pyksel que je remerci aussi ! D'ailleurs, même si je retire tous les z-index, à présent ça fonctionne....
Comme quoi on peu passer un temps fou à chercher un truc tout bête...
 
Merci encore.


 
Que du bonheur un foromeur heureux... Moi je pense que craps_youpla peut nous faire un exposé plus approfondi du bordel des param... :) Contacte le de ma part mais fait gaffe il mord parfois ;)


---------------
Rien est impossible, il suffit d'y croire !
n°912062
Pyksel
Locker fou !
Posté le 09-01-2007 à 17:25:17  profilanswer
 

Code :
  1. <param name="wmode" value="opaque">


 
Marche trés bien aussi... CF la doc...


---------------
Rien est impossible, il suffit d'y croire !
n°912065
FlorentG
Unité de Masse
Posté le 09-01-2007 à 17:43:03  profilanswer
 

Pyksel a écrit :

Avec ma ligne peu importe l'index du div ou de l'image...


Ah :/ Pas cool si on veut intervertir les deux suivant le cas. Enfin maintenant là on s'en fout vu qu'il ne doit gérer que les images au-dessus du flash.
 
Marrant en tous cas qu'il faille passer par ça, les positions absolues et les z-index devant normalement faire l'affaire, selon la recommendation CSS. Encore Flash qui fout la merde :o

n°912068
bricebours​ica
Tout est possible...
Posté le 09-01-2007 à 17:53:27  profilanswer
 

merci à tous, oui très heureux d'avoir résolu ce petit blème et avec opaque c'est encore mieux car il respecte le fond de l'animation.
et je suis d'accord sur le fait que normalement le css devrait être respecté...


---------------
Brice de www.boursica.com
n°912078
FlorentG
Unité de Masse
Posté le 09-01-2007 à 18:55:04  profilanswer
 

Ok, en fait le paramètre wmode rend le flash "windowless", du coup il peut être mis en-dessous d'autres éléments.
 
C'est le même problème qu'avec <select> sous IE6, impossible de le mettre en-dessous de quelque chose. IE7 a corrigé la chose heureusement.

mood
Publicité
Posté le 09-01-2007 à 18:55:04  profilanswer
 

n°912095
gatsu35
Blablaté par Harko
Posté le 09-01-2007 à 20:05:44  profilanswer
 

[:hahaguy] tu ne le savais meme pas [:hahaguy]

n°912097
FlorentG
Unité de Masse
Posté le 09-01-2007 à 20:08:39  profilanswer
 

J'avais oublié [:hahaguy]

n°912110
gatsu35
Blablaté par Harko
Posté le 09-01-2007 à 20:49:33  profilanswer
 

FlorentG a écrit :

Ok, en fait le paramètre wmode rend le flash "windowless", du coup il peut être mis en-dessous d'autres éléments.


Good Job
 

FlorentG a écrit :


C'est le même problème qu'avec <select> sous IE6, impossible de le mettre en-dessous de quelque chose.


Ou en faisant passer une iframe dessous.
Tiens j'ai developpé cet objet qui génère une iframe seulement pour IE (pour IE7 faudra juste sortir une règle en plus)
 

Code :
  1. /* genere une iframe pour faire passer les divs par dessus des selects sous IE */
  2. var ifrlayer = {
  3. make:function(obj) {
  4.     if(!obj) return; obj = (typeof(obj)=="string" ) ? document.getElementById(obj) : obj; if(!obj) return;
  5.  if(document.all && window.print && !window.opera && document.getElementById && !obj.iframelayer ) {
  6.   if(obj.parentNode && !obj.iframelayer) var ifr = obj.parentNode.insertBefore(document.createElement("iframe" ), obj);
  7.   if(obj.currentStyle.zIndex != "" && parseInt(obj.currentStyle.zIndex)>1 ) {
  8.    ifr.style.zIndex = parseInt(obj.currentStyle.zIndex)-1;
  9.   }
  10.   ifr.src = "javascript:false";
  11.   with(ifr.style) {
  12.    filter = "mask()";
  13.    position = "absolute";
  14.   }
  15.   obj.iframelayer = ifr;
  16.  }
  17.  if (obj.iframelayer) {
  18.   with(obj.iframelayer.style) {
  19.    width  =  obj.offsetWidth+"px";
  20.    height =  obj.offsetHeight+"px";
  21.    visibility = "visible";
  22.   }
  23.   ifrlayer.move(obj)
  24.  }
  25. },
  26. hide:function(obj) {
  27.  if(!obj) return; obj = typeof(obj)=="string" ? document.getElementById(obj) : obj; if (!obj) return;
  28.  if(obj.iframelayer) {
  29.   obj.iframelayer.style.visibility="hidden";
  30.  }
  31. },
  32. move:function(obj) {
  33.  if(obj && obj.iframelayer) {
  34.      with(obj.iframelayer.style) {
  35.       top = obj.offsetTop+"px";
  36.       left =  obj.offsetLeft+"px"
  37.      }
  38.  }
  39. }
  40. }


ifr.make(monelement_ou_un_id) => génère automatiquement une iframe sous l'élément
ifr.hide(monelement_ou_un_id) => cache l'iframe (à utiliser après que l'élément a été caché)
ifr.move(monelement_ou_un_id) => déplace l'iframe lorsque l'on déplace l'élément
 
ex :  

Code :
  1. var mondiv = document.getElementById("lediv" )
  2. mondiv.style.display = "block";
  3. firlayer.make(mondiv);
  4. mondiv.style.display = "none";
  5. ifrlayer.hide(mondiv);
  6. mondiv.style.top = "400px";
  7. ifrlayer.move(mondiv);
  8. mondiv.style.height = "250px";
  9. ifrlayer.make(mondiv);


exemple simple :  
sur la Fnac clique ICI
attend que la page soit chargée, clique sur l'image du produit et déplace le bloc. (Teste sous IE bien sur :o)

FlorentG a écrit :


IE7 a corrigé la chose heureusement.


En mode strict seulement, en mode quirks c'est Go back to IE and Go Fuck Yourself

n°912145
FlorentG
Unité de Masse
Posté le 09-01-2007 à 22:16:57  profilanswer
 

gatsu35 a écrit :

Ou en faisant passer une iframe dessous.
Tiens j'ai developpé cet objet qui génère une iframe seulement pour IE (pour IE7 faudra juste sortir une règle en plus)


YOU'RE TEH MIGHTY IE FUCKER [:hahaguy]

n°912185
gatsu35
Blablaté par Harko
Posté le 10-01-2007 à 07:19:40  profilanswer
 

FlorentG a écrit :

YOU'RE TEH MIGHTY IE FUCKER [:hahaguy]


YOU'RE THE RECEIVER [:hahaguy][:hahaguy][:hahaguy][:hahaguy][:hahaguy]

n°912215
bricebours​ica
Tout est possible...
Posté le 10-01-2007 à 11:10:57  profilanswer
 

gatsu35 a écrit :

Tiens j'ai developpé cet objet qui génère une iframe seulement pour IE (pour IE7 faudra juste sortir une règle en plus)


 
Je viens de tester le lien de la fnac avec IE7 et FF2, c'est parfait avec les 2, tout fonctionne et je suis agréablement surpris de voir (enfin) de la transparence d'objets sous FF, it's good !


---------------
Brice de www.boursica.com
n°912220
FlorentG
Unité de Masse
Posté le 10-01-2007 à 11:18:45  profilanswer
 

briceboursica a écrit :

je suis agréablement surpris de voir (enfin) de la transparence d'objets sous FF, it's good !


Euh  [:johneh]  [:johneh] C'est plutôt sous IE que ça aurait été une surprise :D

n°912224
gatsu35
Blablaté par Harko
Posté le 10-01-2007 à 11:33:17  profilanswer
 

briceboursica a écrit :

Je viens de tester le lien de la fnac avec IE7 et FF2, c'est parfait avec les 2, tout fonctionne et je suis agréablement surpris de voir (enfin) de la transparence d'objets sous FF, it's good !


tu peux y aller sous Opera 8,9, safari 2, IE5, IE5.5, IE6, FF 1.0 1.5, 2.0  [:kbchris] Je suis juste fier du JS mais pas du code HTML/CSS qui a été fait pas 36 personnes dans un temps eclair :/


Message édité par gatsu35 le 10-01-2007 à 11:50:26

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  Comment mettre un flash en arrière plan ?

 

Sujets relatifs
Format enregistrement Flashproblème de son sur animation FLASH
Comment mettre un lien sur une image?Recuperation fichier flash impossible ou tres difficile
Quel livre pour FLASH?[Flash]>>Appeler un .swf avec un AS (problème avec root)
Option de publiation flash[résolu][Flash]>>réglage et visualisation du préchargement
Bouton flash ouvrant une pop up swf[Flash]>>Menu scroll pour galerie photo
Plus de sujets relatifs à : Comment mettre un flash en arrière plan ?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR