Esercizio 12:
Pulsanti con Effetto Rollover
Fig. 1
L’oggetto grafico di partenza
per la costruzione del
pulsante
Fig. 2
L’effetto grafico applicato:
Inner Bevel con bordi
smussati
Esercizio 9: Disegnare un pulsante con effetto rollover semplice.
Fireworks offre la possibilità di creare facilmente pulsanti con effetto
rollover come simboli di tipo pulsante. In questo esercizio partiremo
da un’oggetto vettoriale che rappresenterà la base del nostro
pulsante, ossia il pulsante nello stato iniziale Up. Convertiremo poi
questo oggetto vettoriale in un simbolo di tipo pulsante (Button
Symbol) e all’interno di un editor speciale per i pulsanti, il Button
Editor, definiremo le immagini grafiche per gli altri stati del pulsante
in modo da ottenere un pulsante con effetto rollover semplice che
fornisca un riscontro visivo alle azioni del mouse.
La base del pulsante
Passo 1: Aprire il file start_pulsante.png. Compare un oggetto
vettoriale rettangolare (Fig.1) a cui è stato applicato un effetto grafico
Inner Bevel per ottenere l’effetto di un pulsante con i bordi smussati
(Fig.2).
Passo 2: Modificare gli attributi grafici del pulsante (Contorno,
Riempimento, Effetti) a piacere per ottenere la base di pulsante
desiderata.
Tenere conto del fatto che più avanti creeremo delle copie di questo
pulsante per costruire una piccola barra di navigazione.
1
Esercizio 12:
Pulsanti con Effetto Rollover
Fig. 1
La finestra di dialogo Symbol Properties
Fig. 3
L’oggetto circolare
rappresenta il controllo
del comportamento del
pulsante
Visualizza
Zone
attive
Fig. 2
Il nuovo simbolo compare nella
finestra Library
Nascondi
Zone
Attive
Convertire l’oggetto vettoriale di base in un simbolo di tipo
Pulsante
Una volta creata la base del pulsante come un oggetto vettoriale,
convertiamo questo oggetto in un simbolo di tipo pulsante.
Passo 3: Con l’oggetto grafico selezionato, scegliere Insert ->
Convert to Symbol dal menu principale.
Passo 4: Nella finestra di dialogo Symbol Properties dare un nome al
simbolo (pulsante_blu nell’es.) e selezionare Button per trasformare il
nostro rettangolo in un simbolo di tipo pulsante (Fig.1).
Osservazione: Abbiamo già incontrato i simboli nella parte sulle
animazioni. Ricordiamo che un simbolo è un elemento grafico
riutilizzabile, immagazzinato nella libreria del documento in cui viene
creato (Fig.2). La freccia nell’angolo sinistro dell’oggetto (Fig. 3 in alto)
sta a indicare che si tratta dell’istanza di un simbolo presente in
libreria e non di un semplice oggetto grafico.
Passo 5: Selezionare nella barra strumenti l’opzione Visualizza zone
attive (Fig.3 in basso). Si noti che nella finestra del documento il
pulsante appare ricoperto di una patina verdina. La patina verdina sta
a indicare che la porzione del documento sul pulsante è una zona
calda, ossia intuitivamente una porzione (Slice) del documento in cui
è possibile riconoscere le azioni del mouse e associarvi
comportamenti. Quando selezioniamo il pulsante in modalità Visualizza
zone calde compare un oggetto circolare (Fig.3 in alto) che può essere
usato per controllare i comportamenti associati al pulsante, ad
esempio, come vedremo nel prossimo esercizio, per associare allo stato
Over del mouse sul pulsante uno scambio di immagine in una porzione
del documento, creando un effetto di disjoint rollover.
2
Esercizio 12:
Pulsanti con Effetto Rollover
Inserire una casella di
testo sul rettangolo
Fig.2.A
Strumento
Inserisci
Testo
Fig. 2.B
Fig. 1
L’editor per i simboli di tipo pulsante
L’editor di simboli per i pulsanti
Passo 6: Fare doppio click sul pulsante nel foglio di lavoro per
visualizzare l’Editor di Simboli che nel caso dei simboli di tipo pulsante
ha delle opzioni particolari che facilitano la creazione di stati differenti
per definire l’effetto rollover del pulsante (Fig.1). Possiamo creare fino a
quattro diversi stati per il pulsante. Le prime quattro voci (Up, Over,
Down, Over While Down) del menu a schede nella parte superioire
dell’editor corrispondono ai quattro stati di un pulsante con effetto
rollover semplice. Tali stati del pulsante, quando e se vengono definiti,
vengono visualizzati in quattro diversi fotogrammi nella finestra Frame:
up sul primo fotogramma, Over sul secondo fotogramma e così via.
Passo 7: Completiamo la definizione della grafica per lo stato Up del
pulsante. Selezionare lo strumento Inserisci Testo (Fig. 2.A) e fare
click sul rettangolo per visualizzare l’editor di testo. Digitare la parola
mare, scegliere stile, colore e dimensione del font (il font utilizzato in
Fig. 2.B è un Impact 24 bianco), dare l’ok. Passo 8: Per centrare la
scritta sul pulsante come in Fig. 2.B, selezionate sia il pulsante sia il
testo utilizzando il tasto Shift. Dal menu principale scegliere Modify ->
Align -> Center Vertical e subito dopo, con i due oggetti ancora
selezionati, Modify -> Center -> Horizontal. L’oggetto grafico
risultante è quallo che verrà visualizzato come stato Up del pulsante,
ossia quando il mouse dell’utente non è ancora entrato nell’area del
pulsante.
3
Esercizio 12:
Pulsanti con Effetto Rollover
Fig. 3
Fig. 1
Disegnare la grafica per lo stato Over.
L’apparenza del
pulsante negli stati Up
e Over.
Up
Over
Fig. 2
L’opzione Copy Up Graphics.
Creare la grafica per lo stato Over del pulsante
Ora passiamo a definire nel Button Editor la grafica per lo stato Over
del pulsante, ossia il modo in cui il pulsante appare quando il puntatore
del mouse passa sull’area delimitata dal pulsante.
Passo 9: Fare click su Over nel menu a schede della finestra editor
(Fig.1).
Passo 10: Cliccando sul pulsante Copy Up Graphic in basso a destra
nella finestra Symbol Editor (Fig. 2) viene caricata la stessa immagine
dello stato precedente (Up), che possiamo modificare a piacere per
definire l’apparenza del pulsante nello stato Over.
Passo 11: Modificare il pulsante come si desidera appaia nello stato
Over. Un suggerimento in figura 3 dove è stata modificata la sfumatura
di riempimento in modo che vada dal bianco al blu, anziché dal blu al
bianco come nello stato Up. Potremmo andare avanti così e definire
anche le apparenze del pulsante per gli stati Down e Over while
Down, ma ci fermiamo qui in questo esercizio.
4
Esercizio 12:
Pulsanti con Effetto Rollover
Associare un
nuovo
comportamento
all’oggetto
Eliminare un
comportamento
precedentemente
associato
La finestra Behaviors di un oggetto attivo
Passo 12: Andiamo a vedere adesso cosa è successo nella finestrella
Comportamenti (Behaviors), che permette di visualizzare e aggiungere
comportamenti Javascript a pulsanti e zone attive (Slice o hotspot).
Se la finestrella non è già aperta si vada su Window -> Behaviors.
Vediamo che, lavorando nell’editor del pulsante, nella finestrella
Behaviors è stato automaticamente aggiunto a pulsante_blu un
comportamento di rollover semplice innescato dall’evento
mouse_sopra_il_pulsante (onMouseOver).
Osservazione: Utilizzando l’editor per i pulsanti abbiamo creato un
pulsante con effetto rollover semplice senza scrivere codice
Javascript. Quando esporteremo il file creato in HTML, Fireworks
genererà automaticamente il codice Javascript che verrà
opportunamente incluso nel file HTML.
5
Esercizio 12:
Pulsanti con Effetto Rollover
Fig. 2
Link Wizard: per associare un URL a un pulsante
Fig. 1
La voce Active Area
Fig. 3
Campo per l’URL
Campo <ALT>
Campo per il
messaggio di stato
Fig. 4
Assegnare un URL al pulsante
L’ultima voce del menu a schede in Button Editor permette di
specificare un URL a cui collegarsi quando si fa click sul pulsante.
Passo 13: Selezionare dal menu a schede la voce Active Area (Fig.1) e
fare click su Link Wizard (Fig.2) per visualizzare la finestra di dialogo
Link Wizard.
Passo 14: Selezionare la voce Link dal menu a schede (Fig.3) e inserire
nell’apposito campo contrassegnato dall’icona a maglia di catena l’URL
della pagina web che si vuole associare al pulsante. Nel secondo
campo della finestra di dialogo, contrassegnato da <alt>, è possibile
specificare un testo che descrive l’oggetto pulsante e che verrà
visualizzato dal browser quando l’oggetto è disattivato o non è
disponibile. Nel terzo campo, contrassegnatoi dall’etichetta Status
Bar Text, è possibile specificare, se lo si desidera, un messaggio di
stato che venga visualizzato nella barra di stato del browser quando il
mouse si trova sull’area attiva. Utilizzare i messaggi di stato permette
di informare i navigatori su quello che vedranno quando fanno click su
una zona attiva.
Passo 15: Inserire i testi desiderati nei campi <alt> e messaggio di
stato e fare click su Ok.
Passo 16: Uscire dall’editor del pulsante. Prima di selezionare la voce
Anteprima nella finestra del documento per vedere il risultato, fare
click sull’icona Nascondi zone attive (Hide Slices) nella barra degli
strumenti (Fig.4) per nascondere la patina verdina.
Passo 17: Per provare il buon funzionamento del link associato al
pulsante, scegliere File -> Preview in Browser e selezionare il
browser desiderato. Il browser visualizzerà una versione html
temporanea del file in costruzione. Provare a cliccare sul pulsante per
collegarsi all’URL associata.
6
Esercizio 13:
Fig. 1
Trascinare da Library sul
documento una nuova
istanza del pulsante
Fig. 3
Modificare il testo della
nuova istanza
Barre di navigazione
Fig. 2
Fig. 4
Creare nuove istanze di un pulsante con effetto rollover
Vedremo adesso come sfruttare il fatto di lavorare con oggetti simbolo
immagazzinati in libreria per creare nuove istanze del pulsante con
effetto rollover appena definito e realizzare così velocemente una barra
di navigazione. Partiamo dal documento dell’esercizio precedente.
Passo 1: Selezionare dalla finestra Library il simbolo pulsante_blu e
trascinare una nuova istanza del pulsante sul documento accanto al
pulsante già inserito aiutandovi con le guide per l’allineamento (Fig.1).
Passo 2: Selezionare l’istanza appena creata per aprire l’editor del
pulsante. Appare una finestra di dialogo che domanda se desideriamo
modificare tutte le istanze del pulsante o solo la corrente. Si selezioni
corrente, perché il testo venga modificato solo sulla nuova istanza del
pulsante (Fig. 2). Fare doppio click sul testo e modificarlo sostituendo la
parola Arte alla parola Mare (Fig. 3). Quando si clicca su ok nell’editor di
testi, appare un messaggio di warning (Fig. 4) che domanda se
vogliamo sostutuire il nuovo testo in tutti gli stati del pulsante corrente
(ossia, in Up e Over nel nostro caso). Rispondere Yes.
Passo 3: Selezionare la voce Active Area e inserire l’URL che si vuole
associare al pulsante con l’etichetta Arte come abbiamo imparato.
Passo 4: Si guardi in anteprima il risultato.
7
Esercizio 14:
Scambia immagini
Fig. 1
Fig. 2
In Frame1: importa l’immagine marett.jpg
nell’area sotto la barra di navigazione
1
2
3
Fig. 4
Fig. 3
Slice
Tool
Partiamo dal documento prodotto nell’esercizio precedente.
Importeremo nel nostro documento due immagini jpg e le useremo
per creare un effetto rollover separato (disjoint rollover), dove
in riposta al passaggio del mouse su un pulsante, avviene uno
scambio di immagine in una diversa area del documento.
Passo 1: Usare le guide per individuare l’area dove vogliamo avvenga
lo scambio immagine (area rossa in Fig.1).
Passo 2: Importare l’immagine marett.jpg sul documento e
posizionarla/ridimensionarla in modo che copra l’area rettangolare
sotto la barra di navigazione. Questa immagine compare all’inizio,
prima di qualsiasi interazione (lo stato di default è su Frame 1).
Gli effetti di rollover disgiunto da applicare ai due pulsanti: A)
Pulsante Arte: Vogliamo che, quando l’utente col mouse passa sul
pulsante Arte (area 2, Fig 2), nell’area dove abbiamo importato la
figura (area 3 in Fig.2) avvenga uno scambio con un’altra
immagine (koutoub.jpg) che importeremo fra poco. B) Pulsante
Mare: Inoltre vogliamo che marett.jpg ricompaia quando l’utente
col mouse ripassa sul pulsante Mare (area 1 in Fig.2).
Per creare un effetto rollover in un area diversa da quella del
pulsante occorre che tutti gli oggetti coinvolti (i due pulsanti e le
immagini che vengono scambiate) siano zone attive (Slices). I
pulsanti sono già zone attive. Dobbiamo associare una zona attiva
anche all’immagine appena importata, ossia, intuitivamente,
rendere attiva l’area del documento dove vogliamo avvenga lo
scambio immagine.
Passo 3: Per inserire automaticamente una zona attiva (Slice)
sull’immagine importata, selezionare l’immagine e scegliere Insert > Slice dal menu principale. Sull’immagine appaiono la patina
verdina e l’icona circolare per il controllo del comportamento. Per
inserire manualmente una zona attiva su oggetti del documento è’
possibile utilizzare lo strumento Slice Tool (Fig. 4). Notare che nella
finestra dei livelli la zona attiva compare nel Web Layer (Fig. 3).
8
Esercizio 14:
Scambia immagini
Fig. 1
Crea un nuovo fotogramma
per lo scambio immagine
3
Fig. 2
In Frame 2: Importare l’immagine
koutoub.jpg e
posizionarla/ridimensionarla nella
Porzione 3
Creare un nuovo fotogramma per koutoub.jpg
Passo 4: Nella finestra Frame creiamo un nuovo fotogramma (Fig. 1).
Questo secondo fotogramma ci serve per importare la seconda
immagine da associare al pulsante Arte e posizionarla sulla stessa area
in cui abbiamo posizionato marett.jpg in fotogramma 1.
Passo 5: Selezionare Frame 2 e importare l’immagine koutoub.jpg sul
documento. Posizionare e ridimensionare l’immagine in modo che
ricopra l’area attiva creata (slice) dove vogliamo avvenga lo scambio
immagine (area rossa numero 3 in Fig.2)
9
Esercizio 14:
Scambia immagini
Fig. 1
Trascina il controllo del
pulsante Arte (area attiva 2)
sull’immagine (area attiva 3)
1
2
3
Fig. 3
Scambia l’immagine: visualizza
l’immagine che si trova nell’area
3 in Frame 2 (koutoub.jpg)
Frame 1
3
Control behavior
del pulsante Arte
Fig. 2
Scambia l’immagine prendendo
da Frame2
Frame 2
3
Inserire un comportamento Scambia Immagine usando le Zone
attive
Cominciamo ad associare al Pulsante Arte un effetto di rollover
disgiunto, tale che quando l’utente col mouse passa sul pulsante
(area 2, Fig. 1) nell’area sottostante (area 3 in Fig.1) avvenga uno
scambio di immagine dal paesaggio marino (marett.jpg) al
minareto (koutoub.jpg). Per creare l’associazione immaginepulsante, nella finestra documento trascineremo il puntatore dal
controllo del pulsante alla zona attiva che ricopre le immagini
importate.
Passo 6: Con lo strumento puntatore nero, selezionare il pulsante
Arte in modo che appaia la piccola icona circolare del control
behavior.
Passo 7: Fare click sul control behavior del pulsante Arte e
trascinarlo sulla zona attiva 3 (Fig. 1). Una linea blu, detta
behavior line, lega ora il controllo del pulsante alla zona attiva
sull’area immagini, indicando che le due zone attive (area 2 e area 3
in Fig. 1) hanno un comportamento associato. Inoltre appare la
finestra di dialogo Swap Image.
Passo 8: Nella finestra di dialogo Swap Image, specificare che si
vuole prendere l’immagine da visualizzare durante il rollover da
Frame 2 (Fig. 2). Infatti lo scambio immagine durante il rollover su
un pulsante avviene visualizzando l’immagine che si trova sulla zona
attiva associata nel fotogramma specificato. Nel nostro caso
occorre specificare il secondo fotogramma perché è lì che abbiamo
posizionato l’immagine che vogliamo associare al rollover su Arte. Si
clicchi su ok. Abbiamo creato un effetto di rollover disgiunto: quando
passiamo col mouse sul pulsante Arte nell’area 3 viene visualizzata
l’immagine del minareto (Fig. 3).
10
Esercizio 14:
Fig. 1
Trascina il
controllo del
pulsante Mare
(area attiva 1)
sull’immagine
(area attiva 3)
Scambia immagini
1
3
Fig. 2
Scambia immagine prendendo
da Frame1
Eventi
Fig. 3
Il comportamento Scambia
Immagine è associato
all’evento on Mouse Over
Inserire un comportamento Scambia Immagine usando le Zone
attive
Associamo ora al Pulsante Mare un effetto rollover, in modo che
marett.jpg ricompaia nella zona attiva delle immagini (area 3 in Fig.
1) quando l’utente col mouse ripassa sul pulsante Mare (area 1 in
Fig.1).
Passo 9: Sul documento selezionare il pulsante Mare in modo da
visualizzare il control behavior e, come per il pulsante Arte,
trascinare il controllo del pulsante sulla zona attiva dove avviene lo
scambio immagine (Fig. 1).
Passo 10: Nella finestra di dialogo Swap Image, specificare che si
vuole visualizzare l’immagine che si trova nel primo fotogramma
(Fig. 2), giacché è lì che abbiamo importato l’immagine marett.jpg
ed è questa l’immagine che vogliamo associare al rollover su pulsante
Mare. Si clicchi su ok.
Passo 11: Con il pulsante selezionato si torni a visualizzare la finestrella
dei comportamenti (Behaviors). Si osservi che il nuovo
comportamento Scambia Immagine che abbiamo appena associato
al pulsante viene visualizzato di seguito a quello di Rollover
Semplice introdotto in precedenza. Viene inoltre specificato che lo
scambio di immagini è scatenato dall’evento on Mouse Over (ossia
mouse sull’area del pulsante). Aprendo la tendina associata agli
eventi possiamo visualizzare l’elenco completo degli eventi su punti
attivi a cui è possibile associare un comportamento: On Mouse
Over (mouse sul punto attivo), On Mouse Out (mouse che esce dal
punto attivo), on click (click sul punto attivo), on Load (appena la
pagina web viene caricata).
11
Esercizio 14:
3
3
Scambia immagini
Fig. 1
Mouse su Mare:
visualizza in zona
attiva 3 l’immagine
che si trova in
Fotogramma 1
(marett.jpg)
Fig. 3
I comportamenti
Fig. 2
Mouse su Arte:
visualizza in zona
attiva 3 l’immagine
che si trova in
Fotogramma 2
(koutoub.jpg)
Passo 12: Nella finestra del documento, seleziona la voce Preview nel
menu schede e prova a passare da un pulsante all’altro per visualizzare
l’effetto di rollover con scambio immagine.
Osservazione: Oltre che lavorando sulla finestra documento con le aree
attive e i control behavior, è possibile associare comportamenti a un
pulsante (o più in generale a una zona attiva – Slice o hotspot)
utilizzando la finestra Behaviors.
I comportamenti disponibili vengono visualizzati aprendo il menu a
comparsa dell’icona “+” (Fig. 3). Ne commentiamo alcuni:
• Simple Rollover: crea un effetto rollover utilizzando Frame 1 come
stato Up, e Frame 2 come stato Over. Una volta selezionato questo
comportamento, occorre creare un’immagine per lo stato Over in un
secondo fotogramma, sulla stessa slice.
• Swap Image: crea un effetto rollover semplice e rimpiazza
un’immagine in una slice specificata con un’altra immagine che si trovi
nella stessa slice ma su un fotogramma diverso.
• Swap Image Restore: riporta il rollover nel suo stato di default su
fotogramma 1.
• Set Pop-Up Menu: associa un menu a comparsa a una Slice o a un
hotspot.
• Set Text of Status Bar: permette di specificare un testo da mostrare
nella barra di stato nella parte bassa del browser.
12