Nuova pagina 1

 

::: CorsoWebMaster :::

Corso Base
Webmaster

Indice Lezioni


01 02 03 04 05 06
07 08 09 10 11 12
13 14 15 16 17 18
19 20 21 22 23 24
25 26 27 28 29 30
31 32 33 34 35 36
by Alfonso Roselli

Corso Swish2
Indice Lezioni

00 01 02 03 04 05
06 07 08 09 10 11
12 13 14 15
16 17

by Gipar Giuseppe

Corso ASP
Indice Lezioni


01 02 03 04 05 06
07 08 09 10 11 12

by Roberto Moretti

Corso Flash
Indice Lezioni


01 02 03 04 05 06
by MimmoLoad

 

::: CorsoWebMaster :::

Corso Flash

(3) - I pulsanti (parte1)



Se si parla di interazione,sicuramente Flash 5 consente di realizzare siti ad altissima interazione con l' utente. Nelle lezioni precedenti abbiamo avuto modo di realizzare una semplice animazione,ora ci limitiamo a creare un semplice pulsante animato.

Già,avete letto proprio bene, perché non si tratta altro che di semplici Simboli Filmato o Movie Clip ma con proprietà interattive. Al loro interno infatti si trovano i livelli come nelle classiche clip con l'unica differenza che,nei pulsanti,sono impostati solo 4 fotogrammi per ogni Livello anziché infiniti,o quasi,come nella Linea Temporale del nostro filmato o all' interno di Movie Clip. Ma cerchiamo di capire perché solo 4 fotogrammi e come si usano. 

Per rendere le cose molto più semplici e piacevoli cominciamo ad avviare un nuovo file da Flash 5 e sullo Stage disegnamo un quadrato,sempre il solito,di lato e di colore rosso. 
A questo punto molti sapranno già che il passaggio successivo sarà quello di convertire questo oggetto in un pulsante selezionando completamente il quadrato disegnato e premendo F8. Scegliamo infatti "Pulsante" nello stato di comportamento, diamogli un nome e premiamo Ok. 

Sappiamo anche che se avviamo il nostro con Ctrl + Invio, passando con il puntatore del mouse sopra al nostro quadrato il puntatore si trasformerà nella classica "manina" che indica appunto un pulsante. Ma anche premendo,in questo caso, purtroppo non accadrà nulla.

Ora che abbiamo creato il nostro pulsante dobbiamo comprenderne alla perfezione i vari Stati che possiede e come utilizzarli e per fare questo "entreremo" all' interno di questo simbolo per studiarlo. Come al solito, per fare questo, clicchiamo con il tasto destro del mouse sul pulsante e selezioniamo la voce Modifica in posizione

Nella Figura possiamo osservare quello che ci troveremo di fronte. Cominciamo a dare un' occhiata rapida in alto a sinistra e notiamo il nome della scena dove ci trovavamo prima e cioè Scena 1 ed a fianco il nome del simbolo pulsante dove ora ci troviamo. 
Notiamo anche che, come nella scena principale o all' interno di un Movie Clip,abbiamo una Linea Temporale ma,nella sezione fotogrammi,solo 4 grandi fotogrammi con,sulla parte superiore 4 Indicazioni di Stato:Su,Sopra,Giù e Area attiva. Cominciamo subito col dire che questi sono i 4 stati fondamentali di un pulsante che intercetta il movimento del mouse. Il fotogramma relativo ad uno stato specifico intercettato,ci mostrerà se presente,il simbolo in esso contenuto. 

Faccio subito un esempio molto semplice e indicativo: se nel fotogramma contrassegnato dallo stato "Giù" inseriamo un simbolo grafico, un cerchio di colore blu ad esempio,ogni volta che cliccheremo col mouse sopra al nostro pulsante,ci apparirà sul monitor questo cerchio blu. Analizziamo ora uno ad uno questi 4 stati: 

Primo stato "Su", questo è sostanzialmente il primo fotogramma che apparirà nel nostro filmato e cioè il simbolo grafico iniziale che avevamo disegnato. 

Secondo stato "Sopra", questo fotogramma mostrerà il suo relativo contenuto ogni qual volta passeremo col puntatore del mouse sopra al pulsante.Questa azione viene anche comunemente denominata Roll Over. 

Terzo stato "Giu", come già accennato, questo fotogramma verrà mostrato quando faremo un click sopra al pulsante. 

"Area attiva", questo non è propriamente uno stato ma l' area vera e propria che intercetterà la posizione del mouse e che non sarà mai visibile nella proiezione del nostro filmato. 

Proseguiamo ora nella nostra esercitazione pratica. Selezioniamo il secondo fotogramma vuoto contrassegnato dallo stato "Sopra" e premiamo F6. Ora selezioniamo dalla Barra Strumenti lo strumento Secchiello e riempiamo questo nuovo oggetto con un colore diverso dal rosso, ad esempio utilizziamo il colore blu. 
Ora la stessa operazione la eseguiamo sul terzo stato "Giù, selezioniamo questo terzo fotogramma e premiamo F6 poi riempiamo di un colore verde il nuovo quadrato. 

Ora se vogliamo che l' area attiva sia della stessa dimensione e posizione del quadrato non dobbiamo fare altro che selezionare il quarto fotogramma e premere nuovamente F6. In questo caso però non occorre cambiare colore in quanto quest' area non sarà mai visibile. 

Ora non ci resta altro da fare che verificare se il tutto funziona premendo Ctrl + Invio. Se tutto è andato per il meglio dovremmo vedere nel nostro filmato un quadrato rosso che diventa blu se passiamo su di esso con il mouse e cambia nel colore verde se clicchiamo su di esso. 

Chiudiamo questa anteprima e ritorniamo nel filmato principale uscendo dalla struttura del pulsante e per fare questo clicchiamo in alto a sinistra dove appare il nome della scena principale. Ora possiamo posizionare sullo stage il nostro pulsante dove più ci pare. Quanto fin qui appreso non è nient' altro che la base per comprendere il funzionamento del simbolo pulsante.

Manuale a cura di MimmoLoad
Url: http://www.mimmoload.135.it


Vai alla lezione successiva

::: CorsoWebMaster :::

::: CorsoWebMaster :::
Torna alla
Home Page


Copyright © 2003-2007 by VolontariWEB.com. All right reserved.