FLVPlayback-Komponente anpassen

Zusätzliche Anforderungen

Macromedia Flash Professional 8

Tutorials und Beispieldateien:

Beim Lesen dieses Artikels empfiehlt es sich, die Skin-Anpassungen anhand einer funktionsfähigen FLV-Datei (Flash Video) zu testen. Wenn Sie keine FLV-Datei zur Hand haben, können Sie die folgende URL in der Eigenschaft contentPath der FLVPlayback-Komponente verwenden.

• water.flv (FLV, 378 KB)

Eines der aktualisierten Funktionsmerkmale in Flash Professional 8 ist die neue FLVPlayback-Komponente für Flash Video. Dadurch steht jetzt die lang erwartete Flash Video-Komponente mit grafischer Flexibilität zur Verfügung. Die FLVPlayback-Komponente bietet eine erweiterte ActionScript-API sowie mehrere Möglichkeiten zum grafischen Anpassen und Skinning.

In diesem Artikel werden drei Verfahren beschrieben, mit denen die FLVPlayback-Komponente mit einer Skin versehen werden kann:

• Auswahl von vordefinierten Skins im Dialogfeld Skin auswählen
• Verwenden der "Custom UI"-Komponenten für FLVPlayback zum Kombinieren und Erstellen von benutzerdefinierten Steuerelementen
• Erstellen von eigenen vordefinierten Skins

Die neue FLVPlayback-Komponente kann mit zahlreichen Funktionsmerkmalen aufwarten. Bei der Arbeit mit der FLVPlayback-Komponente wird Ihnen auffallen, dass sie über mehrere Skin-Stile verfügt. Skin-SWF-Dateien bestehen aus vordefinierten Steuerelementen, mit der die FLVPlayback-Komponente Video während der Wiedergabe steuern kann. Im Dialogfeld Skin auswählen stehen verschiedene Darstellungs- und Steuerungskombinationen zur Auswahl (siehe Abbildung 1).

Die Auswahl einer vordefinierten Skin ist die einfachste Methode, um die Darstellung des Video-Players zu ändern. Sie müssen lediglich das Dialogfeld öffnen und die gewünschte Skin im Vorschau-Browser auswählen. Den Rest erledigt Flash automatisch.

Dialogfeld "Skin auswählen" mit dem Befehl "Video importieren" öffnen

In Flash Professional 8 können Sie mit dem Befehl Video importieren der Bühne eine Videokomponente hinzufügen, ihr eine externe FLV-Datei zuweisen und die gewünschte Skin im Dialogfeld Skin auswählen wählen. Dieses einfache Verfahren eignet sich besonders für neue Flash-Benutzer und für einen schnellen Arbeitsablauf. Sie können dieses Verfahren verwenden, wenn Sie der Bühne die Videokomponente anfänglich hinzufügen. Anschließend ändern Sie die Skin-Option im Komponenteninspektor.

Dies sind die Schritte zum Zuweisen einer Skin mit dem Befehl Video importieren:

1. Erstellen Sie in Flash Professional 8 eine neue Flash-Datei, und speichern Sie sie in einem Verzeichnis relativ zur FLV-Datei.
2. Wählen Sie im Hauptmenü Datei > Importieren > Video importieren. Das Dialogfeld Video importieren wird geöffnet.
3. Navigieren Sie im Bildschirm Video auswählen zum Pfad der FLV-Datei, die Sie anzeigen möchten. Klicken Sie auf Weiter, um den nächsten Bildschirm aufzurufen.
4. Wählen Sie im Bildschirm Bereitstellung die Option Von einem Webserver progressiv herunterladen, es sei denn, Sie laden die FLV-Datei im Streaming-Verfahren von Flash Media Server herunter. Wählen Sie in diesem Fall eine der Streaming-Optionen aus. Klicken Sie auf Weiter, um den nächsten Bildschirm aufzurufen.
5. Wählen Sie im Bildschirm Skinning eine Skin im Popupmenü aus, um sie in der Vorschau anzuzeigen. Dieser Bildschirm entspricht dem in Abbildung 1 gezeigten Dialogfeld Skin auswählen. Klicken Sie auf Weiter, um den nächsten Bildschirm aufzurufen.
6. Überprüfen Sie im Bildschirm Videoimport fertig stellen Ihre Einstellungen, und klicken Sie dann auf Beenden, um den Assistenten abzuschließen. Sie sehen, dass der Bühne eine FLVPlayback-Komponente hinzugefügt wurde. Ihre Größe wird an die FLV-Datei angepasst, die Sie in Schritt 3 ausgewählt haben.

   Hinweis: Die FLVPlayback-Komponente verwendet in der FLV-Datei eingebettete Metadaten, um ihre Größe selbst anzupassen. Diese Metadaten sind in älteren FLV-Dateien möglicherweise nicht enthalten. In diesem Fall kann die Komponente ihre Größe nicht selbst anpassen. Optimale Ergebnisse erzielen Sie, wenn Sie den Flash 8 Video Encoder verwenden, um die Quelldatei neu im FLV-Format zu kodieren. Wenn die Quelldatei nicht verfügbar ist, können Sie auch ein FLV-Metadaten-Dienstprogramm verwenden wie FLV MetaData Injector , um die Informationen einzubetten und das Problem so zu umgehen.

