Browserfenster erzittern lassen


JavaScript über Flash ansprechen
Versetzen Sie Ihre Besucher durch die Kombination von Flash und JavaScript ins Staunen. Lassen Sie Ihr Browserfenster erzittern, während in der Flash-Animation ein Stein auf den Boden fällt, eine Tür zuschlägt oder eine Bombe explodiert. Lernen Sie in einem praktischen Beispiel die Möglichkeiten des Zusammenspiels von Flash und JavaScript kennen.
In der Darbietung von visuellen und auditiven Effekten ist Flash unschlagbar. Kombiniert man Flash noch mit JavaScript, so kann man über die Grenzen der eigentlichen Flashdatei hinaus für tolle Effekte sorgen. Die hierbei entstehenden Möglichkeiten wollen wir an Hand eines praktischen Beispiels aufzeigen. An einer beliebigen Stelle innerhalb der Flash-Animation, beispielsweise wenn in einer Filmsequenz eine Bombe explodiert oder etwas Schweres zu Boden fällt, soll das gesamte Browserfenster erzittern.
 
Lassen Sie uns mit der Realisierung des Effektes beginnen. Erstellen Sie eine HTML-Datei und fügen Sie im Header folgenden Quellcode ein:

001:
002:
003:
004:
005:
006:
007:
008:
009:
010:
011:
012:
 <script language="JavaScript" type="text/javascript">
 function shake(intensity) {
     for(i = intensity; i > 0; i--) {
         for(j = intensity; j > 0; j--) {
             parent.moveBy(0,i);
             parent.moveBy(i,0);
             parent.moveBy(0,-i);
             parent.moveBy(-i,0);
         }
     }
 }
 </script>

Im vorliegenden JavaScript wird eine Funktion „shake“ definiert. Die Funktion durchläuft, abhängig vom Wert des übergebenen Parameters „intensity“, mehrmals zwei verschachtelte Schleifen. Innerhalb der inneren Schleife verändert die Funktion vier Mal die Position des Browserfensters in alle vier „Himmelsrichtungen“. Die Intensität der Verschiebung hängt von der Zählervariable „i“ der äußeren Schleife ab. Da der Wert der Zählervariable mit jedem Schleifendurchlauf verringert wird, nimmt ebenso der Effekt nach und nach ab. Mit Hilfe der inneren Schleife verhindern wir ein zu schnelles Beenden der Animation. Die im Parameter angegebene Intensität bestimmt somit den Grad der Verschiebung und die Dauer der Animation.
Damit es zu einem Erzittern des Browserfensters kommt, benötigen wir natürlich einen Aufruf der Funktion „shake“. Der Aufruf soll in unserem Fall von einer Flashdatei ausgehen. Erstellen Sie also zunächst eine neue Flashdatei. An beliebiger Stelle innerhalb der Datei können Sie nun mit Hilfe der ActionScript-Anweisung „getURL“ die Funktion „shake“ aufrufen.

001:
 getURL("javascript:shake(8);");

Binden Sie die Datei in der üblichen Vorgehensweise in das HTML-Dokument ein. Dies könnte bei einer Datei „flashfile.swf“ mit einer Breite von 200 Pixeln und einer Höhe von 50 Pixeln wie folgt aussehen:

001:
002:
003:
004:
005:
006:
 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="200" height="50" align="middle">
     <param name="movie" value="flashfile.swf">
     <param name="quality" value="high">
     <param name="bgcolor" value="#ffffff">
     <embed src=" flashfile.swf" quality="high" bgcolor="#ffffff" width="200" height="50" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
 </object>

Weitere Informationen zum Einbinden von Flashdateien in HTML-Dokumente erhalten Sie in dem Artikel „Flash-Dokumente veröffentlichen“.
In der Beispieldatei zum Artikel wurde die JavaScript-Funktion über eine Schaltfläche aufgerufen. Hierfür benötigen Sie zusätzlich zur vorgestellten „getURL“-Anweisung einen Event-Handler. Der Handler reagiert auf bestimmte Ereignisse, die im Zusammenhang mit der Schaltfläche auftreten. In unserem Fall wollen wir auf das Loslassen der linken Maustaste reagieren. Das entsprechende ActionScript zur Schaltfläche sieht somit wie folgt aus:

001:
002:
003:
 on (release) {
     getURL("javascript:shake(8);");
 }

Nutzen Sie die Möglichkeiten der Funktion „shake“ komplett aus. So könnten Sie beispielsweise das Herannahen eines Monsters oder das Aufkommen eines Gewitters durch mehrmaliges Aufrufen der Funktion mit steigender Intensität eindrucksvoll visualisieren.

Beispieldatei: Aufruf per Schaltfläche [Browserfenster_erzittern_lassen.zip]