Andreas Rozek

Flash- und Flex-Anwendungen auf einer Web-Seite

Früher oder später kommt der Zeitpunkt, an dem eine für das Web entwickelte Flash- oder Flex-Anwendung in ein HTML-Dokument integriert werden muß. Die derzeit (sogar von Adobe) empfohlene Methode verwendet die SWFObject-Bibliothek [1], ggfs. in Verbindung mit swffit [2] (falls die Flex-Anwendung automatisch die gesamte verfügbare Fläche in einem Browser-Fenster einnehmen soll).

In diesem Artikel beschreibt der Autor die Vorgehensweise, mit der er seine Flash- bzw. Flex-Anwendungen in HTML-Seiten integriert.

Flash (und Flex) in HTML-Dokumenten

Flash ist kein HTML - und zudem eine "proprietäre" Technologie. Folglich müssen ein paar spezielle Vorkehrungen getroffen werden, wenn eine Flash- (oder Flex-)Anwendung in ein HTML-Dokument integriert werden soll. Und wie so oft in diesem Umfeld, hängen die konkreten Maßnahmen von dem jeweils verwendeten Browser, der eingesetzten Plattform, ja sogar von den aktuellen Einstellungen des Benutzers ab. Desweiteren könnte auf dem Rechner des Benutzers u.U. gar kein oder nur ein veraltetes Flash-Plugin installiert sein... Die z.B. von [3] vorgeschlagenen Vorgehensweisen sind im Hinblick auf diese potentiellen Probleme ungeeignet und ziemlich veraltet.

Die derzeit wohl fortschrittlichste Methode verwendet die SWFObject-Bibliothek [1]. Folgt man der zugehörigen Anleitung, kann man Flash-Anwendungen unabhängig von den aktuellen JavaScript-Einstellungen auf einer HTML-Seite plazieren - mit JavaScript stehen jedoch mehr Funktionen zur Verfügung als ohne.

Soll die Flash-Anwendung die gesamte verfügbare Fläche im Browser-Fenster einnehmen, kann SWFObject mit swffit [2] kombiniert werden - in diesem Fall muß JavaScript jedoch unbedingt aktiviert sein.

SWFObject im Einsatz

SWFObject unterscheidet zwei Vorgehensweisen bei der Integration von Flash-Anwendungen: eine "statische" und eine "dynamische". Für die "dynamische" Methode muß JavaScript zwingend aktiviert sein, die "statische" Methode kommt zur Not auch ohne JavaScript aus.

Die "statische" Methode

Für die "statische" Methode wird die SWF-Datei zunächst einmal fast "wie gewohnt" (allerdings mit einer zusätzlichen, frei wählbaren "Id" für die <object>-Direktive) in das HTML-Dokument integriert - was wie folgt aussehen könnte:

<object id="PreloaderDemo" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  width="320" height="120">
  <param name="movie" value="PreloaderDemo.swf" />
  <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="PreloaderDemo.swf" width="320" height="120">
  <!--<![endif]-->
    <img style="width: 320px; height: 120px;"
      alt="Bitte installieren Sie das Flash-PlugIn..."
      title="Bitte installieren Sie das Flash-PlugIn..."
    src="PreloaderDisplay.jpg">
  <!--[if !IE]>-->
    </object>
  <!--<![endif]-->
</object>

(Diese Vorgehensweise kommt noch ganz ohne SWFObject aus, man beachte aber das "id"-Attribut in der ersten Zeile)

Als nächstes wird im Kopfbereich des Dokumentes die Datei "swfobject.js" eingebunden und SWFObject auf die Flash-Datei aufmerksam gemacht:

<head>
  ...
  <script type="text/javascript" src="swfobject.js"></script>
  <script type="text/javascript">
    swfobject.registerObject("PreloaderDemo", "9.0", "expressInstall.swf");
  </script>
</head>

Sollte JavaScript deaktiviert sein, greifen die <object>-Direktiven (so gut es eben geht). Mit aktiviertem JavaScript ist SWFObject jedoch in der Lage, die Version eines evtl. bereits installierten Flash-Plugin zu überprüfen und den Benutzer ggfs.um eine Aktualisierung zu bitten.

Bei Bedarf können der Flash-/Flex-Anwendung zusätzliche Parameter übergeben werden, Details entnehmen Sie bitte der Dokumentation zu [1].

