3 Lavorare con i livelli

Transcript

1 INTRODUZIONE 3 Lavorare con i livelli I livelli costituiscono un elemento essenziale nella programmazione di un filmato FLASH. Mentre i fotogrammi individuano la sequenzialità, i livelli definiscono la contemporaneità. In corrispondenza di ogni fotogramma possono essere presenti molti livelli che, come fogli trasparenti, si sovrappongono uno sull altro mostrando tutto ciò che non è reso opaco dalla presenza di immagini sul livello. Ogni livello è in grado di ospitare molti elementi grafici ma una singola animazione quindi quando si devono realizzare animazioni complesse è necessario disporre gli elementi che devono muoversi contemporaneamente su livelli distinti. Inserimento/cancellazione di un livello Un nuovo documento nasce sempre con un unico livello. Per aggiungere un livello si possono seguire due strade: Inserisci -> Linea temporale -> Livello: Il nuovo livello viene inserito al di sopra del livello correntemente selezionato. Selezione di un livello -> Click con il bottone destro -> Inserisci livello: Il nuovo livello viene inserito al di sopra del livello correntemente selezionato. Un nuovo livello viene creato con un numero di fotogrammi vuoti pari al livello temporalmente più lungo. Per cancellare un livello selezionare il livello da cancellare -> Click con il bottone destro -> Elimina livello: La rimozione del livello determina anche la rimozione di tutti gli oggetti presenti nello stage in relazione a quel livello. Le informazioni presentate e modificabili per ogni livello sono: Nome del livello: è consigliabile assegnare un identificatore significativo Abilitazione alla modifica: solo il livello selezionato è modificabile (simbolo matita) a meno che non sia bloccato o invisibile (simbolo matita sbarrata) Visibilità: consente di rimuovere il livello in fase di progettazione per avere una migliore visibilità dei livelli sottostanti Bloccaggio: consente di bloccare un livello in modo da non modificare inavvertitamente un livello. Colore contorno: identifica attraverso un diverso colore di contorno gli oggetti appartenenti ai diversi livelli. Ordine dei livelli e modifica dell ordine I livelli sono organizzati come una catasta. Un livello superiore copre, con le sue parti opache i livelli sottostanti mentre lascia vedere ciò che sta sotto le sue parti trasparenti. Un livello di per se è sempre trasparente, diventa opaco in corrispondenza degli oggetti che contiene. Non si deve confondere il livello con il colore di sfondo che è una proprietà del documento; questo colore non appartiene ad alcun livello e sarà visibile ed opaco (nasconde gli oggetti html ITIS O.Belluzzi Laboratorio di Sistemi 1-6

2 sottostanti) solo se si sceglie di pubblicare in wmode finestra od opaco mentre non ha alcun effetto se si pubblica in modo trasparente. L azione sul bottone di Visibilità di un livello agisce solo in fase di progettazione e non ha alcun effetto sulla presentazione. Per cambiare l ordine dei livelli selezionare il livello che si vuole spostare e trascinare nella posizione finale. L ordine dei livelli ha inoltre un significato gerarchico nel caso di livelli maschera e livelli guida. Proprietà di livello Le proprietà di livello si modificano facendo click con il bottone destro sul nome del livello e selezionando la voce Proprietà. Oltre alle modifiche effettuabili anche direttamente sul livello (Nome, Mostra, Blocca, Colore bordi) è possibile definire il tipo di livello. In questo modulo verranno trattati tre tipi di livello: Normale: è un livello che contiene oggetti grafici ed interpolazioni Guida: è un livello che non viene visualizzato in presentazione ma può contenere oggetti grafici consentendo un agevole allineamento degli oggetti visibili. Guida Movimento: è un livello a cui possono essere agganciati livelli normali contenenti interpolazioni. Se nel livello Guida movimento si inserisce un tracciato (realizzato con lo strumento matita, pennello, penna, linea, cerchio, rettangolo ) le interpolazioni dei livelli agganciati seguono la direzione indicata dal tracciato. Maschera: è un livello a cui possono essere agganciati livelli normali contenenti interpolazioni. Se nel livello Maschera si inserisce una forma di colore solido l area colorata del livello agisce da maschera per i livelli ad esso agganciati. L area del colore solido sarà trasparente nel filmato mostrando i livelli sottostanti mentre l area non colorata sarà invisibile nel filmato. In questo modo si possono ottenere filmati non rettangolari. Per vedere l effetto di una maschera si devono bloccare tutti i livelli. Per lavorare senza maschera si deve nascondere la maschera Esempio di filmato con due livelli di cui uno animato con interpolazione movimento Questo esempio propone la composizione di un filmato formato da due livelli di cui uno con interpolazione movimento. L obiettivo è la realizzazione di una animazione di una aero che vola orizzontalmente sullo sfondo di un cielo con nuvole. Sono già disponibili tra le risorse del corso i files: clouds.gif (288 x 288 pixel) airplane.gif (303 x194 pixel con sfondo trasparente) Nella seconda la quadrettatura mostrata da GIMP indica che lo sfondo è trasparente. Nella finestra delle proprietà di documento impostiamo i seguenti valori: Dimensioni dello stage: 288 x 288 px Velocità di riproduzione: 12 f/s (default) Colore di sfondo: non importa perché verrà completamente coperto. Rinominiamo l unico livello presente con il nome sfondo : Click sul livello 1, fare click con il bottone destro e selezionare la voce proprietà Importiamo nello stage l immagine di sfondo clouds.gif : File -> Importa -> Importa nello stage. Selezionando il file clouds.gif l immagine si posizione sullo stage andando ad occupare solo il primo fotogramma dell unico livello. Inseriamo un nuovo fotogramma in ITIS O.Belluzzi Laboratorio di Sistemi 2-6

