Wichtiger Hinweis: Für dieses Tutorial ist die Flash-Video-Erweiterung für Dreamweaver erforderlich im Flash Video Kit enthalten . Für den Erwerb des Kits stehen zwei Möglichkeiten zur Auswahl:

Das Kit beim Kauf von oder Upgrade auf Studio MX 2004 mit Flash Professional kostenlos erhalten ›

Macromedia Extension Manager v1.6.062

Download

Dreamweaver MX 2004 7.0.1-Update

Update für Windows herunterladen EXE-Datei, 20,1 MB
Update für Macintosh herunterladen HQX-Datei, 22,7 MB
Für Benutzer der Testversion: Mit dieser Aktualisierung den Testzeitraum verlängern.

Hinweis: Das Update überschreibt die installierte MX 2004-Programmversion.

Mit der Macromedia Flash Video-Erweiterung für Dreamweaver MX 2004 können Sie mühelos Flash-Video-Dateien (FLV) in Websites einfügen. Dies ist besonders für Dreamweaver-Benutzer interessant, die nicht mit Flash vertraut sind, da mit dieser Erweiterung FLV-Dateien auch ohne das Flash-Authoring-Tool in Webseiten eingefügt werden können.

Dabei können verschiedene Wiedergabe-Controller verwendet werden, mit denen Besucher die FLV-Datei auf der Webseite steuern können. Videos können zudem als progressive Downloads, als Streams oder über einen gehosteten Streaming-Dienst bereitgestellt werden.

Vorschau der Vorlagen-Site "Tour the Farm" ›

In diesem Artikel wird erläutert, wie Sie mithilfe von Dreamweaver und einer Vorlagen-Website FLV-Dateien in Ihrer Website einfügen und anzeigen können. Die Flash-Video-Erweiterung enthält einen Assistenten, mit dem Sie mühelos eine Vorschau von Skins anzeigen sowie Optionen für die Wiedergabe festlegen können. Obwohl der zugehörige Code automatisch in die Webseite eingefügt wird, stehen viele Optionen zur Verfügung, mit denen Sie das Endergebnis an Ihre Anforderungen anpassen können. Die Flash-Video-Erweiterung stellt nicht die einzige Möglichkeit für das Anzeigen von FLV-Dateien im Web dar, aber mit dieser Erweiterung gelingt die Einbindung von FLV-Dateien schnell und problemlos.

Anpassen von Video-Controllern

Informationen zum Anpassen von Wiedergabe-Controllern mit Flash MX Professional 2004 finden Sie im zugehörigen, nachfolgenden Artikel: "Erstellen von benutzerdefinierten Flash-Video-Controller-Skins."

Erste Schritte

Um die Schritte in diesem Tutorial nachzuvollziehen, müssen Sie die Flash-Video-Erweiterung installieren und die Beispieldatei "farm.zip" herunterladen siehe Seite 1 .

Installieren der Flash-Video-Erweiterung

Zum Installieren der Flash-Video-Erweiterung für Dreamweaver benötigen Sie Macromedia Extension Manager.

Vor dem Installieren der Erweiterung müssen Sie Dreamweaver schließen. Für die Installation der Flash-Video-Erweiterung stehen zwei Möglichkeiten zur Verfügung:

Doppelklicken Sie auf die Datei "flashvideo.mxp" auf der Festplatte, um Extension Manager zu starten und die Erweiterung automatisch installieren zu lassen.
Klicken Sie im Extension Manager auf "Datei > Erweiterung installieren". Suchen Sie die Erweiterung auf der Festplatte, und klicken Sie auf "Installieren".

Starten Sie nach dem Installieren der Flash-Video-Erweiterung den Extension Manager. Die Flash-Video-Erweiterung sollte jetzt in Extension Manager angezeigt werden. Wenn dies nicht der Fall ist, überprüfen Sie, ob im Popup-Menü am oberen Rand des Programmfensters in der Liste der installierten Programme "Dreamweaver MX 2004" ausgewählt ist. Nach dem Abschluss der Installation können Sie Dreamweaver starten und die neue Erweiterung verwenden.

Die Vorlagen-Website

