Tecniche per ridimensionare un Sito Web Flash con Event.Resize

Per chi si avvicina al mondo di Flash provenendo da classico html e CSS,  sorge spesso la domanda: il mio cliente vuole che il sito web realizzato in Flash si adatti alla dimensione della finestra del browser, ma come  si possono riposizionare determinati oggetti sullo stage in seguito all’azione fatta dal navigatore?

E’ un tema molto controverso nei termini, quindi cercherò di fare piazza pulita, perchè prima di tutto è necessario capirci nei termini usati.

A differenza dei classici siti web realizzati in html senza tabelle o css in modo “elastico”, dove, non appena si ridimensiona la finestra, in automatico, la maggior parte degli elementi della pagina si riposiziona in modo da mantenere lo stesso layout della finestra più grande, in flash CS questo non è possibile.

Si può ricreare un effetto stile “zoom” della fotocamera, ossia si può rimpicciolire o ingrandire TUTTO il contenuto e quindi testo e immagini.

In questo caso è sufficiente impostare nella scheda scheda html delle proprietà di pubblicazione di Flash come indicato qui sotto:

E’ evidente che in questo caso, eventuali immagini raster, verranno sgranate se non di qualità e per notevoli ingrandimenti.

Come far sì che un oggetto, mantenga la stessa POSIZIONE relativa agli altri o ai bordi dello stage, senza un  effetto di ingrandimento o rimpicciolimento al variare della dimensione della finestra del browser?

Se vogliamo avere un controllo su ogni oggetto presente sullo stage di Flash, e posizionarlo così come avviene  per gli aerei delle freccie tricolore, è necessario intervenire sul codice actionscript 3.

Il primo passo è quello di bypassare le impostazioni di pubblicazione di Flash, intervenendo direttamente sul codice actionscript 3 con 2 semplici operazioni:

1) impostare implicitamente l’allineamento al bordo superiore sinistro

stage.align = StageAlign.TOP_LEFT;

2) e impostare l’assenza di “effetto zoom”, ossia assenza di ridimensionamento di tutti gli oggetti presenti sullo stage:

stage.scaleMode = StageScaleMode.NO_SCALE;

Il terzo passo è mettersi in ascolto del fatidico evento RESIZE, inviato ogni qualvolta l’utente ridimensiona la finestra di Flash Player o del browser:

stage.addEventListener(Event.RESIZE, riposizionoOggetti);

Ecco un piccolo esempio, con un singolo oggetto di nome istanza “immagine_mc”,  con punto di registrazione centrale, e che si riposizione sullo stage mantenendo sempre la posizione centrale, rispetto ai bordi della finestra.

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.dispatchEvent(new Event(Event.RESIZE));
stage.addEventListener(Event.RESIZE, riposizionoOggetto);
function riposizionoOggetto(e:Event):void
{
 var imgY:Number = stage.stageHeight/2;
 var imgX:Number = stage.stageWidth/2;
 immagine_mc.x = imgX; 
 immagine_mc.y = imgY;
}

Attenzione che per visulizzare il tutto correttamente nelle opzioni di pubblicazione dovrai settare sempre Dimensione: Percentuale 100%

Ecco un video riassuntivo: