17.2 Videos mit ActionScript 

Sobald ein Video direkt in der Zeitleiste landet, funktioniert seine Steuerung sehr einfach: Sie steuern die jeweilige Zeitleiste. Das kann die Hauptzeitleiste sein, falls Sie so wagemutig sind, das Video dort unterzubringen. Oder es handelt sich um die Zeitleiste eines MovieClips, wenn das Video ordentlich untergebracht wurde. Wie die Steuerung im Einzelnen funktioniert, zeigen wir im folgenden Abschnitt »Videosteuerung«.

Aber auch direkt aus der Bibliothek ist das Video exportierbar. Hierzu erfahren Sie mehr in »Video aus der Bibliothek«.

Videosteuerung

Liegt ein Video in einem MovieClip, ist die Steuerung unkompliziert: Sie greifen auf den MovieClip zu, spielen ihn ab und halten ihn an oder bewegen ihn an eine bestimmte Stelle. All das machen Sie mit den Methoden zur Filmsteuerung, die wir Ihnen in Kapitel 5 vorgestellt haben.

Sehen Sie sich das gleich an einem einfachen Beispiel an; die entsprechende Datei video_einfach.fla finden Sie auf der CD-ROM für beide Flash-Versionen. Sie besteht aus einem Rahmen, drei Schaltflächen für die Video-Steuerung und einem Video, das sich bereits in einem MovieClip befindet.

Abbildung 17.4 Das Video befindet sich auf einer eigenen Ebene.

Ziel ist, die drei Schaltflächen (mit den Instanznamen abspielen_btn, pause_btn und stop_btn) mit Funktionalität zu versehen. Außerdem soll die Abspiel-Schaltfläche ihre Farbe von Gelb auf Grün wechseln, wenn der Film gerade läuft. Für diese Zwecke gibt es den MovieClip abspielen_licht_mc, der das grüne Dreieck für die Abspiel-Schaltfläche beinhaltet und von Ihnen im folgenden Code bei Bedarf ein- und ausgeblendet wird.

Schritt für Schritt: Einfache Videosteuerung

Der Code für dieses Beispiel landet zentral im ersten Schlüsselbild des Hauptfilms auf der Ebene ActionScript. Für Schaltflächen setzen Sie Ereignisprozeduren ein. Nur im ersten Schritt arbeiten Sie direkt im MovieClip des Videos:

Zu Anfang wechseln Sie in die Aktion für den MovieClip des Videos. Im ersten Schlüsselbild des Films halten Sie das Video an und blenden das grüne Dreieck aus:

stop();
_root.abspielen_licht_mc._visible = false;

Im letzten Schlüsselbild springen Sie zurück auf das erste: gotoAndStop(1); Vorsicht, wenn Sie ein Video in einen MovieClip packen, wird das Video automatisch mit dem MovieClip abgespielt. Sie müssen also den Abspielkopf in der Zeitleiste des MovieClips anhalten. Dies können Sie direkt in der Zeitleiste machen – so wie in diesem Schritt zu sehen. Alternativ lässt sich der Befehl auch im Hauptfilm mit der korrekten Adresse des MovieClips eingeben: video_mc.stop()

Abbildung 17.5 Der Film ist gestoppt.

Zurück zum ersten Schlüsselbild. Nun geben Sie den Code für die Abspiel-Schaltfläche ein:

abspielen_btn.onRelease = function() {
   _root.abspielen_licht_mc._visible = true;
   _root.video_mc.play();
};

Hier wird zuerst das grüne Dreieck eingeblendet und zeigt damit dass das Video zum Abspielen kommt. Nun startet die Methode play() den MovieClip mit dem Video.

Für die Pause-Schaltfläche halten Sie den MovieClip mit dem Video an und blenden das grüne Dreieck wieder aus:

pause_btn.onRelease = function() {
   _root.abspielen_licht_mc._visible = false;
   _root.video_mc.stop();
};

Im letzten Schritt lassen Sie den MovieClip des Videos auf das erste Schlüsselbild zurückspringen und blenden das grüne Dreieck aus:

