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”).

Stage Resize in Flash
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

Author

Sono un Creative Strategist con più di 10 anni di esperienza in strategie digitali. Il mio ruolo di Stratega consiste nell’ideare e sviluppare concept creativi per progetti multicanale, individuando le attivazioni e dinamiche di Marketing da applicare attraverso un approccio strategico.

92 Commenti

  1. Liberementi

    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..

  2. 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

  3. Liberementi

    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

  4. 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

  5. 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…

  6. hihi..!!sono passata a farti un salutino…
    spero che le mie lezioni di informatica per il mitico esame saranno private :P
    tvb!!

  7. Alessandro

    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ù…..

  8. @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

  9. Pingback: Stage Resize in Flash : sastgroup.com

  10. ciao ….
    sempre grandi tutorialssss
    E se volessi diciamo “farlo stare” sempre in alto a sinistra cosa devo cambiare ?
    ;
    J.

  11. 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…

  12. 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.

  13. usa il nome istanza del clip centro se vuoi che si centri al resize

    loadMovie("nomefile.swf", _root.centro);

    ciao

  14. emanuele

    ciao julius

    diciamo che io ho come sfondo un movie semitrasparente…
    non capisco perche su explorer funziona, mentre su firefox no!!!

    grazie!

  15. emanuele

    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!

  16. 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!!!!!

  17. 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

  18. @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.pippo

    ora avrai

    _root.centro.pippo

  19. Juuuuuuuulius!!! 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!!!

  20. 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

  21. 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

  22. 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!

  23. Grazie mille Julius!!! te lo sto inviando ora… spero di aver messo tutto il necessario nella cartella!

    grazie ancora!

  24. 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?

  25. 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 :(

  26. Francesco

    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

  27. Alessandro

    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ò

  28. francesco

    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

  29. 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);

  30. francesco

    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

  31. francesco

    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)

  32. 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?

  33. 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

  34. StuCkCaRBoy

    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 !!

  35. 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.

  36. Simone75

    Ciao Julius,
    volevo sapere come adattare il tuo esempio per AS3.
    Hai qualche esempio da mostrarmi??
    Grazie.

  37. @StuCkCaRBoy: controlla di avere dato dimensioni in percentuale e non fisse

    @Simone75: ciao prova a dare un occhiata sul forum di FLEP

  38. 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

  39. 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 !!

Commenti