Separates Zuweisen von Skins für FLV Playback Custom UI-Komponenten

Die FLV Playback Custom UI-Komponenten ermöglichen Ihnen das individuelle Anpassen der FLVPlayback-Steuerungen in Ihrer FLA-Datei. Die Ergebnisse können Sie bei der Vorschau Ihrer Webseite überprüfen. Diese Komponenten wurden jedoch nicht für die Skalierung konzipiert. Sie sollten einen Movieclip und seinen Inhalt so bearbeiten, dass sie eine bestimmte Größe haben. Aus diesem Grund ist es am besten, wenn die FLVPlayback-Komponente in der gewünschten Größe auf der Bühne vorhanden ist, wobei die Eigenschaft scaleMode auf exactFit eingestellt ist.

Ziehen Sie zunächst einfach die gewünschten FLV Playback Custom UI-Komponenten aus dem Bedienfeld „Komponenten“, positionieren Sie sie auf der Bühne und benennen Sie die einzelnen Instanzen.

Diese Komponenten können ohne ActionScript-Code funktionieren. Wenn Sie sie auf derselben Zeitleiste und im selben Bild wie die FLVPlayback-Komponente platzieren und keine Skin in der Komponente festgelegt ist, stellt die FLVPlayback-Komponente automatisch eine Verbindung mit ihnen her. Wenn sich dagegen mehrere FLVPlayback-Komponenten auf der Bühne befinden oder wenn die benutzerdefinierte Steuerung und die FLVPlayback-Instanz sich nicht auf derselben Zeitleiste befinden, ist ActionScript erforderlich.

Wenn sich die Komponenten auf der Bühne befinden, können Sie sie wie jedes andere Symbol bearbeiten. Beim Öffnen der Komponenten erkennen Sie, dass sie sich jeweils etwas voneinander unterscheiden.

Button-Komponenten

Die einzelnen Button-Komponenten weisen ähnliche Strukturen auf. Die verfügbaren Schaltflächen sind BackButton, ForwardButton, MuteButton, PauseButton, PlayButton, PlayPauseButton und StopButton. Die meisten verfügen über einen einzelnen Movieclip in Bild 1, der den Namen „placeholder_mc“ hat. Dies ist normalerweise, aber nicht zwingend, eine Instanz der Schaltfläche im normalen Zustand. In Bild 2 befinden sich vier Movieclips auf der Bühne für jeden Anzeigestatus: normal, Over, Down und deaktiviert. (Zur Laufzeit geht die Komponente nie tatsächlich zu Bild 2; diese Movieclips wurden hier abgelegt, um die Bearbeitung zu erleichtern und um sie in die SWF-Datei zu laden, ohne dass das Kontrollkästchen „In erstes Bild exportieren“ im Dialogfeld „Symboleigenschaften“ ausgewählt werden muss. Die Option „Export für ActionScript“ muss aber trotzdem ausgewählt werden.)

Wenn Sie einer Schaltfläche eine Skin zuweisen möchten, bearbeiten Sie einfach diese Movieclips. Sie können dabei sowohl die Größe als auch das Erscheinungsbild ändern.

In Bild 1 erscheint normalerweise ActionScript-Code. Diesen brauchen Sie nicht zu ändern. Der Code stoppt nur den Abspielkopf in Bild 1 und legt fest, welcher Movieclip für welchen Status verwendet wird.

Schaltflächen PlayPauseButton, MuteButton, FullScreenButton und CaptionButton

Die Schaltflächen PlayPauseButton, MuteButton, FullScreenButton und CaptionButton unterscheiden sich von den anderen Schaltflächen: Sie verfügen nur über ein Bild mit zwei Ebenen und kein Skript. In diesem Bild gibt es zwei Schaltflächen übereinander: für PlayPauseButton die Abspielen- und Pause-Schaltflächen, für MuteButton die Schaltflächen „Ton aus“ und „Ton ein“, für FullScreenButton die Schaltflächen „Vollbild ein“ und „Vollbild aus“ und für CaptionButton die Schaltflächen „Untertitel ein“ und „Untertitel aus“. Um diese Schaltflächen mit einer Skin zu versehen, weisen Sie jeder dieser beiden internen Schaltflächen eine Skin zu, wie unter Separates Zuweisen von Skins für FLV Playback Custom UI-Komponenten beschrieben. Es sind keine weiteren Aktionen erforderlich.

