In progetti come menu per un sito web, o grafici 3d per visualizzare l'andamento dei dati, potrebbe essere necessaria un'interazione con oggetti al di fuori del mondo 3D, come per esempio dei normali indirizzi di altri siti.
Per prima cosa andiamo a creare sei diversi movieclip, uno per ogni lato, che faranno da skin per le facce del nostro cubo. Ognuno andrà esportato per Actionscript (con nome side_n, dove n andrà da 1 a 6); le clip saranno molto semplici, per esempio, per la faccia numero 5 la skin sarà:
Vediamo il codice della funzione createScene():
Listato 80. La funzione createScene divisa in punti
function createScene():Group {
var bg:Group = new Group();
// Creiamo un cubo
var cube:Object3D = new Box(40, 40, 40, 'quad');
Notiamo l'uso della modalità "quad" con qualità 1, per rendere più semplice (e quindi più veloce) il modello.
Per applicare una diversa skin per ogni faccia useremo un ciclo for, basato sul valore della funzione getFace, che già abbiamo visto in questa guida.
// Ricava le facce del cubo
faces = cube.getFaces();
// Abilita gli eventi e imposta il listener per ogni faccia
var skin:MovieSkin;
for ( var i = 0; i < faces.length; i++ ){
var face = faces[i];
// Ricava il MovieClip per la skin dalla libreria
var no = i+1;
var skinClip:MovieClip = this.attachMovie( "side_" + no, "side" + no, this.getNextHighestDepth());
skinClip._x = skinClip._y = - 200;
Per ogni faccia, ricaviamo dalla libreria la corrispondente skin (i clip in libreria avranno come nome di espotrtazione side_1, side_2, side_3 e così via). La clip viene memorizzata momentaneamente sul MovieClip skinClip, che viene posizionato fuori dallo stage.
Aggiungendo questo codice:
skin = new MovieSkin(skinClip);
skin.setLightingEnable( true );
face.setSkin( skin );
Facciamo sì che le skin vengano mano a mano assegnate al cubo, abilitando l'illuminazione (la sfrutteremo in seguito per mostrare quale faccia sia selezionata).
Associamo poi gli eventi rollOver, rollOut e Press alle varie facce, così:
face.enableEvents(true);
face.addEventListener(ObjectEvent.onRollOverEVENT, this, setRollOverSkin);
face.addEventListener(ObjectEvent.onRollOutEVENT, this, setRollOutSkin);
face.addEventListener(ObjectEvent.onPressEVENT, this, getPage);
} // Fine ciclo FOR
Infine richiamiamo la funzione che associerà gli URL al cubo e lo inseriamo nella scena.
// Richiama la funzione per impostare gli URL
setUpUrls();
tg1.addChild( cube );
bg.addChild( tg1 );
return bg;
}// Fine della funzione createScene
Impostare gli URL
Ogni faccia avrà un URL corrispondente, quindi creiamo un array con 6 diversi indirizzi:
Listato 81. Assegna un url per ogni faccia
function setUpUrls(){
var baseUrl = "http://petitpub.com/labs/media/flash/sandy/";
urlList[faces[0].getId()] = baseUrl + "primitives.shtml";
urlList[faces[1].getId()] = baseUrl + "transformations.shtml";
urlList[faces[2].getId()] = baseUrl + "interpolators.shtml";
urlList[faces[3].getId()] = baseUrl + "skinning.shtml";
urlList[faces[4].getId()] = baseUrl + "sprites.shtml";
urlList[faces[5].getId()] = baseUrl + "filters.shtml";
}
Poichè ogni faccia ha il suo singolo ID, lo usiamo come chiave per memorizzare il corrispondente indirizzo nell'array urlList.
Qualcuno si domanderà perchè non abbiamo usato delle chiavi da 0 a 5 nell'array: la risposta è che, sebbene in questo caso sarebbe stato possibile, in progetti più complessi e con più oggetti non potremmo sapere quale oggetto viene creato per primo da Sandy, quindi ci serve un riferimento fisso e immutabile (come appunto l'ID di ogni faccia), così saremo sicuri che l'URL corrisponderà all'oggetto voluto.
"© Petit Publications 2006" - diritti riservati
