Molti mi chiedono come funzionano i siti con il resize automatico, ovvero quei siti in cui alllargando la pagina HTML il contenuto rimane centrale e lo sfondo rimane a tutta pagina.
Per effettuare un resize automatico sfrutteremo il metodo addListener di Stage che consente di rilevare quando un file SWF viene ridimensionato (ma solo se Stage.scaleMode = “noScale”).
In questo esempio ci sono due clip, il primo di nome istanza centro ovvero il nostro sito.
Mentre il clip nome istanza sfondo viene ridimensionato in base alla larghezza e altezza della pagina.
Da notare che nel clip sfondo vi è un immagine, nulla vieta di renderla dinamica tramite un loadMovie o con funzioni random.
Come di consueto andiamo ad analizzare il codice:
//includo la classe lmc_tween.as
#include "lmc_tween.as"
//allineamento TL
Stage.align = "TL";
Stage.scaleMode = "noscale";
_quality = "BEST";
_global.setStage = function() {
slis = new Object();
slis.onResize = function() {
//imposto le coordinate del clip centro tramite tween
centro.tween("_x", Stage.width/2, 1, "easeoutBack");
centro.tween("_y", Stage.height/2, 1, "easeoutBack");
//imposto le dimensioni del clipo sfondo al fine di adattarlo alla pagina
sfondo._width = Stage.width;
sfondo._height = Stage.height;
};
Stage.addListener(slis);
slis.onResize();
};
// richiamo la funzione setStage
setStage();
Notiamo bene che il metodo addListener() non funziona con l’impostazione di modifica in scala predefinita dei clip filmato (showAll) o con altre impostazioni di modifica in scala (exactFit e noBorder).
Testato con IE6 – IE7 – FF2 – Opera
92 Commenti
Ah.. ho copiato anche le cartelle zigo e com…
Cmq quando chiudo il pannello errori e il clip effettua il resize, la qualità peggiora se allargo la finestra…
Ri-ciao !!
@Alessandro:@Alessandro:
Ciao Aleesandro se hai trovato una soluzione su come si possa realizzare un sito come nolita.it potresti darmi qualche dritta
Grazie mille
Ciao Julius,
innanzitutto complimenti per il tuo lavoro! Davvero spettacolare!
ti scrivo perchè ho un problema con il fla.stage.
Io ho inserito una mia immagine nel clip sfondo con le stesse dimensioni di quella originaria ( 1570.0x 1017.0). Nel clip centro ho inserito un logo e un sistema menu labels con varie pagine dinamiche visualizzabili.
Ho realizzato il tutto sul mio pc che ha un monitor da 20″ Wide Screen, quando avvio l’index.htm su un altro computer magari formato 4/3, o dotato di altra risoluzione il sito presenta delle irregolarità nella posizione degli oggetti ( menu labels sfalzato, logo spostato). L’unico elemento che sembra non subire variazioni nella visualizzazione è lo sfondo (immagine).
Puoi darmi un suggerimento per risolvere questo problema ? Non riesco a risolvermi!
Ciao Mary
@zebrap: ridimensiona lo stage tranquillamente
Fai attenzione di ridimensionare il .fla e di esportare il tuo filmato swf
@Rejit: stai usando AS2?
@Mary: dovrei provare direttamente sui due schermi per vedere dove sia l’errore
Mi sembra strano in quanto lo stage è sempre quello quindi dovrebbe adattarsi con gli elementi.. mi sai dare più info?
-Screenshot di come lo vedi
-Gli elementi dove vanno a finire con il wide?
Ciao a tuti e grazie per l’attenzione
Uso As2!
Q
Scusate ma pensavo di essere stata esaustiva.
Questo è quello che recita il mio as:
#include “lmc_tween.as”
Stage.align = “TL”;
Stage.scaleMode=”noscale”;
_quality=”BEST”;
// —
_global.setStage = function() {
slis = new Object();
slis.onResize = function() {
//imposto le coordinate del clip centro tramite tween
centro.tween(“_x”, Stage.width/ 0, 0, “easeoutBack”);
centro.tween(“_y”, Stage.height/ 0, 0, “easeoutBack”);
//imposto le dimensioni del clipo sfondo al fine di adattarlo alla pagina
sfondo._width = Stage.width;
sfondo._height = Stage.height;
};
Stage.addListener(slis);
slis.onResize();
};
setStage();
I valori 0,0, nel centro.tween sono stati attribuiti ad x e y per evitare l’ingresso dinamico nello stage della srcitta. ( sicuramente il problema è questo ma non riesco a trovare una soluzione
ciao ciao
Ciao julius,
Ti rammento che Lavoro con Falsh cs3 ma in As2.
Ho reiniziato da capo:
ho sostituito l’immagine sfondo, ho sostituito il clip centro con il mio logo.
OK fin qui! Ho inserito un nuovo clip di nome sito e nel fotogramma as ho riportato questo:
#include “lmc_tween.as”
Stage.align = “TL”;
Stage.scaleMode=”noscale”;
_quality=”BEST”;
_global.setStage = function() {
slis = new Object();
slis.onResize = function() {
//imposto le coordinate del clip centro tramite tween
sito.tween(“_x”, Stage.width/6, 0, “easeoutBack”);
sito.tween(“_y”, Stage.height/3, 0, “easeoutBack”);
centro.tween(“_x”, Stage.width/2, 0, “easeoutBack”);
centro.tween(“_y”, Stage.height/2, 0, “easeoutBack”);
sfondo._width = Stage.width;
sfondo._height = Stage.height;
};
Stage.addListener(slis);
slis.onResize();
};
setStage();
L’unico problema è che il sito.tween non si allinea il resto va tutto bene, infatti quando provo il filmato se ridimensiono l’swf il sito.tween esce dallo stage mentre il esto è ok.
beh credo di avere lo stesso problema di mary… vorrei inserire un altro clip filmato… tipo un menù e quindi avere un menù che si posiziona a sinistra e un corpo centrale… solo che come ha fatto mery non funziona.
soluzioni?
Ciao Julius
il tuo tutorial è perfetto ma non capisco come possa evitare che l’immagine si deformi durante il ridimensionamento dello stage. mi piacerebbe riuscire ad usare il tuo sistema salvaguardando il rapporto di scala dell’mmagine di sfondo (es. http://www.valentino.it/).
grazie in anticipo.
francesco ha scritto:
ciao julius,
complimenti davvero per il codice, dopo tanto vagare su internet ho trovato te :)..
scusa sono al punto in cui era francesco ma a me il codice che lui posta successivamente non funziona, o forse non capisco bene io come usarlo (scusa non sono molto pratica di as). L’unica differenza è che io la nuova immagine la carico su una seconda scena che è esattamente una copia della prima, quindi stesso codice as (il tuo :) ). Come posso risolvere? Grazie mille in anticipo e ancora complimenti :)
Ciao Julius,
beh mi aggrego a tutti quelli che ti seguono a farti i complimenti per la pazienza con cui ci illumini
con i tuoi tutorial e SORGENTI.
Grazie.
Volevo sapere una cosa, in questo tutorial mi è tutto chiaro, volevo una info aggiuntiva se possibile.
Per inserire in questo tutorial, una barra (solitamente nei siti sono i CREDITI) che stia sempre nella stessa posizione?
Ho provato ad inserire questa barra nel clip sfondo e funziona, ovvio, ma si ridimensiona.
Per fare in modo che rimanga sempre in un bordo e che non si ridimensiona… come posso fare?
Attendo una tua gentile illuminazione. :-)
a presto,
Chriz
Ciao Julius,
temo che questo post sia un pò in disuso.
Attendo cmq tue informazioni.
Grazie mille!
a presto
Ciau julius,
il tuo tutorial è come al solito perfetto:) grazie a te mi sto inoltrando in as3…troppo interessante! ma non iresco a capire una cosa dello script:
a cosa serve questa riga: slis.onResize();
per tutto il resto ho capito, ma quel punto non mi torna!
grazie cmq di tutto, sei un grande!
@Chriz: in pratica puoi gestire un clip con un’altro nome istanza come il clip CENTRO e impostare che deve stare in fondo allo stage facendo una proporzione con l’altezza dello stage
A breve illustro un tutorial più approfondito
@Amaca: ciao
slis.onResize(); è una comando che intercetta quando vi è stato un resize dello stage
Ciao Julius.
Prendo spunto da questo esempio: vorrei realizzare un sito (da zero), con movie clip di sfondo 1024*768 e altro movie clip all’interno dove realizzare il vero e proprio “sito”.
Questo è un esempio, per capirci, http://www.nataliamesabush.com/italiano/
Mi spieghi che dimensioni dovrei utilizzare? grazie mille.
Ciao Julius, ho letto e provato il tutorial ma, il mio problema (se così si può chiamare) è leggermente diverso mi spiego:
fermo restando quanto nell’ esempio cioè, ridimensionamento sfondo HTML e centratura movieclip, io dovrei riuscire (?) a far ridimensionare realmente anche il movieclip in funzione della grandezza della finestra del browser, secondo te è fattibile?
ti ringrazio fin da ora e, visto che i problemi non finiscono mai
a presto
mrzpro
@Mat: Le dimensioni sono relative in quanto tanto viene pubblicato tutto a 100% comunque nel caso di quel sito le dimensioni originarie sono 1000×550
@mrzpro: in teoria ci vorrebbe un controllo anche sulle dimensioni dei clip nidificati, ci sarebbe un bel lavoretto a livello di as da fare
Ho testato il sorgente su Google Chrome sembra non andare, sai il perché?
grazie comunque era proprio quello che cercavo!
ciao julius, ho un problema con il mio progetto.
Ho notato che aprendo il tuo index.html, l’immagine di fondo parte già a tutto schermo nella pagina, mentre se pubblico il tuo progetto in una nuova pagina html, l’immagine di fondo è più piccola della pagina del browser.
O meglio, il file .swf si adatta a qualsiasi dimensione, ma se pubblico come html, questo non avviene.
Mi chiedo se ci sia quanche impostazione di pubblicazione da settare…
@Danielz a me funziona corerttamente anche su Chrome
@Parov ciao si verifica il codice che ho inserito in fase di pubblicazione HTML.
potrai notare che l’swf è di dimensioni 100% 100% noscale e vi è uno stile interno in cui indico che la pagina deve essere 100% senza scroll e senza margini.
ciao Julius, innanzitutto grazie mille per i tuoi tutorial gratuiti, sei veramente utile a tutti noi.
L’unica cosa che mi manca e che non sono ancora riuscito a fare è la seguente:
come posizionare un movieclip a una distanza fissa la bordo inferiore del browser tramite tween o simili?
con questi tutorial riesco a dargli delle istruzioni sommarie, però riadattando la pagina non mi rimangono fissi..
Io intendo tipo.. 20 px sopra la barra inferiore del browser…
per esempio come la scritta “Best view… bla bla” di questo sito: http://www.comete.it/
Grazie!
claudio
Ciao Juilius,
Mi unisco ai complimenti.
Ho una domanda per te. In attesa che carichi il filmato (ho messo una foto pesantuccia) anche se per pochi secondi, mi appare lo schermo bianco. Io invece preferirei che lo schermo nero e quindi ho cambiato i parametri nel CSS, ma niente, sempre schermo bianco! Da cosa dipende? Cosa sbaglio?!
Grazie Otto
mi rimane lo schermo bianco, il template è jatalineIII joomla……
come si fa ad aggiungere un altro clip? tipo voglio il 1 clip sia il logo e mi vada tutto a sinistra in alto e poi mettere un altro clip 2 con scritta e mi vada in alto a destra
Ciao Julius,
complimenti innanzitutto per il sito e i tutorial che mi sono stati molto utili.
Avrei bisogno del tuo aiuto per risolvere questo problemino: come tu accenni, l’immagine della movieclip “sfondo” potrebbe essere caricata anche dinamicamente con il loadMovie ed è quello che sto provando a fare… l’immagine che carico però non viene adattata allo stage ma rimane piccolina, anzi non viene nemmeno caricata con le sue dimensioni reali….
Come si può risolvere questo piccolo problemino, hai provato a farlo tu, hai qualche esempio?
Ringraziandoti anticipatamente, rimango in attesa.
Stefano.
@ MICHELE: Per aggiungere un altro clip devi usare la stessa logica/codice del clip centro e modificare la proporzione con Stage.
@ stefano: Probabilmente non avendo dimensioni non riesce a ridimensionarla, prova all’interno del clip vuoto contenutore a inserire un oggetto rettangolo vettoriale cosi da dargli ingombro e poi carica tramite loadMovie la tua immagine..
@ Julius:Provo e ti faccio sapere, anche se avevo provato a lasciare l’immagine iniziale all’interno del Movieclip “sfondo”, quindi un ingombro ce l’aveva, e non funziona lo stesso… provo con una figura vettoriale.
Ciao ciao.
S.
io sono riuscito: http://www.solitecose.com
@ albert: Ciao albert, mi puoi aiutare a capire come hai fatto? Il movieclip “sfondo” lo hai sempre lasciato vuoto? Grazie mille.
Julius ha scritto:
Ciao Julius, niente da fare….. ho provato di tutto… l’ultima cosa che succede quando provo il filmato è che mi carica l’immagine di sfondo piccola poi se provo a ridimensionare la finestra verticalmente o orizzontalmente lo sfondo si adatta come dovrebbe farlo all’inizio…. ma solo se vado a ridimensionare la pagina, prima no!!!!!
Ho chiesto anche ad albert il quale ha scritto che ha risolto ma non mi ha risposto… forse non ha letto la mail..
S.
ciao julius, in primo luogo grazie di tutto e complimenti
ho provato a scaricare i files ma (io ho solo flash mx…) e anche il file stage_MX2004.fla non me lo apre dicendo “formato di file imprevisto”
in ogni caso ho fatto varie prove seguento tutorial e sono riuscita a ricostruirlo, ma … il clip centrale (dove carico un filmato esterno) lo posiziona al centro solo dopo il resize… (e non fa tutti gli effetti tipo molla) mentre se lo carico la priva volta è sempre scentrato… soluzioni?
grazie ancora di tutto
r.
:) sono stordita… allora funziona bene l’effetto molla sul clip centro (mi ero dimenticata di copiare le cartelle con i file .as)
ma, se importo sul clip centro un filmato esterno, non lo centra, ma lo fa spostato…. non lo centra mai… in ogni caso provo ancora a cercare gli errori che certamnte ho fatto :)
ciao julius volevo soltanto chiederti come fare per scala in proporzione lo sfondo
grazie
@frank: dai un occhiata qui
perdonami julius, ho provato seguendo il tutorial che mi hai consigliato, ma la slideshow xml che ho di fondo continua a deformarsi, proprio non capisco
Ciao
ho fatto un po’ di prove per un mio website. Tutto ok quando faccio la preview in flash mentre quando vado ad integrare il tutto nella pagina html viene fuori un problema: se apro la pagina i vari clip non si posizionano perfettamente, ma basta che faccia il resize della finestra manualmente per mandare tutto al suo posto…. io vorrei che la cosa avvenisse anche al momento dell’apertura della pagina… puoi darmi qualche dritta?
Grazie
Michele
carissimo julius,
grazie del materiale che metti a disposizione!
vorrei chiederti una indicazione.
Ho usato il tuo script e aggiunto una funzionalità javascript alla pag html per creare una pagina che si ridimensiona adattandosi allo schermo anche senza barre di navigazione
però nello sfondo al posto dell’img statica vorrei un flvplayback
funziona perfettamente vedendo il tutto nel swf invece dall’html il video nn parte
hai qualche idea del perchè e come posso risolvere ?
grazie mille!
@ clo:
clo potresti aiutarmi
perchè il mio swf caricato sullo sfondo nn si adatta allo schermo?
ho una animazione con una img che si muove da dx a sx … la carico con load movie nel clip sfondo in cui ho inserito un rettangolo
l’animazione mi mostra degli spazi bianchi sotto e a lato
ho provato ad aumentare la dim del clip caricato ma l’errore anche se diverso rimane …
help!
Ciao Julius,
grazie del materiale che metti a disposizione!
Sei veramente bravo!
Se non Ti dispiace vorrei chiederti un’ indicazione.
Vorrei inserire un altro clip filmato, tipo un menù e quindi avere un menù che si posiziona in alto, e un corpo centrale.
Mi potresti aiutare?
Ti ringrazio in anticipo
salve a tutti.io ho appena iniziato praticamente ad usare flash.volevo chiedere se qualcuno poteva spiegarmi questa stringa di codice in modo dettagliato:
//includo la classe lmc_tween.as
#include “lmc_tween.as”
e poi un’altra cosa; ho trovato questo codice che, in as3, è molto facile e comodo ma il mio sito è interamente in as2.qualcuno sa codificarmelo in as2??grazie mille. vi posto il codice
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.dispatchEvent(new Event(Event.RESIZE));
stage.addEventListener(Event.RESIZE, riposizionoOggetto);
function riposizionoOggetto(e:Event):void
{
var imgY:Number = stage.stageHeight/2;
var imgX:Number = stage.stageWidth/2;
immagine_mc.x = imgX;
immagine_mc.y = imgY;
}
ciao Julius, io volevo sapere se è possibile ridimensionare un’immagine di sfondo su un file swf (exe) proiettore … devo realizzare una presentazione di un’azienda,
Ciao Julius,
innanzitutto complimenti.. :D
Io sono “alle prime armi” sto facendo un corso in cui ci insegnano le basi delle basi per grafica e web design.
Quindi in quel pò di Flash fatto, abbiamo usato Action Script 2.0 e per creare siti, Html e Css.
Ora dovremmo progettare un sito finale ma sono da ore e giorni sullo stesso problema, inserendo (Html su dreamweaver) un clip filmato .swf creato da me con Flash, questo clip si posiziona al centro della pagina e nonostante sia in un div che gli fa da contenitore, (ma ho anche provato senza contenitore) non riesco a posizionarlo dove voglio io, ne con margin ne con padding… sta sempre li!! Ho provato anche a modificare le proprietà dell’oggetto importato, ma niente!!
Potresti aiutarmi per favore?
Grazie mille e scusa il disturbo