Die CaptionButton-Schaltfläche ist für die FLVPlaybackCaptioning-Komponente vorgesehen und muss an diese Komponente angefügt werden, nicht an die FLVPlayback-Komponente.

Schaltflächen BackButton und ForwardButton

Die Schaltflächen „BackButton“ und „ForwardButton“ unterscheiden sich ebenfalls von anderen Schaltflächen. In Bild 2 verfügen sie über zusätzliche Movieclips, die Sie als Rahmen um eine oder beide Schaltflächen verwenden können. Diese Movieclips sind nicht erforderlich und haben keine besondere Bedeutung, sie stellen lediglich eine Gestaltungsmöglichkeit dar. Ziehen Sie sie einfach aus dem Bedienfeld „Bibliothek“ auf die Bühne und platzieren Sie sie an der gewünschten Stelle. Wenn Sie diese Movieclips nicht verwenden möchten, ignorieren Sie sie oder löschen Sie sie aus dem Bedienfeld „Bibliothek“.

Die meisten Schaltflächen basieren auf einem gemeinsamen Satz von Movieclips, sodass Sie das Erscheinungsbild aller Schaltflächen in einem Vorgang ändern können. Es ist jedoch auch möglich, diese gemeinsamen Movieclips zu ersetzen, sodass die einzelnen Schaltflächen unterschiedlich aussehen.

BufferingBar-Komponente

Die BufferingBar-Komponente ist einfach: Sie besteht aus einer Animation, die sichtbar wird, wenn die Komponente in den Zwischenspeicherstatus wechselt. Es ist kein besonderer ActionScript-Code für die Konfiguration erforderlich. Standardmäßig handelt es sich um einen schräg gestreiften Balken, dessen Muster sich von links nach rechts bewegt, sodass ein Dreheffekt entsteht.

Obwohl die Zwischenspeichern-Leisten in den Skin-SWF-Dateien die Skalierung im 9-teiligen Segmentraster verwenden, da sie zur Laufzeit skaliert werden müssen, kann die FLV Custom UI-Komponente BufferingBar keine Skalierung im 9-teiligen Segmentraster verwenden, da sie über verschachtelte Movieclips verfügt. Wenn Sie die BufferingBar-Komponente breiter oder höher gestalten möchten, sollten Sie den Inhalt ändern, anstatt sie zu skalieren.

SeekBar- und VolumeBar-Komponenten

Die SeekBar- und VolumeBar-Komponenten ähneln sich, obwohl sie unterschiedliche Funktionen haben. Beide Komponenten verfügen über Griffe, verwenden dieselben Mechanismen zur Griffverfolgung und unterstützen verschachtelte Clips, um den Fortschritt nachzuverfolgen.

In vielen Situationen geht der ActionScript-Code in der FLVPlayback-Komponente davon aus, dass der Registrierungspunkt (auch Ursprung oder Nullpunkt genannt) der SeekBar- oder VolumeBar-Komponente sich oben links im Inhalt befindet, deshalb ist es wichtig, dass Sie sich an diese Konvention halten. Andernfalls kann es zu Problemen mit Griffen und mit Fortschritt-Movieclips kommen.

Obwohl die Vor-/Rücklaufleisten in den Skin-SWF-Dateien die Skalierung im 9-teiligen Segmentraster verwenden, da sie zur Laufzeit skaliert werden müssen, kann die FLV Custom UI-Komponente SeekBar keine Skalierung im 9-teiligen Segmentraster verwenden, da sie über verschachtelte Movieclips verfügt. Wenn Sie die SeekBar-Komponente breiter oder höher gestalten möchten, sollten Sie den Inhalt ändern, anstatt sie zu skalieren.

Handle

