Creare i pulsanti

Grazie all’HTML dinamico, agli effetti Java e ad altre tecnologie legate al web possiamo implementare nelle pagine HTML dei pulsanti animati, dei pulsanti, cioè, che si modificano nel momento in cui il mouse viene posizionato su di essi oppure vengono cliccati.

Ovviamente questo compito è relegato ai programmatori o agli editor HTML. Tuttavia rimane compito del programma di grafica (in questo caso Image Composer) preparare le varie versioni dei pulsanti (ad esempio la versione normale e quella attiva).

Nella prima parte di questa lezione creeremo una serie di pulsanti standard e poi li modificheremo in modo da renderli adatti a ricreare un effetto di “accensione” al passaggio del mouse.

Apriamo quindi il menu Insert e scegliamo Button…

Selezioniamo il tipo di pulsante e selezioniamo Avanti.
Nella seconda schermata digitiamo 3 (per indicare che vogliamo creare 3 pulsanti) e premiamo Avanti.

Nel riquadro in alto digitiamo l’etichetta del primo pulsante (Home), premiamo Avanti ed inseriamo l’etichetta del secondo pulsante (E-mail). Ancora una volta Avanti ed inseriamo finalmente l’etichetta del terzo pulsante (Link).

Dopo aver premuto Avanti ancora una volta accediamo alla schermata principale nella quale possiamo scegliere se assegnare una dimensione automaticamente (in base al testo contenuto) ad ogni pulsante oppure se vogliamo impostare manualmente le dimensioni che saranno uniche per tutti i pulsanti.

Scegliamo la seconda alternativa (Same size for all buttons) ed inseriamo i valori minimi 133 per la larghezza e 60 per l’altezza (Attenzione! Se i valori minimi non risultano essere quelli specifica in questa lezione non è un problema: basta selezionare i valori minimi disponibili).

Premiamo il pulsante size Preview per poter visualizzare una anteprima delle dimensioni del pulsante.

Siamo soddisfatti? Bene, premiamo Finish e completiamo la creazione del nostro primo pulsante.

Disponiamo nell’area di composizione i tre pulsanti (non facciamoci ingannare se inizialmente vediamo un solo pulsante, gli altri si trovano esattamente sotto di esso!).

A questo punto notiamo che il colore del carattere non è esattamente ideale. Bene, passiamo a modificarlo: selezioniamo il primo pulsante e procediamo con il doppio clic.

Apriamo la scheda Label and Image, selezioniamo font e quindi facciamo clic sul riquadro Color per accedere al solito Color Picker e selezionare un colore che preferiamo, ad esempio il bianco. Confermiamo con Ok solo due volte (in modo da rimanere nel pannello delle proprietà del pulsante) e passiamo alla scheda Fill dove elimineremo la texture del pulsante. Dal menu Fill selezioniamo Gradient e poi scegliamo Night Sky dal menu Gradient name.

Confermiamo con Ok e visualizziamo la nuova versione del nostro pulsante. Ripetiamo il procedimento con gli altri due pulsanti.

Bene, ora disponiamo delle versioni “a riposo” dei nostri pulsanti.

Creiamo ora delle copie dei tre pulsanti: per farlo basta selezionarli tutti (ad esempio scegliendo Select All dal menu Edit), premere Copy (sempre dal menu Edit) ed infine Paste in un qualunque punto libero dell’area di composizione.

Ora raduniamo separatamente una copia di ogni pulsante e procediamo con la modifica (questa sarà la versione che verrà visualizzata al passaggio del mouse).

Iniziamo ancora una volta con il pulsante Home. Accediamo alle proprietà tramite un doppio clic su di esso, apriamo la scheda Fill e scegliamo Tequila Sunset dal menu Gradient name.

Confermiamo con Ok e ripetiamo il procedimento con gli altri due pulsanti.

Abbiamo finalmente i pulsanti pronti per essere inseriti negli adeguati script della nostra pagina HTML. Per salvarli basterà selezionarli uno ad uno e ripetere questa procedura:

1. Selezionare Save for the web dal menu file.
2. Scegliere The selected sprite or group e premere Avanti.
3. Scegliere Let the web page background show trough e premere Avanti.
4. Selezionare il colore di sfondo della nostra pagina HTML e premere Avanti.
5. Premere Finish, Save e quindi scegliere il nome del file e la posizione.

Il pulsante verrà quindi salvato in un file Gif delle dimensioni di soli 3.03 Kbyte con delle aree trasparenti in modo da poter essere integrato facilmente nello sfondo della nostra pagina HTML.

Non ci resta che ripetere il procedimento per gli altri cinque pulsanti.

Alla fine del processo ricordiamo di salvare anche l’intera composizione in formato MIC.