nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
batticuore
___________________
prima parte
___________________
 

 

CUORE, anzi diagramma del battito cardiaco, ovvero batticuore

Disambiguo.
Niente che abbia a che fare con la medicina, solo un giochino suggeritomi dal ueb.
Disambiguo anche il disambiguo: trattasi di spiegone, e morta là.

Dopo la bêtise (stupidata) di cui sopra passo alla roba seria.
Girando in giro, come mi capita di fare se mi annoio, m'è venuta voglia di guardare un po' di quei filmati micidiali che vengono venduti sul ueb, quella roba che trovate digitando "video stock" o roba simile.
Ce ne sono di bellissimi, tutti realizzati con potenti mezzi, immagino, con workstation da-fine-del-mondo.
E così m'è girato di provare a rifarne qualcuna, almeno quelle più abbordabili, ma di rifarle utilizzando gli scarsi mezzi a mia disposizione: photoshop neppure CS, Imageready e Swish max.

Questa guida tratta del primo tentativo di rielaborazione di un video di tal fatta. L'animazione del diagramma del battito cardiaco. Semplificato, ovviamente.

Ora produrre l'animazione di un diagramma che si compone sullo schermo (e magari svanisce pian piano) è una cosa banalissima, a condizione che il fondo sul quale viene disegnato ed animato il diagramma sia un fondo unito o sfumato in modo simmetrico.
E' tutta questione di preparare una tendina (un livello identico al fondo) da sopvrapporre al grafico e farla scorrere da sinistra verso destra (o viceserva) lasciando apparire pian piano il diagramma sottostante.

Volendolo poi far sparire basta fare una seconda copia del fondo, sistemarla fuori schermo a sinistra (o a destra) e farla apparire pian piano, coprendo il grafico che sta al di sotto.
Magari faccio un esempio ad inizio guida, che così si capirà meglio quel che ho tentato di spiegare.

L'affare si complica se il fondo non ha quelle caratteristiche, e tantopiù se sul fondo c'è un'altra animazione.
In questo caso la cosa più spiccia è spezzettare il diagramma in tanti segmenti, rendendoli visibili uno alla volta e, volendo, facendoli poi sparire successivamente, sempre uno alla volta.
Che è un po' quello che succede nell'immagine in cima alla pagina, con l'unica differenza che i vari segmenti appaiono e scompaiono uno dopo l'altro, mentre nel diagramma occorre che prima di scomparire restino lì un pochetto, aspettando che alcuni segmenti successivi facciano la loro comparsa.


1
   

Come promesso ecco l'esempio per la costruzione di un'animazione con un grafico che appare pian piano da sinistra verso destra e scompare allo stesso modo.
Un livello con il fondo ed il grafico.
Copia del fondo (privo del grafico) su un nuovo livello posto sopra al grafico.
Altra copia del fondo, sempre al di sopra.
Si fanno scorrere all'unisono i due livelli copia, da sinistra a destra.
Quel che si vedrà è nella parte inferiore dell'animazione.

Qui ho usato due livelli neri con una sfumatura ai lati opposti per far apparire e sparire meno bruscamente il diagramma.
Ma questo vale per un fondo unito, come si intuisce.

Photoshop
   

2
   

Al lavoro.
Qui sotto si vede il grafico completo, quello da realizzare in animazione.
Più sotto ancora sei o sette punti per realizzarlo, come ho fatto io, non che sia l'unico modo, ma è quel che passa il convento, dai.

   

3
   

Seleziono lo strumento penna.
Traccio il tracciato.
Come?
E' cacofonico?
Ah, no, come si fa?
Ci si mette col mouse sulla prima posizione (basso-sinistra) e si clicca.
Ci si sposta col mouse nella seconda posizione (alto-destra) e si clicca anche li.
Ci si risposta col mouse ... Non credo sia il caso di proseguire, vero?