Eine Instanz des Handle-Movieclips befindet sich in Bild 2. Wie bei den BackButton- und ForwardButton-Komponenten geht die Komponente nie tatsächlich zu Bild 2; diese Movieclips wurden hier abgelegt, um die Bearbeitung zu erleichtern und um sie in die SWF-Datei zu laden, ohne dass das Kontrollkästchen „In erstes Bild exportieren“ im Dialogfeld „Symboleigenschaften“ ausgewählt werden muss. Die Option „Export für ActionScript“ muss aber trotzdem ausgewählt werden.

Vielleicht ist Ihnen im Hintergrund des Handle-Movieclips ein Rechteck mit dem Alphawert 0 aufgefallen. Dieses Rechteck vergrößert den Kollisionsbereich des Griffs, sodass dieser mit dem Mauszeiger leichter zu treffen ist, ohne dass das Erscheinungsbild geändert werden muss (ähnlich wie bei Schaltflächen). Da der Griff zur Laufzeit dynamisch erstellt wird, muss er ein Movieclip (keine Schaltfläche) sein. Dieses Rechteck mit dem Alphawert 0 ist aus keinem anderen Grund erforderlich, und im Allgemeinen können Sie das Innere des Griffs durch jedes beliebige Bild ersetzen. Der Registrierungspunkt sollte jedoch horizontal in der Mitte des Handle-Movieclips zentriert werden.

Der folgende ActionScript-Code befindet sich in Bild 1 der SeekBar-Komponente, um den Griff zu verwalten: 

stop(); 
handleLinkageID = "SeekBarHandle"; 
handleLeftMargin = 2; 
handleRightMargin = 2; 
handleY = 11;

Der Aufruf der Funktion stop() ist wegen des Inhalts von Bild 2 erforderlich.

In der zweiten Zeile wird angegeben, welches Symbol als Griff verwendet wird. Es sollte nicht nötig sein, dieses zu ändern, wenn Sie nur die Handle-Movieclip-Instanz in Bild 2 bearbeiten. Zur Laufzeit erstellt die FLVPlayback-Komponente eine Instanz des angegebenen Movieclips auf der Bühne, und zwar als gleichgeordnete Instanz der Bar-Instanz. Dies bedeutet, dass beiden Komponenten derselbe Movieclip übergeordnet ist. Wenn sich die Bar-Instanz also auf der Stammebene befindet, muss sich der Griff ebenfalls auf der Stammebene befinden.

Die Variable handleLeftMargin legt die ursprüngliche Position des Griffs (0 %) fest, und die Variable handleRightMargin legt fest, wo sich der Griff am Schluss befindet (100 %). Die Zahlen geben den Offset vom linken und rechten Ende der Leiste an. Positive Zahlen geben die Grenzen innerhalb der Leiste, negative die Grenzen außerhalb der Leiste an. Diese Offsets geben an, wo sich der Griff – basierend auf dem Registrierungspunkt – befinden kann. Wenn Sie den Registrierungspunkt in der Mitte des Griffs positionieren, stehen die linke und rechte Seite des Griffs an den äußeren Positionen über die Ränder. Ein SeekBar-Movieclip muss über einen Registrierungspunkt in der oberen linken Ecke verfügen, damit der Inhalt korrekt funktioniert.

Die Variable handleY legt die y -Position des Griffs relativ zur Bar-Instanz fest. Dies basiert auf dem Registrierungspunkt des Movieclips. Der Registrierungspunkt desselben Griffs befindet sich an der Spitze des Dreiecks, damit er relativ zum sichtbaren Teil platziert wird, unabhängig vom unsichtbaren Rechteck des Kollisionsbereichs. Der Bar-Movieclip muss seinen Registrierungspunkt in der oberen linken Ecke haben, damit der Inhalt korrekt funktioniert.

Mit diesen Beschränkungen kann der Griff für ein Bar-Steuerelement, das auf (100, 100) festgelegt ist und 100 Pixel breit ist, im Bereich von 102 bis 198 (horizontal) liegen und vertikal bei 111 bleiben. Wenn Sie Werte für handleLeftMargin und handleRightMargin zu -2 und handleY zu -11 ändern, kann der Griff im Bereich 98 bis 202 (horizontal) liegen und vertikal bei 89 bleiben.

