Isa Venturi a.s.2008/2009 doc.macchi LEZ.2

Transcript

1 FLASH PER L'ANIMAZIONE - 1 Quando si lavora con Flash bisogna un po' abituarsi a costruire oggetti e scene complesse non come ci piace a noi ma in funzione di ciò che dobbiamo farci. Nel caso dell'animazione gli oggetti vanno costruiti in funzione di come si vuole animare e di cosa si vuole animare. Questo ci deve portare a pensare molto bene alla nostra animazione prima ancora di realizzarla con questo software. Se all'inizio questo ci creerà non poche difficoltà, perché dobbiamo rivedere la nostra forma mentale, a lungo andare ci permetterà di risparmiare moltissimo tempo e ottimizzare le nostre creazioni. Questi sono gli ingredienti e la ricetta che dobbiamo utilizzare per fare un buon lavoro e usando lo stage come tavola di lavoro: disegnare gli elementi grafici stabilire le relazioni fra gli elementi impostare l'interattività assemblare il filmato definitivo usando lo stage come palcoscenico USO DELLE LIBRERIE Il primo concetto che dobbiamo assimilare è quello dell'uso delle librerie, una sorta di scatola dei pezzi da montare, indispensabile per realizzare l'animazione. Nelle librerie possono essere depositati oggetti di vario tipo. Le tre tipologie di oggetti più importanti sono: CLIP FILMATO PULSANTE GRAFICO Che differenza c'è fra un tipo di simbolo e l'altro? Proviamo a elencare sotto le caratteristiche principali: CLIP FILMATO animazioni indipendenti dalla timeline principale supporto di codice Action Script PULSANTE - interazione con il mouse e con la timeline supporto di codice Action Script GRAFICO - elementi grafici statici animazioni dipendenti dalla timeline principale codice action script non supportato Per vedere il contenuto della libreria è necessario attivare la palette corrispondente con menù FINESTRE LIBRERIA. Come potete vedere nell'immagine a fianco ogni tipologia di oggetto ha una sua propria icona che lo caratterizza. Per creare una qualunque delle tipologie dell'oggetto, dopo averlo disegnato senza raggrupparlo bisogna selezionarlo e scegliere il comando da menù: ELABORA CONVERTI IN SIMBOLO. Il menù vi chiede di dare un nome al simbolo (questo è un elemento importantissimo per potere creare l'animazione perché potremmo avere decine di simboli e dobbiamo poterci orientare), e poi vi chiede di definire le caratteristiche del simbolo secondo le tre categorie di cui sopra. Il simboletto indicato con la freccia rossa serve invece a definire quale, dei 9 punti esterni del simbolo è da ritenersi il punto di origine del simbolo stesso. Il simbolo sullo stage è evidenziato con un rettangolo azzurro per differenziarlo dalla forma libera e, lo stesso simbolo, verrà visualizzato nel pannello libreria.

2 Come potete vedere nel menù delle proprietà il simbolo ora viene chiamato ISTANZA. Quindi, gli oggetti presenti nella libreria si chiamano SIMBOLI, ma quando lo stesso viene portato sullo stage si chiamerà ISTANZA. È importante perché noi possiamo avere un solo simbolo nella libreria ma molteplici istanze di quel simbolo sullo stage. Potremmo anche dire che una istanza equivale ad una copia di un simbolo. Del simbolo ne ha le caratteristiche anche se è possibile che una istanza abbia una dimensione diversa dal simbolo che l'ha generata. Per portare una istanza di un simbolo nello stage basta trascinare l'anteprima del simbolo nella libreria nello stage. Per modificare in modo significativo l'istanza devo modificare il simbolo da cui è stata generata e per modificare il simbolo mi basta fare un doppio click del mouse sul simbolo direttamente nella libreria. Quando il software è in modalità di modifica del simbolo viene visualizzato nello stage il nome del simbolo e scompare l'area grigia fuori dallo stage. Ora qualunque modifica sarà possibile e, una volta confermata selezionando la scena attiva (freccia verde) e uscendo dalla modalità di modifica, tutte le istanze verranno modificate come il simbolo. La creazione di un simbolo potrebbe avvenire anche direttamente, senza l'uso dello stage, utilizzando il comando INSERISCI NUOVO SIMBOLO Diciamo che il resto della procedura di costruzione del simbolo è assolutamente identica alla precedente metodologia dove usiamo lo stage per costruire. ESERCIZIO 1 create con gli strumenti di disegno una faccia sorridente selezionate il disegno e create un simbolo grafico che chiamerete faccia cancellate dallo stage il disegno portate dalla libreria 5 o 6 istanze del simbolo faccia cambiate la dimensione e la rotazione di alcune delle istanze ora modificate il simbolo togliendo il sorriso alla faccia confermate le modifiche e visualizzate cosa è successo nello stage. Se volete inviarmi l'esercizio per verificarne la correttezza usate questo indirizzo mail: black.spot@tiscali.it