7. Klicken Sie auf die Instanz, um sie auszuwählen. Öffnen Sie dann den Komponenteninspektor, um die Komponentenparameter zu sehen, die vom Befehl Video importieren hinzugefügt wurden. Die Eigenschaft contentPath enthält die URL des Videos und die Eigenschaft skin den Namen der Skin-SWF-Datei, die Sie in Schritt 5 ausgewählt haben. Sie können die Skin jetzt manuell ändern, indem Sie einfach den Skin-Parameter im Komponenteninspektor ändern.
8. Exportieren Sie den Film, um die Ergebnisse zu sehen.

Dialogfeld "Skin auswählen" mit dem Komponenteninspektor öffnen

Nachdem Sie eine FLVPlayback-Komponente auf der Bühne platziert haben, können Sie die ausgewählte Skin und verschiedene andere Parameter mit dem Komponenteninspektor ändern. Sie können die Skin so oft wie nötig ändern.

Die folgenden Schritte bauen auf der vorigen Übung auf und zeigen, wie Sie mit dem Komponenteninspektor eine Skin zuweisen oder ändern:

1. Wählen Sie die FLVPlayback-Instanz aus, und klicken Sie in der Parameterliste des Komponenteninspektors auf die Eigenschaft skin, um sie auszuwählen. Klicken Sie dann noch einmal, um das Dialogfeld zu öffnen. Das Dialogfeld Skin auswählen wird geöffnet.
2. Klicken Sie auf das Popupmenü für Skins, um eine Skin-SWF-Datei auszuwählen und in der Vorschau anzuzeigen. Klicken Sie abschließend auf OK.
3. Wenn Sie Änderungen vornehmen, sollte die Live-Vorschau der Komponente entsprechend aktualisiert werden.

Skin-SWF-Funktionalität deaktivieren

Wahrscheinlich möchten Sie die Standard-Skin der FLVPlayback-Komponente hin und wieder deaktivieren, damit Sie eigene Steuerelemente hinzufügen, eigene Benutzeroberflächenkomponenten verwenden oder die Komponente vollständig mit ActionScript steuern können siehe Artikel Flash-Videos mit den FLVPlayback-Verhalten steuern . Im Folgenden wird beschrieben, wie Sie die Skin-SWF-Funktionalität deaktivieren:

1. Wählen Sie die FLVPlayback-Instanz aus, und doppelklicken Sie in der Parameterliste des Komponenteninspektors auf die Eigenschaft skin. Das Dialogfeld Skin auswählen wird geöffnet.
2. Wählen Sie im Popupmenü für die Skin die Option Keine, und klicken Sie auf OK, um das Dialogfeld zu schließen.
3. Die Live-Vorschau sollte nun ohne die Steuerelemente aktualisiert werden.

Tipp: Sie können die Eigenschaft skinAutoHide der FLVPlayback-Komponente im Komponenteninspektor auf true einstellen, um die Steuerelemente auszublenden, bis der Cursor sich auf dem Video befindet. Diese Eigenschaft wird nur angewendet, wenn die Skin-SWF-Funktionalität verwendet wird.

