Anzeige
Tutorialbeschreibung

ActionScript 3: Erstellen eines Videoplayers

ActionScript 3: Erstellen eines Videoplayers

In diesem Tutorial werden wir einen Videoplayer in Flash mithilfe von ActionScript 3 erstellen. Die Schaltflächen und Weiteres solltet ihr schon erstellt haben. Dies ist nicht Teil des Tutorials. Zudem solltet ihr mit Flash CS4 (oder höher) und ActionScript 3 vertraut sein. Im Tutorial gehe ich davon aus, dass ihr Illustrator habt und dort die Schaltflächen erstellt habt. Es ist natürlich auch ohne Illustrator möglich, doch ich beziehe mich darauf.


Schritt 1

Vorweg einige Anmerkungen:

• Ich werde eine Dokumentenklasse benutzen, also nicht das Aktionenfenster von Flash.
• Ich werde anfangs meist Tastenkürzel nutzen, die auf dem Mac funktionieren. D.h., Windows-Benutzer müssen anstatt CMD in der Regel die Taste Strg nutzen.
• Ich werde mich auf die mitgelieferte Illustrator-Datei beziehen. Bei euch können also andere Größen (vor allem der Bühnengröße) auftreten.
• Ich werde nicht alles erklären. Manche Berechnungen sind dank der Mathematik entstanden, und die werden ich nicht erklären.


Schritt 2

Erstellt euch eine rechteckige Fläche, die sichtbar sein soll, wenn der Benutzer mit der Maus über das Video fährt, und die alle Schaltflächen beinhaltet. Wenn ihr jetzt nicht genau wisst, was ich meine, schaut euch YouTube-Videos (oder die mitgelieferte Illustrator-CS4-Datei) an und fahrt mit der Maus über das Video. Das, was nun sichtbar ist, solltet ihr erstellen. Dazu gehören:

• eine Fläche, die den Bereich kennzeichnet, in dem der Benutzer durch das Video scrubben kann (im Folgenden ScrollPane genannt).
• ein "Objekt", das der Benutzer anklicken muss, um durch das Bild zu scrubben, als Normal- und Hoverstatus (im Folgenden ScrollPointSTD und ScrollPointHOVER genannt).
• eine Play-Schaltfläche im Normalstatus und im Hoverstatus (im Folgenden PlaySTD und PlayHover genannt).
• eine Pause-Schaltfläche im Normalstatus und im Hoverstatus (im Folgenden PauseSTD und PauseHover genannt).
• eine Lautsprecher-Schaltfläche im Normalstatus und im Hoverstatus (im Folgenden SpeakerSTD und SpeakerHOVER genannt).

 
Diese Lautsprecher-Schaltflächen solltet ihr insgesamt viermal haben (je eine im Normal- und eine im Hoverstatus), und zwar so:

• ein Symbol für Ton aus (im Folgenden SpeakerSTD_0 / SpeakerHOVER_0 genannt).
• für niedrige Lautstärke (im Folgenden SpeakerSTD_1 / SpeakerHOVER_1 genannt).
• für mittlere Lautstärke (im Folgenden SpeakerSTD_2 / SpeakerHOVER_2 genannt).
• für Maximallautstärke (im Folgenden SpeakerSTD_3 / SpeakerHOVER_3 genannt).

Dies ergibt dann die vier Lautsprecher-Schaltflächen.


Schritt 3

Startet Flash und erstellt euch eine neue Flash-Datei über CMD+N und Flash-Datei (ActionScript 3). Speichert die Datei unter den Namen VideoPlayer.fla in ein Verzeichnis eurer Wahl.


Schritt 4

Stellt im Eigenschaften-Panel (Fenster>Eigenschaften) die Bühnengröße auf 700 (Breite) und 525 (Höhe). Eure Videos sollten die gleiche Größe haben. Ihr könnt hier natürlich auch 800 mal 600 oder andere Größen nutzen. Dann müsst ihr, wenn ihr meine Illustrator-Datei nutzt, die Breite verändern.


Schritt 5

Öffnet eure (oder meine) Illustrator-Datei. Markiert dort alle Elemente (diese sollten schon fertig positioniert sein) und kopiert diese in die Zwischenablage über CMD+C. Jetzt könnt ihr Illustrator schließen. Im Folgenden werde ich mich auf meine Illustrator-Datei beziehen.


 

Schritt 6

Geht zu Flash und fügt die Elemente über CMD+V in Flash ein. Im nächsten Dialog könnt ihr OK klicken, wenn es so wie auf dem Bild aussieht.

Bilder


 

Schritt 7

Wandelt sogleich (OHNE das eingefügte Element zu deselektieren) das Element über Modifizieren>In Symbol konvertieren (oder F8) in ein Symbol um. Im folgenden Dialog übernimmt die Einstellungen aus dem Bild:

Name: MovieBarView
Typ: MovieClip Export für ActionScript anklicken (also ein Häkchen davor machen)
Klasse: MovieBarView

Bilder


Klickt dann OK und bestätigt die nächste Warnmeldung ebenfalls mit OK.


 

Schritt 8

Markiert alle Elemente innerhalb der MovieBarView und positioniert sie bei 0 (X und Y) im Eigenschaften-Panel, sollte dies noch nicht der Fall sein.


Schritt 9

Markiert die ScrollPointSTD und ScrollPointHOVER. Bei mir ist es das orangefarbene Objekt in der Mitte (das zweitgenannte liegt direkt darunter). Am besten, ihr zieht einen Auswahlrahmen um diese zwei Objekte und deselektiert dann die zwei blau-grünen Schaltflächen.

Bilder


 

Schritt 10

Wandelt das Element über Modifizieren>In Symbol konvertieren (oder F8) in ein Symbol um. Übernehmt im folgenden Dialog die Einstellungen aus dem Bild:

• Name: ScrollPoint
• Typ: Schaltfläche

Bilder


 

Schritt 11

Gebt dem Objekt sogleich den Namen scrollPoint_btn im Eigenschaften-Panel.

Bilder


 

Schritt 12

Macht diesen gleichen Schritt mit den Pause- und Play-Elementen (aber nicht mit den Lautsprecher-Symbolen). Sie sind ganz rechts (die Play-Schaltfläche liegt unterhalb der Pause-Schaltfläche). Der Dialog für die Pause-Schaltfläche:

Name: PauseBTN
Typ: Schaltfläche

Bilder


 
Gebt diesem Objekt dann den Namen pause_btn. Der Dialog für die Play-Schaltfläche:

Name: PlayBTN
Typ: Schaltfläche

Bilder


Gebt diesem Objekt dann den Namen play_btn.


 

Schritt 13

Alle drei genannten Schaltflächen müsst ihr jetzt noch bearbeiten, damit sie den Normal- und den Hover-Status anzeigen. Ich mache dies an dem Beispiel der Play-Schaltfläche. Doppelklickt auf diese Schaltfläche. In der Zeitleiste findet ihr nun vier Frames (Auf, Darüber, Gedrückt, Aktiv).

Markiert in der Ebene 1 den Frame Darüber und fügt ein neues Schlüsselbild über Rechtsklick>Schlüsselbild einfügen (NICHT Rechtsklick>Bild einfügen) hinzu. Markiert das oberste Objekt und löscht es. Nun seht ihr dort nur noch den Hover-Status. Geht nun zum Frame Aktiv und drückt F5 (oder Rechtsklick>Bild einfügen, diesmal also nur ein normales Bild!). Geht dann zurück zum Auf-Frame und löscht diesmal das untere Objekt, sodass der Normal-Status zu sehen ist.


