Adattare un sito Flash a tutte le risoluzioni del monitor

- Letture: 9.982

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. ciao julius
    i toui lavori veramente sono bellissimi
    vorrei kiederti un piacere
    vorrei craeare una pagina home di un sito web e la voglio essere come questa k hai creato tu
    maaaaaaaaaaa il problema k devo aggiungere anche dei pulsante in questa pagina per la navigazione e nn riesco a farlo
    perke quando li aggiungo in una tabella
    nn si vede il filmato flach ma se vedono solo i pulsante
    grazie mille in anticipo
    buona fortuna

  2. spero di aiutarmi il piu presto possibile perke mi serve urgente grazie mileeeeeeee
    buona serata

  3. Ciao a tutti, intanto volevo ringraziare Julius per tutti questi tutorial che mi hanno aiutato moltissimo nei miei progetti in flash.

    Ora avrei un problema sul sito http://www.manueleweb.altervista.org/home.html
    entrando nella sezione gallery (non fate caso alle foto sono di un fotografo che non si puo dire che sta proprio bene) o applicato questo effetto che ridimensiona il sito a tutte le risoluzioni del monitor e le carico tramite un xml esterno. L’effetto è riuscito ora però quando allargo e stringo lo schermo le immagini mi sgranano.

    Ho pensato che il problema è dato dal fatto che le immagini la carico con una risoluzione addatta a 1024 x 768 e quindi quando lo stage si allarga oltre quella grandezza sgranano.

    Come posso fare per non far sgranare le immagini?
    Ho provato a caricarle con una risoluzione maggiore ma si allargano al di fuori dello stage.
    Forse servirebbe una as che le mette al 50% in modo che le posso caricare almeno al doppio della risoluzione?

    Mi servirebbe proprio una mano perché ho provato ma da solo non ci riesco.
    Mi basta anche una indicazione, un consiglio.

    Grazie Mille

  4. ciao Julius, complimenti, sei sempre il mio punto di riferimento! Premettendo che sono alle prime armi con Flash (uso AS2), volevo porti una questione, stò realizzando un sito con il tutorial di adattamento di flash a tutte le risoluzioni dei monitor: l’intro va che è una meraviglia, ma quando clicco sul pulsante ENTRA che dovrebbe caricare la home principale, tutto ritorna ridimensionato…
    La home è strutturata in 2 MovieClip che caricano dall’esterno rispettivamente un filmato swf con immagini in dissolvenza e il menu del sito. devo scrivere del codice che dica ai movie clip di adattarsi allo schermo o basta lo script del tuo tutorial?
    grazie!

  5. Ciao Julius,
    ho adattato il tuo tutorial alle mie esigenze e funziona, l’unica cosa è che quando appare il sito c’è uno scatto dell’immagine (da grande a più piccola) per riadattarsi al monitor.
    Come mai?

  6. Un altro problema che riscontro che utilizzando come sfondo non una ma 3 immagini, che vanno in dissolvenza, la dissolvenza è lentissima eppure ho 25 f/s.
    Come mai?

    Ciao,
    Larry

  7. @Simo: ciao, basta che inserisci un nuovo clip, e lo associ lle tween come lo è ora quel clip centrale

    A questo punto invece di posizionarlo in base alla larghezza e altezza dello stage lo posizioni solo in base al’altezza cosi da farlo posizionare sempre in basso…

    @kimo-23: puoi creare un menu e caricare le tue sezioni sempre nello stesso clip contenitore…

    @Manuele: se il sito è al 100% è inevitabile che scali tutto…

    @Anna: riesci a farmi vedere qualcosa online cosi da capire meglio?

    @Larry: ciao allora in teoria non dovresti vedere nessuno scatto, ma tu lo veedi nel box dentro o nell’immagine?

    Verifica i frame al secondo, ti ricordo che tutti i filmati swf ereditano i frame al secondo del swf principale in cui viene caricato

  8. ciao Julius!
    se volessi fare un sito in html o php ma con lo sfondo che si adatti alla dimensione della finestra del browser come in questo sito : http://ringvemedia.com/ come devo fare? leggendo qua e la ho sentito che bisogna utilizzare intanto un file png come foto, tu cosa mi consigli?
    grazie!
    Sara

  9. Sull’immagine ho una dissolvenza, ma non è fluida.
    Ho dovuto cambiare script, ma non ridimensiona l’immagine :-(

  10. Ciao Julius,
    ho seguito le tue istruzioni ma non ottengo una corrispondenza tra quello che vedo nell swf di flash a quando apro il file index.html che carica l’swf.
    Mi aiuteresti?

  11. Ciao Julius,
    ho seguito le tue istruzioni ma non ottengo una corrispondenza tra quello che vedo nell swf di flash a quando apro il file index.html che carica l’swf. Potrei inviarti il progetto? Se si, come?
    Mi aiuteresti?

  12. Ciao Julius,
    ti seguo da diverso tempo, e da diverso tempo ho iniziato a studiare flash.
    Ho un problema che mi sta facendo diventare matta: non riesco ad adattare la mia animazione flash a tutti gli schermi.
    Ho provato a seguire il tuo “tutorial” ma non mi è riuscito comunque.
    Potresti mica darmi una dritta?
    Premetto che non ho alcuna base dell’action script…sono un caso disperato?

    Spero tu possa aiutarmi.

    Kaya

  13. Ciao Julius, ho seguito questo tutorial perchè avevo il seguente problema: il sito a cui sto lavorando – le cui dimensioni su flash sono 1001×650 e in html 1025×768 – contiene una gallery xml, e avendo impostato la pubblicazione a 100%, mi succedeva che qualora lo schermo fosse molto grande, il sito si allargasse, sgranando le immagini. Un pò a intuito ho inserito il tuo codice e il problema si è risolto. Ne è però comparso un altro: capita, su computer che usano InternetExplorer, che il sito risulti tagliato in basso. Non dipende dalla parte del tuo codice che dice “overflow:hidden;” perchè quella parte l’ho cancellata. Sono una grafica che smanetta con flash, quindi scusa se le mie conoscenze al riguardo sono proprio alla base. E grazie mille.

  14. Ciao Julius, sto usando il tuo tutorial e devo dirti grazie, funziona che è una meraviglia, volevo però chiederti se volessi cambiare la foto di sfondo ad esempio caricandole da un file esterno xml come devo procedere?
    Grazie

  15. Ciao Julius…avevo scritto un post nella sezione del lettore che carica 3 track, ma ho risolto…
    ti volevo chiedere….sono in fase finale per il mio sito internet e dovrei pubblicarlo martedì…domani finisco le foto degi attori in prova…
    Ho un problema.
    Dopo che faccio PUBBLICA per vedere l’anteprima, il sito mi rimane comunque con 4 margini bianchi intorno alla pagina…non riesco a eliminarli, e soprattutto se provo a inserire un fotogramma e se incollo i codici che hai rilasciato qua sopra mi dà degli errori degli script sulla linea 1, 3 e 4….come posso fare???
    Tra l’altro ho provato anche la popUp, ma la dimensione diventa piccola della finestra..se provo a ingrandire anche lì rimangono i bordi…. comunque se riesci ad aiutarmi almeno su questo problema di adattamento della resolution te ne sarei grato!!!!!!! il resto puo’ anche andar bene così…!
    GRAZIE MILLE!!!!!
    Andrea ’86

  16. Ciao Andrea, hai inserito questo stile nell’html?

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

    Larry

  17. Ciao Larry! No effettivamente non li ho messi…anche perchè dimenticavo che la vera home page deve essere perforza in html……Ti ringrazio infinitamente….appena pubblico il sito ve lo linko….!!!! GRAZIE!!!!
    Andrea

  18. Ciao, ho cercato di seguire bene il tutorial da te preparato per la risoluzione a tutto schermo di alcuni oggetti nel mio stage; Cielo e prato.
    Accadono però delle cose strane.
    quando accedo al sito si vede solo il cielo.. poi se ridimensiono la pagina appare il prato e tutto funge come si deve. dove sbaglio..? ho dimenticato qualcosa?.
    sito in questione http://www.flyweb.it
    Grazie Roby !

  19. Ciao Julius, ho caricato online in tuo file per intero, ma mi chiede sempre di scaricare il flash player. come devo fare per eliminare questo problema? tieni conto che la carico con safari e con opera ma il problema non si risolve.

  20. Aversana88

    Ciao Julius!

    in aggiunta al tuo esercizio
    ho creato una galleria con XML esterno
    in clip esterno con un azione che lo richiama..

    ho affiancato a quest’ultimo la classe tween come tu l’hai
    aggiunta al clip centrale ( il quadrato dove hai scritto il testo)

    la classe tween e il caricamento del clip funzionano
    ma le foto che “sono richiamate dall’xml esterno” NO!

    come devo fare??

  21. Ciao Julius..

    Finalmente sono riuscito a centrare i miei filmati flash !!!!

    Una domanda. Nel file che ho scaricato il simbolo chiamato centro che centra l’istanza ha un effetto che arriva dall’esterno, vorrei eliminarlo e far apparire il filmato centro senza nessun effetto ma perfettamente centrato.Da dove lo levo ? Ho provato a guardare lo script in flash ma mi sembra che sia un effetto caricato dall’esterno e non so come fare ?????

  22. Ciao Julius …
    ho utilizzato questo tutorial per un mio lavoro in flash. La pagina si adatta perfettamente alla risoluzione dello schermo, ma quando mi sposto sul form che si trova all’interno dello stesso swf, tramite link, la pagina si ridimensiona e torna alle sue misure reali (800×600). Considera che il form è esattamente come quello che hai inserito nei tuoi tutorial … come mai?

  23. emanuele

    ciao Julius
    in qualsiasi browser (IE,SAFARI,CHROME) online o su xampp quando apro flash_all_resolution.htm mi compare la scritta scarica flash player,
    non capisco proprio perchè, anche con i file del tuo esempio devo aggiungere qualcosa?
    l’AC_RunActiveContent?, non capisco proprio dove sia il problema.

    ciao grazie

  24. Ciao Julius,
    complimenti per i tuoi tutorial.
    Poichè sono alle prime armi di flash, mi spieghi dove vanno inseriti quei codici actionscript? in tutti gli swf, al primo frame?
    Sono un poò confusa!
    Grazie!

  25. federichissima

    Ciao Julius, e ciao tutti!
    e se avessimo un sito con larghezza fissa ma scrollabile in altezza?basterebbe mettere fissa la larghezza? grazie e buona serata!

  26. Ciao
    ho usato questo tutorial per settare in full screen come bg alcune slide immagini e funziona bene, sono riuscita anche a fare il resize dei vari elementi quando la finestra viene ridimensionata.. ma ho un problema,,
    in pratica ho una serie di pulsanti che mi portano sullo stage dei clip al centro della pagina, quando però faccio il resize mi porta tutti i clip al centro anche se non sono stati richiamati dai vari pulsanti perchè ho inserito nella funzione resize il comando per allineare questi clip al centro..
    come faccio a determinare “se il clip vienerichiamato sullo stage allora centralo nello stage altrimenti lascialo fuori” in as2? ^_^;
    ho provato con gli if ma non ci sono riuscita..-_-
    grazie in anticipo

  27. markin079

    Ciao a tutti,
    posto qui dato che mi sembra l’argomento che più si avvicina alla mia richiesta.
    Qualcuno saprebbe dirmi dove posso trovare del materiale che spieghi come realizzare
    dei siti liquidi in flash?
    Ciao e grazie

  28. Antonino

    ciao scusa una cosa ma come mai quand apro il file html non vedo il tuo swf non l’hai collegato…vero?

  29. @Antonino: Trovi tutto nel file .ZIP

    Ho verificato che vi era un errorino nel richiamo di flashobject.js ;) ora ho corretto

    Prima veniva richiamato come se fosse dentro una cartella secondaria

    <script type="text/javascript" src="../flashobject.js"></script>

    mentre essendo nella stessa directory deve essere richiamato semplicemente cosi

    <script type="text/javascript" src="flashobject.js"></script>

    Comunque ho aggiornato il download se vuoi riscarica ;)

  30. Antonino

    grazie sei molto gentile, ascolta io vorrei fare una cosa tua analoga…ma:

    la mia immagine dovrà essere come la tua ovvero adatta per tutte le risoluzioni, ma sarà un filmato di più immagini, nello specifico 4, se vuoi ti mando i file per farti capire. E poi invece di creare una banda che rimanga centrale la vorrei sempre in basso a sinistra.
    Capito?
    ti ringrazio in anticipo per la risposta

  31. Antonino

    anzi no ho fatto ma ho un problema, non riesco a far rimaner e fissa ‘animazione che do al bottone…

  32. Rauko dB

    Ciao Julius,
    volevo avere delle dritte, in ambito di “Actionscript”, su come sistemare il clip che appare al centro della pagina a tutto schermo.
    C’è un modo per caricare il clip sotto o in svariate posizioni, anzichè al centro???
    Spero di essere stato chiaro.
    Grazie

  33. Ciao Julius sono alle prime armi non e che potresti mettere anche un menu di esempio all’interno? grazie infinite per la disponibilita’ e per tutti questi tuoi preziosi consigli!!!

  34. o meglio riesco a richiamare un swf esterno ho visto il comando:

    var loader:Loader = new Loader();

    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fineCaricamento)

    function fineCaricamento(loadEvent:Event)
    {
    addChild(loadEvent.currentTarget.content);
    }

    loader.load(new URLRequest(“file.swf”))

    grazie ancora!!!

  35. ok risolto :) ma ho un problema devo caricare piu filmati e ho bisogno di mettere delle scritte alla base e quando carico i filmati queste scritte naturalmente devo sparire… mmm uqlche idea? grazie mille ancora

  36. Ciao Julius… nulla da fare… non ne vengo a capo,
    sto provando ad inserire la tua gallery IMAGE GALLERY, nel mc_centro, richiamandola con loadmovie,
    ma non riesco a centrarla, mi si sballa tutta e non mantiene le coordinate…

    Mi potresti dare una mano?

    ;-)

    Buona giornata.

  37. fai questa modifica per il clip centro in questo caso o cmq qualsiasi altro clip tu voglia usare come contenitore per la galleria

    ti faccio l’esempio con il clip centro

    Frame 1 linea 21/22 diventa

    centro.tween("_x", (Stage.width/2)-500, 1, "easeoutBack");
    centro.tween("_y", (Stage.height/2)-250, 1, "easeoutBack");

    in linea 31 sotto il richiamo di setStage(); inserisci

    loadMovie("image_gallery.swf", _root.centro);
    _root.centro._lockroot = true;

  38. Julius… che dio ti benedica fratello!

    Grazie mille!!!

    La fotografia selezionata “alpha 100” non è proprio in centro, ma leggermento spostata verso destra… ho modificato il parametro 500 a 560 (la metà di 1120 del progetto “Flash all resolution”) ed ora è perfetto.

    Ti ringrazio moltissimo… e dopo questa mi hai convinto, corro a diventare tuo fan su Facebook, ;-)

    Che dire… ti ringrazio molto, scusami se ho scritto anche da altre parti di questo problema, ma davvero non sapevo più che fare!

    Complimenti per tutto, davvero grande!
    Mi piacerebbe se mi dessi anche un tuo parere sul mio sito, se ti va!

    Buona serata!!! ;-)

  39. Ciao, ottimo tutorial e grande disponibilità, complimenti. Ho seguito tutto alla lettere e anzi l’ho adattato a varie esigenze, funziona alla grande. Ma se invece della foto, come sfondo, volessi inserire un .swf, con varie immagini al suo interno che si muovono da destra a sinistra? Appena parte il tutto funziona, ma se faccio un resize manualmente è come se si perdessero i riferimenti. Posto il lavoro

    http://www.exclusivadesign.com/trial/

    Il problema c’è sulle foto sche scorrono come sfondo.
    Grazie in anticipo per chi volesse darmi una mano

  40. Ciao Julius
    Ciao ragazzi! forse qualcuno può darmi una mano.

    Sto facendo un sito che sfrutta questo tuo tutorial (e ringrazio Dio che esistano persone come te al mondo, Julius!). Avrei una richiesta, se possibile. Io ho inserito un menù che si carica in automatico in alto a destra tramite il tween come hai fatto tu per l’istanza “centro” e vorrei che da questo menù si potesse comandare l’ingresso dei vari “centro” perchè non voglio che si carichino in automatico come nell’esempio, non so se mi sono spiegato.

    In pratica è un raggruppamento di pulsanti caricati dentro un movie (nome istanza “menu” che si carica a sua volta sullo stage grazie al tuo tutorial. Da questo menù voglio comandare i vari MC da caricare sullo stage. Ho cercato anche fra i commenti ma non ho trovato nulla… Con tutta probabilità dovrei far caricare di vlta in volta dei MC esterni, ma per centrarli eventualmente sullo stage come devo fare?

    Grazie in anticipo!

  41. ciao Julius, avrei bisogno di chiederti un consiglio riguardo il tutorials “adattare un sito a tutte le risoluzioni”.

    dentro il movie clip “centro” ho creato dei pulsanti che mi vanno a richiamare delle pagine all’interno sempre di questo movie.

    il codice usato per il pulsanti è questo:

    on (rollOver) {
    if (_root.link1) {
    this.gotoAndPlay(“s1”);
    }
    }
    on (releaseOutside, rollOut) {
    if (_root.link1) {
    this.gotoAndPlay(“s2”);
    }
    }
    on (release) {
    if (_root.link1) {
    _root[“item”+_root.link].gotoAndPlay(“s2”);
    _root.link = 1;
    _root.pages.play();
    _root.cl.gotoAndStop(2);
    _root.scroller.scroller.gotoAndStop(3);
    }
    }

    il problema è che le pagine non cambiano , non mi funzionano.

    che cosa sbaglio?

  42. 301spartan

    Gentilissimo Julius,
    innanzitutto ti ringrazio per gli esempi che ci fornisci di tanto in tanto.
    Vorrei sottoporti una domana, nel sorgente sopra indicato ho modificato il clip centro facendolo diventare un preloader con effetti successivi(lasciandolo sempre coe clip centro), come mai non mi funziona?

  43. Stefania

    Ciao Julius
    mi chiamo Stefania e ho bisogno di un tuo aiuto, ho fatto il sito interamente in flash 8, ho seguito il tuo consiglio per adattare il mio stage a qualsiasi monitor ma in primis quando copio e incollo l’action in un livello nuovo (come il tuo esempio) nella finestra “output” mi dice che ci sono 3 tipi di errori.
    L’altro dubbio che ho è che nel mio stage ho più scene, per ognuna devo inserire questo livello con l’action?
    Ti ringrazio anticipatamente.
    Stefania

  44. @301spartan Controlla di aver indicato correttamente i percorsi, ti ricordo che i percorsi cambiano se sei dentro un clip

    @emanuele ciao! ti consiglierei di interagire in un clip filmato e non sulla linea temporale. Prova con percorsi assoluti con _root.

    @Stefania Prova ad aprire subito il mio progetto flash e controlla dove sorgono i problemi leggendo il debug

  45. scusami julius naturalmente sempre i miei complimenti (con punta di invidia … :-)…. ) xò ho notato che questo serve solo per i siti in flash che non caricano oggetti esterni io su questo sito ho (tra gli altri problemi)
    architetto….un difetto …. se vai in architecture e poi in residential noterai che è un menu fatto ad immagini quella è una gallery quelle img si inseriscono in thumbnails duplicati in as2 con sorgente file xml questa gallery/menu è un swf richiamato su un fotogramma dal codice loadmovie in questo caso “residential” , in un quadrato istanziato”pose” quando clicchi sopra un img (che rapressenta una galleria) appare un’altra gallery dedicata al progetto fatta con lo stesso procedimento e porzioni di codice ed effetti della prima solo che ha le thumbs …..questa gallery carica in “pose2″(un’altro quadratino messo allineato verticale con “pose” solo in alto a sx sullo stage)….”pose2″ si sovrappone ….sovrapponendosi “pose” non va via rimane quindi l’immagine grande che richiamo con le thumbs è ad altezza di “pose” quindi anche se non la vedo è attiva com pulsanti la gallery dei progetti q

  46. Ciao Julius,
    i complimeti per il tuo fantastico lavoro sono d’obbligo.

    Ho provato ad utilizzare il file flash all resolution adattandolo alle mie esigenze. Ho però un problme con Safari. Il sito mi viene caricato a volte solo se Safari è appena stato avviato: se provo a ricaricarlo una seconda volta rimane fisso su schermata bianca. Altre volte anche alla prima volta Safari si blocca su schermata bianca.

    Hai qualche consiglio?

    Un saluto

  47. Ciao Julius!
    Complimentissimi per il sito e tutto il materiale che metti a disposizione di nuovi e vecchi utenti!!
    Io sto cercando di unire due tuoi tutorial, e più precisamente:
    – Adattare un sito Flash a tutte le risoluzioni del monitor
    – Galleria dinamica con miniature
    Puoi vedere un esempio a questo link
    http://www.kodocreation.com/flash_all_resolution%20MOD/flash_all_resolution.htm
    poi naturalmente personalizzerò tutto, queste sono solo dei test su come organizzare il sito.
    Come vedi l’immagine grande non compare per intero, sapresti dirmi come mai?
    Ho solo agito di sostituzioni, quindi non saprei al momento dove sbattere la testa.

Commenti