Scherzi a parte, è un po' come usare lo strumento lazo poligonale. La differenza è che lo strumento penna genera una maschera ed un tracciato.
Niente di preoccupante, potreste benissimo usare il lazo, ma è che oggi mi sento in vena di vanterie, che anche io a volte uso la penna.

   

4
   

Dopo l'ultimo clic (noterete che Photoshop compone un'area all'interno dei punti determinati dal vostro cliccare) basta smettere, magari passando a selezionare un altro strumento. Noterete anche che si è creato un nuovo livello con un nome prestabilito (Forma 1).
Cliccando col tasto destro del mouse sull'icona del livello (non del tracciato, sull'icona a sinistra) si sceglie:

Seleziono trasparenza di livello.

   

5
   


Creo un nuovo livello che chiamo diagramma.
Traccio il perimetro con l'opzione:

Modifica > traccia

Scelgo il bianco come colore e uno spessore di 3 pixel.

   

6
   

Se vi sono sembrato eccessivamente sarcastico è che io non amo molto lo strumento penna, e neppure i tracciati, e neppure Photoshop, ma tant'è, a chi tocca non se ingrugna, come diceva una tale e quale.

Noterete il garbuglio che Photoshop combina quando le aree si intersecano (si tratta solo di un sottosquadro, niente di nuovo sotto il sole).
Ora ci tocca ripulire il disastro.

Seleziono con gli strumenti appositi, magari un pezzo alla volta, le zone da ripulire ...

   

7
   

E ripulisco.
Nel senso che cancello le eccedenze:

   

8
   


Creo un nuovo livello (non sto a rinominarlo, è provvisorio)