Beachten Sie, dass die vordefinierten Skin-SWF-Dateien nicht direkt geändert werden können. Deshalb bietet die Verwendung dieser Dateien weniger Flexibilität als die beiden anderen Optionen zum Skinning der FLVPlayback-Komponente. Die vordefinierten Dateien bieten jedoch den Vorteil, dass sie keine Entwicklungszeit erfordern und auch ohne Flash-Bearbeitungskenntnisse eingesetzt werden können.

Zu den neuen überzeugenden Funktionsmerkmalen der FLVPlayback-Komponente gehören die Komponenten der Kategorie "FLV Playback Custom UI". Wahrscheinlich sind Ihnen die beiden neuen Kategorien im Bedienfeld Komponenten bereits aufgefallen (siehe Abbildung 2).

Die Komponenten der Kategorie "FLV Playback Custom UI" sind individuelle Videosteuerungen, die mit einer FLVPlayback-Instanz verknüpft werden können. Diese Komponenten können beliebig kombiniert, überall auf dem Bildschirm platziert und wie standardmäßige Movieclip-Symbole bearbeitet werden.

Flash 8 bietet die folgenden Steuerelemente:

Schaltflächen (Buttons):

• Back
• Forward
• Mute
• PlayPause (oder Play und Pause als einzelne Schaltflächen)
• Stop

Leisten (Bars):

• Buffering
• Seek
• Volume

Der allgemeine Ablauf bei der Verwendung der Komponenten "Custom UI" besteht aus folgenden Schritten: Eine Instanz wird der Bühne hinzugefügt und benannt, und anschließend wird der Instanzname über eine Zuweisungseigenschaft mit der Videokomponente verknüpft. Nachdem die Komponente "Custom UI" mit einer FLVPlayback-Instanz verknüpft wurde, übernimmt die Komponente automatisch die Funktionalität, die aus ihrem Namen hervorgeht. Dazu muss kein weiterer Code erstellt werden.

Komponente "Custom UI" einer FLVPlayback-Instanz hinzufügen

Führen Sie die folgenden Schritte aus, um einer FLVPlayback-Instanz eine Komponente "Custom UI" hinzuzufügen:

1. Erstellen Sie in Flash Professional 8 eine FLA-Datei, und ziehen Sie eine Instanz der FLVPlayback-Komponente aus dem Bedienfeld Komponenten auf die Bühne. Wählen Sie die FLVPlayback-Instanz aus, und weisen Sie ihr im Eigenschafteninspektor einen Instanznamen zu, wie beispielsweise flvPlayback.
2. Speichern Sie die Datei, und exportieren Sie die SWF-Datei.
3. Wählen Sie die Komponente aus, und stellen Sie sicher, dass die Eigenschaft skin im Komponenteninspektor auf None eingestellt ist. (Der Skin-Parameter im Komponenteninspektor wird im folgenden Abschnitt beschrieben.) Sie können eine Skin-SWF-Datei und Komponenten "Custom UI" zuweisen, dies wird jedoch nur empfohlen, wenn konkret beabsichtigt.
4. Nun können Sie der Bühne zusätzlich zur FLVPlayback-Instanz Komponenten "Custom UI" hinzufügen. Die Komponenten können beliebig angeordnet werden. Nennen Sie die Instanz beispielsweise mySeekBar.
5. Als praktisches Beispiel setzen wir den Fall, dass Sie einer FLVPlayback-Instanz eine Suchleiste hinzufügen möchten, wobei die Eigenschaft skin auf None eingestellt ist. Dazu ziehen Sie eine SeekBar-Komponente aus dem Bedienfeld Komponenten auf die Bühne. Positionieren Sie die Komponente wie gewünscht. Im Allgemeinen sind die Komponenten "Custom UI" nicht für die Skalierung auf der Bühne vorgesehen. Sie sollten die Komponenteninstanzen deshalb nach Möglichkeit nicht skalieren, sondern stattdessen die Größe der Grafiken innerhalb der Movieclip-Symbole in der Bibliothek ändern. Die Suchleiste wird jedoch auch dann korrekt angezeigt, wenn Sie sie horizontal skalieren. Justieren Sie die Breite der FLVPlayback-Instanz mit dem Werkzeug Frei transformieren oder mit dem Befehl zur Größenanpassung im Bedienfeld Ausrichten (siehe Abbildung 3).

