TabSlider - Galleria foto scorrevole

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)

Letture Consigliate per Design

Articoli simili


Autore:

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.