| 16 Settembre 2009
Passiamo ora alla parte interessante, il codice.
Vediamo quello del frame generatore, prima lo posterò e poi spiegherò con calma il funzionamento.
Bottone.visible = false;
Contenuto.visible = false;
var Titoli:Array = new Array("Home","News","Contatti");
var totale:Number = Titoli.length;
var pagina:Number=1;
for(var i:Number=0;i
var temp:MovieClip = new Pulsante();
temp.name="Bottone"+i;
temp.number=i;
temp.x=Bottone.x;
temp.y=Bottone.y+(Bottone.height*1.3)*i;
temp.Text.text=Titoli[i];
temp.addEventListener(MouseEvent.CLICK, Cambia_pagina);
stage.addChild(temp);
}
function Cambia_pagina(e:MouseEvent):void{
pagina=e.target.parent.number + 1;
trace(pagina);
play();
}
Prime righe:
Queste due istruzioni servono ad un livello estetico:
Bottone.visible = false;
Contenuto.visible = false;
Permettono di non vedere il contenuto prima di averlo settato e per il bottone di non visualizzare il bottone generatore con la scritta “Titolo”
Dichiarazioni:
var Titoli:Array = new Array("Home","News","Contatti");
var totale:Number = Titoli.length;
var pagina:Number=1;
La prima riga dichiara un Array di tipo stringa con assegnatovi i nomi delle voci di menù (come già detto prima, migliorato possono essere assegnati tramite la lettura di un file XML grazie al metodo push, ma non è ora il caso)
La seconda crea una variabile di tipo number e viene inizializzata con il numero di elementi del vettore tramite il metodo di lettura ARRAY.lenght
La terza invece crea una variabile di tipo number inizializzata ad 1, ovvero la prima pagina, dato che è la variabile che associa le voci di menù alla posizione dei contenuti.
Accorgimento di classe:
Prima di passare al ciclo, vi voglio mostrare questa riga di codice:
var temp:MovieClip = new Pulsante();
Questa permette di creare all'istante un'istanza di un tipo di classe.
Il problema attualmente è che Pulsante non è una classe built in, quindi ha metodi e caratteristiche non conosciute dal compilatore, e quindi da un errore di unknow class.
Flash per bypassare questo problema permette di esportare prototipi di classe nello stesso filmato, in modo da renderle utilizzabili in runtime direttamente nel filmato.
Per questo accorgimento dobbiamo aprire le proprietà del simbolo Pulsante, aperto dobbiamo flaggare “Esporta in filmato flash” ed “Esporta nel primo fotogramma”.
Fatto questo non avremo problemi.
Il ciclo:
Il ciclo che va da 0 a totale-1 permette di creare tanti pulsanti (voci di menù), quante ne sono settate nell'array.
Ogni nuova istanza viene creata dalla riga “var temp:MovieClip = new Pulsante();” come abbiamo visto sopra.
In questo caso alla classe temp di tipo Pulsante, assegniamo alla caratteristica name il nome “Bottone” + i; dove i rappresenta il contatore e quindi la posizione.
Concatenandola alla stringa bottone otterremo per esempio “Bottone1”,”Bottone2”, ecc.
La caratteristica Number viene aggiunta da noi grazie alla classe dinamica, e vi associamo i in modo da mettere in relazione la posizione della voce di menù con la posizione del contenuto.
Le caratteristiche .x e .y permettono di associare una posizione dello stage all'elemento (infatti l'elemento 0, ovvero Bottone, quello la con la visibilità settata a false, si troverà in un punto da noi stabilito, ed in base a quel punto sposteremo per ogni ciclo la x o la y del simbolo in modo da creare il menù).
Nel nostro caso x rimane sempre fissa (come vedete rimane sempre la x dell'elemento 0, mentre la y viene moltiplicata per l'altezza del pulsante stesso più un piccolo numero (da decidere in base ai gusti, è lo spazio tra una voce e l'altra) e per i in modo da scalare tante posizioni quante sono le voci.
L'assegnazione dell'elemento i dell'array titolo a temp.Text.text permette di cambiare il testo dinamico dell'elemento Text nel movieclip, questi sono i titoli delle voci di menù.
Ora aggiungiamo una sentinella per il click del mouse (dalla lezione precedente è inutile che mi dilunghi).
Aggiungiamo allo stage la nuova istanza tramite la riga : stage.addChild(temp);
for(var i:Number=0;i
var temp:MovieClip = new Pulsante();
temp.name="Bottone"+i;
temp.number=i;
temp.x=Bottone.x;
temp.y=Bottone.y+(Bottone.height*1.3)*i;
temp.Text.text=Titoli[i];
temp.addEventListener(MouseEvent.CLICK, Cambia_pagina);
stage.addChild(temp);
}
Questo ciclo verrà ripetuto tante volte quante sono le voci di menù, in modo da crearne uno nuovo.
La funzione associata alla sentinella è questa
function Cambia_pagina(e:MouseEvent):void{
pagina=e.target.parent.number + 1;
play();
}
che non fa altro che assegnare a pagina il numero associato alla voce di menù, che sarà a sua volta associata a contenuto.
Di dare il play() cosicché arrivi alla fine della timeline principale e si verifichi la ridondanza spiegata in precedenza.
Piccole specifiché:
Per chi volesse mettere effetti ai pulsanti movieClip (lo vedremo nelle prossime lezioni) DEVE incorporare i caratteri del testo dinamico, altrimenti le interpolazioni non avranno effetto (consiglio incorporamento automatico, tutto è troppo pesante).
I contenuti devono stare in ordine come le voci di menù caricate nel vettore altrimenti non vengono associati (tranne nel caso non si carichino dinamicamente con XML come detto prima)
E con questo vi lascio quest'altra lezione che per molti sarà inutile e superflua, e per pochi forse sarà utile.
Per il videocorso non mi pestate, è il mio primo, migliorerò ;)
Parte prima:
Parte seconda:
