Ecco come realizzare una slide scorrevole in flash con immagini prese da un file XML
Di solito è possibile avere la necessità di inserire nel nostro sito una slide scorrevole, che faccia visualizzare delle immagini a ripetizione senza stacchi o zone mancanti.
Le immagini risiederanno in una cartella img/ e verrano localizzare da un file esterno file.xml composto da:
<foto photo="img/1.jpg"></foto>
<foto photo="img/2.jpg"></foto>
<foto photo="img/3.jpg"></foto>
<foto photo="img/4.jpg"></foto>
<foto photo="img/5.jpg"></foto>
<foto photo="img/6.jpg"></foto>
<foto photo="img/7.jpg"></foto>
<foto photo="img/8.jpg"></foto>
<foto photo="img/9.jpg"></foto>
<foto photo="img/10.jpg"></foto>
- Analizziamo il codice
larghezzamovie = Stage.width; //imposto la larghezza del movie
posSin = 1; //imposto la posizione iniziale
vel = -5; //imposto la velocità e direzione
dimImm = 184; //imposto la posizione iniziale
letto = false; //letto = false
leggi = function () {
nuovo = new XML(); //creo un oggetto XML
nuovo.ignoreWhite = true; //spazi vuoi eliminati
nuovo.load("file.xml"); //file xml
nuovo.onLoad = function(success) { //se è caricato
if (success) {
nfoto = this.childNodes.length; // prelevo il nume di foto
posDes = nfoto; //affianco i mc
for (i=0; i _root.attachMovie("mc", "mc"+(i+1), i+1);
_root["mc"+(i+1)]._x = dimImm*i;
_root["mc"+(i+1)]._y = 0;
_root["mc"+(i+1)].contenitore.loadMovie(this.childNodes[i].attributes.photo);
_root["mc"+(i+1)]._alpha = 100;
}
letto = true; //letto = true
} else {
trace("errore di lettura");
}
};
};
leggi();
_root.onEnterFrame = function() {
if (letto) {
for (i=1; i<=nfoto; i++) {
_root["mc"+i]._x += vel;
}
//Impostazioni per la velocità dei mc
if (vel>0 && _root["mc"+posSin]._x>0) {
_root["mc"+posDes]._x = _root["mc"+posSin]._x-dimImm;
posSin = posDes;
posDes--;
if (posDes == 0) {
posDes = nfoto;
}
}
if (vel<0 && _root["mc"+posSin]._x<=-dimImm) {
_root["mc"+posSin]._x = _root["mc"+posDes]._x+dimImm;
posDes = posSin;
posSin++;
if (posSin>nfoto) {
posSin = 1;
}
}
}
};
un ringraziamento a Crescenzo
Scarica il sorgente
Guarda il Tutorial
Implementazioni aggiuntive
- Scarica sorgente Possibilità di aggiungere un link dinamico alle foto
- Scarica sorgente Possibilità di slide verticale su e giu tramite mouse
- Scarica sorgente Possibilità di aprire tramite loadMovie una foto più grande
- Scarica sorgente Possibilità di inserire un’immagine sopra la slide tramite AS
141 Commenti
non riesco ad aprire i tuoi file fla. che versione di flash usi?
Flash8
complimenti per il sito, molto utile per chi come me è alle prime armi con flash ^^…volevo chiederti una cosa: è possibile fare in modo che al cliccare su un’immagine, questa si ingrandisca e si apra sotto in modo da vedere sia le slide scorrevoli che l’immagine cliccata?
Grazie mille per il supporto!
Ciao premetto che questa non voleva essere una galleria….
Comunque come vedrai benissimanete dal sorgente, vengono gia richiamati dei parametri non in uso, come percorso e didascalia
aggiungi nel file XML questi parametri per ogni immagine
percorso="img_big/1.jpg" didascalia="Foto di un paesaggio"Aumenta l’altezza di stage, Inserisci un clip contenitore in basso
Ora se vai a vedere il codice nel clip mc_contenitore potrai gestire la funzione onRelease inserendo un loadMovie del parametro percorso.
saluti
grazie mille! :D
ciao!
Scusa ma ho provato a mettere lo scroller dentro un mc vuoto e funziona, quindi l’ho salvato chiamandolo scroller.swf, poi ho creato un altro progetto flash in cui ho inserito un mc vuoto che rivhiama lo scroller esterno scroller.swf ma a questo punto non funziona piu… come mai???? :(
Grazie molte
@Roberto ciao come vedrai dal codice, i vari oggetti vengono richiamati sulla _root e quindi sullo stage… Richiamandolo in un altro clip salteranno i vari collegamenti…
Soluzioni?
O lo sposti da codice o cambi i percorsi, al posto di _root metti il percorso esatto tipo _root.mioclip.
saluti
CIao scusa ma ho cambiato i precorsi tipo:
//Impostazioni per la velocità dei mc
if (_root.vel>0 && _root.scroller[“mc”+posSin]._x>0) {
_root.scroller[“mc”+posDes]._x = _root.scroller[“mc”+posSin]._x-dimImm;
posSin = posDes;
posDes–;
if (posDes == 0) {
posDes = nfoto;
Ho provato a prendere il tuo codice, inserirlo in un mc che ho chiamato scroller e poi l’ho messo all’interno di un altro progetto. Ho cambiato il percorso ma continua a non funzionare… uffi.. ;)
fatto!!! mancavaancora il nome del clip in cui caricavo il movie quindi alla fine il risultato e stato: _root.contScroller.scroller
dove contScroller e il contenitore dentro il quale richiamo il mc esterno
e scroller e il mc in cui ho messo il codice. Grazie molte.
Allora ho appena provato è funziona..seguimi :)
Ipotizzio un clip contenitore di nome istanza box
Entra nel codice della Slide Scorrevole
Pannello Trova e sostituisci [CTRL+F]
Trova: _root
Sostituisci con: _root.box
Ora nel tuo swf ti basterà caricare la slide
loadMovie("slide.swf", _root.box);
ciao
Ciao Julius Ottimo blog e ottimi tutorials per un come me che è un novizio del flash..
Una domanda : vorrei realizzare una slide di quattro immagini proprio come questa qua, ed avere la possibilità di associare un link diverso per ognuna delle immagini che scorrono!!
E’ fattibile secondo te ?
Ciao & Grazie
Ciao Julius avrei bisognio di un aiutino.
Ho importato questa Slide scorrevole dinamica in flash nel movie principale di un sito completamente in flash, e funzione benissimo, il problema e’ che e’ sempre in primo piano.
Mi spiego vorrei far scorrere le foto nell’intestazione e sopra di esse, mettere un logo. Il problema e’ ,che il logo rimane sempre sotto allo slide, si intravede solo se diminuisco l’alpha nello slide.Ho provato anche a cambiare di livello il logo , quindi metterlo su un livello superiore ma niente da fare. spero di essere stato chiaro . ciao e complimenti!!!
@Massimo si è possibile implementerò questa opzione ciao
@Andrea ilproblema nasce in quanto la slide viene caricata su un livello _level, ma se tu lo carichi su un swf esterno all’interno di un clip filmato potrai gestire i vari livelli…
Leggi i primi commenti
Ciao Julius.
Inanzitutto complimenti per il sito,sempre ricco di informazioni ed esempi molto utili per tutti.
veniamo al dunque:vorrei fare in modo che cliccando su una immagine della slide questa si ingrandisca e si apra i una finestra popup insieme ad una descrizione,eventualmente riportata nel file xml.
Premetto che non sono molto ferrato in Flash,per cui se tu potessi pubblicare il codice per esteso te ne sarei grato.
Ciao,e di nuovo complimenti.
@massom si puo fare, ora provo…ma per la descrizione non saprei, in quanto aprendo una finetsra popup con solo un immgine salta il collegamenteo con FLASH non essendo risiedente…
Salve,
come e’ possibile implementare dei tasti stop e play al filmato?
Grazie e complimenti per il codice.
Ciao e complimenti per l’ottimo lavoro reso disponibile sul sito.
Mi piace molto lo slide orizzontale.. vorrei provare, imparando dal tuo esempio a farne uno identico ma verticale….ciao grande!
ecco il codice modificato per lo slide in verticale:
larghezzamovie = Stage.height;
posSin = 1;
vel = -5;
dimImm = 185;
selezione._x=-150
letto = false;
leggi= function() {
nuovo = new XML();
nuovo.ignoreWhite = true;
nuovo.load(“file.xml”);
nuovo.onLoad= function (success) {
if (success) {
nfoto = this.childNodes.length;
posDes = nfoto;
for (i=0; i20 && x=0 && y<=larghezzamovie) {
vel = -(Math.round((y-(larghezzamovie/2))/10));
}
};
_root.onEnterFrame = function() {
if (letto ) {
for (i=1; i0 && _root[“mc”+posSin]._y>0) {
_root[“mc”+posDes]._y = _root[“mc”+posSin]._y-dimImm;
posSin = posDes;
posDes–;
if (posDes == 0) {
posDes = nfoto;
}
}
if (vel<0 && _root[“mc”+posSin]._ynfoto) {
posSin = 1;
}
}
}
};
occorre impostare le dimensioni dello stage invertendo le dimensioni orizzontali e verticali….
ciao
Ciao Julius,
si potrebbe gestire l’apertura di una pagina html al clic della singola immagine?
ciao
Guarda le Implementazioni aggiuntive a fine articolo
ciao
Ciao Julius,
non riesco a capire cosa non funzioni…
il codice in mc_contenitore non riesce a leggere il percorso inserito nei tag foto nel file .xml
cioè: inserendo
this.onRelease = function () {
_root.selezione.loadMovie(a);
_root.selezione._x=(larghezzamovie)/2;
_root.didascalia.text = this.etichetta.text;
getURL("https://www.sitoacasodipippo.it","_blank");
}}
funziona il link e si apre in una nuova pagina la destinazione, invece lasciando il codice originale , sebbene il filmato renda cliccabili le immagini, non succede niente a video, nessun errore visualizzato.
nel file xml inserisco i dati così:
Grazie in anticipo per eventuali dritte:-)
Ciao Julius,
Complimenti per i tuoi lavori, veramente utili per iniziare con flash.
Volevo chiederti se era possibile fare in modo che carichi le foto random.
Grazie
Anche io ho riscontrato lo stesso problema di marcolino, non riesco a far arrivare il percorso all’mc_contenitore. Anche facendo un trace lo da indefinito.
Se riesco a trovare una soluzione la posterò, se intanto mi sai dare una dritta mi risparmio un po’ di spremitura di meningi.
Sei bravissimo!
Ciao Julius, complimenti per tutti i tutorial del tuo sito ! Volevo chiederti un piccolo favore: non riesco ad inserire i link alle immagini della slide scorrevole in flash; ho scaricato il sorgente in fondo alla pagina per i link dinamici ed ho aggiunto al file xml il parametro percorso
ma quando clicco sulle immagini non succede niente….dovè che sbaglio ? Grazie in anticipo !il file xml l ho modificato così ….
In effetti il file allegato era errato…
Riscaricate la prima implementazione riferita alla Possibilità di aggiungere un link dinamico alle foto
saluti
Ciao, cerco di aprire ifile con FLASH MX ma non si aprono … qualche suggerimento ?
Ciao Enionline, la versione più precedente di Flash 8 che posso inserire e FlashMX2004 quindi per altre versioni precedenti non posso farci niente…
Ciao Julius, ho cercato di inserire un logo vettoriale , che rimanga in sovrapposizione nelo stesso punto durante lo scorrimento delle immmagini (nella prima versione senza link e senza load movie), mi sembrava tanto semplice! Invece lo vedo solo nel primo frame poi scompare…mi puoi aiutare?
Ciao benda puoi fare in 2 modi.
Il primo più semplice è quello di richiamare lo slide tramite loadMovie in un altro swf che abbia un’immagine vettoriale..
Il secondo e inserire un’immagine vettoriale tramite attachMovie dandogli un livello di visualizzazione maggiore
_root.attachMovie("j", "j2", 1000); // richiamo il clip j_root.j2._x = 300; // imposto la x
_root.j2._y = 30; // imposto la y
Trovi l’esempio nelle implementazioni alla fine dell’articolo
saluti
grazie!!!
di niente =P
ciao julius mi sto usando questa splendida slide che fa al caso mio vedi esempio
http://antp.altervista.org/ale/
in pratica la slide l’ho inserita però a me serve come quella che scorre sotto quindi non orizzontale e ne verticale.. e vorrei chiederti come potrei far allontanare le foto di qualche pixel? proprio come la slide che scorre sotto? grazie millissimo in anticipo.
ciao julius ho risolto sono riuscito rruotando il box che contine la slide.swf ma è possibile mettere un po di spazio ai lati destra e sinistra delle immagini? grazie infinite.
Cambia la variabile dimImm in 190 ad esempio
grande funziona alla grande. come sempre gentilissimo julius.
di niente ;)
Ciao Julius! Sto usando la tua bellissima slide. l’unica cosa ce non riesco ad inserire è la didascalia! Ho aggiunto “didascalia” nell’XML ma non capisco cosa dovrei inserire nel progetto flash.
Perdona l’ignoranza.
Grazie
Marco
anzitutto complimenti… una domanda: per adattare la slide scorrevole al mio sito devo ridimensionarla in 510 di larghezza e 86 di altezza, ho provato ad inserire i nuovi parametri dimensionali sia nel codice html generato che nella prima riga dello script… ho ottenuto che la slide si ridimensiona ma nella parte sinistra l’ultima foto, invece di scorrere oltre il bordo, scompare non appena tocca il bordo estremo lasciando un brutto spazio bianco… dove sbaglio ? Grazie
Ciao Julius
Complimenti e di nuovo complimenti …. sei grande
ho scaricato Slide scorrevole dinamica in flash con Possibilità di aggiungere un link dinamico alle foto per inserirla sulla Home del mio sito che sto costruendo funziona tutto ok ….. il problema è che non riesco a fallo stoppare quando vado su un altro link del menù…… lui continua a scorrere e la nuova pagina si posiziona sopra i esso….. forse devo aggiungere qualcosa nel codice, ma non so quale……… ho provato di tutto
Grazie
questa slide è progettata per scorrere all’infinito…
Quindi non vi è possibilità di farlo sparire quando vado su una altra pagina
????????????????
Ma forse non riesco a capire il tuo problema, riesci a linkarmi a una tua pagina cosi vedo…
Ok…. grazie per il tuo aiuto
http://www.giovanniombrello.com/sitogio
la slide scorrevole dovrebbe sparire quando si linka dal menu un altra pagina e comunque risiedere solo sulla home
grazie
ciao Julius…
l’unica cosa che non mi soddisfa di questa slide è la sensazione che mi dà di non essere fluida nel movimento…non so se mi spiego…io non intendo la velocità…sembra che vada a scatti…è una mia impressione o forse cambiando la velocità questa sensazione sparisce?? te lo chiedo perchè se così fosse dovrei cambiare la velocità a parecchi swf :(
Si in effetti sembra andare a scatti, ma è dovuto dallo script in Flash proprio cosi…
Se velocizzi i frame per secondo lo noterai di meno…
ciao Julius
Si è vero……………. ho velocizzato i frame per secondo si nota meno è più fluido……
hai avuto modo di vedere la pagina per vedere quale è il mio problema?????
grazie e FELICE PASQUA A TUTTI
@Gio un errore nel file XML
http://www.giovanniombrello.com/sitogio/file.xml
e poi cairca tutte le imamgini
caro Julius, intanto grazie! l’unica cosa è che non riesco a scaricare il sorgente di questa che sembra essere una gallery fantastica… come mai?
Il file da scaricare è corretto.
Riesci a scaricare il file zip o non riesci ad aprire il file sorgente .fla?
sono due cose differenti