Schritt 14

Nachdem ihr alle drei Schaltflächen bearbeitet habt, markiert ihr das mittlere Objekt innerhalb der MovieBarView und wandelt es in ein Symbol um. Gebt ihm danach den Namen scrollBar_mc.

Bilder


 
Der Dialog für die scrollBar_mc:

Name: ScrollPane
Typ: MovieClip

Bilder


 

Schritt 15

Markiert die acht Lautsprecher-Symbole (4 Normalstatus und 4 Hover-Status) und wandelt sie über F8 in ein Symbol um. Der Dialog dafür lautet:

Name: SpeakerMC
Typ: MovieClip

Bilder


 

Schritt 16

Doppelklickt nun den MovieClip und ihr habt acht Lautsprecher-Symbole. Je zwei gehören zusammen und dafür erstellt ihr jeweils eine Schaltfläche wie in Schritt 10:

Bilder


 
Wandelt das Element in ein Symbol über Modifizieren>In Symbol konvertieren (oder F8) um. Tragt im folgenden Dialog diese Daten für den Lautlos-Lautsprecher ein: Name: Speaker0, Typ: Schaltfläche. Dies macht ihr mit den anderen drei Lautsprechern ebenfalls.

Die Namen (im Symbol-konvertieren-Dialog) lauten Speaker1, Speaker2 und Speaker3 für Maximallautstärke. Im Eigenschaften-Panel gebt ihr jeder der vier Schaltflächen einen Namen. Speaker0 bekommt den Namen speaker0_btn, Speaker1 bekommt den Namen speaker1_btn, Speaker2 bekommt den Namen speaker2_btn, Speaker3 bekommt den Namen speaker3_btn.


Schritt 17

Alle vier genannten Schaltflächen müsst ihr jetzt noch bearbeiten, damit sie den Normal- und den Hover-Status anzeigen. Die Bearbeitung der Schaltflächen mache ich am Beispiel des Lautlos-Lautsprechers. Doppelklickt auf diese Schaltfläche. In der Zeitleiste findet ihr nun vier Frames (Auf, Darüber, Gedrückt, Aktiv). Markiert in der Ebene 1 den Frame Darüber und fügt ein neues Schlüsselbild über Rechtsklick>Schlüsselbild einfügen (NICHT Rechtsklick>Bild einfügen).

Markiert das oberste Objekt (also den Normalstatus) und löscht es. Jetzt seht ihr dort nur noch den Hover-Status. Geht zum Frame Aktiv und drückt F5 (oder Rechtsklick>Bild einfügen, diesmal also nur ein normales Bild!). Geht dann zurück zum Auf-Frame und löscht diesmal das untere Objekt, sodass der Normal-Status zu sehen ist. Am Ende solltet ihr sicherstellen, dass alle Elemente bei der Position 0 (X und Y) im Eigenschaften-Panel liegen.


 

Schritt 18

Geht eine Ebene nach oben, sodass ihr euch im SpeakerMC befindet. Markiert jedes Objekt einzeln und positioniert es bei 0 (X und Y) im Eigenschaften-Panel. Im Bild links seht ihr den Zustand vor dieser Aktion (ich hatte kurzzeitig die Schaltfläche verschoben, um die darunterliegenden Schaltfläche selektieren zu können) und im rechten Teil den Zustand danach.

Bilder


 

Schritt 19

Geht wiederum eine Ebene nach oben und benennt die SpeakerMC-Instanz speaker_mc im Eigenschaften-Panel.

Bilder


Schritt 20

Erstellt nun ein Textfeld und gebt diesem den Namen time_txt. Gebt diesem Textfeld den Text "00:00/00:00" und positioniert es dort, wo ihr es haben möchtet. In meinem Fall ist es ganz links. Dieses Textfeld wird später die aktuelle Zeit und Dauer des Videos anzeigen. Erstellt noch ein Textfeld zur Anzeige des Titels und nennt es title_txt.

Ihr braucht dem keinen Text zu geben, positioniert es aber dort, wo ihr es haben möchtet. In meinem Fall direkt unter die ScrollPane. Ihr könnt hierbei gleich die Textfarbe und Schriftart für die Textfelder setzen. Wählt das, was euch gefällt. Wenn ihr nicht sicher seid, dass der Benutzer, der das Video sieht, eure Schriftart hat, so könnt ihr die gewählte Schriftart für das Textfeld auch einbetten.

 
Dazu markiert ihr euer Textfeld, klickt im Eigenschaften-Panel auf Zeicheneinbettung und bettet dann die Zeichen ein, die ihr benötigt. In meinem Fall bette ich die vier erstgenannten Gruppen ein. Dazu kommt noch Ä, Ö und Ü in kleinen und großen Buchstaben.

Bilder


Schritt 21

Geht noch eine Ebene höher und löscht die MovieBarView-Instanz von der Bühne. Wir werden sie später in ActionScript wieder auf die Bühne holen.


Schritt 22

Jetzt programmieren wir. Dazu erstellen wir zuerst eine Dokumentenklasse. CMD+N und dann ActionScript-Datei. Gebt Folgendes ein:
package net.ad_cosmos.videoPlayer{
//Import-Anweisungen

public class VideoPlayer extends MovieClip{

//Protected Variablen

public function VideoPlayer(){
trace("OK");
}
}
}

Der Package-Name wird sich bei euch ändern. Da ich einen zentralen Platz für meine Actionscript-Dateien habe und dies extra für dieses Tutorial nicht ändern möchte, belasse ich es in meiner Struktur. Es ist normal, seine eigene URL umzudrehen. Dabei ist jeder Text zwischen den Punkten ein Ordnername.

Wenn ihr also dieses Beispiel befolgen wollt, speichert diese Datei in net/ad_cosmos/videoPlayer unter dem Namen VideoPlayer.as relativ zu dem Speicherplatz eurer fla-Datei. Wenn ihr eure eigenen Packages erstellen wollt, beachtet, dass Minuszeichen nicht möglich sind. Diese müsst ihr mit Unterstrichen ersetzen.

Ihr möchtet diese Package-Struktur nicht nutzen? Dann löscht das net.ad_cosmos.videoPlayer und speichert diese as-Datei im selben Ordner wie die fla-Datei unter dem Namen VideoPlayer.as. Dort, wo der Kommentar "Import-Anweisungen" steht, folgen später die Import-Anweisungen.

Dann kommt die Klassendefinition, bei der wir den Namen der Klasse (VideoPlayer) und in unserem Fall die Oberklasse (MovieClip) angeben. Der Name der Klasse und der Name der as-Datei müssen identisch sein (mit Ausnahme der as-Extension). Jede Dokumentenklasse in Flash muss entweder von Sprite erben oder - wie hier - von MovieClip. Dann erstellen wir die Konstruktor-Funktion. Sie heißt genauso wie die Klasse und ist der Startpunkt, wenn wir die Flash-Datei (bzw. swf-Datei) starten. Ob die Verbindung von Flash zu ActionScript geklappt hat, lassen wir uns OK bei erfolgreicher Verbindung ausgeben.


 

Schritt 23

Wechselt wieder in die fla-Datei und geht zum Eigenschaften-Panel, nachdem ihr sicher seid, nicht selektiert zu haben. Seid ihr meiner Package-Struktur gefolgt, gebt dort "net.ad_cosmos.videoPlayer.VideoPlayer" ein. Sonst nur "VideoPlayer". Speichert die Datei und testet sie über CMD+Enter (oder Steuerung>Film testen). Ihr solltet im Ausgabe-Fenster (Fenster>Ausgabe, F2) die Ausgabe "OK" sehen.

