nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
effetto matrix 3
___________________
 
 

Effetto matrix 3

E poi ho pensato di usare le maschere. Che non sono nè quelle di carnevale nè quelle di photoshop. Sono semplicemente le "mascherature": la tecnica di coprire (mascherare) qualcosa per scoprirla quando se ne ha necessità. Le maschere le usano (o usavano) gli appassionati di modellismo per colorare, anzi, per non colorare parti del modellino, le usano i carrozzieri, le usano per fare le strisce pedonali, le usano, e sono di carta adesiva, gli imbianchini per fare i bordi dritti dritti, le usano ... ecco, le usiamo anche noi.

Per prima cosa ho prelevato un set di numeri dalle versioni precedenti, un set lungo (se non sapete di cosa parlo andateci da qui).

Ho aggiunto tanti livelli quanti ne occorrono per arrivare a 10 livelli (file, in italiano, non fail) di numeri, con i numeri che scalano da 0 a 9.

 
1
 
Questo è lo schema (livelli) del set di numeri, con i livelli spostati in orizzontale per vedere come sono fatti.

I primi dieci livelli sono i numeri, che scalano di un numero alla volta, da 0 a 9

Poi c'è il livello con la sfocatura.

Poi c'è il livello con l'alone di bianco

L'ultima fila è il set con tutti gli elementi a registro (qui si vede solo la fila che comincia col numero 9)
Photoshop
2
 

Ho sistemato il primo Set sulla sinistra, lasciando un pò di luce sul bordo immagine.Ho duplicato il set e l'ho spostato a destra in modo da lasciare un po' di nero (fondo) fra il primo ed il secondo set.

Ho duplicato di nuovo il set, spostandolo a destra, e così via fino a coprire quasi l'intero schermo.

Qui di lato c'è il risultato finale (per ogni set ho reso visibile solo una fila di numeri alla volta e scalando di un numero alla volta) con 21 set di numeri.

Con tutta sta roba sono andato su ImageReady per l'animazione di base.

   
3
 
Per ottenerla ho reso visibile sul primo frame solo un livello di numeri e la sfocatura verde.
Il livello visibile nel primo frame l'ho scalato, da un set all'altro: Nel primo set la prima fila, nel secondo la seconda, e così via.

Poi ho duplicato il fotogramma e sono ripartito: nel primo set la seconda fila, nel secondo la terza, etc.

E così per 10 fotogrammi, quante sono le file di numeri nei set.
E m'è venuto fuori anche un bell'effetto Moirè.

Ho salvato ottimizzando al massimo (256 colori, dithering 100%) col nome
Matrix-V3-base.GIF

Ho riletto il GIF e l'ho salvato come PSD, stesso nome: Matrix-V3-base.PSD
   
4
 
