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
Julius se hai tempo una volta mi spieghi anche non so con un tuturial come creare un banner in movimento come nel link seguente
https://www.beatport.com/it-IT/html/content/home/detail/1/beatport
Grazie sicuramente è fatto con un file xml che richiama le immagini. Se noti con il passagio del mouse sopra i colori diventano + forti(tipo rollover) e se rimango con il mouse sopra al banner la rotazione dei banner rimane ferma.
Thanks
Potrebbe trattarsi di questo tutorial
Poi ovviamente sentiamo anche il grande maestro che dice :)
Grazie Claudia ma è diverso quello che intendo….se dai un’occhiata al link che ho inserito lo puoi vedere che banenr intendevo
Grazie cmq s l’interesse
hai lasciato il commento, partecipi al concorso? :D
@Issivan Il consiglio di claudia si avvicina abbastanza anche se credo potrebbe essere un effetto filltro Luminosità
@Http500 certo ;)
okkkkkkkkk
mi sono spiegato male io quando ti becco in messenger ti spiego a quale tipo di banner di rotazione mi riferivo. CIaooooooooo
MITICO!!!!
Ma questo è in actionscript 2 e per il 3?
AS2
Ciao julius ottimo tutorial ma non riesco ad aprirlo con flash8 mi dice formato imprevisto me lo potresti salvaeìre per flash8 ciao grazie mille julius
ciao Julius, quoto Francesco, da’ errore formato imprevisto tentansdo di aprirlo con flash 8!!!!!
ciao grazie mille julius
Ora dovrebbe essere corretto!
se io carico il clip esterno con loadmovienum, questo codice (utile) lo devo suare nel flash madre? o nel clip che viene caricato ?
Io caricheri il tuo swf nel clip centro con loadMovie in questo modo non avrai problemi
loadmovienum si utilizza per lo più per importare delle variabili
Ciao, ascolta io vorrei fare questa cosa: vorrei che il clip centro fosse una sorta di menu in grado di richiamare altre immagini di sfondo (visualizzate sempre a tutto schermo), perciò ho provato, nel clip centro, a richiamare un movie esterno con loadmovie, ma il filmato perde la funzionalità di posizionamento, nel senso che si sovrappone semplicemente, ma non si orienta al centro del filmato, proporzionandosi! Praticamente quello che vorrei ottenere è una clip ‘superiore’ in chiave di menù in grado di orientare e cambiare le immagini a schermo intero (in chiave di sfondo) come posso fare???
In pratica il clip padre non devi toccarlo…
Se vuoi provare con centro inserisci un altro clip all’interno ad esempio clip_esterno
e poi
loadMovie("filmato.swf",_root.centro.esterno);Ciao, ho provato ma non mi funziona! La cosa che ho fatto è stata: disegno un quadrato con alpha 0% all’interno del mc centro. gli do istanza foto ed associo al FOTOGRAMMA l’azione che mi hai indicato cambiando il nome dei miei movieclip. Nulla, non parte! Quello che vorrei fare, lo ricapitolo, è dare una funziona ei MENU al clip CENTRO in grado di richiamare (con pulsanti) un filmato esterno che però si riposiziona all’interno del filmato con lo stesso meccanismo e criterio di resize. In poche parole, quando adatto lo schermo alle differenti risoluzioni, oltre ad adattarsi CENTRO (cioè il mio menù) vorrei che si riposizionasse anche il filmato esterno. Come faccio???
La cosa mi serve soprattutto perchp vorrei inserire una fotogallery in un filmato auto-resize… ma nn so come fare. mi puoi aiutare??? Grazie!
Ciao Julius :)
complimenti ancora per questo blog sempre ricco di utili spunti e suggerimenti.
Mi stavo studiando il sorgente di questo bel tutorial e volevo chiederti se ho sbagliato io a leggere il codice per intero e al mc per il preloader non è associato niente.
grazie mille.
ciao julius sto creando un sito grazie a questo tuo tutorial.Vorrei sapere come fare per aggiungere un preload ogni volta che cambio filmato. Ho usato questo codice con un bottone per caricare un altra immagine e un altro fimato..non so se è giusto ma funziona.
on(release) {
loadMovie("filmato.swf",_root)
il problema è che inserendo un preload questo nn ha le dimensioni della pagina finale..come fare?
Ti conviene indicare un clip filmato e non la _root se hai tanti swf…
in questo modo puoi creare un preoader che carichi il contenuto sempre dello stesso clip
ciao julius, ho un file swf inserito in un html. In quest’ultimo vorrei inserire un’ immagine di sfondo che possa rimanere centrata e ridimensionarsi esattamente come l’immagine dello sfondo del tutorial, però anzichè essere parte del filmato, lo sofondo è parte dell’html…c’è un metodo per fare ciò?? grazie!
ciao, sono ancora io ;)
se volessi rallentare l’animazione iniziale con l’ingresso del movieclip centro, come potrei fare?
grazie :)
@Aldo fotogramma 1 linea 22/23
centro.tween("_x",Stage.width/2,1,"easeoutBack");centro.tween("_y",Stage.height/2,1,"easeoutBack");
Aumenta il valore 1 sia in larghezza che in altezza
grazie, sei sempre il migliore :D
Ciao, ma ti risultano problemi con questo script su safari per windows??? Ho creato un filmato che mi si apre con explorer, firefox, ma con Safari non accade nulla… apre la pagina htm ma niente, il filmato swf nn parte! Come mai?
@Aldo grazie ;)
@gennaro Con Safari non saprei proprio…
Ciao julius allora se vorrei inserire in alto a destra dello shermo la linguetta come quella del “site of the day” di “fwa” come potrei fare???
Si può realizzare direttamente in flash o è più conveniente in altro modo? ciao
ciao julius ci riprovo qui a chiederti a proposito di Adattare un sito Flash a tutte le risoluzioni del monitor e http://fedeweb.wordpress.com/2008/05/12/flash-e-thickbox/
praticamente vorrei chiamare una thickbox da un bottone in un flash che è incorporato in un html (esattamente uguale al all_flash_resolution)
il problema è che l’html chiama il flash attraverso swfObject (flashobject.js)
e non so dove e come inserire – come specificato dal sito thickbox – http://fedeweb.wordpress.com/2008/05/12/flash-e-thickbox/
i codici nel tag object :
e nel tag embed
allowScriptAccess=”sameDomain”
qualche suggerimento?? grazie valeria
@valeria il procedimento illustrato da federico non cambia qualora tu voglia inserire un effeto del genere in qualsiasi SWF, non vorrei sbagliare prova a chiedere anche a lui
@Francesco meglio farla prima e poi inserirla in flash magari in .PNG
ciao julius, innanzitutto grazie per questo utile tutorial, è da poco che frequento il tuo sito lo trovo molto interessante, complimenti!!
Ti chiederei però un aiuto a proposito su come adattare un sito Flash a tutte le risoluzioni del monitor. Se volessi che l’immagine di sfondo si adattasse in base all’altezza e non alla larghezza come devo procedere?
Ho provato ha cambiare alcuni paramentri nello script ma purtroppo non ho una buona conoscenza di actionscript….Spero in un tuo prezioso aiuto.
Grazie
ciao julius , l’idea di incorporare thickbox in all_flash_resolution e’ stata abbandonata, quindi sono passata a pop up .. ma sembra che la tua pop up sia incompatibile con all_flash_resolution in quanto il flash setting di quest’ultimo e’ fl8 e actionscript2 mentre il tuo pop up e’ flash5 .. .. hai qualche risorsa o suggerimento riguardo come aprire una pop up (meglio se centrata) da un bottone esistente nel movieClip centro in all_flash_resolution… (ho visto il getUrl sulla tua foto – ma apre in _blank un altra finestra)
Ciao !!
Sotto lo Stile CSS hai scritto che è opzionale togliere o lasciare la barra di scorrimento a sinistra, io vorrei lasciarla ma non riesco a modificare lo Stile appropriatamente!
Come posso fare??
@barbara ciao guarda questo tutorial
@valeria aprire un Apertura di una popup da Flash
@StuCkCaRBoy ciao se elimini nello stile css overflow:hidden; vedrai che le barre verranno visualizzate
Beh ovviamente GRAZIE!!
Però è incredibile che quando provo io a fare una cosa non riesce e poi quando e la dice un altro funziona!!! :/
Ciao !!
Cmq.. un dubbio.. ho provato ad adattare un fila swf di dimensioni predefinite 550×400 seguendo le stesse indicazioni per adattarlo alla pagina del browser ma non si adatta… ( uso dreamweaver )
So che hai consigliato dimensioni di 1600×1200 ma il mio dubbio è: se si usa il “noscale” mode non dovrebbe adattarsi quasliasi formato?
Ciao !!
Ciao Julius, seguo da tempo il tuo blog e ti faccio i complimenti. Ho trovato molto interessante questo tutorial ed è praticamente quello che cercavo per realizzare il mio sito. Tuttavia ho riscontrato un piccolo problema. Se provo ad applicare la classe tween alla clip foto, questa non rispetta più le proporzioni sul resize dello stage. In poche parole, provando ad allargare e stringere la finestra del browser, in alcuni casi la foto si riduce lasciando dello sapzio sotto o adestra. Possibile?
Aspetto con ansia una tua risposta.
Grazie.
Ciao.
Ciao Julius, mi spiego meglio.
Ho modificato il codice in questo modo:
//Adatto l’immagine
var rapp = foto._width/foto._height;
var ecout = new Object();
ecout.onResize = function() {
bouge();
};
Stage.addListener(ecout);
bouge = function () {
foto._x = 0;
foto._y = 0;
foto.tween(“_width”, Stage.width, 1, “easeoutBack”);
foto.tween(“_height”, Stage.width/rapp, 1, “easeoutBack”);
if (foto._height<Stage.height) {
foto.tween(“_height”, Stage.height, 1, “easeoutBack”);
foto.tween(“_width”, Stage.height*rapp, 1, “easeoutBack”);
}
// end if
};
bouge();
stop();
Ho semplicemente aggiunto la classe tween alla clip foto per avere un effetto di easeoutBack al resize dello stage ma non funziona.
Quando provo a ridimensionare si comporta in modo molto strano.
Dove sbaglio???
Per piacere mi rispondi?
Grazie.
Ciao.
Stai visualizzando l’swf da solo o è all’interno di altri?
Il clip foto è vuoto?
Ciao Julius, grazie per la risposta.
In realtà sto parlando del tuo tutorial. Il codice per la classe tween l’ho applicato direttamnete nel tuo tutorial per fare una prova.
Quindi l’swf è da solo ed il clip foto non è vuoto ma contiene un’immagine.
Guarda, se provi ad aprirti il tutorial e ad applicare la classe tween al clip foto (vedi il codice del mio precedente post), capirai cosa intendo per “strani comportamenti”… ; )
In realtà applicando un Math.round alla variabile rapporto ho relativamente risolto il problema anche se l’immagine risulta più grande dello stage e perde dei dettagli, ma al momento è l’unica soluzione che sono riuscito a trovare.
Suggerimenti???
Grazie
Ora ho capito…
In pratica l’espressione usata per i clip che hanno una misura inferiore allo stage non funziona con il clip foto che è superiore
prova a inserire cosi il codice
foto.tween("_x",(Stage.width/100)-15,1,"easeoutBack");foto.tween("_y",(Stage.height/100)-10,1,"easeoutBack");
julius: un mito
thanks…
Ciao Julius, grazie ancora.
Evidentemente non mi sono spiegato bene. Il problema non è sul posizionamento, bensì sul ridimensionamento della clip foto.
Cioè applicando la classe tween alle proprietà _width e _height della clip foto per avere un effetto di easeoutBack sullo sfondo quando ridimensioni la finestra del browser. Non so perché ma si comporta in maniera strana…
Spero di essere stato chiaro questa volta.
Aspetto una tua risposta.
Grazie.
Ciao
Ciao Julius.
stavo cercando qualcosa di analogo però per AS3. Sai darmi qualche consiglio? thx :)
Vedo se trovo qualcosa..sinceramente non ho voluto approfondire as3
Scusate il disturbo, sono nuova nel mondo di FLASH ed ho bisogno del vostro aiuto.
Stavo cercando di eliminare l’effetto d’ingresso da sinistra dell’elemento “centro” ma non ci riesco. :( io vorrei che compaia al centro e basta.
grazie mille a tutti
JULIUS SEI UN MITOOOOOOOOOOOOOOOOOOOO! ;)
Ciao Julius…
Ti scrivo per chiederti un’enorme cortesia, stò progettando un sito in flash che dovrà avere un filmato di sfondo che si dovrà adattare alle dimensioni del monitor, dove sopra di esso verrà caricato un mc con i contenuti del sito (menù,ecc..ecc.) che però vorrei rimanessero bloccati sempre della stessa dimensione, anzichè allargarsi anch’essi insieme al fondo…
Per farti un’esempio l’effetto che vorrei riuscire a fare è proprio come quello del minisito di “Safari” di Jovantti ( http://www.soleluna.com ).
Ti sarei davvero grato se potessi aiutare, spiegandomi il procedimento o con esempi del sorgente actionscript.
Ti ringrazio
@Lory ciao!
Ti basta spostare il clip di nome istanza “centro” che trovi sullo stage e spostarlo con il mouse al centro dello stage…
In questo modo vedreai un leggero spostamento dovuto dal resize automatico impostato dalle funzione tween
Poi se poi non vuoi il ridimensionamento automatico di quel clip “centro” elimina queste righe di codice
Fotogramma 1 linea 21 e 22
centro.tween("_x",Stage.width/2,1,"easeoutBack");centro.tween("_y",Stage.height/2,1,"easeoutBack");
Grazie per i complimenti fanno sempre piacere ;)
@Samuele ciao, basta creare un filmato flash con determinate dimensioni e poi settare
Stage.scalemode="noScale";