• Web Design » Flash » Tutorial Action Script

Come posso far muovere un oggetto da un punto all'altro,facendo iun modo che deceleri gradatamente man mano che siavvicina al punto finale?"
Questo effetto è chiamato Easing, ed piuttostosemplice da implementare una volta capito il funzionamento.

L'easing viene usato solitamente per ricreare effetti dimovimento realistici.
L'easing è fondamentalmente una formula sempliceche può essere modificata per ottenere l'effettodesiderato.
Una volta compresa, questa formula può essere usatanon solo per il movimento ma può essere implementataanche per la rotazione, la scala di un oggetto, l'_alphao anche per cambiare il colore di un movieclip.
In pratica in ogni situazione dove vorrete che qualcosacambi gradatamente fino al suo stato finale.

Diamo un'occhiata alla fisica che verrà applicata.

Siete in un dato punto e volete fermarvi in un altro punto.

Come prima cosa facciamolo con un solo salto.
Creeremo un oggetto e una situazione che andremo ad usareper tutta la durata del tutorial.
Create una forma a vostra scelta, convertitela in unmovieclip e dategli le seguenti action:

onClipEvent(load){_x=0;_y=0;}onClipEvent(mouseDown){targetx=_root._xmouse;targety=_root._ymouse;}onClipEvent(enterFrame){_x=targetx;_y=targety;}

Questo è quello che farà:
1. Prima di tutto si posizionerà a coordinate0,0.
2. Quando verrà premuto il mouse, le coordinate delmouse verranno registrate in targetx etargety.
3. Il movieclip cambierà le proprie coordinate contargetx e targety

Ora, facciamo il primo easing.

Questa è la teoria:

1. sappiamo dove siamo.
2. sappiamo dove vogliamo andare.
3. possiamo calcolare la distanza tra i due punti.
4. ci muoviamo esattamente fino alla metà delladistanza tra i due punti.
5. dalla nostra nuova posizione....

1. sappiamo ancora dove siamo.
2. il punto dove dobbiamo arrivare è ancora lostesso.
3. siamo in grado di calcolare la nuova distanza.
4. ci spostiamo esattamente alla metà della nuovadistanza.
5. di nuovo dal punto 1.

Ogni volta che eseguiamo il loop, andremo a muoverci sempremeno.
Quindi inizieremo col muoverci velocemente e poi, man mano,diminuiremo il movimento, rallentando fino ad arrivare alpunto finale.
A livello teorico, noi non arriveremo mai al punto finaleperchè ogni volta che ci muoveremo ci sposteremosempre della metà della distanza che manca dal punto,senza mai raggiungerlo.
Ma quandosiamo a 1/100 di pixel dal punto di destinazione, possiamotranquillamente dichiarare di essere arrivati!

Quindi, traducendo il tutto in action script, per prima cosafaremo per ogni calcolo una linea di codice separata,più avanti darò la formula finale che potreteimparare a memoria per usarla quando serve.
Per maggior semplicità, inizieremo solo con lospostamento sulla _x.
Poi avremo solo da aggiungere le stesse linee di codicecambiando _x con _y.

Ecco qua:

onClipEvent(load){_x=0;_y=200;}onClipEvent(mouseDown){targetx=_root._xmouse;}onClipEvent(enterFrame){distx=targetx-_x;movex=distx/2;_x+=movex;}

L'operatore += è l'operatore somma eriassegna.
Prende la variabile, addiziona il valore e riassegna ilrisultato alla variabile.
Per esempio: _x+=movimento è lastessa cosa di _x= _x+movimento

Traducendo la teoria di prima:

1. dove siamo noi è _x
2. dove vogliamo arrivare ètargetx
3. la distanza da percorrere ètargetx-_x o distx
4. la metà della distanza da percorrere èdistx/2 che assegnamo amovex e poi addizioniamo a _x:_x+=movex
5. il prossimo frame riporta al punto 1

Testatelo.
Ora quando premete il mouse l'oggetto non appare dicolpo sotto il mouse ma si avvicina gradatamente.
Ovviamente per ora si muove solo orizzontalmentepoichè non abbiamo aggiunto il calcolo per le_y.
Prima di farlo, comprimiamo il codice e sbarazziamoci dellevariabili in eccesso.

Sicuramente potrete capire da soli i cambiamenti:

onClipEvent(load){_x=0;_y=200;}onClipEvent(mouseDown){targetx=_root._xmouse;}onClipEvent(enterFrame){_x+=(targetx-_x)/2;}

Ora, in una sola linea di action,_x+=(targetx-_x)/2; , noi calcoliamo ladistanza, la dividiamo di 2 e la addizioniamo a _x.

Ora possiamo aggiungere il calcolo per le_y.
Non dimenticate targety nel primo blocco dicodice:

onClipEvent(load){_x=0;_y=0;}onClipEvent(mouseDown){targetx=_root._xmouse;targety=_root._ymouse;}onClipEvent(enterFrame){_x+=(targetx-_x)/2;_y+=(targety-_y)/2;}

Noterete che ora l'oggetto si ferma esattamente doveavete cliccato col mouse.
Abbastanza preciso, ma non è ancora finita.

Questo è il codice finale che useremo:

onClipEvent(load){_x=0;_y=0;speed=2;}onClipEvent(mouseDown){targetx=_root._xmouse;targety=_root._ymouse;}onClipEvent(enterFrame){_x+=(targetx-_x)/speed;_y+=(targety-_y)/speed;}

Ora, la cosa più ovvia è giocare un po' conla variabile speed.
Se le date come valore 1 vedrete che il movimentosarà lo stesso della prima formula, l'oggetto sisposterà istantaneamente dove avete cliccato.
Più alto sarà il valore della variabilepiù lento sarà il movimento fino al puntofinale.

Se mettiamo speed=10 , l'oggettopercorrerà solo un decimo alla volta della distanzaeffettiva da percorrere, poi ancora 1/10della distanza rimanente e così via, quindi cimetterà molto più tempo ad arrivare adestinazione.
Potete provare voi a modificare la velocità pertrovare l'effetto desiderato.
Provate a settare speed con un valore decimale tra 0.5 e 1.0.
Io ho provato che 0.6 dà un effetto moltointeressante, crea un movimento con rimbalzo elastico moltocarino.
Se dividete per un numero minore di 1 l'oggetto simuoverà di più della distanza effettiva,superando il punto finale e poi tornando indietro,risuperando il punto di destinazione, ma stavolta non ditanto quanto prima, avvicinandosi sempre di più fino ache sarà virtualmente fermo.

Attualmente ci sono molte formule più complesse chepossono essere usate, basate su differenti funzionimatematiche, ma penso che questa, che è anche lapiù semplice, possa coprire il 99% dei casi.
Come l'avete usata per il movimento, provate ora adimplementarla con altre proprietà dei movieclips:_rotation, _alpha, scale ecc..

Per finire ecco la formula generica che potrete facilmentememorizzare:

PassoSuccessivo=(DoveVoleteArrivare-DoveSieteAdesso)/Velocità;

Che di solito si traduce in:

proprietà=(target-proprietà)/velocità;