Vogliamo che lo slider cambi la trasparenza del cubo (nell’intervallo consentito 0-100), quindi abbiamo bisogno di un gestore di eventi. Andiamo, anche, a impostare l’evento per la rotazione degli oggetti, il tutto all’interno della funzione setUpControls:

Listato 44. Inserisce i controlli per il mouse e della trasparenza

function setUpControls(){
    // Controlli del mouse per la rotazione
    Mouse.addListener(this);
        onMouseDown = function() {
        mousedown = true;
        mouseX = _xmouse;
        mouseY = _ymouse;
    };
    onMouseUp = function() {
        mousedown = false;
        mouseX = _xmouse;
        mouseY = _ymouse;
    };

    // Slider per il controllo della trasparenza
    var alphaCh:Object = new Object();
    alphaText.text = alpha;
    alphaCh.onChange = function(evt:Object){
        alpha = evt.value;
        alphaText.text = alpha;
        skin.alphaBkg = alpha;
    }
    alphaSlider.addListener(alphaCh);
}

Per lo slider (con nome istanza alphaSlider) creiamo il listener alphaCh, che viene invocato ogni qualvolta verrà modificato il valore dello slider. Tale evento si occuperò di aggiornare il campo di testo alphaText e di impostare la proprietà alphaBkg della skin. L’aggiornamento visivo avverrà in tempo reale.

Abbiamo impostato anche gli evento onMouseDown e onMouseUp, che modificano le variabili globali mouseX e mouseY basandosi sulla posizione attuale del puntatore. Mentre il mouse è premuto viene impostato un booleano con valore true, mentre quando il mouse viene rilasciato tale booleano viene impostato su false, in modo che lo script sappia quando ruotare il cubo (e la piramide al suo interno) e quando no. Per questo dobbiamo utilizzare un altro listener, onRenderEVENT, all’interno della funzione init:

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

In questo modo ad ogni fotogramma di Sandy verrà richiamata la funzione rotate:

Listato 45. Imposta la rotazione del cubo in base al mouse

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

Notiamo come questa funzione controlli il valore del booleano mousedown e il valore di mouseY, quindi a seconda del loro valore si occupa di impostare la rotazione del cubo. Grazie a questo codice otteniamo una rotazione con l’asse definito dalla posizione del mouse e la velocità proporzionale alla distanza del trascinamento del mouse stesso.

Testando il filmato otterremo il risultato visto ad inizio paragrafo.

“© Petit Publications 2006” – diritti riservati
36 / 51

Utilizzo di ColorTransform

I Video di HTML.it

Realizzare un carosello di immagini con Twitter Bootstrap – parte 2