3 LAVORARE CON LE LIBRERIE Per ogni documento flash è possibile avere una sola libreria. È però possibile utilizzare le librerie di altri documenti aperti che non sono quello attivo nello stage. Come potete vedere nell'immagine, in Flash sono aperti 3 documenti (1.fla pennello2.fla matita.fla). Nel pannello della libreria è possibile, con un menù a tendina, selezionare la libreria di uno qualunque dei tre documenti aperti. È anche possibile passare da un documento all'altro tenendo bloccata la libreria che si vuole utilizzare, selezionando l'icona che contiene la puntina (freccia rossa) della palette libreria, così come è possibile aprire altri pannelli libreria usando l'icona a fianco della puntina (freccia verde). Può succedere anche di avere la necessità di usare la libreria di un progetto senza volerlo aprire nello stage. In questo caso è necessario importare la libreria usando il comando FILE IMPORTA APRI LIBRERIA ESTERNA Apparirà un panello libreria che non occupa spazio come memoria nel documento attivo nello stage e che contiene la libreria del documento di flash indicato dall'utente. (*.FLA) La libreria è disponibile solo per l'esportazione, non può essere modificata. Per Utilizzare uno dei simboli della libreria posso direttamente trascinare il simbolo richiesto nello stage o nel pannello libreria del documento aperto. Se il simbolo che intendo importare nella mia libreria è composto da altri simboli nidificati, nella mia libreria dopo l'importazione apparirà l'intera gerarchia dei simboli. L'utilizzo delle librerie non si conclude qui. Esiste anche la possibilità di attingere a librerie sganciate dal documento di flash ma disponibili come risorsa per ogni documento in lavorazione. Per accedere a queste librerie dovete selezionare: FINESTRA LIBRERIE COMUNI PULSANTI e selezionare il simbolo desiderato trascinandolo nello stage o nella libreria del nostro documento aperto. Se da un lato, in questo modo, rinunciamo all'originialità del nostro progetto, usando libreria di oggetti già fatti velocizziamo i tempi di costruzione del progetto stesso. Queste librerie non sono altro che documenti di flash già fatti che potrete trovare nelle cartelle di installazione di Flash C:\Programmi\Adobe\Adobe Flash CS3\it\Configuration\Libraries Questo significa che se vogliamo salvare librerie personalizzate, con simboli creati da noi, che però possono venire utili in molte situazioni progettuali, dobbiamo salvare la libreria nel percorso che vi ho indicato. La libreria che avete salvato sarà disponibile ora nel menù delle librerie comuni e potrete usarla all'occorrenza. Ovviamente se cambiate computer dovrete portare con voi anche le vostre librerie personalizzate È possibile convertire un simbolo da una tipologia all'altra selezionando dal menù specifico del pannello libreria la voce TIPO, come indicato nell'immagine a fianco. È possibile anche modificare il nome del simbolo nella libreria rimanendo in piena sicurezza che verrà salvaguardata la gerarchia della struttura di simboli anche nidificati. Per simboli nidificati intendo simboli che appartengono ad altri simboli. Come vedete nel menù a

4 fianco altre sono le proprietà che è possibile editare con questo menù come la modificazione, che avevamo visto anche precedentemente, e l'eliminazione del simbolo. Particolarmente importante è il comando duplica che ci permette di lavorare in grande libertà anche in simboli che contengono altri simboli nidificati. ESERCIZIO 2 crate il disegno di un carrellino rosso con 2 ruote dove il carrello è un simbolo, la ruota è un simbolo e l'intero carrellino è un altro simbolo (carrello completo), come indicato nella libreria di questa immagine. Fin qui niente di particolare. Duplichiamo il carrello 2 o 3 volte nello stage. Ipotizziamo ora di volere che nella scena uno dei carrelli abbia caricato la faccia del bimbo che abbiamo disegnato prima; possiamo ridisegnare il carrello selezionando i simboli che lo compongono oppure possiamo duplicare l'intero carrello che contiene già le istanze delle ruote e modificarlo. Quindi duplichiamo il simbolo carrello completo dandogli un nome adeguato. Entriamo nella modalità di modifica del simbolo e aggiungiamo una istanza di faccia. Usciamo dalla modalità di modifica del simbolo e creiamo una istanza del carrello con faccia del bimbo. Provate a fare la stessa operazione disegnando un carrello blu e un carrello rosso e sostituendo il carrello rosso usando il comando SCAMBIA del menù delle opzioni del simbolo