Ihr bekommt kein "OK", sondern nur eine Fehlermeldung?

Richtig. Wir haben gesagt, die Oberklasse von VideoPlayer soll MovieClip sein. Wir haben bisher aber nicht gesagt, wo Flash die Klasse MovieClip findet. Dies werden wir im folgenden Schritt 24 tun. Doch um die "OK"-Ausgabe jetzt zu erhalten, kopiert vom folgenden Schritt 24 die erste Codezeile und testet es noch einmal. Jetzt sollte es funktionieren.


Schritt 24

Zurück zur Flash-Datei ersetzt ihr den Kommentar "Import-Anweisungen" durch Folgendes:
import flash.display.MovieClip;
import flash.events.AsyncErrorEvent;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.NetStatusEvent;
import flash.events.SecurityErrorEvent;
import flash.events.TimerEvent;
import flash.media.SoundTransform;
import flash.media.Video;
import flash.net.NetConnection;
import flash.net.NetStream;
import flash.utils.Timer;

import fl.transitions.easing.None;
import fl.transitions.Tween;

In Dokumentenklassen müssen wir alle Klassen importieren, die wir nutzen wollen. Habt ihr keine Dokumentenklasse, sondern schreibt alles in das Aktionen-Fenster von Flash, dann bräuchtet ihr das nicht zu machen (mit Ausnahme der letzten zwei Zeilen).

Unsere Dokumentenklasse erbt von MovieClip, also müssen wir MovieClip importieren. Das Gleiche gilt mit den Eventarten, die vom Video, von der Maus oder von einem Timer ausgelöst werden. Die Klasse SoundTransform ermöglicht uns, die Lautstärke des Videos zu verändern.

Die Klasse Video brauchen wir zur Darstellung des Videos. Die Klassen NetConnection und NetStream brauchen wir, um das Video zu "laden". Die Timer-Klasse ermöglicht uns das Erstellen eines Timers. Mit den letzten zwei Klassen Tween und None erstellen wir einen Tween, der die MovieBarView einblendet, wenn der Nutzer mit ihr interagieren will, und sich nach einiger Zeit selbst ausblendet.


Schritt 25

Nun ersetzen wir den Kommentar "Protected Variablen" mit dem Folgenden:
protected var movConnect:NetConnection;
protected var movStream:NetStream;
protected var mov:Video;
protected var duration:Number;
protected var movieBar_mc:MovieBarView;
protected var movUrl:String="townrace.mov";
protected var isPlaying:Boolean=true;
protected var timeOfLastMouseMove:Number=0;
protected var timeOfCurrentMouseMove:Number=0;
protected var timer:Timer;
protected var timeTimer:Timer;
protected var canScrollPointBeChanged:Boolean=true;
protected var tween:Tween;

Die ersten drei Variablen dienen uns dazu, um das Video zu laden und anzuzeigen. Dazu benötigt es eine Verbindung, dann einen Stream zur Video-Datei und dann muss das Video ja noch angezeigt werden. In der Variable duration speichern wir die Dauer des Videos. In der Variablen movieBar_mc speichern wir unsere Referenz auf die gerade bearbeitete MovieBarView. On MovUrl speichern wir die url zum Video.

Hier ist es nur zum Testen gedacht. Später werden wir per Parameter an die swf-Datei die URL mitgeben. In der Variablen isPlaying speichern wir, ob das Video gerade abgespielt wird oder nicht. Möchtet ihr, dass das Video automatisch abgespielt wird, setzt die Variable auf false. Soll es nicht automatisch abgespielt werden, setzt ihr sie auf true.

Mit den zwei Variablen timeOfLastMouseMove und timeOfCurrentMouseMove erstellen wir ein Verhalten, das, wenn der Benutzer zwei Sekunden lang seine Maus nicht bewegt, die MovieBarView ausfadet, und erst wieder einfadet, wenn er seine Maus bewegt. Als Nächstes kommen zwei Timer an die Reihe. Der erste ist für dieses Verhalten zuständig. Er ruft nach zwei Sekunden (die wir später definieren) eine Methode auf und überprüft timeOfLastMouseMove und timeOfCurrentMouseMove. Sollten beide identisch sein, wird die MovieBarView ausgefadet.

Der zweite Timer aktualisiert uns die Zeit und die Position des ScrollPoint innerhalb der ScrollPane. Mit der Variablen canScrollPointBeChanged speichern wir einen Zustand, ob der ScrollPoint automatisch seine Position aktualisiert (wenn das Video läuft), oder nicht (wenn der Benutzer selbst dabei ist, diesen zu ziehen). Zu guter Letzt kommt noch ein Twen, der für die FadeIn- und FadeOut-Animation zuständig ist.


Schritt 26

Nun befassen wir uns mit der Konstruktor-Funktion. Ersetzt die Anweisung "trace("OK");" durch das Folgende (ohne die Zeilennummer davor):
01: if(root.loaderInfo.parameters.file){
02: this.movUrl= root.loaderInfo.parameters.file;
03: }
04: this.movConnect = new NetConnection();
05: this.movConnect.connect(null);
06: this.movStream = new NetStream(movConnect);
07: var customClient:Object = new Object();
08: customClient.onMetaData = onMetaDataHandler;
09: this.movStream.client = customClient;
10: this.movStream.bufferTime=10;
11: this.movStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
12: this.movStream.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
13: this.mov= new Video(this.stage.stageWidth,this.stage.stageHeight);
14: this.mov.attachNetStream(movStream);
15: this.movStream.play(movUrl);
16: this.movStream.pause();
17: this.stage.addChild(this.mov);

18: this.movieBar_mc= new MovieBarView();
19: this.movieBar_mc.y=this.stage.stageHeight;
20: this.movieBar_mc.play_btn.addEventListener(MouseEvent.CLICK, playPauseHandler);
21: this.movieBar_mc.pause_btn.addEventListener(MouseEvent.CLICK, playPauseHandler);
22: this.movieBar_mc.scrollPoint_btn.addEventListener(MouseEvent.MOUSE_DOWN, scrollBeginHandler);
23: this.movieBar_mc.pause_btn.visible=false;
24: this.movieBar_mc.speaker_mc.speaker0_btn.addEventListener(MouseEvent.CLICK, volumeHandler);
25: this.movieBar_mc.speaker_mc.speaker1_btn.addEventListener(MouseEvent.CLICK, volumeHandler);
26: this.movieBar_mc.speaker_mc.speaker2_btn.addEventListener(MouseEvent.CLICK, volumeHandler);
27: this.movieBar_mc.speaker_mc.speaker3_btn.addEventListener(MouseEvent.CLICK, volumeHandler);
28: this.movieBar_mc.speaker_mc.speaker0_btn.visible=false;
29: this.movieBar_mc.speaker_mc.speaker1_btn.visible=false;
30: this.movieBar_mc.speaker_mc.speaker2_btn.visible=false;
31: this.movieBar_mc.title_txt.mouseEnabled=false;
32: this.movieBar_mc.time_txt.mouseEnabled=false;
33: if(root.loaderInfo.parameters.file){
34: this.movieBar_mc.title_txt.text= root.loaderInfo.parameters.title;
35: }
36: this.stage.addEventListener(MouseEvent.ROLL_OVER, overHandler);
37: this.stage.addEventListener(MouseEvent.MOUSE_MOVE, overHandler);
38: this.stage.addEventListener(MouseEvent.ROLL_OUT, outHandler);
39: this.stage.addEventListener(Event.MOUSE_LEAVE, outHandler);
40: this.stage.addChild(this.movieBar_mc);

