Slide scorrevole dinamica in flash

- Letture: 6.737

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. @Julius:Niente Julius non va…mi arrendo…. io ho caricato xml e swf sul server. Li carico,…ma niente…. uff…sto impazzendo!

  2. @Julius:Julius…sono sempre io a romperti….forse ne capisco meno di quello che pensassi. Per caricare xml cosa devo fare? Qual’è la stringa html da usare? Grazie infinite

  3. @Manuel: per caricare l’xml devi semplicemente caricare il file materialmente sul tuo spazio web

    In pratica devi avere i files che hai nella cartella in locale anche in remoto sul tuo spazio ovviamente senza file di progetto .fla

  4. @Julius:Ciao Julisu…porta pazienza.

    Io ho caricato tutto sul mio server da molto tempo.
    Il link diretto alla slide è http://www.travelgay.it/public/flash/home%20prodotti.swf

    Come vedi funziona perfettamente è il file xml risulta caricato.
    Quando provo ad importarlo in una pagina web…questo diventa bianco!

    Nada nada…. se sai darmi ultima dritta…altrimenti rinuncio…. grazie mille come sempre, Manuel!

  5. E’ qui il problema >> “Quando provo ad importarlo in una pagina web…questo diventa bianco!”

    Dimmi esattamente cosa fai…

    Per “Importarlo” cosa intendi?

  6. Ciao, vorrei chiedere a qualcuno se sa come posso inserire delle immagini di dimensione variabile, e far sì che non si taglino…

    Grazie a tuttti!!

  7. Ciao Julius, complimenti ancora per il tuo blog e per i tuoi tutorial. Ti spiego brevemente il mio quesito; vorrei creare da questa slide una coopia identica da posizionare sotto questa però invertita verticalmente. Cioè vorrei creare uno slide scorrevole che dia l’impressione del riflesso della prima slide, che poi sfumi ovviamente con il colore dello sfondo. E’ possibile fare questo? non sono riuscito a creare una copia sullo stage da invertire; per ridimensionare la slide e adattarla ai pixel che ritengo opportuni basta ridimensionare i pixel delle proprietà del cocumento che attualmente è di 700 pixel per 177 ? Grazie tante

  8. Ciao Giulius!complimentissimi per il tuo interessante e utile sito!sei veramente bravo!
    é da poco che utilizzo Flash e actionscript e vorrei utilizzare la tua gallery per un sito che sto facendo ma avrei bisogno di usare delle foto più piccole; solo che se rimpicciolisco le foto poi quando lancio il debug le foto nn sono più attaccate una all’altra ma separate da uno spazio nero….come faccio a riavvicinarle?
    nn so se mi sono spiegata, ti ringrazio in anticipo per il tuo aiuto.
    saluti
    Serena

  9. ho risolto il problema cambiando il valore di DimImm ho fatto bene?ciao e grazie

  10. Ciao Julius.

    Complimenti per il blog. Sto modificando lo slide_scorrevole_link. Ho un solo problema. Pur settando il valore alfa da 50 a 100, l’immagine alla partenza compare con il valore alfa uguale a 100; nel momento in cui posiziono il mouse sull’immagine questa rimane a 100, ma, questo il problema, nel momento in cui sposto il mouse il valore alfa scende a 50 invece che rimanere a 100. Ho provato a modificare alcune variabile ma non c’e’ stato nulla da fare.

    Grazie in anticipo.

    Buon lavoro

    alberto

  11. io ho delle img con altezza variabile… come posso fare a richiamare l’altezza dell’img in modo che l’una si posizioni dove finisce l’altra???
    grazie :)

  12. Salve Julius, complimenti per il blog… mi avvicino ora a flash, vorrei chiederti se fosse possibile linkare le immagini della slide a finestre pop up… grazie in anticipo,

    Valerio

  13. ciao Julius, sto provando a “personalizzare” uno dei tuoi tutorial…ma son negato.
    Il tutorial è Slide scorrevole dinamica in flash, volevo inserirlo in un fla di dimensioni diverse…1024 e limitare lo scorrimento delle immagini all’interno di un rettangolo ancora + piccolo…una scatola in una scatola…puoi aiutarmi?

    grazie in anticipo

  14. Ciao Julius…
    Complimenti per le tue creazioni… non sono un esperto in materia (sono programmatore php/mysql e java senior) ma sono veramente stupende…

    Ti volevo chiedere, visto che ho l’esigenza di integrarla su un sito di un mio modulo per un cms (open source) se è disponibile (o se questa è adattabile) una slide flash verticale…

    Praticamente dovreifar scorrere verticalmente delle immagini in un filmato largo 150 pixel e alto 550 (per darti l’idea di cosa intendo)…

    Grazie per l’eventuale risposta…
    Giovanni

  15. Ciao Julius. Molto bello il tutorial. Vorrei chiederti pero’ una cosa, se io da un altro file flash cerco di caricarlo con un loadMovie non riesco a capire perchè le immagini non le fa visualizzare. mi carica l’SWF, ma non carica lo scorrimento delle immagini. Qualcuno mi dice cosa devo modificare?
    grazie infinite
    Luca

  16. Buongiorno Julius. Bellissimo sito e spiegazioni molto esaurienti e comprensibili anche per principianti come me!
    Molto interessante la tua slide! Ho messo le mie immagini e funziona in locale.
    Poi ho inserito .xml e .swf in una cartella in remoto e dalla pagina html ho provato a fare richiami sia relativi che assoluti al .swf ma non mi funziona, visualizza solo una strisciata bianca.
    (Mentre un altro tuo flash nella stessa pagina funziona – l’ho messo per fare delle prove! :-))
    Ecco il link:
    http://www.angiolichiara.com/index_it.html
    Forse devo cambiare il percorso nella .fla?

  17. Ciao Julius,
    volevo sapere come è possibile richiamare un file swf anzichè una foto e a far apparire una descrizione della foto al passaggio sopra con il mouse.
    E’ una settimana che ci stò impazzendo….
    Complimenti per il sito sei veramente chiaro nelle tue descrizioni

    saluti

    Ale

  18. Ciao Julius,
    innanzitutto complimenti per il lavoro che fai … fantastico :)

    Dovrei ricreare questa stessa “slide scorrevole dinamica” così com’è ma al posto delle immagini ci dovrebbero essere dei campi di testo dinamico che recuperano il contenuto da un file Xml ..

    Ho utilizzato questa “slide scorrevole dinamica” per creare per l’appunto una serie di immagini scorrevoli ed ho aggiunto la funzione che hai usato nel tutorial “VSlide Gallery XML: Galleria Immagini Flash Verticale” per far scorrere le immagini in base allo spostamento del mouse: a questo punto dovrei inserire dei testi dinamici recuperati sempre da Xml (una sorta di “descrizione”) sul basso di ogni immagine, una didascalia che scorra ovviamente in concomitanza dell’immagine come se fosse parte integrante della stessa ..

    è da una settimana che ci smanetto su ma nn ne sono venuto a capo, premetto che nn sono praticissimo nella creazione di AS da zero, per lo più “monto e smonto” come ho fatto per ricreare lo spostamento in base al movimento del mouse.

    grazie di tutto ..
    Luca

  19. Ciao Julius,grazie per i tuoi consigli davvero sei bravissimo!!
    Ho scaricato una tua sorgente ho provato a fare uno slide:fatto!
    Solo che non riesco a fare il codice per inserirlo in modulo html, in cosa sbaglio?
    http://www.aenge.info/tunes/9.swf, lo hostato nel mio sito e si vede.
    Sono dilentante in questo potresti aiutarmi?
    Grazieeee sei davvero bravissimo

  20. Ciao a tutti,

    vorrei utlizzare con flash8 lo slide scorrevole orizzontale ma non riesco in nessun modo ad adattarla ad una dimensione di altezza e larghezza definita. Cioè non vorrei si adattasse alla larghezza dello schermo o del file flash ma che restasse dentro in width= ed height=.

    In pratica vorrei sostituire il comando larghezzamovie = stage.width; //imposto la larghezza del movie; con una largezza e una altezza definiti.
    Sapete come si fa ?

  21. ciao julius ho un problemino, devo rendere scorrevole le immagini partendo da questo file che ti copio sotto…potresti darmi una mano?
    Ora ho 15 immagini allineate orizzontalmente, ma dovendone aggiungere altre, vorrei che scorressero…
    non so più dove sbattere la testa
    grazie 1000

    focuspro._visible = true;
    colonne = 30;
    dati = new Array();
    filexml = new XML();
    filexml.ignoreWhite = true;
    filexml.onLoad = function(loaded) {
    if (success) {
    trace(“Error loading XML.”);
    } else {
    trace(“Hai caricato il file xml con successo…”);
    }
    // end else if
    my_mc.cat._visible = 0;
    dati = filexml.firstChild.childNodes[categoriasito].childNodes;
    _root.tot=dati.length-1;
    for (i=0; i<dati.length; i++) {
    my_mc.cat.duplicateMovieClip("cat"+i, i*1+5000);
    my_mc["cat"+i].loader.loadMovie(dati[i].attributes.urlimage);
    my_mc["cat"+i].loader._xscale=100;
    my_mc["cat"+i].loader._yscale=100;
    my_mc["cat"+i].input_txt.text = dati[i].attributes.desc;
    if (i10 && focuspro.fotogrande.getBytesLoaded()>=focuspro.fotogrande.getBytesTotal()) {
    focuspro.fotogrande._x = 10;
    focuspro.fotogrande._y = 500/2-(focuspro.fotogrande._height/2);
    delete this.onEnterFrame;
    }
    };
    };
    focuspro.indietro.onRelease = function() {
    my_mc._visible = true;
    my_mc.alphaTo(100, 1, “linear”);
    meuScroll._visible = true;
    meuScroll.alphaTo(100, 2, “linear”);
    focuspro.tween(“_x”, 822, 1.5);
    focuspro.alphaTo(0, 1, “linear”, 0, function () {
    this._visible = true;
    });
    trace(“Hai cliccato: “+this._name);
    };

    focuspro.link_1.onRelease = function() {
    //suonoclick.start();
    getURL(_global.link1, “_blank”);
    trace(“Hai cliccato: “+this._name);
    };
    focuspro.link_2.onRelease = function() {
    suonoclick.start();
    getURL(_global.link2, “_blank”);
    trace(“Hai cliccato: “+this._name);
    };
    }
    };
    filexml.load(“xml/foto_portrait.xml”);

  22. ciau julius,
    questa galleria mi è molto utile per il sito che sto realizzando, e ti ringrazio tantissimo, volevo chiederti un consiglio, a te o chiunque mi potesse aiutare.
    siccome ho implementato la tua galleria in un mio progetto, volevo sapere come fare per far si che scorresse all’interno di un area delimitata e non su tutta la scena.
    ho provato a cambiare arghezzamovie = Stage.width; ma non è quello.
    Inoltre altra cosa volevo sapere se era un bug oppure è proprio cosi: praticamente allo scorrere sulla destra le immagini appaiono dalla fine dello stage uniformemente, mentre da sinistra appaiono una alla volta solo dopo superata la metà della stessa foto,
    ti lascio l’indirizzo provvisorio per renderti conto del problema.

    http://www.fiorenzozaffina.it/andrea/opere.html

    per farti capire vorrei che la galleria fosse allineata con le scritte in alto.

    Grazie mille in anticipo a te o chiunque mi sappia aiutare :)
    ciao

  23. valentina

    ciao a tutti, ho scaricato questo bellisimo tutorial ma ho un problema…avendo flash cs4 e utilizzando as 3.0 non riesco ad integrare questo file con il mio progetto creato appunto con flash cs4….lo script non viene riconosciuto!!!visto che conosco abbastanza flash ma sono una capra in actionscript, volevo sapere se c’era qualcuno che poteva aiutarmi “trasformando” il codice sopra in actionscript 3.0….grazie mille anticipatamente!!!!
    ciao a tutti e buon natale!

  24. Ciao Julius, vorrei utilizzare questa slide scorrevole dentro un’animazione. E’ possibile?
    Per farmi capire meglio ti scrivo il il link del sito in cui vorrei inserire la slide e’: http://www.skyltd.net, andrebbe una slide dentro ogni pagina.
    Ho provato a inserire un movie clip con il codice della slide,ma non funziona, puoi aiutarmi?

    Grazie mille!

  25. Andrea ha scritto:

    ciau julius,
    questa galleria mi è molto utile per il sito che sto realizzando, e ti ringrazio tantissimo, volevo chiederti un consiglio, a te o chiunque mi potesse aiutare.
    siccome ho implementato la tua galleria in un mio progetto, volevo sapere come fare per far si che scorresse all’interno di un area delimitata e non su tutta la scena.
    ho provato a cambiare arghezzamovie = Stage.width; ma non è quello.
    Inoltre altra cosa volevo sapere se era un bug oppure è proprio cosi: praticamente allo scorrere sulla destra le immagini appaiono dalla fine dello stage uniformemente, mentre da sinistra appaiono una alla volta solo dopo superata la metà della stessa foto,
    ti lascio l’indirizzo provvisorio per renderti conto del problema.

    http://www.fiorenzozaffina.it/andrea/opere.html

    per farti capire vorrei che la galleria fosse allineata con le scritte in alto.

    Grazie mille in anticipo a te o chiunque mi sappia aiutare
    ciao

    Ciao Julius a distanza di tempo ho ripreso a lavorare su questo sito e se saresti cosi gentile da aiutarmi con le modifiche ti offro una cena :)
    grazie

  26. Gianni ha scritto:

    Ciao, vorrei chiedere a qualcuno se sa come posso inserire delle immagini di dimensione variabile, e far sì che non si taglino…
    Grazie a tuttti!!

    anche io vorrei sapere come inserire immagini che hanno solamente 1 dimensione uguale e l’altra variabile.

    grazie

  27. Ciao Julius,
    nn si vede la slide sul sito in locale, modifico le immagini, l’swf funziona, copio il file.xml, l’swf e la cartella img nella cartella del sito in locale swf dove ci sono tutti gli oggetti flash…appena la inserisco nella pagina, si vede solo lo sfondo e nient’altro…devo modificare qualcosa nel codice?! Grazie…

  28. Ciao Julius,
    complimenti per il blog, lo uso molto per prendere spunti per i miei semplici siti in flash. Non sono un’esperta, ho scaricato questo slide di immagini e tutto funziona correttamente … solo una cosa, avrei la necessità che all’inizio le immagini rimanessero ferme per un tot di tempo e poi iniziassero a scorrere … non so dove iniziare x modificare il codice! Potresti darmi una mano? Grazie mille, Elisa

  29. ciao Julius!!!
    aiuto…
    vorrei togliere il link sulle foto.
    ma lasciare l’effetto alpha al passaggio del mouse su ogni singola foto. ma senza link e quindi senza icona manina mouse.

    inoltre se volgio portare in su la barra scroller orrizonatale…
    piu vicina alle foto come faccio… non trovo l’oggetto…

    grazie
    nicola

  30. @ alberto:
    Ciao Alberto, Sei riuscito poi a capire come togliere l’alpha 50 dalle immagini visualizzate? Io sto impazzendo e non so come sbattere la testa.

    Grazie
    Gigi

  31. Ciao Julius, complimenti per il sito e per i tuoi lavori, sto utilizzando la slideshow che hai messo a disposizione, l ho adattata alle mie esigenze, ho salvato ed ho creato l .swf; ma ho un piccolo problema, non riesco a includerla dentro una maschera per fare in modo che si veda una sola foto alla volta quando mi trovo all’interno di un’altro .fla
    Nel senso che importando l .swf mi rimane sempre in primo piano e con le foto che occupano l’intero stage pur mettendolo in un mc al cui interno ho creato una maschera con la dimensione di una singola foto. Potresti darmi qualche consiglio!?

  32. Anastasia ha scritto:

    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.

    Anche io mi ritrovo con lo stesso identico problema.
    Ho una “gallery scorrevole” di swf, ma non riesco a settare il calcolo della larghezza variabile.
    Come posso fare?!?

    Inoltre mi farebbe comodo sapere come poter dare ad un pulsante la possibilità di comandare lo scorrimento.

    Per capirsi, queste sono le mie immagini in sequenza:
    [img 1][img 2][img 3][img 4][img 5][img n]
    Supponiamo di avere un menù con il nome di ciascuna immagine, se clicco su “Immagine 5” (che attualmente può essere o non essere visualizzata entro l’area dello stage), tutta la gallery si sposta in modo tale da avere [img 5] al centro del mio stage.
    Come posso fare per realizzarlo?

    Ringrazio in anticipo chiunque riuscisse a darmi un suggerimento!

Commenti