Rechercher : dans
Par :

Menu déroulant passe sous l'animation flash

Dernière réponse le 6 déc 2009 à 14:37:10 Alexandre, le 5 mai 2009 à 18:52:55 
 Signaler ce message aux modérateurs

Bonjour,

Mon problème est que mon menu déroulant (entièrement css) passe sous mon animation Flash même en utilisant le wmode="transparent" :( ... Help ! (L'animation passe au dessus de tout et j'aimerais qu'elle se comporte "normalement")

Configuration: Windows Vista
Firefox 3.0.10

1

ben85350, le 5 mai 2009 à 19:02:28

J'ai eu le même problème mais en ASP.NET !
Je te conseille de créer deux div :
- un contenant ton menu
- un autre contenant ton flash
ensuite il faut utiliser du CSS
position : relative pour les deux
z-index : celui qui aura le plus grand z-index sera au-dessus

Tu peux aussi manipuler ton div avec padding-left, top , etc...

Répondre à ben85350

2

Alexandre, le 5 mai 2009 à 19:35:38

J'avais déjâ séparé en deux div .. mais en tout cas, çà ne marche pas même avec le z-index (j'ai esseyer autre chose pour voir si javais fait une erreur de frappe quelque part .. mais le z-index marche si je prends autre chose que cette fichu animation flash)

.. (L'animation flash est comprise avec une zone d'input dans une même classe .. qui elle si on la met en z-index plus important passe au-dessus et donc réagis bien au z-index mais pas le flash)

Répondre à Alexandre

3

Alexandre, le 11 mai 2009 à 11:14:50

Personne ne sait ? :'(

Répondre à Alexandre

4

bg62, le 11 mai 2009 à 12:09:21

Bonjour,
ça faisait longtemps ... mais aujourd'hui je repique ma crise ....
ce forum est ouvert à tous, mais par respect pour ceux qui voudraient vous aider, pour ceux qui vous répondent,
pourquoi ne pas vous inscrire ?
c'est gratuit et sans risque (sauf celui de trouver des gens indésirables qui parcourent les forums pour polluer ...)
merci
le 'www' est fait aussi pour communiquer, partager et échang­er, non ?

Répondre à bg62

5

JBiN-1, le 11 mai 2009 à 16:28:39

Tu peux montrer ton code ?

Répondre à JBiN-1

6

Groarh, le 11 mai 2009 à 17:42:09

Salut,
j’apporte de mauvaises nouvelles…

Les éléments flash sont toujours au-dessus des autres, c’est un défaut de Flash Player. Ça fait longtemps que les développeurs se plaignent auprès d’Adobe, mais on attend toujours…
L’objet flash ne tient pas compte des spécifications de z-index, et l’astuce « wmode=transparent » qu’on trouve partout sur le net n’apporte de solution que pour les zones transparentes de l’objet. Il faut contourner le problème.

Bon courage Alexandre ;)

Répondre à Groarh

7

Alexandre, le 11 mai 2009 à 18:18:44

Merci à toi Groarh et à tous pour vos réponses !

bg62 je ne vois pas en quoi c'est une manque de respect :( ... et chacun à ses raisons personnels :p

Répondre à Alexandre

8

krok, le 26 jui 2009 à 16:41:26
  • +2

Bonjour,

C'est tout à fait possible de le faire. Il faut juste aller plus loin que le copier/coller de ce que l'on voit sur internet concernant la feinte du "wmode=transparent" :)

Il existe 3 modes pour l'affichage d'une animation flash : windows (défaut), opaque et transparent.

En mode par défaut l'animation sera toujours au-dessous de tout ce qui s'affiche dans la fenêtre du browser, pour la simple et bonne raison que l'animation flash est affichée "en dehors" du browser par windows (je ne rentre pas dans les détails technique).

Il faut donc utiliser le mode opaque ou transparent en fonction des besoins. Opaque conviendrait surement dans ton cas.

Toutes les explications sont ici : http://www.communitymx.com/content/article.cfm?cid=E5141

Bien à vous !

Répondre à krok

9

Alexandre, le 26 jui 2009 à 19:35:56

Merci beaucoup, mais sa n'éxiste pas en français ça ?

Répondre à Alexandre

10

Groarh, le 28 jui 2009 à 17:02:43
  • +1

@ krok :
Incroyable ! Personne m'avait jamais parlé de ça. Je me suis laissé abuser et j'ai dit des conneries... Merci pour le lien, c'est super instructif :)

@ Alexandre :
je vais essayer de traduire de quoi ça cause... en gros, quoi.
Il y a trois modes d'affichage que l'on peut spécifier avec l'option wmode, jusque-là tu connais. Mais voyons les détails...

