Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Frank Puscher 25. April 2007

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

Kein Beitragsbild

Eine ent­schei­den­de Stärke von Flash-Video ist der Umstand, dass der Designer die Controls selbst ent­wer­fen und pro­gram­mie­ren kann. Wie das geht, zeigt Ihnen die­ses Tutorial.


Im Handumdrehen gestal­ten Sie eige­ne Navigationselemente für jeden Film

Wenn Sie sich dafür ent­schei­den, die Steuerung des Videos mit eige­nen Kontrollelementen zu ermög­li­chen oder wenn Sie Benutzer der ein­fa­chen Version von Flash 8 und nicht der Pro-Version sind, kön­nen Sie ein­ge­bet­te­te Videos mühe­los auf der Timeline steu­ern. Einfache Buttons sor­gen für die ent­spre­chen­de Funktion. Die Standard-Funktionen sind zum Beispiel:

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

Screenshot

Fertige Schaltflächen fin­den Sie in der „Allgemeinen Bibliothek“

Spannend wird es bei den Buttons für schnel­les Zurück- oder Vorspulen. Der Button für schnel­les Zurückspulen über­springt ein­fach 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 lau­tet die Programmierung des Button zum Vorspulen iden­tisch mit der Ausnahme, dass die Variable nicht „rewind“ son­dern „fore­ward“ heißt.

Beide Variablen wer­den von einem Kontrollclip aus­ge­le­sen. Erzeugen Sie ein neu­es MovieClip. Es besitzt zwei Frames, damit es gezwun­gen wird, sich stän­dig zu wie­der­ho­len und so die fol­gen­de Programmierung immer wie­der durch­ge­ar­bei­tet wird.

Screenshot

Das Steuerungsclip über­wacht und regelt die Interaktion mit dem Video

In bei­den Schlüsselbildern set­zen Sie die iden­ti­sche Programmierung ein:

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

Das Zurückspulen funk­tio­niert also nur, wenn der Film den vier­ten Frame über­schrit­ten hat.

Für das Vorspulen müs­sen wir noch die Menge der gesam­ten Frames erhe­ben, um zu wis­sen, wann das Vorspulen been­det sein soll.

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

Wenn Sie die Programmierung been­det haben, gehen Sie zurück in Szene 1 und zie­hen 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 bedeu­tet, der kann schließ­lich noch eine inter­ak­ti­ve Playback-Anzeige ein­bau­en. Die erfüllt gleich zwei Zwecke. Sie zeigt an, wie weit der Film gemes­sen an der Gesamtlänge bereits abge­spielt wur­de und sie dient als Schieberegler, mit dem der Film vor und zurück gespult wer­den kann.

Screenshot

Der Abspielknopf kann auch zur Navigation im Film ein­ge­setzt wer­den

Erzeugen Sie dazu einen Schieberegler, des­sen Schiene genau­so breit ist, wie das Video also in unse­rem Beispiel 300 Pixel. Wandeln Sie den Schieber zuerst in einen Button und dann in ein Movieclip um. Der Instanzname des Clips lau­tet „anzei­ge“.

Gehen Sie in den Bearbeitungsmodus und geben Sie dem Button fol­gen­des 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 lin­ke und rech­te Kante des Reglerfeldes sowie des­sen hori­zon­ta­le Mittelachse.

Wechseln Sie nun erneut ins Kontrollclip und plat­zie­ren Sie die­se klei­ne Programmierung eben­falls im ers­ten 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 errech­net das Kontrollclip die rich­ti­ge Position des Videos als Frame auf der Timeline von Szene 1. Die Berechnung folgt der Formel: (X-Koordinate des Schiebers – mini­ma­le X-Koordinate) mul­ti­pli­ziert mit (der Relation der Menge aller Frames in Szene 1 zur Breite des Schieberfeldes in Pixel). Damit Flash das Ganze inter­pre­tie­ren kann, muss das Ergebnis eine Ganzzahl sein, die wir durch die Rundung Math.round erhal­ten.

Ist der Button nicht gedrückt, errech­net sich umge­kehrt die Position des Schiebers aus dem aktu­el­len Frame des Videos. Dabei wird die X-Koordinate des Schiebers zusätz­lich um sei­nen Minimalwert nach rechts ver­scho­ben und durch den Bereinigungswert geteilt. (tm)

Material zum Artikel:

  • .FLA Datei zum Download

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.

Schreibe einen Kommentar

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