stop_btn.onRelease = function() {
   _root.abspielen_licht_mc._visible = false;
   _root.video_mc.gotoAndStop(1);
};

Abbildung 17.6 Los geht’s (links), jetzt wird kurz angehalten (Mitte), dann springt der Nutzer zum ersten Bild zurück (rechts).

Die fertige Datei finden Sie unter dem Namen video_einfach_AS2.fla bzw. video_einfach_AS1.fla auf der CD-ROM. Eine Variante mit den Verhalten von Flash trägt den Namen video_einfach_verhalten.fla und ist natürlich nur für Flash 8 und MX 2004 verfügbar.

Video aus der Bibliothek

Bisher haben Sie das Video in einen MovieClip gelegt. Nun soll es ein wenig dynamischer werden: Wir zeigen Ihnen, wie Sie das Video direkt in einen MovieClip aus der Bibliothek laden. Vorsicht, die Vorgehensweise ist nicht vergleichbar mit dem Laden eines Sounds aus der Bibliothek. Ein Video muss im Gegensatz zu einem Sound in einem MovieClip liegen. Und so bewerkstelligen Sie das:

Abbildung 17.7 Einen MovieClip für ActionScript exportieren.

attachMovie("video_export", "video_mc", 1);

video_mc._x = 40;
video_mc._y = 80;

Ein Schalter für zwei Anlässe

Bisher haben wir zur Abspielsteuerung verschiedene Schaltflächen eingesetzt. Was passiert aber, wenn lediglich eine Schaltfläche benutzt werden soll, die das Abspielen und das Anhalten gleichermaßen übernimmt. Für Klicken gibt es normalerweise nur ein Ereignis, wie stellen Sie also fest, ob der Nutzer klickt um abzuspielen oder anzuhalten? In diesem Fall müssen Sie mit verschiedenen Zuständen und einer Fallunterscheidung arbeiten.

Sehen Sie sich das an einem leicht abgewandelten Beispiel der einfachen Videosteuerung an. Ausgangsdatei ist video_eineschaltfuerzwei.fla; sie enthält neben der Schaltfläche zwei MovieClips, einen mit dem Play-Symbol (play_mc), den anderen mit dem Pause-Symbol (pause_mc).

Schritt für Schritt: Eine Schaltfläche zum Abspielen und Pausieren

Außer im ersten Schritt arbeiten Sie in diesem Beispiel mit Ereignisprozeduren.

Im ersten Schlüsselbild des MovieClips blenden Sie das Play-Symbol ein und halten den Film an:

_root.pause_mc._visible = false;
_root.play_mc._visible = true;
stop();

Im letzten Schlüsselbild springen Sie auf Schlüsselbild 1:

gotoAndStop(1);

Wechseln Sie zurück in den Hauptfilm und dort in das erste Schlüsselbild auf die Ebene ActionScript. Hier definieren Sie eine Variable, die den Zustand der Schaltfläche aufnehmen soll:

var zustand:Boolean = true;

Diese Variable ist der Schlüssel zum Verständnis unseres Beispiels. Sie benötigen zwei Zustände: Der Film wird abgespielt und der Film pausiert.

Am Anfang soll der Film anhalten. Der erste Zustand (true) steht also für den Zustand Pause.

Den Wert der Variablen können Sie willkürlich definieren. Wir verwenden den Wahrheitswert true.

Als Nächstes geben Sie die Ereignisprozedur für die Schaltfläche ein:

schalt_btn.onRelease = function() {

Nun hilft eine Fallunterscheidung weiter. Wenn die Variable zustand den Wert true hat: if (zustand) { blenden Sie das Pause-Symbol ein und das Play-Symbol aus:

      _root.pause_mc._visible = true;
      _root.play_mc._visible = false;

Jetzt spielen Sie das Video ab:

      _root.video_mc.play();

und ändern den Zustand in false:

      zustand = false;
   }

Ist der Wert der Variablen zustand false, blenden Sie das Play-Symbol ein und das Pause-Symbol aus, Sie halten den Film an und ändern zustand wieder in true.

   else {
      _root.pause_mc._visible = false;
      _root.play_mc._visible = true;
      _root.video_mc.stop();
      zustand = true;
   }
};

