Flash & fancybox

[elvistheking]

Ahoi,

ich habe folgendes Problem:
Es wurde eine Website (nahezu) komplett in Flash erstellt. Außerhalb der swf (also im html-Quelltext selber) befinden sich noch 3 Links (Impressum, Anfahrt, Kontakt), welche mittels fancybox per 'popup' dann im Vordergrund erscheinen und über die restliche Seite (inkl. des Flash-Inhaltes) ein Overlay legen (z.B. 50% Grau). Das ganze klappt auch aus der swf selber (per getURL).
Das Problem selber liegt jetzt aber an der Browser-/OS-/Prozessor-Kompatibilität.

MacOS 10.5 - FF 4, FF 3, Safari 5, Chrome 10, Opera 11 - ohne Probleme
MacOS 10.4 - FF 3 ohne Probleme
Windows XP - FF 4 Overlay nur über html-Seite, swf schneidet um fancybox alles ab, inkl. Overlay & close-Button
Windows XP - IE8, Chrome11 fancybox wird hinter der swf geöffnet

Das komische Verhalten beim FF unter WinXP könnte noch toleriert werden, den close-Button einfach in das Popup mit reinnehmen, aber wie ich das IE/Chrome-Problem löse weiß ich leider nicht.
habe es schon beim Einbetten der swf mit

PHP-Code:

<param name="wmode" value="transparent">
//und
wmode="transparent" //im <embed>-tag 


versucht und die swf mal in ein

PHP-Code:

<div style="position:absolute; z-index:-1"> 


gepackt, aber es nützt leider nichts.

Weiß einer von euch evtl. noch Rat?

Link zur besagten Site

[Maciej]

Hi,

in deinem Fall sollte eigentlich wmode am besten auf "opaque" gesetzt werden.
Problem bei wmode ist das es von den Browsern unterschiedlich interpetiert und verarbeitet wird.

"opaque" erlaubt es anderen Elementen die Flash Datei zu verdecken, "transparent" dagegen ermöglicht es anderen Elementen von hinten durchzuscheinen.

"opaque" sollte man, wenn möglich, "transparent" immer vorziehen da "transparent" CPU lastiger ist.

[elvistheking]

Danke für die Antwort, aber mit 'opaque' klappt leider bei den besagten Browsern auch nicht. Weiterhin unverändert (popup im Hintergrund oder kein Overlay). Der Firefox wackelt, bevor er das Popup öffnet sogar noch mal kurz mit dem Fenster rum, sehr merkwürdig.

[Maciej]

Hi,

du hast erstmal vergessen das param Tag zu schliessen, weswegen der rest danach invalid ist:

<param name="wmode" value="opaque">

<!-- ändern in -->

<param name="wmode" value="opaque" />

Ansonsten scheint die Embed Methode nicht so optimal zu sein, da selbst ein HTML Editor die attribute im Embed tag nicht korrekt highlightet bzw. nicht als korrekt ansieht.
Sollte es, nachdem du den oben gennant Fehler korrigiert hast, immernoch nicht korrekt laufen, würd ich dir empfehlen es mal mit SWFObject als einbettungsvariante zu versuchen. Fahr damit bisher ganz gut und auch der WC3 Validator beschwert sich nicht.

Hab vor kurzem ein ähnliches Problem wie du gehabt, nur mit ner Lightbox anstatt FancyBox und es funktionierte wunderbar in der Kombi SWFObject 2.2 & wmode "opaque".

swfobject - SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file - Google Project Hosting

Links kannst du dir alles nötig runterladen. Ich empfehle dir auch den swfobject_generator runterzuladen (ich nutz die Adobe AIR Variante), damit kannst du dann leicht per klicks und eingabefelder alles korrekt eingeben ohne dich mit dem HTML Code rumzuprügeln.
Du darfst nicht vergessen dann die swfobject.js mit hochzuladen damit SWFObject auch korrekt funktioniert.

[elvistheking]

Ahoi,

danke erst mal für die umfangreiche und kompetente Antwort.
Ich habe es jetzt erst einmal ohne JavaScript-Unterstützung (Dreamweaver-Variante) eingebettet:

PHP-Code:

<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="1000" height="700">
  <param name="movie" value="../flash/main.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <embed src="../flash/main.swf" quality="high"
      pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
        type="application/x-shockwave-flash" width="1000" height="700" wmode="opaque">
  </embed>
</object> 


das klappt jetzt mit oben genannten Problembrowsern prima. Overlay und close-Button wird angezeigt. Nur hat der IE8 jetzt unverständlicherweise ein Problem mit den Abmessungen des Popups. Zumindest die Breite wird immer mit ca. 30px angezeigt.
Aber das ist ja jetzt nur noch ein IE-Bug / Quirks-Mode Problem. Manchmal reicht ja schon die Angabe eines anderen DOCTYPE.