41: this.timer= new Timer(2000);
42: this.timer.addEventListener(TimerEvent.TIMER, timerCompleteHandler);
43: this.timeTimer= new Timer(50);
44: this.timeTimer.addEventListener(TimerEvent.TIMER, timeHandler);

Nun zur Erklärung: Die ersten drei Zeilen setzen ein neue Video-Url, sofern es für die swf-Datei einen Parameter namens "file" gibt (den erkläre ich noch weiter unten). In Zeile 04 und 05 erstellen wir eine Connection. In Zeile 06 erstellen wir einen Stream und geben das Connection-Objekt mit, damit der Stream erfolgreich erstellt werden kann.

In Zeile 07 bis 09 erstellen wir ein eigenes Objekt, um die Metadaten des Videos an eine passende Methode (hier onMetadataHandler) zu senden. Dieses Objekt weisen wir dann in Zeile09 dem Stream-Objekt zu. In Zeile 10 setzen wir eine höheren Bufferwert als normal, damit das Video nicht nach jeder Sekunde pausiert, nur um neue Daten vom Video zu bekommen. Setzen wir diesen Wert nicht, fängt das Video eventuell an zu stottern. So habe ich es in vorherigen Projekten erlebt.

In Zeile 11 und 12 erstellen wir noch zwei EventListener für das movStream-Objekt. Ersterer teilt uns einige Informationen über den Stream mit, wenn er erfolgreich das erste Mal das Video abspielt (durch die Methode in Zeile 15) oder wenn der Buffer voll bzw. leer ist. Mit dem AsyncErrorEvent-EventListener fangen wir nur diese Events ab, damit unser Video trotzdem abgespielt werden kann. In Zeile 13 erstellen wir nun unser Video, das die Breite der Bühne und die Höhe der Bühne besitzt.

In Zeile 17 fügen wir es dann der Bühne hinzu, sodass wir es sehen können. Vorher sagen wir dem Video-Objekt, dass er die Daten aus dem movStream bekommt (Zeile 14), und in Zeile 15 starten wir das Laden der Video-Datei. Da wir nicht möchten, dass das Video gleich abgespielt wird, pausieren wir es, während die Daten weiterhin in den Buffer geladen werden. Von Zeile 18 bis Zeile 33 erstellen wir eine Instanz der MovieBarView und setzen deren Eigenschaften. Dazu gehört die y-Position (Zeile 19), deren Wert wir erst einmal außerhalb der Bühne setzen.

Später werden wir die y-Position anpassen, sodass sie sichtbar ist, wenn der Benutzer über das Video bzw. die Bühne mit der Maus fährt. Danach setzen wir die Sichtbarkeit der Schaltflächen und erstellen einen EventListener, der auf einen Mausklick reagiert. Bei scrollPoint_btn nutzen wir stattdessen einen MOUSE_DOWN-Event, da dieser währenddessen bewegt wird und durch das Video gescrubbt werden kann. In Zeile 31 und 32 deaktivieren wir für beide erstellten Textfelder, dass sie mit der Maus interagieren können (es gibt dann also keine Möglichkeit, diesen zu selektieren).

In Zeile 33 setzen wir den Titel des Videos, wenn es einen Parameter namens "title" für die swf-Datei gibt. Von Zeile 36 bis 39 erstellen wir vier EventListener, die unsere MovieBarView sichtbar oder unsichtbar machen. Dies geschieht einerseits über die Methode overHandler, andererseits über outHandler. In Zeile 40 legen wir die MovieBarView-Instanz endlich auf die Bühne, damit wir sie auch sehen können.

In Zeile 41 bis 44 erstellen wir uns die vorher schon genannten Timer und weisen denen entsprechende EventListener zu. Der eine Timer wird alle zwei Sekunden bzw. alle zweitausend Millisekunden aufgerufen, um zu gucken, ob die MovieBarView-Instanz unsichtbar gemacht werden kann. Der andere Timer dient uns zur Positionierung des ScrollPoint. Die zwei Methoden werden dann vom Timer alle 2000 Millisekunden bzw. alle 50 Millisekunden aufgerufen, wenn wir sie gestartet haben. (Was wir hier noch nicht getan haben. Dazu kommen wir später).


Schritt 27

Fügt eurem SourceCode nun unterhalb (NICHT innerhalb) der Konstruktor-Funktion folgende Methode hinzu:
protected function scrollBeginHandler(e:Event):void{
}

protected function scrollMoveHandler(e:Event):void{
}

protected function scrollEndHandler(e:Event):void{
}

protected function overHandler(e:Event):void{
}

protected function timerCompleteHandler(e:Event):void{
}

protected function timeHandler(e:Event):void{
}

protected function getTimeAsString(nr:Number):String{
}

protected function outHandler(e:Event):void{
}

protected function playPauseHandler(e:MouseEvent):void{
}

protected function volumeHandler(e:MouseEvent):void{
}

protected function onMetaDataHandler(obj:Object){
}

protected function netStatusHandler(e:NetStatusEvent):void{
}

protected function asyncErrorHandler(e:AsyncErrorEvent):void {
// ignore AsyncErrorEvent events.
}

Mit der letztgenannten Methode fangen wir die AsyncErrorEvents ab, sollten solche auftreten. Diese Methode ist damit schon fertig. Nun befüllen wir die anderen Methoden mit Inhalt.


Schritt 28

Fangen wir mit dem scrollBeginHandler an. Fügt der Methode die folgenden Zeilen hinzu:
this.canScrollPointBeChanged=false;
e.target.x=mouseX-e.target.width/2;
this.stage.addEventListener(MouseEvent.MOUSE_MOVE, scrollMoveHandler);
this.stage.addEventListener(MouseEvent.MOUSE_UP, scrollEndHandler);

Zuerst setzen wir unsere Variable canScrollPointBeChanged auf false, damit der ScrollPoint sich ab jetzt nicht mehr selbst positioniert (solange, bis wir die Maustaste wieder loslassen). Dann positionieren wir den ScrollPoint dort, wo der Benutzer gerade auf den ScrollPoint geklickt hat. Dann erstellen wir zwei EventListener. Ersterer erlaubt uns nun, den ScrollPoint nach links und rechts zu schieben (siehe scrollMoveHandler) und natürlich auch einen EventListener, damit wir wissen, wann wir aufhören müssen, durch das Video zu scrubben.


Schritt 29

Nun zur Methode scrollMoveHandler (ohne die Zeilennummern):
01: if (mouseX-this.movieBar_mc.scrollPoint_btn.width/2>=this.movieBar_mc.scrollBar_mc.x && 
mouseX-this.movieBar_mc.scrollPoint_btn.width/2<=this.movieBar_mc.scrollBar_mc.x+this.movieBar_mc.scrollBar_mc.width-this.movieBar_mc.scrollPoint_btn.width){
02:this.movieBar_mc.scrollPoint_btn.x=mouseX-this.movieBar_mc.scrollPoint_btn.width/2;
03:var timeOfVideo:Number=(this.movieBar_mc.scrollPoint_btn.x-this.movieBar_mc.scrollBar_mc.x)/(this.movieBar_mc.scrollBar_mc.width-this.movieBar_mc.scrollPoint_btn.width);
04:if (!this.isPlaying){
05:this.playPauseHandler(null);
06:}
07:this.movStream.seek(timeOfVideo*duration);
08: }

