Molti mi chiedono come funzionano i siti con il resize automatico, ovvero quei siti in cui alllargando la pagina HTML il contenuto rimane centrale e lo sfondo rimane a tutta pagina.
Per effettuare un resize automatico sfrutteremo il metodo addListener di Stage che consente di rilevare quando un file SWF viene ridimensionato (ma solo se Stage.scaleMode = “noScale”).

In questo esempio ci sono due clip, il primo di nome istanza centro ovvero il nostro sito.
Mentre il clip nome istanza sfondo viene ridimensionato in base alla larghezza e altezza della pagina.
Da notare che nel clip sfondo vi è un immagine, nulla vieta di renderla dinamica tramite un loadMovie o con funzioni random.
Come di consueto andiamo ad analizzare il codice:
//includo la classe lmc_tween.as
#include "lmc_tween.as"
//allineamento TL
Stage.align = "TL";
Stage.scaleMode = "noscale";
_quality = "BEST";
_global.setStage = function() {
slis = new Object();
slis.onResize = function() {
//imposto le coordinate del clip centro tramite tween
centro.tween("_x", Stage.width/2, 1, "easeoutBack");
centro.tween("_y", Stage.height/2, 1, "easeoutBack");
//imposto le dimensioni del clipo sfondo al fine di adattarlo alla pagina
sfondo._width = Stage.width;
sfondo._height = Stage.height;
};
Stage.addListener(slis);
slis.onResize();
};
// richiamo la funzione setStage
setStage();
Notiamo bene che il metodo addListener() non funziona con l’impostazione di modifica in scala predefinita dei clip filmato (showAll) o con altre impostazioni di modifica in scala (exactFit e noBorder).
Testato con IE6 - IE7 - FF2 - Opera
Scarica il sorgente
Guarda il Tutorial
ABC, Altro, Design, Flash, HTML, Immagini, Linux, Sviluppo, Tutorial

