FLV Playback Komponente mit Fullscreen Modus

Idee:

Dieses Beispiel zeigt eine modifizierte FLV Playback Komponente, die rechts unten einen Button für den Fullscreen-Modus enthält.

Der ursprünglich im Skin enthaltene "forwardButton" wurde für den Fullscreen-Modus zweckentfremdet. In der .fla Datei sorgt untenstehender Code dafür, dass nach dem Laden der Skin-Datei dem forwardButton die neue Fullscreen-Funktionalität zugewiesen wird.

Update: Eine neue Version des Players gibt es im Beitrag FLV Flash Video Player Version 0.2

Skin Modifikation:

Zusätzlich wurde einiges an der Skin-Datei ("SteelExternalAll.swf") verändert:

  • alle Symbole wurden durch geglättete (Vektor-)Symbole ersetzt, die auch im Vollbild-Modus "scharf" sind
  • "forwardButton"-Symbol durch ein "Fullscreen"-Symbol ersetzt
  • helleres Grau in Kombination mit dunklen Symbolen

Hinweis in eigener Sache: Die Grundlagen für die Verwendung der FLV Playback Komponente und die Modifikation von FLV Playback Skins finden Sie in Kapitel 13 und den dazugehörigen Workshops von "Interaktives Video im Internet mit Flash".

Demo:

Fullscreen Modus mit der FLV Playback Komponente (neuster Flash Player 9 wird benötigt, siehe auch vorigen Beitrag)
Source Files, .zip (demo & skin)

Update: Es gibt jetzt eine extra Seite für den Player: FLV Flash Video Player

Code:

PLAIN TEXT
Actionscript:
  1. // FLV Playback fullscreen demo: replacing the forwardButton with a fullscreenButton
  2. // www.video-flash.de
  3.  
  4. import mx.video.*;
  5.  
  6. // functions to enter and leave full screen mode
  7. function goFullScreen() {
  8.    Stage["displayState"] = "fullScreen";
  9. }
  10.  
  11. function exitFullScreen() {
  12.    Stage["displayState"] = "normal";
  13. }
  14.  
  15. // overwriting the forwardButton-function (after the skin has loaded)
  16. var listenerObject:Object = new Object();
  17. listenerObject.skinLoaded = function(eventObject:Object):Void {
  18.  
  19.     myFLVPlayback.skin_mc.forward_mc.onRelease = function() {
  20.             if (Stage["displayState"] == "fullScreen") {
  21.                 exitFullScreen();
  22.                 trace ("Exit Full-Screen …");     
  23.             }
  24.            
  25.             if (Stage["displayState"] == "normal") {
  26.                 goFullScreen();
  27.                 trace ("Go Full-Screen …");         
  28.             }
  29.     }
  30. };
  31. myFLVPlayback.addEventListener("skinLoaded", listenerObject);

english information:
I've replaced the forwardButton of the Component with a fullscreenButton. I also replaced the button-symbols with vector-graphics, because the looked ugly in fullscreen-mode.