Slide scorrevole dinamica in flash

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

Annunci

45 thoughts on “Slide scorrevole dinamica in flash

  1. 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!

  2. 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

  3. 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

  4. @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

  5. 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.. 😉

  6. 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.

  7. 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

  8. 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

  9. 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!!!

  10. @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

  11. 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.

  12. @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…

  13. 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!

  14. 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

  15. 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:-)

  16. 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

  17. 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!

  18. 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 !

  19. 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?

  20. 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

  21. 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.

  22. 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

  23. 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

  24. 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

  25. @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

  26. 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).

  27. @ 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

Rispondi

Effettua il login con uno di questi metodi per inviare il tuo commento:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...