Adattare un sito Flash a tutte le risoluzioni del monitor

- Letture: 9.932

Molti lettori di JuliusDesign mi chiedono spesso come adattare un sito Flash a tutte le risoluzioni del monitor.

Che dimensioni devo usare? Devo inserire qualcosa nel CSS o in ActionScript?

Le idee sono molto confuse, vediamo di chiarire alcuni concetti base

Prima di tutto ricordiamoci di pubblicare il nostro filmato flash al 100%

In seguito non dimentichiamo che con Firefox c’è un piccolo bug, ovvero il nostro sito pubblicato al 100% sia in larghezza che in altezzaa verrebbe tagliato in quanto FF vuole avere anche un valore in altezza

Quindi andiamo a inserire uno Stile interno alla pagina in questo modo

<style type="text/css">
* {
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>

Abbiamo impostato margine e padding a 0, l’altezza al 100% e indicato al browser di eliminare lo scroll bar di destra, quest’ultima prassi è opzionale.

In seguito in flash ricordiamo sempre di inserire

Stage.align = "TL"; // imposto l'allineamento in alto a sinistra
Stage.scaleMode="noscale"; //Non scalo i contenuti

Vi consiglio di inserire un’immagine formato 1600×1200, ovviamente ottimizzate al meglio con un editor di immagini esterno e se non bastasse, impostate al 50% la qualità dalla libreria in Flash

Questo esempio potrebbe ricordare un articolo scritto riguardante StageResize, ma voglio farvi notare bene l’immagine di sfondo.

Infatti noterete che in questo esempio l’immagine viene proporzionata in larghezza e mai distorta.

Provate a ridimensionare più volte la pagina di esempio vedrete il ridimensionamento corretto dell’immagine senza farla sgranare

Grazie a Marco per la segnalazione

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

201 Commenti

  1. @ Alberto:
    ok ho combinato…essendo diverse le dimensioni degli stage di lavoro, dovevo sistemare le coordinate all’interno del file xml!

  2. Hei, ciao Julius, come va?
    Ascolta, mi chiedevo, ma se il centro con transizione tween
    volessi farlo arrivare da sinistra o destra anzichè dall’alto… come dovrei fare???

    Sono riuscito a modificare la transizione, ma non riesco a capire come farla arrivare da un’altra direzione.

    Ti ringrazio in aticipo.

    Ciao! ;-)

  3. Roberto Magliozzi

    va bene che quando il monitor ha una risoluzione più piccola si adatti allo schermo, ma se è più grande e non volessi che si ingrandisse? Si può mettere un max dopo cui non andare?
    Ad esempio ho un 1200×800, e non voglio vederlo più grande (ad esempio monitor 1680×10509) come modifico il codice?
    grazie 1000

  4. Giovanni

    Ciao, se io volessi usare “centro” per caricare un swf esterno, come posso fare a mantenere la stessa posizione centrale? mi sposta il clip filmato in un’ altra posizione dello schermo…

    grazie ;)

  5. dbdesign

    Ciao Julius,
    vorrei sapere se è possibile allineare in basso un clip all’interno del tuo tutorial.

  6. Grazie julius del tuo tutorial
    Sono molto indietro con AS3. Volevo solo chiederti se non ti disturba come fare in modo che la foto venga importata dall’esterno. Nel tuo tutorial il codice fa riferimento ad una foto in libreria e l’swf pesa già molto.
    Non credi?
    Grazie

  7. Julius help me please!!!

    Ecco ti posto un’esempio di cosa vorrei arrivare a fare…

    http://www.ean13.it/web/#/collections/

    Qui c’è un video in loop…al 100%
    io vorrei che cmq cosa sian o video o img si visualizzassero coem sfondo al 100%..come faccio a fare queste 2 cose???? (img o video di sfondo al 100% e visualizzazioni random diverse ad ogni entrata)

  8. Ciao Giulio, ciao ragazzi.
    Posto qui questa richiesta speranzoso che sappiate aiutarmi.
    Ho utilizzato questo script diverse volte per diversi siti.

    ora però mi si sta ponendo un problema che non avevo mai avuto, e che mi blocca completamente.
    in sostanza non funziona più lo script.
    credo che mi manchi qualche classe predefinita di Flash, e per questo mi salta il funzionamento.

    presuma che la ragione sia questa, ma sono aperto a ogni suggerimento.

    Io uso Flash CS4 montato su una macchina windows.

    Vi ringrazio e rimando in attesa di qualche suggerimento.

  9. Ciao a tutti

    Vi prego di aiutarmi perchè ho impostato dei miei lavori su questo tutorial e ho riscontrato dei seri problemi durante i test online.
    Prima su uno spazio libero di altervista e poi su un hosting linux che ho per un blog che sto creando in wordpress.
    In locale mi fuziona tutto perfettamente!
    Ho provato tutte le soluzioni possibili di rinominazione dei file, sono arrivato a caricare, per assurdo, tutto il materiale originale (cambiando il nome del file html in index) presente nel pacchetto da scaricare, ho ricreato la pagina html (funzionante in locale) ma nulla di nulla!
    Solo schermo bianco con la scritta in alto di scaricare flash (che ovviamente non è da aggiornare)

    spero veramente che qualcuno possa aiutarmi!
    un grazie di cuore!

  10. antonino

    ciao julius casini pieni! nel caso la finestra del “centro” fosse troppo grossa e non posso ridimensionarla, come inserisco una scroll bar solo verticale?

    Help!!!!

  11. antonino

    ciao julius, grazie ma non era quello che intendevo. Mi sono spiegato male io, nel senso tu hai nascosto la scroll bar con il comando:

    overflow:hidden;

    io la voglio mettere con il comando: overflow-y: scroll;

    mi mette la scroll ma non il rettangolino che va su e giu.

    capito? :-)

  12. sempre antonino

    Mi sono spiegato male io, nel senso tu hai nascosto la scroll bar con il comando:

    overflow:hidden;

    io la voglio mettere con il comando: overflow-y: scroll;

    mi mette la scroll ma non il rettangolino che va su e giu.

  13. ciao a tutti

    ci riprovo..secondo voi quali potrebbero essere i problemi per cui il template (anche originale così com’è) non mi funziona una volta messo online? (in locale funziona tutto perfettamente).

    le ho provate davvero tutto ma nulla di nulla, una volta caricato sullo spazio web non funziona!

    grazie mille in anticipo.
    Se qualcuno ha dei suggerimenti e non vuole postare qua può scrivermi alla mail stefano.crose@hotmail.it

  14. Ciao Julius, fantastica guida!

    Devo però chiederti una piccola informazione. Sono riuscito sin da subito a adattare il sito in flash a qualsiasi risoluzione del monitor, ma le scritte all’interno del filmato si vedono malissimo. Cosa può essere?

    Grazie mille.

  15. Ciao julius volevo chiedereti una curiosità…ma in questo templates che hai fatto, perchè io lo utilizzo come template, non c’è una gallery-slideshow di immagini da far girare come sfondo?

  16. Ciao, ma una volta fatto funzionare tutto, lo slideshow è l’ultimo dei problemi. Addirittura sul tuo esempio sono immagini statiche, le posizioni ognuna su un fotogramma chiave e con i pulsanti le scorri, senza entrare in script avanzati; chiaramente se sono molto pesanti, ad ogni fotogramma di cui sopra, metti uno script che fa caricare l’immagine da una cartella apposita, quando richiamata. Io che non sono un programmatore come tanti quì in giro ci sono riuscito senza problemi su un mio vecchio sito

    http://www.rtmstudio.it/exclusiva/sitoold/

  17. ci riprovo ancora…l’hosting deve avere qualche particolare specifico per far funzionare questo template??
    Non capisco perchè non mi funziona online ma solo in locale!
    Per intenderci se scarico il pacchetto e così com’è lo carico su un server altervista oppure sul mio spazio non funziona!
    spero qualcuno possa riuscire ad aiutarmi.

    grazie in anticipo

    Stefano

  18. @ Stefano: Stefano nessun particolare deve avere l’hosting…

    probabilmente devi rinominare la pagina di default che julius ha chiamato ”flash_all_resolution.html” in ”index.html”.Inoltre verifica bene a caricare i file nella cartella principale dello spazio web in questione (di solito è hdocs) altrimenti digitando l’url non si vede.

    se invece crei una cartella specifica (es:cartella) la devi digitare nell’indirizzo…es_www.miodominio.it/cartella/index.html.

    ultima cosa carica tutti i file compresi nel pacchetto

    buona fortuna

  19. @ Giovanni:
    ciao giovanni

    grazie mille per l’interessamento!
    ma le ho provate tutte fidati!!
    Prima su uno spazio libero di altervista e poi su un hosting linux che ho per un blog che sto creando in wordpress.
    In locale mi fuziona tutto perfettamente!
    Ho provato tutte le soluzioni possibili di rinominazione dei file, sono arrivato a caricare, per assurdo, tutto il materiale originale (cambiando il nome del file html in index) presente nel pacchetto da scaricare, ho ricreato la pagina html (funzionante in locale) ma nulla di nulla!
    Solo schermo bianco con la scritta in alto di scaricare flash (che ovviamente non è da aggiornare)

    non riesco proprio a capire perchè non lavora!!!!!
    spero di risucre a trovar la soluzione!!

    grazie

    Ciao

  20. @ Giovanni:
    ciao giovanni

    grazie mille per l’interessamento!
    ma le ho provate tutte fidati!!
    prima ho provato su uno spazio libero di altervista e poi su uno spazio in linux che ho per un blog che sto creando.
    In locale mi fuziona tutto perfettamente!
    Ho provato tutte le soluzioni possibili di rinominazione dei file, sono arrivato a caricare, per assurdo, tutto il materiale originale (cambiando il nome del file html in index) presente nel pacchetto da scaricare, ho ricreato la pagina html (funzionante in locale) ma nulla di nulla!
    Solo schermo bianco con la scritta in alto di scaricare flash (che ovviamente non è da aggiornare)

    non riesco proprio a capire perchè non lavora!!!!!
    spero di risucre a trovar la soluzione!!

    grazie

    Ciao

  21. Ciao a tutti e complimenti a Julius per il suo fantastico sito , volevo chiedere questa tecnica se la vorrei applicare invece ad un file swf cioe’ invece di caricare l’immagine vorrei caricare un file swf con dentro una galleria come dovrei fare ? Dovrei creare la galleria con le immagini e applicargli lo stesso codice che proponete in questo post ?

    Grazie e cordiali saluti

  22. Ciao Julius,
    ormai questo file lo uso spesso e volentieri per i miei siti, è fantastico.
    Mi chiedevo però come mai nel mc “centro”, il testo lo posso evidenziare come in un qualsiasi file html.
    Ho provato a guardare nel codice se c’è uno script per il testo ma nulla mi dice nulla.
    Forse la domanda non è pertinente ma….come si può fare?
    Spero di essere stata chiara.
    Grazie ancora per tutto ciò che metti a disposizione per la comunità!

  23. @ Wanda:
    Ciao Wanda nelle propietà del testo, vedi sotto ci sono delle iconcine piccole , devi cliccare sull’icona dove sta”Ab”, è il comando per rendere selezionabile un testo.

    ciao

  24. ragazzi scusatemi,
    Ho notato che inserendo dei pulsanti slla pagina nn fungono.
    Come mai?
    Eppure creo pulsanti cosi come li creo sempre ma qui nn fungono.
    Quando ci passo il mouse sopra nn diventano manina…
    Qlcuno mi aiuta?

  25. Io ho utilizzato questo file (scaricato dal download di cui sopra) in una mia pagina e volevo inserirlo come sfondo per poi far visualizzare di sopra un normale contenuto creato da me ma non riesco ad ottenere il risultato sperato (o non mi si visualizza lo sfondo swf o il contenuto in html) mi dareste una mano?

  26. salve a tutti!
    Ho scarikato il template….molto bello e riutilizzabile. Secondo me sarebbe molto + completo se si potesse rimpiazzare l’immagine a pieno skermo con uno slideshow ke carika delle immagini posizionate esternamente al file swf. vi ringrazio anticipatamente per l’aiuto! :))

  27. vincenzo

    @ Angelo:

    si hai proprio ragione sarebbe fantastico ..

    vediamo chi mi può aiutare …

    ho scaricato questo template di julios

    ma ho delle difficoltà in particolare con chrome funziona ma con altri broswere non funziona il file flash non viene carivato in altezza si vede + piccolo (opera, firefox)

    le pagine da me modificate sono le seguenti

    http:// www. adarredi. com/ prova2 / prova_enzo.html

    il css relativo alla pagina è questo:

    body {
    margin:0px;
    padding:0px;
    height:100%;
    overflow:hidden;
    }

    .principale {
    width:auto;
    height:auto;
    }

    #flashcontent {

    width:100%;
    height:69%;
    overflow:hidden;

    }

    .menu {
    max-width:auto;
    height: 195px;
    overflow:hidden;
    background-color:#444444;
    }

    .footer {
    max-width:auto;
    overflow:hidden;
    background-color:#444444;
    }

  28. volevo chiedere alle persone a cui funziona il template su quale
    sito di servizio hosting hanno testato e creato la loro versione.
    non riesco a capire perchè a me continua a non funzionare online nonostante in locale lavori perfettamente!

    grazie

  29. Ciao Julius, prima di tutto SEI UN GRANDE!!
    poi vorrei chiederti qualcosa, che mi fa diventar matto……….che risoluzione adotto per il sito web??
    come traduco il tuo esempio per swishmax 3??
    io vedo in giro siti che si adattano a tutte le risoluzioni e io invece non riesco a farlo………aiuto per favore.

  30. Ciao Julius, innanzitutto ti ringrazio per i tuoi grandissimi lavori che metti a disposizione.
    Non ti nascondo che spesso mi hai “salvato la vita” con i tuoi tutorial.
    Ora ho questo problema: mi sono deciso finalmente a realizzare un sito in flash che si adatti a tutte le risoluzioni con l’aiuto di questo tutorial.
    Ma non riesco a capire perchè la foto di sfondo perde di qualità.
    HO provato con tutti i formati: jpeg, gif png. Nonappena la foto si rimpicciolisce, questa fa quell’effetto zig zag nei contrni.
    vedi esempio: http://www.effevidesign.it/provaeskeyfw2

    Come potrei risolvere?

    Vorrei sapere come fa louis vuitton a ridimensionare la foto senza che questa perda di qualità! mi sta facendo impazzire…

  31. @ Fabio:
    Ho trovato la soluzione. (lo dico, per chi avesse avuto lo stesso problema)
    Bastava andare nelle proprietà dell’immagine della libreria in flash e spuntare la voce “consenti smussatura”

  32. Ciao Julius,
    sono 3 giorni che sto provando a creare il ridimensionamento ma non ci riesco.
    Non ho idea di cosa sbaglio, da quello che dici i parametri da settare sono veramente pochi!
    Puoi ricapitolare i passi? Mi sento un idiota!
    Ho messo la risoluzione stage 1600×1200, nelle impostazioni di pubblicazione ho messo 100×100 e di non scalare. Ho inserito un livello con quelle 2 righe di codice che hai scritto tu in flash ma quando faccio CTRL+INVIO il mio non si ridimensiona, il tuo sì! Perchè?

  33. Mi sa che devi guardarlo in HTML, perchè il filmato se fai ctrl invio non si ridimensiona! se lo guardi dentro all’HTML si!

  34. grazie mille per la dritta ma ancora non si ridimensiona..
    se riesci a darci un occhiata ti sarei veramente grato.
    Ti allego 2 screenshot dei settaggi, il file fla e la pagina caricata su server:

    http://aboutsdc.altervista.org/provaflash/settaggi1.jpg
    http://aboutsdc.altervista.org/provaflash/settaggi2.jpg
    http://aboutsdc.altervista.org/provaflash/prova.fla
    http://aboutsdc.altervista.org/provaflash/prova.html

    Come vedi nell’fla c’è solo la foto di sfondo ma pur essendo banalissimo non mi va

  35. Ciao Stefano! Dunque controlla tutti ciò che ti dico in ordine, a volte sembra di non uscirne, ma bisogna essere il più attenti possibile quando si lavora con flash. Una minima cosa dimenticata potrebbe non far funzionare niente!!!

    Cominciamo dai file esterni:

    http://www.andreacentaro.com/images/files.png

    Questo deve essere il numero esatto e i file esatti che devi possedere nella cartella.

    Dunque nei settaggi della pubblicazione trovo un errore.
    Sul tuo file è impostato su percentuale, larghezza 100×100, mentre dovrebbe essere su Adatta a Filmato, con le mkisure che hai già inserito.

    SCALA: predefinita (mostra tutto)

    http://www.andreacentaro.com/images/files.png

    Pubblica tutto dai settaggi, perchè quando fai CTRL invio cambia solo il FLA, e il codice html rimane invariato, quindi hai sicuramente qualche impedimento alla funzionalità!!

    http://www.andreacentaro.com/images/settings.png

    Poi ho guardato il codice della tua pagina html. io credo che l’errore sia anche lì dentro. Ho visto che ti manca una cosa fondamentale:

    Questo devi metterlo nella pagina HTML prima di

    http://www.andreacentaro.com/images/codice.png

    Senza questo temo non fiunzionerà mai il ridimensionamento!!! Spero che ti possa aver aiutato!
    Buona domenica!!!! Andrea

  36. Hai copiato tutti i file di Julius nella tua cartella? Escludendo il FLA e l’SWF devi avere anche tutto il resto con i tuoi file!

  37. Non l’avevo fatto per il fatto che lui nel suo codice del frame li ha utilizzati invece qui nella guida non li menziona. Ho capito quindi che sono file che lui ha utilizzato per abbellire la pagina con quella finestra centrale nera, cosa che a me non interessa, vorrei solo avere una foto che si ridimensiona.
    Ho provato comunque a seguire il consiglio e ad aggiungerli alla cartella ma, chiaramente, non avendoli inclusi nel codice, è come se non ci fossero.
    La domanda quindi è: se bisogna inserire altro codice oltre a quello scritto nella guida, quale è di riferimento al solo ridimensionamento? Per il momento non mi serve la finestra nera al centro, vorrei solo capire come funziona il ridimensionamento.

  38. Ciao Julius volevo chiederti una cosa io utilizzo spesso questo script solo che ora ho provato ad inserire due immagini come sfondo che vanno sovrapposte una all’altra in transparenza che poi con il mouse da l’effetto movimento, ho impostato su due fotogrammi diversi lo script identico cambiando solo i nomi delle immagini, anche se non sono sicuro di aver fatto bene quando apro il browser le immagini si adattano bene, il problema nasce quando provo a modificare le dimensioni della pagina che si ridimensiona solo una e l’altra resta invariata…come potrei fare ?

  39. Adonella

    Ciao Julius, per prima cosa grazie per i tuoi magnifici tutorial.
    Volevo chiederti, ho fatto tutto quello che hai descritto per adattare il flash a tutte le risoluzioni, ho solo un problema, come faccio a mettere il mio flash a sinistra invece che al centro? Nella mia clip c’è il logo e il menu in verticale e a fianco (alla sua destra) un immagine, quando lo avvio mi occupa la parte centrale e tutta la parte di destra lasciandomi un sacco di spazio a sinistra, solo quando gli faccio il resize mi va a sinistra.
    Grazie infinite!

  40. Adonella

    wowww dopo ore di mal di testa per questa sciocchezza ce l’ho fatta:

    centro.tween(“_x”, Stage.width/left, “easeoutBack”);
    centro.tween(“_y”, Stage.height/2,1, “easeoutBack”);

Commenti