Quello che faremo ora io l'ho fatto in partenza, ma per non confondervi le idee lo vediamo da parte.
Dobbiamo mettere la maschera (c'è chi la chiama tendina, ma è la stessa roba).
E vi spiego il perchè ed il percome.

Il perchè: se, anzichè far correre su e giù i numeri ci limitiamo a farli apparire gradualmente, dall'alto in basso, e sparire, sempre dall'alto in basso, otterremo un effetto di movimento che in realtà non c'è e magari ce la caviamo con minor fatica.

Il percome: Se facciamo scorrere una tacca nera, alta quanto la fila di numeri e larga quanto basta a coprire la fila e la sfocatura verde (per questo abbiamo lasciato un po' di spazio fra una fila e l'altra) partendo da fuori schermo in alto, verso il basso, vedremo i numeri correre e sparire verso il basso.
Se facciamo scorrere un'altra tacca nera, fatta come la precedente, partendo dal centro, a coprire completamente i numeri ed andando in basso, vedremo i numeri apparire e correre a pieno schermo.

Se uniamo fra di loro le due tacche e moduliamo i loro movimenti, avremo i numeri che arrivano dall'alto, si fermano quanto vogliamo noi, e poi se ne vanno via verso il basso.
   
5
 

La prima fila a sinistra:
la maschera copre tutta la fila, poi scende fuori schermo, scoprendo i numeri, e dà l'impressione che siano i numeri a scendere dall'alto.

La seconda fila:
La maschera è fuori schermo in alto, poi scende a coprire tutta la fila, e l'impressione è che la fila dei numeri se ne stia andando fuori schermo.

La terza fila:
Somma delle due precedenti, ovvero comparsa e scomparsa dei numeri.
Una maschera è presente a coprire la fila, poi scende ed appaiono i numeri.
Poi è la seconda maschera a scendere, ed i numeri sembrano scorrere fuori schermo.

Il tutto diventerà più realistico se insieme alle maschere facciamo scendere anche gli aloni bianchi, quelli tipo matrix, appunto.

   
6
 

Ora vediamo come costruire le maschere.

Intanto ho letto Matrix-V3-base.PSD

Anche qui ho allungato il quadro solo per vedere cosa c'è sotto, ma il frame, nel senso di riquadro visibile, è rappresentato dal riquadro bianco in mezzo. Tutto il resto non si vedrà.
Ho messo un fondo grigio ed ho sfocato il primo livello (primo fotogramma) dell'animazione base che abbiamo fatto all'inizio.

Creo un set (Set maschere) e ci metto:
Maschera fissa in basso: (fisso accorcia sotto) è quella nella parte bassa, costituita da una tacca nera, sfocata di un 2%. Al di sopra della maschera ho messo un livello con l'alone bianco. Qui ne mostro 3, a differenti altezze.

Maschera fissa in alto: (fisso accorcia sopra) che serve ad accorciare la fila di numeri, tanto per dare un po' di difformità al tutto. E' un livello con copia della tacca nera posta nella parte alta (qui è presente solo sulla fila di maschere più a destra, la quintultima dei numeri).

Maschera mobile: (sopra) che serve a coprire i numeri ed anche a scoprirli. Sopra e sotto (nel senso di posizione
sulla verticale) ci sono due livelli con l'alone bianco: correranno insieme alla maschera. Quello in alto mi serve solo per il registro del fine corsa.
Qui ne vedete due, a differenti altezze, la prima a sinistra
a filo riquadro, la seconda al centro, più in alto.
Nel set collego fra di loro la maschera mobile (sopra) ed
i livelli di bianco: cammineranno insieme.

Duplico il Set e la maschera mobile la posiziono, in partenza, ad altezza diversa: questo darà alla corsa velocità diverse, ma tutto questo l'abbiamo già visto in precedenza, no?

Allora, comincio con 6 set di maschere/aloni.
Li posiziono qua e là, al di sopra delle file dei numeri. Andarci a registro non è difficile, basta partire con la maschera che copre la fila e controllare che l'alone bianco sia in mezzo ai numeri.

In animazione farò scorrere solo Maschera mobile ed relativi aloni bianchi, in quanto io parto con tutte le file dei numeri presenti sullo schermo (sono i 10 fotogrammi realizzati prima)

Il fine corsa dovrà far coincidere l'alone bianco posto in alto sulla maschera con l'alone bianco fisso.

Dopo il tweening dovrò solo rendere non visibile uno dei due aloni.

Per ora salvo il PSD, con lo stesso nome:
Matrix-V3-base.PSD

   
7
 

Quando vado su ImageReady ed apro
Matrix-V3-base.PSD il pannello dell'animazione è pronto con 10 fotogrammi.

Cancello tutto tranne il primo (che tanto non ci si riesce).

Duplico il primo fotogramma.
Sul secondo sposto le parti mobili (maschera ed aloni sopra e sotto) a registro con le maschere ed aloni fissi (quelli in basso)
Lo faccio per tutti i set di maschera di cui dispongo.
Ne dovrei avere 6 di set, ma qui ve ne mostro solo tre, che tanto è la stessa solfa per tutti.

Poi imposto un tweening di 20 fotogrammi (qui ne ho fatti di meno) e lo eseguo.

Poi, a partire dal primo fotogramma, rendo visibili i fotogrammi (livelli) dell'animazione precedente:

Fotogramma 1, livello 1
Fotogramma 2, livello 2
....
Fotogramma 11, livello 1
Fotogramma 12, livello 2

E via cantando (o contando)

Fatto ciò, inserisco PRIMA del primo fotogramma altri 10 fotogrammi nei quali non capita nulla, se non il cambio di animazione iniziale.
Mi serviranno se vorrò animare qualcos'altro prima di quanto ho animato ora.
Così anche in fondo, ne metto un'altra decina.

Alla fine deciderò quanti lasciarne prima e dopo.

Notate che la differente posizione di partenza genera movimenti di differente velocità.

Salvo ottimizzando al max con un nome progressivo. Nel mio caso come Matrix-V3-01.GIF

Salvo anche il PSD con lo stesso nome:
Matrix-V3-01.PSD

ImageReady
8
 
Il resto lo sapete:

Leggo l'ultimo passaggio di animazione salvato, trascino un po' di set di maschere e le posiziono su altre file di numeri non ancora animate. Magari sposto anche le altezze delle maschere mobili, torno su ImageReady ed imposto il tweening con diversi fotogrammi, ora 15, ora 20, ora 25, tanto per dare un po' di movimento al tutto.

Fatto il tweening, rendo visibili tutti i fotogrammi dell'animazione precedente, in sequenza, ma con qualche accortezza:

Se decido che l'animazione attuale debba partire, per esempio, al 15° fotogramma della precedente, dovrò inserire PRIMA del tweening, i 14 fotogrammi precedenti, poi dal 15° a fine tweening attuale, i rispettivi 15° - 16° - nn° fotogramma dell'animazione precedente.

Se il tweening supera i fotogrammi preesistenti mi faranno comodo i fotogrammi che ho lasciato in coda, che hanno solo l'animazione iniziale. Basterà utilizzarli in sequenza e ciclicamente al di sotto del tweening attuale.

Sembra complicato, ma se seguite il consiglio di lasciare sempre una decina di fotogrammi con la sola animazione base prima e dopo ogni passaggio di tweening, vi verrà facile-facile.

Qui di lato il primo passaggio di tweening.
   
9
 
E qui di lato (anche in cima alla pagina) il risultato finale, o almeno quello di quando mi sono stufato, tant'è che una fila non l'ho mossa proprio. Chissà se la scoprite?
Ah, il veletto nero sfumato sopra e sotto. Mettetecelo, che fa fine.





Però non mi sono dimenticato del solito aiutino.
Dietro al bottoncino dorato c'è un PSD con un set di numeri. I numeri sono rasterizzati, per far prima.
Nel set di numeri c'è anche l'alone bianco, ma non vi serve per l'animazione.
C'è anche un Set di maschere. Sono in posizione di partenza. Le maschere mobili le vedete se le fate scendere (SHIFT inserito, altrimenti vanno in giro sullo schermo).
C'è pure un filmato flash, grande, che potete vedere e, se vi va, scaricare.
   

fine della guida

 
altre guide
matrix
 


Non ho Copyright © poichè non so l'inglese. Il sito è fatto da nebbiaenuvole.com Tutti i diritti sono diritti, che se fossero storti ....
Marchi registrati e segni distintivi sono di proprietà dei rispettivi titolari.
 
Creative Commons License