|
|
|
|
|
|
|
Flash e
Macromedia
La storia di Flash attraverso la storia della società
produttrice: la Macromedia.... |
|
Shockwave
e Flash
Differenze tra Flash e Shockwave |
|
Grafica vettoriale e grafica bitmap
Peculiarità
e differenza tra grafica vettoriale e Bitmap |
|
Grafica vettoriale e Internet
Presente
e prospettive dell'impiego della grafica vettoriale in Internet
Parte
Generale |
|
Ambienti di Sviluppo
Visione d'insieme
sugli ambienti di sviluppo di Flash: stage, timeline e libreria |
|
Lo Stage
la velocità, le dimensioni, il colore dello sfondo e l'unità di misura,
l'utilizzo della Griglia, delle Guide e dei Righelli |
|
Timeline e Scene
Il Timeline organizza
il filmato in maniera diacronica, seguendo, cioè, lo sviluppo dell'azione
nel tempo |
|
|
|
|
Simboli e istanze
Programmazione ad oggetti, simboli, istanze e librerie |
|
Usare le Librerie
Elementi grafici,
bottoni, movie clips e suoni inglobati o collegati |
|
|
|
Gli ispettori e i Pannelli
Controllare
gli oggetti |
|
|
|
Movie Explorer
Ogni elemento al suo posto
Disegnare
con Flash |
|
|
|
Toolbox
Strumenti del Toolbox, Modificatori e proprietà |
|
|
|
Strumenti per le forme (Shapes)
Strumenti per disegnare Forme: line, oval, Rectangle |
|
|
|
Colori di riempimento e bordi
Come scegliere il coloro di riempimento o bordo |
|
|
|
Tutorial 1
Effetti in Flash in base
alle nozioni finora esposte, con esempi pratici e file scaricabili. |
|
|
|
|
Strumento Matita e disegnare in Flash
Il
disegno a mano libera e l'uso degli strumenti di ottimizzazione delle curve |
|
|
|
Strumento Arrow e spostamento o modellamento
oggetti
Lo strumento Arrow o Freccia serve sia a selezionare, che a modificare le
linee mentre i suoi modificatori sono utili per cambiare la posizione e la
forma degli oggetti. |
|
|
|
Strumento Lasso
Lo strumento Lasso è
particolare per Macromedia. |
|
|
|
Strumento Penna e Subselection e le curve di
Bezier
Lo strumento Penna per operare con maggiore sicurezza in grafica
vettoriale. |
|
Colorare in Flash
Strumento Pennello, calamaio, secchiello e contagocce |
|
Cancellare in Flash
Panoramica sullo strumento "gomma" di Flash |
|
Strumento testo
Scrivere testo, i
modificatori, modificare il testo e modificare il box di testo |
|
Strumento
zoom
Scrivere testo, i modificatori, modificare il testo e
modificare il box di testo |
|
|
|
Importare grafica
Flash è molto
potente se si opera anche con altri authoring |
|
|
|
|
Layer
Suddividere
la scena in più layer è certamente molto utile al disegnatore, perché aiuta
ad individuare gli elementi che sono in movimento da quelli che, invece,
restano fermi |
|
Operare con i Layer
Approfondimento
pratico sui Layer |
|
Creare e modificare i Layer
Come
creare nuovi layer o modificarne di gia' esistenti
Animazione |
|
|
|
I fotogrammi
Prima di spiegare il
funzionamento delle animazioni occorre diventare padroni dell'utilizzo dei
fotogrammi o frame ... |
|
Operare con i fotogrammi
Spiegati
teoricamente i fotogrammi vediamo come aggiungerli al filmato ... |
|
Tutorial di frame e layer
Un tutorial basato su tre figure animate su tre layer diversi che ad un
certo punto si sovrappongono. |
|
Animazioni
Per creare animazioni si può
operare in due modi: frame by frame e tweened animation. |
|
|
|
Animazioni frame by frame e Onion Skin
L'animazione
frame by frame è quella che si ottiene con la tecnica delle gif animate
disegnando il singolo fotogramma da visualizzarsi poi in sequenza. |
|
|
|
|
Tutorial con Onion Skin
Dimostrazioni
pratiche del funzionamento di Onion Skin |
|
Motion Tweening
La tecnica
dell'animazione vettoriale che da due fotogrammi crea quelli intermedi
mediante calcoli matematici. |
|
Altri parametri per il Motion tweening
Impostata
un'animazione Motion tweening, questa si può modificare in alcuni parametri
aprendo la finestra per impostare l'animazione ... |
|
Motion tweening secondo un percorso
Accade spesso di dover animare oggetti lungo tracciati irregolari. Anche
in questo caso Flash ci viene in aiuto consentendo di impostare i tracciati
su cui si deve svolgere una Motion Tweening lungo di questo. |
|
Shape tweening
Le animazioni piu'
suggestive restano le Shape tweening che operano come un morphing
Suono |
|
|
|
Importare suoni
I formati sonori che è possibile importare |
|
Esportare suoni
Come è possibile esportare |
|
|
|
|
Pubblicazione
del filmato |
|
Eseguire un filmato
Una volta prodotto
il filmato di Flash, questo si può pubblicare su diversi supporti... |
|
Pubblicazione del filmato
Una volta completato il movie di Flash occorre pubblicarlo sul web; qui si
gioca la precisa impostazione delle pagine HTML ... |
|
Pubblicazione sul web
Per pubblicare un filmato con Flash 4.0 o lo si esporta nel formato dovuto
e poi si impagina con AfterShock o si utilizza il comando Publish ... |
|
Comando Publish
Le opzioni presenti nel pannello di formattazione della pubblicazione del
filmato in Flash. |
|
Size report
Il Size Report che offre
utilissime osservazioni sulle dimensioni del file di Flash. |
|
|
|
|
|
|
Flash e Macromedia |
|
Shockwave e Flash |
|
Grafica vettoriale e grafica bitmap |
|
Grafica vettoriale ed Internet |
|
|
|
|
Macromedia (orig. MacroMind) fondata nel 1984 a
Chicago da Marc Cantor |
|
VideoWorks-authoring multimediale vs HyperCard
(Apple) e Toolbook(Asimetrix) |
|
Freehand 1987 (grafica vettoriale) |
|
VideoWorks>Director/Future Splash>Flash
2.0 (1997)>Flash 3.0>Flash 4.0>Flash 5.0 |
|
Director/Lingo scripting vs Flash per proiettori |
|
Flash –accessibiltà senza player: |
|
-77% (King, Brown&Partners)
-83% (NDO OnLine) |
|
Explorer 5.0 e Netscape accordo
compatibilità Flash |
|
|
|
|
Formati compatibili, nati da diversi authoring |
|
Shockwave è un formato dei filmati di Director |
|
Shockwave è un file compresso visualizzabile in
Netscape ed Explorer mediante plug-in |
|
Limiti: mancato utilizzo di elementi collegati e
non incorporati al filmato |
|
Director 6.0 permette lo streaming a Shockwave |
|
Shockwave diverso Flash per la capacità di
programmazione su base Lingo e istruzioni progettate per web, rendendolo
capace di gestire database e media complessi |
|
Shockwave minore successo di Flash: |
|
-formatto più adattato che progettato per Internet |
|
-difficoltà linguaggio Lingo |
|
-plug-in lungo da scaricare |
|
|
|
*Testo per Director e Shockwave di Jason
Roberts(Mc Graw Hill) |
|
|
|
|
|
|
Flash- formato vettoriale |
|
|
|
Formato vettoriale permette di ottenere movie
(filmati) compatti, leggeri e di ottima qualità grafica |
|
|
|
Grafica vettoriale: |
|
-manipolazione
linee e curve (traduzione in formule matematiche) |
|
|
|
Grafica bitmap (raster): |
|
-usa i pixel come mosaico memorizzandoli attraverso database pixel/colori |
|
|
|
|
|
|
|
|
|
|
|
|
Formato vettoriale (Flash): |
|
-più definito e maggiore qualità per disegni semplici (Clipart) |
|
-facile trasformazione immagini vettoriali in bitmap |
|
-per visualizzarlo su video necessaria la rasterizzazione |
|
-rende file molto compatti ma con calcoli complessi per essere
ricomposti |
|
-cambiando dimensione dell’immagine viene conservata la qualità (immagini
scalabili) |
|
-file contenente immagine può racchiudere informazioni addizionali |
|
|
|
|
|
|
|
|
|
|
Formato bitmap: |
|
-maggior qualità immagini con numero elevato di colori e texture
complesse (fotografie) |
|
-difficile trasformazione immagini bitmap in vettoriali (Adobe
Streamline) |
|
-facile visualizzazione su video |
|
-rende file più leggeri se ridotte nella definizione o nelnumero di
colori diminuendo proporzionalmente la qualità |
|
-cambiando dimensione dell’immagine la qualità viene peggiorata |
|
-file contenente immagine può racchiudere informazioni addizionali |
|
|
|
|
|
|
|
|
|
|
Internet privilegia bitmap perché già in formato
video (pixel) e non da rasterizzare |
|
Non esiste standard industriale per la
trasmissione di immagini vettoriali in rete (si stanno impegnando a
svilupparlo Micrografx con Quicksilver e Macromedia con Flash) |
|
Adobe vs Macromedia |
|
Adobe: |
|
-PGML (PDF e XML) sottoposto a W3C (ancora non distribuito) |
|
-PGML mantiene font utilizzato, di comprensione più facile ma più
pesante allo scaricamento (no codice binario) |
|
-accordo con IBM, Netscape e Sun |
|
Macromedia: |
|
-SWF
è già standard (77-80% utenti Internet) |
|
-veloce da scaricare (codice binario) |
|
-accordo con Microsoft, Netscape, Real Networks e IBM |
|
Adobe e Flash potrebbero convivere con dualità
GIF e JPG |
|
|
|
|
|
|
|
|
|
|
Ambienti di Sviluppo |
|
Lo Stage |
|
Timeline e Scene |
|
Simboli e istanze |
|
Usare le Librerie |
|
Gli ispettori e i Pannelli |
|
Movie Explorer |
|
|
|
|
Stage
palcoscenico, in cui si
costruiscono i filmati posizionando gli oggetti nello spazio e tra loro |
|
Timeline
rappresenta disposizione degli
oggetti in sequenza temporale |
|
Library
contenitore che archivia
oggetti, suoni, simboli e animazioni da inserire nel filmato |
|
|
|
|
L’ambiente di sviluppo di Flash non è statico e
può essere configurato attraverso i comandi menu View e Window |
|
View
Timeline (CTRL-ALT-T)
Work Area (CTRL-SHIFT-W)
Rules (CTRL-ALT-SHIFT-R) |
|
Window
Toolbars si scelgono le barre da
visualizzare |
|
|
|
|
Appare come un foglio bianco in cui è
possibilile disegnare,scrivere e importare immagini |
|
|
|
|
Proprietà dello stage si cambiano in |
|
Modify>Movie o Ctrl+M: |
|
|
|
Frame Rate (velocità di esecuzione) |
|
Dimensions (dimensioni) 550px per 400 default, variabili tra 18x18 e
2880x2880 |
|
Printer: limita contenuto dello stage alla
stampa |
|
Content: si limita al contenuto dello stage |
|
Background Color |
|
Ruler Units |
|
|
|
|
|
|
Grid (griglia) |
|
|
|
Facilita disposizione degli oggetti |
|
View>Grid |
|
Show Grid (Ctrl+A): visualizza e nasconde la
griglia |
|
Snap to Grid: aggancia gli oggetti alla griglia
quando sono trascinati |
|
Edit Grid: ne modifica i parametri: |
|
-Color |
|
-Larghezza e altezza dei quadrati |
|
-Snap accuracy-modalità di agganciamento |
|
|
|
|
Guides (guide) |
|
|
|
Identificano i contorni dell’oggetto facilitando
il disegno |
|
View>Guides |
|
Show Guides (Ctrl+E’): visualizza le guide |
|
Lock Guides: nasconde le guide |
|
Snap to Guides: ancora gli oggetti |
|
Edit Guides: ne modifica i parametri |
|
|
|
Rulers (righelli) |
|
Controllano le dimensioni |
|
View>Rulers (o Ctrl+Alt+Shift+R) |
|
|
|
|
|
|
|
|
Timeline : |
|
offre una rappresentazione dell’insieme dei frames che costituiscono il filmato |
|
gestisce e modifica i frames |
|
organizza gli elementi che compaiono in esso |
|
|
|
|
Playhead (testina di lettura): |
|
Fissa il fotogramma da visualizzare |
|
Riproduce i filmati come un videoregistratore-la
testina “legge” il nastro |
|
Timeline header (testata): |
|
Indica il numero di fotogramma (frame) |
|
Stato del frame: |
|
|
|
|
Frame view: |
|
Serve ad impostare i fotogrammi |
|
|
|
|
|
|
Flash adopera una struttura di simboli e istanze |
|
I simboli sono elementi grafici e sonori
conservati in particolari librerie sempre utilizzabili. |
|
Le istanze sono copie dei simboli poste sullo
stage e direttamente utilizzabili dal filmato. |
|
Il simbolo si può modificare con tutte le
istanze che da esso dipendono, l’istanza si può modificare senza modificare
il simbolo da cui proviene. |
|
Se i cambiamenti sono radicali l’istanza si
stacca dall’oggetto e forma un elemento indipendente.(colorazione,scala e
posizione). |
|
Swap-Symbol dal pannello Istance per associare
l’istanza ad un altro simbolo. |
|
L’uso dei simboli riduce il peso di un file. |
|
Per raggruppare oggetti Ctrl+G per inverso
Ctrl+B |
|
Le Librerie sono le collezioni dei simboli,risparmi
tempo e contieni le dimensioni del filmato. |
|
|
|
|
Per utilizzare i simboli posti nelle
librerie:
Windows > Common Libraries |
|
|
|
|
|
|
|
|
|
|
Gli Ispettori sono pannelli in cui si possono
impostare tutti i parametri di un oggetto e di una scena: Windows >
Inspectors |
|
|
|
|
La novità di Flash 5.0 sono i Pannelli |
|
Possono essere modificati dal menu Window |
|
|
|
|
Novità inserita in Flash 5.0 Window > Movie
Explorer (Ctrl+alt-M) |
|
|
|
|
|
|
Gestione completa delle nidificazioni |
|
|
|
|
|
|
Gruppi di strumenti grafici |
|
|
|
|
|
|
Strumenti per disegnare forme |
|
|
|
|
|
|
Contorno (Stoke) e Riempimento (Fill) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Vera forza del disegno vettoriale perché la
linea può essere sempre ripresa e modificata. |
|
|
|
|
Modificatore + Shift per linee rette |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Note