Adattare un sito Flash a tutte le risoluzioni del monitor

- Letture: 9.927

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

    Ciao,
    volevo ringraziarti molto per il tuo post! Mi hai risolto un dubbio enorme che avevo ormai da settimane! Complimenti per il tuo talento. Ti ho aggiunto ai miei contatti…io lavoro per conto mio e se dovessi avere bisogno di colleborazioni per PHP+MYSQL e AS2/3 ti chiederò un preventivo per interventi vari. Grazie contattami pure se vuoi parlarne…mi servirebbe già un gestore di NEWS…ciao a presto Antonio

  2. Antonio GE

    Scusa Julius ho una domanda in merito al tuo tutorial: ma se adesso all’interno del clip “center” volessi costruire un sito o meglio all’interno del clip “center” volessi far caricare altri swf come faccio? Praticamento ho provato ad inserie il comando “loadMovie” ma il nuovo swf non viene centrato ma mi finische in alto a sinistra, in quanto credo, che sul fla del tutoria l’allineamento “Stage.align” è AL giusto? Quindi cosa devo fare per fare in modo che tutti gli altri swf (menu, pagine, contatti ecc) verranno caricati al centro e si comportino come il clip “centro” ??? Aspetto una tua gentile risposta. Grazie ancora e complimenti!!!

  3. GRAZIE MILLE JULIUSSSSSSSSSSSSSS sei un tesoro! ora continuo alla scoperta di flash! grazie ancora ;)

  4. Ciao, non so perchè, ma a me la foto sgrana!
    Qualsiasi immagine metto di sfondo (1600×1200) quando poi la visualizzo nel brower in html la vedo sgranata…
    da cosa potrebbe dipendere ?

  5. a tutte, 1024×768 – 1280×1024 e anche se metto in widescreen.
    L’immagine è 1600×1200 ma le linee sono sgranate

  6. ho risolto, nelle proprietà dell’immagine c’era da spuntare la voce “allow smoothing”.

    Ora ho un altro problema però.. ^^ se all’immagine do un effetto in entrata tipo dissolvenza il filmato va tremendamente a scatti, premetto che l’immagine pesa 150k.. sembra come se flash facesse fatica a renderizzare l’animazione… consigli?

  7. Ciao Julius !!!!!!!!!!
    è un po’ che ti seguo ma non sono mai intervenuto sul tuo blog…
    oggi è la volta buona…
    Volevo chiederti cosa ne pensavi di questi due siti:

    1-sito:
    http://www.firstbornmultimedia.com/

    hai idea di come funziona? La sezione PORTFOLIO a parer mio è stupenda ed inoltre allargando la finestra del browser il menù in alto a destra si appoggia sempre a destra.
    Hai qualche suggerimento per la realizzazione di un sito simile?

    2-sito
    http://www.seymourpowell.com

    idem come sopra… penso che il funzionamento sia simile al sito precedente… Cosa ne pensi?

    GRAZIE
    e complimenti

  8. 1 sito

    Molto accattivante, hanno usato effetti 3D che catturano l’attenzione, sicuramente AS3

    Per adattare un oggetto alla finestra viene usate le classi tween con posizionamento in base alla larghezza e altezza dello stage

    Trovi degli esempi sul blog, cerca nella sezione Tutorial sul argomento resize

    2 sito

    Sempre AS3, lo conoscevo già, molto originale utilizzerà un controllo di scontro di area di due oggetti a da li avvia un’animazione preimpostata

  9. Ciao a tutti!

    Io vorrei fare una cosa molto più semplice, vorrei solo che il mio sito creato in flash si adattasse a tutte le risoluzioni, senza deformarsi, e senza immagini di fondo o effetti strani. Solo che il mio sito si possa ridimensionare a piacere…
    Oppure, in alternativa, che si ridimensioni lo sfondo e la mia finestra resti centrata (tipo questo http://www.toshibaclima.it/ per intenderci)
    Sapete dirmi come fare o indicarmi un tutorial?

    Grazie a tutti
    elly

  10. Ciao ci sono svariate tecniche

    Se usi solo flash

    stage a 1024×768 pixel

    Stage in modalità noScale

    Pubblicato al 100%

    Se usi Flash + HTML

    Flash di una dimensione fissa anche 1024×768

    Includi il progetto flash in un div o tabella allineata in centro pagina

    Leggi questo articolo

  11. francesca

    ciao julius veramente utile solo una cosa perche con safari nn fa vedere niente di niente grazie mille

  12. Federico

    julius se volessi che il centro del testo che appare in movimento sia posizionato in basso come posso fare?

  13. francesca

    @Julius:
    sicurissima infatti neanche il tuo in originale non mi funziona su safari

  14. Ciao a tutti!

    Anche Io vorrei chiedere una cosa che proprio non riesco a fare.
    Sono riuscito a creare un sito che si riproporziona quando allargo o stringo (anche grazie al tutorial). Ma adesso avrei un altro problemino vorrei
    inserire un menu sulla destra e una scritta sulla sinistra che invece mantengono la stessa grandezza (quando allargo e stringo la finestra del browser) senza perdere la posizione che hanno sulla pagina (tipo questo sito http://www.tomnagy.com).
    Lo so che forse è una richiesta difficile ma se anche ci fosse qualche esempio con un totorial o altro sarebbe perfetto.

    Grazie a Tutti
    Manuele

  15. ue
    grazie davvero tante
    mi sei stato di grande aiuto
    ora so finalmente come fare i siti a tutto schermo
    sei bravo forte

  16. @Federico: che rimanga in basso?

    basta impostare la tween

    ora è impostata a metà altezza e metà larghezza

    Modifica la proposrzione in altezza dove leggi Stage

    @francesca: indago

    @Manuele: puoi inserire altri swf o oggetti testo che non vengono presi in considerazione con lo stage…

    @luca: :)

  17. Ciao Julius devo dire che il tuo tutorial mi è stato molto utile ma ho un problemone:
    In pratica ho aggiunto altri oggetti nello stage, se imposto le coordinate in relazione allo stage queste si spostano qualora venga ridimensionata la finestra, e fin qui tutto bene.
    Ho provato a creare anche dei tasti per spostare questi oggetti e qui iniziano i dolori. In pratica questi oggetti si spostano come vogliono nello stage quando attivo la funzione del tasto, ma il problema appare quando provo a ridimensionare la finestra del browser, in questo caso gli oggetti ritornano alle coordinate che avevo impostato originariamente e non a quelle imposate dalla funzione del tasto. Credo che le nuove coordinate impostate con la funzione vengano cancellate quando viene ridimensionata la finestra per tornare a quelle di partenza.
    L’alternativa è quella di scrivere le funzioni fuori dalla funzione resize, ma si perderebbe la possibilità di avere l’animazione tween al resize della finestra.

    Ciao ti ringrazio ancora

  18. @Blade82: purtroppo non puoi farci niente se usi le funzioni tween all’interno dell’evento resize in quanto le coordinate verranno ricalcolate al ridimensionamento dello stage o browser

    @max: in effetti non funziona…

  19. ciao J

    ho modificato le coordinate per far apparire lo stage non al centro, ma in basso… al primo caricamento dell’animazione lo stage non esce, quindi cliccando sul pulsante aggiorna del browser questo appare… cosa posso fare?

  20. Julius ha scritto:

    @Blade82: purtroppo non puoi farci niente se usi le funzioni tween all’interno dell’evento resize in quanto le coordinate verranno ricalcolate al ridimensionamento dello stage o browser
    @max: in effetti non funziona…

    Peccato però, non c’è un sistema per evitarlo? In giro si vedono siti in flash con animazione tween full screen. Sto preparando una presentazione per l’università e mi sarebbe veramente ultile riuscire a trovare un sistema per risolvere questo problema.

  21. StuCkCaRBoy

    Ciao di nuovo..

    Sto usando il codice css suggerito e ovviamente anche le impostazioni in flash scritte nel tutorial, ma in Safari rimane una banda scoperta in basso e in IE servirebbe lo scroller laterale perchè cmq mi taglia la parte inferiore…

    Le mie dimensioni sono 1024 X 600.. in Mozilla e Opera vanno bene, negli altri due purtroppo no.. come mai ? Grazie Julius !!!

  22. StuCkCaRBoy

    Tutto a posto risolto però in Flash uso:

    Stage.align = “TL”;
    Stage.scaleMode=”showAll”;

    Non so come mai ma funziona !!

    Ciao !!

  23. francesca

    ciao Julius hai indagato del problema con safari..come mai nn si vede nulla e in firefox si…aspetto ancora delucidazioni … è troppo bello per non poterlo usare
    grazie

  24. Ho risolto il mio problema con un trucchetto :D

    In pratica per poter spostare oggetti via tween as senza che questi tornino alla loro posizione dopo un resize, basta creare piu frame e in ognuno di questi inserire le coordinate tween dove volete spostare il vostro oggetto. Quindi ad un azione di un tasto per esempio basta indirizzarlo sul frame che si vuole e l’oggetto otterra le nuove coordinate senza perderle al resize!!!!!!!

  25. ciao
    effettivamente con safari non funziona, ho anche aggiornato il player. La cosa curiosa che se clikko la prima volta sull’immagine che mi apre la pagina con il flash non funziona se ci provo la seconda volta carica il flash.
    Se può servire come indicazione.

  26. riguardo quello che ha scritto Leila , anch’io ho lo steso problema di far funzionare questo tutorial con safari la prima chiamata non funziona mentre se viene richiamato una seconda funziona …spero tanto in una soluzione … dai Julius aiutaci tu !!!!!!!!!

  27. Ciao Julius ottimo tutorial, complimenti davvero, io lo sto usando cosi: la clip centro mi carica una base.swf ora se volessi utilizzare un pulsante da questo swf x cambiare la foto di sfondo quella da 1600 x 1200 come posso fare?

    Grazie mille

  28. Ok ci sono riuscito grazie lo stesso Julius…….infine una informazione, sul tuo esempio il preload è semplicemente una animazione senza action?

    Grazie mille

  29. @valeria:
    Caio anche io ho lo stesso problema di valeria e leile, su safari non funziona purtroppo.
    Spero che tu ci possa indicare una soluzione sarebbe un peccato non potere usare questa splendia cosa con i mac.Grazie ancora Kessell

  30. ho risoltoooooooooooooo !
    Per il problema con safari ecco il codice della pagina…comunque grazie sempre Juliusss ! :)

    WebSite Flash on all resolution | Julius

    *{
    margin:0px;
    padding:0px;
    height:100%;

    }

    scarica Flash Player

    var so = new SWFObject(“flash_all_resolution.swf”, “mymovie”, “100%”, “100%”, “7”, “#FFFFFF”);
    so.addParam(“quality”, “best”);
    so.addParam(“salign”, “t”);
    so.write(“flashcontent”);

  31. @Kessell:
    scusa Kessel ma a me continua a non funzionare

    cosa hai cambiato dal tutorial originale ??
    io vedo solo queste modifiche :
    eliminazione di overflow:hidden; dal css
    aggiunta nel link scarica flash player di rel=”nofollow”

    ma per il resto mi pare tutto come prima ….

  32. chiedo scusa ma ieri sembrava funzionasse omettendo solo overflow:hidden.
    E’ invece strasicuro che se si toglie tutto quel css safari funge solo che poi c’e’ problema con ff.
    Sto studiando ancora…

  33. Ciao julius grazie mille per i tutorial :)

    approfitto per chiedere a tutti se hanno mai avuto il mio stesso problema:
    è gia un un pò che uso liquid layout in flash e penso di aver sviscerato un pò tutte le problematiche, l’unica che non riesco proprio a risolvere è l’adattamento su schermi wide, flash non riesce a leggermi l’esatto Stage.height in widescreen.

    Ora ad esempio sto lavorando a 1440*900 se faccio un trace onResize in flash impostando il tutto fullscreen ottengo:

    Stage size is now 1436 by 600

    come potete vedere mancano 300 pixel in altezza :| non riesco proprio a capirne il motivo :( sapete come risolvere?

  34. Ciao a tutti…riguardo a questo ridimensionamento dello stage ho dei problemi….quando metto 100% i vari contenuti sballano…escono dallo stage e quindi non sono allineati!Inoltre al 100% su un monitor 24″ il mio sito viene sgranato visto che io ho lavorato su una dimensione 955x600px. Come posso fare? Grazie mille

    Luisa

  35. carolina 2008

    http://www.punisherwarzonemovie.com/

    Segnalo questo sito..

    se provate a rimpicciolire la finestra, questa restituisce un avviso in cui dice che la risoluzione minima richiesta per la visualizzazione del sito è 1200×800

    cosa molto bella secondo me :D

    qualcuno ha un idea su come si realizza un effetto in flash del genere?

  36. ciao Julius
    ho provato ricontrollare il codice per capire il motivo perchè safari per mac non lo carica la prima volta… ti sei fatto qualche idea?!

    ps . ho visto il negozio carine le magliette

    ciao

  37. Ciao julius,prima di tutto complimenti per i tuoi tutorial…sono sempre utilissimi.

    Adesso vorrei chiederti un aiutino se puoi…ho provato a caricare, con questo sistema per tutte le risoluzioni , un guestbook ,che funziona perfettamente;
    solo che non mi carica i messaggi…sembra non riesca ad accedere al database php e al file di testo dove ci sono i messaggi…da cosa può dipendere?

  38. francesca

    scoperto perche con safari non funziona…dai julius non abbandonarmi….

  39. @marco: come è possibile che non esce il clip? sei sicuro di averlo solo spostato in basso?

    @mauk: dal pulsante richiama lo sfondo nel clip di nome istanza di sfondo con loadMovie, ricorda di riattivare la

    funzione resize…

    @carolina 2008: tramite la funzione resize tu sai efettivamente le dimensioni della finestra quindi con un semplice IF

    di condizione puoi far apparire o meno un messaggio di avviso

    @Pasquale: prima di tutto controlla di avere supporto PHP + MySQL e poi verifica di aver dato l’accesso di lettura a

    flash

  40. @francesca: Ho trovato l’errore!

    Non ci crederete ma l’errore è nella non chiusura di un commento

    <style type="text/css">
    <!–
    </style>

    Basta eliminare nello stile interno <!– a quanto pare Safari non lo digerisce

    L’ho corretto anche nel tutorial, se volete riscaricate i files

  41. tutti tranne me!?!?!? eheheh

    qualcuno che sa se si può risolvere il problema con i widescreen che ho scritto sopra?

    :( mi sta facendo impazzire

  42. Daniele non ho capito il tuo problema, il tutorial di Julius a me funziona bene con il mio monitor da 22 wide.

  43. Ciao Julius. Grazie del tutorial.
    Avrei bisogno di inserire una barra di menu orizzontale in basso che però anche lei si “sposti” in base alla risoluzione dello schermo. Ho fatto due swf uno che contiene la foto di sfondo che si adatta e l’altro con la barra di menu…ma questa si ferma sempre in un punto e non riesco ad attaccarla al fondo quando ingrandisco la finestra.

    Vorrei farla tipo http://www.zara.it…dove loro hanno il logo nella barra di destra, io metterei il menu…mi sai aiutare?

  44. mauk. prova a fare un trace ogni volta che ridimensioni il browser usando onResize, se io imposto la finestra a tutto schermo mi ritorna la dimensione dell’altezza sbagliata.

Commenti