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
92 Commenti
Ciao Julius, capiti a fagiuolo non sai quanto. Ci sto sbattendo la testa da giorni, ma non riesco ad applicare il fullscreen del tuo tutorial al movie che ho trovato qui.
Non riesco a far sì che le tesserine, senza sgranare, si dispongano in orizzontale coprendo tutto lo stage a qualunque risoluzione.
Spero tu possa aiutarmi.
Ti ringrazio in anticipo..
ciao Julius,
bel tutorial come sempre e di grande attualità: una domanda se io volessi che il clip centrato avesse altezza che decido io ma larghezza ad esempio 100%
che codice dovrei usare:
mioclip._width = Stage.width;?
ma con il listener questo poi funziona e quindi si riadatta a ogni cambiamento??
grazie in anticipo
Ciao Julius almeno un grazie ti è dovuto un tutorial davvero efficiente
Dimenticavo, il codice è questo:
Stage.scaleMode = "noScale"
Stage.align = "TL"
_global.itens = [mc1, mc2, mc3, mc4, mc5];
_global.nome = ["Notícias", "Info", "Fólio", "Links", "Contato"];
_global.swf = ["01.swf", "02.swf", "03.swf", "04.swf", "05.swf"];
//
_global.largura = 300;
_global.altura = 300;
//
Reverse = function () {
for (var i = 0; i<itens.length; i++) {
if (i != selecionado) {
itens[i].bt.enabled = true;
itens[i].bt.useHandCursor = true;
//
itens[i].top.tween("_width", 80, tempo, AnimType);
itens[i].sombra.tween(["_width", "_height"], [80, 98], tempo, AnimType);
itens[i].fd.tween(["_width", "_height"], [80, 80], tempo, AnimType);
itens[i].meio.tween(["_width", "_height"], [70, 70], tempo, AnimType);
itens[i].mask.tween(["_width", "_height"], [70, 70], tempo, AnimType);
//
descarregaMovie = function () {
itens[i].alvo.unloadMovie();
};
itens[i].alvo.alphaTo(0, tempo, "", 0, descarregaMovie);
}
}
};
for (var i = 0; i<itens.length; i++) {
itens[i].i = i;
itens[i].alvo._alpha = 0;
itens[i].titulo.text = nome[i];
//
itens[0].top.tween("_width", largura+10, tempo, AnimType);
itens[0].sombra.tween(["_width", "_height"], [largura+10, altura+28], tempo, AnimType);
itens[0].fd.tween(["_width", "_height"], [largura+10, altura+10], tempo, AnimType);
itens[0].meio.tween(["_width", "_height"], [largura, altura], tempo, AnimType);
itens[0].mask.tween(["_width", "_height"], [largura, altura], tempo, AnimType);
itens[0].alvo.loadMovie(swf[0]);
itens[0].alvo.alphaTo(100, tempo);
itens[0].bt.enabled = false;
itens[0].bt.useHandCursor = false;
//i
itens[i].bt.onRollOver = function() {
this._parent.meio.colorTo("0xffff00", tempo/4);
};
itens[i].bt.onRollOut = function() {
this._parent.meio.colorTo("0x333333", tempo);
};
itens[i].bt.onRelease = function() {
_global.selecionado = this._parent.i;
this.enabled = false;
this.useHandCursor = false;
//
this._parent.alvo.loadMovie(swf[selecionado]);
this._parent.alvo.alphaTo(100, tempo);
//
this._parent.top.tween("_width", largura+10, tempo, AnimType);
this._parent.sombra.tween(["_width", "_height"], [largura+10, altura+28], tempo, AnimType);
this._parent.fd.tween(["_width", "_height"], [largura+10, altura+10], tempo, AnimType);
this._parent.meio.tween(["_width", "_height"], [largura, altura], tempo, AnimType);
this._parent.meio.colorTo("0x333333", tempo);
this._parent.mask.tween(["_width", "_height"], [largura, altura], tempo, AnimType);
Reverse();
};
}
onEnterFrame = function () {
mc2._x = mc1._x+mc1.fd._width+3;
mc3._x = mc2._x+mc2.fd._width+3;
mc4._x = mc3._x+mc3.fd._width+3;
mc5._x = mc4._x+mc4.fd._width+3;
};
Tks
Non so se è capitato anche a voi…ma della clip “sfondo” per un primo fotogramma risulta sfalsata e poi si ridimensiona. Non può partire direttamente a tutto schermo?!? Poi…il file centrale deve essere così lento a ricentrarsi?!? Il mio riferimento è il sito http://www.zara.com.
Un saluto a tutti
stefano ovviamente puoi dare le dimensioni allo sfondo e le coordinate al clip centro di default se le sai gia al fine di non far vedere il movimento all’inizio…
Io lo fatto proprio per quello…
Per quanto riguarda la velocità puoi inserire dei valori numerici nella funzione tween
centro.tween(”_x”, Stage.width/2, 1, “easeoutBack”,0.1);centro.tween(”_y”, Stage.height/2, 1, “easeoutBack”,0.1);
Cambiando i valori numerici si possono visualizzare animazioni di x e y sincrone o asincrone…
@Lucbord ciao,
si dovrebbe funzionare come presupponi tu…
@Oibaf ciao grazie!!
@Liberementi ora vedo…
hihi..!!sono passata a farti un salutino…
spero che le mie lezioni di informatica per il mitico esame saranno private :P
tvb!!
anche in pubblico…non mi faccio problemi…
grazie per la visita
Grazie Julius, non ho più muri a cui sbattere.. :/
Ciao
e se io al posto di un movie interno (istanza “centro”) ne carico uno esterno?
Ho provato a caricare con LoadMovie un swf al posto del clip centro….
solo che se l’swf presenta dei motion al suo interno il tween dell’istanza “centro” nn funzia più…..
@Alessandro il contenuto deve stare nel clip centro…oppure in un altro clip associandogli ( come al clip centro ) la classe tween.
Ricordo che se carichi un swf nel clip centro potresti avere problemi di percorso, in quanto stai nidificando un clip… controlla bene
Pingback: Stage Resize in Flash : sastgroup.com
ciao ….
sempre grandi tutorialssss
E se volessi diciamo “farlo stare” sempre in alto a sinistra cosa devo cambiare ?
;
J.
Come vedi in linea 10/11 il centramento automatico viene impostato dividento altezza e larghezza dello stage…
Se provi a fare delle proporzioni sempre con l’altezza e larghezza dello stage dovresti facilmente trovare la formula per alliniare in alto a sinistra…
ciao, volevo chiederti se in qesto resize era possibile caricare file da esterno, io utilizzando lo script : loadMovie(“nomefile.swf”, vuota12); non riesco nel mio intento. Grazie anticipatamente, ciao.
usa il nome istanza del clip centro se vuoi che si centri al resize
loadMovie("nomefile.swf", _root.centro);ciao
ciao julius
diciamo che io ho come sfondo un movie semitrasparente…
non capisco perche su explorer funziona, mentre su firefox no!!!
grazie!
Alla fine ho risolto..
ho messo questo codice nell’html:
Stage Resize – Effettuare un resize automatico
*{
background-color: #ffffff;
background:none;
background-image:url(texture.jpg);
background-repeat:repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
overflow:hidden;
width:100%;
height:100%;
}
var so = new SWFObject(“stage.swf”, “mymovie”, “100%”, “100%”, “7”, “”);
so.addParam(“quality”, “best”);
so.addParam(“menu”, “false”);
so.addParam(“wmode”, “transparent”);
so.addParam(“scale”, “noscale”);
so.write(“flashcontent”);
non ci crederai, ma mettendo backgruond-none funziona alla grande!!
ciao!
:)
Ciao.
Ho creato un movie di 1024×768 con un mc ‘centro’ sempre di 1024×768 che racchiude il corpo –
quando lo mando in esecuzione praticamente quello che si mette al centro dello schermo è l’angolo superiore sinistro dell’mc. Perchè?
Partendo dalle base, ipotizzando che volessi preoccuparmi di risoluzioni video 1024 e 1280… che dimensioni do al mio filmato e all’mc?
E’ indifferente?
Grazie!!!!!
ciao julius!
mannaggia ho un problema con in resize nel senso che inserendo il mio sito in un movie clip che poi vado a chiamare “centro” questo mi perde le sue “capacita” nel senso che non vanno più i pulsanti e la fotogallery xml. non è che avresti un aiutino per me? grazie!
saluti Ale
@Enzo controlla di non aver cambiato nome al clip che rimane centrato, ovvero se lo cambi devi cambiarlo anche nel codice AS
Le dimensioni del filmato devono essere una via di mezzo di quello che vuoi progettare ne piccolo ne gigante, perchè tanto si adatterà…
@Ale inserendo il tuo progetto nel clip centro, i percorsi cambiano…
Quindi devi cambiare i percorsi riferiti al clip di nome istanza centro..
Se prirma avevi
_root.pippoora avrai
_root.centro.pippoJuuuuuuuulius!!! graaaazie!!! ora ci provo subito!!!! cmq per la fotogallery è lo stesso…quella che carica le foto da un file esterno… (xml) in pratica è quella del tuo sito (Dynamic Gallery con miniature scorrevoli).
grazie mille per l’aiuto!!!
Che bello Julius ce l’ho fattaaaaaaaa!!!!! grazieeeeee!!! =o)
saluti Aleee
ufff oh no…ho un altro problema! Quando provo il sito in flash funziona tutto benissimo…ma quando poi pubblico il sito con Dreamweaver (CS3) non funziona più il resize! ho allargato il file swf in dreamweaver e poi ho pubblicato e risce a tenere il centro del ducumento ma non fa riferimento alla finestra di explorer…capisci cosa intendo…ora come faccio…potrebbe essere dreamweaver il problema? tu che cosa usi?
saluti e grazie in anticipo.
Ale
Io uso Dreamweaver 8, il flash l’hai pubblicato al 100% ?
uhm..100%?! dove lo trovo..cmq penso di si..
Uhm non so’ quanto possa servire ma pubblico qua lo script della pagina dreamweaver. Scusami se sto “spammando” in tuo blog =o$
TitoSoul
AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,’width’,’1000′,’height’,’740′,’src’,’TitoSoul testing2′,’quality’,’high’,’pluginspage’,’http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,’play’,’false’,’movie’,’TitoSoul testing2′ ); //end AC code
Nella pagina HTML nel codice di pubblicazione
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!
Inviami il progetto via mail che controllo…
juliuswebdesign@gmail.com
Grazie mille Julius!!! te lo sto inviando ora… spero di aver messo tutto il necessario nella cartella!
grazie ancora!
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?
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 :(
:) ciao alla prossima
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
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ò
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
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);
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
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)
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?
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
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 !!
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.
Ciao Julius,
volevo sapere come adattare il tuo esempio per AS3.
Hai qualche esempio da mostrarmi??
Grazie.
@StuCkCaRBoy: controlla di avere dato dimensioni in percentuale e non fisse
@Simone75: ciao prova a dare un occhiata sul forum di FLEP
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
Ciao Julius…
Come mai anche avendo copiato le cartelle e il file Imc_tween dove ho il file .fla e .swf quando faccio la preview in Flash mi da 60 errori riportati..?
Ciao !!