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

Effetto matrix - seconda parte

E non sarà l'ultima, v'avverto.

Riepilogo: abbiamo animato una prima fila di numeri, abbiamo salvato il gif (matrix-prima fase.GIF), l'abbiamo riletto e salvato come matrix-prima fase.PSD

Apro quest'ultimo in Photoshop. Mi ritrovo con 49 livelli, cioè tutti i fotogrammi dell'animazione sparati uno per livello, il primo in basso e l'ultimo in alto.
Seleziono l'ultimo livello (dovrebbe già essere selezionato, ma meliusabundarequam... no?)

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

Ora vi spiego il trucco, altrimenti pare che stiamo facendo cose senza senso.

Per non dover seguire in ImageReady un numero incredibile di set di numeri, ciascuno con la sua corsa, con le sue modifiche di vedo un livello, vedo l'altro, e così via, la cosa più semplice da fare è animarne uno (o alcuni) alla volta, utilizzando (e quindi sovrapponendo al...) l'ultima animazione realizzata.

Qui io voglio far correre una seconda fila di numeri dal fotogramma nel quale la prima fila è quasi in mezzo allo schermo.
Fra i miei 49 livelli c'è anche quel fotogramma lì, diciamo il 30mo.
Quindi, quando ritorno su ImageReady terrò per buoni tutti i fotogrammi precedenti, e dal 30 in su potrò far apparire e scorrere verso il basso una nuova fila di numeri, per altri 49 fotogrammi che si aggiungeranno ai 30 dai quali sono partito.

Mi basterà, per i nuovi fotogrammi dal 30 al 49, far vedere, al di sotto della nuova fila di numeri che appare e scende, uno dopo l'altro (dal 30 al 49) i fotogrammi della prima animazione, lasciando poi il 49mo (che è quello dove la prima fila è finita fuori schermo) per tutti i fotogrammi che avrò aggiunto.

Un'altro motivo di questa scelta è che voglio usare il tweening per far prima.
E il tweening non funziona per oggetti diversi con temporizzazioni diverse fra di loro, a meno di non ammattire a far di calcolo, che tanto varrebbe muoverli ciascuno frame-by-frame.

Lo so, è incomprensibile, detto cosi'. Ma poi su ImageReady ve lo mostro per benino, ok?

Per ora fidatevi e vediamo di portare sul file matrix-prima fase.PSD il set dei numeri, altrimenti sarà difficile animarli.

Ricapitolo: mi occorre, sul file matrix-prima fase.PSD la presenza del set di numeri (e anche delle guide), per tornare su ImageReady ed aggiundere all'animazione una fila di numeri, ok?

 
11
   

Portate un set da un file all'altro.
Ma invece di spiegarlo a parole ho preparato un piccolo regalito:

Photoshop
   

 
12
   

Fatto? Allora andiamo avanti.

Faccio la stessa cosa per il set delle guide (le trascino al di sopra del set dei numeri)

Seleziono il livello 30, tanto per vederlo.
Sposto il set dei numeri (attenzione che tutti i livelli del set siano collegati fra di loro) in posizione di partenza,
come nella figura qui sotto.

 
   

 
13
   

Salvo il tutto (Il nome lo lascio cosi' matrix-prima fase.PSD)

Ah, prima di scordarmene, ho preparato un file con la fila dei numeri bell'e pronta. Vi interessa? Si chiama matrix-base-corto.psd, dove corto sta per fila corta (poi si capirà), ma il link si chiama Numeri (sulla destra al punto 1.)


Dovreste avere 49 livelli di animazione, un set con le file (file in italiano, neh?) di numeri e la guida per l'animazione.

All'apertura del file (questo è fail, in inglese) vi succederà di trovare la palette di animazione bella piena
di 49 fotogrammi. Vero?
E' che ImageReady si ricorda tutto, beato lui.

Ah, la palette, e poi non lo dico più, sarebbe la tavolozza, non la paletta: qui è quel rettangolo lungo lungo,
con almeno un'icona piccola piccola sulla sinistra. Nel nostro caso ce ne sono 49, di icone.
Ciascuna rappresenta un fotogramma.

Ok, ripuliamo la palette. Si era deciso che saremmo partiti dal fotogramma 30 per aggiungere la seconda fila di numeri.
Bene. Selezioniamo tutti i fotogrammi, dal 31 al 49 (clic sul primo, SHIFT inserito e clic sul 49mo, tenere la pressione ...) e li buttiamo via (... trascinare col mouse sul cestino presente nella palette animazione)

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 30. 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 la palette animazione è ripulita, e va da 1 a 30 fotogrammi, con l'animazione iniziale. Controllate, meglio, dai.

ImageReady
   
 
14
   
Partiamo: seleziono il fotogramma 30.

Rendo visibile: la guida, il set dei numeri e, all'interno, il livello più in basso di numeri e i due livelli dell'alone.
I livelli del set sono collegati (altrimenti fatelo ora).

Duplico il fotogramma (31)
Porto tutto il set in basso, a filo 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 10 fotogrammi

 

 
 
15
   

Ora ci sono 41 fotogrammi, i primi 30 + 1 più i dieci di tweening
tutti questi fotogrammi hanno per fondo il fotogramma (livello) 30 e quindi con la prima fila di numeri sempre ferma. Possiamo provvedere subito o farlo dopo. Direi meglio dopo, altrimenti perdo il filo.

Duplico il 41mo fotogramma, e fanno 42, (figura a sinistra)
trascino il Set 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

 
 
16
   

Ora ci sono 47 fotogrammi, i primi 42 più i 5 di tweening.
E tutti con la prima fila sempre li' immobile.

Duplico il 47mo fotogramma, che fa 48 (figura a sinistra)
trascino il set a filo della terza riga bianca (figura a destra)

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

 
17
    Ora ci sono 63 fotogrammi (fate voi la verifica, che mi sono perso)
Duplico il 63mo fotogramma, l'ultimo, (figura a sinistra) e trascino il tutto fuori schermo (figura a destra)

Seleziono i due fotogrammi (clic con lo Shift pigiato) ed imposto il tweening a 12 fotogrammi
 
 
18
    Piccolo riepilogo i fotogrammi chiave dei tweening:  
 

19
   

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

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

Fotogramma 48: visibile la prima fila di numeri.
Fotogramma 49: visibile la seconda fila di numeri.
Fotogramma 50: visibile la terza fila di numeri.
Fotogramma 51: visibile la quarta fila fila di numeri.
Fotogramma 22: visibile la prima fila fila di numeri....

E così via, fino al fotogramma 63.

Il risultato a questo punto è questo.

 
 

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

Seleziono il fotogramma 31 e rendo visibile il livello 31
Seleziono il fotogramma 32 e rendo visibile il livello 32
Seleziono il fotogramma 33 e rendo visibile il livello 33
e cosi' via, fino al fotogramma 49 dove rendo visibile il livello 49, l'ultimo dell'animazione precedente.

Seleziono tutti i fotogrammi dal 50 al 76 e rendo visibile il livello 49 per tutti loro.

Quello che ottengo è qui sotto ed in alto ad inizio pagina.
Una precisazione: sia le partenze che gli arrivi restano visibili: conto di mascherare sopra e sotto, alla fine, con un veletto nero sfocato, quindi non fateci caso, per ora.
 
   


 
   

Salvo (matrix-seconda 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-seconda fase.PSD.

Mi servirà su Photoshop per il solito trucco.
Quando avete finito ci si rivede alla terza parte, che io intanto mi faccio una bière.

 

fineseconda parte

 
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