6. Öffnen Sie das Bedienfeld Bibliothek. Sie sehen, dass zur SeekBar-Instanz mehrere Skin-Symbole gehören, die in einem Ordner namens FLV Playback Skins gespeichert sind. Sie können den Bearbeitungsmodus für die einzelnen Movieclips entweder über die jeweiligen Instanzen auf der Bühne oder über die Symbole in der Bibliothek aufrufen (siehe Abbildung 4).

7. Im letzten Schritt muss die SeekBar-Instanz mit der FLVPlayback-Instanz verknüpft werden. Fügen Sie dazu der Zeitleiste, die die Videokomponenten enthält, eine neue Ebene namens Aktionen hinzu. Wählen Sie die Ebene Aktionen aus, und öffnen Sie das Bedienfeld Aktionen. Geben Sie den folgenden Code ein. Ersetzen Sie dabei flvPlayback durch den Namen der FLVPlayback-Instanz und mySeekBar durch den Instanznamen der Suchleiste:

8. Exportieren Sie die SWF-Datei, um die Ergebnisse zu sehen.

Tipp: Wenn Sie eine SeekBar-Komponente mit einer älteren FLV-Datei verwenden, enthält die FLV-Datei möglicherweise nicht die Metadaten, die für die SeekBar-Komponente und die Prozentfunktionalität erforderlich sind. Sie können dieses Problem beheben, indem Sie manuell einen Wert für totalTime für die FLVPlayback-Parameter eingeben.

Grafiken für Komponenten "Custom UI" ändern

Die in den Komponenten "Custom UI" enthaltenen Grafiken können wie jedes Movieclip-Symbol bearbeitet werden. Rufen Sie die Zeitleiste des Movieclips auf, suchen Sie die gewünschte Grafik, und bearbeiten Sie sie nach Bedarf. Wichtig ist dabei, dass keine Änderungen an den angegebenen Instanznamen oder der Dateistruktur vorgenommen werden.

Aufbauend auf den Schritten der letzten Übung wird im Folgenden beschrieben, wie Sie die Grafiken für die Suchleiste ändern:

1. Doppelklicken Sie auf die SeekBar-Instanz auf der Bühne, um den Bearbeitungsmodus aufzurufen.
2. Sperren Sie alle Ebenen mit Ausnahme der Ebene progress, und doppelklicken Sie auf die Fortschrittsleiste, um den Bearbeitungsmodus aufzurufen. Wählen Sie die Farbverlaufsfüllung auf der Bühne aus, und ändern Sie die Farbe mit dem Farbfeld Füllung in der Symbolleiste (wählen Sie beispielsweise einen Blauton oder eine Verlaufsfüllung mit einer anderen Farbe aus).
3. Klicken Sie auf die SeekBar-Schaltfläche in der Bearbeitungsleiste, um zur SeekBar-Zeitleiste zurückzukehren (siehe Abbildung 5).

4. In Abbildung 5 enthält Bild 2 der Zeitleiste ein einzelnes Schlüsselbild. Die Zeitleiste wird nie bis zu Bild 2 abgespielt, doch in einigen Fällen werden hier Grafiken gespeichert, um sicherzustellen, dass die Symbole mit der Datei exportiert werden und für ActionScript-Code zur Verfügung stehen. Entsperren Sie die Ebene assets, rufen Sie Bild 2 auf, und bearbeiten Sie die Grafik des Griffs auf der Bühne. Doppelklicken Sie auf die Grafik, um den Bearbeitungsmodus aufzurufen. Ändern Sie die Grafik auf Ebene 1 wie gewünscht. Beachten Sie, dass die Ebene hitBG eine unsichtbare Grafik enthält, die einen aktiven Bereich für den Griff erstellt.
5. Klicken Sie auf die SeekBar-Schaltfläche in der Bearbeitungsleiste, um zur SeekBar-Zeitleiste zurückzukehren. Sie können die Bearbeitung von hier aus fortsetzen. Die Ebene script enthält Code, der die Einstellungen für das Steuerelement relativ zur FLVPlayback-Instanz anpasst. Sie müssen diesen Code nur ändern, wenn Sie Größe und Form der Grafiken anpassen.

Dasselbe Verfahren kann für alle Komponenten in der Kategorie "Custom UI" verwendet werden. Anleitungen zu komplexeren Anpassungen finden Sie in den unten genannten Hilferessourcen.