Fertig ist der einfache Schalter. Noch ein Hinweis: Statt Wahrheitswerten können Sie auch andere Werte verwenden, allerdings sind Wahrheitswerte für zwei Alternativen naheliegend und praktisch.

Testen Sie den Film. Wenn Sie nach Ablauf des Videos auf die Play-Schaltfläche klicken, geht der Film erst beim zweiten Klick weiter. Der Grund: Die Variable zustand wurde am Ende des MovieClips mit dem Video nicht geändert. Das holen Sie gleich nach.

Wechseln Sie in den MovieClip in das erste Schlüsselbild und vergeben Sie für die Variable zustand den Wert true:

_parent.zustand = true;

Vorsicht, Sie müssen die Variable korrekt adressieren, da sie sich in der Hauptzeitleiste befindet, das Skript aber in der Zeitleiste des MovieClips steht. Alternativ zur hier eingesetzten relativen Adresse können Sie auch absolut adressieren:

_root.zustand = true;

Abbildung 17.8 Zwei Zustände der Schaltfläche

Das fertige Beispiel finden Sie unter dem Namen video_eineschaltfuerzwei_AS2.fla auf der CD-ROM zum Buch. Achten Sie bei eigenen Anpassungen darauf, immer die Übersicht zu bewahren: Was geschieht in welchem Zustand, wann ändert sich ein Zustand automatisch? So vermeiden Sie kleinere Fehler wie eben in unserem Beispiel am Ende des Videos.

Dieser Trick, Zustände in Variablen zu speichern, funktioniert natürlich nicht nur für Videos, sondern auch für Sound oder für eine normale Filmsteuerung. Und selbst mit mehr als zwei Zuständen für eine Schaltfläche klappt es. Am besten speichern Sie die einzelnen Zustände als Zahlen ab und überprüfen mit if-else if die verschiedenen Werte. Wichtig ist, dass sich der Zustand immer ändert, wenn der Nutzer geklickt hat. Hier eine Fallunterscheidung, wie das Ganze aussehen könnte:

var zustand = 0;
schaltflaeche_btn.onRelease = function() {
   if (zustand == 0) {
      //Anweisungen
      zustand++;
   } else if (zustand == 1) {
      //Anweisungen
      zustand++;
   } else if (zustand == 2) {
   //Anweisungen
   zustand = 1;
   }
};

Vor dem Ereignis definieren Sie die Variable (beispielsweise mit dem Namen zustand), anschließend folgt die Ereignisprozedur, die jeden Klick des Nutzers auf die Schaltfläche abfängt.

Eine if-else if-Fallunterscheidung prüft, welchen Wert der Zustand gerade hat, und führt entsprechende Anweisungen aus (hier als Kommentare dargestellt, die aber nichts bewirken).

Entscheidend ist, dass Sie nach jedem Klick den Zustand (also den Wert der Variablen zustand) ändern. Wenn Sie nach einer bestimmten Anzahl an Klicks wieder zum Ursprungszustand zurückkehren möchten, setzen Sie einfach die Variable zustand auf den ursprünglichen Wert (hier 0) zurück.

Ende in Sicht?

Möchten Sie feststellen, ob ein Video bereits abgelaufen ist, verwenden Sie die beiden Eigenschaften currentframe und _totalframes:

• _currentframe liefert die Auskunft, bei welchem Bild sich der Abspielkopf befindet:

_root.video_mc._currentframe;

• _totalframes gibt an, wie viele Frames ein MovieClip insgesamt hat:

_root.video_mc._totalframes

Aus beiden Eigenschaften konstruieren Sie eine einfache Überprüfung:

if (_root.video_mc._currentframe == _root.video_mc._totalframes) {
   trace("Video ist am Ende");
}

Wenn das aktuelle Bild dem letzten Bild des MovieClips entspricht, ist das Video zu Ende.

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.