Plattformunabhängige Videos mit Flash MX 2004
Bild für Bild

DeveloperIT-ProjekteSoftware

Die Video-Unterstützung wurde in Flash MX 2004 weiter ausgebaut. Macromedia hat ein eigenes Videoformat eingeführt. Wie Sie daraus Kapital schlagen, verrät der Workshop.

Flash Video Format

Plattformunabhängige Videos mit Flash MX 2004

Die durchschnittliche Bandbreite, die ein Internet-Nutzer zur Verfügung hat, steigt vor allem dank DSL kontinuierlich. Dies macht Video-Integration in die eigene Website überhaupt erst möglich und sinnvoll. Für den ambitionierten Webdesigner ist dies also der Startschuss, auf Videos zu setzen. Nur: Wie klappt das am besten plattformübergreifend? Flash eignet sich zu diesem Zweck ausgesprochen gut, wie unter anderem die Strichmännchen-Werbekampagne von Nike gezeigt hat. In Flash MX wurde der Sorenson-Spark-Codec (»Flash-Video-Format«) integriert.

Flash MX 2004 geht noch einen Schritt weiter: Neben der verbesserten Integration von Videos gibt es ein eigenes Videoformat FLV. Das Akronym steht für Flash for Video (-File-Format). Im Prinzip liegt jedes Video, das Sie in Flash importieren, als FLV vor. FLV bezeichnet also ein per Sorenson-Spark-Codec komprimiertes Video. Die Neuerung gegenüber Flash MX ist, dass FLV auch als eigenständige Datei existieren und extern in den Flash-Film eingebunden werden kann. Außerdem sind die FLV-Filme flexibler zu handhaben. Dafür müssen Sie aber beim Erstellen einiges beachten.


Der Film

Plattformunabhängige Videos mit Flash MX 2004

Bevor Sie tiefer einsteigen, sehen Sie sich kurz die Beispielanwendung aus diesem Workshop an. Sie finden sie auf der Heft-CD im Bereich »Listings« im Archiv 1004video.zip unter dem Namen moviemodificator_start.fla. Wenn Sie das Video in eine eigene Datei einbinden möchten, ist das natürlich auch kein Problem. Einzig die vielen Schieberegler und Schaltflächen des Moviemodificators benötigen Sie, wenn Sie das Bild verändern möchten. Der Inhalt dieser Flash-Datei ist fein säuberlich über mehrere Ebenen verteilt. Die Namensgebung der Ebenen ist selbsterklärend. Die Ebene für den Film besitzt eine Maske.


Das Video

Plattformunabhängige Videos mit Flash MX 2004

Als Erstes benötigen Sie ein Video. Hier können Sie natürlich in Ihrem eigenen Fundus kramen oder das von uns gedrehte Video MCafeMovie.mov über die Zubereitung von Milchkaffee verwenden. Das vorliegende Video soll nun in einen Flash-Film eingebunden werden. Dafür gibt es zwei Möglichkeiten: Sie importieren das Video oder Sie verwenden eine FLV-Datei als externe Video-Datei.


Importieren

Plattformunabhängige Videos mit Flash MX 2004

Für den Import akzeptiert Flash MX 2004 unter Windows die Dateiformate MOV, MPG/MPEG, DV, WAV und Windows Media (ASF- oder WMF-Dateien). Für MOV benötigen Sie Quicktime ab Version 4 (aktuell ist 6.5x), alle anderen funktionieren mit Quicktime oder DirectX ab 7. Am Mac klappen dieselben Formate, außer Windows Media. Hier ist für alle Formate der (obligatorische) Quicktime-Player notwendig.

In Flash können Sie ein Video entweder in die Zeitleiste oder die Bibliothek importieren. Letzteres ist meist praktischer, da das Video sonst die komplette Zeitleiste ausfüllt. In Flash MX 2004 gibt es für den Video-Import einen eigenen Wizard. Als Erstes steht zur Wahl, ob Sie die Videodatei einbetten oder als Quicktime verknüpfen möchten. Beim Einbetten wird der Sorenson-Spark-Codec verwendet und das Video ist im Flash-Film integriert. Das Verknüpfen kommt noch aus früheren Flash-Versionen. Der Nachteil: Alle Nutzer benötigen Quicktime auf ihrem Rechner. Die Alternative hierzu ist, eine externe FLV-Datei zu verwenden.

Im nächsten Schritt können Sie den Import des Videos sofort durchführen, oder noch ein wenig am Video herumschneiden. Sie legen Anfangspunkt und Endpunkt eines Clips mit zwei Schiebereglern fest und können dann daraus einen Clip erstellen. Wenn Sie aus einem Video mehrere Clips erstellen, haben Sie außerdem die Möglichkeit, die Reihenfolge zu ändern. Das ist alles zwar recht rudimentär, für ein paar schnelle Änderungen aber ganz gut geeignet.