3 corrispondenza della posizione 60 della linea del tempo (animazione di 5 secondi). L immagine statica clouds si estende su tutti i fotogrammi. Aggiungiamo ora un nuovo livello: Inserisci -> Linea temporale -> Livello. Un nuovo livello vuoto si posiziona sopra il livello già esistente. La linea temporale di questo nuovo livello si estende fino a 60 ma è completamente vuota. Dopo avere rinominato il nuovo livello aereo ed avere posizionato l indicatore di riproduzione sul primo fotogramma del nuovo livello importiamo nello stage il file airplane.gif ; l immagine si sovrappone alle nuvole e si estende per tutti i fotogrammi esistenti: poiché l immagine ha un colore di trasparenza nelle zone di trasparenza si vede il livello sottostante. Trascinare l immagine dell aereo verso sinistra fino a farla uscire dallo stage; l effetto dello spostamento si replica su tutti i fotogrammi. Applicare al secondo livello con il bottone destro la proprietà interpolazione movimento, una linea tratteggiata indica che l interpolazione movimento è stata impostata ma manca il fotogramma chiave finale. Spostare l indicatore di riproduzione sull ultimo fotogramma del livello superiore e trasformarlo in un fotogramma chiave (bottone destro, converti in fotogramma chiave). Nel fotogramma compare un cerchietto nero e la linea diventa continua. rascinare l immagine dell aereo verso destra fino a farla uscire dallo stage; l effetto di spostamento agisce solo sul fotogramma chiave mentre gli altri rimangono inalterati. In alternativa, facendo click su una qualsiasi posizione intermedia del secondo livello sulla linea temporale, si può scegliere dalla casella a discesa interpolazione (tween) delle proprietà la voce Movimento (Motion). Questa selezione fa si che tutti i fotogrammi compresi tra i due fotogrammi chiave che racchiudono la parte selezionata diventino fotogrammi di tipo tweening cioè intermedi tra i due fotogrammi chiave. La posizione dell oggetto che si trova nel fotogramma chiave iniziale ITIS O.Belluzzi Laboratorio di Sistemi 3-6

