Grafica  »  Guide  »  Guida Fireworks 

Nota: in questa lezione si fa uso del filtro Alien Skin Splat LE che non è presente in Fireworks 4, ma il mancato utilizzo di questa caratteristica non compromette il funzionamento dell'effetto e quindi può essere saltato.

I pulsanti di navigazione principale, oltre ad avere un rollover che fa cambiare colore al testo, presentano anche un altro effetto noto con il nome di rollover disgiunto: quando il puntatore del mouse passa sopra di essi nella parte superiore della barra compare un'immagine diversa per ogni pulsante.

Lavoriamo ancora con il file interfaccia.png. Apriamo il pannello Livelli, creiamo un nuovo livello (Livello2) e blocchiamo il Livello1.

Nel nuovo livello disegniamo un rettangolo 240x70 senza bordi, con un riempimento qualsiasi e posizioniamolo in X = 440, Y = 2.
Apriamo il pannello fotogrammi e dal menu Opzioni (attivabile cliccando sul pulsante indicato dalla freccia rossa) scegliamo Duplica fotogramma impostando 5 fotogrammi e selezionando l'opzione Dopo il fotogramma corrente.

Selezioniamo il fotogramma 2, cancelliamo il rettangolo sopra i pulsanti e importiamo l'immagine africa.jpg dalla cartella "originali".

Posizioniamo l'immagine in X = 440, Y = 2 e applichiamole uno dei filtri messi a disposizione da Fireworks MX: Filtri > Alien Skin Splat LE > Edges. Nella finestra di dialogo che si apre impostiamo i seguenti parametri:
Edge width = 20.00
Margin = 0.00
Feature size = 40.00
Edge Mode = Halfatone Dots
Color > Definisci colori personalizzati: Rosso = 255, Verde = 204, Blu = 0 (equivalente a #FFCC00).

Niente vieta che proviate altre combinazioni dei parametri (soprattutto l'Edge Mode) che potrebbero piacervi di più!

Ripetiamo quanto fatto per il fotogramma 2 anche per i quattro fotogrammi seguenti cambiando, ovviamente, l'immagine da importare; in particolare: nel fotogramma 3 importiamo america.jpg, nel 4 asia.jpg, nel 5 europa.jpg e nel 6 oceania.jpg.

Nota: potete cambiare gli effetti da applicare alle varie immagini nei fotogrammi, l'unica cosa importante è che le foto vengano posizionate tutte nello stesso punto.

Una volta terminate queste operazioni torniamo al fotogramma 1, selezioniamo il rettangolo, togliamo il riempimento e scegliamo Modifica > Inserisci > Porzione.

Modifichiamo leggermente dimensioni e posizione della porzione portandoli rispettivamente a 240x74 e X = 440, Y = 0. Capiremo nella prossima lezione il perché di tale modifica.

Siamo adesso alla realizzazione del comportamento da associare ai pulsanti per ottenere l'effetto voluto. Sblocchiamo il Livello1, selezioniamo il primo pulsante a sinistra (Africa), clicchiamo sul cerchietto che compare al centro e, tenendo premuto il tasto del mouse, trasciniamo sulla porzione che abbiamo inserito in corrispondenza del rettangolo trasparente. Si apre una piccola finestra di dialogo, dal menu a discesa selezioniamo Fotogramma 2 e confermiamo cliccando su OK.

Ripetiamo quanto fatto anche per gli altri quattro pulsanti scegliendo ogni volta dal menu a discesa il fotogramma che contiene l'immagine che vogliamo associare al pulsante.

Testiamo il nostro lavoro con l'ormai consueto F12 e se tutto funziona salviamo il documento.

Altri articoli

Altre guide

Altre newsletter