Laden Sie, falls Sie das noch nicht getan haben, die Beispieldatei farm.zip herunter, und extrahieren Sie diese in einem neuen Ordner auf dem Desktop namens farmsite. Die ZIP-Datei enthält eine komplette Dreamweaver-Vorlagen-Website mit passenden Flash-Video-Dateien FLV .

Die in diesem Tutorial verwendete Website-Template hat einen ausgesprochen "ländlichen" Charakter. Die Farm-Website besteht aus neun Ordnern, sieben Vorlagen, einer Reihe von statischen HTML-Seiten und einer CSS-Datei siehe Abbildung 1 .

In der Website sollen Bilder und Videos zu sechs Nutztierarten angezeigt werden. Für jede Tierart wurde ein eigener Unterordner angelegt, in dem die HTML-Seiten für diese Tierart gespeichert werden. So werden beispielsweise Seiten, in denen Bilder und Videos zu Hühnern vorkommen, im Ordner "chickens" gespeichert. In den letzten drei Ordnern images, videos und Templates werden die Bilder, Videos und Vorlagen für die gesamte Farm-Website abgelegt.

Abbildung 1: Die Farm-Website verfügt über eine intuitive Ordner-Struktur.

Das Layout der Website umfasst drei Spalten: die linke Spalte enthält die Site-Navigation, und in der mittleren Spalte werden die Inhalte (Text, Bilder und Videos) angezeigt. In der rechten Spalte werden Vorlagen verschachtelt, um Vorschaubilder für die Videos und statischen Bilder von Tieren anzuzeigen (siehe Abbildung 2).

Abbildung 2: Das Seitenlayout ist einfach gehalten und enthält bereits Vorschaubilder für die später eingebetteten Videos.

Durch die Verwendung von verschachtelten Vorlagen können Sie problemlos neue Seiten in der Website einfügen und automatisch Navigationselemente für diesen Bereich erstellen lassen. Änderungen an den Vorlagen für die einzelnen Tierarten wirken sich automatisch auf alle Dateien aus, in denen die betreffende Vorlage verwendet wird. Wenn Sie also z. B. die Navigation in der Vorlage für Hühner ändern möchten, werden automatisch alle Dateien aktualisiert, die auf dieser Vorlage basieren.

Einbetten von Flash-Videos in einer Webseite

In dieser Übung wird in mehreren einfachen Schritten eine FLV-Datei mit einem Controller in eine vorgegebene Webseite eingefügt. In der Flash-Beispiel-Farm-Website können Sie sich eine fertige Version der Seite ansehen.

Beim Einfügen und Anzeigen von FLV-Dateien in HTML-Dokumenten mit der Flash-Video-Erweiterung haben Sie drei Möglichkeiten:

Progressive Download Video: Bei Auswahl dieses Videotyps wird das Video auf die Festplatte des Benutzers heruntergeladen, die Wiedergabe wird jedoch bereits vor dem Abschluss des Downloads gestartet. Das Video wird dabei vollständig heruntergeladen, sofern der Benutzer die Verbindung nicht vorzeitig beendet. Zum Anzeigen des Videos ist Flash Player 6 r65 oder höher erforderlich.
Streaming Video: Bei Auswahl dieser Option wird das Video nach einer kurzen Pufferung wiedergegeben. Dabei wird anfangs nur die Menge an Daten heruntergeladen, die für eine unterbrechungsfreie Wiedergabe erforderlich ist. Diese Methode können Sie nur verwenden, wenn Sie über Macromedia Flash Communication Server verfügen. Zum Anzeigen des Videos ist Flash Player 6 oder höher erforderlich. Weitere Informationen zu Streaming-Video finden Sie im Video-Einführungsleitfaden.
Flash Video Streaming Service Lite FVSS : Mit diesem Dienst können Sie FLV-Dateien über einen gehosteten Dienst streamen. In diesem Fall ist Flash Communication Server nicht erforderlich, Sie müssen jedoch über ein FVSS-Konto verfügen. Zum Anzeigen des Videos ist Flash Player 6 oder höher erforderlich.

Weitere Informationen zur Verwendung von Videos im Internet finden Sie im Video-Einführungsleitfaden.

