In quest'articolo vedremo com'è possibile realizzare con Flash 8 il template (la sola struttura) di un mini sito composto da una barra di navigazione, i cui tasti apriranno delle pagine composte da filmati flash. Prima di proseguire vi segnalo che in Rete è possibile trovare diversi templates gratuiti per Flash pronti da usare.
Cominceremo col realizzare un singolo pulsante.
Realizziamo a nostro piacimento la grafica del pulsante facendo ricorso alla nostra creatività ed agli strumenti di design che flash ci mette a disposizione.
Una volta che la grafica è pronta selezioniamo l'oggetto creato e premiamo [F8] per creare il nostro oggetto pulsante. Selezioniamo quindi la voce pulsante, inseriamo il nome dell'oggetto (ad esempio pulsante1) e diamo una conferma.
Doppio click sul pulsante ed entriamo nelle proprietà del pulsante appena creato.
Come possiamo notare nella linea temporale abbiamo gli stati (Su, sopra, giù, premuto). Lo stato su contiene il disegno del pulsante nel suo fotogramma chiave.
Ora inseriamo un nuovo fotogramma chiave nel fotogramma dello stato sopra, ne modifichiamo ad esempio i colori.
Sin ora ci siamo limitati a creare l'immagine del pulsante nel caso non ci sia interazione del mouse e quella al passaggio sopra (rollover).
Ora dobbiamo inserire un testo identificativo al nostro pulsante. Creiamo un nuovo livello sovrapposto a quello contenente la grafica ed inseriamo prima nello stato su e poi in quello sopra, un box testo (facendo attenzione che si trovino nella stessa posizione) e digitiamo il nome (nell'esempio pagina 1).
Ci troveremo in una situazione analoga alla seguente:
A questo punto passiamo alla duplicazione del pulsante per realizzare la barra di navigazione.
Entriamo nella libreria degli oggetti [CTRL+L] (come potremo notare il nostro unico oggetto è il pulsante1), e duplichiamo il nostro pulsante1, tante volte quante pagine vogliamo sia il nostro sito, e con un semplice click destro selezioniamo duplica.
Rinominiamo le nostre copie in modo da renderle riconoscibili (ad esempio pulsante2, pulsante3, pulsante4, ecc...).
Ora trasciniamo nella scena i nuovi pulsanti creati e disponiamoli a nostro piacimento.Come possiamo notare i nostri pulsanti avranno al loro interno lo stesso testo, in quanto copie esatte l'uno dell'altro.
Seguendo un ordine logico, passiamo a rinominare i testi dei singoli pulsanti, effettuando un semplice doppio click e agendo sui fotogrammi relativi ai testi degli stati su e sopra.
Una volta rinominati i pusanti avremo ottenuto una barra di navigazione del tipo:
Ora passiamo a creare le pagine alle quali i nostri pulsanti dovranno linkare.
Partiamo dalla home page (la pagina visualizzata in apertura senza interagire con i pulsanti.
Nella scena 1 Creiamo un nuovo livello (che chiameremo pagine) e disegnamo nel primo fotogramma di questo, una sorta di box che conterrà i nostri contenuti da pubblicare. Ora selezioniamolo e convertiamolo in simbolo [F8] scegliendo come opzione clip filmato e dandogli come nome "home".
Come potete notare abbiamo creato un clip filmato in quanto, facendo in questo modo abbiamo la possibilità di animare, al suo interno, i nostri contenuti. (In questo articolo, come detto sopra ci limitiamo a realizzare il template "statico", completamente personalizzabile dando sfogo alla propria creatività).
Se si desidera modificarlo basta un doppio click sull'oggetto ed entrati nell'istanza dell'oggetto stesso, si può procedere alla realizzazione delle animazioni e dei contenuti.
Nel template ci limiteremo ad inserire, nel clip filmato home appena creato, un campo di testo per identificare la pagina con la scritta home.
Ora bisogna creare le 5 pagine linkabili dai relativi 5 pulsanti.
Creiamo quindi, nel livello pagine, a partire dal secondo fotogramma, 5 fotogrammi chiave.
Adesso dobbiamo fare altro che ripetere la stessa operazione di creazione del box clip filmato fatta per la home page, in ogni fotogramma chiave appena creato, nominando progressivamente i nuovi clip (pagina1, pagina2, ecc...)
Nelle proprietà dei fotogrammi contenenti i singoli clip filmato del livello pagine (per visualizzarle fare click sul fotogramma), diamo un etichetta ad ogni singolo fotogramma, inserendola nell'apposito form "fotogramma" (Chiamiamo ad esempio home il fotogramma 1, pagina1 il 2, pagina 2 il 3, ecc...). Potrete notare che all'inserimento dell'etichetta appare sul fotogramma di riferimento una bandierina rossa.
Affinchè i pulsanti siano sempre visibili in tutte le pagine, dobbiamo far si che nei seguenti 5 fotogrammi della linea temporale del livello contenente i pulsanti, ci siano fotogrammi attivi. Quindi posizioniamoci sul fotogramma 6 del livello pulsanti e digitiamo [F5] (Inserisci fotogramma).
La situazione attuale è la seguente:
Il template è quasi pronto, manca solo associare i comandi ActionScript ai singoli tasti.
Sincerandoci di essere nella scena1, selezioniamo uno alla volta i pulsanti ed inseriamo nella finestra azioni [F9] il seguente codice ActionScript, tenendo presente che ad ogni pulsante dobbiamo specificare l'etichetta del fotogramma a cui fa riferimento:
on (release) {
gotoAndStop("pagina1");
}
Come potete notare il nome dell'etichetta del fotogramma di riferimento è inserita tra apici nella parentesi relativa al comando "gotoAndStop". (Al codice assegnato ad ogni tasto deve corrispondere la rispettiva etichetta).Una volta associato il codice ActionScript ad ogni pulsante il nostro template è praticamente pronto.
Manca solo inserire un comando che "blocchi" il filmato al primo fotogramma senza mandarlo in ciclo.
Posizioniamoci quindi nel primo fotogramma del livello pagine e nella finestra azioni [f9] inseriamo il semplicissimo comando ActionScript:
stop();
Ora sta a voi inserire ed animarne i contenuti.