Flv Playback Component FlexDa Flex 3 im Vergleich zu Flash CS3 keine wirklich tolle Videokomponente hat, liegt es nahe, dass man die FLV Playback Komponente auch in Flex verwenden möchte.

Mittlerweile ist dies ganz einfach, denn die Komponentendatei (.swc) kann direkt eingebunden werden. Mark Walters hat in seinem Blog eine kurze Anleitung geschrieben.

FLVPlaybackAS3.swc

Um die Flashkomponente aus Flex zu nutzen, geht man folgendermaßen vor:

  • Man erstellt ein neues Flexprojekt.
  • Man sucht die Datei FLVPlaybackAS3.swc im Verzeichnis Adobe Flash CS3/Configuration/Components/Video.
  • Diese Datei kopiert man in das /libs-Verzeichnis des Flex-Projekts (bzw. man erstellt einen libs-Ordner, wenn man mit dem Flex SDK arbeitet)

Jetzt kann im MXML-Quellcode eine leere UIComponent anlegen. Des Weiteren benötigt man ein Skript, dass nach dem Initialisieren der SWF-Datei gestartet wird. Mit ActionScript wird die FLV Playback Komponente innerhalb der UIComponent platziert. Zusätzlich kann man direkt auf die kompletten Eigenschafter der FLV Playback Komponente zugreifen.

Der komplette Code lautet:

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. :Application
  3.     xmlns:mx="http://www.adobe.com/2006/mxml"
  4.     xmlns:test="*"
  5.     width="400" height="400" backgroundGradientColors="[#8a8a8a, #ffffff]"
  6.     creationComplete="creationCompleteHandler()"
  7. >
  8.  
  9.  
  10. :Script>
  11.    
  12.  
  13.     import fl.video.VideoScaleMode;
  14.     import fl.video.FLVPlayback;
  15.  
  16.     private function creationCompleteHandler():void {
  17.         var playback:FLVPlayback = new FLVPlayback();
  18.         playback.width = 320;
  19.         playback.height = 240;
  20.  
  21.         container.addChild(playback);
  22.  
  23.         playback.play("blownaway.flv");
  24.         playback.scaleMode = VideoScaleMode.MAINTAIN_ASPECT_RATIO;
  25.         playback.skin = "SkinUnderAll.swf";
  26.         playback.skinBackgroundColor = 0x111111;
  27.  
  28.     }
  29.  
  30.         ]]>
  31.  
  32.     :Script>
  33.  
  34.     :UIComponent id="container" width="320" height="300">
  35.     :UIComponent>
  36.  
  37. :Application>

Das Beispiel sieht dann so aus:

SWC-Datei mit mxmlc einbinden (Flex SDK)

Hier noch ein kurzer Hinweis, wie man mit dem Flex SDK und dem Kommandozeilen-Compiler (mxmlc) eine SWC-Datei (.swc) einbindet. SWC-Dateien sind gewöhnlicherweise Komponenten, die sowohl von Flex als von Flash CS3 stammen können.

Allgemein lautet der Befehl zum Compilen:
mxmlc mycode.mxml -library-path+=meinswc.swc

Das += wird deshalb verwendet, weil sonst einige essentielle Flex-SWC-Files nicht eingeschlossen werden würden.

Um dieses Beispiel mit dem Flex SDK zu kompilieren, lautet der Befehl also: mxmlc FLVPlaybackFlex.mxml -library-path+=libs/. Dann werden einfach alle SWC-Dateien in diesem Ordner berücksichtigt.

Link: FLVPlayback directly in Flex
Link: Using mxmlc, the application compiler