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

Effetto matrix - quarta parte

Riepilogo: abbiamo animato due file di numeri, abbiamo salvato il gif (matrix-terza fase.GIF), l'abbiamo riletto e salvato come matrix-terza fase.PSD

Apro matrix-terza fase.PSD in Photoshop. Anche questa volta ho 76 livelli, cioè tutti i fotogrammi dell'animazione.
Seleziono l'ultimo livello, quello in alto (dovrebbe già essere selezionato, ma sempre meliusabundarequam... no?)

 
20
   

Apro il primo file (matrix.PSD), quello che contiene il set dei numeri in fila.

Trascino il set dei numeri da un file all'altro, come ho già fatto in precedenza.
Faccio la stessa cosa per il set delle guide (le trascino al di sopra del set dei numeri)

Quello che faremo d'ora in poi sarà sempre la stessa cosa, fino alla fine. Quindi non vi tedierò più con tutti i passaggi. Il succo è di aggiungere un 3-4 set di caratteri alla volta, per non impazzire in animazione con troppi set/livelli da gestire. In questa fase ne mettiamo tre nuovi, da inserire all'interno dei 76 fotogrammi presenti. Successivamente dovremo aumentare il numero di fotogrammi, per dare il tempo ai nuovi arrivati di entrare in gioco e non sovrapporsi del tutto ai fotogrammi presenti. Ma tutto l'ambaradan si sviluppa sempre in questo modo:

aggiungo file di numeri.
Animo i nuovi entrati.
Salvo il GIF
Rileggo il GIF e lo salvo come PSD.
Entro in Photoshop ed aggiungo, e così via.

Spero sia chiaro. Ora vediamo come aggiungere tre file di numeri. La prima l'abbiamo già messa.

Senza far troppi conti, mi posiziono sul livello 12.

Sposto il set dei numeri (attenzione che tutti i livelli del set siano collegati fra di loro) in posizione centrale,
come nella figura qui sotto, e poi vi spiego il perchè.

Photoshop
   

 
21
   

Duplico il set dei numeri e lo sposto come nella figura qui sotto.
Qui ho dato un po' di trasparenza al livello 12 dell'animazione, così si vedono meglio i nuovi set aggiunti.

   

 
22
   

Duplico il set dei numeri e lo sposto come nella figura qui sotto.

 
 

 
23
   

Li ho messi abbastanza in linea sulla verticale poichè li voglio animare col tweening contemporaneamente. Li ho sistemati in questo modo per vederli bene. Ora collego fra di loro i tre set dei numeri e li porto in alto, in modo che solo il più basso (quell odi mezzo) si intraveda sul bordo superiore dell'immagine. Questo era il perchè.

 
 

 
24
   

Ora abbiamo i 76 livelli di animazione, tre set con le file dei numeri e la guida per l'animazione.

All'apertura del file vi succederà, come prima, di trovare il pannello animazione bello pieno di 76 fotogrammi. Vero?

Ripuliamo il pannello. Si era deciso di partire dal fotogramma 12. Seleziono tutti i fotogrammi, dal 13al 76 (clic sul 13mo, SHIFT inserito e clic sul 76mo, tenere la pressione ...)
e li butto via (... trascinare col mouse sul cestino presente nel pannello)

Altra ripulitura. Se ci fate caso su tutti i fotogrammi residui si vede la nuova fila di numeri, in alto, dove l'abbiamo sistemata in Photoshop. Quella posizione va bene solo a partire dal fotogramma 12. Per non farla vedere si fa cosi': seleziono tutti i fotogrammi e rendo invisibile il set dei numeri, e, visto che ci sono, anche le guide.

Ora l'animazione è ripulita, e va da 1 a 12 fotogrammi, con l'animazione iniziale.

Seleziono il fotogramma 12.

Rendo visibile:
la guida, i tre set dei numeri (ne vediamo solo uno, gli altri due sono fuori schermo, ma ci sono)
I livelli del set ed i tre set sono collegati (altrimenti fatelo ora).

Duplico il fotogramma (13)
Porto tutto il set in basso, questa a filo della prima riga bianca della guida (figura a destra)
(basta cliccare su un livello a caso, ma di quelli visibili, altrimenti si rende visibile quello sul quale avete cliccato)

Seleziono i due fotogrammi (clic con lo Shift pigiato) ed imposto il tweening a 11 fotogrammi

ImageReady
 
25
   

Ora ci sono 24 fotogrammi, i primi 12 + 1 più gli 11 di tweening.
Anche questa volta tutti questi fotogrammi hanno per fondo il fotogramma (livello) 12 e quindi con la prima fila di numeri sempre ferma.

Duplico il 24mo fotogramma, e fanno 25, (figura a sinistra)
trascino il Set quasi a filo della seconda riga bianca (figura a destra)

Seleziono i due fotogrammi (clic con lo Shift pigiato) ed imposto il tweening a 5 fotogrammi

 
 

26
   