Die "dynamische" Methode

Die "dynamische" Methode geht davon aus, daß an der Stelle, an der später die Flash-Anwendung erscheinen soll, zunächst einmal nur der "alternative Inhalt" plaziert wird - ohne irgendeinen Hinweis auf die zu integrierende Flash-Datei. Stattdessen wird der alternative Inhalt in einen <div>-Abschnitt mit (frei wählbarer) Id eingeschlossen, und SWFObject im Kopfbereich des HTML-Dokumentes angewiesen, diesen Abschnitt durch die Flash-Anwendung zu ersetzen.

Das schöne an dieser Vorgehensweise ist, daß innerhalb des Dokumentes keinerlei unschöne <object>- oder <embed>-Direktiven erscheinen - wer (wie der Autor) einen WYSIWYG-Editor wie z.B. KompoZer [4] einsetzt, kann ein Lied davon singen, wie schwer sich manche Editoren mit solchen Direktiven tun.

Alle Details zu der einzubettenden SWF-Datei stehen als JavaScript-Anweisungen in einem <script>-Element innerhalb des Dokumentenkopfes - daran erkennt man auch schon, daß der Benutzer zwingend JavaScript aktiviert haben muß, um mehr als nur den alternativen Inhalt zu sehen.

Der Kopfbereich des Dokumentes könnte demnach wie folgt aussehen:

<head>
  ...
  <script type="text/javascript" src="swfobject.js"></script>
  <script type="text/javascript">
    swfobject.embedSWF("PreloaderDemo.swf", "PreloaderDemo", "320", "120", "9.0");
  </script>
</head>

während innerhalb des Dokumentes z.B. folgende Zeilen auftauchen würden:

<div style="text-align: center;">
  <div id="PreloaderDemo">
    <img style="width: 320px; height: 120px;"
      alt="Bitte installieren Sie das Flash-PlugIn..."
      title="Bitte installieren Sie das Flash-PlugIn..."
    src="PreloaderDisplay.jpg">
  </div>
</div>

(die tatsächlichen Texte für die "alt"- und "title"-Attribute wurden der Einfachheit halber gekürzt)

Man beachte, daß die zu ersetzende <div>-Direktive außer dem "id"-Attribut keine weiteren Attribute enthalten sollte (weil diese bei der Ersetzung nicht erhalten bleiben). Stattdessen empfiehlt es sich, das zu ersetzende <div>-Element mit einem weiteren <div>-Element zu umgeben, welches die gewünschten Formatierungsattribute enthält.

Auch diese Methode erlaubt die Übergabe von Parametern an die Flash-/Flex-Anwendung, Details entnehmen Sie bitte der Dokumentation zu [1].

Literaturhinweise

[1]	Bobby van der Sluis et al. <swfobject> (siehe http://code.google.com/p/swfobject/) Die Verwendung von SWFObject ist die derzeit (selbst von Adobe) empfohlene Methode, eine Flash- oder Flex-Anwendung in möglichst Plattform-, Browser- und Einstellungs-unabhängiger Form in ein HTML-Dokument zu integrieren.
[2]	Miller Medeiros swffit - Smart Flash Resize Script (siehe http://swffit.millermedeiros.com/) In Verbindung mit SWFObject [1] ermöglicht es swffit einer Flash- oder Flex-Anwendung, (unabhängig von der eingesetzten Plattform und vom verwendeten Browser) automatisch die gesamte verfügbare Fläche in einem Browser-Fenster einzunehmen.
[3]	Stefan Münz et al. SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) (siehe http://de.selfhtml.org/) SELFHTML ist wohl immer noch das deutschsprachige Standardwerk zu HTML schlechthin - und trotz seines enormen Umfanges sogar kostenlos!
[4]	(diverse) KompoZer (siehe http://www.nvu-composer.de/) Der "KompoZer" ist ein kostenloser Editor für die Bearbeitung von HTML-Dokumenten im WYSIWYG-Modus, verfügbar für Windows, Linux und MacOS X. Trotz seiner Macken läßt sich damit leidlich arbeiten - so sind auch die vorliegenden Web-Seiten des Autors mit KompoZer entstanden.


http://www.Rozek.de/Flex/Integration_de.html	Stand: 04.11.2009