4 viene interpolata con la posizione dello stesso oggetto che si trova nel fotogramma chiave finale. Ogni livello può contenere un solo oggetto interpolato. La fluidità del movimento dipende dal numero dei fotogrammi presenti. Più è grande il numero di fotogrammi presenti più è graduale la transizione. Si riconosce la presenza di una interpolazione dal colore dei fotogrammi (azzurro per le interpolazioni di movimento) e per la presenza di una freccia che collega i due fotogrammi chiave. L immagine raster esiste realmente solo nei fotogramma chiave (quelli con il pallino nero), dove conserva la posizione che gli è stata assegnata mentre nei fotogrammi intermedi viene presentata una interpolazione tra i due estremi. Mentre nei fotogrammi chiave l immagine è selezionabile (bordo azzurro) e modificabile nei fotogrammi intermedi non si può fare alcuna operazione. Esempio di filmato con due livelli di cui uno animato con interpolazione movimento Questo esempio propone la composizione di un filmato formato da più livelli con interpolazione movimento. L esercizio si propone, attraverso l uso dei livelli di introdurre due effetti: Evidenziare l effetto di movimento facendo muovere le nuvole di sfondo in direzione opposta all aereo. Creare un maggior effetto di profondità di campo ponendo un livello di nuvole ferme davanti all aereo. Per l aereo e le nuvole di sfondo si usano le immagini GIF già usate nell esempio precedente (l aero ha un colore di trasparenza) mentre per le nuvole di primo piano è stata generata una nuova GIF di nome tclouds.gif per due motivi: Essendo in primo piano il colore azzurro del cielo deve essere codificato come colore di trasparenza altrimenti coprirebbe l aereo L immagine è stata ribaltata altrimenti le nuvole si sarebbero sovrapposte alle nuvole dello sfondo (questa operazione si poteva fare anche in ambiente FLASH) Si crea un nuovo documento e si inseriscono tre livelli nell ordine: sfondo aero e nuvole) e si prolunga la linea temporale per circa 50 fotogrammi (circa 4 12f/s) in tutti i livelli. Nello stage del livello sfondo si inserisce l immagine delle nuvole di sfondo (clouds.gif) posizionandola al centro dello stage. Si apre la libreria che a questo punto contiene l originale dell immagine di sfondo (clouds.gif) e la si copia una seconda volta accostandola alla destra della prima. Per come è costruita l immagine di sfondo le porzioni di nuvola del bordo destro si congiungono con quelle del bordo sinistro. A questo punto abbiamo due immagini nello stage sullo stesso livello ma quando vengono elaborate nell interpolazione sono trattate come un unico oggetto. Si costruisce una interpolazione movimento che fa muovere le nuvole da destra verso sinistra (direzione opposta all aereo). La dimensione doppia dell immagine serve a fare sì che alla fine del movimento lo sfondo sia ancora occupato dalle nuvole. Per creare l interpolazione movimento ci si posiziona in un qualsiasi fotogramma intermedio e si attiva l interpolazione movimento (la linea temporale del livello diventa azzurra con una linea tratteggiata. Ci si posiziona sull ultimo fotogramma e lo si converte in fotogramma chiave (il primo lo è già dal momento del caricamento della prima immagine). La linea tratteggiata diventa continua e in debug si vede l interpolazione (tasti virgola per andare indietro e punto per andare avanti) Lo sfondo nuvoloso scorre da destra a sinistra ma alla fine dello scorrimento l immagine è uguale alla immagine iniziale. Sul livello aereo si importa l immagine airplane.gif e si realizza su questo livello una interpolazione identica all esempio demo2. ITIS O.Belluzzi Laboratorio di Sistemi 4-6

5 Sul livello nuvole si importa la nuova immagine tclouds.gif senza alcuna animazione. Questa immagine, che ha l azzurro come colore di trasparenza si posiziona sopra il livello aereo mascherandolo in corrispondenza delle nuvole. In fase di pubblicazione non ha importanza la scelta relativa al wmode perché l immagine è completamente opaca a causa della presenza di clouds.gif sul livello di sfondo. Esempio di filmato con guida movimento Questo esempio deriva strettamente dal precedente di cui usano i livelli e le interpolazioni ma aggiunge un livello di guida movimento. In questo modo il movimento dell aereo viene controllato dal livello guida senza dovere spezzare l interpolazione del livello aereo in tante parti per ottenere un movimento complesso. Partendo dal sorgente dell esercizio precedente si inserisce un livello guida movimento sopra al livello aereo. Si seleziona il livello aereo, si fa click con il bottone destro e si selezione la voce aggiungi guida movimento. Il livello guidato rientra rispetto al livello guida che è evidenziato dal simbolo guida movimento. Si seleziona il livello Guida movimento e si disegna nello stage un tracciato con un qualsiasi strumento vettoriale del pannello degli strumenti. Si può usare matita, pennello, penna, linea, rettangolo, ellisse. Attenzione, la guida movimento deve coinvolgere solo il livello aereo (indentato cioè spostato verso destra) e non le nuvole di sfondo ITIS O.Belluzzi Laboratorio di Sistemi 5-6

6 Esempio di filmato con livello maschera Questo esempio deriva strettamente dall esercizio base a più livelli di cui usano i livelli e le interpolazioni ma aggiunge un livello di maschera di forma circolare. In questo modo l intero filmato viene confinato in una maschera circolare e ciò che sta all esterno non viene presentato. Se il filmato viene inserito nella pagina web in modo trasparente (wmode=trasparent) nelle zone esterne alla maschera si vede lo sfondo della pagina. Si inserisce un nuovo livello al di sopra dei livelli da mascherare e gli si attribuisce la proprietà maschera. A tutti i livelli sottostanti si attribuisce la proprietà mascherato (il nome livello si sposta a destra indicando la dipendenza gerarchica dalla maschera). Nella maschera si disegna una forma dai colori solidi (qualunque colore). Tutte le parti che rimangono sotto la maschera saranno visibili nel filmato mentre le parti che rimangono fuori della maschera (nella parte trasparente del livello maschera) saranno invisibili nel filmato. Se ad esempio nella maschera disegniamo una forma cerchio di colore nero nella presentazione il filmato apparirà circolare. Per potere lavorare liberamente sui livelli senza l intralcio della maschera questa viene normalmente mantenuta invisibile; per vedere l effetto di mascheramento si deve rendere visibile la maschera e bloccare tutti i livelli. Il mascheramento funziona solo con l interpolazione movimento e non con l interpolazione forma inoltre non è possibile combinare la gerarchia maschera con la gerarchia guida movimento ma vedremo nella prossima unità che entrambi questi problemi possono essere risolti con l uso degli oggetti (movie clip). ITIS O.Belluzzi Laboratorio di Sistemi 6-6