Lasst euch von der if-Bedingung nicht erschrecken. Hier überprüfen wir nur, dass der ScrollPoint weder zu weit nach links noch zu weit nach rechts geschoben werden kann. Er kann also nur innerhalb der ScrollPane verschoben werden. Wenn diese Bedingung wahr ist, so aktualisieren wir die Position des ScrollPoints (Zeile 02) und errechnen dann die zeitliche Position des Videos (Zeile 03).

Von Zeile 04 bis 06 starten wir das Video, wenn es noch nicht gestartet wurde. Bei einem pausierten Video kann man ja schlecht scrubben, oder? In Zeile 07 schließlich sagen wir dem Stream, dass er zu der berechneten Zeit gehen und ab dort das Video abspielen soll.


Schritt 30

Und nun zur Methode scrollEndHandler:
this.canScrollPointBeChanged=true;
this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, scrollMoveHandler);
this.stage.removeEventListener(MouseEvent.MOUSE_UP, scrollEndHandler);

Hier entfernen wir unsere zwei EventListener, die wir in scrollBeginHandler erstellt hatten, und setzen die Variable canScrollPointBeChanged auf true, damit sich die Position des ScrollPoints wieder selbstständig aktualisieren kann, während das Video läuft.


Schritt 31

Nun zur Methode overHandler:
if (this.movieBar_mc.y!=this.stage.stageHeight-this.movieBar_mc.height){
if (this.tween){
this.tween.stop();
}
this.tween=new Tween(this.movieBar_mc, "y", None.easeOut, this.movieBar_mc.y, this.stage.stageHeight-this.movieBar_mc.height, 0.5, true);
}
this.timeOfCurrentMouseMove++;
this.timer.reset();
this.timer.start();

Zur Erklärung: Sollte die y-Position der movieBar nicht am richtigen Platz sein (also unten am "Bildschirmrand"), dann positionieren wir sie jetzt. Dazu stoppen wir den Tween, wenn er vorhanden ist. So kann es ja sein, dass gerade die movieBar ausgefadet wird. Dies soll jetzt natürlich gestoppt werden, und die movieBar soll voll sichtbar sein.

Um den Tween aber zu stoppen, müssen wir sicher sein, dass er überhaupt existiert, sodass wir in der zweiten Zeile die if-Bedingung brauchen. Anschließend erstellen wir uns einen neuen Tween, der die movieBar vollkommen sichtbar macht. Sie wird hier also von unten auf die Bühne geschoben.

Danach erhöhen wir timeOfCurrentMouseMove um eins, damit die movieBar nicht ausgeblendet wird. Zudem starten wir den Timer neu (also erst ein Reset, dann der Start), der nach zwei Sekunden die movieBar wieder unsichtbar macht.


Schritt 32

Und nun zur Methode timerCompleteHandler:
if (this.timeOfLastMouseMove==this.timeOfCurrentMouseMove){
this.outHandler(null);
this.timeOfLastMouseMove=this.timeOfCurrentMouseMove=0;
}
else{
this.timeOfLastMouseMove=this.timeOfCurrentMouseMove;
}

Wenn die zwei genannten Variablen den gleichen Wert haben, wird der outHandler aufgerufen. Da dieser ein Event als Parameter benötigt und wir diesen nicht haben, übergeben wir null. Dann setzen wir die beiden genannten Variablen wieder auf Ihren Ursprungswert, der bei 0 liegt. Sollte der Wert verschieden sein, so wird timeOfLastMouseMove der Wert von timeOfCurrentMouseMove zugewiesen. Die Variable timeOfCurrentMouseMove wird immer verändert, wenn der Benutzer die Maus bewegt. Wenn er die Maus also 2 Sekunden lang nicht bewegt, sind die beiden Werte identisch. Dann wird der outHandler aufgerufen.


Schritt 33

Jetzt zur Methode timeHandler:
if(this.canScrollPointBeChanged){
this.movieBar_mc.scrollPoint_btn.x=this.movieBar_mc.scrollBar_mc.x+(this.movStream.time/this.duration)*(this.movieBar_mc.scrollBar_mc.width-this.movieBar_mc.scrollPoint_btn.width);
}
this.movieBar_mc.time_txt.text=getTimeAsString(this.movStream.time)+"/"+getTimeAsString(this.duration);

Wenn die Variable canScrollPointBeChanged true ist (d.h., der Benutzer drückt aktuell nicht den ScrollPoint), dann wird der ScrollPoint auf die Position gesetzt, wo er jetzt sein müsste relativ zum Video. Sprich: Ist das Video am Anfang, ist auch der ScrollPoint am Anfang der ScrollPane: Ist das Video am Ende, ist auch der ScrollPoint am rechten Ende der ScrollPane. Danach aktualisiere ich die Zeitanzeige für das Video im time_txt-Textfeld. Das Format lautet am Ende 00:00/00:00, wobei die erste Doppelnull die Minute repräsentiert und die zweite die Sekunden. Zur Anzeige dieser nutze ich eine Hilfsmethode namens getTimeAsString, zu der ich im nächsten Schritt komme.


Schritt 34

var returnString:String="";
var seconds:uint=nr;
var min:uint=seconds/60;
seconds=seconds%60;
if (min<10){
returnString=returnString.concat("0");
}
returnString=returnString.concat(min,":");
if (seconds<10){
returnString=returnString.concat("0");
}
returnString=returnString.concat(seconds);
return returnString;

Zuerst erstellen wir eine Variable (returnString), die eine Zeichenkette repräsentiert. Diese werden wir nutzen, um die Zeit anzuzeigen. In der nächsten Zeile wandeln wir den Wert der Variablen nr (Sie ist eine Zahl und kann ein Komma enthalten) in eine ganze positive Zahl um. Beispielsweise kann nr=73.4 sein und seconds bekommt dann den Wert 73. Diesen Wert durch 60 geteilt, ergibt unsere Minutenzahl (in diesem Fall dann 1). Nun müssen wir natürlich noch die korrekte Sekundenzahl ermitteln. Dazu ermitteln wir den Rest von 73/60, was 13 ergibt. Sollte die Minutenzahl kleiner 10 sein (also einstellig), fügen wir dem returnString eine 0 hinzu. Danach fügen wir den Wert der Minute hinzu, gefolgt von einem Doppelpunkt. Bis hierhin hat returnString den Wert "01:". Das gleiche Spiel wiederholen wir für die Sekunden (mit Ausnahme des Doppelpunktes am Ende). So hat returnString am Ende den Wert "01:13", den wir in der letzten Zeile zurückgeben.


Schritt 35

Nun zur Methode outHandler:
this.tween=new Tween(this.movieBar_mc, "y", None.easeOut, this.movieBar_mc.y , this.stage.stageHeight, 0.5, true);

Sie besteht nur aus der einen Zeile, die die MovieBar wieder nach unten, außerhalb des Sichtbereiches, verschiebt. Hier kurz zur Struktur des Aufrufes der Konstruktor-Funktion der Twen-Klasse: Zuerst gebt ihr das Objekt an, das getweent wird. Anschließend als String, welche Eigenschaft getweent werden soll.

