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 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
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 :)
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.
……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
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.
@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…
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?
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.
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
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
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” …
Ciao Julius,
sono riuscito a trovare un ritaglio di tempo per fare una versione di Tabslide che scorre sia orizzontalmente che verticalmente, sia in un senso che nell’altro.
Lo puoi trovare sempre nel mio garage
http://digilander.libero.it/pasavign/media/flash-garage.htm
Di nuovo ciao,
Paolo
Bel lavoro, come sempre…ho citato le implementazioni nell’articolo!
saluti
Ciao ho flash mx 2004 versione 7.2 e non riesco ad aprire il sorgente.
Come posso fare per aprirlo?
Ciao Nevsky, questo progetto è stato svuluppato con Flash 8, penso che adattarlo a una versione precedente potrebbe interferire nel suo funzionamento…
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!
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
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…
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…
Ciao l’XML non lo vedo se vuoi inviami una mail cosi capisco meglio
saluti
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!!!
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
si pixel…
Come potrei fare per evitare tutto questo?
Ho anche disattivato il cursore in questo modo
tab1.useHandCursor = false;
tab2.useHandCursor = false;
tab3.useHandCursor = false;
Cosi facendo non potrai inserire un pulsante all’interno in quanto disabiliti l’intero clip…
Lo so.
Forse lo dovrei fare solo all’interno del Clip??
Help me!!
bigJulius
Appena posso faccio delle prove..ti faccio sapere
ciao
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 ???
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
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…
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
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;
:-( fa lo stesso difetto di prima … nn rimane largo come l’swf di partenza ma si adatta a tutta la larghezza del filmato….
Mandami i files alla mia casella di posta che ci do uno sguardo appena posso…
wow…grazie 1000
:-( sedotta e abbandonata …
Julius complimenti per il tuo blog
Come faccio ad aggiungere altri tab ?
ti prego rispondimi il prima possibile!
risolto, sono un cretino non avevo letto sopra grazie lo stesso
@laura non avevamo risolto? Ti avevo mandato una mail con la soluzione…
@Paolo :)
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.
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!
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!!
rinuncio?
Mai arrendersi…
allora oltre alla maschera che ho messo io…
Vai in tabslider e sostituisci Stage.width con 677
saluti
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! :)
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!
Possibile è possibile ma è da cambiare la logica di caricamento immagini
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