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
- 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
Letture Consigliate per ABC
Creare animazioni e siti web in Flash CS5
Prezzo: EUR 7,90
Promozione: EUR 6,72
Le risposte per i professionisti Flash AS3
Prezzo: EUR 49,90
Promozione: EUR 42,42
Maya 5. Elaborazione e animazione grafica 3D
Prezzo: EUR 12,90
Promozione: EUR 10,96
Sviluppare applicazioni con Flex 4 e AS3
Prezzo: EUR 40,00 |
Promozione: EUR 38,00
Articoli simili ABCAltroFlashGraficaImmaginiSlidesSviluppoTutorial
Autore: Giuliano Ambrosio
Giuliano Ambrosio è un Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web. Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.
Guide In Evidenza
Usare un Metodo di Lavoro Efficace
Responsive Web Design: I Migliori Tutorial & Risorse
Progettare e realizzare un layout grafico per iPad
Progettare un Layout Grafico che funzioni sul Web
Facebook: Creare una Pagina Personalizzata
Creare un layout per iPhone: Trucchi e Consigli pratici
Creare un Blog Popolare partendo da zero
Video Tutorial Adobe Photoshop
Il Meglio del Blog
I love WordPress - JuliusDesign P.IVA 10079630017 - Tutti i contenuti sotto Licenza Creative Commons - Advertise - Contatti - Policy
The advertisement is handled by BlackGeek Ltd
Julius
6 dicembre 2008
@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
Manuel
9 dicembre 2008
@Julius:Niente Julius non va…mi arrendo…. io ho caricato xml e swf sul server. Li carico,…ma niente…. uff…sto impazzendo!
Manuel
10 dicembre 2008
@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
Julius
10 dicembre 2008
@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
Manuel
11 dicembre 2008
@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!
Manuel
12 dicembre 2008
@Julius:Julius scusa…ti inoltro il link della pagina dove carico swf http://www.travelgay.it/shopping/shopping_homepage.asp
Grazie, Manuel
Julius
13 dicembre 2008
E’ qui il problema >> “Quando provo ad importarlo in una pagina web…questo diventa bianco!”
Dimmi esattamente cosa fai…
Per “Importarlo” cosa intendi?
Gianni
15 gennaio 2009
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!!
kri
17 gennaio 2009
ma come si fa a caricare le foto su una slide xk nn ci riesco. . . grazie ciao
Filippo
10 febbraio 2009
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
Serena
10 febbraio 2009
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
Serena
11 febbraio 2009
ho risolto il problema cambiando il valore di DimImm ho fatto bene?ciao e grazie
alberto
23 febbraio 2009
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
giacomo
11 marzo 2009
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 :)
Valerio
23 marzo 2009
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
diego
16 aprile 2009
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
Giovanni
21 aprile 2009
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
luca
30 aprile 2009
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
Chiara
15 maggio 2009
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?
Alessio
12 giugno 2009
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
Luca
10 luglio 2009
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
Anna
25 luglio 2009
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
Ross
10 ottobre 2009
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 ?
manu
21 ottobre 2009
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”);
Andrea
29 ottobre 2009
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
valentina
22 dicembre 2009
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!
giada
11 gennaio 2010
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!
Julius
11 gennaio 2010
Devi inglobarla in un altro swf?
Leggi questo articolo > _loockroot
giada
11 gennaio 2010
era proprio quello che mi serviva!! grazie mille!!!
ema
11 gennaio 2010
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
12 gennaio 2010
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
giada
13 gennaio 2010
Gianni ha scritto:
anche io vorrei sapere come inserire immagini che hanno solamente 1 dimensione uguale e l’altra variabile.
grazie
Salvo
29 gennaio 2010
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…
Elisabetta
31 marzo 2010
non riesco a capire come si fa :(
Salvo
31 marzo 2010
mi sa che qui non risponde più nessuno…
Elisa
28 aprile 2010
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
nicola
3 luglio 2010
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
max
22 dicembre 2010
Ciao a tutti!
Ciao Julius e complimenti!
Qcns sa perchè non carica i PNG?
Gigi
25 gennaio 2011
@ 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
Francesco
27 gennaio 2011
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!?
Fex
7 aprile 2011
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!