Se vogliamo far interagire l'utente con un oggetto specifico, dobbiamo dargli modo di selezionare distintamente un oggetto.
In Sandy questo è possibile ma, per consumare meno memoria, l'opzione di selezione degli oggetti, di default non è attiva; possiamo abilitiarla utilizzando il comando enableEvents(), passandogli un valore true.
Gli eventi relativi ad un oggetto saranno onPressEVENT, onRollOverEVENT e onRollOutEVENT.
Usando la stessa scena vista finora, proviamo a differenziare la selezione di cubo e piramide, in modo che muovendo il cursore del mouse su uno dei due oggetti questo venga evidenziato (per farlo applicheremo un cambio di skin all'oggetto).
Nel nostro esempio, quando l'utente posizionerà il cursore sull'oggetto questo verrà evidenziato, mentre quando sposterà il cursore al di fuori dell'oggetto questo assumerà di nuovo il suo aspetto normale.
Per prima cosa dobbiamo abilitare i listener per gli eventi, quindi aggiungiamo il codice nella funzione createScene()
Listato 71. Abilita i listener per gli eventi
// Creiamo la skin da usare per la selezione
markSkin = new MixedSkin(0x0000FF, 40, 1, 10, 1);
// Abilitiamo gli eventi e impostimo i listener
cube.enableEvents(true);
cube.addEventListener(ObjectEvent.onRollOverEVENT, this, setRollOverSkin);
cube.addEventListener(ObjectEvent.onRollOutEVENT, this, setRollOutSkin);
pyramid.enableEvents(true);
pyramid.addEventListener(ObjectEvent.onRollOverEVENT, this, setRollOverSkin);
pyramid.addEventListener(ObjectEvent.onRollOutEVENT, this, setRollOutSkin);
Come possiamo vedere nel codice, per prima cosa, creiamo una skin (markSkin) che verrà utilizzata per evidenziare l'oggetto selezionato; abilitiamo poi degli eventi su entrambi gli oggetti, utilizzando i listener per rollOver e rollOut; le stesse funzioni sono utilizzate per entrambi gli oggetti, infatti, per stabilire su quale oggetto agire, utilizzeremo i target degli eventi.
La funzione setRollOutSkin si occuperà di riportare l'oggetto al suo aspetto originale, per cui deve essere in grado di conoscere la skin usata dall'oggetto. Una soluzione è salvare dei riferimenti alle skin in un Array, in questo modo:
skins[cube.getId()] = skin; // Skin del cubo
skins[pyramid.getId()] = skin2; // Skin della piramide
Ecco il codice per gestire gli eventi:
Listato 72. Gestisce gli eventi del mouse
// azioni da eseguire al MouseOver
function setRollOverSkin( e:ObjectEvent ){
var obj:Object3D = e.getTarget();
obj.setSkin( markSkin );
camera.rotateX(0);
}
// azioni da eseguire al MouseOut
function setRollOutSkin( e:ObjectEvent ){
var obj:Object3D = e.getTarget();
var id = obj.getId();
obj.setSkin( skins[id] );
}
Quando il puntatore del mouse viene posizionato sulla faccia di un oggetto, la funzione setRollOverSkin viene richiamata e ha come argomento un ObjectEvent. Questo ObjectEvent porta un riferimento relativo all'oggetto che ha scatenato l'evento e noi possiamo risalirvi grazie al comando getTarget().
Una volta ricavato l'oggetto, di nostro interesse, applichiamo la skin markSkin.
Al contrario, quando il mouse viene spostato al di fuori dell'oggetto, viene chiamata la funzione setRollOutSkin, che si occupa di ripristinare la skin originale dell'oggetto, che ricaviamo dall'array skins creato in precedenza.
Il risultato che otteniamo dal codice sopra descritto è questo:
Selezione di un singolo oggetto
"© Petit Publications 2006" - diritti riservati
