Dalla lezione 21 alla lezione 24 abbiamo visto come sia possibile avviare automaticamente un movimento, grazie agli interpolatori, e poi lasciare che l'utente vari alcune delle proprietà dell'interpolatore stesso.
Per esempio, possiamo avviare un'animazione di rotazione e dare all'utente la possibilità di fermarla e riavviarla tramite click del mouse, cambiando l'asse di rotazione in base ai movimenti del mouse intorno all'oggetto.
Invece di utilizzare il comando Transform3D per la rotazione, andiamo a usare un RotationInterpolator che conterrà due oggetti (un cubo e una piramide):
Listato 67. Usa RotationInterpolator per far ruotare, continuamente, un cubo e una piramide
var ease:Ease = new Ease();
rotint = new RotationInterpolator( ease.create(), 400 );
rotint.addEventListener( InterpolationEvent.onEndEVENT, this, loop );
tg1.addChild( cube );
tg1.addChild( tg2 );
tg1.setTransform( rotint );
bg.addChild( tg1 );
return bg;
Per ottenere una rotazione continuativa, sfruttiamo l'evento onEndEVENT (che l'interpolatore crea automaticamente) che, come possiamo vedere nel codice appena descritto, si occupa di richiamare la funzione loop, il cui codice è semplicemente:
Listato 68. Crea una funzione di loop
function loop(e:InterpolationEvent):Void{
e.getTarget().redo();
}
La funzione richiama il comando redo() dell'interpolatore, che si occupa di ripetere la rotazione.
Al click del mouse, invece, vogliamo fermare (o riavviare) l'interpolazione: possiamo farlo grazie al gestore di eventi onMouseDown:
Listato 69. Imposta i comandi in base agli eventi del mouse
onMouseDown = function() {
if ( active ){
rotint.pause();
}
else {
rotint.resume();
}
active = !active;
};
Sfruttando la variabile di controllo di nome active, la funzione gestisce arresto e avvio della rotazione.
L'ultima interazione che facciamo fare all'utente è il cambiamento dell'asse di rotazione, che possiamo gestire grazie a questa funzione associata all'evento onRenderEVENT:
Listato 70. Funzione per il cambiamento dell'asse di rotazione
function rotate() {
if ( active ) {
rotint.setAxisOfRotation( new Vector(_ymouse - midY, midX -_xmouse, 20 ));
}
}
Se la variabile active è impostata su true (e quindi la rotazione è in esecuzione), viene impostato un nuovo asse di rotazione per gli oggetti, calcolato in base alla distanza del mouse dall'origine del sistema di coordinate.
Il risultato è il seguente:
Cubo e piramide ruotano in base alla posizione del mouse
Questo tipo di controllo, risulta meno intuitivo di quello con la tastiera e può richiedere alcune prove in più per essere facilmente gestito dall'utente.
Quando il mouse è vicino al centro della scena, i valori x e y risultano molto bassi e di conseguenza basta poco perchè l'asse di rotazione venga invertito.
Nel codice abbiamo anche usato un valore predefinito per l'asse z, in modo da evitare una situazione con tutti gli assi a 0, che avrebbe causato un asse di rotazione non definito per gli oggetti.
"© Petit Publications 2006" - diritti riservati