Delimito un'area rettangolare spessa 3 pixel in verticale e lunga quanto basta.
(far riferimento all'immagine)

   

9
   

Riempio l'area di bianco

   

10
   

Duplico il livello e lo sposto a sinistra (SHIFT premuto per non muovermi sulla verticale).

Collego ed unisco tra di loro i tre livelli, riottenendo il livello
diagramma completo.

   

11
    A questo punto ho le basi di disegno per preparare lo spezzatino ... ovvero tanti livelli contenenti ciascuno un pezzetto di diagramma.

Io faccio in questo modo, ma poi uno si sceglie la via più consona.




Creo un set di livelli (linee)
Duplico il livello diagramma (lo rinomino 1) e lo trascino nel set linee
Duplico il livello 1 (lo rinomino 2)

Sul livello 2 circondo con lo strumento appropriato il primo tratto del diagramma che intendo isolare, e lo cancello (tasto CANC).
Inverto la selezione, vado sul livello 1 e cancello (tasto CANC).
Ho scritto strumento appropriato nel senso che potete scegliere fra questi due:


Io sono partito da sinistra, isolando un tratto della linea orizzontale, e quel che resta sul livello 1 è questo:
   

 
   
e questo è quel che resta sul livello 2:
 
   


12
    Poi proseguo.

Duplico il livello 2 (lo rinomino 3)

Sul livello 3 circondo con lo strumento appropriato il tratto del diagramma che intendo isolare e cancello (tasto CANC).
Inverto la selezione, torno sul livello 2 e cancello (tasto CANC).


E proseguo allo stesso modo, un livello dopo l'altro.
Alla fine ho 15 livelli ciascuno con un pezzetto di linea. Nell'immagine qui sotto li si vede, quelli pari bianchi, quelli dispari grigi.
   


   
Dovendo eseguire l'animazione con Swish Max abbiamo finito, poichè disponiamo di tutti i tipi di segmento necessari.
Servirebbe una "maschera", un diagramma completo da utilizzare come riferimento per riposizionare i vari pezzetti.
Basta duplicare il set linee e spostarlo in orizzontale (SHIFT premuto) verso destra, più o meno come nell'immagine che si vede al punto 1 di questa pagina, e salvarsi l'immagine (file > salva per web > registro.jpg).

Per salvare i vari pezzetti si fa in questo modo:

1. Seleziono il livello 1 (Menù > Seleziona > Tutto)
2. Copio (ctrl + C)
3. Creo un nuovo file (Menù > File > Nuovo > fondo trasparente)
4. Incollo (ctrl + V)
5. Salvo come png 24 trasparente (File > Salva per web).

E ripeto l'operazione per tutti i 15 livelli contenuti nel set linee.
 
13
   

Ora l'animazione.

Apro Swish Max ed imposto il filmato di 1280 x 720, fondo nero.
Importo sullo stage l'immagine di registro (registro.jpg).
Importo sullo stage i png con i segmenti del diagramma e li sistemo in posizione utilizzando l'immagine di registro.
Non vi sto a dire le posizioni, dipende tutto da come si disegna il diagramma.

Per non annoiare con un sacco di numeri e di nomi, qui sotto c'è lo schema degli effetti utilizzati con il primo segmento del diagramma,

Nel primo fotogramma: doppio clic, poi tasto destro del mouse e si sceglie l'effetto nascondi (in inglese effect > remove).

Nel terzo fotogramma: doppio clic per generare il keyframe: determina la comparsa del segmento

Doppio clic sul fotogramma 21: genera il rettangolo di "movimento" a partire dal fotogramma 4. Ci serve solo per delimitare lo spazio.

Doppio clic sul fotogramma 33.
Si passa alla palette dell'opacità (Tint), si clicca sul bottone a destra di Alpha, si sceglie Custom. Si scrive 0 nella casella sottostante A: %

Si butta via (o lo si lascia, io in genere lo rimuovo) l'effetto presente nei fotogrammi
4 - 21.

Clic e copia (Ctrl + C) sul fotogramma 1.
Clic e incolla (Ctrl + V) sul fotogramma 34. Sparisce del tutto il segmento.

Lo schema vale per tutti gli altri segmenti, naturalmente modificando la posizione dei keyframe sulla linea temporale.

 

SwishMax
   

 
14
   

E qui sotto c'è lo schema dei primi 15 segmenti.
Gli effetti sono identici per ciascuno, varia solo la posizione

Quel che si ottiene lo si vede più sotto (si vede anche l'immagine di registro che poi, naturalmente, si elimina).

 
   

15
   

Si tratta ora di completare il diagramma, duplicando i pezzetti (png) e spostandoli lungo il registro del diagramma, ed inserendo i fotogrammi-chiave lungo la linea temporale, che si allungherà di parecchio.
Io sono arrivato a far sparire l'ultimo segmento al fotogramma 84, ed ho ottenuto questo risultato, bruttino assai, ma ho dovuto ridurre drammaticamente le dimensioni del filmato:

   

16
   

Finalmente il loop.
Che quello sopra è un loop, ma il cuore, al fotogramma 54, sembrerebbe aver smesso di battere, prima di ricominciare dal fotogramma 1.

Occorre riprendere a far comparire i primi segmenti a sinistra prima che l'ultimo segmento a destra abbia il tempo di scomparire.
Fatti due conti, si tratta di duplicare (copia e incolla) gli effetti dei primi 34-35 fotogrammi inserendoli a partire dal fotogramma 56, e così di seguito per ogni segmento.
Non ho modo di mostrarvi tutta la struttura dell'animazione, troppo grande, però
ho preparato un'immaginona che potete vedere (pop-up) cliccando sulla lente di ingrandimento qui sotto.



Tenete presente che si tratta di un loop imperfetto.
Io ho duplicato la comparsa-sparizione dei segmenti un 5 volte, poi mi sono fermato ed ho lasciato che il cuore cessasse di battere, perchè anche se allungate il brodo (più copie degli effetti lungo l'asse temporale) alla fine ci sarà il problema di rientrare dal loop, la qual cosa richiede parecchio tempo, calcoli, fatica, prove, provini, insomma un guazzabuglio nel quale vi sconsiglio di inoltrarvi, ma, se proprio lo dovete fare, procuratevi una scorta di analgesici contro il mal di capoccia che vi aspetta lungo la linea temporale.

 

fine prima parte

 
altre guide
cuore
         
 


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