5 ALTRI OGGETTI IN LIBRERIA In libreria possiamo anche inserire altri tipi di oggetti senza relazione diretta con ciò che costruiamo con Flash come immagini, file audio o video da utilizzare nello stage Anche gli oggetti di tipo carattere possono essere inclusi nel documento incorporando lo stile del font nell'animazione sicuri del fatto che l'utente potrà vedere la grafica come l'abbiamo pensata senza avere il font installato. PROPRIETÀ DELLE ISTANZE E PROPRIETÀ DEI SIMBOLI Ogni istanza, come abbiamo già detto, contiene tutte le caratteristiche del simbolo più variazioni di dimensione o posizione sullo stage. Al variare del simbolo viene variata anche l'istanza, ma non è vero il contrario. Sulla istanza però è possibile modificare anche alcuni parametri contenuti nel menù specifico delle opzioni come ad esempio il colore fra cui la luminosità, la tinta, la trasparenza (Alfa) oppure la modalità AVANZATO che permette di modificare tutte e 3 le proprietà contemporaneamente. Le istanze possono devono avere un nome scollegato da quello del simbolo. Per impostare un nome specifico ad ogni istanza dobbiamo digitarlo nell'apposita stringa (freccia verde). Questo tipo di nomina delle istanze è importantissimo quando si usa il codice Actionscript che prevede perché chiama le singole istanze per fargli eseguire specifici compiti, mentre non è possibile dare un nome ad un istanza generata da un simbolo di tipo grafico perché, per sua natura, non è in grado di interagire con il codice di programmazione. Per modificare l'aspetto delle istanze è possibile usare anche il menù FILTRI che trovate insieme a quello delle proprietà in fondo allo stage. Ricordate che i filtri che propone Flash, che sono molto simili nel funzionamento ai filtri di livello di Photoshop. Sono applicabili solo alle istanze clip e pulsanti e al testo Così come è possibile modificare la modalità di fusione del colore di una istanza su un'altra utilizzando il comando FUSIONE del menù opzioni. Anche in questo caso il riferimento al funzionamento è simile a quello di Photoshop per i livelli (metodo di fusione)

6 USO DEI LIVELLI DI FLASH Come tutti i software della famiglia Adobe l'utilizzo dei livelli è alla base della preparazione di un progetto complesso. Questo è ancora più vero in Flash dove l'uso dei livelli ha una forte ricaduta sulla costruzione dell'animazione che è uno degli obiettivi primari di questo software. Non a caso lo spazio per la gestione dei livelli è integrato nella Timeline ovvero il menù che ci permette di gestire tutta la struttura dell'animazione. Per aggiungere nuovi livelli selezionare l'icona corrispondente alla freccia rossa. Per modificare la sequenza dei livelli basta trascinarli nella posizione desiderata, ovvero sopra o sotto a quelli contigui. Il livello che sta sopra è quello che sta più in alto, o meglio, il primo della lista: se guardiamo l'immagine è il livello ROSSO. Il nome del livello è modificabile a piacimento con un doppio click del bottone sinistro del mouse con successiva digitazione del nome desiderato all'interno della stringa. L'icona della matita (freccia verde) ci indica che in questo momento stiamo lavorando sul livello in cui essa appare. Pur essendo quello selezionato, io posso bloccare il contenuto del livello per evitare di muovere o modificare inavvertitamente con un click in corrispondenza della colonna identificata con l'icona di un lucchetto (freccia blu) L'icona con l'occhio nella colonna a fianco (freccia bianca) permette di visualizzare o non visualizzare il contenuto del livello La casella colorata nella colonna a fianco del lucchetto (freccia nera) ci permette di visualizzare il contenuto del livello non con le sue proprietà di colore ma in modalità wireframe. Con un doppio click sulla casella colorata si ha accesso ad un menù specifico in cui possiamo cambiare il colore assegnato al livello. Per eliminare un livello trascinarlo sull'icona del cestino (freccia azzurra). L'icona cartellina (freccia gialla) serve per raggruppare livelli per ottimizzare la visualizzazione. Cliccando sul livello vengono evidenziati sullo stage tutte le istanze che vi appartengono. Altre modalità di impostazione del livello sono disponibili cliccando due volte sull'icona del livello (freccia arancio) di cui vogliamo disporre. Nel menù come potete vedere ci possiamo trovare molte delle cose che abbiamo già visto. Vediamo come sia possibile modificare la tipologia del livello da normale in modalità guida, per esempio, o in modalità maschera o cartella LA TIMELINE è la vera anima dell'animazione. Quando parliamo di animazione dobbiamo pensare che tutto quello che abbiamo nello stage si deve muovere nello spazio e nel tempo.