Abhängig vom ausgewählten Videotyp können die folgenden Schritte leicht variieren. Verwenden Sie für dieses Tutorial die Option "Progressive Download Video" zur Anzeige der Videodateien.

Starten Sie Dreamweaver MX 2004. Klicken Sie auf "Datei > Öffnen" und wählen Sie im Ordner chickens die Datei video01.html.
Setzen Sie in der Entwurfsansicht oder der geteilten Ansicht den Cursor in den bearbeitbaren Bereich, und löschen Sie den vorhandenen Text.
Klicken Sie auf "Einfügen > Medien > Flash Video", um die Flash-Video-Erweiterung aufzurufen.
Wählen Sie im Popup-Menü für den Videotyp die Option "Progressive Download Video". Im Flash-Video-Dialogfeld werden daraufhin diese Optionen angezeigt:
- URL: Gibt den URL der FLV-Datei an, die im HTML-Dokument eingebettet werden soll.
- Skin: Gibt den URL des verwendeten Skins an.
- Width: Gibt die Breite des Flash-Videos an.
- Height: Gibt die Höhe des Flash-Videos an.
- Constrain: Bei Auswahl dieser Option bleibt das aktuelle Höhen-/Breitenverhältnis beim Ändern der Höhe oder der Breite des Video erhalten.
- Detect Size: Wenn Sie auf diese Schaltfläche klicken, wird die Größe des Flash-Videos automatisch ermittelt, und die Textfelder für die Höhe und Breite werden mit den ermittelten Werten ausgefüllt.
- Auto play: Gibt an, ob das Video beim Aufrufen der Webseite automatisch wiedergegeben werden soll.
- Auto rewind: Gibt an, ob die Wiedergabesteuerung nach der Wiedergabe des Videos automatisch an den Anfangspunkt zurückgesetzt werden soll.

Abbildung 3: Optionen im Flash-Video-Dialogfeld.

Klicken Sie neben dem Feld "URL" auf die Schaltfläche "Browse". Wechseln Sie zum Verzeichnis mit der Farm-Website auf der Festplatte, wählen Sie im Ordner videos die Datei chicken01.flv, und klicken Sie dann auf "OK".
Wählen Sie im Popup-Menü "Skin" einen Skin. Wählen Sie für dieses Tutorial die Option Clear Skin 3. Im Bereich unter dem Popup-Menü "Skin" wird eine kleine Vorschau des entsprechenden Controllers angezeigt. Klicken Sie auf die Schaltfläche "Detect Size", um die Breite und Höhe der aktuellen FLV-Datei zu ermitteln und die Textfelder für die Größe automatisch ausfüllen zu lassen.

Abbildung 4: Bei diesem Video-Controller wird der Skin "Clear Skin 3" verwendet.

Wenn das Video sofort nach dem Laden der Webseite gestartet werden soll, aktivieren Sie das Kontrollkästchen "Auto play". Wenn das Video nach dem Abspielen an den Anfangspunkt zurückgesetzt werden soll, müssen Sie zudem das Kontrollkästchen "Auto rewind" aktivieren.
Klicken Sie auf "OK", um die Einstellungen zu übernehmen. Dreamweaver erzeugt den Code für das Einbetten des Videos und fügt diesen in die Webseite ein. Beim Einbetten einer FLV-Datei und des zugehörigen Players werden 11 Zeilen HTML-Code hinzugefügt, mit denen die Flash-Video-Erweiterung entsprechend den ausgewählten Optionen konfiguriert wird.

Auf Grundlage der im Rahmen dieses Tutorials festgelegten Einstellungen wird von Dreamweaver der folgende Code im HTML-Dokument eingefügt:

          <!-- Begin Flash Video for Progressive download -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="320" height="240" id="FLVPlayer">
  <param name="movie" value="FLVPlayer_Progressive.swf" />
  <param name="salign" value="lt" />
  <param name="quality" value="high" />
  <param name="scale" value="noscale" />
  <param name="FlashVars" value="&skinName=clearSkin_3&streamName= ../videos/chicken01&autoPlay=false&autoRewind=false" />
  <embed src="FLVPlayer_Progressive.swf" flashvars="&skinName=clearSkin_3&streamName= ../videos/chicken01&autoPlay=false&autoRewind=false" quality="high" scale="noscale" width="320" height="240" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<!-- saved from url=(0013)about:internet -->