Movieclips für Fortschritt und Füllung

Die SeekBar-Komponente verfügt über einen Fortschritts -Movieclip, die VolumeBar-Komponente über einen Füllungs -Movieclip. In der Praxis kann eine SeekBar- oder VolumeBar-Komponente allerdings einen beliebigen, keinen oder beide dieser Movieclips haben. Die Struktur dieser Leisten ist dieselbe, ihr Verhalten ist ähnlich, es werden jedoch unterschiedliche Werte angezeigt. Ein Fortschritts-Movieclip wird gefüllt, wenn die FLV-Datei heruntergeladen wird (dies ist nur bei HTTP-Downloads sinnvoll, beim Streaming von FMS ist die Leiste immer voll); ein Füllungs-Movieclip wird gefüllt, während sich der Griff von links nach rechts bewegt.

Die FLVPlayback-Komponente findet diese Movieclip-Instanzen, indem sie nach bestimmten Instanznamen sucht; deshalb benötigt die Fortschritts-Movieclip-Instanz den Bar-Movieclip als übergeordnete Instanz und muss den Instanznamen „progress_mc“ haben. Die Füllungs-Movieclip-Instanz benötigt den Instanznamen „fullness_mc“.

Sie können die Fortschritts- und Füllungs-Movieclips mit oder ohne darin verschachtelte Movieclip-Instanz „fill_mc“ festlegen. Der VolumeBar-Movieclip „fullness_mc“ weist die Methode mit dem Movieclip „fill_mc“ auf und der SeekBar-Movieclip „progress_mc“ weist die Methode ohne den Movieclip „fill_mc“ auf.

Die Methode mit dem darin verschachtelten Movieclip „fill_mc“ ist nützlich, wenn Sie eine Füllung benötigen, die nicht skaliert werden kann, ohne dass das Erscheinungsbild verzerrt wird.

Im VolumeBar-Movieclip „fullness_mc“ ist die darin verschachtelte Movieclip-Instanz „fill_mc“ maskiert. Sie können sie entweder beim Erstellen des Movieclips maskieren, oder zur Laufzeit wird eine Maske dynamisch erstellt. Wenn Sie sie mit einem Movieclip maskieren, nennen Sie die Instanz mask_mc und richten Sie sie so ein, dass „fill_mc“ so erscheint, als ob der Prozentwert 100 % erreicht wäre. Wenn Sie „fill_mc“ nicht maskieren, erhält die dynamisch erstellte Maske eine rechteckige Form und dieselbe Größe wie „fill_mc“ bei 100 %.

Der Movieclip „fill_mc“ wird auf eine von zwei Arten mit der Maske eingeblendet, abhängig davon, ob „fill_mc.slideReveal“ den Wert true oder false hat.

Wenn „fill_mc.slideReveal“ mit true belegt ist, wird „fill_mc“ von links nach rechts bewegt, um durch die Maske eingeblendet zu werden. Bei 0 % befindet sich der Movieclip ganz links, sodass kein Teil durch die Maske sichtbar ist. Mit zunehmendem Prozentwert bewegt er sich nach rechts bis zum Wert 100 %, wo er sich dann wieder auf der Position befindet, an der er auf der Bühne erstellt wurde.

Wenn „fill_mc.slideReveal“ mit dem Wert false belegt ist oder nicht definiert ist (das Standardverhalten), wird die Größe der Maske von links nach rechts geändert, um mehr von „fill_mc“ anzuzeigen. Beim Wert 0 % wird die Maske horizontal auf 05 skaliert und bei zunehmendem Prozentwert wird scaleX vergrößert, bis bei 100 % „fill_mc“ vollständig zu sehen ist. Dies ist nicht unbedingt gleichbedeutend mit scaleX = 100, da „mask_mc“ beim Erstellen möglicherweise skaliert wurde.