Pagine: « 1 [2] Mostra tutto
Pagine: « 1 [2] Mostra tutto
tag abilitati: <code> </code> | <a href=""> </a> | <b> </b> | <i> </i>
Ale
18 Novembre 2007 alle 15:52 pm
uff ma non va… =o( il file swf cmq ha le dimensioni originali (1000 x740) la pagina html non l’ho toccata e dovrebbe essere al 100 % l’unica cosa che ho fatto è eliminare i margini () quando carico la pagina vedo il tween e ho il movie clip “centro” in posizione esatta ma se riduco la finestra allora vedo il margine sinistro (mc “sfondo”) e un pezzo del “centro”… uff che casino spero che si capisce… cmq ti dico che la risoluzione del mio pc è 1280x 800 (se può servire).
uff ci terrei che funzionasse questo resize…lo trovo bellissimo! sono grato per ogni dritta! grazie anticipatamente!
Julius
18 Novembre 2007 alle 15:54 pm
Inviami il progetto via mail che controllo…
juliuswebdesign@gmail.com
Ale
18 Novembre 2007 alle 16:12 pm
Grazie mille Julius!!! te lo sto inviando ora… spero di aver messo tutto il necessario nella cartella!
grazie ancora!
Elisa
24 Novembre 2007 alle 12:14 pm
Ciao julius, mi puoi aiutare? ho scaricato il file stage.zip in questa sezione del blog, cliccando su index.html vedo il filmato correttamente, però quando apro il file stage.fla con flash cs3 e lo pubblico di nuovo, cliccando sia su index.html che su stage.swf, per vedere il filmato, mi accorgo che non funziona più la centratura automatica del clip filmato “centro” mentre il resize della foto (clip filmato “sfondo” ) si adatta normalmente come prima allo stage. come mai?
Elisa
24 Novembre 2007 alle 13:10 pm
ho risoltooo!!, sorry, sono stata troppo precipitosa.. non avevo copiato le cartelle “com” e “zigo” nella mia nuova cartella, quindi lo script non funzionava correttamente
Julius
24 Novembre 2007 alle 14:35 pm
Francesco
11 Febbraio 2008 alle 10:44 am
Ciao Julius ho un grosso problema,
se io volessi aggiungere un’altra barra che stia sempre imbasso e usarla come menu che si restringa solo in larghezza come dovrei fare? non sono bravissimo in AS
Per favore rispondimi è urgentissimo… help help
Alessandro
2 Aprile 2008 alle 21:58 pm
Ciao Julius, utilissimo!
Una sola domanda…nel tuo esempio l’ammagie di sfodno si ridimensiona non tenendo contro della proporzione.
Per il mio progetto ho come sfondo un immagine di modella, e quindi ridimensionando la finestra l’immagine si dovrebbe ridimensionare mantendo però le proporzioni tra height e width
Il risultato che vorrei ottenere è questo:
http://www.nolita.it/
aiutooo. ci sto sbattendo la testa da un pò
francesco
26 Aprile 2008 alle 13:36 pm
Ciao julius ho un problema che non riesco a risolvere.
come posso fare per caricare in modo dinamico (cliccando un btn) un immagine nella clip “sfondo”; quindi l’immagine si deve adattare completamente????
ciao grazie in anticipo
Julius
28 Aprile 2008 alle 19:51 pm
usa un clip contenitore (nome istanza sfondo) è scrivi questo semplice codice
metti che hai 5 immagini che si chiamano immagine1.jpg 2.jpg ecc ecc
a=random(5)+1;loadMovieNum("immagine"+a+".jpg",_root.sfondo);
francesco
31 Maggio 2008 alle 15:48 pm
ciao julius grazie per la risposta ma ho riscontrato un solo problema che l’immagine di sfondo non si adatta subito, anzi si adatta solo se modifico la dimensione della finestra come posso fare affinche l’immagine si adatti al caricamento ciao grazie
francesco
31 Maggio 2008 alle 16:26 pm
julius grazie ho risolto così ciao
var mObj:Object = new Object();
mObj.onLoadInit = function(target) {
target._alpha = 100;
target._width = Stage.width;
target._height = Stage.height;
};
mObj.onLoadStart = function(target) {
target._alpha = 0;
};
var mLoad:MovieClipLoader = new MovieClipLoader();
mLoad.addListener(mObj);
a=random(5)+1;
mLoad.loadClip(”immagine”+a+”.jpg”,_root.sfondo)
Andrea
13 Giugno 2008 alle 16:59 pm
ciao Julius ho un probelma…
ho aggiunto nel codice di “stage.fla”
loadMovie(”elementi.swf”,_root.sfondo);
per caricare un swf esterno come sfondo..
il fatto è che quando apro la pagina tutto funziona benissimo ma quando provo a ridimensionare la finestra le dimensioni del movie non si adattano più!…
poi se clicco su aggiorna, il movie ritorna ad occupare (come dovrebbe) tutto lo schermo..
quale potrebbe essere il problema?
Julius
13 Giugno 2008 alle 19:03 pm
Nel clip sfondo inserisci un rettangolo vettoriale con alfa 0
vedrai che la prima visualizzazione cambierà
Questo succede in quanto il clip contenitore all’inizio non deve essere vuoto ma deve contenere gia un elemento cosi da impostare le dimensioni…
Ovviamo al problema, inserendo un oggetto trasparente, come ti dicevo prima
StuCkCaRBoy
28 Settembre 2008 alle 19:45 pm
Ciao Julius !!
Nulla da fare.. ho considerato l’esempio del tuo sfondo come fosse il mio .fla, che tanto per ora è molto semplice e ha soltanto un pulsante, quindi ho aggiunto il codice che hai scritto sopra e nella pagina HML ( uso Dreamweaver ) ho aggiunto
ma il mio filmato, che ha dimensioni 1024 - 769, rimane sempre troppo grande.. So che sbaglio in tutto ma spero cmq in un’illuminazione.. ciao !!
simpa71
19 Ottobre 2008 alle 21:43 pm
Io non ho ben capito, dai commenti e soluzioni date, come fare a ridimensionare anche i filmati esterni.
prepararo il primo in uno stage di dimensioni tot, gli altri in stage uguali al primo e li posiziono.
grazie.
Simone75
10 Novembre 2008 alle 17:37 pm
Ciao Julius,
volevo sapere come adattare il tuo esempio per AS3.
Hai qualche esempio da mostrarmi??
Grazie.
Julius
10 Novembre 2008 alle 19:55 pm
@StuCkCaRBoy: controlla di avere dato dimensioni in percentuale e non fisse
@Simone75: ciao prova a dare un occhiata sul forum di FLEP
zebrap
14 Novembre 2008 alle 12:32 pm
ciao julius! volevo chiederti una cosa, io vorrei ridimensionare proprio il mio fla. è troppo grande e vorrei farlo più piccolo dalla partenza. se lo ridimensiono in percentuale quando lo pubblico le immagini perdono e fanno un effetto strano e brutto.
cè un modo corretto che mi permetterebbe di ridimensionare il mio stage e tutti contenuti?
o devo rifare TUTTO….???
-_-’
grazie
z