Zum Schluss wählen Sie die Stärke der Komprimierung. Sie können aus mehreren auf Bandbreiten optimierten Profilen wählen oder auch ein eigenes neues Profil anlegen und dort die Qualität des Videos steuern. Zum Schluss starten Sie den Import, der je nach Videolänge ein bisschen Zeit in Anspruch nimmt. Nun liegt das Video als importierte Datei vor. Sie können es wie aus früheren Flash-Versionen gewohnt in Ihrem Film einsetzen. In diesem Workshop soll allerdings ein externes Video als FLV-Datei zum Einsatz kommen.


FLV produzieren

Plattformunabhängige Videos mit Flash MX 2004

Wenn Sie Flash MX 2004 Professional Ihr Eigen nennen, finden Sie im Lieferumfang des Programms ein Plug-in, das Video Exporter heißt. Mit diesem Plug-in können Sie direkt aus Ihrem Videoprogramm FLV-Dateien exportieren.

Allerdings sollten Sie sich unbedingt von www.macromedia.com/devnet/mx/flash/video.html die aktuellste Version herunterladen, bevor Sie loslegen. Sie finden dort in einem Archiv das Update für den Video Exporter und die Media Controls von Flash MX 2004 Professional. Den Video Exporter aktualisieren Sie per ausführbarer Datei, die Media Controls über den Extensions-Manager, der in der Standardinstallation unter Start, (Alle) Programme, Macromedia zu finden ist. Die Readme-Datei ist ausnahmsweise sehr lesenswert, da es einige Ausnahmefälle gibt. Beispielsweise müssen Sie den Video Exporter 1.1 erst deinstallieren, um 1.2 aufspielen zu können.

Was aber, wenn Sie keine Professional-Version besitzen? In diesem Fall können Sie das Video auch in Flash importieren, wie vorhin gezeigt, und von dort wieder als FLV exportieren. Wenn es in der Bibliothek liegt, klicken Sie dazu mit der rechten Maustaste darauf (Mac: [Ctrl] und Klick). Wählen Sie Eigenschaften und dort Exportieren.


Externes Video

Plattformunabhängige Videos mit Flash MX 2004

Die externe FLV-Datei verwenden Sie in Flash per Actionscript. Eine externe Anbindung per FLV-Datei hat einen großen Vorteil: Sie können die Datei schon abspielen, während sie noch geladen wird. Das wird auch als Progressive Streaming bezeichnet.

Und so klappt der Zugriff: Zuerst benötigen Sie in Flash ein neues, eingebettetes Video. Wechseln Sie in die Bibliothek ([F11]) und dort in das Palettenmenü.

Klicken Sie dort auf Neues Video. Ziehen Sie das Video auf die Bühne in die Ebene Movie und positionieren Sie es links oben unter der Maske. Sie können die Maske auch kurzzeitig ausblenden, um das Video sehen zu können. Vergeben Sie als Instanzname import_video, damit Sie später per Actionscript darauf zugreifen können. Ist Ihnen die eigenartige Endung _video für die Video-Instanz aufgefallen? Wenn Sie diese verwenden, erhalten Sie im Aktionen-Bedienfeld Code-Hinweise.

Wechseln Sie in das Aktionen-Bedienfeld für das erste (und einzige) Schlüsselbild der Ebene ActionScript. Hier landet zentral der Actionscript-Code.
Als Erstes erstellen Sie eine Verbindung. Mit dem Wert null als Parameter für die Methode connect() geben Sie an, dass die Verbindung lokal ist, also ohne den Flash Communication Server auskommt:

var verbindung:NetConnection = new NetConnection();
verbindung.connect(null);

Als Nächstes erstellen Sie einen neuen Stream und hängen diesen an das eingebettete Video:

var stream:NetStream = new NetStream(verbindung);
import_video.attachVideo(stream);

Anschließend legen Sie mit setBufferTime() die Verzögerung in Sekunden fest, mit der der Stream startet. Mit play() bestimmen Sie den FLV-Film und setzen dann noch die Maße für das eingebettete Video:

stream.setBufferTime(3);
stream.play("MCafeMovie.flv");
import_video._width = 320;
import_video._height = 240;

Testen Sie den Film ([Strg] und Eingabetaste), um sich davon zu überzeugen, dass alles klappt. Wenn Sie beim Abspielen einen Download simulieren (Menü Ansicht) und den Bandbreiten-Profiler einsetzen, erhalten Sie schon einen recht guten Eindruck, wie das Streaming funktioniert.


Videosteuerung

Plattformunabhängige Videos mit Flash MX 2004

Nun soll das Video ein wenig gesteuert werden. In der vorbereiteten Flash-Datei finden Sie zwei Schaltflächen: eine zum Abspielen und eine Pause-Taste. Nun gibt es für das NetStream-Objekt die Methode pause(), die den Stream anhält. Allerdings startet sie ihn auch gleich wieder. Das ist aber kein gewünschter Effekt, wenn zwei verschiedene Schaltflächen für Pause und Start zum Einsatz kommen sollen. Deswegen müssen Sie ein wenig tricksen. Eine Variable speichert, ob gerade Pause ist oder nicht. Bei der Pause-Schaltfläche wird die Methode pause() nur dann ausgeführt, wenn gerade keine Pause ist, die Variable pause also den Wert false hat:

