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 slide verticale su e giu tramite mouse
- Scarica sorgente Possibilità di aprire tramite loadMovie una foto più grande
- Scarica sorgente Possibilità di inserire un’immagine sopra la slide tramite AS
141 Commenti
@ICONA: ciao usa _lookroot oppure _level0 come descritto nell’articolo
@Manuel: sbagli il richiamo della slide flash
Prima verifica che il file .xml sia caricato, a me risulta di no, poi richiama la slide da HTML con un link assoluto tipo http://www.tuodominio.it/flash/gallery.swf
@Julius:Niente Julius non va…mi arrendo…. io ho caricato xml e swf sul server. Li carico,…ma niente…. uff…sto impazzendo!
@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
@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
@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!
@Julius:Julius scusa…ti inoltro il link della pagina dove carico swf http://www.travelgay.it/shopping/shopping_homepage.asp
Grazie, Manuel
E’ qui il problema >> “Quando provo ad importarlo in una pagina web…questo diventa bianco!”
Dimmi esattamente cosa fai…
Per “Importarlo” cosa intendi?
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!!
ma come si fa a caricare le foto su una slide xk nn ci riesco. . . grazie ciao
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
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
ho risolto il problema cambiando il valore di DimImm ho fatto bene?ciao e grazie
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
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 :)
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
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
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
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
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?
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
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
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
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 ?
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”);
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 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!
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!
Devi inglobarla in un altro swf?
Leggi questo articolo > _loockroot
era proprio quello che mi serviva!! grazie mille!!!
Dovrei inserire questa slide nel mio sito in alto come banner iniziale,come in questo sito http://www.carmon.it/home.htm come si fa???mi serve una grande mano,te ne sarò riconoscente a vita…
Andrea ha scritto:
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
Gianni ha scritto:
anche io vorrei sapere come inserire immagini che hanno solamente 1 dimensione uguale e l’altra variabile.
grazie
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…
non riesco a capire come si fa :(
mi sa che qui non risponde più nessuno…
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
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
Ciao a tutti!
Ciao Julius e complimenti!
Qcns sa perchè non carica i PNG?
@ 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
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!?
Anastasia ha scritto:
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!