Elementare AS-Anweisungen für die FLVPlayback-Komponente

Eine einfache Video-Jukebox

Auf dieser Seite erstellen wir eine ganz einfache Video-Jukebox mit dem Ziel, die elementaren ActionScript3-Befehle für das Steuern FLVPlayback-Komponente kennen zu lernen.

Schritt für Schritt

  • Laden Sie sich die Übung rechts herunter und öffnen Sie die Datei jukebox.fla. Darin vorbereitet finden Sie drei Schaltflächen, welche bereits mit EventListener "bestückt" sind. Ziel der Übung ist es, dass bei Klick auf die Schaltflächen je ein anderer Video abgespielt wird.
  • Erstellen Sie jetzt eine Instanz der FLVPlayback-Komponente auf der Bühne auf einer eigenen Ebene. Taufen Sie mit Hilfe des Eigenschaftsinspektors die Instanz. Definieren Sie einen Skin.
  • Öffnen Sie den Komponenten-Inspektor und nehmen Sie die folgenden Einstellungen vor:
    Parameter FLVPlayback
    Wichtig sind hier vor allem folgende drei Einstellungen: autoplay soll false sein, weil wir das Starten der Videos mit AS steuern werden. scaleMode soll maintainAspectRatio sein, weil wir die Grösse des Players den Videos anpassen werden und der Player soll sich dabei dem Seitenverhältnis der Videos anpassen. source lassen wir leer, auch das wird mit ActionScript bestimmt.
  • Im Übungsdokument finden Sie die URLs dreier FLVs in einem Textdokument (Pfad_video.txt). Kopieren Sie die URLs ins Flash hinein und verpacken Sie sie in drei Variablen. Bitte beachten Sie auch den Hinweis oben im Textdokument und halten Sie sich daran.
  • Bringen Sie nun die Videos zum Laufen, indem Sie in den case-Blöcke ergänzen (den Code müssen Sie natürlich Ihren Gegebenheiten anpassen):
// "myPlayer" ist der Instanzname der FLVPlayback-Komponente

// In der Variable "path1" ist der URL auf den Video verpackt

myPlayer.source = path1;

// So wird der Film gestartet

myPlayer.play();

snippet1.txt

  • Die Videos haben unterschiedliche Masse und Seitenverhältnisse. Der Player soll sich dynamisch daran anpassen. Wir lesen die aktuelle Grösse der Videos aus den Metadaten des jeweiligen Videos aus und passen darauf die Dimensionen des Players an. Ausserdem soll sich die Kompenente in der Mitte der Bühne positionieren. Damit wir sicher sind, dass die Metadaten schon zur Verfügung stehen, wenn wir diese Operationen durchführen, setzen wir den Eventlistener METADATA_RECEIVED ein. Damit das funktioniert, müssen wir zuerst noch ein zusätzliches Package beanspruchen:
// Import des nötigen Pakets für den Eventlistener

// Der Import muss explizit erwähnt werden

import fl.video.MetadataEvent;

snippet2.txt

  • Fügen Sie zum Schluss auch den folgenden Code an:
// Eventlistener für die Metadaten des Videos

myPlayer.addEventListener(MetadataEvent.METADATA_RECEIVED, anpassen);



// Anpassen der Grösse des Players, den Player in der Mitte der Bühne positionieren

// autoSize gibt es in AS3 leider nicht mehr 

function anpassen(event:MetadataEvent):void {

    myPlayer.width = event.info.width;

    myPlayer.height = event.info.height;

    myPlayer.x = (stage.stageWidth - event.info.width) / 2

}

 

snippet3.txt

Download Übung
jukebox.zip