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
grazie mille, ho risolto!!! probabilmente era un problema mio! cmq non riuscivo proprio a scaricare il .zip… Ottimo lavoro, continua così!
bene! thanks
Scusa Julius, posso usare una .png al posto del cerchio rosso in quella scorrevole con un’immagine sopra? Se sì, come devo fare? Grazie!
P.S. Si può fare in modo che onmouseover lo slideshow si blocchi? grazie!
Puoi usare sia png che jpg
Invece per quanto riguarda la slide con il blocco tramite mouse dovrebbe esserci un esempio a fine aricolo o tra i commenti…
Grazie mille, alla fine sono riuscito a far tutto… Devo usare la gallery come parte di un header in joomla. L’unica cosa è che non riesco a far caricare sul file index.php di joomla l’.swf, nonostante questo funzioni perfettamente. Quale potrebbe essere il problema? Le ho provate davvero tutte!! x|
Grazie mille in anticipo per eventuali chiarimenti e aiuti :D
Purtroppo non ho mai avuto necessità di usare joomla non saprei che dirti…
Finalmente ce l’ho fatta!! :D alleluja xD ecco il risultato finale (ottimizzato per firefox) http://www.pastoraleunirc.org
Senti grande Julius, c’è un modo per far pescare le immagini randomicamente?? Forse svincolando l’swf dall’xml…
Ciao ho visto! rende bene lo slide!
Per il fatto del random si dovrebbe cambiare l’inserimento delle foto da xml rendendole random…
Posso provare appena ho tempo…
Ciao julius ho un problemino con questa splendida slide di immagini dopo il caricamento con il loader. Spiego meglio.
Dopo averla modificata con le mie immagini, sistemato le variabili, inserito l’istruzione this._lockroot = true; ecc… e aver visto che funziona, l’ho inserita nel mio fla generale del sito che sto realizzando. Funziona perfettamente, ma se maleauguratamente si clicca sull’icona per ingrandire la finestra e adattarla allo schermo, la galleria mi esce fuori dai bordi, creando un effetto bruttissimo nella fla principale. Come posso risolvere questo problema???
Grazie mille in anticipo, ti saluto
Shinji.
P.s. Molto ben fatto il sito.
molto probabilmente il problema sta nel posizionamento del clip che contiente la galleria…
Scusa julius è possibile applicare una maschera alle slide??Grazie mille
In teoria si, ma forse solo con la slide caricata esternamente
del tipo
1 livello maschera
2 livello loadMovie dello slide in un clip
Ho visto che avete inserito il codice per lo scorrimento in verticale delle foto contenute nello slide ma non funziona.
Potreste aiutarmi per favore?
Grazie
Complimenti per il tool ed il tutorial, veramente bello!
Una domanda: ho aggiunto uno script che mi fa zoomare la thumbnail al rollover solo che non gestisce bene le profondità (l’immagine zoomata non è in primo piano). Con nexthighestdepth() non funge.. qualche idea? Grazie!
@iAmNoTLeGeNd non sapendo bene come hai sviluppato la gallery mi è un po difficile stabilire dove sia la soluzione…
Ciao non riesco ad impostare la slide in modo verticale quali sono i parametri da variare… ovvero la striscia sono riuscito a renderla verticale ma le immagini scorrono sempre in orizzontale… ufff.
grazie
Ci sono riuscito sostituendo il valore X con Y.. funziona è una figata
grazie lo stesso!!!
@Stefano ottimo ;)
Ciao Julius,in primis complimenti per il lavoro che fai.
Ho preso il tuo slideshow dinamico ,l’ho modificato per le mie esigenze,cioè rendendolo verticale invece che orizzontale ho solo un piccolo problema,quando vado verso l’alto la velocità aumenta ma quando vado verso il basso il verso di “rotazione” delle miniature non cambia e non capisco perchè.
Ciao julius scusa l’ignoranza ma le foto non me le fa vedere
e nel file mx ho provato anche a cambiare il percorso
ma niente da fare!!!
cme posso rsolvere??
@N3llo dipenderà dall’intervallo di tempo per scorrerre che prima era da sinistra a destra ma ora è da sopra e sotto…
@sberla! se mi scrivi un link della pagina online controllo
Inserita tra le implementazioni a fine articolo SLIDE VERTICALE
Oi julius *_*
sono proprio una rinko XD
avevo rinominato il file delle immagini x questo nn me lo vedeva
^^ grazie lo stesso.. sono alle prime armi con il Flash.. e nn so come farei senza i tuoi TutoriaL!!
MENOMALE KE C SEI!!
Grazie Julius sei un grande!!!
Vi pongo un altro quesito,ho caricato con successo la gallery in un file 800×400,la galleria quando provo il fimato pare uscire fuori invece io vorrei che rimanesse in un quadratoa destra,com posso far ad ottenere questa visualizzazione?Devo usare delle maschere?
@sberla capita =) ciao
Hey riguardo al post che ho scritto prima il problema sta qua:
Xenia
Ciao,
Come faccio ad inserire lo slide nella mia pagina web?
Ciao, si potrebbe modificare il sorgente in maniera che le immagini, vengano visualizzate 1 alla volta con effetti tipo la dissolvenza ?
Grazie
Ciao Grande Julius. Dal tuo bel tutorial ho sviluppato la gallery con l’onLoadMouvie e file di testo annesso. DOMANDONA: come fare per andare a capo nel testo che accompagna l’immagine grande?
Vorrei simulare il tag , mentre andando a capo con INVIO nel file XML, lo spazio tra le righe è troppo…
mi permetto di lasciarti file XML e AS per facilitarti nella risposta :))
Grazie per il tempo che dedichi a tutti noi_ Ciao Julius
file XML
gio 4″>
AS
};
function released() {
_root.box.loadMovie(this.big);
_root.dida_txt.text=this.didascalia;
_root.selezione._x = (larghezzamovie)/2;
//getURL(percorso,”_blank”)
}
come se fosse un tag br… mi sono accorto che nel messaggio di prima non era comparso il br, mezzo tra … :)
GRAZIE
Ciao Julius,complimenti per tutto!Se io volessi inserire immagini con altezza diversa ma con lunghezza diversa però che ogni immagine cominciasse dove finisce l’altra come devo fare?
con altezza uguale….avevo sbagliato a scrivere
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.
CIAO
perchè qnd mi carica la prima immagine ingrandita questa salta un po’?
poi quando clicco sulle altre immagini non succede, ma solo sulla prima…cosa devo fare?
grazie in anticipo
ciao julius ho modificato un pochino la tua slide trasformandola da orizzontale in verticale ma non riesco ad importarla in una pagina html. Se invece la lancio con flash funzione perfettamente. Sai Darmi una soluzione?
nessuno mi risponde?
credo sia un problema di loading, ma come faccio?
finchè non mi ha caricato tutte le immagini slide piccole quella grande salta…
AIUTOOOOOOOOOOO
@Anastasia: ciao dovresti eliminare il parametro di larghezza al fine di farlo adattare a seconda dell’immagine
@Francesco: scrivi un link dove vedere il progetto che controllo
@manu: ciao hai un link da vedere online?
Julius, ti ringrazio per la risposta; purtroppo sottovaluti la mia ignoranza in action script (pressoché sconfinata).
L’unico parametro che mi sembra legato alla larghezza delle immagini è il seguente:
“dimImm = 184; //imposto la posizione iniziale”
il problema è che, anche modificandolo, ripete il medesimo valore per ogni singola foto.
Se non ti è di troppo disturbo potresti darmi qualche indicazione riguardo il passaggio di codice sul quale intervenire?
Grazie di nuovo per qualsiasi replica futura.
ma certo!
grazie in anticipo..
http://www.carlomaristudio.com/fineart_animal.html eccolo qui
salta solo la prima al caricamento
@Anastasia se riesco a breve ti faccio un esempio…
@manu: se per saltare le imamgini intedi quel tempo che ci mette per caricare una foto è normale in quanto l’immagine cambia…
O inserisci un’animazione tra le due oppure metti uno sfondo unico o comunque unuforme dietro alle immagini da mascherare questo effetto
Andrà benissimo quando ti sarà più comodo (non c’è bisogno sia “a breve”, ci mancherebbe!).
Grazie in anticipo, Julius :)
a dire il vero quello che dico io è che avrei bisogno di un loading per il caricamento della prima immagine grande che si apre e che ora mi salta. quando clicco sulle altre è tutto ok, e una volta che apro la pagina che è gia in cash non salta più!
scusa se ti rompo ma il cliente mi rompe e se non funziona me lo fa togliere…..:o(
ciao julius, sono ancora io!
penso di aver capito dove sta il problema della prima immagine che salta finche non le carica tutte
_root.pre.loadMovie(this.childNodes[i].attributes.photo_big);
se metto
_root.pre.loadMovie(this.childNodes[i].attributes.photo);
carica le immagini piccole e salta meno tempo ma salta ugualmente, posso cambiare il preload?
grazie ciao
Ciao Julius,
complimenti per il tuo sito: indispensabile per tutti.
Io da poco mi sto avvicinando a Flash e sono un tuo assiduo frequentatore….
Ti spiego il mio problema e spero di essere chiaro.
Ho scaricato il sorgente del tuo slide dalle implementazioni aggiuntive poichè avevo bisogno di aggiungere in un progetto di sito tutto in Flash una galleria di immagini con la foto più grande che si apriva.
Ho inserito il contenitore e le azioni su due fotogrammi verticali all’altezza del fotogramma 3 della linea temporale. Un pulsante “on (release) gotoAndStop(3)” mi porta al terzo fotogramma e fin qui tutto bene. Ma se premo altri pulsanti che portano ad altri fotogrammi della linea temporale la galleria resta visibile e si sovrappone. Dove sbaglio?
Ciao Julius, ho un problema che non riesco a risolvere in alcun modo.
Ho scaricato il tutorial, modificato immagini, eccc…
Una volta che carico il flash sul sito…questo non funziona.
Ho provato anche a modificare l’indirizzo di lettura del file xml ma niente di niente.
Riusciresti a darmi una mano?
Grazie mille, Manuel
Julius…help me!!!! Non riesco proprio a far funzionare in rete il file…dove sbaglio?
@ICONA: in pratica le slide vengono caricate su un livello che sta sopra tutto potrebbe essere quello il problema
come carichi la galleria? loadMovie?
@Manuel: scrivimi qui un link alla pagina online che controllo e ti dico dov’è il problema
@Julius:Ho scaricato il tuo sorgente dalle implementazioni aggiuntive: si, carico la galleria mediante loadMovie. Ti sarei grato se mi risolvessi il problema… Spero di essere stato chiaro: ho un sito con diversi pulsanti che immettono in vari settori. Appena entro nel settore dove ho inserito la galleria, questa resta visibile sempre anche se clicco sul bottone per andare su un altro settore. E’ poi possibile cambiare posizione alla galleria slide? Grazie
@Julius:Ciao Julius, grazie mille!!! Il link è questo: http://www.travelgay.it/shopping/shopping_homepage.asp
Il banner non compare proprio…ma se vedi il codice html c’è!
Per intenderci si trova sotto tiziano ferro!
Non riesco proprio a capire…anche oggi un’intera giornata a sbatterci la testa! Uff…
Grazie mille. Sei davvero eccezionale! Manuel