Ora ci sono 30 fotogrammi. Non dovete contare come faccio io, lo faccio solo come riferimento.
Quelli che ci sono ve li mostra Imageready. E tutti con la prima fila sempre li' immobile.

Duplico il 31mo fotogramma, che fa 32 (figura a sinistra)
trascino il set fuori dalo schermo
(figura a destra)

Seleziono i due fotogrammi (clic con lo Shift pigiato) ed imposto il tweening a 15 fotogrammi

 
 
27
   

Ora ci sono 46 fotogrammi

Duplico il 46mo fotogramma, che fa 47 (figura a sinistra)
trascino il set fuori dalo schermo
(figura a destra)

Seleziono i due fotogrammi (clic con lo Shift pigiato) ed imposto il tweening a 18 fotogrammi

 
 
28
   

Ora ci sono 65 fotogrammi (fate voi la verifica, che mi sono perso)


Piccolo riepilogo dei fotogrammi chiave dei tweening:

 
 

29
   

Il fotogramma 31 è il primo del tweening col movimento lento, quello nel quale dovrebbero cambiare i numeri.

Mi riporto sul fotogramma 31 e comincio a far cambiare i numeri.

Fotogramma 31: visibile la prima fila di numeri del primo set, la seconda del secondo, la terza del terzo.
Fotogramma 32: visibile la seconda fila di numeri del primo set, la terza del secondo, la quarta del terzo
Fotogramma 33: visibile la terza fila di numeri del primo set, la quarta del terzo, la prima del quarto
Fotogramma 34: visibile la quarta fila fila di numeri del primo set, la prima del terzo, la seconda del quarto
(in questo modo i numeri saranno diversi da fila a file nello stesso fotogramma, ok?)

E così via, fino al fotogramma
46.

Il risultato a questo punto è questo.

 

   

 
20
   

Naturalmente la prima fila di numeri si muove solo fino al fotogramma 12.
Ora rimettiamo le cose a posto: dobbiamo rendere visibili i livelli dell'animazione precedente, fotogramma per fotogramma:

Seleziono il fotogramma 12 e rendo visibile il livello 12
Seleziono il fotogramma 13 e rendo visibile il livello 13
Seleziono il fotogramma 14 e rendo visibile il livello 14
e cosi' via, fino al fotogramma 65

Duplico il fotogramma 65 (66) e rendo visibile il livello 66
Duplico il fotogramma 66 (67) e rendo visibile il livello 67
e cosi' via, fino al fotogramma 76

Quello che ottengo è qui sotto.

 

 
21
   

Ora il veletto. Se vi va, potete marcherare in alto ed in basso in modo da dare il senso di profondità al tutto.
Si tratta di fare, uno per livello, due rettangoli, uno in alto ed uno in basso, riempiendoli di nero.
Poi li si sfoca di un 10%, come nella figura.

 
 

 
22
   

All'ultimo passaggio basterà trascinare in alto i veletti e renderli visibili per tutti i fotogrammi.
Ho detto ultimo passaggio poichè non so quanti ne dovrete fare, dipende da quante file volete far scendere.
La tecnica è sempre questa: Salvare il GIF, con un nome in progressione,rileggerlo, Salvare come PSD.
Andare su PhotoShop, inserire nuovi set di numeri e tornare qui ad animarli, e cosi' via ...

Qui ora salvo (matrix-quarta fase.GIF) ottimizzando al massimo (256 colori, dithering 100%).
Rileggo il gif appena salvato e lo salvo col nome (che vuol dire come PSD) matrix-quarta fase.PSD.

Non credo di dover aggiungere altro.
Ops, volete vedere cosa ho fatto io, vero? In cima alla pagina.
Non è granchè, diciamo più affetto per matrix che effetto matrix, ma è che mi sono stufato a metà e poi m'è venuta in testa un'altra idea, che fra poco metto giu' nero su bianco, no, bianco su nero, visto il fondino.

C'è il link (collegamento) nascosto dietro al bottoncino dorato ad un filmato flash, grande, che potete vedere e, se vi va, scaricare.


E dato che non ho mica la scienza infusa ora vi passo un paio link a dei siti che trattano la stessa materia, nel senso dello stesso effetto matrix. In questi tutorial si parte da altre premesse, il testo non è definito parte dell'animazione, ma solo come sfondo da far scorrere in verticale. Si fa molto prima che nelle guide di queste pagine e probabilmente anche il risultato è migliore.
Hanno il problema dello "stacco", nel senso che il loop non è concluso, ma è roba che si nota solo se andate a cercare il pelo nel matrix, roba da pignoli, no?
(e se non sapete come fare, qui c'è il tutorial)
(Ah, il secondo link qui sotto è uno di quelli: vietato copiare. Qui è consigliato farlo, neh?)

http://www.olimpografica.altervista.org

http://www.gamestorm.it/forum/messaggi.html

Questo invece è realizzato in flash. Io di flash capisco una cippa, ma mi sembra ok.

http://flash.html.it/movie/demo/616/matrix-code/

Altro non so che dire, che di matrix ne ho strapiene tutte e due le matrix.

 

 

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