Grafica e animazioni per il Web
Marco Porta - CIM: Web Design & Technologies
1
Creare grafica per il Web
Strumenti software
Esistono diversi software per eseguire elaborazioni specifiche
per il Web
– ottimizzazioni
conversione in formati compressi in modo da ridurre i tempi di download…
– generazione automatica di codice HTML e JavaScript per la
creazione di:
• effetti rollover
immagini che cambiano in risposta a determinati eventi generati con il mouse
(cursore sopra l’immagine, pulsante del mouse premuto, ecc.)
• mappe immagine
i
i
porzioni di immagini che rispondono a determinati eventi (es. con il clic viene
caricata una nuova pagina…)
• sezioni
simili alle mappe immagine, ma operanti su aree rettangolari
Marco Porta - CIM: Web Design & Technologies
2
1
Creare grafica per il Web
Effetti rollover
Tipicamente: immagine che cambia quando il cursore le
passa sopra
realizzabile con CSS, JavaScript (appoggiandosi ad esempio a
Photoshop) e Flash
Marco Porta - CIM: Web Design & Technologies
3
Creare grafica per il Web
Mappe immagine
Rendono certe aree di un’immagine sensibili a certi eventi…
Esempio: aree come link (il clic su diverse aree carica diverse
pagine)
L’immagine è una sola e viene
virtualmente suddivisa dal codice HTML
attraverso i tag <map> e <area>…
Marco Porta - CIM: Web Design & Technologies
4
2
Creare grafica per il Web
Sezioni
Suddividono un’immagine in rettangoli sensibili
a differenza delle mappe
pp immagine,
g , l’immagine
g
viene suddivisa in più “sottoimmagini”, poste
all’interno delle celle di una tabella…
Esempio: aree come link
Marco Porta - CIM: Web Design & Technologies
5
Animazioni GIF
GIF animate…
Sono costituite da sequenze di immagini GIF
ognii ffotogramma
t
è una normale
l iimmagine
i
Problema: se i fotogrammi sono molti, si hanno file di grosse
dimensioni…
Le sequenze sono opportunamente temporizzate
animazioni lente, animazioni veloci, …
Marco Porta - CIM: Web Design & Technologies
6
3
Animazioni GIF
… GIF animate
Effetto Tweening
aggiunge automaticamente una serie di fotogrammi tra due
fotogrammi esistenti, variando gradatamente gli attributi di livello
posizione, opacità e/o parametri degli effetti…
Esempio:
Fotogramma
iniziale
Fotogrammi intermedi
Marco Porta - CIM: Web Design & Technologies
Fotogramma
finale
7
Animazioni Flash
Adobe Flash…
Permette di inserire
animazioni
sofisticate
all’interno delle
pagine web
in modo relativamente
semplice…
Si basa sulla grafica
vettoriale
Marco Porta - CIM: Web Design & Technologies
8
4
Animazioni Flash
… Flash…
Gli strumenti per il disegno
simili a quelli presenti in Photoshop, ma orientati alla
grafica vettoriale
• strumenti di selezione
per selezionare oggetti
• strumenti per il disegno di linee e forme regolari
• strumenti di riempimento
• strumenti di modifica/elaborazione delle forme
configurabili in ogni parametro
Marco Porta - CIM: Web Design & Technologies
9
Animazioni Flash
… Flash…
È possibile la modifica diretta della forma degli oggetti
– con poco sforzo
f
sii possono ottenere
tt
disegni
di
i molto
lt complessi
l
i
– ogni linea/oggetto è singolarmente selezionabile e modificabile
Marco Porta - CIM: Web Design & Technologies
10
5
Animazioni Flash
… Flash…
Per la creazione di animazioni complesse è di fondamentale
importanza
p
la g
gestione dei livelli ((layer)
y )
Marco Porta - CIM: Web Design & Technologies
11
Animazioni Flash
… Flash…
Punto chiave della realizzazione di ogni animazione è la
gestione della timeline
corretta g
determina la sincronizzazione delle varie componenti
dell’animazione e permette di controllare il singolo frame
Frame corrente
Marco Porta - CIM: Web Design & Technologies
12
6
Animazioni Flash
… Flash…
Tweening
fissati dei keyframe nella timeline, permette di generare
automaticamente i frame intermedi dell’animazione
Keyframe
15
Keyframe
1
………
….
Frame 5 ………
….
Frame 10
………
….
Marco Porta - CIM: Web Design & Technologies
13
Animazioni Flash
… Flash
Inclusione di animazioni Flash nelle pagine Web
Esempio: inclusione del file luce.swf
luce swf
..........
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,0,0" width="550" height="400">
<param name="movie" value="luce.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed src="luce.swf" quality="high" bgcolor="#FFFFFF" width="550">
height="400" type="application/x-shockwave-flash"
pluginspace="http://www macromedia com/go/getflashplayer">
pluginspace="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
..........
Marco Porta - CIM: Web Design & Technologies
14
7