Details der Komponenten "Custom UI"

Wenn Sie sich die Movieclips der einzelnen Komponenten genauer ansehen, werden Sie feststellen, dass diese Movieclips etwas unterschiedlich gestaltet sind. Ausführliche Details zu den verschiedenen Komponententypen finden Sie im folgenden Abschnitt der Flash 8-Hilfe:

Komponenten-Referenzhandbuch > FLVPlayback-Komponente > FLVPlayback-Komponente anpassen > Skins für FLV Playback Custom UI-Komponenten separat zuweisen

Weitere ActionScript-Eigenschaften für das Skinning von FLVPlayback-Komponenten

Das folgende Codebeispiel zeigt alle verfügbaren Skin-Zuweisungseigenschaften der FLVPlayback-Komponente. In diesem Beispiel lautet der Instanzname der Komponente flvPlayback, und die Werte nach dem Zuweisungsoperator (=) sind die Instanznamen der Komponenten "Custom UI" auf der Bühne:

Beachten Sie, dass die PlayPauseButton-Komponente oder eine PlayButton- und eine PauseButton-Komponente verwendet wird. Die PlayPauseButton-Komponente bewirkt, dass der Schaltflächenstatus umgeschaltet wird, während es sich bei den PlayButton- und PauseButton-Komponenten um separate Schaltflächen handelt. Im obigen Codebeispiel werden alle Skin-Eigenschaften zu Referenzzwecken gezeigt.

Sie können auch die Eigenschaft bufferingBarHidesAndDisablesOthers verwenden, um festzulegen, wie die Komponente die Skins relativ zur Zwischenspeichern-Leiste handhabt:

Dies kann nützlich sein, wenn Sie über einen großen Pufferspeicher verfügen und die Steuerelemente während des Video-Downloads deaktiviert werden müssen (normalerweise beim Streaming von Video von Flash Media Server). Standardmäßig ist diese Eigenschaft auf false eingestellt.

Beachten Sie, dass autoSkinHide eine weitere Skin-Eigenschaft ist, die sich jedoch nicht auf Komponenteninstanzen der Kategorie "FLV Playback Custom UI" auswirkt. Sie kann nur mit Skin-SWF-Dateien verwendet werden, wie bereits unter Vordefinierte Skin-SWF-Dateien verwendenbeschrieben.

Wie Sie bereits gesehen haben, können Sie das Dialogfeld Skin auswählen und die Skin-SWF-Funktionalität schnell und einfach verwenden. In diesem Abschnitt wird beschrieben, wie Sie eine benutzerdefinierte Skin-SWF-Datei erstellen.

Die Erstellung einer benutzerdefinierten Skin-SWF spart viel Zeit, da Sie vordefinierte, eigene Steuerelemente sowie ActionScript-Code für erweiterte Funktionsmerkmale kombinieren und das Dialogfeld Skin auswählen zum Anwenden der Skin benutzen. Eine Skin-SWF kann mit den neuen Skalierungsfunktionen für Movieclips von Flash 8 auch skaliert werden. Weitere Einzelheiten finden Sie in der Flash-Hilfe (Flash verwenden > Skalierung im 9-teiligen Segmentraster und Movieclip-Symbole).

Erste Schritte

Am einfachsten lässt sich eine neue Skin-SWF-Datei erstellen, indem Sie eine vorhandene Datei kopieren und ändern. Erstellen Sie zunächst eine Kopie einer der vordefinierten Skin-SWF-Dateien von Flash Professional 8. Die FLA-Dateien für die Standard-Skins befinden sich auf Ihrer Festplatte im Flash 8-Anwendungsordner unter <Sprache>\Configuration\SkinFLA.

Führen Sie zum Arbeitseinstieg die folgenden Schritte aus:

1. Wenn Flash Professional 8 installiert ist, navigieren Sie zum Flash 8-Anwendungsordner und dann zum Ordner <Sprache>\Configuration\SkinFLA.
2. Dieser Ordner enthält FLA-Dateien für die vordefinierten Skin-SWF-Dateien (siehe Abbildung 6). Wählen Sie eine Skin aus, die ungefähr Ihren Vorstellungen entspricht, und öffnen Sie ihre FLA-Datei in Flash.

