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 aprire tramite loadMovie una foto più grande
- Scarica sorgente Possibilità di inserire un’immagine sopra la slide tramite AS
JuliusDesign 
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! 😀
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("http://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, se volessi mettere un pulsante per stoppare lo slide, e uno per avviarlo di nuovo come devo fare?
Ciao Julius, innanzitutto complimenti, la tua slide è davvero utilissima, soprattutto per chi, come me, non conosce molto bene javascript. Infatti non riesco a richiamare la slide tramite loadMovie in un altro swf. Ho letto la tua risposta a Roberto ma non so proprio dove mettere le mani. Ci sono un sacco di _rott, quale devo modificare?
Annalisa
@Max vedo cosa posso fare
@Annalisa
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
Grazie!!!
Ci sono riuscita!
Sei stato davvero gentilissimo!
Perdonatemi, io non ho ancora capito come si visualizza la didascalia e soprattutto dove. Ho inserito i parametri nel file xml ma forse bisognerebbe inserire qualcosa nel flash perchè si visualizzi o in corrispondenza di ogni foto o in un punto fisso (per me sarebbe bello comunque).
@ Marco (10:52:51)
ciao probabilmente è un problema di proporzioni, se rimpicciolisci la lunghezza (510 di larghezza e 86 di altezza) devi modificare in scala anche l’altezza, nel tuo caso diventa 510 di larghezza e 129 in altezza