| 16 Settembre 2009
Salve di nuovo, riprendiamo con la seconda lezione di Io e Flash.
La scorsa volta abbiamo parlato della dinamicità della classe movieClip e della possibilità (e obbligatoria alternativa) di aggiungere alla classe dell'istanza dei listener o sentinelle capaci di captare gli eventi che avvengono all'interno del filmato.
Utilizzando questi semplici strumenti conosciuti nella scorsa lezione, possiamo creare un sistema di menù dinamico senza aver bisogno di dover creare una timeline esageratamente grande, ma con un sistema ridondante dove cambiamo dinamicamente la posizione della timeline solo nelle movieclip, mentre per il menù sarà tutta questione di codice generato da un possibile file XML o magari da un array preimpostato, avendo così la possibilità di non dover duplicare o creare varie istanze statiche dello stesso oggetto nell'intero filmato (può esser vantaggioso in alcune situazione, sia dal punto di vista pratico che di designer).
Partiamo dal presupposto che queste lezioni riguardano di gran lunga il codice delle AS3, e diamo per scontato che le basi del designer flash che sta leggendo siano ridotte al minimo nell'utilizzo della timeline, area di lavoro, creazione di simboli e assegnazione.
Bene, possiamo cominciare, per prima cosa creiamo due simboli movieClip ed uno di tipo pulsante, chiamati rispettivamente Pulsante e Contenuto le due movieClip, e clickArea il tipo pulsante.
Cominciamo con il “configurarli” tutti e tre.
Contenuto:
Cominciamo con il portare nello stage e l'assegnare il nome istanza del contenuto con “Contenuto” (lo so non ho molta fantasia).
Ora partiamo dal presupposto di conoscere il numero di elementi del menù (la lettura dinamica dell'XML la lasciamo più avanti, dato che dobbiamo conoscere l'oggetto XML), in questo caso tre elementi.
A questo punto creiamo frame quanti sono gli elementi, ovvero tre frame, e creiamo in ognuno di questi un contenuto, come un semplice testo “blablablal” con uno sfondo di colore diverso e intestazione diversa.
Benissimo, con il contenuto abbiamo finito (ricordiamo che tutta questa staticità per ora è fasulla, nel senso che quando avrete abbastanza conoscenza di flash e con la lettura dei loader e gli xml, potrete caricare qualsiasi contenuto in modo dinamico.
Pulsante+clickArea:
Benissimo, ora non facciamoci ingannare dal fatto di aver creato un simbolo di tipo pulsante, non è lui la chiave per ora, ma il secondo movieClip creato, quindi portiamolo nello stage.
Assegniamogli il nome “Pulsante”, apriamo la movieClip e nel primo frame ci mettiamo un campo testo dinamico settato a “Titolo”, mentre l'istanza la chiamiamo Text (case sensitive, text già è usata da flash).
Ora sempre nello stesso frame creiamo un nuovo livello e portiamo nello stage l'istanza pulsante, apriamolo ed ora, settiamo vuoti i frame su, giù, sopra, mentre su premuto creiamo un rettangolo un po' più grande del “Titolo” (sarà la clickArea delle voci di menù).
Se qualcuno non capisce perché non abbiamo usato il metodo xxx.buttonmode questo verrà spiegato nelle prossime lezioni.
Ok, abbiamo configurato per bene i tre simboli, ora sistemiamo la timeline principale per il funzionamento ridondante.
Creiamo per prima cosa un nuovo livello, chiamato “Contenuti” mentre il primo lo chiamiamo “Menu”.
Ora creiamo il primo fotogramma chiave al primo posto nel livello menu, mentre il livello contenuti può tranquillamente tenere un fotogramma chiave iniziale al primo posto e poi il resto tutti fotogrammi normali.
Nel livello menù creiamo un secondo fotogramma chiave al secondo posto, che chiameremo “Inizio” e nelle azioni deve avere queste due istruzioni:
“Contenuto.gotoAndStop(pagina);”
”Contenuto.visible=true;”,
ora dobbiamo scegliere la lunghezza della timeline (nel caso vogliate mettere effetti nel cambio dei contenuti, per ora settiamola a 20 frame.
Bene ora andiamo sempre nel livello menù e creiamo un altro fotogramma chiave con uno stop() nelle azioni. In fine creiamo un fotogramma chiave nel ventesimo frame con nelle azioni un semplice gotoAndPlay(“Inizio”);
Struttura completata, ora spieghiamo per bene cosa succede.
Il livello contenuti c'è per comodità, dato che avendo un solo fotogramma chiave dobbiamo inserire una sola volta l'oggetto “Contenuto”
Passiamo al livello menù, che è quello che giostra su tutta la timeline.
Il primo frame fa da “generatore” del menù e delle variabili che useremo in tutto il filmato, quindi viene riprodotto una sola volta, infatti il filmato al secondo frame con le istruzioni Contenuto.gotoAndStop(pagina); sposta la posizione del frame interno al movieClip “Contenuto” al contenuto interessato (che dopo vedremo verrà associato alla voce di menù premuta, che a sua volta farà cambiare il valore alla variabile pagina).
Fatta questa operazione la timeline prosegue fino al frame intermedio, dove trova lo stop e si ferma, e non partirà finché non verrà premuto un altra voce di menù.
Alla pressione di una voce si ha un'istruzione play(); e un'assegnazione alla variabile pagina, che vedremo in specifico tra poche righe.
Al play la timeline comincia di nuovo a muoversi fino all'ultimo frame, dove il gotoAndPlay(“Inizio”) ci fa tornare al secondo frame (davanti al frame generatore) e carica il contenuto associato alla nuova variabile pagina.
Questo, ciclo, permette (non proprio in questo caso, ma migliorato si), una gestione dinamica del menu e dei contenuti.