Die Methode ohne „fill_mc“ ist einfacher als die Methode mit „fill_mc“, allerdings verzerrt sie die Füllung horizontal. Wenn Sie diese Verzerrung vermeiden möchten, müssen Sie „fill_mc“ verwenden. Die SeekBar-Komponente „progress_mc“ veranschaulicht diese Methode.

Der Fortschritts- oder Füllungs-Movieclip wird basierend auf dem Prozentwert horizontal skaliert. Bei 0 % hat scaleX für die Instanz den Wert 0, sodass sie nicht sichtbar ist. Bei zunehmendem Prozentwert wird scaleX angepasst, bis der Clip bei 100 % dieselbe Größe wie beim Erstellen auf der Bühne hat. Auch dies ist nicht unbedingt gleichbedeutend mit scaleX = 100, da die Clip-Instanz beim Erstellen möglicherweise skaliert wurde.

Verbinden von FLV Playback Custom UI-Komponenten

Wenn Sie die benutzerdefinierten UI-Komponenten auf derselben Zeitleiste und im selben Bild wie die FLVPlayback-Komponente platzieren und die skin -Eigenschaft nicht festgelegt ist, stellt FLVPlayback automatisch eine Verbindung mit ihnen her, ohne dass ActionScript erforderlich ist.

Wenn sich dagegen mehrere FLVPlayback-Komponenten auf der Bühne befinden oder wenn die benutzerdefinierte Steuerung und FLVPlayback sich nicht auf derselben Zeitleiste befinden, müssen Sie ActionScript-Code schreiben, um die benutzerdefinierten UI-Komponenten mit Ihrer Instanz der FLVPlayback-Komponente zu verbinden. Dazu benennen Sie zunächst die FLVPlayback-Instanz und weisen dann Ihre Instanzen der FLV Playback Custom UI-Komponenten mithilfe von ActionScript den entsprechenden FLVPlayback-Eigenschaften zu. Im folgenden Beispiel heißt die FLVPlayback-Instanz „my_FLVPlybk“, die Namen der FLVPlayback-Eigenschaften stehen jeweils hinter dem Punkt (.), und die FLV Playback Custom UI-Instanzen stehen rechts neben dem Gleichheitszeichen (=): 

//FLVPlayback instance = my_FLVPlybk 
my_FLVPlybk.playButton = playbtn; // set playButton prop. to playbtn, etc. 
my_FLVPlybk.pauseButton = pausebtn; 
my_FLVPlybk.playPauseButton = playpausebtn; 
my_FLVPlybk.stopButton = stopbtn;  
my_FLVPlybk.muteButton = mutebtn; 
my_FLVPlybk.backButton = backbtn; 
my_FLVPlybk.forwardButton = forbtn; 
my_FLVPlybk.volumeBar = volbar; 
my_FLVPlybk.seekBar = seekbar; 
my_FLVPlybk.bufferingBar = bufbar;

Mit den folgenden Schritten werden die Steuerelemente StopButton, PlayPauseButton, MuteButton und SeekBar erstellt:

  1. Ziehen Sie eine FLVPlayback-Komponente auf die Bühne und geben Sie ihr den Instanznamen my_FLVPlybk .

  2. Belegen Sie den Parameter source im Komponenten-Inspektor mit http://www.helpexamples.com/flash/video/cuepoints.flv .

  3. Wählen Sie für den Skin-Parameter den Wert „Aus“.

  4. Ziehen Sie Instanzen von StopButton, PlayPauseButton und MuteButton auf die Bühne und platzieren Sie sie auf der FLVPlayback-Instanz, links übereinander angeordnet. Geben Sie den einzelnen Schaltflächen im Eigenschafteninspektor Instanznamen (z. B. my_stopbttn , my_plypausbttn und my_mutebttn ).

  5. Öffnen Sie im Bedienfeld „Bibliothek“ den Ordner „FLVPlayback Skins“ und öffnen Sie darin den Ordner „SquareButton“.

  6. Wählen Sie den Movieclip „SquareBgDown“ aus und doppelklicken Sie darauf, um ihn auf der Bühne zu öffnen.

  7. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh), wählen Sie im Kontextmenü den Befehl „Alles auswählen“ und löschen Sie das Symbol.

  8. Wählen Sie das Ellipsenwerkzeug aus, zeichnen Sie an derselben Stelle ein Oval und legen Sie die Füllung als blau ( #0033FF ) fest.

  9. Stellen Sie im Eigenschafteninspektor die Breite (B:) auf 40 und die Höhe (H:) auf 20 ein. Legen Sie die X-Koordinate (X:) auf 0,0 und die Y-Koordinate (Y:) ebenfalls auf 0,0 fest.

  10. Wiederholen Sie die Schritte 6 bis 8 für SquareBgNormal, ändern Sie jedoch die Füllung zu gelb ( #FFFF00 ).

  11. Wiederholen Sie die Schritte 6 bis 8 für SquareBgOver, ändern Sie jedoch die Füllung zu grün ( #006600 ).

  12. Bearbeiten Sie die Movieclips für die verschiedenen Symbole innerhalb der Schaltflächen (PauseIcon, PlayIcon, MuteOnIcon, MuteOffIcon und StopIcon). Sie finden diese Movieclips im Bedienfeld „Bibliothek“ unter „FLV Playback Skins/ Bezeichnung Button/Assets“, wobei Bezeichnung für den Namen der Schaltfläche steht, z. B. Play, Pause usw. Führen Sie jeweils die folgenden Schritte aus:

    1. Wählen Sie die Option „Alles auswählen“.

    2. Ändern Sie die Farbe zu rot ( #FF0000 ).

    3. Skalieren Sie auf 300 %.

    4. Ändern Sie die X:-Position des Inhalts in 7.0 , um die horizontale Platzierung des Symbols in jedem Schaltflächenstatus zu modifizieren.

      Hinweis: Indem Sie die Position auf diese Art ändern, müssen Sie nicht jeden Schaltflächenstatus öffnen und die Movieclip-Instanz des Symbols verschieben.

  13. Klicken Sie auf den blauen Zurück-Pfeil über der Zeitleiste, um zu Szene 1, Bild 1 zurückzukehren.

  14. Ziehen Sie eine SeekBar-Komponente auf die Bühne und platzieren Sie sie rechts unten in der FLVPlayback-Instanz.

  15. Doppelklicken Sie im Bedienfeld „Bibliothek“ auf die SeekBar-Komponente, um sie auf der Bühne zu öffnen.

  16. Skalieren Sie sie auf 400 %.

  17. Wählen Sie den Umriss aus und legen Sie die Farbe auf Rot ( #FF0000 ) fest.

  18. Doppelklicken Sie im Ordner „FLVPlayback Skins/Seek Bar“ auf „SeekBarProgress“ und legen Sie die Farbe auf Gelb ( #FFFF00 ) fest.

  19. Doppelklicken Sie im Ordner „FLVPlayback Skins/Seek Bar“ auf „SeekBarHandle“ und legen Sie die Farbe auf Rot ( #FF0000 ) fest.

  20. Klicken Sie auf den blauen Zurück-Pfeil über der Zeitleiste, um zu Szene 1, Bild 1 zurückzukehren.

  21. Wählen Sie die SeekBar-Instanz auf der Bühne aus und nennen Sie die Instanz my_seekbar .

  22. Fügen Sie im Bedienfeld „Aktionen“ in Bild 1 der Hauptzeitleiste eine Import -Anweisung für die Videoklassen ein und weisen Sie die Namen der Schaltflächen und der Vor-/Rücklaufleiste den entsprechenden FLVPlayback-Eigenschaften zu, wie im folgenden Beispiel gezeigt: 

    import fl.video.*; 
my_FLVPlybk.stopButton = my_stopbttn; 
my_FLVPlybk.playPauseButton = my_plypausbttn; 
my_FLVPlybk.muteButton = my_mutebttn; 
my_FLVPlybk.seekBar = my_seekbar;

  23. Drücken Sie Strg+Eingabe, um den Film zu testen.