3. Speichern Sie die FLA-Datei unter einem neuen Namen im Ordner <Sprache>\Configuration\SkinFLA. Beachten Sie, dass die FLA-Datei nicht in diesem Verzeichnis gespeichert werden muss. Die von dieser FLA-Datei erstellte SWF-Datei wird im Ordner Configuration platziert. Sie können die FLA-Datei in einem beliebigen Verzeichnis auf Ihrer Festplatte speichern.
4. Sehen Sie sich die FLA-Datei nun genauer an und berücksichtigen Sie, dass die Dateistruktur und die angegebenen Instanznamen unverändert beibehalten werden sollen.
5. Sie sehen, dass alle Steuerungsgrafiken auf der Bühne verteilt sind. Klicken Sie auf die einzelnen Grafiken, und sehen Sie sich die ausgewählten Elemente an. Die Grafiken, aus denen die einzelnen Steuerelemente erstellt werden, sind in einem Movieclip gruppiert. Sie können zwar die Grafiken in den Movieclips bearbeiten, aber die Verschachtelungsstruktur des Movieclips und die Instanznamen dürfen nicht geändert werden.

Sie haben jetzt alle vorbereitenden Schritte ausgeführt und können die neue Skin-SWF-Datei jetzt anpassen.

Grafikänderungen an der Skin-SWF-Datei vornehmen

Sie haben nun eine eigene Version einer vorhandenen Skin-SWF-Datei erstellt. Am schnellsten lässt sich diese Datei ändern, indem Sie die Grafiken in den Movieclips auf der Bühne bearbeiten. Nehmen Sie sich einen Moment Zeit, um verschiedene Änderungen an den Grafiken auszuprobieren.

Für die Skin-SWF-Datei wird die neue Flash 8-Funktion für die Skalierung im 9-teiligen Segmentraster verwendet. Dabei wird ein Raster aus Hilfslinien über dem Movieclip in der Bibliothek eingeblendet. Diese Hilfslinien unterteilen die Grafiken in neun Segmente, so dass eine Skalierung von Instanz zu Instanz ohne Verzerrung möglich ist. Sie können dies sehen, wenn Sie den Chromes-Ordner in der Bibliothek öffnen und auf sein Symbol doppelklicken, um die zugehörige Zeitleiste aufzurufen. Sie sehen, dass über der rechteckigen Grafik Hilfslinien eingeblendet wurden. Diese Hilfslinien werden bei der Bearbeitung eines Movieclips oder einer Schaltfläche im Bibliotheksbearbeitungsmodus angezeigt. Die Auswirkungen der Skalierung im 9-teiligen Segmentraster sind nur zur Laufzeit in der SWF-Datei sichtbar. Skalieren Sie ein paar Instanzen auf der Hauptzeitleiste, und exportieren Sie dann den Film (Steuerung > Film testen), um die Ergebnisse zu sehen.

Einfache Änderungen, die sich nur auf die Darstellung der Schaltflächen oder des Schaltflächenhintergrunds, aber nicht auf die Abmessungen des Movieclips auswirken, sind ohne weitere Modifikationen möglich. Auch einfache Änderungen an der Position der Steuerelemente funktionieren in den meisten Fällen.

Führen Sie nun folgende Schritte aus, um die Datei genauer zu untersuchen und zu bearbeiten:

1. Öffnen Sie die Skin-SWF-FLA, die Sie in Flash Professional 8 bearbeiten möchten.

   Sie sehen, dass die Datei aus mehreren Ebenen besteht und dass sich Grafiken in Bild 1 der Hauptzeitleiste befinden. Die oberste Ebene enthält die Instanz layout_mc (den Container für alle Steuerelemente) sowie den ActionScript-Code, der verschiedene Eigenschaften im Movieclip layout_mc initialisiert. Sie müssen diesen Code nicht bearbeiten, aber möglicherweise ist es hilfreich, die Kommentare und die Standardeinstellungen der Eigenschaften genauer zu untersuchen.