An dritter Stelle müsst ihr angeben, welche Easing-Funktion ihr für die Animation nutzen möchtet. Hier gibt es zum Beispiel Bounce-Effekte mit einem EaseIn, EaseOut, EaseInOut und einer linearen Funktion. Danach gebt ihr den Startwert für den Tween und anschließend den Endwert an.

Mit dem vorletzten Parameter gebt ihr die Dauer des Twen an. In unserem Beispiel eine halbe Sekunde. Wir könnten hier auch nicht nur Sekunden nutzen, sondern Frames. Zum Beispiel 50 Frames soll der Twen lang sein. Dann müsst ihr den letzten Parameter aber auf false setzen. Ist er false, ist 0.5 die Framedauer, ist er true, ist die 0.5 die Sekundendauer.


Schritt 36

Nun zur Methode playPauseHandler:
this.isPlaying= !this.isPlaying;
if (this.isPlaying){
this.movieBar_mc.play_btn.visible=false;
this.movieBar_mc.pause_btn.visible=true;
this.timeTimer.start();
this.movStream.resume();
}
else{
this.movieBar_mc.play_btn.visible=true;
this.movieBar_mc.pause_btn.visible=false;
this.timeTimer.stop();
this.movStream.pause();
}

Wenn diese Methode aufgerufen wird, wird der Wert der Variablen isPlaying umgekehrt. D.h., aus false wird true oder aus true wird false. Sollte isPlaying nun true sein, so soll das Video abgespielt werden. Dazu wird die Play-Schaltfläche unsichtbar gemacht und die Pause-Schaltfläche sichtbar.

Schließlich können wir, wenn ein Video abgespielt wird, nicht mehr Play drücken (oder sollten es nicht können). Dann wird der timeTimer gestartet, der die Position des ScrollPoints und die aktuelle Zeit des Videos aktualisiert. timeTimer wird nun automatisch alle 50 Sekunden die Methode timeHandler aufrufen, bis wir den timeTimer wieder starten.

Dann sagen wir dem movStream noch, dass er das Video wieder abspielen darf, und zwar von dort, wo das Video zum letzten Mal angehalten wurde. Der else-Zweig ist die genaue Umkehr vom if-Zweig. Diesmal wird die Play-Schaltfläche sichtbar und die Pause-Schaltfläche unsichtbar gemacht. Wir stoppen den Timer, da die Position des ScrollPoints und auch die Zeit sich nicht ändern können, wenn das Video pausiert ist. Letztendlich pausieren wir auch den Stream und das Video.


 

Schritt 37

Nun zur Methode volumeHandler:
var soundVolume:Number=0;
this.movieBar_mc.speaker_mc.speaker0_btn.visible=false;
this.movieBar_mc.speaker_mc.speaker1_btn.visible=false;
this.movieBar_mc.speaker_mc.speaker2_btn.visible=false;
this.movieBar_mc.speaker_mc.speaker3_btn.visible=false;
switch(e.target.name){
case "speaker3_btn":
this.movieBar_mc.speaker_mc.speaker0_btn.visible=true;
break;
case "speaker2_btn":
this.movieBar_mc.speaker_mc.speaker3_btn.visible=true;
soundVolume=1;
break;
case "speaker1_btn":
this.movieBar_mc.speaker_mc.speaker2_btn.visible=true;
soundVolume=0.7;
break;
case "speaker0_btn":
this.movieBar_mc.speaker_mc.speaker1_btn.visible=true;
soundVolume=0.3;
break;
}
this.movStream.soundTransform= new SoundTransform(soundVolume);
this.timer.reset();
this.timer.start();

Als Erstes erstellen wir eine Variable, die die aktuelle Lautstärke des Videos speichern soll. Anschließend setzen wir alle vier Lautsprecher-Schaltflächen auf unsichtbar. Keine Sorge, den richtigen machen wir gleich wieder sichtbar. Dann folgt eine switch-Verzweigung, die auf Basis des Namens des angeklickten Lautsprechers einen anderen Zweig wählt.

1. Wurde die Lautsprecher-Schaltfläche mit dem Namen "speaker3_btn" (d.h. die Lautsprecher-Schaltfläche, die die Maximallautstärke repräsentiert) gedrückt, wird die Lautsprecher-Schaltfläche, die die niedrigste Lautstärke (also 0 bzw. stumm) repräsentiert, sichtbar gemacht. Die Variable soundVolume müssen wir nicht ändern, da sie ja schon bei 0 liegt.

2. Wurde die Lautsprecher-Schaltfläche mit dem Namen "speaker2_btn" (d.h. die Lautsprecher-Schaltfläche, die die zweithöchste Lautstärke repräsentiert) gedrückt, wird die Lautsprecher-Schaltfläche, die die höchste Lautstärke repräsentiert, sichtbar gemacht. Die Variable soundVolume müssen wir dementsprechend auf 1 setzen.

3. Wurde die Lautsprecher-Schaltfläche mit dem Namen "speaker1_btn" (d.h. die Lautsprecher-Schaltfläche, die die zweitniedrigste Lautstärke repräsentiert) gedrückt, wird die Lautsprecher-Schaltfläche, die die zweithöchste Lautstärke repräsentiert, sichtbar gemacht. Die Variable soundVolume müssen wir dementsprechend auf 0.7 setzen.

4. Wurde die Lautsprecher-Schaltfläche mit dem Namen "speaker0_btn" (d.h. die Lautsprecher-Schaltfläche, die die niedrigste Lautstärke repräsentiert) gedrückt, wird die Lautsprecher-Schaltfläche, die die zweitniedrigste Lautstärke repräsentiert, sichtbar gemacht. Die Variable soundVolume müssen wir dementsprechend auf 0.3 setzen.

Es ist dabei folgende Rhythmus zu beobachten: Lautstärke 0 > Lautstärke 0.3 > Lautstärke 0.7 > Lautstärke 1 > Und wieder von vorne. Die jeweiligen Lautsprecher-Schaltflächen repräsentieren den aktuellen Stand. Ist also speaker0_btn sichtbar, ist der Ton aus. Mit einem Klick darauf erhöhen wir die Lautstärke auf 0.3, wobei 1 immer das Maximum ist. Außerhalb der switch-Verzweigung weisen wir dem movStream nun die aktuelle Lautstärke zu.

Dabei wird oft der Fehler gemacht, dass man this.movStream.soundTransform.volume=soundVolume schreibt. Dies funktioniert so aber nicht. Ihr müsst immer erst ein neues SoundTransform-Objekt erstellen und dieses dann der Eigenschaft soundTransform des movStream zuweisen. In den letzten zwei Zeilen resetten und starten wir den Timer neu, der unsere MovieBar nach zwei Sekunden Inaktivität ausblenden soll.


Schritt 38

Nun zur vorletzten Methode onMetaDataHandler:
this.duration=Number(obj.duration);

Diese Methode wird aufgerufen, wenn der NetStream (bei uns movStream genannt) Metadaten sendet. Aus diesen Metadaten nehmen wir die Dauer des Videos und speichern sie in der Variablen duration. Dazu müssen wir aber den mitgelieferten Wert erst in eine Zahl umwandeln.


Schritt 39

Jetzt zur letzten Methode netStatusHandler:
if (e.info.code=="NetStream.Buffer.Empty"){
this.playPauseHandler(null);
}
if (e.info.code=="NetStream.Play.Start"){
this.playPauseHandler(null);
}
if (e.info.code=="NetStream.Play.Stop"){
this.movStream.seek(0);
this.playPauseHandler(null);
}

