Slide scorrevole dinamica in flash

- Letture: 6.801

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

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

141 Commenti

  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. Salve,
    come e’ possibile implementare dei tasti stop e play al filmato?

    Grazie e complimenti per il codice.

  14. marcolino

    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!

  15. marcolino

    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

  16. marcolino

    Ciao Julius,
    si potrebbe gestire l’apertura di una pagina html al clic della singola immagine?

    ciao

  17. marcolino

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

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

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

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

  21. In effetti il file allegato era errato…

    Riscaricate la prima implementazione riferita alla Possibilità di aggiungere un link dinamico alle foto

    saluti

  22. Enionline

    Ciao, cerco di aprire ifile con FLASH MX ma non si aprono … qualche suggerimento ?

  23. Ciao Enionline, la versione più precedente di Flash 8 che posso inserire e FlashMX2004 quindi per altre versioni precedenti non posso farci niente…

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

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

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

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

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

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

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

  31. Quindi non vi è possibilità di farlo sparire quando vado su una altra pagina
    ????????????????

  32. 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 :(

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

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

  35. frusdonk

    caro Julius, intanto grazie! l’unica cosa è che non riesco a scaricare il sorgente di questa che sembra essere una gallery fantastica… come mai?

  36. Il file da scaricare è corretto.

    Riesci a scaricare il file zip o non riesci ad aprire il file sorgente .fla?

    sono due cose differenti

Commenti