Einbindung von MegaZine in eine Flashsite - iframes aus Flash heraus einblenden

[medienbayer]

Hallo Community,
vielleicht könnt ihr mir bei der Lösung des folgenden Problems helfen:

Ziel:
MegaZine soll per Klick auf einen Button direkt über einer Flashsite liegend geöffnet werden. Also nicht in einem neuem Fenster.

Anwendungsbeispiel:
www.johnny-bear.de - Die Previews der Bücher sollen direkt über dem flashcontent angezeigt werden, wenn der User auf einen der Bücherbuttons klickt.


Lösungsansatz (von Florian und mir):
Per ActionScript wird ein Javascript in der Mutter-HTML-Datei angesteuert, der iframes ein- und ausblendet die über dem Flashcontent liegen und das jeweilige MegaZine enthalten.


Codebeispiele:
Am besten ladet ihr euch die gesamte Zip-Datei herunter und schaut euch den script im HTML und ind er fla an: >> iframe_ausFlash_einAusBlenden_TEST.zip <<
Hier Auszüge aus dem Code:

AS3:

Code: [Select]

buch1_bt.addEventListener(MouseEvent.CLICK, buch1);

function buch1(event:Event):void
{
trace("buch1");
ExternalInterface.call("showBook", 1); // fuer's erste buch

}


buch2_bt.addEventListener(MouseEvent.CLICK, buch2);

function buch2(event:Event):void
{
trace("buch2");
ExternalInterface.call("showBook", 2); // fuer's zweite buch

}

aus_bt.addEventListener(MouseEvent.CLICK, ausblend);

function ausblend(event:Event):void
{
trace("aus");
ExternalInterface.call("showBook", 0); // um die buecher zu verstecken

}

JavaScript im html:

Code: [Select]

<!-- Hier folgt der Javascript, der aus Flash über den Actionscript aufgerufen werden soll! -->

<script language="javascript"> //Script zum ein und ausblenden der iframes
        function showBook(number) {
        if (number == 1) {
        $("#book2").hide(); // nur fuer den Fall, dass es sichtbar ist
        $("#book1").show();
        } else if (number == 2) {
        $("#book1").hide(); // nur fuer den Fall, dass es sichtbar ist
        $("#book2").show();
        } else {
        $("#book1").hide();
        $("#book2").hide();
        }
        }
        </script>

iFrames im html:

Code: [Select]

<!-- Hier folgen die beiden iframes, die vom Javascript ein- und ausgeblendet werden sollen. Die iframes sollen eigentlich VOR dem flashcontent liegen!-->

<iframe name="book1" src="buch1.html" id="book1" style="z-index:2; width:200px; height:200px; position:absolute; top:100px; left:400px;">
  <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie k&ouml;nnen die eingebettete Seite &uuml;ber den folgenden Verweis
  aufrufen: <a href="buch1.html">Preview Buch1</a></p>
</iframe>

<iframe name="book2" src="buch2.html" id="book2" style="z-index:3; width:200px; height:200px; position:absolute; top:300px; left:400px;">
  <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie k&ouml;nnen die eingebettete Seite &uuml;ber den folgenden Verweis
  aufrufen: <a href="buch2.html">Preview Buch2</a></p>
</iframe>


Probleme:
1. Die beiden iFrames werden nicht richtig über dem Flashcontent angezeigt. in Firefox "flackern" sie, im IE werden sie weiß angezeigt.
2. Bei Klick auf die Buttons im Flashcontent passiert nichts.


Gesuchte Lösung:
Fehler im code? Neuer Code? Anderer Lösungsansatz?
Bitte eure Lösung einfach verständlich erklären und den funktionierenden Code beifügen, da viele Leute (auch ich) ziemliche AS- und JS-Anfänger sind.
Wer hier als erstes eine funktionierende Lösung in Form von Code oder der korrigierten Testdateien postet bekommt als

Belohung:
ein kostenloses Exemplar von "Johnny the Bear" - ganz in Echt, mit Papier und super realistischen Umblättereffekten *g*.

Vielen Dank für eure Hilfe,
Matthias
- Mediendesignstudent