Diese Methode wird aufgerufen, wenn ein NetStatusEvent vom NetStream (bei uns movStream genannt) gesendet wird. Wenn der Buffer leer sein sollte, wenn der Stream gestartet oder gestoppt wird, rufen wir die Methode playPauseHandler auf, um die aktuelle Sichtbarkeit der Pause- bzw. Play-Schaltfläche zu aktualisieren. Sollte der Stream gestoppt werden, was passiert, wenn das Video zu Ende ist, sagen wir dem Stream zusätzlich, dass er an den Anfang springen soll. Wenn der Benutzer nun auf die Play-Schaltfläche klickt, würde das Video wieder von vorne anfangen.


Schritt 40

Zum Abschluss noch einmal der vollständige SourceCode hintereinander:
package net.ad_cosmos.videoPlayer{

import flash.display.MovieClip;
import flash.events.AsyncErrorEvent;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.NetStatusEvent;
import flash.events.SecurityErrorEvent;
import flash.events.TimerEvent;
import flash.media.SoundTransform;
import flash.media.Video;
import flash.net.NetConnection;
import flash.net.NetStream;
import flash.utils.Timer;

import fl.transitions.easing.None;
import fl.transitions.Tween;

public class VideoPlayer extends MovieClip{

protected var movConnect:NetConnection;
protected var movStream:NetStream;
protected var mov:Video;
protected var duration:Number;
protected var movieBar_mc:MovieBarView;
protected var movUrl:String="townrace.mov";
protected var isPlaying:Boolean=true;
protected var timeOfLastMouseMove:Number=0;
protected var timeOfCurrentMouseMove:Number=0;
protected var timer:Timer;
protected var timeTimer:Timer;
protected var canScrollPointBeChanged:Boolean=true;
protected var tween:Tween;

public function VideoPlayer(){
if(root.loaderInfo.parameters.file){
this.movUrl= root.loaderInfo.parameters.file;
}
this.movConnect = new NetConnection();
this.movConnect.connect(null);
this.movStream = new NetStream(movConnect);
var customClient:Object = new Object();
this.movStream.client = customClient;
this.movStream.bufferTime=10;
customClient.onMetaData = onMetaDataHandler;
this.movStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
this.movStream.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
            this.mov= new Video(this.stage.stageWidth,this.stage.stageHeight);
            this.mov.attachNetStream(movStream);
           this.movStream.play(movUrl);
this.movStream.pause();
this.stage.addChild(this.mov);

this.movieBar_mc= new MovieBarView();
this.movieBar_mc.y=this.stage.stageHeight;
this.movieBar_mc.play_btn.addEventListener(MouseEvent.CLICK, playPauseHandler);
this.movieBar_mc.pause_btn.addEventListener(MouseEvent.CLICK, playPauseHandler);
this.movieBar_mc.scrollPoint_btn.addEventListener(MouseEvent.MOUSE_DOWN, scrollBeginHandler);
this.movieBar_mc.pause_btn.visible=false;
this.movieBar_mc.speaker_mc.speaker0_btn.addEventListener(MouseEvent.CLICK, volumeHandler);
this.movieBar_mc.speaker_mc.speaker1_btn.addEventListener(MouseEvent.CLICK, volumeHandler);
this.movieBar_mc.speaker_mc.speaker2_btn.addEventListener(MouseEvent.CLICK, volumeHandler);
this.movieBar_mc.speaker_mc.speaker3_btn.addEventListener(MouseEvent.CLICK, volumeHandler);
this.movieBar_mc.speaker_mc.speaker0_btn.visible=false;
this.movieBar_mc.speaker_mc.speaker1_btn.visible=false;
this.movieBar_mc.speaker_mc.speaker2_btn.visible=false;
this.movieBar_mc.title_txt.mouseEnabled=false;
this.movieBar_mc.time_txt.mouseEnabled=false;
if(root.loaderInfo.parameters.file){
this.movieBar_mc.title_txt.text= root.loaderInfo.parameters.title;
}
this.stage.addEventListener(MouseEvent.ROLL_OVER, overHandler);
this.stage.addEventListener(MouseEvent.MOUSE_MOVE, overHandler);
this.stage.addEventListener(MouseEvent.ROLL_OUT, outHandler);
this.stage.addEventListener(Event.MOUSE_LEAVE, outHandler);
this.stage.addChild(this.movieBar_mc);

this.timer= new Timer(2000);
this.timer.addEventListener(TimerEvent.TIMER, timerCompleteHandler);
this.timeTimer= new Timer(50);
this.timeTimer.addEventListener(TimerEvent.TIMER, timeHandler);
}

protected function scrollBeginHandler(e:Event):void{
this.canScrollPointBeChanged=false;
e.target.x=mouseX-e.target.width/2;
this.stage.addEventListener(MouseEvent.MOUSE_MOVE, scrollMoveHandler);
this.stage.addEventListener(MouseEvent.MOUSE_UP, scrollEndHandler);
}

protected function scrollMoveHandler(e:Event):void{
if (mouseX-this.movieBar_mc.scrollPoint_btn.width/2>=this.movieBar_mc.scrollBar_mc.x && 
mouseX-this.movieBar_mc.scrollPoint_btn.width/2<=this.movieBar_mc.scrollBar_mc.x+this.movieBar_mc.scrollBar_mc.width-this.movieBar_mc.scrollPoint_btn.width){
this.movieBar_mc.scrollPoint_btn.x=mouseX-this.movieBar_mc.scrollPoint_btn.width/2;
var timeOfVideo:Number=(this.movieBar_mc.scrollPoint_btn.x-this.movieBar_mc.scrollBar_mc.x)/(this.movieBar_mc.scrollBar_mc.width-this.movieBar_mc.scrollPoint_btn.width);
if (!this.isPlaying){
this.playPauseHandler(null);
}
this.movStream.seek(timeOfVideo*duration);
}
}

protected function scrollEndHandler(e:Event):void{
this.canScrollPointBeChanged=true;
this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, scrollMoveHandler);
this.stage.removeEventListener(MouseEvent.MOUSE_UP, scrollEndHandler);
}

protected function overHandler(e:Event):void{
if (this.movieBar_mc.y!=this.stage.stageHeight-this.movieBar_mc.height){
if (this.tween){
this.tween.stop();
}
this.tween=new Tween(this.movieBar_mc, "y", None.easeOut, this.movieBar_mc.y , this.stage.stageHeight-this.movieBar_mc.height, 0.5, true);
}
this.timeOfCurrentMouseMove++;
this.timer.reset();
this.timer.start();
}

protected function timerCompleteHandler(e:Event):void{
if (this.timeOfLastMouseMove==this.timeOfCurrentMouseMove){
this.outHandler(null);
this.timeOfLastMouseMove=this.timeOfCurrentMouseMove=0;
}
else{
this.timeOfLastMouseMove=this.timeOfCurrentMouseMove;
}
}

protected function timeHandler(e:Event):void{
if(this.canScrollPointBeChanged){
this.movieBar_mc.scrollPoint_btn.x=this.movieBar_mc.scrollBar_mc.x+(this.movStream.time/this.duration)*(this.movieBar_mc.scrollBar_mc.width-this.movieBar_mc.scrollPoint_btn.width);
}
this.movieBar_mc.time_txt.text=getTimeAsString(this.movStream.time)+"/"+getTimeAsString(this.duration);
}

protected function getTimeAsString(nr:Number):String{
var returnString:String="";
var seconds:uint=nr;
var min:uint=seconds/60;
seconds=seconds%60;
if (min<10){
returnString=returnString.concat("0");
}
returnString=returnString.concat(min,":");
if (seconds<10){
returnString=returnString.concat("0");
}
returnString=returnString.concat(seconds);
return returnString;
}

protected function outHandler(e:Event):void{
this.tween=new Tween(this.movieBar_mc, "y", None.easeOut, this.movieBar_mc.y , this.stage.stageHeight, 0.5, true);
}

protected function playPauseHandler(e:MouseEvent):void{
this.isPlaying= !this.isPlaying;
if (this.isPlaying){
this.movieBar_mc.play_btn.visible=false;
this.movieBar_mc.pause_btn.visible=true;
this.timeTimer.start();
this.movStream.resume();
}
else{
this.movieBar_mc.play_btn.visible=true;
this.movieBar_mc.pause_btn.visible=false;
this.timeTimer.stop();
this.movStream.pause();
}
}

protected function volumeHandler(e:MouseEvent):void{
var soundVolume:Number=0;
this.movieBar_mc.speaker_mc.speaker0_btn.visible=false;
this.movieBar_mc.speaker_mc.speaker1_btn.visible=false;
this.movieBar_mc.speaker_mc.speaker2_btn.visible=false;
this.movieBar_mc.speaker_mc.speaker3_btn.visible=false;
switch(e.target.name){
case "speaker3_btn":
this.movieBar_mc.speaker_mc.speaker0_btn.visible=true;
break;
case "speaker2_btn":
this.movieBar_mc.speaker_mc.speaker3_btn.visible=true;
soundVolume=1;
break;
case "speaker1_btn":
this.movieBar_mc.speaker_mc.speaker2_btn.visible=true;
soundVolume=0.7;
break;
case "speaker0_btn":
this.movieBar_mc.speaker_mc.speaker1_btn.visible=true;
soundVolume=0.3;
break;
}
this.movStream.soundTransform= new SoundTransform(soundVolume);
this.timer.reset();
this.timer.start();

}

protected function onMetaDataHandler(obj:Object){
this.duration=Number(obj.duration);
}

protected function netStatusHandler(e:NetStatusEvent):void{
if (e.info.code=="NetStream.Buffer.Empty"){
this.playPauseHandler(null);
}
if (e.info.code=="NetStream.Play.Start"){
this.playPauseHandler(null);
}
if (e.info.code=="NetStream.Play.Stop"){
this.movStream.seek(0);
this.playPauseHandler(null);
}
}

protected function asyncErrorHandler(e:AsyncErrorEvent):void {
// ignore AsyncErrorEvent events.
}
}
}