2. Zum Bearbeiten einer Grafik müssen Sie zunächst den Bearbeitungsbereich (Zeitleiste) des Movieclips aufrufen, der die Grafik enthält. Doppelklicken Sie auf der Bühne mehrmals auf eine Grafik, bis die Zeitleiste erreicht ist, die die Ebenen und bearbeitbaren Bilder enthält.

   Um beispielsweise die Chrom-Hintergrundgrafik zu bearbeiten, die horizontal unten auf dem Bildschirm verläuft, doppelklicken Sie einmal darauf, um die Zeitleiste und den Bearbeitungsbereich des Movieclips aufzurufen. Die im Movieclip enthaltenen bearbeitbaren Grafiken sind über mehrere Ebenen verteilt (siehe Abbildung 7). Der Name des Movieclips ändert sich von Datei zu Datei, er wird aber immer auf der unteren Ebene der Hauptzeitleiste angezeigt und verfügt stets über dieselbe interne Ebenenstruktur.

3. Entsperren Sie die Ebene Clear Plate, und wählen Sie die Füllung auf der Bühne aus. Ändern Sie dann die Farbe im Farbfeld Füllung in der Symbolleiste. Die Farbe im Movieclip layout_mc auf der Hauptzeitleiste wird automatisch aktualisiert. Sie können mit verschiedenen Einstellungen für Füllfarbe, Kontur und Schatten experimentieren.
4. Klicken Sie dann in der Bearbeitungsleiste auf die Schaltfläche für Szene 1 (Strg-E), um zur Hauptzeitleiste zurückzukehren.
5. Verwenden Sie dieses Verfahren für alle Grafiken, die Sie ändern möchten. Doppelklicken Sie auf die Grafik, bis der Bearbeitungsbereich erreicht ist. Möglicherweise müssen Sie mehrmals doppelklicken, um den Bearbeitungsbereich aufzurufen. Dies ist der Fall, wenn Schaltflächen in mehreren Ebenen verschachtelt sind.
6. Speichern Sie die Datei, und exportieren Sie die SWF-Datei. Im nächsten Abschnitt wird beschrieben, wie Sie die exportierte Skin-SWF-Datei in die FLVPlayback-Komponente laden.

Tipp: Änderungen an den Farben der Chrom- und Hintergrundgrafik können die Darstellung des Video Players bei einem relativ geringen Arbeitsaufwand ganz erheblich ändern.

Benutzerdefinierte Skins manuell laden

Um eine benutzerdefinierte Skin-SWF-Datei in die FLVPlayback-Komponente zu laden, verwenden Sie den Skin-Parameter und das Dialogfeld Skin auswählen zum Suchen der SWF-Datei. Sie können SWF-Dateien zwar in jedem Speicherort suchen, doch empfiehlt es sich, die Dateien im Flash-Ordner Configuration abzulegen, damit sie mit den anderen Standard-Skins aufgelistet werden. So können Sie eine Vorschau der Skin-SWF-Datei unter den anderen Standarddateien anzeigen. Außerdem wird automatisch eine Kopie der Skin-SWF-Datei neben der FLVPlayback-SWF platziert, die Sie erstellen.

Damit eine Skin-SWF-Datei immer im Dialogfeld Skin auswählen zur Verfügung steht, müssen Sie Ihre benutzerdefinierte Skin-SWF-Datei im Ordner <Sprache>\Configuration\Skins des Flash 8-Anwendungsordners speichern. Durch das Speichern der SWF-Datei an diesem Speicherort wird sie in das Dialogfeld Skin auswählen aufgenommen. Die benutzerdefinierte Skin steht jetzt immer zur Verfügung, wenn Sie das Dialogfeld Skin auswählen verwenden.

So laden Sie die Skin-SWF in eine FLVPlayback-Komponente:

1. Erstellen Sie in Flash Professional 8 eine FLA-Datei, und ziehen Sie eine Instanz der FLVPlayback-Komponente aus dem Bedienfeld Komponenten auf die Bühne.
2. Speichern Sie die Datei.
3. Wählen Sie die FLVPlayback-Instanz aus, und öffnen Sie den Komponenteninspektor (Fenster > Komponenten-Inspektor).
4. Klicken Sie einmal auf den Parameter skin, um ihn auszuwählen. Klicken Sie dann noch einmal, um das Dialogfeld Skin auswählen zu öffnen.
5. Suchen Sie im Popupmenü Skin nach dem Namen, unter dem Sie Ihre Skin gespeichert haben. Von jetzt an können Sie mit der benutzerdefinierten Skin genauso wie mit Standard-Skins arbeiten.

