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

Effetto matrix 2

E questo mi è venuto in mente quando stavo sclerando con la prima versione dell'effetto matrix.

Se a prima vista può spaventare, poi diventa terribile.
Mai provare a fare un effetto matrix se poi lo si lascia a metà. Uno si ritrova cordoncini di numeri per tutta la casa.

Ho pensato di allungare la fila di numeri, tanto da riempire lo schermo. Poi mi sono detto: se li voglio far correre, se metto tre file, una sull'altra, faccio prima. Avete presente l'onda?
Con 3 file riesco a fare un loop, in quanto posso arrivare a far coincidere il primo fotogramma con l'ultimo.
E non solo, se qualche fila la faccio solo da due file sovrapposte, ma la corsa la faccio con gli stessi fotogrammi per entrambe le file, una andrà più veloce dell'altra, specie se partono da punti differenti
e devono trovare l'aggancio fra l'ultimo ed il primo fotogramma.

 
1
 
Forse faccio prima con le immagini.

Qui c'è un'immaginona. 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à.

Ci sono 4 file di numeri.

La prima è un set composto da tre file sovrapposte. Ogni fila ha 4 modifiche di numeri, delle quali qui se ne vede solo una, altrimenti si impastano.

La seconda è un set con tre file, ma l'ultima, quella in alto, è più corta delle altre due, che sono identiche al primo set, ma leggermente sfasate rispetto ad esso.

La terza è un set con solo due file, lunghe, un pochetto sfasate rispetto agli altri set.

La quarta è un set di un'unica fila.

Se però partono così non va molto bene.
Occorre modificare la polposiscion.
 
2
 

Fondamentale è badare a quello che si vedrà realmente, senza far caso alla parte in essesso sopra e sotto.

Alla partenza i set sono disposti come nella figura, la parte sinistra.
Ho indicato con dei numeri da 1 a 4 i 4 set, tanto per capire che corsa debbono fare.

Le 4 file a destra rappresentano il punto di arrivo. Vediamole:

Il set 1 (che chiameremo LentoLento) deve arrivare ad un punto simile partenza, leggermente più in alto, per evitare un rallentamento dlel'immagine (lo si può mettere esattamente uguale, poi bisogna buttare l'ultimo fotogramma, questione di loop.
Dal punto di vista della corsa questo set mostrerà praticamente una sola fila, ok?

Il set 2 (che chiameremo Veloce) parte a filo schermo (sarà poi velato dal solito veletto nero sfumato, quindi è come partisse senza essere visto). Per trovare la coincidenza deve finire fuori schermo, in basso.
Quindi la sua velocità sarà quasi doppia rispetto al primo, dovendo far passare due file nel tempo di una dell'altro, ok?

Il set 3 (che chiameremo Lento) si comporta come il set 1, solo che è un poco più corto (è quello con la terza fila più corta) e quindi ci metterà un po' di meno.

Il set 4 è di una sola fila, quindi velocissimo, dato che appare al primo fotogramma e sparisce all'ultimo.

Qui sotto si vede come lavorano.

 
3
 
Con questa logica possiamo fare tutta la schermata utilizzando un solo tweening.

Io ho usato 38 fotogrammi, per un totale di 40

Qui nell'esempio non ho modificato i numeri, per far prima.
In realtà andrà fatto, fotogramma per fotogramma, ma in fondo sono solo 40 ed uno ogni quattro lo si può lasciar stare com'è. Fidatevi.


Ora, se coprite con le mani le parti sopra e sotto al profilo bianco vedrete che è come se il movimento fosse continuo, appunto come si è già visto per l'onda.
Non sapete dell'onda?
Beh, dovreste farci un salto: si trova IN QUESTA PAGINA.

Ma solo se sapete nuotare, veh!
 
4
 
Sono partito con 9 set di file di numeri
Li elenco (fra parentesi i numeri di riferimento con la seconda immagine), ma non è importante, serve solo per movimentare l'animazione:

1 - LentoLento (1)
2 - Veloce (2)
3 - Lento (3)
4 - LentoLento (1)
5 - LentoLento (1)
6 - Lento (3)
7 - Unico (4)
8 - Lento (3)
9 - LentoLento (1)

Sotto, sbiadito, c'è lo schema completo per le posizioni dei set presenti e futuri.

Tenete presente, per l'animazione, che:

LentoLento (1) e Lento (3) non escono mai completamente dallo schermo, ma vanno messi a registro (n pochetto più in alto) nei due fotogrammi del tweening.

Unico e Veloce scompaiono dallo schermo.
Più partono fuori in alto e più veloce sarà la corsa, sempre per il motivo che devono fare più strada nello stesso tempo.

Il tweening io lo farei al massimo di 38 fotogrammi (per un totale di 40)

Unico e Veloce forse non richiedono il cambio di numeri lungo la corsa, probabilmente non si nota.

Mi pare di aver detto tutto.

Non faccio la guida per l'animazione, è tutto molto simile a quello visto nelle pagine precedenti.
Dò solo , qui sotto, alcune indicazioni, tanto per non sembrare un fagnano.
 
5
   

Su Image Ready animate usando il tweening, i primi i 9 set.
Salvate il GIF (ottimizzate al massimo) rileggetelo e salvatelo come PSD con un nome progressivo.

Tornate su Photoshop, aggiungete un po' di set, metteteli in posizione (lo schema che si intravede sopra serve a quello).
Salvate con lo stesso nome e tornate su Image Ready per l'animazione dei nuovi set inseriti.

Per fare il tweening conviene partire cancellando tutta l'animazione precedente, duplicare il primo fotogramma, muovere, sul secondo fotogramma (quello duplicato dal primo) verso il basso, secondo le indicazioni che ho scritto qui sopra, i set inseriti, eseguire il tweening.

Poi, fotogramma per fotogramma, rendere visibili, ad ogni fotogramma, il livello corrispondente dell'animazione precedente (il che significa: fotogramma 1, livello 1, e cosi' via).
E sostituire i numeri per ogni fila, almeno di quelle lente.

Io me la sono cavata con tre passaggi, ma più ne fate meno vi verrà voglia di suicidarvi, magari appesi ad una fila di numeri di matrix.

In alto potete vedere quello che ho combinato.


Però non mi sono dimenticato del solito aiutino.
Qui sotto c'è il link (bottoncino dorato) ad un PSD con i 4 tipi di set di numeri.
I numeri sono rasterizzati, per far prima. Spero vi serva.
Dice che si chiama matrix-V2-base, ha anche i veletti e lo schemino (ed è zippato)
Sempre col bottoncino dorato andate sulla pagina che contiene anche un filmato flash, grande, che potete vedere e, se vi va, scaricare.
Questo dice di chiamarsi matrix-V2-800x655 (e non è zippato, che non serve, ma è grandissimo)

ImageReady
   

 

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