- le mode window :
c'est le mode par défaut. Avec ce mode, sous Windows, l'animation existe dans une instance d'affichage gérée par Windows, et pas par le navigateur. Ce qui fait que c'est plus performant, mais que ça va se superposer à tout le contenu. Et sous un Mac, c'est à peu près respecté mais les mouvements de l'animation peuvent faire des interférences bizarres...

- le mode opaque :
là c'est le navigateur qui prend en charge l'animation, donc on perd un peu en performance, mais ça permet de manipuler l'animation comme un bloc HTML normal ! Il y a un exemple (il faut mettre la souris sur les mots « DHTML Trigger »). Le site explique que ce mode est mal compris, les gens croient qu'il sert au contraire à placer l'animation au-dessus du reste... Mais si on lui donne un z-index, ça marche !
La source de confusion c'est que Macromedia recommandait d'utiliser le mode transparent pour travailler avec les « calques DHTML », c'est-à-dire les div contrôlées par JavaScript.

- le mode transparent :
il est aussi géré par le navigateur, ce qui permet de manipuler l'animation comme en mode opaque. Le plus, c'est que l'arrière-plan de l'animation est rendue transparente, ce qui laisse apparaître les éléments présents derrière, masqués seulement par les objets de premier plan de l'animation. Ça peut être utile pour des objets non rectangulaires. Par contre, la gestion de la transparence est assez gourmande en ressources...
Dans le cadre en rouge il précise qu'il faut faire attention si on a des zones cliquables derrière un objet transparent : si on veut cliquer, c'est le Flash qui prend le focus (c'est-à-dire, le clic « atterit » sur l'objet Flash).

Voilà j'espère que ma traduction n'est pas trop approximative, j'ai du mal à ne pas broder :P

Un dernier détail, mais je pense que tu l'auras compris : pour utiliser les modes en flash, les codes sont :

wmode="window"
  ou
wmode="opaque"
  ou
wmode="transparent"


Bon courage ;)

Répondre à Groarh

11

bg62, le 28 jui 2009 à 17:47:58

Bien vu ... ça mériterait un petit 'tuto' !!! et pet-être un commentaire de notre RAD national s'il est dispo ...
:) b g le 'www' est fait aussi pour communiquer, partager et échang­er, non ?
merci d'avoir la politesse de répondre à ceux qui essaient d­e vous aider

Répondre à bg62

12

Groarh, le 29 jui 2009 à 14:51:21
  • +3

Je sais pas si y'a vraiment besoin de tuto, tout a été dit... Enfin je veux bien détailler.

On a un objet flash, <embed> ou <object> suivant la preférence du développeur (si vous aimez le W3C ou pas, mais on ne va pas relancer le débat ^^), qui porte un id, mettons "anim".

<object id="anim">
  ou
<embed id="anim">
On a un menu déroulant, dont le conteneur principal est, mettons, une <ul>, avec un id, on va dire "menu".
<ul id="menu">

Dans l'objet flash, spécifiez le wmode en "opaque", avec une balise <param> si vous utilisez <object>, ou dans un attribut si vous utilisez <embed> :
<object id="anim">
  <param name="wmode" value="opaque" />
  ...
</object>

  ou

<embed id="anim" wmode="opaque" ...></embed>

Et dans le CSS on a simplement besoin que le menu déroulant ait un plus grand z-index que l'animation :
#anim {
  z-index: 1;
}

#menu {
  z-index: 2;
}
Je peux pas être plus clair :P ... D'autres questions ?

Répondre à Groarh

13

bg62, le 29 jui 2009 à 15:23:04

Superbe !
:) le 'www' est fait aussi pour communiquer, partager et échang­er, non ?
merci d'avoir la politesse de répondre à ceux qui essaient d­e vous aider

Répondre à bg62

14

Alexandre, le 30 jui 2009 à 14:24:24

Wouaahhh ! Merci beaucoup, j'ai eu de la chance que ça tombe sur mon post ça !

Répondre à Alexandre

15

Alexandre, le 30 jui 2009 à 17:02:42

1000, NON, 10 000 mercis, ça marche !!!!

Répondre à Alexandre

16

Groarh, le 30 jui 2009 à 17:55:28

Heureux d'avoir pu t'aider, ciao !

Répondre à Groarh

17

laurent, le 13 aoû 2009 à 14:47:28

Bravo, cela fonctionne même sans z-index.
Merci.

Répondre à laurent

18

Alexandre, le 14 aoû 2009 à 01:11:44

Ouais, mais je crois que çe ne marche pas sous IE malheureusement :s

Répondre à Alexandre

19

Groarh, le 14 aoû 2009 à 02:28:36
Répondre à Groarh

20

Alexandre, le 14 aoû 2009 à 02:42:51

8

Répondre à Alexandre

21

Groarh, le 14 aoû 2009 à 03:07:47

Ah zut c'est chiant ça, ça veut dire qu'il faut attendre la version 9… ou 10…

Répondre à Groarh