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)

Author

Sono un Creative Strategist con più di 10 anni di esperienza in strategie digitali. Il mio ruolo di Stratega consiste nell’ideare e sviluppare concept creativi per progetti multicanale, individuando le attivazioni e dinamiche di Marketing da applicare attraverso un approccio strategico.

75 Commenti

  1. Ciao Julius,
    grazie per aver inserito il link al mio garage e complimenti per il tuo Blog. Per quanto riguarda lo “slider”, posso aggiungere che, per renderlo ancor più personalizzabile e fruibile anche da chi non mastica molto Flash, si potrebbe aggiungere l’acquisizione, da fonte esterna, dell’elenco delle immagini da visualizzare.
    Ciao

    Paolo

  2. Ciao Paolo,

    Il rendere personalizzabile lo slider anche per i meno esperti in flash mi sembra un ottima idea…
    Se percaso implementi questa idea, non esitare a informarmi, qui ce sempre posto per altre versioni :P

    Grazie per i complimenti e per la visita :)

  3. Francesco

    ciao ragazzi,
    trovo questo esempio molto interessante e mi chiedevo se è possibile aggiungere una semplice modifica. Viste le mie conoscenze limitate di AS vi chiedo un aiuto.

    Come si può fare in modo che selezionando una scheda ( onRelease ) questa rimanga visibile a porzione massima finche non clicco sopra un’altra scheda?

    Ho provato aggiungendo la condizione di onRelease che imposta il corrispondente elemento nella tabella Stato = true, però c’è sempre il rollOut che mi riporta la tabella Stato = false.

    Spero di essere stato chiaro e spero di ricevere qualche vostro suggerimento.
    Un saluto e un ringraziamento a Julius (da poco ho scoperto il tuo Blog!) e a Paolo.

  4. ::sämyii::

    ……mammamia…….ma il tuo è strafavoloso!!!!!
    ormai ho preso dipendenza, per fortuna che ci aiuti un pochino tu >_^!

    Ho provato a fare questo tabslider di immagini…..l’effetto è bellissimo!!!
    Vorrei chiedere soltanto una cosa….se io volessi mettere un pulsante su ogni foto,( per far caricare così un swf su un altro livello)??? Ho provato ad inserire il pulsante sulla movieclip di ogni immagine….ma proprio non me lo vede….(sarà colpa dell rollover/dragover ?_?…..? ) proprio non so -_-…….
    Mi aiutate, please????*_*
    grazie grazie 1000

  5. Raffaele

    Ho la necessità di creare delle immagini che scorrono a destra e sinistra premendo le rispettive frecce. Le immagini saranno presenti in un rettangolo e ne saranno visibili 3.Inoltre l’immagine centrale sarà a colori e un pò più grande, mentre quelle laterali saranno più piccole ed in bianco e nero.Clickando sulle frecce l’immagine più piccola ed in bianco e nero si sposta al centro ed il suo posto sarà preso da un’altra immagine. Spero di non aver creato troppa confusione nello scrivere e spero che tu mi possa aiutare in qualche modo. P.S. ho cominciato con Flash da poco e non so ancora muovermi bene nel programma, ma ho proprio la necessità di fare questa cosa per un esame.

  6. @Francesco ciao si dovrebbe cambiare qualcosina nel codice e spero che paolo, l’utore, ci possa dare una mano per risolbere in breve tempo.

    @sämyii ciao penso che il tuo ragionamento sia corretto, mettendo un pulsante all’interno dei clip, non vengono presi in considerazione visto che gli stessi clip hanno azioni di tipo pulsante…magari paolo sa illuminarci staremo a vedere… saluti

    @Raffaele ciao il tuo progetto non lo vedo molto a che fare con questo tipo di slide, comunque..

    Ti posso dire che in flah non è possibile trattare un immagine e renderla in bianco e nero, ma potresti provare a inserire delle maschere o oggetti sopra le immagine laterali al fine di scurirle oppure dargli qualche altro effetto.

    A questo punto le immagini si muoveranno e le maschere o gli oggetti faranno la loro parte…

  7. Raffaele

    Grazie mille Julius, ti chiedo scusa se ho postato in una sezione sbagliata.Ho fatto come mi hai suggerito ed ho reso l’immagine opaca tramite un simbolo grafico bianco con una mappa alpha (a dire il vero è molto più bella di come avevo immaginato).
    Ora ho un problema però, scorrendo a destra e sinistra le immagini arrivo al punto in cui la movie clip creata in precedenza non ha più immagini e quindi contnuo a scorrere senza avere nulla.Sapresti dirmi come fare a bloccare la movieclip una volta arrivati alla fine delle immagini?

  8. Allora dipende come hai strutturato il progetto.

    Lo scorrimento come l’hai pensato? Incremeti e decrementi il valore dell clip con le immagini oppure hai realizzato dei movimenti senza animazione??

    Comunque potresti adoperare delle variabili che ti informano quando hai finito e quando inizi oppure inserire un piccolo controllo della posizione del clip contenitore delle immagini

    del tipo se il valore della x del contenitore è maggiore di 3000, mi disabiliti il tasto oppure mi blocchi il clip a quella coordinata.

  9. Raffaele

    ti spiego…ho creato delle movieclip contenenti le varie immagini, una movieclip ogni immagine. Ho fatto una nuova movieclip nella quale ho inserito tutte le movieclip-immagini affiancate. A questa movieclip ho assegnato il seguente codice:

    onClipEvent (load) {
    fine = _x;
    frame = 20;
    }
    onClipEvent (enterFrame) {
    inizio = _x;
    spostamento = (fine-inizio)/frame;
    _x += spostamento;
    }
    //al caricamento del movieclip
    onClipEvent (load) {
    //setta come posizione iniziale quella attuale
    fine = _x;
    //setta la variabile “fine” come 20
    frame = 20;
    }
    //ad ogni riproduzione del movieclip
    onClipEvent (enterFrame) {
    //considera come inizio la posizione attuale del movieclip
    inizio = _x;
    //valuta come “spostamento” il valore di fine-inizio
    //fratto frame (valore sempre minore)
    spostamento = (fine-inizio)/frame;
    //somma al valore della _x del movieclip, quello di spostamento
    _x += spostamento;
    }

    ed ai rispettivi pulsanti questo (riporto solo il codice di uno dei pulsanti):

    onClipEvent (mouseDown) {
    if(this.hitTest(_root._xmouse,_root._ymouse,false)){
    _parent.scorrimento.fine += 161;
    }
    }

    quindi con questo codice dico al pulsante di spostare, ogni volta che clicco, la movieclip di 161.

    disabilitare il tasto sarebbe ottimo, ma non so proprio come fare…In ogni caso, una qualsiasi delle alternative che mi hai proposto mi andrebbe bene.

    Puoi spiegarmi dettagliatamente che devo fare? se devo usare altri codici o semplicemente come faccio a far sparire il pulsante una volta che la movieclip è arrivata al punto finale…
    scusa il disturbo, ma sei l’unica persona a cui posso rivolgermi per trovare una risposta a questo mio problema

  10. Ma veramente ti basterebbe questo codice sul pulsante
    nel mio caso ovviamente i numeri sono diversi…
    Avanti
    on (release) {
    main._x = main._x-171;
    if (main._x

    Indietro

    on (release) {
    main._x = main._x+171;
    if (main._x>202) {
    main._x = 202;
    }
    trace(main._x);
    }

    Un esempio veloce:
    Scarica il sorgente
    Guarda l’esempio

  11. Raffaele

    Grazie mille per i file, però purtoppo non coincidono con quanto fatto da me.
    La mia necessità è di avere le immagini che cambiano con un movimento e fin quì ci sono riuscito. Ho letto come fare da degli appunti che mi sono stati passati.Guardando bene dice di settare nel primo frame della timeline principale: i=1 e poi aggiungere altri codici al pulsante.

    Non sono riuscito a settare i=1 nella timeline. Sai per caso come si fà?
    io non so neanche cosa intende per “i” …

  12. Ciao ho flash mx 2004 versione 7.2 e non riesco ad aprire il sorgente.
    Come posso fare per aprirlo?

  13. Ciao Nevsky, questo progetto è stato svuluppato con Flash 8, penso che adattarlo a una versione precedente potrebbe interferire nel suo funzionamento…

  14. Ciao Julius! Intanto complimenti per il tuo blog e la tua completezza! Sei molto professionale! Ora una cosa, stavo provando ad utilizzare il tuo tutorial richiamato da un swf che lo chiama in _root.carica, ma non va! Perchè? Ho provato a vedere se era una questione di percorsi inserendo il mc che chiama la tua gallery nei percorsi che ho trovato ma non funziona! Come mai? Intanto grazie in anticipo!

  15. Ciao zioCiro :)

    Caricalo in questo modo

    //carico il tabslider in un clip di nome istanza carica
    loadMovie("tabslider.swf", _root.carica);
    //Imposto la root del filmato caricato, bloccando quella del contenitore
    _root.carica._lockroot = true;

    Saluti

  16. scusa julius, ero in ferie e al rientro ho perso di vista un po’ di cose!!!! grazie intanto x la risposta, appena “riordino” le idee provo sicuramente… intanto grazie e complimenti x il tuo lavoro…

  17. Ho dato 1 occhiata e ho visto che in realtà la chiamata degli swf ce l’ho da un xml così strutturato:

    (che poi è il tuo bel tutorial del menù rotatorio!).
    Come posso inserire il lockroot? Ho provato a mettere solo quello direttamente nel mio fla dove c’è il menù, ma come pensavo non va…

  18. Funziona! Mi ha fatto un po’ impazzire perchè in realtà facevo riscaricare nello stesso mc con unload un filmato sulla home, e quindi caricava e istantaneamente scaricava il tabslider… grazie 1000 Julius!!!

  19. Ciao julius,
    grande tab slider….
    ho notato però che se inserisco un btn nel movieclip (es tab1) non si attiva.

    Forse perchè vede tutto il clip come area sensibile?

    Grazie

  20. Ho anche disattivato il cursore in questo modo
    tab1.useHandCursor = false;
    tab2.useHandCursor = false;
    tab3.useHandCursor = false;

  21. Ok grazie mille!!!
    CMQ ho provato anche con

    /*if (this.hitTest (_root._x, _root._y)){
    [“tab”+i]ind = this._name.substr(3, 1);
    stato[ind] = true;

    }else{
    ind = this._name.substr(3, 1);
    stato[ind] = false;
    }
    */

    Forse come base ???

  22. ciao Julius
    parto ringraziandoti di già per tutto questo tuo blog utilissimo e pieno di spunti!
    ed ora il problema: ho provato ad utilizzare questa tabslider caricandola in un filmato principale…solo che nn riesco a farle occupare una porzione di pagina , si espande in pratica per tutta la larghezza. Come devo fare a darle “le misure entro cui stare?
    come avrai capito dalla domanda nn sono molto esperta di flash…
    :-)

    grazie ancora

  23. Ciao Laura,

    grazie per i complimenti

    in che senso si espande per tutta la larghezza?
    Una volta caricato il TabSlider quando passerai sopra ovviamente si allargherà

    Se invece vuoi visualizzare solo una porzione prova ad utilizzare le maschere in questo modo farai visualzzare solo ciò che vuoi…

  24. ahi, forse mi sono spiegata male …
    il tab slider dovrebbe stare dentro una porzione di pagina 677×518 a sinistra del mio filmato principale. Quando lo carico invece (con loadMovieNum) si “spalma “per tutta la larghezza del filmato principale ovvero 1024, anche se quando lo pubblico dal file d’origine è giustamente 677×518.

    grazie anche della pazienza

  25. prova a caricarlo in un clip contenitore…

    in questo modo

    crea un clip

    INSERISCI >> NUOVO SIMBOLO >> CLIP FILMATO >>

    ora sei nel clip, ritorna sullo stage, apri la libreria [CTRL+L] seleziona il clip appena inserito e trascinalo sullo stage

    a questo punto assegna il nome istanza al clip ugulae a box (la trovi nel pannelo proprietà del clip)

    A questo punto sul fotogramma o su un pulsante se lo usi:

    loadMovie("tabslider.swf",_root.box);
    _root.box._lockroot=true;

  26. :-( fa lo stesso difetto di prima … nn rimane largo come l’swf di partenza ma si adatta a tutta la larghezza del filmato….

  27. Julius complimenti per il tuo blog
    Come faccio ad aggiungere altri tab ?
    ti prego rispondimi il prima possibile!

  28. Ciao Julius, complimenti per il blog, molto utile e chiaro…
    Mi potresti dire come faccio per far partire in automatico il tabslider senza piggiare nei bottoni in basso a dx?

    Ti ringrazio in anticipo.

  29. a dir la verità anche in quello che mi hai mandato tu lo vedevo espanso a tutta la pagina…ti avevo rimandato una mail….nn l’hai vista?poco prima che ti ammalassi!

  30. a dir la verità adesso ho ricontrollato meglio…
    in pratica:mi avevi dato un consiglio ma nn funzionava, poi ti avevo spedito il file e mi avevi aggiunto una maschera!
    eh…ci avevo provato anch’io ma la prima immagine a destra nn si riesce a visualizzare(quella del tronco), e la seconda si vede solo in parte… in pratica la maschera nn contiene l’swf, ma ne fa vedere solo
    una parte…

    se tu apri l’swf tabslider da solo è diverso…
    accidenti non pensavo fosse una cosa così complicata…. :-P

    spero che ci riusciamo prima o poi!!

  31. Mai arrendersi…

    allora oltre alla maschera che ho messo io…

    Vai in tabslider e sostituisci Stage.width con 677

    saluti

  32. G R A A A Z Z Z I E ! !
    ce l’abbiamo fatta!!
    Lo sapevo che alla fine era una stupidaggine!!

    ciao ciao…alla prossima! :)

  33. Ciao, ti disturbo perchè sto impazzendo per cercare un modo per richiamare 4/5 foto da un xml ma non trovo modo di farlo funzionare, seguendo il lavoro che hai fatto tu è possibile richiamare le foto da un xml??

    Ciao e grazie!

  34. Ciao Julius, ho recentemente scoperto il tuo sito…è una miniera! :-)
    Ho il problema più banale del mondo…non riesco a far funzionare più delle 4 foto di esempio, ho aggiunto i livelli opportuni, messo i nomi alle istanze (tab4, tab5, etc.) ma quando provo il filmato mi vede sempre e solo le prime 4 dove sbaglio?? Dallo script mi sembra tutto a posto dovrebbe rilevarle da solo..e invece! :-(
    Un aiutino? please

Commenti