Facciamo una prima prova analizzando come far ruotare degli oggetti usando il mouse. Abbiamo già visto un esempio di questo tipo di interazione nella lezione “Luci e filtri”, dove abbiamo analizzato una skin trasparente.

Per il nostro esempio useremo un cubo e una piramide, con il seguente codice:

Listato 62. Sposta sull’asse x la piramide

var tg2:TransformGroup = new TransformGroup();
var trans:Transform3D = new Transform3D();
trans.translate(40, 0, 0);
tg2.setTransform( trans );
tg2.addChild( pyramid );

Notiamo che abbiamo spostato sull’asse x la piramide, in modo da rendere visibili entrambi gli oggetti senza che fossero sovrapposti.

Poichè vogliamo ruotare entrambi gli oggetti simultaneamente, andiamo ad aggiungerli a un TransformGroup, così:

tg1.addChild( cube ); // Aggiungiamo il cubo al gruppo tg1
tg1.addChild( tg2 ); // Aggiungiamo la piramide al gruppo tg1
bg.addChild( tg1 ); // Aggiungiamo il gruppo tg1 al gruppo principale

Intercettare gli eventi del mouse

Listato 63. Imposta il listener e gli eventi del mouse

Mouse.addListener(this);
onMouseDown = function() {
    mousedown = true;
    mouseX = _xmouse;
    mouseY = _ymouse;
};
onMouseUp = function() {
    mousedown = false;
    mouseX = _xmouse;
    mouseY = _ymouse;
};

Con questo codice impostiamo il listener e gli eventi onMouseDown e onMouseUp. Quando l’utente preme il pulsante sinistro del mouse, viene settata su true la variabile mousedown, quindi il gruppo (come vedremo in seguito) dovrà ruotare. Quando invece l’utente rilascia il mouse, la variabile viene settata su false e di conseguenza la rotazione non avviene.

Entrambi gli eventi impostano le variabili globali mouseX e mouseY, che hanno come valore la posizione x e y del mouse stesso.

Non ci resta che impostare la funzione di rotazione, che assoceremo all’evento onRenderEVENT. Andiamo quindi nella funzione init() e associamo la funzione rotate all’evento onRenderEVENT, in questo modo:

world.addEventListener(World3D.onRenderEVENT,this,rotate);

Il codice della funzione rotate è molto semplice:

Listato 64. Crea la funzione che farà ruotare gli oggetti

function rotate() {
    if ( mousedown ) {
        x += ( _ymouse – mouseY )/10;
        y += ( mouseX -_xmouse )/10;
        rotation.rot( x, y, z );
        tg1.setTransform(rotation);
    }
}

Vediamo come le azioni siano eseguite solo quando la variabile mousedown sia impostata su true; in qual caso, vengono calcolate le variabili x ed y basandosi sulla posizione del mouse, quindi queste variabili vengono sfruttate dal comando rot, che si occupa di ruotare gli oggetti. I parametri x,y e z sono le rotazioni intorno ai relativi assi; poichè in questo esempio abbiamo rotazione sull’asse z, questo parametro sarà uguale a zero.

L’ultima riga della funzione associa la trasformazione al gruppo tg1, che contiene gli oggetti. Il risultato è il seguente:

Cubo e piramide ruotati in base all’azione dell’utente

I più attenti potrebbero aver notato un comportamento indesiderato nell’esempio: cosa succede se premiamo e trasciniamo, ma poi andiamo a rilasciare il tasto del mouse quando il cursore è fuori dal’swf?

Succede che l’evento onMouseUp non viene rilevato, quindi la rotazione avviene in maniera continua, a meno che non riportiamo il cursore sopra al file SWF.
44 / 51

Ruotare gli oggetti con la tastiera

I Video di HTML.it

Liste

© HTML.it 1997-2020 | T-Mediahouse – P. IVA 06933670967 | HTML.it è un periodico telematico reg. Trib. Roma n. 309/2008 | 2.22.0