Adobe hat vor einiger Zeit ein neues Feature des Flash Player 9 veröffentlicht: Er enthält einen Vollbild-Modus. Es handelt es sich um den gleichen Modus, der bisher bei (Offline-)Projektoren möglich war. Neu ist, dass dies nun auch bei browserbasierten Flashmovies funktioniert.

Es wurden bereits einige Beispiel dazu auf dieser Website veröffentlicht. Im Folgenden nun eine Zusammenfassung der wichtigsten Punkte.

In erster Linie ist die Full-Screen-Anzeige für eine formatfüllende Wiedergabe von Videos gedacht. Aus diesem gibt es auch einige Einschränkungen, die andere Verwendungszwecke wie Spiele und interaktive Anwendungen einschränken (z.B. keine Tastatureingaben möglich). Man muss auch bedenken, dass die Skalierung eines Video auf Bildschirmgröße dem Rechner einiges an Performance abverlangt. Bei langsameren Rechner führt dies zu Ruckeln.

Möglichkeiten

Welche Möglichkeiten bietet der Fullscreen-Modus?

  • Umschalten zwischen normaler Anzeige und dem Vollbildmodus
  • Abfragen des aktuellen Modus; Events, die bei der Umschaltung ausgelöst werden

Es existiert die Eigenschaft Stage.displayState, die zwei Werte annehmen kann („fullScreen“ oder „normal“). Durch Zuweisung eines Wertes kann der Modus umgeschaltet werden. Durch eine Abfrage von displayState wird der aktuelle Modus ermittelt, in dem sich der Player befindet.

Das erste Beispiel zeigt zwei Funktionen zum Umschalten in den Vollbildmodus bzw. den normalen Modus (ActionScript 2). Der Aufruf erfolgt z.B. mit goFullScreen();. Er muss allerdings nach einer Useraktion erfolgen (siehe Einschränkungen).

Actionscript:
  1. // functions to enter and leave full screen mode
  2. function goFullScreen() {
  3.    Stage["displayState"] = "fullScreen";
  4. }
  5.  
  6. function exitFullScreen() {
  7.    Stage["displayState"] = "normal";
  8. }

Das nächste Beispiel zeigt, wie das Event bei der Umschaltung des Modus abgefangen werden kann. Somit kann eine Fallunterscheidung zwischen den Modi duchgeführt werden. Dies ist hilfreich bei einer individuellen Skalierung.

Actionscript:
  1. EventListener = new Object();
  2. EventListener.onFullScreen = function( bFull:Boolean ){
  3.    
  4.    
  5.     if (bFull == true) { // Full-Screen Mode
  6.    
  7.         .....
  8.  
  9.     }
  10.    
  11.    
  12.     if (bFull == false) { // normal Mode
  13.    
  14.     ....
  15.    
  16.     }
  17.  
  18. }
  19.  
  20. Stage.addListener( EventListener );

Einbinden in HTML

Damit auch wirklich in den Fullscreen-Modus geschaltet wird, sind zusätzlich Änderungen in der dazugehörigen HTML-Datei nötig. Der neue Parameter „allowFullScreen“ muss aktiviert werden.

Nutzt man die von Flash erzeugte HTML-Datei zur Einbindung von SWF-Dateien, lautet die zusätzlich nötige Zeile in der HTML-Seite:

HTML:
  1. <param name="allowFullScreen" value="true" />

Adobe bietet auch ein Template für Flash (Link siehe unten). Dieses kann nach der Installation unter den "Veröffentlichungseinstellungen" in Flash ausgewählt werden.

Bevorzugt werden sollte allerdings die Einbettung mittels des SWFObjects. Neben zahlreichen Vorteilen (siehe Link unten) wird dadurch auch gleich geprüft, ob der benötigte Flash Player 9 vorhanden ist. Im Header der HTML-Datei wird dazu folgende Zeile eingefügt, die das SWFObject-Skript lädt:

HTML:
  1. <head>
  2. ...
  3. <script type="text/javascript" src="swfobject.js"></script>
  4. ...
  5. </head>

Im HTML-Body lautet der Code beispielsweise folgendermaßen:

HTML:
  1. <div id="flashcontent">
  2.     <p>        Hinweis: Leider haben Sie den den Flash Player nicht installiert oder eine veraltete Version.
  3.                Er wird zum Betrachten des Videos ben&ouml;tigt. <a href="http://www.macromedia.com/go/getflashplayer" target="_blank">Flash Player herunterladen</a>
  4.     </p>
  5. </div>
  6.  
  7.  
  8.  <script type="text/javascript">
  9.         // <![CDATA[
  10.        
  11.         var so = new SWFObject("flvplayer.swf", "flv-viewer", "720", "500", "9", "#FFFFFF");
  12.         so.addParam( "allowFullScreen", "true");
  13.         so.addParam("scale", "noscale");
  14.         so.write("flashcontent");      
  15.        
  16.         // ]]>
  17.     </script>
  18.  
  19.  
  20. .....
  21.  
  22. </body>

Skalierung

Bei der Vergrößerung in den Vollbildmodus sind mehrere Ansätze möglich, wie die Inhaltselemente (Movieclips, Videos, Buttons, etc.) dargestellt werden.

Automatische Skalierung
Werden keine besonderen Angaben gemacht, ist „showAll“ als Skalierungsmodus („scaleMode“) für den Vollbildmodus ausgewählt. Im obigen Beispiel würde man Zeile 13 weglassen. Die Inhalte skalieren sich automatisch auf die volle Bühnengröße. Sie werden also einfach größer und füllen den kompletten Bildschirm aus. Dabei wird das Seitenverhältnis des Originals beibehalten, es kommt also zu keinen Verzerrungen.

Keine Skalierung bzw. individuelle Skalierung

Nur die Bühne vergrößert sich, die Inhalte bleiben gleich groß. Der „scaleMode“ wird dazu auf „noScale“ gesetzt (Zeile 13 im SWFObject-Beispiel). Nun können die einzelnen Elemente auf Wunsch individuell skaliert oder angeordnet werden.

Links

Link: Exploring full-screen mode in Flash Player 9 (enthält auch die nötigen ActionScript 3 Befehle)
Link: HTML-Template
Link: SWFObject
Link: Beispiel: FLV Playback Fullscreen Player