var pause:Boolean = false;
pause_btn.onRelease = function () {
if (!pause) {
stream.pause();
pause = true;
}
}

Bei der Schaltfläche zum Abspielen läuft es genau umgekehrt:

abspielen_btn.onRelease = function () {
if (pause) {
stream.pause();
pause = false;
}
}


Farbe

Plattformunabhängige Videos mit Flash MX 2004

Nun soll das Video noch ein wenig eingefärbt werden. Dies geht recht einfach: Sie definieren ein Farbobjekt:

var farbe_color:Color = new Color(import_video);

Dann folgen Farb-Transformationen:

var transformation_sepia = {ra:"100", rb:"120", ga:"100", gb:"70", ba:"100", bb:"20"};
var transformation_sw = {ra:"0", rb:"-255", ga:"-100", gb:"255", ba:"-100", bb:"255"};
var transformation_normal = {ra:"100", rb:"0", ga:"100", gb:"0", ba:"100", bb:"0"};

Eine Farbtransformation steuert, wie sich die Farben des zugehörigen Movieclips oder hier Videos verändern. Dabei gibt es für alle drei Farben den Farbanteil (ra, ga, ba) von ?100 bis +100% und die Verschiebung auf dem Farbkreis (rb, gb, bb) von ?255 bis +255. Außerdem können Sie noch mit aa und ab die Alpha-Transparenz angeben. Einzig die Umwandlung in Schwarz-Weiß klappt damit nicht. Hier verwenden Sie ersatzweise eine Invertierung und entfernen Rot. Das ist allerdings etwas geschummelt, denn für echtes Schwarz-Weiß müsste jedes Pixel des Videos einzeln entfärbt werden.

Auf Knopfdruck werden die Farbtransformationen dann angewendet:

sw_btn.onRelease = function () {
farbe_color.setTransform(transformation_sw);
}
sepia_btn.onRelease = function () {
farbe_color.setTransform(transformation_sepia);
}
normal_btn.onRelease = function () {
farbe_color.setTransform(transformation_normal);
}


Linien und Rauschen

Plattformunabhängige Videos mit Flash MX 2004

Nun geht es noch an ein paar Effekte. Zwei Schieberegler sollen willkürliche horizontale Linien und willkürliches Rauschen mit Punkten simulieren.
Und so funktioniert das Prinzip: Die Schieberegler verwenden die Drag-and-Drop-Funktionen. Das Ziehen der Schieberegler ist auf die Horizontale oder Vertikale in einem bestimmten Wertebereich beschränkt:

on (press) {
startDrag(this, false, reglinks, regoben, regrechts, regunten);
}
on (release, releaseOutside) {
stopDrag();
}

Die aktuelle Position des Schiebereglers wird regelmäßig in der Bildrate des Films überprüft:

onClipEvent (enterFrame) {
linien(Math.floor(regunten ? _y));
}

Die Funktion linien() beziehungsweise für das Rauschen zeichnen() erzeugt dann entsprechend der Position des Reglers horizontale Linien oder Punkte. Sie finden den fertigen Code auf der Heft-CD.


Fazit

Plattformunabhängige Videos mit Flash MX 2004

Die Beispielanwendung aus diesem Workshop lässt sich noch beliebig variieren und verfeinern. Sie zeigt allerdings schon in Grundzügen, was in Flash MX 2004 möglich ist. Dabei weiß die Video-Funktionalität durchaus zu überzeugen.

In der Praxis ist es meist empfehlenswert, Videos entweder einzubetten oder als FLV progressiv zu streamen. Ein verknüpftes Quicktime erfordert den Quicktime-Player, und da dieser gerade unter Windows kein Performance-Wunder ist, haben ihn viele Nutzer nicht installiert.

Interessant ist, dass auch extern eingebettete Videos in Flash wie normale Movieclips behandelt werden können. Neben den hier gezeigten Farbvariationen sind auch Größenänderungen und vieles mehr denkbar.


Flash Communication Server

Plattformunabhängige Videos mit Flash MX 2004

Wer echtes Streaming benötigt, greift auf den separaten Flash Communication Server zurück.

Externe FLV-Dateien sind mit dem progressiven Laden schon ein erster Schritt zum Streaming. Wer echtes Streaming anbieten will, bei dem der Nutzer auch an beliebige Stellen eines Videos springen kann, setzt auf den Flash Communication Server MX 1.5. Dieser ist als eigenständiges Produkt von Macromedia erhältlich. Die Bezahlung erfolgt nach Übertragungskapazität oder gleichzeitig zur Verfügung stehenden Verbindungen. Die Personal Edition kostet knapp über 600 Euro und bietet dafür in der Spitze 1 MBit/s Bandbreite beziehungsweise 50 gleichzeitige Verbindungen.

Zum Entwickeln und Testen steht eine kostenfreie Entwicklerversion zur Verfügung. Außerdem bietet der Communication Server auch Messaging-Unterstützung und einiges mehr, um den doch recht happigen Preis zu rechtfertigen.