ActionScript, ActionScript 2, ActionScript 3, Flash, Tutorials

Adattare un swf alle dimensioni del browser con actionscript, oggetto stage, e CSS

Molti siti propongono swf a tutto schermo conseguendo l’obbiettivo in vari modi pi√π o meno compatibili con le specifiche W3c.

Se la domanda che vi assilla è:
“Come si fa ad adattare un swf alle dimensioni della finestra del browser in modo che il risultato sia compatibile con i maggiori browser?” continuate pure a leggere 😀

Partiamo dalle basi:

Dentro Flash:

Il flash player fornisce ad Actionscript una serie di API destinate all’interazione con lo stage del nostro swf fin dai tempi di flash mx.
Utilizzare questi appigli per determinare le dimensioni del nostro swf in esecuzione è piuttosto semplice e richiede davvero poche righe di codice:

Actionscript 2:

Stage.scaleMode = "noScale";
Stage.align = "TL";
var myListener:Object = new Object();
myListener.onResize = onScreenResize;
Stage.addListener(myListener);

function onScreenResize():Void
{
	trace(Stage.width);
	trace(Stage.height);
}

Actionscript 3:

import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.*;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
//assegno la funzione al gestore evento
stage.addEventListener(Event.RESIZE,onScreenResize);
//funzione per gestire il resize
//(e=null di default per evitare errori a runtime)
function onScreenResize(e:Event=null):void
{
	trace(stage.stageWidth);
	trace(stage.stageHeight);
}

La logica come potete vedere è la medesima:

  • si blocca il ridimensionamento automatico dello stage (ossia lo “zoom” indesiderato)
  • si allinea lo stage in una delle 9 posizioni possibili (da top-left a bottom-right)
  • si va a gestire l’evento onResize dell’oggetto Stage in una funzione che esegue del codice a nostro uso e consumo

Cambia un pochino la sintassi, ma √® solo questione di abitudine 😀
Nel codice HTML e nel foglio di stile CSS:

ora possiamo passare alla parte xhtml e css, ossia quella parte che effettivamente va a gestire le dimensioni del player all’interno del browser.

Gli elementi della ricetta sono i seguenti:

  • un div
  • le direttive di stile per gli elementi del DOM “html”, “body” e “#nomediv”
  • SWFObject a piacere per scrivere il nostro swf in #nomediv

Il nostro CSS apparirà simile a questo:

html {
	height: 100%;
	overflow: hidden;
}
#flashdiv {
	height: 100%;
}
body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
}

Conclusione e Sorgenti

Questo è solo uno dei vari modi in cui si può ottenere un swf grande quanto la finestra del browser e compatibile con la maggior parte dei browser in circolazione.

Ad ogni modo, nel file zip ci sono i vari casi elencati in questo mini “tutorial”,

stay tuned 😀

Advertisements

One thought on “Adattare un swf alle dimensioni del browser con actionscript, oggetto stage, e CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s