<!-- End Flash Video for Progressive Download -->


    

Die im Assistenten angegebenen Parameter werden in den oben stehenden HTML-Code eingefügt und im Attribut "FlashVars" an Flash übergeben. Der Skin clearSkin_3 wird in denselben Ordner wie die aktuelle HTML-Datei kopiert (im HTML-Code wird die Dateierweiterung .swf jedoch ausgelassen). Der zweite Parameter, streamName, verweist auf die FLV-Datei, die Sie im Textfeld "URL" definiert haben. Der Pfad wird relativ angegeben (hier wird ebenfalls die Dateierweiterung, in diesem Fall ".flv", ausgelassen).

Bei den nächsten beiden Parametern handelt es sich um Boolesche Werte (true/false), die auf Grundlage der Einstellungen im Assistenten eingefügt werden. Wenn Sie den Skin oder den Pfad zur FLV-Datei ändern möchten, können Sie diese Werte direkt im Bedienfeld "Code" von Dreamweaver bearbeiten. Unter Umständen müssen Sie auch die Werte für die Breite und Höhe in den Tags param und embed bearbeiten. Diese Werte geben die Breite und Höhe des Flash-Video-Dokuments an. Bei Standard-Skins oder benutzerdefinierten Skins, die einen Rahmen enthalten und größer als das eigentliche Flash-Video sind, müssen Sie ggf. diese Werte manuell nachbearbeiten.

Sie haben sicher bemerkt, dass die Werte zwei Mal vorkommen. Damit der Code sowohl in Internet Explorer als auch in Netscape funktioniert, müssen die FlashVars-Werte sowohl in einem param-Tag als auch in einem embed-Tag angegeben werden.

Hinweis: Die eigentliche SWF-Datei, die für die Steuerung der Flash-Video-Erweiterung benötigt wird, ist abhängig von der ausgewählten Bereitstellungsmethode (progressiver Download oder Streaming) nur 10 KB bis 12 KB groß. Bei Verwendung eines der Standard-Skins kommen noch einmal etwa 4 KB bis 11 KB hinzu.

Weiterführende Informationen

In diesem Tutorial wird gezeigt, wie einfach Sie mithilfe von Dreamweaver und der Flash-Video-Erweiterung Videos in Webseiten einfügen können. Mit wenigen Mausklicks können Sie so unter Verwendung eines Standard-Skins eine FLV-Datei einbetten.

Wenn Sie Flash MX 2004 besitzen, können Sie auch eigene, an das Aussehen Ihrer Website angepasste Skins erstellen siehe "Erstellen von benutzerdefinierten Video-Skins für die Flash-Video-Erweiterung für Dreamweaver MX 2004" .

Mit etwas Kreativität können Sie mit der Flash-Video-Erweiterung so beeindruckende Skins und Projekte erstellen.

Weitere Informationen finden Sie auf der Flash-Video-Website.
Informationen zum Einbinden von Flash-Video in Websites mithilfe von Flash finden Sie in Mike Downeys Artikel Erste Schritte mit Flash-Video.
Weitere Informationen zum FLV-Player enthält Peldis Website.
Informationen zu Flash Video und Flash finden Sie auch in der Flash-Video-Einführung.
Flash-Video-Vorlagen finden Sie in der Flash-Video-Vorlagen-Website.
Fragen zu Flash und Video können Sie mit der Flash-Video-Community im Forum diskutieren.

Flash User Forum

04/23/2012	Auto-Save and Auto-Recovery
04/23/2012	Open hyperlinks in new window/tab/pop-up ?
04/21/2012	PNG transparencies glitched
04/01/2010	Workaround for JSFL shape selection bug?

Flash Cookbooks

02/13/2012	Randomize an array
02/11/2012	How to create a Facebook fan page with Flash
02/08/2012	Digital Clock
01/18/2012	Recording webcam video & audio in a flv file on local drive

AdAuswahl