Ecco un esempio di Galleria di foto scorrevole a seconda del posizionamento del mouse.
E’ altamente personalizzabile ed è possibile aggiungere altre foto, con accurate accortezze.
Per inserire altre foto basta semplicemente creare un nuovo clip filmato di nome istanza, in questo caso tab3 in quanto il nostro ciclo inizia da zero.
Dopo aver inserito la nostra immagine nel clip con coordinate 0,0 andaimo a posizionare il nuovo clip al margine destro dello stage con coordinate 640,0
Per ultima cosa dobbiamo inserire lo stato a “false” del nuovo clip contenente l’immagine
stato = new Array(false, false, false, false, false);
Andiamo ad analizzare il codice:
Questa Tabella mi fornisce lo stato di roll-Over sulle schede che all’inizio è impostato su “False”
stato = new Array(false, false, false, false);
Calcolo porzioni visibili e posizione orizzontale:
- la porzione “media” rappresenta la parte visibile quando nessuna scheda è in “roll-over”
- la porzione “minima” è la parte visibile delle altre schede quando una è in roll-over
la porzione “massima” è, ovviamente, rappresentata dalla larghezza di ogni scheda
media = Stage.width / stato.length;
minima = (Stage.width - tab0._width) / (stato.length-1);
massima = tab0._width;
//trace("queste le dimensioni: "+media+"/"+minima+"/"+massima);
prototipo per il movimento decelerato
MovieClip.prototype.muovi = function (traguardo, speed) {
this.arrivato = false;
this.onEnterFrame = function () {
this._x = (traguardo - this._x) / speed + this._x;
if (Math.abs(traguardo-this._x)<=0.5) {
this._x = traguardo;
this.arrivato = true;
delete this.onEnterFrame;
}
}
}
Attivo i pulsanti delle schede (i clip sono nominati “tab0”, “tab1” e così via…) se vuoi partire da 1 cambia i=1 nel ciclo for
for (i=0; i // al roll-over imposto il corrispondente elemento nella tabella Stato = true
this["tab"+i].onRollOver = function() {
ind = this._name.substr(3, 1);
stato[ind] = true;
}
Imposto al roll-out il corrispondente elemento nella tabella Stato = false
this["tab"+i].onRollOut = function() {
ind = this._name.substr(3, 1);
stato[ind] = false;
}
}
Questa funzione scandisce la tabella di stato è mi fornisce
- -1 qualora nessun clip sia in stato di roll-over
- n il numero del clip in stato di roll-over
testato = function() {
// preimposto il risultato a -1 (nessun roll-over)
risultato = -1;
for (i=0; i if (stato[i]) {
risultato = i;
}
}
return risultato;
}_root.onEnterFrame = function () {
// verifico lo stato delle schede
mousopra = testato();
if (mousopra != -1) {
//trace("il mouse è sopra un elemento");
for (z=0; z if (z <= mousopra) {
this["tab"+z].muovi(z*minima, 5);
} else {
this["tab"+z].muovi(z*minima+massima-minima, 5);
}
}
} else {
//trace("il mouse è fuori");
for (z=0; z this["tab"+z].muovi(z*media, 5);
}
}
}
Fonte [Paolo Savigni]
Scarica il sorgente
Guarda il Tutorial
Scarica i Files New Update!! (tabslider orizzontale/verticale)
Guarda il Tutorial New Update!! (tabslider orizzontale/verticale)
75 Commenti
Ciao leo se leggi attentamente l’articolo subito dopo l’immagine della galleria viene descritto passo passo cosa fare per aggiungere una nuova slide..
Chiedo scusa :-( avevo fatto tutto giusto, mi era sfuggito il dettaglio dell’aggiungere tanti “false” quante saranno le imamgini.
Chiedo scusa scusa scusa…(5 min. di vergogna!) :-D
Grazie Julius!
Ciao Julius, complimenti davvero, ottimo lavoro!
Non sono un profondo conoscitore di Flash, però vorrei creare uno slider largo 800 pixels composto da 4 foto larghe 400 l’una..ho provato a cambiare un po’ di varianti ma mi si sposta tutto a sinistra fuori dal filmato! Puoi aiutarmi?
Grazie!
ciao julius e grazie per i file sorgente.
mi servirebbe realizzare una tabslider che funga da menu, come questa, ma con 9 immagini. ho seguiuto le tue istruzioni, creando due nuovi movie clip come spieghi ed ho anche impostato lo stato
stato = new Array(false, false, false, false, false, false);
precisamente alla riga 4 , ma non succede nulla. le immagine nuove inserite rimangono ferme. (ho la versione 1 con le slide da dx verso sx)
Devo modificare qualcos’altro?
grazie in anticipo
Ragazzi nessuno è riuscito a farlo diventare un menù?
Julius, si potrebbe effettuare il caricamento dell’immagini da file esterno in xml.
Ti mando un link di una cosa simile ma molto bella:
http://www.fameid.com/menu/index.php?option=com_content&task=view&id=14&Itemid=15
dovrebbe essere freeware o mi sbaglio.
Ciao ciao alla prossima
Ciao a tutti,mi sto avvicinano ora alla creazione del mio sito web e subito devo fare i conti con Flash.Vorrei realizzare una sequenza di immagini che scorrono in continuazione al caricamento della pagina.Non conoscendo il software mi dareste una mano ??
Grazie
cosa me ne faccio di queste foto che scorrono se poi non le posso rendere cliccabili… l’autore ha più volte sorvolato su questo problema…
o avete già risolto?
@marco:
allora, in testa al codice aggiugi:
var links = new Array();
links[0] = [“http://www.*******.com”];
links[1] = [“http://www.*******.com”];
links[2] = [“http://www.*******.com”];
links[3] = [“http://www.*******.com”];
links[4] = [“http://www.*******.com”];
links[5] = [“http://www.*******.com”];
links[6] = [“http://www.*******.com”];
//tabti quanti sono i tuoi tasti ovviamente
// e poi aggiungi ai movieclip anche la fuonzione on release:
this[“tab”+i].url = links[i];
this[“tab”+i].onRelease = function() {
getURL(this.url, “_blank”);
}
testato e funzionante, fammi sapere!!!!
Salve Julius, innanzitutto auguri di buon anno (anche tutti i frequentatori del tuo blog).
Guardando nel web mi sono ritrovato a guardare questa tabslider gallery… Ho scaricato il sorgento, letto un po’ gli altri post, per vedere se c’era qualche nota da prendere, infine l’ho aperta ed ho iniziato a smanettarci… Orizzontale, verticale.,..da sx a dx… vabbò…tutto ok… Poi mi sono detto… e se caricasse da xml?? Ho iniziatoa lavorarci… Ma mi dava degli errori nella visualizzazione… allora sono tornato al progetto di partenza per vedere se l’errore era alla base o lo stavo creando io… Di quale problema sto parlando?? Semplice: dalla decima foto in poi lo slide non funziona più “tab1, tab2, tab3…tab9” ok… da tab10 non funge più?? Qualcuno sa perché??
Grazie Julius dell’attenzione e buon anno ancora a tutti!!
Grazie
@ alfonso
// e poi aggiungi ai movieclip anche la fuonzione on release:
this[“tab”+i].url = links[i];
this[“tab”+i].onRelease = function() {
getURL(this.url, “_blank”);
}
alfonso ritorno sul tabslider e vedo che qualcuno ha aggiunto un commento alla mia richiesta… nn sono molto esperto… ma il codice sopra dove lo incollo? mi spieghi meglio? grazie
julius help me!!! please….
alfonso dice di aggiungere ai movieclip la funzione on release:
this[“tab”+i].url = links[i];
this[“tab”+i].onRelease = function() {
getURL(this.url, “_blank”);
}
ma se inserisco questo codice nell’actionscript contenuto nel frame action mi ritorna un messaggio di errore, e lo stesso accade se lo assegno direttamente ai movieclip…
se non risolvo è inutile proseguire su questa via…
grazie infinite.
m.
Ciao, sicuramente ti è stato già chiesto: come adatto il codice per farlo funzionare sotto flash mx?
Grazie, anche in caso non dovessi avere la pazienza di aiutarmi. ;)
Ciao a tutti, io ho un problema con i collegamenti alle pagine.
Ho usato il codice che ha scritto @ alfonso ma quando metto i link, e ad ogni movieclip la funzione get URL, quando clicco su una immagine, mi apre tutti i collegamenti di tutte la immagini presenti nel mio slide, e non so come impedire questo. A me serve che ad un clic su una immagine linkata, mi apra solo quella e non tutte le altre insieme.
Spero di essere stato chiaro nella descrizione del mio problema, e spero che qualcuno mi aiuti perchè ne ho davvero bisogno, grazie.
Ciao Julius,
ho trovato molto interessante il tuo TabSlider. Avrei la necessità di caricare le foto da file xml, come posso fare? Non conosco molto flash e action script, puoi darmi una mano?
Ti posto il tuo codice modificato:
//
// Questa Tabella mi fornisce lo stato di roll-Over sulle schede
// che all’inizio è impostato su “False”
stato = new Array(false, false, false, false,false);
//
// calcolo porzioni visibili e posizione orizzontale
// la porzione “media” rappresenta la parte visibile quando nessuna scheda è in “roll-over”
// la porzione “minima” è la parte visibile delle altre schede quando una è in roll-over
// la porzione “massima” è, ovviamente, rappresentata dalla larghezza di ogni scheda
media = Stage.width / stato.length;
minima = (Stage.width – master._width) / (stato.length-1);
massima = master._width;
//trace(“queste le dimensioni: “+media+”/”+minima+”/”+massima);
//
//Leggi dati da file xml
leggiXml = function()
{
trace(“leggo file”);
var xml:XML = new XML();
xml.ignoreWhite = true;
fileXml=”http://www.miodominio.xx/flash/source.xml”
xml.load(fileXml);
xml.onLoad = function()
{
numOfItems = this.childNodes.length;
for(var i=0;i<numOfItems;i++)
{
var t = _root.master.duplicateMovieClip(“tab”+i, i);
t.name = “tab”+i;
t.idEnt=i;
//t._x=i*80;
//t.onEnterFrame=start;
t.percorso = this.childNodes[i].attributes.percorso;
//t.loadMovie(“http://www.miodominio.xx”+this.childNodes[i].attributes.photo);
t.onRelease = function()
{
getURL(this.percorso, “_self”);
}
}
// attivo i pulsanti delle schede (i clip sono nominati “tab0”, “tab1” e così via…)
for (i=0; i<stato.length; i++) {
// al roll-over imposto il corrispondente elemento nella tabella Stato = true
_root[“tab”+i].onRollOver = function() {
ind = this._name.substr(3, 1);
stato[ind] = true;
}
// al roll-out imposto il corrispondente elemento nella tabella Stato = false
_root[“tab”+i].onRollOut = function() {
ind = this._name.substr(3, 1);
stato[ind] = false;
}
}
}
}
leggiXml();
// prototipo per il movimento decelerato
//
MovieClip.prototype.muovi = function (traguardo, speed) {
//trace (this.idEnt);
this.arrivato = false;
this.onEnterFrame = function () {
this._x = (traguardo – this._x) / speed + this._x;
if (Math.abs(traguardo-this._x)<=0.5) {
this._x = traguardo;
this.arrivato = true;
delete this.onEnterFrame;
}
}
}
//
//
// Questa funzione scandisce la tabella di stato è mi fornisce
// -1 qualora nessun clip sia in stato di roll-over
// n il numero del clip in stato di roll-over
//
testato = function() {
// preimposto il risultato a -1 (nessun roll-over)
risultato = -1;
for (i=0; i<stato.length; i++) {
if (stato[i]) {
risultato = i;
}
}
return risultato;
}
//
_root.onEnterFrame = function() {
// verifico lo stato delle schede
mousopra = testato();
if (mousopra != -1) {
//trace(“il mouse è sopra un elemento”);
for (z=0; z<stato.length; z++) {
if (z <= mousopra) {
_root[“tab”+z].muovi(z*minima, 5);
} else {
_root[“tab”+z].muovi(z*minima+massima-minima, 5);
}
}
} else {
//trace(“il mouse è fuori”);
for (z=0; z<stato.length; z++) {
_root[“tab”+z].muovi(z*media, 5);
}
Ciao!
come già scritto in precedenza, avrei bisogno di caricare le foto da file xml, qualcuno può aiutarmi? Ne ho davvero bisogno… Posso anche inviarvi il mio file .fla via e-mail.
HELP ME!
Grazie
Ciao e complimenti per il sito STREPITOSO!!!
ho appena scoperto questo tabslider gallery, dovrei trasformare le immagini in bottoni, per inserirlo in un sito come menu.
come posso fare?
Premetto che non sò molto di flash!!!
grazie mille
ciao!
Una domanda forse strana: come posso fare ad escludere da ogni funzione l’ultima immagine a destra?
Deve rimanere ferma immobile priva di “sensi”…
grazie mille
Ciao Julius!
Grazie per tutto il ben di Dio che c’è sul sito!
Problema: quando il numero delle tab supera il numero di 9, la 10 e la 11 (ad esempio) non si aprono, rimangono sempre chiuse e aprono soltanto la tab1.
C’è un modo per risolvere l’errore?
Qualcuno che possa indicarmi la via?
Ciao a tutti,
come posso fare per inserire questa gallery in un movieclip? ho usato la funziona lockroot, la carica ma non rispetta la dimensione del mio movie, quindi una parte delle foto non si vede(sono 7 foto in tutto, le ultime 2 non si vedono).Se non la incorporo nel movie funziona regolarmente. Il problema e’ che non deve adattarsi allo stage, deve essere piu’ piccola…. Qualcuno sa aiutarmi?
Grazie in anticipo
grazie di cuore questo sito e’ sempre utilissimo.
per chi ha avuto problemi a far diventare i pulsanti anche onRelease posto il codice come l’ho modificato io. la soluzione non è delle migliori ma è il meglio che ho saputo fare :D. magari puo’ aiutare qualcuno.
ecco come ho risolto:
sul livello action
//
// Questa Tabella mi fornisce lo stato di roll-Over sulle schede
// che all’inizio è impostato su “False”
stato = new Array(false, false, false, false, false);
//
// calcolo porzioni visibili e posizione orizzontale
// la porzione “media” rappresenta la parte visibile quando nessuna scheda è in “roll-over”
// la porzione “minima” è la parte visibile delle altre schede quando una è in roll-over
// la porzione “massima” è, ovviamente, rappresentata dalla larghezza di ogni scheda
media = Stage.width / stato.length;
minima = (Stage.width – tab0._width) / (stato.length-1);
massima = tab0._width;
//trace(“queste le dimensioni: “+media+”/”+minima+”/”+massima);
//
// prototipo per il movimento decelerato
//
MovieClip.prototype.muovi = function (traguardo, speed) {
this.arrivato = false;
this.onEnterFrame = function () {
this._x = (traguardo – this._x) / speed + this._x;
if (Math.abs(traguardo-this._x)<=0.5) {
this._x = traguardo;
this.arrivato = true;
delete this.onEnterFrame;
}
}
}
//
// attivo i pulsanti delle schede (i clip sono nominati "tab0", "tab1" e così via…)
//
for (i=0; i<stato.length; i++) {
// al roll-over imposto il corrispondente elemento nella tabella Stato = true
this["tab"+i].onRollOver = function() {
ind = this._name.substr(3, 1);
stato[ind] = true;
}
// al roll-out imposto il corrispondente elemento nella tabella Stato = false
this["tab"+i].onRollOut = function() {
ind = this._name.substr(3, 1);
stato[ind] = false;
}
// questo è il pezzo di codice per l'onRelease aggiunto
this["tab"+i].onRelease = function() {
_root.bottone = ind
}
}
//
// Questa funzione scandisce la tabella di stato è mi fornisce
// -1 qualora nessun clip sia in stato di roll-over
// n il numero del clip in stato di roll-over
//
testato = function() {
// preimposto il risultato a -1 (nessun roll-over)
risultato = -1;
for (i=0; i<stato.length; i++) {
if (stato[i]) {
risultato = i;
}
}
return risultato;
}
//
_root.onEnterFrame = function () {
// verifico lo stato delle schede
mousopra = testato();
if (mousopra != -1) {
//trace("il mouse è sopra un elemento");
for (z=0; z<stato.length; z++) {
if (z <= mousopra) {
this["tab"+z].muovi(z*minima, 5);
} else {
this["tab"+z].muovi(z*minima+massima-minima, 5);
}
}
} else {
//trace("il mouse è fuori");
for (z=0; z<stato.length; z++) {
this["tab"+z].muovi(z*media, 5);
}
}
}
//
a questo punto bisogna aggiungere un controllore sulla _root
creo un MV vuoto sulla _root e gli associo la seguente azione:
onClipEvent (enterFrame) {
if (_root.bottone == 0) {
_root.gotoAndStop("about");
} else if (_root.bottone == 1) {
_root.gotoAndStop("design");
} else if (_root.bottone == 2) {
_root.gotoAndStop("gallery");
} else if (_root.bottone == 3) {
_root.gotoAndStop("press");
} else if (_root.bottone == 4) {
_root.gotoAndStop("contact");
}
}
ripeto la soluzione e' un po' spartana ma funziona. ciao e grazie del codice
ciao julius, intanto grazie per questo tutorial, era proprio quello di cui avevo bisogno.
ripropongo una questione gia` citata piu` su da “cinetico” ma rimasta senza una risposta.
ho inserito altre immagini e fin qui tutto ok, ma quando vado a inserire il tab10 non funziona piu`. Come si fa? cosa viene dopo tab9?
e poi: posso inserire dei pulsanti sulle singole immagini per trasformare la galleria in un menu? Io ci ho provato ma mi si annulla tutta la fisarmonica!
Grazie in anticipo, confido in una tua risposta!
Marianna
@ Rob:
Ciao Rob io ho riscontrato il tuo stesso problema, tu sei riuscito a risolvere?
Marianna
ciao jiulius ho ho creato la mia gallery e il file swf funziona però quando voglio collegarla dalla home non funziona ovvero mi apre la pagina gallery ma nn carica la slide gallery come mai??
sul pulsante GALLERY nella home ho inserito l’a.s.
on(release){
_root.box.loadMovie(“gallery.swf”);
}