Suggerimento rapido estendi il tuo SWF con Stage.ScaleMode

Cosa succede quando un sito web contrae il tuo SWF in un'area in cui non si adatta? In questo suggerimento rapido, scoprirai come prendere il controllo di come il tuo SWF scala.


Passaggio 1: configura il tuo SWF

Avvia un nuovo progetto Flash e imposta il tuo stage su 350 px di larghezza, 250 px di altezza.

Creare una classe di documento di base (vedere questo suggerimento rapido per maggiori informazioni):

 pacchetto import flash.display.Sprite; public class Main extends Sprite public function Main () 

Il FLA (e SWC, per chi non utilizza Flash Pro) nel file zip contiene due risorse:

CheckedBackground, che ha le stesse dimensioni dello stage, con il suo punto di registrazione nell'angolo in alto a sinistra.

Viso, che è circa la metà della larghezza del palco, con il suo punto di registrazione al centro.

Posizionali sul palco in questo modo:

 public class Main extends Sprite private var checkedBackground: CheckedBackground; faccia var privata: Face; funzione pubblica Main () checkedBackground = new CheckedBackground (); checkedBackground.x = 0; checkedBackground.y = 0; this.addChild (checkedBackground); face = new Face (); face.x = stage.stageWidth / 2; // centra la faccia orizzontalmente face.y = stage.stageHeight / 2; // centra la faccia verticalmente this.addChild (faccia); 

Esegui il tuo SWF:


Passaggio 2: allunga la finestra del lettore

Ingrandisci la finestra, rendila più piccola, estendila in entrambe le proporzioni e vedi come cambia il contenuto:

Questa è la modalità di scala predefinita di Flash, MOSTRA TUTTO. I contenuti non sono mai distorti e puoi sempre vedere l'intero livello. Ciò significa che si ottiene un effetto "letterbox" se si estende a dismisura.


Passaggio 3: prova la modalità di scala NO_BORDER

MOSTRA TUTTO è la modalità di scala predefinita, ma ce ne sono altre tre che possiamo usare.

Importa la classe StageScaleMode:

 import flash.display.StageScaleMode;

Questo contiene le coste statiche che possono essere utilizzate per impostare la modalità di scala. Proviamo NO_BORDER; aggiungi questa linea alla funzione di costruzione:

 stage.scaleMode = StageScaleMode.NO_BORDER;

Esegui il tuo SWF e allungalo nuovamente:

Come suggerisce il nome, NO_BORDER evita l'effetto letterbox. I contenuti rimangono in proporzione ma riempiono sempre l'area disponibile, anche se ciò significa ritagliare i bordi.


Passaggio 4: prova la modalità Scala EXACT_FIT

Cambia la linea che imposta la modalità di scala in questo modo:

 stage.scaleMode = StageScaleMode.EXACT_FIT;

Provalo:

EXACT_FIT fa aderire i bordi del palcoscenico ai bordi dell'area disponibile, causando una distorsione se il giocatore è troppo grande.


Passaggio 5: provare la modalità di scala NO_SCALE

Per verificare la modalità di scala finale, cambia la linea in questo modo:

 stage.scaleMode = StageScaleMode.NO_SCALE;

Controlla:

Con NO_SCALE, il contenuto non cambia affatto le dimensioni; rimangono centrati nella finestra del giocatore, anche se ciò significa ritagliare enormi quantità di bordi o lasciare enormi bordi su tutti i lati.


Conclusione

Stage.scaleMode ti consente di controllare come apparirà il tuo SWF se un sito web cambia le dimensioni dell'area disponibile. È anche utile per creare applicazioni AIR e siti Web a schermo intero; NO_SCALE è una scelta particolarmente buona, poiché (se combinato con un listener di eventi RESIZE) consente di adattare l'intero contenuto alla finestra, mantenendo le dimensioni e le proporzioni delle singole risorse.

Per ulteriori informazioni, guarda la serie di Franci Zidar su siti Web scalabili a schermo intero :)