Schneller Tipp Strecken Sie Ihre SWF-Datei mit Stage.ScaleMode aus

Was passiert, wenn eine Website Ihre SWF-Datei in einen Bereich stürzt, in den sie nicht passt? In diesem Quick Tip erfahren Sie, wie Sie die Skalierung Ihrer SWF-Datei steuern können.


Schritt 1: Richten Sie Ihre SWF ein

Starten Sie ein neues Flash-Projekt und stellen Sie Ihre Bühne auf 350 Pixel breit und 250 Pixel hoch ein.

Erstellen Sie eine grundlegende Dokumentenklasse (weitere Informationen finden Sie in diesem Schnelltipp):

 package import flash.display.Sprite; public class Main erweitert Sprite public function Main () 

Die FLA (und die SWC für diejenigen, die nicht Flash Pro verwenden) in der ZIP-Datei enthalten zwei Assets:

CheckedBackground, Dies ist die gleiche Größe wie die Bühne, wobei sich der Registrierungspunkt in der oberen linken Ecke befindet.

Gesicht, Das ist ungefähr halb so breit wie die Bühne, mit dem Registrierungspunkt in der Mitte.

Platziere sie auf der Bühne wie folgt:

 public class Main erweitert Sprite private var checkedBackground: CheckedBackground; privates var Gesicht: Gesicht; öffentliche Funktion Main () checkedBackground = new CheckedBackground (); checkedBackground.x = 0; checkedBackground.y = 0; this.addChild (checkedBackground); Gesicht = neues Gesicht (); face.x = stage.stageWidth / 2; // das Gesicht horizontal zentrieren face.y = stage.stageHeight / 2; // zentriere das Gesicht vertikal this.addChild (Gesicht); 

Führen Sie Ihre SWF-Datei aus:


Schritt 2: Strecken Sie das Player-Fenster

Verkleinern Sie das Fenster, verkleinern Sie es, dehnen Sie es sowohl proportional als auch außerhalb, und sehen Sie, wie sich der Inhalt ändert:

Dies ist der Standard-Skalierungsmodus von Flash, ZEIGE ALLES. Der Inhalt wird niemals verzerrt und Sie können immer die gesamte Bühne sehen. Dies bedeutet, dass Sie einen "Briefkasten" -Effekt erhalten, wenn Sie nicht proportional sind.


Schritt 3: Versuchen Sie den NO_BORDER-Skalierungsmodus

ZEIGE ALLES ist der voreingestellte Skalenmodus, aber es gibt drei weitere, die wir verwenden können.

Importieren Sie die StageScaleMode-Klasse:

 import flash.display.StageScaleMode;

Diese enthält statische Konstanten, mit denen der Skalenmodus eingestellt werden kann. Lass es uns versuchen KEINE GRENZE; Fügen Sie diese Zeile zu Ihrer Konstruktorfunktion hinzu:

 stage.scaleMode = StageScaleMode.NO_BORDER;

Führen Sie Ihre SWF-Datei aus und dehnen Sie sie erneut:

Wie der Name schon sagt, KEINE GRENZE vermeidet den Letterbox-Effekt. Der Inhalt bleibt proportional, füllt jedoch immer den verfügbaren Bereich aus, auch wenn die Kanten abgeschnitten werden müssen.


Schritt 4: Probieren Sie den EXACT_FIT-Skalierungsmodus aus

Ändern Sie die Zeile, die den Skalierungsmodus festlegt:

 stage.scaleMode = StageScaleMode.EXACT_FIT;

Versuch es:

EXACT_FIT bewirkt, dass die Ränder der Bühne an den Rändern des verfügbaren Bereichs haften bleiben, was zu Verzerrungen führt, wenn der Spieler überproportional gedehnt wird.


Schritt 5: Versuchen Sie den NO_SCALE-Skalierungsmodus

Um den endgültigen Skalierungsmodus abzurufen, ändern Sie die Linie wie folgt:

 stage.scaleMode = StageScaleMode.NO_SCALE;

Hör zu:

Mit NO_SCALE, der Inhalt ändert sich überhaupt nicht; Sie bleiben zentriert im Player-Fenster, auch wenn das bedeutet, große Mengen der Kanten abzuschneiden oder massive Ränder auf allen Seiten zu hinterlassen.


Fazit

Mit Stage.scaleMode können Sie steuern, wie Ihre SWF-Datei angezeigt wird, wenn eine Website die Größe des verfügbaren Bereichs ändert. Es ist auch nützlich, um AIR-Apps und Vollbild-Websites zu erstellen. NO_SCALE ist eine besonders gute Wahl, da Sie (in Kombination mit einem RESIZE-Ereignis-Listener) den gesamten Inhalt an das Fenster anpassen können, während Größe und Proportionen der einzelnen Elemente erhalten bleiben.

Mehr darüber erfahren Sie in der Serie von Franci Zidar auf skalierbaren Websites im Vollbildmodus :)