Schritt 41

Nun müsst ihr nur noch die Flash-Datei exportieren und in eine HTML-Seite einbetten. Um das richtige Video mit dem richtigen Titel anzuzeigen, müsst ihr in der HTML-Datei an die swf-Datei zwei Parameter anhängen: player.swf?file=video.f4v&title=Videotitel. Mit file gebt ihr an, welches Video ihr abspielen wollt (es sollte eine f4v- oder eine flv-Datei sein). Mit Titel gebt ihr den Titel des Videos an.

Wenn es Fragen oder Anregungen gibt, könnt ihr einen Kommentar hinterlassen. Sobald ich Zeit habe, werde ich dann darauf antworten.

DVD-Werbung

Passend zum Inhalt empfehlen wir: Das ultimative Training für JavaScript und jQuery

Deine App, dein Spiel, deine Website! Lege den Grundstein zur programmiertechnischen Umsetzung deiner Ideen, gehe sogleich darüber hinaus und wende direkt und praktisch an, was du gelernt hast. Dieses Training mit 52 Lektionen lässt dich in kurzer Zeit professionell und versiert Programmzeilen schreiben. Über 10,5 Stunden Video-Tutorials, in denen du alles Wissenswerte zu Variablen, Schleifen, Funktionen oder Operatoren in JavaScript erfährst. Dazu: jQuery – die Bibliothek, die auf über 75 Prozent der weltweit erfolgreichsten Webseiten zum Einsatz kommt und dich noch coolere Internetauftritte programmieren lässt. Einmal miteinander kombiniert, ist das, was du aus JavaScript und jQuery formen kannst, mit einem Wort: mächtig! Leicht zu erlernen für Einsteiger, vertiefend für Kenner und mit den Do-it-yourself-Praxisbeispielen relevant für alle, die von noch leeren Seiten Zeile für Zeile direkt zum fertigen Programm aufsteigen möchten.

  • 52 Lektionen in über 10,5 Stunden Video-Training zu JavaScript und jQuery
  • Erlerne die Grundlagen, gehe darüber hinaus und schreibe sodann eigene Programme
  • Inklusive Praxis-Herausforderungen: Programmiere ein Quiz, ein Spiel, eine FAQ-Seite und App
  • Von Programmier-Künstler und Profi-Trainer Denis Panjuta

Setze um, was dir vorschwebt! Mit Mitteln, die sich mehr als eignen, und mit fachlich glänzender Kompetenz!

Erhältlich im Shop ... oder in der Kreativ-Flatrate

Kommentare
Portrait von dmtw2107
  • 14.11.2013- 08:14

danke für das tolle tutorial

Portrait von Philly6
  • 09.01.2013- 17:27

Hallo alle zusammen
ich bekomme nur volgende Fehlermeldung

TypeError: Error #1010: Ein Begriff ist nicht definiert und hat keine Eigenschaften.
at net.ad_cosmos.videoPlayer::VideoPlayer()

ich binn totlaer flash noob aber ich komme mit fielen anderen programiersprachen einigermasen klar
aber AS ist mir ziemlich unübersichtlich

ich habe einfach die VideoPlayer.as hergenommen die bei dem download dabei war

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 09.01.2013- 23:05

Hallo,

Du brauchst auch die mitgelieferte Flash-Datei. Darin gibt es es eine MovieBarView. Da Du aber eine eigene Flash-Datei erstellt hast, findet er natürlich diese Klasse nicht.

Warum willst/kannst Du denn die mitgelieferte fla-Datei nicht nutzen?

MFG ADcosmos

Portrait von luciaf
  • 05.07.2012- 15:09

Hi, ich fands auch super beschrieben. vielleicht einen klitze kleinen Hinweis: bei Schritt 23 könnte man noch hinzufügen, dass erst noch flash.display.MovieClip importiert werden muss, denn ansonsten kommt man nie zu seiner "Ok"-Ausgabe. Könnte einen Anfänger viel Zeit kosten ^^

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 22.07.2012- 22:36

Hi,

danke für die Anregung. Habe den Schritt 23 jetzt modifiziert.

MFg ADcosmos

Portrait von Susan99
  • 16.06.2012- 14:16

Danke für das sehr interessante und gut beschriebene Tutorial.
LG Susan

Portrait von johanna52
  • 14.06.2012- 15:04

danke für das sehr interessante und sehr ausführliche, sehr gut erklärte Tut

Portrait von B00mer
  • 14.06.2012- 14:08

Möchte mich wenn Zeit ist einarbeiten. Danke!

Portrait von MaoMao
  • 14.06.2012- 13:50

Danke es hilft mir das Programm besser kennen zu lernen.

Portrait von Thomas_
  • 14.06.2012- 13:45

Habe zwar keine Ahnung, habs aber mal runter geladen.
Werde bei Gelegenheit mal rein schauen.
Danke

Portrait von MicroSmurf
  • 14.06.2012- 13:11

Sehr interessant. Danke


Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
x
×
×