Capitolo 1
Che cos’è Flash
Flash è un software molto particolare. Nato come programma
per realizzare animazioni per il Web con possibilità d’interazione
programmate, fin dal suo primo apparire sulla scena della grafica
digitale ha stupito per la proposta di una metodologia di lavoro semplice ma innovativa. Realizzare un’animazione con questo
programma è molto facile. Il suo sistema di programmazione basato sul linguaggio ActionScript è alla portata anche di chi non
si intende di programmazione. È un software di grafica vettoriale,
ma con un metodo di lavoro differente dai classici programmi vettoriali, che sembra quasi unire in sé metodologie di elaborazione
di immagini bitmap e vettoriali.
La semplicità di Flash ha indotto molti utenti ad avvicinarsi al
programma, sancendone il successo. Le versioni successive (l’attuale Flash CS5 corrisponde alla versione 11) hanno potenziato
il programma rendendolo ormai una piattaforma operativa fondamentale, sicuramente al livello dei più conosciuti programmi
dedicati alle varie branche della grafica digitale, tanto che molti
professionisti lo utilizzano oggi anche per operazioni per le quali
il programma non è nato originariamente: grafica, illustrazione,
fumetto, pubblicità ecc.
Il successo di Flash ha generato una grande comunità di grafici e
sviluppatori che, oltre a elaborare progetti personali e sperimentare nuove applicazioni e metodologie, hanno messo a disposizione
nuovo materiale scaricabile gratuitamente da Internet (a tal proposito si veda il Capitolo 12 dedicato alla sitografia).
Grazie a Flash potete oggi creare: immagini statiche e dinamiche; siti web evoluti, dinamici e accattivanti (i filmati di Flash
possono essere inseriti in un file HTML, e divenire quindi una
parte o l’intero sito); soluzioni per l’e-commerce e l’e-business;
animazioni per il Web, il cinema e la televisione; prodotti multimediali distribuiti su CD e DVD; contenuti interattivi per la
Cap01.indd 1
In questo capitolo
•
Le novità di Flash CS5
•
Installazione di Flash
e Flash Player
•
Grafica digitale
•
I formati grafici
09/07/2010 11.41.45
2
Capitolo 1
telefonia mobile e i palmari; presentazioni multimediali; gallerie
fotografiche; giochi e quant’altro la vostra fervida fantasia saprà
suggerirvi.
Le novità di Flash CS5
Adobe lancia Adobe Flash Professional CS5 arricchendo il programma con importanti novità che andremo a descrivere nelle
prossime pagine. Nuovi strumenti si affiancano così al linguaggio di programmazione ActionScript 3.0, sempre più basilare
nell’ultima versione del programma. Esso ha soppiantato ormai
da due versioni della piattaforma l’ActionScript 2.0 (pur consentendo a chi vuole lavorare ancora con il vecchio codice di
scegliere all’apertura di un nuovo documento quale tipologia
di filmato generare). L’approccio su cui è basato ActionScript
3.0 avvicina le modalità operative al linguaggio tipico della programmazione, mentre ActionScript aveva fin dall’inizio instaurato il suo punto di forza nella semplicità e immediatezza di legare
le azioni e i relativi script di codice agli oggetti presenti sulla
scena o nella Libreria, e ai fotogrammi. I grafici saranno forse
un po’ restii nell’accettare questo passaggio, ma le potenzialità
offerte sono indubbiamente evidenti e aprono il programma a
sviluppi multimediali sempre più complessi e con forme interattive molto articolate.
Vediamo in sintesi le novità, per poi affrontarle nel dettaglio nei
vari capitoli più specificatamente dedicati ai singoli argomenti.
Text Layout Framework
Text Layout Framework vi permette di creare del testo molto
liberamente, con potenzialità tipografiche finora non contemplate
dal programma. Per esempio, vi è la possibilità di creare delle aree
di testo collegabili fra loro nella pagina in modo che il testo in
esse contenute passi da una zona all’altra attraverso l’editazione
del testo stesso. Se cioè aggiungete del testo nel primo riquadro,
il testo precedente slitta nel secondo riquadro collegato e così di
seguito negli eventuali altri riquadri collegati. In questa maniera potete creare velocemente delle pagine ricche di testo con
impaginazioni fortemente personalizzate senza paura di doverle
rifare interamente nel caso si rendano necessarie delle correzioni. Una volta impostata la struttura di base, l’interfaccia grafica
della disposizione del testo potrà rimanere identica anche per
altre nuove finestre; sarà necessario aggiornare solo il testo in
esse contenuto.
Cap01.indd 2
09/07/2010 11.41.50
Che cos’è Flash
3
Pannello Snippet
È un pannello che facilita l’introduzione e la scrittura di codice ActionScript 3.0 per chi non conosce la programmazione.
Attraverso una serie di passaggi a cascata è possibile generare
in automatico il codice e le relative azioni. È evidente come
Adobe punti molto sulle potenzialità del nuovo codice, cercando di farvi avvicinare anche chi non ha dimestichezza con la
programmazione.
Migliorato l’Editor ActionScript
Sono state velocizzate le operazioni di sviluppo di un codice ActionScript grazie ad alcune migliorie apportate all’editor ActionScript, che ora include suggerimenti personalizzati sul codice delle
classi e delle funzioni.
Integrazione con Creative Suite
È sempre più ottimizzata l’integrazione fra i vari prodotti del pacchetto di software Adobe Creative Suite. In particolare, è reso più
facile e automatico il passaggio di contenuti fra Adobe Photoshop,
Illustrator, InDesign e Flash Builder.
Flash Builder
Flash Builder diventa l’editor di linguaggio ActionScript più facile
e immediato da utilizzare per i progetti di Flash Professional.
Ottimizzati l’uso e la gestione dei video
È ora più semplice e diretto gestire delle componenti video all’interno dello Stage di Flash. Una nuova funzione permette di trascinare il video sullo Stage e attiva i processi di visualizzazione
tramite una comoda barra di player sottostante. Sono anche stati
introdotti i cue-point, in parte tralasciati nella precedente versione
e invece molto funzionali per lavorare con il video.
File FLA sorgente basati su XML
È stata migliorata la gestione dell’XML per creare sistemi di controllo sorgente e permettere una calibrazione più semplice fra i
vari file di un progetto.
Cap01.indd 3
09/07/2010 11.41.50
4
Capitolo 1
Ampliata la distribuzione dei contenuti
È stata ampliata la possibilità di distribuire i contenuti in modo
uniforme su schermi di ogni dimensione, inclusi i dispositivi
iPhone (anche se su quest’ultimo punto rimangono ancora forti
contrasti fra Apple e Adobe; infatti per produrre contenuti per
iPhone bisognerà seguire i requisiti e chiedere l’approvazione di
Apple). Lo strumento per effettuare il testing delle varie piattaforme sarà sempre Adobe Device Central. L’esempio ufficiale
che Adobe propone sulla schermata del suo sito è quello delle
mappe interattive. Approfondiamo questo discorso nel Capitolo
9, dedicato specificatamente alla telefonia mobile.
Cinematica inversa con lo Strumento Osso
Un nuovo strumento Molla permette di creare effetti di cinematica inversa più aderenti alla realtà con le nuove opzioni di
movimento offerte dallo Strumento Osso (in particolare è possibile
regolare i parametri di Intensità e Smorzamento dell’opzione Molla
per realizzare animazioni più realistiche).
Strumenti di disegno Decorazione
Nuovi e divertenti effetti di animazione avanzati con un ricco
kit di pennelli da utilizzare con lo strumento Decorazione per
creare effetti speciali originali e personalizzabili: riempimento
rampicante, riempimento griglia, pennello simmetria, pennello 3D, pennello edificio, pennello decorato, animazione fuoco,
pennello fiore, pennello lampo, sistema particellare, animazione
fumo, pennello albero. Grazie a questi particolari pennelli è
molto veloce realizzare un disegno ed effetti particolari prima difficilmente realizzabili, se non al prezzo di molte ore di
lavoro.
Sul sito adobe.it
Sul sito www.adobe.it trovate una sezione con esercitazioni, esempi, trucchi e approfondimenti per imparare a utilizzare al meglio
la tecnologia di Flash. Inoltre, esiste una miriade di community
dedicate a Flash cui è possibile partecipare: dai blog ai gruppi di
utenti che si incontrano di persona per condividere le proprie
esperienze sul software.
Cap01.indd 4
09/07/2010 11.41.50
Che cos’è Flash
5
Flash TV
Dal sito www.adobe.it, oppure dalla prima schermata che appare quando avviate il programma, un apposito link vi rimanda al
servizio online Flash TV: una serie di lezioni e tutorial video per
apprendere le basi del programma e l’utilizzo delle novità presenti sull’ultima release del software. Questa funzione arricchisce il
pacchetto offerto rendendone l’apprendimento ancora più veloce
e immediato.
Installazione di Flash e Flash Player
Per poter visualizzare le animazioni realizzate in Flash dovete aver
installato sul vostro computer il plug-in Flash Player. Non è un
programma che funziona autonomamente (standalone), ma aggiunge al browser (Internet Explorer, Mozilla Firefox, Opera ecc.)
la possibilità di leggere i file con estensione swf, ovvero quelli creati con Flash. Solitamente i browser più recenti hanno già il plugin Flash Player. Se il vostro non ne fosse provvisto o non fosse
aggiornato, potete installarlo o aggiornarlo scaricando la versione
gratuita dal sito www.adobe.it.
Installando il vero e proprio programma di authoring Flash, il
player viene caricato automaticamente.
Il formato proprietario di Flash è FLA, quello con cui salvate i
vostri lavori, memorizzando in esso tutte le caratteristiche degli
Figura 1.1
La finestra di visualizzazione
dei file SWF Adobe Flash Player 10.
Cap01.indd 5
09/07/2010 11.41.50
6
Capitolo 1
oggetti, delle animazioni e delle programmazioni effettuate. Per
distribuire i filmati finali e permettere di renderli visibili, magari
su Internet, anche da chi non ha il programma (ma solo il player
gratuito) il software permette di generare un file SWF (per la
pubblicazione del filmato finale si veda il Capitolo 8). Questo
formato riesce a comprimere le dimensioni del file, ottimizzando
solo ciò che effettivamente serve alla visualizzazione del filmato
(Figura 1.1), ed eliminando i passaggi editabili, velocizzandone
la visione e lo scaricamento via Internet, grazie a una particolare
gestione dei contenuti vettoriali e bitmap.
Versione trial del programma
Adobe permette di scaricare una versione trial del programma,
completamente funzionante (prima di effettuare il download del
file di installazione controllate se il vostro sistema possiede le caratteristiche necessarie per il corretto funzionamento del software
elencate sul sito della casa produttrice).
Potrete così seguire passo passo gli esercizi di questo libro e familiarizzare con le potenzialità operative di Flash e decidere in
seguito, se reputerete che il programma è utile alle vostre esigenze, di acquistare la licenza. La versione trial dura 30 giorni.
Per scaricare la versione trial visitate il sito www.adobe.it. Sul
sito stesso potrete vedere le offerte relative alle varie tipologie
di suite proposte, organizzati secondo le specifiche professionali
cui si rivolgono.
●
Adobe Creative Suite 5 Web Premium riunisce i migliori strumenti per il design e lo sviluppo di contenuti per il Web. Il
pacchetto comprende i seguenti software: Dreamweaver CS5;
Flash CS5 Professional; Flash Catalyst CS5; Flash Builder 4;
Photoshop CS5 Extended; Illustrator CS5; Fireworks CS5;
Acrobat 9 Professional; Contribute CS5; Adobe Bridge CS5;
Adobe Device Central CS5.
●
Adobe Creative Suite 5 Design Premium è il kit di strumenti
ideale per la stampa, il web publishing, la progettazione di
applicazioni interattive e di contenuti per dispositivi mobili.
Il pacchetto comprende i seguenti software: InDesign CS5;
Photoshop CS5 Extended; Illustrator CS5; Flash Catalyst
CS5; Flash CS5 Professional; Dreamweaver CS5; Fireworks
CS5; Acrobat 9 Professional; Adobe Bridge CS5; Adobe Device Central CS5.
●
Adobe Creative Suite 5 Production Premium è la soluzione di
postproduzione completa per i professionisti del video. Il
pacchetto comprende i seguenti software: After Effects CS5;
Cap01.indd 6
09/07/2010 11.41.50
Che cos’è Flash
●
7
Adobe Premiere Pro CS5; Photoshop CS5 Extended; Flash
CS5 Professional; Flash Catalyst CS5; Illustrator CS5; Soundbooth CS5; Encore CS5; Adobe Bridge CS5; Adobe Device
Central CS5; Dynamic Link; Adobe OnLocation CS5.
Adobe Creative Suite 5 Master Collection consente di creare contenuti adatti a qualsiasi tipo di supporto (stampa,Web, applicazioni interattive, film, video e dispositivi mobili) nell’ambiente
creativo più completo che sia stato mai realizzato. Il pacchetto
comprende i seguenti software: InDesign CS5; After Effects
CS5 Professional; Dreamweaver CS5; Fireworks CS5; Contribute CS5; Acrobate 9 Professional; Adobe Premiere Pro
CS5; Photoshop CS5 Extended; Flash CS5 professional; Flash
Catalyst CS5; Flash Builder 4; Illustrator CS5; Soundbooth
CS5; Encore CS5; Adobe Bridge CS5; Adobe Device Central
CS5; Dynamic Link; Adobe OnLocation CS5.
Servizi CS Live
Le prestazioni sempre più ottimizzate dei vari software e l’integrazione con i nuovi ed efficienti servizi online Adobe CS Live
(i servizi CS Live sono gratuiti per un periodo limitato) sono un
utile strumento per i propri lavori: permettono di semplificare i
vari passaggi creativi, di velocizzare i test di compatibilità dei propri siti Internet e molto altro ancora. I servizi online Adobe CS
Live comprendono le seguenti voci.
●
Adobe BrowserLab: fornisce una soluzione semplice e veloce
per il testing delle produzioni con Flash su varie tipologie
di browser. Visualizza in anteprima le pagine web dinamiche e in locale. Sul vostro computer avrete strumenti di
visualizzazione multipla, diagnostica e confronto dei vostri
file SWF.
●
Adobe CS Review: permette di condividere revisioni online
dei propri progetti con altri utenti e di ricevere commenti
sui progetti grafici direttamente attraverso gli strumenti della
vostra applicazione desktop Creative Suite.
●
Acrobat.com: permette di ottimizzare il flusso di lavoro fra vari
operatori grazie ad appositi servizi online come le conferenze
via Web, la condivisione di file e la creazione di documenti
online.
●
Adobe Story: ottimizza il flusso dati nelle produzioni video.
●
SiteCatalyst NetAverages: rende possibile ottimizzare la progettazione di contenuti destinati al Web e ai dispositivi mobili attraverso statistiche aggiornate, raccolte via Internet, con
specifiche su browser, sistemi operativi ecc).
Cap01.indd 7
09/07/2010 11.41.51
8
Capitolo 1
●
È evidente il tentativo di Adobe di creare una piattaforma
web sempre più estesa, con collegamento diretto a quella locale, dove gli utenti possano trovare tutti gli strumenti necessari per il loro lavoro.
Requisiti di sistema
Il software Flash richiede la seguente dotazione hardware e software per funzionare correttamente (dati ufficiali della casa produttrice Adobe).
Requisiti di sistema per Windows
●
●
●
●
●
●
●
●
Processore Intel Pentium 4 o AMD Athlon 64.
Microsoft Windows XP con Service Pack 2 (consigliato Service Pack 3), Windows Vista Home Premium, Business, Ultimate o Enterprise con Service Pack 1, oppure Windows 7.
1 GB di RAM.
3,5 GB di spazio disponibile su disco rigido per l’installazione.
È necessario ulteriore spazio durante l’installazione, che non
può essere effettuata su periferiche di archiviazione di massa
flash rimovibili.
Risoluzione schermo 1024×768 (consigliata 1280×800) con
scheda video a 16 bit.
Unità DVD-ROM.
È richiesto QuickTime 7.6.2 per le funzionalità multimediali.
È richiesta una connessione Internet a banda larga per i servizi online.
Requisiti di sistema per Macintosh
●
●
●
●
●
●
Cap01.indd 8
Processore Intel multicore.
Mac OS X v. 10.5.7 o 10.6.
1 GB di RAM.
4 GB di spazio disponibile su disco rigido per l’installazione.
È necessario ulteriore spazio durante l’installazione, che non
può essere effettuata su volumi che utilizzano file system con
distinzione tra maiuscole e minuscole o su periferiche di archiviazione di massa flash rimovibili.
Risoluzione schermo 1024×768 (consigliata 1280×800) con
scheda video a 16 bit.
Unità DVD-ROM.
09/07/2010 11.41.51
Che cos’è Flash
9
È richiesto QuickTime 7.6.2 per le funzionalità multimediali.
●
È richiesta una connessione Internet a banda larga per i servizi online.
Se si dispone di una connessione Internet ad alta velocità, Flash
può consentire l’accesso ad alcune funzioni disponibili online,
come i servizi CS Live.
●
Grafica digitale
Prima di iniziare a mostrare l’utilizzo del programma Flash, dedichiamo alcuni paragrafi all’approfondimento dei concetti di
base su cui vi troverete a operare all’interno dei software di grafica digitale. È fondamentale conoscere la distinzione tra grafica
bitmap e grafica vettoriale per capire con quali procedimenti il
software elabora i file, così come è indispensabile conoscere le
caratteristiche principali dei formati grafici disponibili. Se siete
già esperti di queste informazioni potete passare direttamente al
Capitolo 2.
Il disegnatore, prima di tuffarsi nel bianco mare creativo del foglio, controlla sempre la punta e la mina della sua matita. Foglio
e matita sono i suoi strumenti primari, la base da cui partire per
concretizzare visivamente i voli pindarici della sua fantasia. Nel
caso di un disegno digitale la prima cosa che bisogna definire è
se se si vuole disegnare in “vettoriale” oppure in “bitmap”. Sono
questi i due grandi insiemi nei quali si suddividono tutti i software
di grafica digitale. Questi programmi gestiscono le immagini in
maniera completamente differente gli uni dagli altri, consentendo
metodologie di disegno in base alla tipologia di lavoro e al risultato che si vuole ottenere. Sono ambienti complementari, ma
è possibile (con piccoli accorgimenti) passare da un programma
bitmap a uno vettoriale e viceversa.
Esistono inoltre scorciatoie inventate dai programmatori, soprattutto nelle versioni più recenti dei software, che permettono di
impostare immagini bitmap in programmi vettoriali e di gestire
effetti vettoriali in ambienti bitmap. È bene però non fare confusione. Conoscere questi due mondi della grafica digitale è fondamentale.
Programmi bitmap e vettoriali
Nella famiglia dei software bitmap troviamo tutti i programmi
di fotoritocco e pittura digitale, come Photoshop, Painter, Paint
Shop Pro, Gimp, Corel Photo-Paint ecc.
Cap01.indd 9
09/07/2010 11.41.51
10
Capitolo 1
Nella categoria dei software vettoriali si annoverano invece programmi di disegno geometrico, grafico e illustrativo, come Illustrator, FreeHand, Corel Draw, Xara X ecc. Anche se apparentemente diversi, sono vettoriali anche i software di modellazione
tridimensionale come Maya, LightWave, SoftImage, 3D Studio
Max, o di disegno tecnico come AutoCad e ArchiCad, o di animazione bidimensionale come Flash. Non sono programmi di
grafica, ma potrebbero rientrare nella famiglia vettoriale anche
Word e PowerPoint (con i loro strumenti di disegno)… tutto dipende dalle modalità con cui il software gestisce i dati (in particolare un’immagine) e di conseguenza dalla tipologia di formato
di file generato.
Immagini bitmap
Le immagini di tipo bitmap sono immagini bidimensionali,
composte da un fittissimo intreccio di puntini colorati, indipendentemente dal loro soggetto, che può essere bidimensionale o tridimensionale (una fotografia, un disegno realizzato a
mano libera, una forma geometrica, una scansione o un’elaborazione fatta con la tavoletta grafica...). Il computer, per poterla memorizzare nel processo di digitalizzazione, suddivide
l’immagine in una vera e propria griglia costituita da tante
piccole tessere. Ogni tassello corrisponde a un’unità di colore
(o di grigio, o di bianco e nero); insieme, i tasselli compongono
l’immagine. È come se, utilizzando la punta di un pennarello,
aveste realizzato un disegno con tanti puntini accostati uno
accanto all’altro senza lasciare spazi bianchi (anche gli spazi
bianchi vanno considerati come punti). Più i puntini sono piccoli, più la figura apparirà nitida e dettagliata, e i singoli soggetti definiti con estrema cura e tonalità differenti. Se invece
i punti sono grandi, il soggetto tenderà a perdere definizione,
fino ad assumere contorni frastagliati, grossolani e colorazioni
piatte e poco sfumate. Parafrasando una vecchia pubblicità: per
dipingere un’immagine grande ci vuole un pennello grande,
che faccia puntini grandi, mentre per fare un’immagine piccola
ci vuole un pennello piccolo che faccia puntini talmente piccoli da non apparire alla vista del nostro occhio. Sempre che si
voglia ammirare la bellezza dell’immagine e non dei punti che
la compongono.
È lo stesso fenomeno dei manifesti pubblicitari. Se li si osserva da
lontano (come solitamente si fa camminando per strada) appaiono
belli e con colori sgargianti. Ma se ci si avvicina, ci si accorge dei
tipici puntini della stampa tipografica da cui sono composti. Il
nostro occhio tende a fondere insieme macchie diverse di colore
Cap01.indd 10
09/07/2010 11.41.51
Che cos’è Flash
per poter percepire l’unicità dell’immagine. Questo fenomeno è
stato sfruttato dai neo impressionisti, e in particolare da Georges
Seurat (Figura 1.2) che realizzava i suoi dipinti su tela con tanti
puntini di colori primari, per mantenere la purezza cromatica e la
luminosità dei colori puri, che si sarebbero miscelati solo nell’occhio dello spettatore.
Il software suddivide l’immagine in righe di punti orizzontali e
verticali, per poterla ridurre in dati digitali da memorizzare. Ogni
singolo centimetro della figura sarà composto da un numero di
punti definito, che corrisponde alla risoluzione. Più alta è la risoluzione, maggiore è il numero di punti che compongono l’immagine, maggiori saranno quindi le informazioni che il software
deve registrare in quel file (e maggiore sarà la dimensione del file
finale).
Prendendo come riferimento un pollice, possiamo creare per
esempio un’immagine composta da 72 punti per ogni riga (è la
classica risoluzione delle immagini utilizzate per i siti Internet,
non molto definita ma leggera per poter scaricare le immagini
stesse tramite la rete e ottimale per una visualizzazione a monitor),
oppure 200 punti per ogni riga (un’immagine che potrà essere
stampata con la nostra stampante, ottenendo un buon rapporto tra
qualità e dimensione del file), oppure 600 o 1200 punti (è la ri-
Cap01.indd 11
11
Figura 1.2
Georges Seurat, “Un dimanche
d’eté à la Grande Jatte”, 1884-86
(Chicago, Art Institute).
09/07/2010 11.41.51
12
Capitolo 1
soluzione classica di stampa tipografica, cui corrisponde un file di
dimensioni maggiori). Il numero di punti contenuti in un pollice
lineare viene chiamato tecnicamente “punti (o pixel) per pollice”
(dpi, Dot Per Inch).
Fissata l’unità di misura, per far stare in un centimetro (oppure in
un pollice) 72 punti li si dovrà fare di una certa dimensione, mentre per potercene far stare 300 si dovranno fare quei punti molto
più piccoli. Ecco perché una risoluzione a 300 dpi è molto più
dettagliata di una a 72 dpi (Figura 1.3).
Questo tipo di tecnologia permette di ottenere immagini estremamente particolareggiate o di definirne la risoluzione a seconda dell’utilizzo. Il software che utilizziamo per manipolare
quell’immagine salverà in un formato scelto ogni singolo punto
di ogni singola riga con le relative informazioni di colore, luminosità e coordinate di posizione nella griglia dell’immagine.
Ecco perché salvando un’immagine di grande dimensioni in alta
definizione vengono generati file mastodontici. Facciamo un
esempio: una fotografia di 20 cm per 20 cm a 300 dpi contiene
5 579 044 punti, ognuno magari di colore diverso… o quasi!
Calcolando di salvare con il metodo di colore RGB (Red, Green,
Blue) con profondità di colore di 24 bit, otterremo un file di 16,7
MB. La stessa fotografia, salvata con una risoluzione di 72 dpi,
contiene 321 489 punti che salvati in RGB generano un file di
965 KB. Se invece di salvarla in RGB utilizziamo il metodo scala
di grigio (8 bit di profondità), la dimensione del file si riduce a
314 KB.
La compressione
Figura 1.3
Schematizzazione del concetto
di risoluzione dpi: ogni punto è
più piccolo o più grande in base
alla quantità di punti che devono
essere contenuti in un pollice
(inch) dell’immagine.
Cap01.indd 12
Per gestire un file di grandi proporzioni ci vogliono computer
potenti e molta pazienza, una potenza che fino a qualche anno
fa la tecnologia non permetteva. Per velocizzare i calcoli e abbassare il peso dei file i tecnici sono ricorsi alla compressione via
software: si cerca di “semplificare” il metodo di registrazione di
tutti i dati che compongono un’immagine, tentando di assemblare e accomunare i vari pixel che la compongono in base a
particolari algoritmi matematici (per similarità di colore, luminosità, vicinanza ecc.).
Esistono vari formati di compressione, che danno risultati differenti. I formati di un file sono identificabili dalle tre lettere che
compaiono sempre dopo il punto che segue il nome (l’estensione:
per esempio, nome.tif). Conoscere le differenze e le potenzialità
offerte dai vari formati ci permetterà di sceglierli correttamente in
base al lavoro che dovremo realizzare.
09/07/2010 11.41.51
Che cos’è Flash
13
Il formato TIFF comprime e mantiene una qualità molto alta
dell’immagine. Il formato PSD, nativo di Photoshop, permette di
salvare livelli e altre opzioni del software di casa Adobe, ma genera file di grosse dimensioni che aumentano in base alla quantità di informazioni registrate. JPEG invece è un formato che
lascia all’utente la scelta del livello di compressione (da 0 per
una qualità bassa a 12 per una qualità massima). Questo formato, per poter aumentare la compressione, interviene sull’insieme
dei pixel contigui che compongono l’immagine deformandoli,
sfuocandone i contorni, mischiando e fondendo i punti fra loro
per renderli più omogenei. L’alterazione con livelli minimi di
compressione non si nota ma diventa sempre più evidente verso
livelli alti di compressione. JPEG è un formato stupendo, ma
non bisogna abusarne!
Le immagini bitmap sono estremamente duttili, permettono di
realizzare ritocchi fotografici, illustrazioni e colorazioni digitali
sfruttando i migliori software in circolazione. Il loro limite consiste nella pesantezza dei file, soprattutto per immagini molto
grandi (come dimensioni e come risoluzione), che potrebbero
diventare troppo pesanti da gestire. All’opposto, immagini di bassa risoluzione, se viste da vicino o ingrandite, mostrano la loro
natura, ovvero i pixel da cui sono costituite. Non è possibile per
esempio usare immagini in bassa risoluzione, magari scaricate
da Internet, per fare dei poster: risulterebbero immediatamente
sgranate!
Windows permette di visualizzare i file con l’anteprima, una soluzione molto comoda per individuare immediatamente l’immagine o il lavoro che dobbiamo aprire. Questa tipologia di visualizzazione può però nascondere il formato del file. Gli utenti
alle prime armi spesso non si preoccupano della tipologia del file,
individuandolo solo attraverso l’anteprima. Imparare a gestire i
diversi formati può invece essere molto utile per capire immediatamente con che tipologia di software è stato realizzato e come
potremo andarlo a modificare. Se Esplora risorse (Windows Explorer) non visualizza le estensioni che identificano i formati dei
file, potete attivarle con il comando: Strumenti | Opzioni cartella |
Visualizzazione e disattivando l’opzione Nascondi le estensioni per i
tipi di file conosciuti (in Windows 7 il percorso è Organizza | Opzioni cartella e ricerca | Visualizzazione | Nascondi le estensioni per i
tipi di file conosciuti).
Rapporto fra compressione e risoluzione
In questo paragrafo faremo una prova per spiegare il rapporto fra
formati di salvataggio e risoluzione. La foto di Figura 1.4 nella sua
Cap01.indd 13
09/07/2010 11.41.51
14
Capitolo 1
Figura 1.4
La foto iniziale.
Figura 1.5
La finestra di Photoshop per il
salvataggio nel formato TIFF
compresso.
Cap01.indd 14
versione originale a colori misurava 22 cm di larghezza e 16 cm
di altezza, a 300 dpi. Salvata in formato TIFF (senza nessun fattore
di compressione), pesa circa 15 MB.
Riducendone semplicemente le dimensioni (sino a 15×11 cm) il
file diventa di circa 7 MB. Attivando la compressione LZW tipica
del formato TIFF (Figura 1.5), il file scende ulteriormente a 5
MB. (Il formato TIFF permette quattro scelte di compressione
differenti: Nessuna, LZW, ZIP o JPEG.)
A questo punto trasformiamo l’immagine in scala di grigio (in
Photoshop il comando è Immagine | Metodo | Scala di grigio). Perdendo tutte le informazioni di colore il peso della fotografia si
abbassa a 1,8 MB.
Continuiamo l’esperimento salvando l’immagine nel formato
JPEG , mantenendo il fattore di compressione alla sua massima
qualità (corrispondente al valore 12, come in Figura 1.6). Il file si
riduce a 1,3 MB.
Rispetto all’immagine iniziale siamo scesi di ben oltre dieci volte
la sua dimensione, a scapito ovviamente della qualità. Eppure un
occhio non esperto, a parte la mancanza di colore, non si accorgerebbe ancora della differenza.
09/07/2010 11.41.51
Che cos’è Flash
Proviamo allora ad agire sul fattore di compressione JPEG, abbassando la qualità al valore Media (corrispondente a 6). Il file scende
drasticamente a 346 KB.
Come dice il proverbio, “l’appetito vien mangiando”: salviamo
nuovamente (File | Salva con nome) portando la qualità sul valore
Bassa (corrispondente a 1); il file ora è di 138 KB.
Possiamo fare ancora una cosa per ridurre ulteriormente il
peso del nostro file: abbassare anche la risoluzione. Da 300
dpi portiamo la risoluzione a 150 dpi (Immagine | Dimensione
immagine) e il file diventa di 53 KB. A 72 DPI diventerà di 28
KB ma il risultato finale sarà ciò che vedete in Figura 1.7. I
dettagli come mattoni, erba e foglie sono andati perduti. Le
fronde dell’albero non si staccano più dal cielo di fondo ma si
mischiano con esso. Le tonalità sono slavate e confuse, opacizzate da un velo come se fossero poste dietro a un vetro smerigliato. Le linee più dritte sono diventate incerte, sfuocate e
frastagliate, e attorno a loro si nota chiaramente l’artefatto della
compressione JPEG. Si vede inoltre la squadratura dei pixel
dovuta alla bassa risoluzione.
Cap01.indd 15
15
Figura 1.6
La finestra di salvataggio
nel formato JPEG da Photoshop.
Figura 1.7
La foto finale.
13/07/2010 18.23.51
16
Capitolo 1
Immagini vettoriali
Figura 1.8
Una sfumatura diagonale,
un semplice esempio
riproducibile sia con software
bitmap sia con software vettoriali.
Cap01.indd 16
I software vettoriali lavorano con un concetto di “assemblaggio”
più vicino al vecchio sistema con cui il grafico poneva sul suo
tavolo di lavoro fotografie, testi e illustrazioni per la composizione
finale della pagina. Nello stesso modo, sul desktop dei programmi vettoriali troviamo diversi “oggetti” (linee, forme geometriche,
fotografie, testi ecc.), ognuno con caratteristiche specifiche. Questi
oggetti possono essere spostati, scalati, colorati e modificati per
arrivare alla soluzione definitiva.
Si chiamano “vettoriali” perché il computer, in questo caso, per
generare una forma non la costruisce suddividendola in pixel,
ma ne traccia il contorno, ne definisce un riempimento (colore,
sfumatura, texture o altro), ne assegna comportamenti peculiari.
Ogni oggetto, per quanto complesso, viene generato partendo da
forme geometriche caratterizzate da vettori.
In Figura 1.8 vedete un quadrato contenente una sfumatura diagonale; questa figura può essere riprodotta sia con un software
bitmap sia con uno vettoriale.
Nel primo caso il software calcola tutti i pixel che compongono
le righe dell’immagine, ognuno con un valore di grigio differente per ricreare l’idea di sfumatura. Se la nostra immagine fosse a
300 dpi, in un pollice avremo almeno 90 000 informazioni corrispondenti ai pixel che la compongono. Il programma, in base al
fattore di compressione da noi scelto, cercherà di comprimerla per
diminuire il numero di informazioni da registrare, che rimarranno
comunque in numero molto elevato.
Nel caso del software vettoriale, invece, il quadrato sarà semplicemente creato con le coordinate dei suoi vertici e i valori cromatici dei due estremi attraverso i quali realizzare la sfumatura.
Semplificando, nel primo caso potremmo ipotizzare 90 000 dati,
nel secondo invece solo 6 dati, ottenendo un file di peso molto
inferiore.
Ecco quindi un primo importantissimo vantaggio di questa tipologia di soluzione grafica, che permette di lavorare anche senza
elevate risorse hardware.
Non essendo legata alla risoluzione e ai pixel che la compongono,
l’immagine vettoriale può essere ingrandita e stampata a piacere,
senza perdita di qualità. Lavorando nel campo della grafica pubblicitaria spesso devo realizzare manifesti di grandi proporzioni
(dal formato 100×70 cm ai mastodontici 6×3 m). I file bitmap di
questi lavori sono enormi, soprattutto per cartelloni molto colorati e ricchi di dettagli; raggiungono facilmente alcune centinaia
di megabyte. Ciò comporta alcuni problemi: la necessità di avere
computer potenti per poter gestire immagini di così alta densità,
09/07/2010 11.41.52
Che cos’è Flash
17
tempi di caricamento e salvataggio rallentati, l’impossibilità di inviare al tipografo il file direttamente via mail nonostante l’ausilio
della veloce linea ADSL. Lo stesso file, se fosse realizzato in vettoriale, peserebbe invece esattamente la stessa quantità di byte sia
per essere stampato in formato A4 sia se dovesse coprire la facciata
del Duomo di Milano.
Curve di Bézier
Nel sistema vettoriale è inoltre possibile modificare in ogni
momento la forma del disegno semplicemente mutando la posizione dei suoi vertici, per poi applicare colori, sfumature e
trasparenze. Le forme vettoriali sono caratterizzate dalle curve
di Bézier: un insieme di linee o segmenti disegnati uno di seguito all’altro e congiunti fra di loro da nodi o vettori. Per generare una di queste curve basta posizionare il primo nodo, poi
successivamente gli altri, e automaticamente il software genera
le linee di congiunzione fra i vari nodi. Ogni nodo definisce
i punti fissi della curva e può essere sempre spostato. Per ogni
nodo vengono definite delle “maniglie” (rappresentate solitamente da quadratini e linee tratteggiate) che permettono di
agevolare la definizione della lunghezza e l’angolo della tangente della linea in entrata o in uscita al nodo stesso (Figura
1.9). Spostando queste maniglie, si variano i parametri dei singoli vertici e con essi la curvatura della linea, realizzando forme
estremamente dettagliate e precise. È possibile aggiungere o
eliminare nodi in base alla complessità della linea e del disegno
da realizzare.
I software vettoriali possono simulare la modulazione del tratto tracciato manualmente che, soprattutto nel caso del fumetto,
conferisce alla vignetta una connotazione fortemente dinamica al
segno, senza dover ricorrere al ripasso a china.
Figura 1.9
Forma modulata realizzata
con un software vettoriale.
Si notano i vettori che
costituiscono le curve
e le maniglie che permettono
di modificare la curvatura
e la forma dei segmenti che
uniscono i vettori fra di loro.
Cap01.indd 17
09/07/2010 11.41.52
18
Capitolo 1
Quale sistema utilizzare?
I software bitmap come Photoshop hanno un approccio più diretto, “imitando” strumenti reali quali aerografo, pennelli, gomme
ecc. I software vettoriali hanno una curva di apprendimento più
ripida, ma offrono molti vantaggi.
La scelta relativa all’utilizzo di un programma piuttosto che di un
altro non andrebbe fatta in base a personali propensioni, bensì alla
tipologia di lavoro da effettuare. È evidente che per rielaborazioni
pittoriche o realistiche come il ritocco fotografico sono utili le
funzioni offerte dai programmi bitmap, mentre per realizzazioni
grafiche come marchi, design e impaginazioni sono più indicati i
programmi vettoriali. È bene quindi conoscere entrambi i metodi
di lavoro.
I formati grafici
Vengono elencati di seguito i più comuni formati grafici, il loro
campo di utilizzo e le loro principali caratteristiche.
Formati bitmap o raster
●
●
●
●
Cap01.indd 18
BMP (bmp): BitMaP. Introdotto da Microsoft Windows come
formato standard per le immagini bitmap. Non ha un campo
di applicazione specifico; può essere utilizzato sia nel DTP
(DeskTop Publishing) sia nel DTV (DeskTop Video). Memorizza
le immagini con una profondità compresa fra 1 e 24 bit (16,8
milioni di colori) senza compressione. Per le immagini a 4 e
a 8 bit si può anche applicare una compressione RLE (Run
Length Encoding) che non elimina il dettaglio dell’immagine.
CPT (cpt): formato nativo di Corel Photo-Paint. Quando si
salva un’immagine in formato CPT, con essa vengono salvate
anche le maschere, gli oggetti flottanti e le lenti generate con
il software.
FPX (fpx): FlashPix. Originariamente creato da Eastman Kodak Company, è utilizzato nelle fotografie digitali. Ha la prerogativa di memorizzare più risoluzioni di un’immagine nello
stesso file.
GIF (gif): Graphic Interchange Format. Si impiega soprattutto in Internet e in tutte quelle applicazioni dove è importante
ridurre il peso delle immagini. Memorizza con una compressione non distruttiva a tasso fisso, studiata appositamente per
ridurre il tempo di trasmissione sulla Rete. Supporta solo 8
bit (256 colori). Il formato è particolarmente indicato per
09/07/2010 11.41.52
Che cos’è Flash
●
●
●
●
●
●
●
Cap01.indd 19
19
le immagini con colori uniformi. Le immagini GIF possono
contenere parti trasparenti, una caratteristica molto utile, per
esempio, quando si vuole sovrapporre un testo o un personaggio a uno sfondo. Le immagini inoltre possono essere salvate con più fotogrammi, generando così piccole animazioni.
IIF (iif): Interchange File Format. Introdotto e utilizzato con
Commodore Amiga, è supportato anche da numerosi programmi di disegno su PC.
JPEG (jpg): Joint Photographic Expert Group. Date le sue notevoli capacità di compressione, viene utilizzato per arricchire
siti Internet e in tutte quelle applicazioni dove è necessario
ridurre il peso delle immagini. È stato sviluppato specificatamente per fotografie e illustrazioni composte da un elevato
numero di sfumature. Memorizza le immagini con un tasso di
compressione variabile, mantenendo le informazioni sui colori RGB, ma perdendo informazioni con l’aumentare della
compressione. La qualità può dunque variare a secondo del
tasso di compressione. Supporta una palette a 24 bit. I file
JPEG possono essere salvati sia nello spazio colore CMYK sia
in quello RGB, anche se i browser web supportano esclusivamente le immagini in RGB.
PCD (pcd): Kodak Photo CD. Sviluppato da Eastman Kodak
per inserire fotografie su compact disc. Permette la memorizzazione e il trattamento di immagini ad alta qualità.
PCX (pcx): formato stabilito da Zsoft per il proprio software
Paintbrush. Le immagini possono avere una profondità di colore di 1, 4, 8, o 24 bit. Supporta il metodo di compressione
RLE, ma non supporta i canali alfa.
PICT (pct): formato largamente utilizzato dalle applicazioni
di grafica e impaginazione che girano su Macintosh. È particolarmente efficace nella compressione di immagini con ampie superfici di colore a tinte piatte o contenenti canali alfa.
Un’immagine in scala di grigio può essere salvata con 2, 4, 8
bit per pixel, mentre un’immagine RGB può essere salvata
con profondità 16 o 32 bit.
PIXAR: formato studiato specificatamente per applicazioni
grafiche ad alto livello come il rendering o le animazioni tridimensionali. Viene utilizzato per lo scambio di file con le
workstation PIXAR. Supporta immagini sia a scala di grigio
sia in RGB, e un solo canale alfa.
PNG (png): Portable Network Graphics. È un recente formato grafico per il Web, estremamente versatile, sviluppato
come alternativa al formato GIF. Poiché è molto recente, solo
i browser di ultima generazione lo visualizzano. Il formato
09/07/2010 11.41.53
20
Capitolo 1
●
●
●
●
PNG supporta colori fino a 32 bit, può contenere la trasparenza e i canali alfa. Utilizza uno schema di compressione
senza perdite. Durante il salvataggio del file si può scegliere
l’opzione per visualizzare l’immagine con un dettaglio crescente mentre viene scaricata tramite Rete.
PSD (psd): formato standard di memorizzazione per i file di
Photoshop di Adobe. Supporta tutti i metodi di colore disponibili per le immagini, come: bitmap, scala di grigio, due
tonalità, scala di colore, RGB, CMYK. Supporta i canali alfa
e i livelli.
RIFF (rif): formato originale di Corel Painter. Il salvataggio
memorizza anche le informazioni sul progetto e sugli oggetti
mobili, rendendo il file più grande di quelli salvati con GIF o
JPEG. Può essere compresso con un metodo di compressione
a bassa perdita di informazioni.
TARGA (tga): formato indicato per sistemi che utilizzano la
scheda video Truevision. Molto diffuso nell’ambito DTV e in
quello dell’elaborazione video. Memorizza le immagini con
una profondità di colore selezionabile, fino ad arrivare all’alta
qualità a 32 bit. In questo modo si gestiscono al meglio gli
effetti di trasparenza e mascheratura.
TIFF (tif): Tagged Image File Format. Si impiega soprattutto
in DTP, per lo scambio di file tra piattaforme diverse, per
lavori di tipografia, data l’alta qualità delle immagini richiesta per questo genere di lavori. Permette la memorizzazione
di immagini non compresse, oppure con una compressione
(LZW) di tipo non distruttivo, che non elimina i dettagli
dell’immagine. È possibile scegliere tra le ulteriori opzioni di
compressione JPEG e ZIP.
Formati vettoriali
●
●
●
Cap01.indd 20
AI (ai): formato di Adobe Illustrator. Essendo un formato
molto utilizzato, può essere comodamente sfruttato come file
d’interscambio fra i diversi programmi vettoriali.
CDR (cdr): formato utilizzato nelle applicazioni di illustrazione per il desktop publishing per la sua compattezza e scalabilità. Nativo per i file creati in CorelDraw.
DWF (dwf): Drawing Web Format. Con questo formato e la
funzione ePlot di AutoCAD, è possibile pubblicare file di disegno elettronici su Internet. Se si dispone del plug-in WHIP!
è possibile aprire, visualizzare e stampare senza problemi i file
DWF. Questo formato infatti supporta la panoramica e lo
zoom in tempo reale nonché il controllo sulla visualizzazione
09/07/2010 11.41.53
Che cos’è Flash
●
●
●
21
dei layer, delle viste con nome e dei collegamenti ipertestuali
incorporati.
DWG (dwg): AutoCAD Drawing Database. Formato nativo
per il programma AutoCAD, è diventato uno dei formati più
utilizzati nei disegni CAD.
DXF (dxf): Drawing Interchange Format. I file DXF sono
file di testo contenenti informazioni sul disegno che possono
essere lette da sistemi CAD diversi da AutoCad.
FH (fh): formato vettoriale nativo di FreeHand.
Altri formati
●
●
EPS (eps): Encapsulated PostScript. È supportato dalla maggior parte dei programmi di illustrazione e di impaginazione.
La codifica può essere di tre tipi: ASCII, che è la più generica,
ma crea file più grandi; binaria; JPEG, che crea file piccoli ma
che possono ridurre la qualità di stampa.
PDF (pdf): formato di pubblicazione elettronica, basato sul
linguaggio PostScript. Viene utilizzato da Adobe Acrobat per
rappresentare immagini bitmap e vettoriali. Formato multipiattaforma, può essere utilizzato indifferentemente su piattaforme Windows, Macintosh, Unix. I file PDF possono contenere anche funzioni di ricerca e navigazione, collegamenti
ipertestuali e un sommario elettronico. Per poterli leggere basta installare il software gratuito Acrobat Reader (www.adobe.
it) o software analogo, mentre per generarli bisogna acquistare la licenza di Acrobat o di programma analogo. Una volta
installato il programma, il file PDF viene generato come se
fosse un processo di stampa; invece di inviare i dati alla periferica hardware, essi vengono codificati nel formato di Acrobat.
È uno dei formati più usati per consegnare in tipografia i file
pronti per andare in stampa.
I formati di Flash
Il formato standard di Flash è FLA. Il programma genera tuttavia
un secondo formato solo per la pubblicazione dell’animazione
finale, che si chiama SWF. Il primo formato memorizza tutti i
passaggi di realizzazione del file e viene aperto dal programma (se
è installato sul computer), il secondo è solo un formato di visualizzazione in grado di semplificare, comprimere e ridurre il peso
del file per ottimizzarne la riproduzione e lo scaricamento dalla
Rete.Viene aperto dal player gratuito di Flash.
Cap01.indd 21
09/07/2010 11.41.53
22
Capitolo 1
Importazione
Flash riconosce i seguenti formati nel processo di importazione:
Adobe Illustrator (ai); PNG File (png); Photoshop (psd); AutoCad
(dxf); Bitmap (bmp, dib); Filmati Flash (swf); immagini GIF e JPEG;
Audio Wave (wav); Audio Mp3 (mp3); audio AIFF (aif, aiff); documento audio Adobe (asnd); Sun Au (au); filmati QuickTime (mov,
qt); video per Windows (avi); filmati MPEG (mpg, mpeg, m2p, m2t,
m2ts, mts, tod); file MPEG-4 (mp4, m4v, avc); Digital Video (dv, dvi);
Video Adobe Flash (flv, f4v); 3GPP / 3GPP2 per dispositivi mobili (3gp, 3gpp, 3gp2); Adobe FXG (fxg); immagine TIFF (tif, tiff);
immagine Quick Time (qtif).
Esportazione
Flash esporta come immagini nei seguenti formati: filmato Flash
(swf); Adobe FXG (fxg); Bitmap (bmp); immagini JPEG, GIF,
PNG.
Flash esporta come filmati nei seguenti formati: filmato Flash
(swf); Windows (avi); Quick Time (mov); GIF animato (gif); Audio
(wav); come sequenze di immagini (jpg, gif, png).
Oltre a questi formati spesso è possibile incollare dei contributi
nello Stage di lavoro di Flash semplicemente copiandoli da un
programma (con la combinazione di tasti Ctrl+C) e incollandoli
nell’ambiente di lavoro di Flash (con Ctrl+V).
Cap01.indd 22
09/07/2010 11.41.53