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
201 Commenti
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
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!!!
GRAZIE MILLE JULIUSSSSSSSSSSSSSS sei un tesoro! ora continuo alla scoperta di flash! grazie ancora ;)
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 ?
@Hecto ciao
la vedi sgranata? mmm a che risoluzione?
a tutte, 1024×768 – 1280×1024 e anche se metto in widescreen.
L’immagine è 1600×1200 ma le linee sono sgranate
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?
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
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
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
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
Ok, ci sono riuscita!
Grazie 1000 Julius!
:) Ciao
elly
@elly ottimo ;)
ciao julius veramente utile solo una cosa perche con safari nn fa vedere niente di niente grazie mille
sicura di aver inserito il codice corretto?
julius se volessi che il centro del testo che appare in movimento sia posizionato in basso come posso fare?
@Julius:
sicurissima infatti neanche il tuo in originale non mi funziona su safari
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
ue
grazie davvero tante
mi sei stato di grande aiuto
ora so finalmente come fare i siti a tutto schermo
sei bravo forte
@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: :)
con google chrome non mi funziona, possibile?
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
@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…
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?
Julius ha scritto:
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.
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 !!!
Tutto a posto risolto però in Flash uso:
Stage.align = “TL”;
Stage.scaleMode=”showAll”;
Non so come mai ma funziona !!
Ciao !!
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
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!!!!!!!
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.
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 !!!!!!!!!
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
Ok ci sono riuscito grazie lo stesso Julius…….infine una informazione, sul tuo esempio il preload è semplicemente una animazione senza action?
Grazie mille
@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
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”);
@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 ….
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…
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?
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
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?
ooops, ho toppato il link era queso scusate :D
http://www.emergence-day.com/
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
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?
scoperto perche con safari non funziona…dai julius non abbandonarmi….
@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
@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
tutti tranne me!?!?!? eheheh
qualcuno che sa se si può risolvere il problema con i widescreen che ho scritto sopra?
:( mi sta facendo impazzire
Daniele non ho capito il tuo problema, il tutorial di Julius a me funziona bene con il mio monitor da 22 wide.
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?
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.