Dieser Artikel ist die technische Erweiterung zum Artikel /flash/erweiterte-grundlagen/streaming.
Wer nicht mit Streaming vertraut ist sollte sich zuerst diesen Artikel genauer ansehen bevor er versucht ein Streaming in Adobe Flash umzusetzten.
Inhalt
Das Streaming im allgemeinen ist ein wichtiger Faktor in Adobe Flash geworden. Schon alleine deswegen da ca. 99% aller User Adobe Flash installiert haben und man somit mit Adobe Flash Streaming die meisten User erreicht.
Die nachfolgenden Beispiele benötigen eine FLV Datei um diese nachzuvollziehen. Wie eine solche Datei erstellt wird wird in dem anderen Artikel genaue beschrieben.
Das Audiostreaming ist relativ einfach in Adobe Flash umzusetzen, man benötigt eine normale MP3 Datei welche natürlich auf 8Bit und 22 kHz runter gerechnet werden sollte.
Diese Datei muss unter einer URL im Internet erreichbar sein oder im selben Verzeichnis wie die Flashdatei liegen.
var my_sound:Sound = new Sound();
my_sound.loadSound("song.mp3", false);
my_sound.start();
Dieses Beispiel sollte bereit bekannt sein, hiermit werden Audiodateien in Adobe Flash geladen und können abgespielt werden.
Der Unterschied von der Streaming Version ist nur ein kleiner, aber seht selbst.
var my_sound:Sound = new Sound();
my_sound.loadSound("song.mp3", true);
my_sound.start();
Wie man hier sieht, hat sich nur ein Parameter geändert. Dieser Parameter legt fest das es sich hier um ein Streaming handelt und somit Adobe Flash diesen bereits beim runterladen abspielen kann.
Komplettes Beispiel
// Erstellt ein neues Sound object
var my_sound:Sound = new Sound();
// Fehlererkennung
my_sound.onLoad = function(success:Boolean) {
if (success) {
my_sound.start();
trace("Sound loaded");
}
else {trace("Sound failed");}
};
// Lädt die MP3 als Streaming
my_sound.loadSound("http://example.org/song.mp3", true);
Dieses Beispiel lädt die Datei als Streaming, prüft nach ob das Laden erfolgreich war und falls ja wird die Datei abgespielt.
Dies ist also ein komplettes Beispiel um ein MP3 als Streaming zu laden und abzuspielen.
Die einfachste Art ein Video Streaming in Adobe Flash einzubauen geht über die FLVPlayback Komponente, diese wird einfach der Bühne hinzugefügt.
Anschließend kann über ActionScript das Streaming gesteuert werden und auch das Design geändert werden.
Da dies ein wenig komplizierter ist, wird dies durch entsprechende Screenshots dargestellt.
Hinzufügen der FLVPlayback Komponente
Die FLVPlayback Komponente wird einfach aus der Komponenten Übersicht in die Bibliothek gezogen.
STRG+L öffnet bzw. schließt die Bibliothek und mit STRG+F7 kann man die Komponenten Übersicht öffnen bzw. schließen.
Alternativ kann man dies natürlich auch über das Menü machen wie dies auf den Screenshot angezeigt wird.
Erzeugen einer FLVPlayback Instanz
Damit auf FLVPlayback zugegriffen werden kann muss hierfür eine Instanz erzeugt werden.
Eine Instanz ist nichts anderes als eine Art Kopie, die alle Eigenschaft des Originals hat.
Es können also mehrere FLVPlayback Instanzen existieren aber nur eine FLVPlayback Komponente.
Am einfachsten wird diese Instanz erzeugt indem die Komponente in die Bühne gezogen wird.
Nachdem diese in der Bühne sichtbar ist, geben wir der Instanz den Namen myStream.
Laden und starten eines Streamings
Um nun ein Streaming in myStream zu laden und zu starten benützen wird ActionScript.
Mit Hilfe von myStream.load wird das entsprechende Stream entweder von der Bühne, Festplatte oder über eine URL geladen.
Anschließend starten wir das Streaming mit myStream.play() mit myStream.stop() kann das Stream gestoppt werden.
/**
Erforderlich:
- myStream Instanznamen von FLVPlayback-Komponente
*/
myStream.load("file:///F:/..../test.flv");
myStream.play();
In diesem Beispiel wird das Stream von der Festplatte geladen aus diesem Grund ist hier die Angabe file:/// zu sehen.
Würde hier nur test.flv stehen, so versucht Adobe Flash diesen Namen in der Bibliothek zu finden, nicht aber auf der Festplatte !
Im Normalfall steht hier eher http://example.org/test.flv da das Stream auf einen Webserver hinterlegt wird.
Adobe Flash bettet die Datei beim Export nicht mit ein, wenn also eine Projektor Datei oder eine SWF erstellt wird, ist das wieder nicht enthalten.
Der Flashplayer oder die Projektor Datei würde versuchen dieses von der Festplatte bzw. von der angegebenen URL zu laden.
Timer Events im Videostream
FLVPlayback ist sehr mächten und unterstützt verschiedene Features, einer der wichtigsten Feature sind CuePoints sogenannte Zeitmarken.
Mit Hilfe dieser CuePoints kann man festlegen das z.B: an Videostelle 1 Min 10 Sek eine bestimmte Action ausgeführt wird.
Ein CuePoint wird mit Hilfe von addASCuePoint() erzeugt und erhält die Zeit, den Name und evt. Parameter übergeben.
var cuePoint:Object = new Object(); // Cue-Point-Objekt erstellen.
cuePoint.time = 2.444; // Zeitmarker
cuePoint.name = "ASCuePoint"; // Name des Cue-Point
cuePoint.type = "actionscript"; // Typ
myStream.addASCuePoint(cuePoint); //AS-Cue-Point hinzufügen.
Bei diesen Beispiel hat der Cue-Point noch keine Action, diese muss mit Hilfe eines Eventshandler noch hinzugefügt werden damit Flash weiß was es an dieser Stelle tun soll.
Die angegebene Zeit ist nur für das Video gültig, wenn das Video also nicht starten sollte oder vorher angehalten wird, wird dieser Cue-Point nicht ausgeführt.
/**
Erforderlich:
- myStream Instanznamen von FLVPlayback-Komponente
*/
var cuePoint:Object = new Object(); // Cue-Point-Objekt erstellen.
cuePoint.time = 2.444; // Zeitmarker
cuePoint.name = "ASCuePoint"; // Name des Cue-Point
cuePoint.type = "actionscript"; // Typ
myStream.load("file:///F:/..../test.flv");
myStream.addASCuePoint(cuePoint); //AS-Cue-Point hinzufügen.
myStream.play();
myStream.addEventListener("cuePoint", // AS-Cue-Point Event
function(){
trace ("Zeit: " + myStream.playheadTime)
});
Dieses Beispiel zeigt wenn der Cue-Point erreicht ist über trace die aktuelle Spielzeit im Video an.
Natürlich können hier auch andere Effekte verwendet werden wie z.B: Buttons oder Grafiken die ein- bzw. ausgeblendet werden.
Skin von FLVPlayback ändern
Der Skin kann entweder über den Editor geändert werden oder aber auch über ActionScript, wobei man bei einer Änderung über den Editor auch eine Vorschau hat.
Um den Skin über den Editor zu ändern, wählt man einfach die FLVPlayback Instanz aus, in unserem Beispiel myStream und geht in den Reiter Parameter.
Hier findet man alle Parameter wieder, die man über den Editor und natürlich auch ActionScript ändern kann.
Dort gibt es den Punkt skin, klickt man hier auf die Lupe so öffnet sich ein Vorschaufenster wo man vorhandene Skins einbinden kann.
Bitte beachtet das Adobe Flash dieses Skins beim exportieren als SWF automatisch in den Zielordner kopiert, Ihr müsste also nur darauf achten das Ihr dann beide SWF Dateien kopiert.
/**
Erforderlich:
- myStream Instanznamen von FLVPlayback-Komponente
*/
myStream.skin = "ArcticExternalAll.swf"; // Skin Path
myStream.skinAutoHide = true; // Skin automatisch ausblenden
myStream.load("file:///F:/..../test.flv"); // FLV Path
myStream.play(); // FLV abspielen
In diesem Beispiel wird als Skin ArcticExternalAll.swf festgelegt. Sollte man eine solche Änderung durch ActionScript machen das der User z.B: in der Flash selbts zwischen ein paar Skins wählen kann.
So muss diese Datei manuell kopiert werden, alternativ kann auch eine URL angegeben werden woher das Skin geladen wird.
Mit skinAutoHide blenden wird das Skin aus, wenn der User sich nicht mit der Maus über der FLVPlayback Instanz befindet.
Mit hilfe von Streaming kann man seine Flashdatei um einiges verbessern, jedoch sollte man auch bedenken das man dadurch mehr Bandbreite benötigt.
Eine einfache Animation über Shapes oder MovieClips braucht in der Regel weniger Bandbreite und sieht teilweise besser aus als wenn dies als Video eingebaut wird.
Streaming sollte also nur verwendet werden wenn man wirklich einen Film oder einen kleinen Filmclip anzeigen lassen will.
Des weiteren muss man natürlich darauf achten das man die entsprechende crossdomain.xml setzt, falls sich das Streaming auf einen anderen Server befindet.
Hier sollte man auch nicht mit * arbeiten, da sonst auch andere Webseiten das Video benützen könnten.
