GuIdA pRAtIcA Al cORSO dI AdVERtISING ONlINE

GIOVANNI MERONI
Guida pratica
al CORSO DI
ADVERTISING
ONLINE
AGGIORNATO al 2011
versione beta
Impaginare un banner in Adobe
Photoshop
In questo capitolo sarà illustrato come creare un layout
grafico di un banner pubblicitario, in Adobe Photoshop.
Per impostare graficamente un banner è sempre preferibile
un layout prima di passare al montaggio. Photoshop è un
elaboratore di immagini molto potente, ed è più adatto
a progettare. Permette inoltre degli effetti grafici che
direttamente con Flash non sarebbe possibile ottenere.
Per iniziare, apriamo Photoshop e apriamo un nuovo
documento con il comando
File > Nuovo
Apparirà una finestra che permetterà di impostare l’area
di lavoro del banner.
Il formato è il Box, 300x250 pixel. Le misure sono sempre
base x altezza.
Inserire il prodotto
Cercare un prodotto semplice da scontornare (es. una
lattina di una bibita). Scaricare l’immagine e aprirla in
Photoshop. Scontornare l’immagine. Per procedere allo
2
Nota importante
Per tutti i progetti web è
sempre necessario usare
una risoluzione di 72 dpi
e impostare i pixel come
unità di misura. Il metodo
colore va impostato su RGB.
È anche molto importante
lavorare sempre in scala
1:1, per poter verificare
in tempo reale che cosa
effettivamente verrà visto
dai nostri utenti/visitatori.
Errore Frequente
Bisognerebbe sempre
evitare di progettare in
dimensioni più grandi di
quelle che effettivamente
andranno online.
Spesso si cade in questa
tentazione per poter
“vedere meglio i dettagli”,
con l’idea di rimpiccolire
tutto alla fine.
Progettare in dimensioni
reali può essere più difficile
in un primo momento, ma
realizzare in tempo reale
che cosa effettivamente
sarà visibile (e leggibile)
e che cosa non lo sarà è
importantissimo .
Anche il vettoriale è
sconsigliato per progettare.
Avendo sempre piena
risoluzione a qualsiasi
dimensione, rende
difficile stabilire che cosa
effettivamente verrà visto
dall’utente finale, a lavoro
finito.
scontorno è possibile usare diversi metodi,
anche combinabili fra di loro. Questi
metodi sono illustrati nel box “Guida allo
scontorno”, più avanti.
Trascinare la lattina scontornata sul
documento principale e posizionarla nella
parte sinistra dell’area di lavoro, facendo
attenzione a non farla uscire dalle guide
tracciate precedentemente.
È possibile ridimensionare gli oggetti
selezionandoli e premendo CTRL+T. Se si
desidera mantenere le proporzioni, tenere
SHIFT mentre si scala l’oggetto.
Impostare le guide
La prima cosa da fare è impostare delle guide
agli angoli dell’area di lavoro.
Aggiungere il riflesso
sotto la lattina
Con il tasto F8 (oppure finestra > info) aprire
il pannello Info.
Con SHIFT+R, aprire i righelli.
Per aggiungere il riflesso, basta
duplicare il livello (CLICK DESTRO
sul livello della lattina e “DUPLICA
LIVELLO”), rifletterlo verticalmente
(modifica > trasforma > rifletti
verticale) e abbassarlo in modo che
siano perfettamente appoggiati.
Creare poi una maschera di livello
sul livello di riflesso (selezionare il
livello e cliccare l’icona del quadrato
con un cerchio all’interno, alla base
della palette livelli) e tracciare un
gradiente verticale da bianco a nero,
con lo strumento sfumatura, sulla
maschera di livello appena creata,
in modo da sfumare gradualmente
il riflesso mano a mano che ci si
allontana dall’oggetto. A questo
punto regolare l’opacità del livello a
40% - 50%.
Con lo strumento “selezione rettangolare” (M)
selezionare un’area perfettamente quadrata
dall’angolo alto-sinistra di 20 pixel.
Tenere premuto il tasto Shift per mantenere
inalterate le proporzioni della selezione (per
tracciare quadrati o cerchi con base e altezza
uguali).
Controllare sul pannello info la dimensione
dell’area selezionata.
A questo punto, tirare due guide cliccando e
trascinando dai righelli, agganciandole alla
base e al lato dx del vostro quadrato.
Tracciare un quadrato, sempre di 20px anche
sul lato in basso a dx, e tirare altre due guide,
agganciandole alla parte superiore e al alto
sinistro del quadrato appena tracciato.
Le guide appena tracciate servono per
mantenere sempre un margine costante,
senza il rischio di sbordare.
È possibile nascondere le guide con Ctrl+H.
Quick Tip – è possibile regolare
velocemente l’opacità del livello
3
GUIDA ALLO
SCONTORNO
Strumento bacchetta
magica
Con lo strumento Bacchetta
Magica è possibile
selezionare un’area con
colori simili.
Basta cliccare su una
zona dell’immagine che
ha un colore uniforme per
selezionare tutti i pixel che
contengono quel colore e
le sue variazioni. Usare la
tolleranza per espandere
o diminuire la gamma
di colori che Photoshop
selezionerà.
Questo sistema non è
preciso e sconsigliato, ma è
molto rapido.
Con questa tecnica è
possibile selezionare lo
sfondo e rimuoverlo con il
tasto “canc”.
con il tastierino numerico. Con block num attivato e il
livello selezionato, premere i numeri da 1 al 0 per settare
l’opacità da 10% a 100% (1 equivale a 10%, 0 a 100%).
Aggiungere l’ombra sotto la lattina
Creare un nuovo layer vuoto tra lattina e riflesso.
Selezionare un pennello tondo, con i bordi sfumati. Dare
una pennellata al centro dell’area di lavoro, verificando
che non venga tagliata sui lati. Distorcere la pennellata con
CTRL+T, allungandola orizzontalmente e schiacciandola
verticalmente. Posizionare l’oggetto creato sotto la lattina.
Usare come metodo di fusione del livello “moltiplica”.
Intervallo colori
Con Intervallo colori si
seleziona un determinato
colore o intervallo di
colori in una selezione o
immagine.
Se lo sfondo è uniforme,
è possibile selezionarlo
facilmente: basta andare su
selezione > Intervallo colori,
cliccare su un’area dello
sfondo con il contagocce e
impostare la tolleranza, in
modo da selezionare solo lo
sfondo.
A questo punto, cancellare
lo sfondo.
Regolare l’opacità del livello al valore desiderato
(consigliato 60%)
Aggiungere uno sfondo
Per disegnare lo sfondo è possibile usare una
combinazione di gradienti.
Create un nuovo livello di sfondo sotto la lattina appena
importata.
Selezionare due tonalità simili sul “colore di primo piano”
e sul “colore di sfondo”.
4
Selezionare lo strumento sfumatura/gradiente (G).
Sulla parte alta (sotto file) apparirà un gradiente. Cliccate
sulla freccia e selezionate il gradiente desiderato (quello
con i due colori appena selezionati).
Tracciare un gradiente dall’alto al basso dell’area di lavoro.
Per creare un taglio che possa simulare l’orizzonte,
scegliere un colore leggermente più scuro dello sfondo.
Selezionare lo strumento pennello (B).
Selezionare, sotto il menù “file” un pennello con i bordi
sfumati, non troppo grande (in modo che la pennellata
non esca dall’area di lavoro) e dare una pennellata al
Strumento Penna
Lo strumento Penna
(P) è la scelta migliore
per scontornare: è
estremamente preciso. È
però un po’ più difficile da
usare rispetto agli altri due
strumenti sopraelencati.
Necessita infatti una base di
disegno vettoriale.
È consigliato selezionare
l’opzione “livelli di
forma” (sotto la voce file,
selezionando il pennino).
I livelli Forma di Photoshop
sono dei livelli che ci
permettono di lavorare con
forme vettoriali.
Con il pennino (e i livelli di
forma attivati) scontornare
l’oggetto.
Una volta scontornato,
fare CTRL+CLIC sulla parte
grigia del layer di forma
(che si sarà creato sopra
il livello dell’oggetto da
scontornare). Ora che l’area
è selezionata, invertire
la selezione, selezionare
il livello dell’oggetto da
scontornare e rimuovere il
background con CANC.
centro dell’area di lavoro.
Selezionare con lo strumento di selezione rettangolare (M)
la metà superiore della pennellata e cancellarla con CANC.
Deformare la mezza pennellata in modo da ottenere un
effetto di taglio/orizzonte.
Selezionare “moltiplica” come metodo di fusione del
livello.
Con un procedimento simile a quello sopraelencato, è
possibile ottenere un’altra mezza pennellata, con un
colore più chiaro rispetto allo sfondo, selezionando
5
Selezionare
rapidamente
È possibile selezionare
direttamente gli elementi
dell’area di lavoro con
CTRL+CLICK
Per selezionare rapidamente
un oggetto in Photoshop senza dover cercare il layer
di riferimento - è possibile
utilizzare il comando
selezione automatica (in
alto a sinistra, sotto “file”).
Il metodo consigliato
da questa guida, però,
è di non attivare questa
funzione, ma di selezionare
“selezione automatica:
livello” e cliccare sugli
oggetti all’interno dell’area
di lavoro con CTRL+CLICK
per selezionarli
direttamente.
e cancellando la parte inferiore. Con questa nuova
pennellata si otterrà un effetto di lumeggiatura, da
accostare al taglio precedentemente ottenuto.
Inserire una Headline
Per inserire un titolo, selezionare lo strumento di testo
orizzontale, scrivere una headline e formattare il testo
tramite i pannelli “carattere” e “paragrafo” (accessibili
dalla voce “finestra”).
In questo caso è opportuno optare per un allineamento
bandiera sinistra.
Creazione di un bottone call-to action
Il bottone è un elemento molto importante
nell’advertising online, pertanto la resa grafica deve essere
opportunamente curata. Per disegnare un bottone, è consigliato utilizzare degli shape
layers vettoriali. Per disegnarli, selezionare lo strumento rettangolo o rettangolo con i
bordi arrotondati (U), verificare che l’opzione livelli di forma o shape layers sia attivata
(sotto il menù “file”) e disegnare il corpo del bottone.
A questo corpo vettoriale verranno applicati degli “stili livello” che ne determineranno
l’aspetto. Usare una combinazione di stili livello e forme vettoriali rende questi elementi
6
estremamente flessibili.
Per applicare uno stile vettoriale,
selezionare il livello della forma e cliccare
il piccolo fx in basso alla palette dei livelli
(che viene richiamata con F7).
A questo punto sarà possibile selezionare
diversi stili per personalizzare il proprio
bottone.
Vale la pena familiarizzare con questi
comandi, in modo da padroneggiarli e
poterli usare creativamente per poter
produrre diversi tipi di bottone. In questo
caso, possiamo utilizzare:
un gradiente lineare (sovrapposizione
sfumatura), angolo 90° come da default,
con colori molto contrastati rispetto allo
sfondo
un’ombra interna scura a distanza 0,
dimensione 15 per dare profondità con
metodo fusione moltiplica
una traccia bianca di 2 px
un’ombra esterna scura –disattivando
luce globale- con angolo 90, dimensione e
distanza 5 con metodo fusione moltiplica
A questo punto, sempre con lo strumento
di testo, create il testo (“scopri”) da inserire
sul bottone più una freccia. Anche su
questo testo, è possibile applicare stili
livello (esempio ombra esterna distanza 1,
estensione e dimensione 0).
Raggruppate (CTRL+G) il bottone.
7
Esportare da Photoshop per Flash
Ora che il banner è stato progettato interamente, è
possibile esportare singolarmente gli elementi, per poterli
poi importare in flash.
Isolare gli oggetti
Per esportare, bisogna prima di tutto isolare ogni
elemento. Per isolare si intende avere un documento che
contenga solo l’oggetto che si desidera esportare, senza
altri elementi.
Per isolare ci sono diversi modi. Qui di seguito ne viene
illustrato uno.
Importante: importare
il vettoriale
Il vettoriale può essere
importato direttamente
da illustrator a flash con
un semplice CTRL+C e
CTRL+V. Flash supporta
perfettamente il vettoriale,
pertanto è sconsigliato
esportare il vettoriale come
immagine da photoshop.
Creare un nuovo documento vuoto, molto grande (es. 1024x768)
Selezionare l’oggetto che si desidera esportare (per esempio la lattina), e trascinarlo nel
nuovo documento.
Disattivare il livello di sfondo (nel caso non si tratti di un oggetto rettangolare)
Usare lo strumento Taglierina/Crop ( C ) per tagliare il margine in eccesso. Nel caso di
oggetti rettangolari, è possibile tagliare a filo (anche usando immagine > rifila). Nel caso
di oggetti non rettangolari (con aree trasparenti) lasciare qualche pixel di margine.
Usare “File” > “salva per web e dispositivi” per aprire il pannello di esportazione.
Pannello di esportazione
A seconda della tipologia di immagine, dobbiamo indicare l’estensione (png, jpeg o gif)
con cui esportare il nostro oggetto:
JPEG
Gli oggetti che non hanno fondo trasparente (quindi sono completamente solidi) vanno
esportati in JPEG.
PNG-24
Per tutti gli elementi raster con fondo trasparente (anche, per esempio, i rettangoli con il
bordo arrotondato) è necessario esportare in png.
8
GIF
Da usare per oggetti piatti, senza sfumature, eventualmente con fondo trasparente. È
meno potente della png (preferire dunque quest’ultima), l’unico vantaggio può essere un
minore peso.
Una volta scelta l’estensione, in alto a dx, premere su salva per completare l’esportazione
(scegliendo la cartella e il nome del file che andremo ad esportare).
A questo punto, isolare ed esportare tutti i nostri elementi.
Lattina, ombra, riflesso e bottone (intero) vanno esportati in PNG (perché trasparenti).
Il background va esportato in jpeg. È consigliabile esportare anche una jpeg di tutto
il banner (tutti gli elementi attivati), che servirà da traccia per posizionare tutti gli
elementi in flash. Il testo che abbiamo inserito in Photoshop, invece, potrà essere riscritto
tranquillamente in flash.
9
Animare il banner il flash
Aprire Adobe Flash.
Creare un nuovo documento andando su file > nuovo.
È possibile selezionare il tipo di Actionscript (codice utilizzato da Flash) da utilizzare.
Actionscript è il linguaggio di programmazione di Flash, e viene utilizzato per gli aspetti
più avanzati ed interattivi del programma. Lo scopo di questa guida è approfondire gli
aspetti grafici, creativi e di animazione Flash, pertanto la parte legata al codice verrà solo
brevemente accennata.
In questo corso sarà trattata la versione 2.0 di Actionscript.
PREPARARE L’AREA DI LAVORO
La prima cosa da fare è assegnare all’area
di lavoro le giuste dimensioni e il framerate
desiderato.
Per poter settare le dimensioni e il
framerate, è necessario il pannello
Proprietà.
Se non è già aperto, andare su Finestra >
Proprietà > Proprietà
Impostare le dimensioni del documento
desiderate (per questo progetto le
dimensioni sono 300x250px) e impostare
gli FPS (framerate) a 30.
Gli FPS (Frame per secondo)
Gli FPS sono i frame per secondo.
Più è alto il valore di fps più il filmato è
fluido e rapido.
10
È sempre opportuno settare gli FPS a 30 per avere il risultato più fluido possibile.
Alzare il framerate oltre i 30 renderebbe il filmato ancora più fluido, ma difficilmente la
differenza verrebbe percepita dall’occhio umano. 30 è quindi il miglior compromesso:
valori maggiori allungherebbero la timeline e renderebbero il progetto più difficile da
gestire.
La Timeline
La timeline è la rappresentazione lineare dello stato di un’animazione dal primo
all’ultimo frame.
È il righello numerato, composto da piccoli rettangoli, che si trova nella parte bassa
dell’interfaccia del programma.
Permette la gestione dei livelli e delle animazioni di Flash.
Di default, appena un documento viene creato, la timeline ha un solo livello e un solo
fotogramma.
I livelli
I livelli vengono “impilati” in verticale, uno sopra all’altro.
Il contenuto dei livelli più “in alto” si vede di fronte rispetto ai livelli più “in basso”.
È possibile creare nuovi livelli cliccando sulla piccola icona a forma di pagina, in basso a
sinistra.
Per eliminare i livelli, cliccare sull’icona del bidone della spazzatura. Per raggruppare i
livelli in cartelle, cliccare sull’icona della cartella e trascinare i livelli desiderati al suo
11
interno.
Per nascondere un livello (non visualizzarlo, senza doverlo eliminare), cliccare sul
puntino sotto l’icona dell’occhio. Cliccare una seconda volta nello stesso punto per
renderlo nuovamente visibile.
Per bloccare un livello (renderlo non selezionabile e non modificabile), cliccare sul
puntino sotto l’icona del lucchetto. Cliccare una seconda volta nello stesso punto per
renderlo nuovamente sbloccato.
I fotogrammi
I fotogrammi, i vari rettangolini che si susseguono in orizzontale, rappresentano lo
scorrere del tempo. I numeri, multipli di 5, in alto alla timeline, indicano il numero
di fotogrammi. Alla creazione del documento, i fotogrammi per secondo sono stati
impostati a 30. Questo significa che al fotogramma numero 30, sarà passato un secondo.
I fotogrammi possono essere chiave oppure normali, pieni o vuoti.
I fotogrammi chiave hanno sempre al loro interno un punto. Se il fotogramma e il punto
sono bianchi, il fotogramma è chiave e vuoto. Se il fotogramma è grigio e il punto è nero,
il fotogramma è chiave e pieno.
I fotogrammi normali sono senza punto al loro interno, e possono essere grigi (pieni)
oppure bianchi (vuoti).
Le zone divise da piccole righe, con i piccoli riquadri bianchi separati ogni 5 da uno più
scuro, non sono fotogrammi: sono dei segnaposto, che possono essere riempiti con dei
fotogrammi chiave, normali, pieni o vuoti.
Per creare dei fotogrammi, è possibile cliccare con il tasto destro su un qualsiasi riquadro
della timeline e selezionare la voce corrispondente al fotogramma che si desidera creare.
È anche possibile creare dei fotogrammi con delle shorcut: basta selezionare un punto
della timeline e premere da f5 a f7. Di seguito l’elenco delle shortcut e tipologie di
fotogrammi.
F5 > Crea un nuovo fotogramma (non chiave)
F6 > Crea un nuovo fotogramma chiave
F7 > Crea un nuovo fotogramma chiave vuoto
I fotogrammi pieni contengono sempre lo stesso (o gli stessi) oggetti del primo
fotogramma chiave che li precede.
12
Se abbiamo al fotogramma 1 un quadrato rosso, ci basta creare un fotogramma chiave al
fotogramma 5 (basta premere f6) per “riempire” con il quadrato rosso sia il fotogramma
chiave 6 che tutti i fotogrammi normali dal 2 al 4.
Quando creiamo un fotogramma chiave vuoto (f7) tutti i successivi saranno vuoti fino al
primo fotogramma chiave pieno.
13
Tagliare, copiare ed incollare i fotogrammi
Per correggere errori, oppure semplicemente per modificare alcune parti di filmato, è
necessaria la conoscenza di alcuni comandi base per agire sui fotogrammi.
Per spostare uno o più fotogrammi, selezionare i fotogrammi che si desidera spostare
(con un semplice clic+trascina, oppure, se si desidera maggio precisione, cliccare con il
pulsante sinistro sul primo fotogramma che si desidera spostare, poi, tenendo SHIFT,
cliccare sul secondo fotogramma che si desidera spostare. Verrà selezionato l’intero
intervallo tra i due fotogrammi).
Una volta selezionati i fotogrammi, avvicinare il mouse ai fotogrammi selezionati,
attendere che appaia il rettangolo vicino al puntatore e cliccare e trascinare nella
posizione desiderata.
Per eliminare i fotogrammi, selezionare i fotogrammi, cliccarli con il tasto destro e
selezionare “rimuovi fotogrammi”.
Per convertire un fotogramma chiave in uno normale, cliccarlo con il tasto destro e
selezionare “cancella fotogramma chiave”.
Con “Taglia” e “incolla” fotogrammi è possibile spostare, tagliare ed incollare diversi
fotogrammi simultaneamente.
Importare visuals in Flash
Per importare gli oggetti in Flash, andare su file > importa > importa nello stage.
Questo comando importa gli oggetti direttamente nello stage, nel fotogramma
selezionato.
Cercare la cartella nella quale sono contenuti gli oggetti da importare (gif, png, jpeg),
selezionare gli oggetti e confermare. Si ricorda che per il vettoriale è opportuno fare
copia e incolla da un documento RGB di Adobe Illustrator.
Tutti gli oggetti verranno inseriti in un unico fotogramma chiave, uno sopra l’altro.
14
Appena importati gli elementi, è necessario inserire ogni immagine/elemento su un
livello distinto: esistono due metodi per distribuire gli elementi sui vari livelli.
Metodo 1 (lento ma con massimo controllo)
È possibile creare un nuovo livello (cliccando sull’icona a pagina in basso a sinistra),
selezionare il singolo elemento al quale si desidera cambiare livello, tagliarlo con
CTRL+X, selezionare il nuovo livello che è appena stato creato e incollare con CTRL+V.
È possibile cambiare il nome del livello con un doppio clic sul nome dello stesso.
Metodo 2 (veloce)
Selezionare tutti gli oggetti presenti sul fotogramma. Cliccarne uno qualsiasi con il tasto
dx del mouse. Selezionare “Distribuisci su livelli”. Ora ogni oggetto è posizionato su
un livello differente. Il fotogramma che inizialmente conteneva tutti gli oggetti viene
svuotato (e solitamente è opportuno cancellarlo).
Con questo metodo, i livelli prendono i nomi degli oggetti che contengono,
automaticamente.
Ogni livello deve contenere un solo elemento, in modo da non creare conflitti quando si
procederà all’animazione.
Subito dopo aver distribuito gli oggetti sui livelli, è necessario convertire gli oggetti in
simbolo.
I Simboli
Convertire in simbolo gli oggetti è molto importante perché rende gli oggetti
“riconoscibili” da Flash, permettendo l’uso di effetti ed animazioni (vedere effetto colore
e filtri, più avanti).
Per convertire in simbolo, selezionare l’oggetto da convertire, cliccarlo con tasto destro
e selezionare “Converti in simbolo…” dal menu a comparsa. Un metodo alternativo più
rapido consiste nel selezionare l’oggetto e premere F8.
Sarà possibile dare un nome al simbolo e selezionarne il “tipo”.
Esistono 3 tipi di simboli. Grafico, Movieclip e Pulsante:
Grafici > simboli statici, tutti gli elementi statici dovrebbero essere convertiti in grafici.
15
Movieclip > simboli dinamici, funzionano come dei micro-filmati con una loro timeline
all’interno dello stage. Se non vengono bloccati con uno “stop” alla fine della loro
timeline ricominciano il ciclo.
Pulsanti > pulsanti preimpostati di flash con quattro stati. Su (normale), sopra(rollover),
giù(cliccato) e premuto (area sensibile). Per i bottoni più piccoli o composti solo da testo
è opportuno impostare un’area sensibile più grande del bottone stesso. L’area sensibile
è invisibile. E’ possibile creare pulsanti trasparenti riempiendo solo l’area di premuto e
lasciando vuote su, sopra e giù.
Per animazioni semplici, si consiglia di utilizzare sempre “movieclip”, più potente e
versatile del Grafico.
A tutti i simboli è possibile applicare interpolazioni movimento, ma non interpolazioni
forma (riservate esclusivamente a forme non raggruppate). A tutti i simboli è possibile
associare un effetto (luminosità, tinta, alfa e avanzato) sul pannello proprietà > colore.
Agli oggetti non simboli non è possibile applicare questi effetti. Vedremo queste
proprietà più avanti.
Una volta convertiti in movieclip tutti gli oggetti, si è pronti ad animare.
Animazione Base
L’animazione base in flash si basa sull’avere due fotogrammi chiave sullo stesso livello,
che contengono lo stesso oggetto (movieclip) con proprietà differenti, collegati con
un’interpolazione di movimento.
Questa interpolazione farà una “media” tra le differenti proprietà sugli oggetti presenti
nei fotogrammi chiave.
Questa frase teorica risulterà immediatamente più chiara dopo il seguente tutorial.
Selezionare il fotogramma chiave 1.
Creare un cerchio senza bordo, con l’apposito strumento, e convertirlo in simbolo.
16
Selezionare il fotogramma 15 e creare un nuovo fotogramma chiave con F6. Ora anche
questo fotogramma chiave conterrà il nostro cerchio.
Spostare il cerchio al fotogramma 15 in una posizione diversa rispetto al suo
corrispondente al fotogramma 1.
Ora i fotogrammi dall’1 al 14 conterranno il cerchio nella posizione iniziale, mentre il 15
sarà direttamente nella nuova posizione.
Cliccare con il tasto destro un fotogramma qualsiasi tra l’1 e il 15 e selezionare “crea
interpolazione classica”.
A questo punto apparirà una freccia azzurra che collega il fotogramma 1 al 15, e
il cerchio si sposterà gradualmente dalla posizione del fotogramma 1 a quella del
fotogramma 15.
È possibile cambiare posizione sia all’1 che al 15, così come qualsiasi altra proprietà
(dimensione, scala). L’interpolazione classica farà sempre una media di queste due
proprietà, animando l’oggetto.
L’interpolazione movimento è applicabile soltanto ai Grafici, ai Movieclip o ai pulsanti.
Non ha effetto sulle forme non raggruppate ed è sconsigliabile utilizzarla sulle forme
raggruppate.
È possibile usare un moto uniformemente accelerato o decelerato, tramite la proprietà
andamento. Per usarla, selezionare un qualsiasi punto dell’interpolazione, e alzare o
abbassare il valore di “andamento” nel pannello “proprietà > interpolazione”. +100
corrisponde a un moto decelerato, -100 ad un moto accelerato.
Creare Maschere
Le maschere di Flash, come quelle di Photoshop, funzionano come dei “livelli finestra”
che rivelano solo una parte dei livelli sottostanti. Per esempio, è possibile avere un livello
“mare” mascherato da un livello che contiene un cerchio, per avere un effetto di “oblò”.
Per capire come usare e come funzionano le maschere, di seguito un breve tutorial.
Per iniziare, creare un livello “background nero” (Inserisci > Linea temporale > Livello)
e riempirlo con un rettangolo nero. Questo livello sarà posto sotto a tutti gli altri, come
sfondo.
Sopra il livello “di background nero,” creare un livello “arcobaleno”. Riempire questo
livello con un rettangolo con un riempimento “gradiente lineare” arcobaleno (è possibile
trovarlo nel pannello colore, vedi più avanti).
Sopra il livello “arcobaleno”, creare un livello con un cerchio all’interno e rinominare il
17
Sopra: maschera disattivata.
A destra: maschera attivata.
livello “maschera”.
Poiché un livello maschera nasconde sempre il livello immediatamente sottostante,
accertarsi di creare il livello maschera nella posizione appropriata.
Nei livelli “maschera” Flash ignora le bitmap, i gradienti, la trasparenza, i colori e gli stili
di linea. Tutte le aree piene diventano completamente trasparenti nella maschera; tutte le
aree non piene diventano invece opache.
Fare clic con il pulsante destro del mouse sul nome del livello maschera nella linea
temporale, quindi selezionare Maschera. Il livello maschera è indicato da un’apposita
icona (l’oblò azzurro inscritto nel rettangolo nero). Chiameremo questo livello
“mascherante”.
Il livello immediatamente sottostante è collegato al livello maschera e il contenuto è
visibile attraverso l’area piena sulla maschera.
Il nome del livello mascherato è rientrato e l’icona assume l’aspetto di un livello azzurro
18
quadrettato, che contrassegna il livello come “mascherato”.
Ora il livello mascherante “delimiterà” la visione del livello mascherato solo nella sua
area piena. Pertanto l’arcobaleno sarà visibile solo all’interno del cerchio.
Notare bene che i livelli mascherati vengono automaticamente bloccati. Per visualizzare
correttamente la maschera è sempre necessario che sia il livello mascherato che quello
mascherante siano bloccati.
Per poter modificare la maschera, invece, è necessario sbloccare i livelli.
Le maschere possono essere animate (con interpolazioni di movimento e forma).
Per esempio, il cerchio può muoversi, rivelando diverse porzioni dell’arcobaleno
sottostante.
Creare uno sfondo per il banner
Di seguito un breve tutorial per creare rapidamente uno sfondo pieno o sfumato in Flash.
Su un documento vuoto, selezionare lo strumento rettangolo, settare il colore bordo a
trasparente e disegnare un rettangolo a caso.
Selezionare il rettangolo con lo strumento freccia (V) e, nel pannello proprietà immettere
i valori desiderati di larghezza e altezza (che dovranno corrispondere all’area dello stage)
e le coordinate x e y (in questo caso, 0 e 0).
Se non è già aperto, aprire il pannello colore.
Finestra > Colore (shift+F9)
Alla voce “tipo”, selezionare “lineare” (sfumatura) e
impostare i colori desiderati modificando le due estremità
del gradiente.
Alcune note sulle sfumature e i colori:
Le sfumature possono essere radiali e lineari
Si possono creare sfumature con più colori, cliccando sulla
barra del gradiente per aggiungere altre caselline colore
I gradienti possono contenere colori trasparenti, è
sufficiente modificare il valore di alfa dei colori.
19
Creare un bordo di 1px
Di seguito un breve tutorial per creare
un bordo solido di 1 px che circondi
perfettamente l’area del documento Flash.
Creare un nuovo livello “bordo”.Su un
documento vuoto, selezionare lo strumento
rettangolo. Settare il colore riempimento
a trasparente e colore bordo a nero, poi
disegnare un rettangolo. Selezionare
il rettangolo con doppio clic dello
strumento freccia (con un clic singolo
verrà selezionato solo un lato del bordo) e,
nel pannello proprietà immettere i valori
desiderati di larghezza e altezza (che
dovranno corrispondere all’area dello
stage meno 0,2 px) e le coordinate x e y (in
questo caso, 0 e 0).
Il pannello “Allinea” può essere usato per
allineare tra di loro o allo stage.
Con “distribuisci” è possibile disporre vari
oggetti spaziati in modo equidistante.
Le dimensioni leggermente più piccole
servono a evitare che il bordo “esca”
dall’area visibile, tagliando il bordo su uno
o più lati.
Forme libere vettoriali
Le forme vettoriali in Flash sono
riconoscibili dalla texture puntinata che
appare sulla superficie della forma, quando
viene selezionata. Nel pannello proprietà
sono indicate come “forma”.
Una forma libera viene identificata dall’icona
con cerchio e triangolo nel pannello proprietà
e dal reticolo puntinato sulla superficie della
forma, quando questa viene selezionata.
Possono essere disegnate in diversi modi,
con gli strumenti “ellisse” o “rettangolo”,
oppure riempiendo con lo strumento
“secchiello” un tracciato disegnato con il
pennino.
Hanno delle proprietà particolari:
Due forme con riempimenti di colore
uguale sullo stesso livello non raggruppati,
20
se vengono sovrapposti si uniscono.
Due forme con riempimenti non raggruppati
di colore diverso, se sovrapposti, si
sottraggono.
Se è necessario che le forme non si
sottraggano o si fondano, è sufficiente
selezionare le forme appena disegnate e
raggrupparle (CTRL+G).
Creare un bordo arrotondato
Su un documento nuovo, creare un nuovo
livello e creare un rettangolo di sfondo di colore bianco.
Raggruppare il rettangolo (elabora > raggruppa o mela+G).
Creare un rettangolo solo riempimento, sempre sullo stesso livello, settando a 10 px il
valore dei bordi arrotondati nello strumento proprietà.
Disegnare un rettangolo leggermente più piccolo rispetto all’area e centrarlo all’interno
dello stage con il pannello allinea ( finestra > allinea o mela + K - selezionare l’icona
“allinea allo stage” e “allineamento orizzontale rispetto al centro” e “allineamento
verticale rispetto al centro”.
Impostare il riempimento del colore del pannello appena disegnato a nero.
Separare il gruppo del rettangolo di sfondo bianco posto sullo stesso livello con “Elabora
> Separa” o “shift+ctrl+G”.
Ora è sufficiente selezionare il rettangolo nero e cancellarlo perchè venga sottratto a
quello bianco.
Movieclip annidati
I movieclip sono degli oggetti che possono contenere al loro interno delle altre
animazioni. Funzionano come dei mini-filmati, ed hanno al loro interno una timeline
propria, che funziona in modo totalmente indipendente rispetto alla timeline principale.
Per poter inserire un’animazione all’interno di un movieclip, è necessario “entrare” in
esso con un doppio clic.
21
È possibile nidificare più movieclip uno dentro l’altro (per esempio, è possibile avere un
movieclip “dito”, all’interno di un movieclip “mano”, all’interno di un movieclip “braccio”.
Essendo facile perdersi, è sempre possibile verificare la propria posizione nella parte alta
dell’interfaccia, subito sotto il menù. Quando la freccina è deselezionata e c’è solo l’icona
del “ciack” con un nome (default “scena1”) ci si trova all’interno della timeline principale.
Mano a mano che si entra all’interno dei movieclip nidificati (icona ingranaggio), i
nomi degli stessi appaiono a destra. Il movieclip più a destra è quello in cui ci si trova
attualmente (nidificato in tutti quelli che lo precedono).
Tutte le animazioni inserite in un movieclip vengono riprodotte ciclicamente (a meno
che non vengano bloccate con un’actionscript “stop” all’interno del movieclip) e
indipendentemente dall’animazione dell’oggetto sulla timeline principale.
Per esempio, un movieclip mosca che sulla timeline principale si muove da sinistra verso
destra, può avere al suo interno un movimento ciclico di “sbattito delle ali”. La mosca si
muoverà da sinistra a destra, quindi, sbattendo costantemente le ali.
All’interno dei movieclip è possibile impilare livelli, usare maschere e movimenti su
tracciato.
Movimento collegato al tracciato
È possibile animare un oggetto facendogli seguire un tracciato.
Basta selezionare il livello in cui è contenuto l’oggetto, fare un clic destro sullo stesso
e selezionare “aggiungi guida di movimento classica”. Apparirà un altro livello sopra,
contrassegnato da una pallina che si sposta su una parabola.
Questo livello è un livello di guida movimento, sul quale è possibile disegnare il tracciato
che verrà seguito dall’oggetto contenuto nel livello sottostante. Tutto ciò che viene
disegnato nel livello di guida non sarà visibile una volta lanciato il filmato.
Perché il movimento su tracciato funzioni correttamente, è necessario che ci sia un
solo tracciato sul livello “guida movimento” e un solo oggetto sul livello sottostante. È
necessario che l’oggetto sia animato tramite un’interpolazione movimento.
Il centro dell’oggetto deve trovarsi perfettamente all’inizio del tracciato, nel fotogramma
22
chiave in cui inizia il movimento, e
perfettamente alla fine del tracciato,
nel fotogramma chiave in cui finisce il
movimento.
È possibile orientare la direzione
dell’oggetto al tracciato, selezionando un
qualsiasi fotogramma dell’interpolazione
e selezionando “orienta sul tracciato” nel
pannello “Proprietà”.
Effetto colore: trasparenza,
tinta e luminosità
È possibile applicare degli effetti agli
oggetti convertiti in simbolo (grafici,
movieclip, bottoni).
Basta selezionare l’oggetto e selezionare
“effetto colore” nel pannello proprietà.
Vicino a “stile” c’è un menù a tendina che
permette di selezionare alcune proprietà,
elencate in ordine di importanza:
Alfa > trasparenza, fa scomparire gradualmente l’oggetto. A 0% l’oggetto è
completamente invisibile.
Tinta > “riempie” il movieclip del colore selezionato.
Luminosità > Schiarisce o scurisce l’oggetto. +100 equivale a bianco, -100 a nero.
Avanzato > Un mix di tutte le proprietà (alfa+colore)
Nessuno > nessun effetto applicato
Gli effetti sono utilizzabili durante l’animazione: per esempio, è possibile far scomparire
un oggetto mettendo l’alfa a 100% nel primo fotogramma chiave dell’animazione e 0%
nell’ultimo.
Filtri
Molto simili agli “effetti colore”, i “filtri” sono delle proprietà avanzate applicabili solo ai
movieclip.
23
Per applicarli, selezionare il movieclip, aprire il pannello “filtri” nel pannello “proprietà” e
aggiungere un filtro cliccando l’icona della pagina in basso a sinistra del pannello filtri.
Il filtro più importante è “sfocatura” che può essere usato per sfuocare gradualmente e
per dare effetti di velocità.
Anche i filtri sono utilizzabili in animazione (per esempio, un oggetto con un’animazione
decelerante può partire “sfuocato” e finire il suo movimento senza sfocatura, per
simulare il movimento).
Separare gli oggetti e convertire il testo in tracciati
Per separare gli oggetti o convertire un testo in tracciati, basta selezionare e premere più
volte CTRL+B. Il testo verrà separato prima nelle singole lettere, poi diventerà una forma
libera (non più editabile dallo strumento testo).
Filmato e test di esportazione
I file sorgenti di Flash sono in formato .fla, mentre i file pubblicabili sono in formato
.swf.
Per poter modificare, o anche solo aprire, un formato fla sono necessari i font utilizzati e
almeno la stessa versione di Flash usata per esportare il filmato, mentre per un swf basta
un browser.
Per motivi di peso e compatibilità, è quasi sempre opportuno inviare solo il file swf.
Per esportare un file swf, è sufficiente salvare il proprio lavoro (in fla) e lanciare il filmato
con CTRL+INVIO.
Sarà possibile visualizzare una preview del filmato e verrà generato un swf nella cartella
in cui è stato salvato il fla.
È anche possibile esportare con “file > esporta> esporta filmato”, se si desidera scegliere
il formato (che può essere , oltre a swf, anche video).
Actionscript
ActionScript (AS) è il linguaggio di scripting di Adobe Flash.
Questa guida non è esaustiva per quanto riguarda la programmazione, ma spiegherà
alcuni fondamentali su come utilizzare il codice Actionscript per produrre banner e
semplici filmati. Questa guida usa la versione 2.0 di Actionscript. Utilizzando versioni
24
successive, alcuni comandi potrebbero non funzionare correttamente.
Il codice Actionscript va sempre inserito nel pannello azioni ( finestra > azioni, oppure
F9 ) . Basta selezionare un fotogramma chiave, aprire il pannello azioni e scrivere il
codice all’interno del pannello. Non serve confermare l’inserimento. Per verificare che
il codice sia stato inserito, è sufficiente controllare che ci sia una piccola “a“ sopra la
timeline (come da immagine).
Una regola molto importante del codice Actionscript è che incomincia a funzionare dal
fotogramma chiave in cui viene inserito in poi. Per esempio, se inseriamo un codice di
“stop” nel filmato al fotogramma chiave 30, l’animazione procederà fino al suddetto
fotogramma per poi fermarsi. Se inseriamo il codice al fotogramma chiave 1, il filmato
non partirà nemmeno: si fermerà al primo fotogramma.
25
Inserire un codice di Stop
Per fermare un filmato al fotogramma desiderato, è sufficiente creare un fotogramma
chiave al numero di fotogramma desiderato, su un nuovo livello, e inserire il seguente
codice:
stop();
non serve confermare, basta chiudere il pannello e controllare che sia apparsa la “a” sulla
timeline.
Il codice Actionscript andrebbe inserito sempre su un livello nuovo vuoto sopra tutti gli
altri, per evitare di fare confusione.
A questo punto il filmato procederà fino al fotogramma in cui è inserito il codice, e poi si
fermerà. Notare che, senza lo “stop”, il filmato va automaticamente in loop.
Inserire un bottone invisibile con collegamento ipertestuale (actionscript
2)
Questo è un breve tutorial per fare in modo che cliccando sull’area del filmato (tutta o
una parte) si venga rediretti ad una pagina web.
Per iniziare, creare un rettangolo sulla superficie che si desidera rendere cliccabile
(solitamente un banner deve essere interamente cliccabile, quindi solitamente è
necessario creare un rettangolo grande quanto l’intera area di lavoro, come è stato fatto
precedentemente nella sezione relativa alla creazione di uno sfondo.
Selezionare la forma appena creata e convertirla in simbolo (F8) e selezionare “pulsante”.
I “pulsanti” sono degli oggetti particolari, ottimizzati per essere dei bottoni cliccabili.
Usare i pulsanti non è l’unico modo di avere degli elementi cliccabili (è possibile ottenere
lo stesso effetto con dei movieclip), ma è uno dei metodi più semplici.
All’interno del pulsante (per entrare, fare doppio clic su di esso) ci sono 4 stati: su,
sopra, giù e premuto.
“Su” è lo stato “normale” del bottone. “Sopra” è lo stato di rollover, cioè quando l’utente
26
sposta il suo puntatore sulla superficie del pulsante. “Giù” è lo stato del pulsante quando
l’utente lo clicca. “premuto” è l’area attiva del bottone, invisibile. Questo stato serve
solitamente per i bottoni piccoli, che hanno bisogno di un’area più ampia di attivazione,
per facilitare l’utente.
In questo caso, l’area attiva dello stato “premuto” serve per creare un bottone invisibile.
Basta trascinare il pallino dello stato “su” (che contrassegna il fotogramma come “pieno”)
all’interno dello stato “premuto”.
Così facendo, il bottone non sarà più visibile, ma la superficie che avevamo disegnato
precedentemente diventerà “area attiva”.
Tornando alla timeline principale, l’area attiva del bottone invisibile sarà contrassegnata
da un’area azzurra chiara e trasparente.
Per inserire il codice di click, selezionare il bottone, e, tenendolo selezionato, aprire il
pannello “azioni” (F9) e inserire il codice:
on(release) {
getURL(“www.tuourl.com”);
}
Non deve apparire nessuna “a” sulla timeline, perchè il codice è associato al pulsante
invisibile e non alla timeline.
Per funzionare, il pulsante invisibile deve trovarsi su un livello sopra a tutti gli altri e la
versione di actionscript deve essere la 2.
27