Come abbiamo visto, la gestione degli eventi è importantissima per far interagire l'utente con la scena.
In questo esempio l'utente dovrà poter ruotare il cubo (in modo da vedere tutte le facce), inoltre sarà utile fornire un'indicazione visiva della faccia selezionata. Infine, al click dell'utente su una delle facce del cubo, andremo ad aprire il corrispondente URL in una nuova finestra.
Per prima cosa impostiamo un flag di controllo (nel nostro esempio mousedown), che useremo per eseguire o meno determinate azioni.
Listato 82. Controllo sul mouse per gestire il movimento
onMouseDown = function(){
// Se il mouse è premuto, attiviamo il movimento
moving = true;
}
onMouseUp = function(){
// Altrimenti lo fermiamo
moving = false;
}
L'evento onrEnderEVENT gestirà la rotazione del cubo, che l'utente potrà eseguire premendo e trascinando.
Listato 83. Gestisce la rotazione del cubo
function rotate() {
if ( mousedown ) {
x += ( _ymouse - mouseY )/10;
y += ( mouseX -_xmouse )/10;
rotation.rot(x, y, z);
tg1.setTransform(rotation);
// deselect any selected face
selectedFace.getSkin().setLightingEnable( true );
}
camera.rotateX(0);
}
Se il mouse è premuto, la rotazione e il gruppo di trasformazione che contiene il cubo vengono aggiornati.
L'evidenziazione della faccia selezionata è eseguita prima degli eventi onRollOver/onRollOut; potevamo usare un cambio di skin, ma abbiamo preferito sfruttare le luci, anche per provare nuove soluzioni; il funzionamento è semplice, quando l'utente si allontana da una faccia, la luce di questa viene accesa, altrimenti la luce viene spenta
Listato 84. Selezione e deselezione di una faccia
// Selezione di una faccia
function setRollOverSkin(e:ObjectEvent){
var obj:TriFace3D = e.getTarget();
selectedFace = obj;
obj.getSkin().setLightingEnable( false );
}
// Deselezione di una faccia
function setRollOutSkin(e:ObjectEvent){
var obj:TriFace3D = e.getTarget();
obj.getSkin().setLightingEnable( true );
}
Vediamo come sia impostata un'azione che salva nella variabile globale selectedFace il valore della faccia selezionata.
Quando il mouse si allontana dalla scena, accendiamo nuovamente la luce sulla faccia per mostrare che non è selezionata.
Risultato finale
L'evento onPressEvent è associato alla funzione getPage(), che altro non fa se non analizzare l'URL corrispodente al lato cliccato e aprirlo in una nuova finestra (o in una nuova tab, a seconda del browser).
Ecco il risultato:
Menu cubico
"© Petit Publications 2006" - diritti riservati
