Frank Puscher 25. April 2007

Online-Video mit Flash – Teil 3: Eigene Controls entwickeln

Kein Beitragsbild

Eine entscheidende Stärke von Flash-Video ist der Umstand, dass der Designer die Controls selbst entwerfen und programmieren kann. Wie das geht, zeigt Ihnen dieses Tutorial.


Im Handumdrehen gestalten Sie eigene Navigationselemente für jeden Film

Wenn Sie sich dafür entscheiden, die Steuerung des Videos mit eigenen Kontrollelementen zu ermöglichen oder wenn Sie Benutzer der einfachen Version von Flash 8 und nicht der Pro-Version sind, können Sie eingebettete Videos mühelos auf der Timeline steuern. Einfache Buttons sorgen für die entsprechende Funktion. Die Standard-Funktionen sind zum Beispiel:

 play(); ist Play
stop(); ist Pause
gotoAndStop(1); ist Stopp 

Screenshot

Fertige Schaltflächen finden Sie in der „Allgemeinen Bibliothek“

Spannend wird es bei den Buttons für schnelles Zurück- oder Vorspulen. Der Button für schnelles Zurückspulen überspringt einfach drei Frames im Rückwärtsgang. Dazu schreibt der Rückwärtsbutton eine Variable namens „rewind“:

      on(press){
rewind=1;
}on(release){
      rewind=0;
play();
}

Analog dazu lautet die Programmierung des Button zum Vorspulen identisch mit der Ausnahme, dass die Variable nicht „rewind“ sondern „foreward“ heißt.

Beide Variablen werden von einem Kontrollclip ausgelesen. Erzeugen Sie ein neues MovieClip. Es besitzt zwei Frames, damit es gezwungen wird, sich ständig zu wiederholen und so die folgende Programmierung immer wieder durchgearbeitet wird.

Screenshot

Das Steuerungsclip überwacht und regelt die Interaktion mit dem Video

In beiden Schlüsselbildern setzen Sie die identische Programmierung ein:

      if(_root.rewind==1){
if (_root._currentframe>4){
_root.gotoAndStop(_root._currentframe-4);
}
}

Das Zurückspulen funktioniert also nur, wenn der Film den vierten Frame überschritten hat.

Für das Vorspulen müssen wir noch die Menge der gesamten Frames erheben, um zu wissen, wann das Vorspulen beendet sein soll.

      if(_root.foreward==1){
if (_root._currentframe < (_root._totalframes-4)){
_root.gotoAndStop(_root._currentframe+4);
}
}

Wenn Sie die Programmierung beendet haben, gehen Sie zurück in Szene 1 und ziehen das neue Steuerungsclip aus der Bibliothek auf die Bühne. Übrigens: Fertige Buttons gibt’s in den Allgemeinen Bibliotheken und dort in den Schaltflächen.

Scrubbing
Wem auch das noch nicht genug Interaktion bedeutet, der kann schließlich noch eine interaktive Playback-Anzeige einbauen. Die erfüllt gleich zwei Zwecke. Sie zeigt an, wie weit der Film gemessen an der Gesamtlänge bereits abgespielt wurde und sie dient als Schieberegler, mit dem der Film vor und zurück gespult werden kann.

Screenshot

Der Abspielknopf kann auch zur Navigation im Film eingesetzt werden

Erzeugen Sie dazu einen Schieberegler, dessen Schiene genauso breit ist, wie das Video also in unserem Beispiel 300 Pixel. Wandeln Sie den Schieber zuerst in einen Button und dann in ein Movieclip um. Der Instanzname des Clips lautet „anzeige“.

Gehen Sie in den Bearbeitungsmodus und geben Sie dem Button folgendes Skript:

      on(press){
startDrag(this, false,60, 419, 360, 419);
_root.drag=1;
_root.stop();
}on(release){
stopDrag();
_root.drag=0;
_root.play();
}

Die Koordinaten des Begrenzungsrechtecks sind die linke und rechte Kante des Reglerfeldes sowie dessen horizontale Mittelachse.

Wechseln Sie nun erneut ins Kontrollclip und platzieren Sie diese kleine Programmierung ebenfalls im ersten Frame:

      if (_root.drag==1){
_root.gotoAndStop(Math.round((_root.anzeige._x-60)*1.35));
} else {
_root.anzeige._x = 60 + (_root._currentframe/1.35);
}

Ist der Button auf dem Schieber gedrückt, steht die Variable „drag“ auf 1. Dann errechnet das Kontrollclip die richtige Position des Videos als Frame auf der Timeline von Szene 1. Die Berechnung folgt der Formel: (X-Koordinate des Schiebers – minimale X-Koordinate) multipliziert mit (der Relation der Menge aller Frames in Szene 1 zur Breite des Schieberfeldes in Pixel). Damit Flash das Ganze interpretieren kann, muss das Ergebnis eine Ganzzahl sein, die wir durch die Rundung Math.round erhalten.

Ist der Button nicht gedrückt, errechnet sich umgekehrt die Position des Schiebers aus dem aktuellen Frame des Videos. Dabei wird die X-Koordinate des Schiebers zusätzlich um seinen Minimalwert nach rechts verschoben und durch den Bereinigungswert geteilt. ™

Material zum Artikel:

Erstveröffentlichung 25.04 .2007

Frank Puscher

Autor der Fachbücher "Leitfaden Web-Usability", "Flash MX-Das Kochbuch" und "Die Tricks der Internet Künstler". Frank Puscher ist nicht nur ein angesehener Autor, der für zahlreiche Fachzeitschriften tätig ist, er ist auch als Schulungsleiter und Berater erfolgreich.
Dr. Webs exklusiver Newsletter
Hinweise zur Protokollierung der Anmeldung, dem Einsatz von MailChimp als Versanddienstleister und zu den Widerrufsrechten findest Du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.