7 Come vedete è possibile personalizzare la visualizzazione della timeline anche se, in linea di principio, è meglio mantenerla nella modalità normale. Tasto invio per attivare l'animazione tasto. - avanti di un fotogramma tasto, - indietro di un fotogramma I TRE METODI DI ANIMAZIONE POSSIBILI CON FLASH frame by frame alla maniera dei cartoni animati di Walt Disney l'operatore costruisce ogni singolo frame indipendenti l'uno dall'altro e li mette in sequenza. interpolazione di forma è la possibilità di disegnare un fotogramma iniziale e uno finale e lasciare a flash la possibilità di disegnare i frame intermedi. Questa interpolazione riguarda le mutazioni della forma disegnata in relazione al tempo interpolazione di movimento - la possibilità di disegnare un fotogramma iniziale e uno finale e lasciare a flash la possibilità di disegnare i frame intermedi. Questa interpolazione riguarda le mutazioni della posizione della forma disegnata in relazione al tempo A secondo del metodo che utilizzeremo le simbologie dell'animazione nella timeline saranno diverse: COLORE BIANCO Fotogrammi non chiave senza animazione, vuoto COLORE VERDE Animazione con interpolazione di movimento COLORE AZZURRO Animazione con interpolazione di forma COLORE GRIGIO Animazione frame by frame PALLINO VUOTO Fotogramma senza contenuto PALLINO PIENO Fotogramma chiave con contenuto RETTANGOLO fine di una sequenza di fotogrammi FRECCIA CONTINUA Animazione con interpolazione di forma o di movimento FRECCIA/LINEA TRATTEGGIATA Interpolazione non valida ANIMAZIONE FRAME BY FRAME Quando lo stage è vuoto la timeline avrà un solo fotogramma attivo, colorato di bianco e un cerchietto vuoto. Di fatto questo cerchietto vuoto individua un fotogramma chiave. Un fotogramma chiave è un fotogramma particolare che contiene delle informazioni specifiche. Appena io disegno una cosa qualunque nello stage il fotogramma bianco diventa grigio e il cerchietto da vuoto diventa pieno. Dovendo costruire una animazione frame by frame dobbiamo ora disegnare un secondo fotogramma che può essere chiave, chiave vuoto o non chiave. Proviamo ad aggiungere un fotogramma chiave andando con il mouse in corrispondenza del secondo frame e selezionando il bottone destro del mouse per attivare il menù contestuale. Inserire un fotogramma chiave significa in pratica duplicare il contenuto del fotogramma precedente su quello selezionato. Disegnando in sequenza i fotogrammi possiamo modificare il

8 disegno per ognuno di essi costruendo l'animazione passo passo e controllando con molta precisione tutto ciò che succede nell'animazione. Utilizzando il tasto INVIO possiamo vedere l'animazione direttamente nello stage. Se inseriamo invece di un fotogramma chiave un fotogramma normale non possiamo andare a modificare la forma, ma diciamo a Flash di mantenere invariata l'animazione per un 12/s. Se invece inseriamo un fotogramma chiave vuoto di fatto sospendiamo l'animazione ripulendo anche il contenuto dello stage per dare vita ad altre forme o comunque ripartire da una situazione iniziale. È evidente che, anche dopo avere creato l'animazione è possibile modificarla inserendo o cancellando fotogrammi, l'importante è che questi non siano fotogrammi chiave perchè questo modificherebbe in modo sostanziale la nostra animazione. Eliminare o aggiungere fotogrammi fotogrammi normali serve solo per abbreviare o allungare i tempi dell'animazione. Attenzione che normalmente l'eliminazione del fotogramma, così come l'aggiunta, avviene in modo verticale su tutta la timeline a meno chè noi non selezioniamo specificatamente, il frame desiderato. Per inserire fotogrammi utilizziamo il tasto rapido F5, per eliminare fotogrammi utilizziamo la combinazione SHIFT+F5. È possibile anche convertire la tipologia di un fotogramma da normale, a chiave, a vuoto usando il menù contestuale. Ricordate però che ogni fotogramma chiave aggiunto significa un peso maggiore del documento finale. ESERCIZIO 3 Provate a costruire una piccola animazione con una palla rossa che rimbalza sullo stage a cui segue un rettangolo verde che ruota attraverso lo stage usando la modalità frame by frame ESERCIZIO 4 Ora apri il documento di Illustrator chiamato esercizio 4.ai. Seleziona tutto il disegno in illustrator, seleziona il comando copia. Apri Flash e seleziona il comando Incolla Il disegno apparirà nello stage. Ora prova a costruire una piccola animazione frame by frame per fare muovere i cerchi a tempo di musica... Se vuoi vedere quello che ho fatto io guarda il file esercizio 4.swf