Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 51 di 51
  • livello principiante
Indice lezioni

Gestire gli eventi sul menù

Nella lezione precedente abbiamo visto come creare il cubo e come associare un url per ogni faccia. In questa lezione vediamo, invece come gestire l'interazione da parte dell'utente sul cubo
Nella lezione precedente abbiamo visto come creare il cubo e come associare un url per ogni faccia. In questa lezione vediamo, invece come gestire l'interazione da parte dell'utente sul cubo
Link copiato negli appunti

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


Ti consigliamo anche