Tutorial Flash – Gestione del Resize in Flash

Quando si costruiscono applicazioni in Flash una delle problematiche più rilevanti si presenta quando dobbiamo preoccuparci di come far visualizzare i contenuti al visitatore del nostro sito. Sto parlando dell’adattamento del filmato Flash alla risoluzione dello schermo.

Quello di cui dobbiamo preoccuparci è che il nostro contenuto sia visibile nella maggior parte degli schermi lì fuori. Ecco perché esistono degli eventi in Flash che ci permettono di adattare il nostro sito in maniera dinamica.

CREIAMO IL PROGETTO

Per prima cosa prepariamo il nostro progetto. Creiamo un nuovo Flash File AS3.0 e salviamo tutto dentro ad una cartella dedicata al nostro lavoro.

Create un movie clip qualsiasi (non importa il nome) con punto di registrazione centrale, posizionatelo al centro dello stage e dategli nome di istanza movie_mc nella finestra proprietà. A questo punto pubblicate il vostro progetto con i comandi da tastiera shift+F12 oppure cliccando su File e poi Pubblish .

Se andate ad esaminare ciò che è stato generato troverete naturalmente il vostro file .swf e la pagina html che lo ospita. Provate ad aprire quest’ultima ed esaminiamo cosa abbiamo fatto: vedrete che ci sarà il nostro semplice filmato allineato in alto a sinistra. Inoltre non è esteso a tutto lo schermo; per verificarlo basterà cliccare con il tasto destro del mouse nella parte bassa destra della finestra per accorgerci che lì non c’è il nostro filmato.

Il motivo è che non abbiamo impostato il nostro progetto in maniera da estendersi per tutta la finestra. Per fare ciò andiamo in File >> Pubblish Settings e clicchiamo nella finestra che si è aperta nella scheda HTML. Qui impostiamo le dimensioni in maniera percentuale e verifichiamo che siano al 100%. Clicchiamo sul tasto Pubblish in fondo alla finestra ed andiamo a vedere il risultato.

Abbiamo fatto un passo avanti visto che il nostro filmato ora sarà disposto per tutta l’area della finestra. Il problema a questo punto è che i contenuti all’interno si stirano in modo da assecondare la finestra del browser e in maniera da rispettare le proporzioni fissate nel file .fla. Noi questo non vogliamo che accada perché e antiestetico e nelle risoluzioni più alte renderebbe tutto incomprensibile.

Quello che dobbiamo fare è dire al nostro caro Flash:”Io non voglio che si allarghi tutto!!”.

NON VOGLIOOO!!

Per ordinare a Flash di non adattare i contenuti in base alla larghezza dobbiamo scrivere alcune righe di codice, anzi, una riga di codice. Vediamole e cerchiamo di capire.

CODICE 1

stage.scaleMode=StageScaleMode.NO_SCALE;

Con questa riga abbiamo risolto il problema. Quindi create un altro layer, chiamatelo action, posizionatevi nel primo frames e aprite la finestra Actions cliccando su Window >> Actions. Copiate il codice precedente.

Potremmo accontentarci e pensare di aver finito qui, ma non è così. Abbiamo esteso il filmato al 100%, abbiamo escluso il ridimensionamento del contenuto ma non abbiamo nessun controllo sugli oggetti nello stage.

Per analizzare meglio il problema dobbiamo aggiungere altri movie clip nel nostro progetto. Ci basterà creare due barre orizzontali lunghe come lo stage e alte una decina di pixel. Le trasformiamo poi in movie clip, gli diamo i nomi di header_mc e footer_mc (stessi nomi anche per i nomi di istanza) impostando il punto di registrazione al centro ed infine allineiamo la prima in alto e la seconda in basso. Guardate la figura per avere un idea di come ho fatto io.

Quello che noi vogliamo è che header_mc venga posizionata in maniera definitiva al bordo al top della pagina mentre footer_mc venga messo in fondo alla pagina.

Apriamo quindi la nostra finestra action e scriviamo:

CODICE 2

header_mc.x = stage.stageWidth/2;
header_mc.y = 0;
 
footer_mc.x = stage.stageWidth/2;
footer_mc.y = stage.stageHeight;

Queste righe di codice ci permettono di accedere in maniera dinamica alle dimensioni della finestra e di posizionare quindi i nostri oggetti in maniera appropriata.

Testiamo il filmato ed apriamo il nostro file html. Non abbiamo risolto nulla perché non abbiamo indicato a Flash da dove prendere riferimento nel calcolare la posizione degli oggetti. Quello che dobbiamo fare è impostare l’angolo alto-sinistro come punto di partenza per le nostre coordinate. Aggiungiamo quindi questa riga al nostro codice:

CODICE 3

stage.align= StageAlign.TOP_LEFT;

proviamo il filmato ed ora funzionerà tuttto in maniera corretta.

GESTIRE IL RESIZE

Ora dobbiamo fare in modo che quando ridimensioniamo la pagina, il nostro contenuto venga continuamente adeguato. A questo proposito abbiamo bisogno di creare un listener di evento resize e in base a questo disporre i nostri movie clip propriamente. Ecco cosa dobbiamo scrivere:

CODICE 4

stage.addEventListener(Event.RESIZE, onResize);
 
function onResize(event:Event):void {
   header_mc.x = stage.stageWidth/2;
   header_mc.y = 0;
   header_mc.width = stage.stageWidth;
 
   footer_mc.x = stage.stageWidth/2;
   footer_mc.y = stage.stageHeight;
   footer_mc.width = stage.stageWidth;
 
   movie_mc.x = stage.stageWidth/2;
   movie_mc.y = stage.stageHeight/2;
}

In questa maniera ho costretto in miei oggetti a seguire continuamente il resize. Notate che ho fatto adattare la lunghezza delle barre allo schermo ed ho centrato movie_mc.

Per centrare tutto anche quando aprite la pagina basta copiare le stesse righe di codice che sono dentro la funzione, al posto delle righe del codice 2. Ecco come sarà il codice finale:

stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align= StageAlign.TOP_LEFT;
 
header_mc.x = stage.stageWidth/2;
header_mc.y = 0;
 
footer_mc.x = stage.stageWidth/2;
footer_mc.y = stage.stageHeight;
 
stage.addEventListener(Event.RESIZE, onResize);
 
function onResize(event:Event):void {
	header_mc.x = stage.stageWidth/2;
	header_mc.y = 0;
	header_mc.width = stage.stageWidth;
 
	footer_mc.x = stage.stageWidth/2;
	footer_mc.y = stage.stageHeight;
	footer_mc.width = stage.stageWidth;
 
	movie_mc.x = stage.stageWidth/2;
	movie_mc.y = stage.stageHeight/2;
}

Ora avete tutte le conoscenze per gestire al meglio i vostri contenuti Flash. Qui sotto potrete scaricare i sorgenti.

Alla prossima!!

Autore:

Roberto Cinetto - Web & Graphic Designer

Giovane designer di Padova Roberto è sempre stato appassionato del mondo informatico e come tale è sempre alla ricerca di nuove ispirazioni e di nuove tecnologie da esplorare. Da molti anni è anche chitarrista e amante della musica in generale. Il suo sogno è di riuscire un giorno a creare una agenzia multimediale competente in web, grafica/video e recording/mixing, naturalmente tramite la collaborazione con svariati professionisti.