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

Author

Sono un Creative Strategist con più di 10 anni di esperienza in strategie digitali. Il mio ruolo di Stratega consiste nell’ideare e sviluppare concept creativi per progetti multicanale, individuando le attivazioni e dinamiche di Marketing da applicare attraverso un approccio strategico.

141 Commenti

  1. frusdonk

    grazie mille, ho risolto!!! probabilmente era un problema mio! cmq non riuscivo proprio a scaricare il .zip… Ottimo lavoro, continua così!

  2. frusdonk

    Scusa Julius, posso usare una .png al posto del cerchio rosso in quella scorrevole con un’immagine sopra? Se sì, come devo fare? Grazie!
    P.S. Si può fare in modo che onmouseover lo slideshow si blocchi? grazie!

  3. Puoi usare sia png che jpg

    Invece per quanto riguarda la slide con il blocco tramite mouse dovrebbe esserci un esempio a fine aricolo o tra i commenti…

  4. frusdonk

    Grazie mille, alla fine sono riuscito a far tutto… Devo usare la gallery come parte di un header in joomla. L’unica cosa è che non riesco a far caricare sul file index.php di joomla l’.swf, nonostante questo funzioni perfettamente. Quale potrebbe essere il problema? Le ho provate davvero tutte!! x|
    Grazie mille in anticipo per eventuali chiarimenti e aiuti :D

  5. frusdonk

    Finalmente ce l’ho fatta!! :D alleluja xD ecco il risultato finale (ottimizzato per firefox) http://www.pastoraleunirc.org
    Senti grande Julius, c’è un modo per far pescare le immagini randomicamente?? Forse svincolando l’swf dall’xml…

  6. Ciao ho visto! rende bene lo slide!

    Per il fatto del random si dovrebbe cambiare l’inserimento delle foto da xml rendendole random…

    Posso provare appena ho tempo…

  7. Ciao julius ho un problemino con questa splendida slide di immagini dopo il caricamento con il loader. Spiego meglio.
    Dopo averla modificata con le mie immagini, sistemato le variabili, inserito l’istruzione this._lockroot = true; ecc… e aver visto che funziona, l’ho inserita nel mio fla generale del sito che sto realizzando. Funziona perfettamente, ma se maleauguratamente si clicca sull’icona per ingrandire la finestra e adattarla allo schermo, la galleria mi esce fuori dai bordi, creando un effetto bruttissimo nella fla principale. Come posso risolvere questo problema???

    Grazie mille in anticipo, ti saluto
    Shinji.

    P.s. Molto ben fatto il sito.

  8. In teoria si, ma forse solo con la slide caricata esternamente

    del tipo

    1 livello maschera

    2 livello loadMovie dello slide in un clip

  9. Ho visto che avete inserito il codice per lo scorrimento in verticale delle foto contenute nello slide ma non funziona.

    Potreste aiutarmi per favore?

    Grazie

  10. iAmNoTLeGeNd

    Complimenti per il tool ed il tutorial, veramente bello!
    Una domanda: ho aggiunto uno script che mi fa zoomare la thumbnail al rollover solo che non gestisce bene le profondità (l’immagine zoomata non è in primo piano). Con nexthighestdepth() non funge.. qualche idea? Grazie!

  11. @iAmNoTLeGeNd non sapendo bene come hai sviluppato la gallery mi è un po difficile stabilire dove sia la soluzione…

  12. Ciao non riesco ad impostare la slide in modo verticale quali sono i parametri da variare… ovvero la striscia sono riuscito a renderla verticale ma le immagini scorrono sempre in orizzontale… ufff.
    grazie

  13. Ci sono riuscito sostituendo il valore X con Y.. funziona è una figata
    grazie lo stesso!!!

  14. Ciao Julius,in primis complimenti per il lavoro che fai.
    Ho preso il tuo slideshow dinamico ,l’ho modificato per le mie esigenze,cioè rendendolo verticale invece che orizzontale ho solo un piccolo problema,quando vado verso l’alto la velocità aumenta ma quando vado verso il basso il verso di “rotazione” delle miniature non cambia e non capisco perchè.

  15. Ciao julius scusa l’ignoranza ma le foto non me le fa vedere
    e nel file mx ho provato anche a cambiare il percorso

    ma niente da fare!!!
    cme posso rsolvere??

  16. @N3llo dipenderà dall’intervallo di tempo per scorrerre che prima era da sinistra a destra ma ora è da sopra e sotto…

    @sberla! se mi scrivi un link della pagina online controllo

  17. Oi julius *_*
    sono proprio una rinko XD
    avevo rinominato il file delle immagini x questo nn me lo vedeva

    ^^ grazie lo stesso.. sono alle prime armi con il Flash.. e nn so come farei senza i tuoi TutoriaL!!
    MENOMALE KE C SEI!!

  18. Vi pongo un altro quesito,ho caricato con successo la gallery in un file 800×400,la galleria quando provo il fimato pare uscire fuori invece io vorrei che rimanesse in un quadratoa destra,com posso far ad ottenere questa visualizzazione?Devo usare delle maschere?

  19. Ciao, si potrebbe modificare il sorgente in maniera che le immagini, vengano visualizzate 1 alla volta con effetti tipo la dissolvenza ?
    Grazie

  20. Ciao Grande Julius. Dal tuo bel tutorial ho sviluppato la gallery con l’onLoadMouvie e file di testo annesso. DOMANDONA: come fare per andare a capo nel testo che accompagna l’immagine grande?

    Vorrei simulare il tag , mentre andando a capo con INVIO nel file XML, lo spazio tra le righe è troppo…

    mi permetto di lasciarti file XML e AS per facilitarti nella risposta :))

    Grazie per il tempo che dedichi a tutti noi_ Ciao Julius

    file XML

    gio 4″>

    AS

    };
    function released() {
    _root.box.loadMovie(this.big);
    _root.dida_txt.text=this.didascalia;
    _root.selezione._x = (larghezzamovie)/2;
    //getURL(percorso,”_blank”)
    }

  21. come se fosse un tag br… mi sono accorto che nel messaggio di prima non era comparso il br, mezzo tra … :)

    GRAZIE

  22. Ciao Julius,complimenti per tutto!Se io volessi inserire immagini con altezza diversa ma con lunghezza diversa però che ogni immagine cominciasse dove finisce l’altra come devo fare?

  23. Julius, innanzitutto grazie per il tutorial (e complimenti per il sito).
    Sapresti indicarmi quali parametri modificare per ottenere una larghezza delle foto non omogenea? (la variabile “dimImm” viene reiterata per tutte le immagini)
    Semplificando: creando delle .jpg -ciascuna con larghezza differente dall’altra- come posso fare in modo che i singoli width vengano correttamente richiamati?

    Grazie in anticipo per l’eventuale replica.

  24. CIAO
    perchè qnd mi carica la prima immagine ingrandita questa salta un po’?
    poi quando clicco sulle altre immagini non succede, ma solo sulla prima…cosa devo fare?

    grazie in anticipo

  25. Francesco

    ciao julius ho modificato un pochino la tua slide trasformandola da orizzontale in verticale ma non riesco ad importarla in una pagina html. Se invece la lancio con flash funzione perfettamente. Sai Darmi una soluzione?

  26. nessuno mi risponde?
    credo sia un problema di loading, ma come faccio?
    finchè non mi ha caricato tutte le immagini slide piccole quella grande salta…
    AIUTOOOOOOOOOOO

  27. @Anastasia: ciao dovresti eliminare il parametro di larghezza al fine di farlo adattare a seconda dell’immagine

    @Francesco: scrivi un link dove vedere il progetto che controllo

    @manu: ciao hai un link da vedere online?

  28. Julius, ti ringrazio per la risposta; purtroppo sottovaluti la mia ignoranza in action script (pressoché sconfinata).
    L’unico parametro che mi sembra legato alla larghezza delle immagini è il seguente:
    “dimImm = 184; //imposto la posizione iniziale”
    il problema è che, anche modificandolo, ripete il medesimo valore per ogni singola foto.

    Se non ti è di troppo disturbo potresti darmi qualche indicazione riguardo il passaggio di codice sul quale intervenire?

    Grazie di nuovo per qualsiasi replica futura.

  29. @Anastasia se riesco a breve ti faccio un esempio…

    @manu: se per saltare le imamgini intedi quel tempo che ci mette per caricare una foto è normale in quanto l’immagine cambia…

    O inserisci un’animazione tra le due oppure metti uno sfondo unico o comunque unuforme dietro alle immagini da mascherare questo effetto

  30. Anastasia

    Andrà benissimo quando ti sarà più comodo (non c’è bisogno sia “a breve”, ci mancherebbe!).

    Grazie in anticipo, Julius :)

  31. a dire il vero quello che dico io è che avrei bisogno di un loading per il caricamento della prima immagine grande che si apre e che ora mi salta. quando clicco sulle altre è tutto ok, e una volta che apro la pagina che è gia in cash non salta più!
    scusa se ti rompo ma il cliente mi rompe e se non funziona me lo fa togliere…..:o(

  32. ciao julius, sono ancora io!
    penso di aver capito dove sta il problema della prima immagine che salta finche non le carica tutte

    _root.pre.loadMovie(this.childNodes[i].attributes.photo_big);

    se metto

    _root.pre.loadMovie(this.childNodes[i].attributes.photo);

    carica le immagini piccole e salta meno tempo ma salta ugualmente, posso cambiare il preload?

    grazie ciao

  33. Ciao Julius,
    complimenti per il tuo sito: indispensabile per tutti.
    Io da poco mi sto avvicinando a Flash e sono un tuo assiduo frequentatore….
    Ti spiego il mio problema e spero di essere chiaro.
    Ho scaricato il sorgente del tuo slide dalle implementazioni aggiuntive poichè avevo bisogno di aggiungere in un progetto di sito tutto in Flash una galleria di immagini con la foto più grande che si apriva.
    Ho inserito il contenitore e le azioni su due fotogrammi verticali all’altezza del fotogramma 3 della linea temporale. Un pulsante “on (release) gotoAndStop(3)” mi porta al terzo fotogramma e fin qui tutto bene. Ma se premo altri pulsanti che portano ad altri fotogrammi della linea temporale la galleria resta visibile e si sovrappone. Dove sbaglio?

  34. Ciao Julius, ho un problema che non riesco a risolvere in alcun modo.

    Ho scaricato il tutorial, modificato immagini, eccc…

    Una volta che carico il flash sul sito…questo non funziona.
    Ho provato anche a modificare l’indirizzo di lettura del file xml ma niente di niente.

    Riusciresti a darmi una mano?
    Grazie mille, Manuel

  35. @ICONA: in pratica le slide vengono caricate su un livello che sta sopra tutto potrebbe essere quello il problema

    come carichi la galleria? loadMovie?

    @Manuel: scrivimi qui un link alla pagina online che controllo e ti dico dov’è il problema

  36. @Julius:Ho scaricato il tuo sorgente dalle implementazioni aggiuntive: si, carico la galleria mediante loadMovie. Ti sarei grato se mi risolvessi il problema… Spero di essere stato chiaro: ho un sito con diversi pulsanti che immettono in vari settori. Appena entro nel settore dove ho inserito la galleria, questa resta visibile sempre anche se clicco sul bottone per andare su un altro settore. E’ poi possibile cambiare posizione alla galleria slide? Grazie

Commenti