Um eine Skin-SWF-Datei zu laden, die nicht standardmäßig im Dialogfeld Skin auswählen angezeigt wird, können Sie die Option Benutzerdefinierte Skin-URL verwenden. Dies kann praktisch sein, wenn Sie SWF-Dateien suchen, die auf dem Unternehmensserver gespeichert sind, oder wenn Sie Dateien auf dem Desktop speichern:

1. Öffnen Sie wieder das Dialogfeld Skin auswählen ausgehend von den FLVPlayback-Parametern.
2. Navigieren Sie im Popupmenü Skin zur letzten Option: Benutzerdefinierte Skin-URL (siehe Abbildung 8).

3. Geben Sie den Pfad in das Textfeld URL ein, und klicken Sie auf OK. Beim Pfad sollte es sich um den Namen der Skin-SWF-Datei einschließlich der Erweiterung .swf handeln.

Sie haben jetzt alle erforderlichen Schritte ausgeführt. Die SWF-Datei sollte in der Live-Vorschau der Komponente und nach dem Export im Film angezeigt werden.

Benutzerdefinierte Skin mit ActionScript laden

Sie können die Parameter im Komponenteninspektor auch ganz umgehen und stattdessen ActionScript-Code verwenden, um der Komponente die Skin-SWF-Datei zuzuweisen. Dies ist besonders bei dynamischen Anwendungen nützlich, die zur Laufzeit initialisiert werden.

So weisen Sie der Komponente eine Skin-SWF-Datei mithilfe von ActionScript zu:

1. Erstellen Sie in Flash Professional 8 eine FLA-Datei, und ziehen Sie eine Instanz der FLVPlayback-Komponente aus dem Bedienfeld Komponenten auf die Bühne.
2. Speichern Sie die Datei, und exportieren Sie die SWF-Datei.
3. Erstellen Sie eine Kopie der gewünschten Skin-SWF-Datei, und platzieren Sie sie neben der gerade gespeicherten Datei.
4. Wählen Sie in der FLA-Datei, die die Videokomponente enthält, die FLVPlayback-Instanz aus, und nennen Sie sie beispielsweise flvPlayback.
5. Fügen Sie der Zeitleiste eine neue Ebene hinzu, und nennen Sie sie Aktionen. Wählen Sie die Ebene Aktionen aus, und öffnen Sie das Bedienfeld Aktionen, um Code hinzuzufügen.
6. Geben Sie den folgenden Code ein. Ersetzen Sie dabei flvPlayback durch den verwendeten Instanznamen und den Pfad durch den Namen der Skin-SWF-Datei, die Sie laden möchten. Beim Pfad der SWF-Datei kann es sich um eine relative oder absolute URL handeln:

7. Exportieren Sie die SWF-Datei, um die Aktualisierung zu sehen. Beachten Sie, dass die ActionScript-Einstellungen erst zur Laufzeit in der SWF-Datei sichtbar sind.

Anatomie einer Skin-SWF-Datei

Benutzer, die eigene Skin-SWF-Dateien völlig neu erstellen möchten, sollten sich mit der Anatomie der Datei, also dem erwarteten Layout, vertraut machen. Im folgenden Abschnitt der Flash-Hilfe werden einige wichtige Punkte in Bezug auf die Dateistruktur beschrieben:

Komponenten-Referenzhandbuch > FLVPlayback-Komponente > FLVPlayback-Komponente anpassen > Skins für FLV Playback Custom UI-Komponenten separat zuweisen

Weitere Schritte

Mit den drei Skinning-Verfahren, die in diesem Artikel beschrieben wurden, verfügen Sie über zahlreiche Möglichkeiten, das Erscheinungsbild der FLVPlayback-Komponente und der Steuerelemente anzupassen. Sie sollten sich etwas Zeit nehmen, um mit den vordefinierten Skin-Dateien von Flash Professional 8 zu experimentieren. Zur FLVPlayback-Komponente gehört auch eine erweiterte ActionScript-API, mit der Sie Status und Funktionsweise des Video Players umfassend steuern können. Weitere Einzelheiten finden Sie in der Flash-Hilfe (Flash-Hilfe > Komponenten-Referenzhandbuch > FLVPlayback-Komponente > mx.video.FLVPlayback-Klasse).