Versione corrente : 2008.11.14
|
ATTENZIONE!!! pare che in swishmax (1 e 2) non funzioni correttamente il < (mentre il <= funziona perfettamente) /////////// ELASTIC EASING: exponentially decaying sine wave //////////////
// t: current time, b: beginning value, c: change in value, d: duration, a: amplitude (optional), p: period (optional) // t and d can be in frames or seconds/milliseconds Math.easeInElastic = function (t, b, c, d, a, p) { if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a <= Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }; Math.easeOutElastic = function (t, b, c, d, a, p) { if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a <= Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; }; Math.easeInOutElastic = function (t, b, c, d, a, p) { if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (a <= Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; }; |
Ecco un esempio pratico di come possano essere sfruttate le famosissime easing_eqations di Robert Penner .
Le 31 equazioni di Penner sono decisamente affascinanti. Si riescono ad ottenere effetti piacevoli con poco sforzo.
Per renderne più agevole l'utilizzo, mi ero già preparato un prototype circa un anno e mezzo fa, adesso ho deciso di riprenderlo e di rivederlo con delle piccole aggiunte.
Il Progetto iniziale prevedeva anche l'utilizzo di array di movimenti (per poter predisporre lunghe liste di movimenti consequenziali), ma in questa versione ho deciso di scindere le due cose per renderne più semplice ed immediato l'utilizzo. Per questo motivo sono stati creati due prototype, il primo per la gestione di singoli movimenti (o movimenti simultanei) ed il secondo per la gestione di movimenti consequenziali definiti in un array.
Per l'installazione dovete scaricare la versione per actionscript 1 dal sito di Penner e metterla, insieme al file Pak_easing.as (che potete scaricare dall'icona download in alto), nella cartella includes di swishmax 2.
Se volete utilizzarla con swishmax 1 basterà copiare tutti gli script (sia le easing di Penner che il codice di Pak_easing.as) nel pannello script. Io la prima versione la usavo con swishmax1, quindi anche questa funzionerà perfettamente.
Ho testato il proto con esportazione in swishmax 2 a partire da swf6 con il flag solo in compressione, e non ho riscontrato alcuna anomalia.
Per la licenza fate riferimento a quella inclusa nel file.
****************************************************
****************************************************
prototype MovieClip.muovi
(Per spostamenti singoli o simultanei)
****************************************************
****************************************************
utilizzo:
****************************************************
my_movieclip.muovi(sleep,effect,x,y,xscale,yscale,rotation,alpha,d,azione,parametri){
sleep = valore dei frame di attesa prima dell'inizio del movimento
effect= numero da 0 a 30 indicante il tipo di effetto (formula di Penner) da applicare al movimento
x = valore x da raggiungere
y = valore y da raggiungere
xscale = valore di scala x da raggiungere
yscale = valore di scala y da raggiungere
rotation = valore di rotazione da raggiungere
alpha = valore alpha da raggiungere
d= velocità del movimento in frame(default 25)
azione = nome funzione da richiamare es. "my_movieclip.my_function" la funzione sarà richiamata alla fine del movimento
parametri=parametri da passare alla funzione. In caso di più parametri da passare bisogna inserirli in un array e processare l'array all'interno della funzione stessa
****************************************************
esempi di utilizzo:
****************************************************
1) con funzione ed array di parametri:
****************************************************
function my_function(my_array){
pippo=my_array[0];
ciccio=my_array[1];
trace ("my_function eseguita " + pippo + " " + ciccio);
}
onSelfEvent (load) {
include "Pak_easing.as";
my_parameters=new Array("testo pippo","testo ciccio"); // parametri da passare alla funzione
my_movieclip.muovi(0,1,1,100,100,100,1,80,22,"my_function",my_parameters);
}
****************************************************
2) con funzione e passaggio di un solo parametro
****************************************************
function my_function(my_value){
trace ("my_function eseguita " + my_value);
}
onSelfEvent (load) {
include "Pak_easing.as";
my_movieclip.muovi(0,1,1,100,100,100,1,80,22,"my_function","testo di prova");
}
****************************************************
3) senza funzione e con solo movimento x con ritardo di 10 frame
****************************************************
onSelfEvent (load) {
include "Pak_easing.as";
my_movieclip.muovi(10,1,1);
}
****************************************************
4) senza funzione e con solo movimento y con ritardo di 10 frame
****************************************************
onSelfEvent (load) {
include "Pak_easing.as";
n=undefined;
my_movieclip.muovi(10,1,n,1);
}
****************************************************
5) senza funzione e con solo rotazione senza ritardo
****************************************************
onSelfEvent (load) {
include "Pak_easing.as";
n=undefined;
my_movieclip.muovi(0,1,n,n,n,n,180);
}
****************************************************
****************************************************
prototype MovieClip.muoviar
(per spostamenti in sequenza mediante array di movimenti)
****************************************************
****************************************************
utilizzo:
****************************************************
l'unico parametro da passare al prototype è un array al cui interno vanno inseriti tutti i dati relativi ai movimenti ed all'eventuale esecuzione di funzioni. I movimenti saranno esequiti in sequenza (finito il primo inizia il secondo e così via).
La struttura dell'array da passare al prototype è la seguente:
movarr=new Array(
{obj: target dell'oggetto da spostare ,
sleep: valore in frame di attesa prima dell'inizio del movimento ,
effect: numero da 0 a 30 indicante il tipo di effetto (formula di Penner) da
applicare al movimento ,
x: valore x da raggiungere ,
y: valore y da raggiungere ,
xscale: valore di scala x da raggiungere ,
yscale: valore di scala y da raggiungere ,
rotation: valore di rotazione da raggiungere ,
alpha: valore alpha da raggiungere ,
d: durata del movimento ,
azione: nome funzione da richiamare es. "my_movieclip.my_function" la funzione sarà richiamata alla fine del movimento ,
parametri: parametri da passare alla funzione. In caso di più parametri da passare bisogna inserirli in un array e processare l'array all'interno della funzione stessa
});
Non tutti i valori vanno impostati necessariamente, se ad esempio si omette di indicare
il valore di spostamento sull'asse x, semplicemente non sarà effettuato nessuno spostamento
su quell'asse. L'unico valore assolutamente necessario è obj (l'oggetto da spostare).
Per richiamare il prototype basterà quindi solo un semplice
my_movieclip.muoviar(movarr);
****************************************************
esempi di utilizzo:
****************************************************
1) due movimenti, il primo con esecuzione di funzione
****************************************************
function my_function(my_array){
pippo=my_array[0];
ciccio=my_array[1];
trace ("my_function eseguita " + pippo + " " + ciccio);
}
onSelfEvent (load) {
include "Pak_easing.as";
my_parameters=new Array("testo pippo","testo ciccio"); // parametri da passare alla funzione
movarr= new Array(
{obj:my_movieclip,sleep:10,effect:29,x:10,y:10,xscale:90,yscale:90,rotation:20, alpha:80,d:40,azione:"my_function",parametri:my_parameters},
{obj:my_movieclip,effect:29,x:200,y:200});
my_movieclip.muoviar(movarr);
}
****************************************************
2) tre movimenti semplici
****************************************************
onSelfEvent (load) {
include "Pak_easing.as";
movarr= new Array(
{obj:my_movieclip,x:10,y:10},
{obj:my_movieclip,sleep:10,effect:29,xscale:90,yscale:90, rotation:20,alpha:80,d:40},
{obj:my_movieclip,effect:29,x:200,y:200});
my_movieclip.muoviar(movarr);
}
Il codice lo potete scaricare dall'icona in alto oppure da qui.
La licenza è completamente freeware, non è però possibile rimuovere i riferimenti all'autore dello script.
Per la licenza completa ed altre info fare riferimento sempre al file Pak_easing.as