nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
animazione nave
___________________
 
 

Onde e vele al vento

Ogni promessa è un'animazione (vedi guida precedente).

In questo supplemento di guida ho aggiunto una nave, dei gabbiani, ed ho raddoppiato le onde del mare poichè mi serviva più campo in orizzontale per contenere la nave.

Prima di procedere, un'avvertenza: nelle guide inserite fra le animazioni bestiali sto trascurando tutta una serie di dettagli che ormai dò per scontati, trattandosi appunto di guide "bestiali".
Particolari sul modo di disegnare, di salvare, di utilizzare alcuni strumenti di Photoshop o Imageready mi paiono ormai stradescritti qui sul posto (= sito). Se putacaso servono indicazioni aggiuntive potete sempre far ricorso all'info_ndo (se non sapete cosa sia lo ridico: è il sistema per ricevere informazioni via e-mail, che in genere viene definito Info. Avendo posto il link in fondo alla pagina m'è parso ragionevole ed anche coerente chiamarlo info_ndo, che se era in cima l'avrei chiamato ... no, stop, il contetto è chiaro, credo).

Tiremm innanz.
Direi di far le cose per gradi.
Prima le onde lunghe..


 
1
    Se partite da zero dovrete rifare tutto il percorso della guida precedente, ma fermandovi al punto 6.
Meglio se evitate di raggruppare ed unire i livelli di ogni onda, sistemandoli, onda su onda, in un set ciascuna per poter procedere all'allungamento dell'onda.

Se invece arrivate da quella guida dovreste aver seguito l'avvertenza inserita al punto 6 di NON UNIRE i livelli delle onde, ma ragrupparli appunto, onda su onda, ciascuna in un set.

Se, in ultima ipotesi, arrivate da lì ma non pensavate di procedere oltre, avete due possibilità: o ve ne fregate e lasciate un'onda più corta, utilizzando i livelli raggruppati, oppure vi toccherà ridisegnare i raccordi, onda su onda, come vediamo qui sotto.

Mi rileggo il PSD della guida precedente.
Raddoppio la dimensione del quadro, magari anche qualcosa in più, mantenendo fermo il lato destro dell'immagine.
Qui sotto se ne vede il risultato (è visibile solo il primo set della prima onda). Io ho un po' di roba di troppo sulla sinistra del set dell'onda poichè ho lavorato si un riquadro più ampio di quello utilizzato per l'animazione, quindi non c'è da farci caso.
Photoshop
 
 

 
   


Duplico il set dell'onda.
Lo sposto in orizzontale a sinistra a ridosso del confine del riquadro.

   
 

 
   
Con santa pazienza sposto i livelli del nuovo set nel vecchio, mantenendo la posizione dei livelli simili, nel senso che i due livelli con il bordo nero saranno in alto, quelli con le zone bianche saranno in seconda posizione, partendo dall'alto, e così via. Insomma ottenendo una serie di livelli simili uno sopra all'altro.

Con altrettanta pazienza raccordo fra di loro i livelli simili, magari tagliando le parti in eccesso e prolungando le zone colorate per ottenere un risultato pulito. Più o meno come si vede qui sotto.

A questo punto posso collegare ed unire fra di loro tutti i livelli dell'onda
contenuti nel set.
   

1

 
2
    Ripeto le stesse operazioni per gli altri sette set ... ops, pare un cucù settete ... delle altre sette onde.
Che vi mostro alla fine della fiera:
   

1-1

 

2

 

2-1

 

3

 

3-1

 

4

 

4-1

 
   
E rendendo visibile un livello alla volta (o un set alla volta, se non avete unito i livelli) otterrete con Imageready l'animazione che si vede qui sotto
   
 

 
3
    Rendo invisibile il fondo.
Uno alla volta salvo gli 8 livelli come png-24 trasparente (file > salva per web) utilizzando nomi significativi, del tipo: o1, o1-2, o2, o2-2, etc.
Che io, quando dico significativi, lo dico per me, che nel salvare mi illudo sempre di ricordarmi come diavolo l'ho chiamato.
Che se voi avete più testa di me, salvateli con nomi che siano significativi sul serio e soprattutto per voi.
   
         
4
    Passiamo al vascello.
La nave di base la si vede nell'immagine qui sotto, prelevata dal sito di un amico, la quart'ultima immagine della pagina

Quel che tocca fare è la ...
   
 

 
   

... separazione degli elementi (vele, sostanzialmente vele, anche piccole, diciamo veline che se diciamo velette parrebbero roba anni 30).

Qui sotto c'è il vascello scomposto, avendo eliminato le onde ed il cielo, con le vele sparse che si risistemano nella posizione coincidente con l'immagine originale e che, utilizzando tre semplici deformazioni, si gonfiano al vento che le scuote.

Sono partito da un CGM, letto con Adobe Illustrator. Ho spostato le vele ai lati del veliero (trattandosi di roba vettoriale è come se ogni oggetto fosse un livello a se stante, quindi si trattava solo di aver la pazienza di individuarlo e poi spostarlo, partendo dall'oggetto più sopra, un po' come si fa giocando a shanghai).

Se invece il veliero ve lo disegnate voi, lasciate ogni vela su di un livello ed il gioco è fatto.

Se invece volete far prima scaricatevi il file nave-divisa.ai dalla pagina download cui potete accedere con il tasto dorato posto in cima alla pagina, a sinistra, oppure con quello sistemato in fondo alla pagina, a destra.
Per ottenerlo con gli elementi vettoriali occorre leggerlo con Adobe illustrator.
Leggendolo con Photoshop si ottiene un unico livello.

   
 

 
5
    Una ad una animiamo le vele.
Io mi sono limitato a 3 immagini per ogni vela. Ho utilizzato il filtro fluidifica per far prima. Qui sotto c'è quel che può dare una vaga idea della manipolazione di una vela.

I tre profili neri rappresentano, per quel che si può capire, le modifiche da fare partendo dalla vela originale.
Le tre vele sottostanti sono il risultato del filtro fluidifica.

L'animazioncella in basso è quel che si ottiene a fine lavoro.
   
   

   
6
   

Qui ve la spiego alla buona.
Abbiamo 3 livelli per ogni vela (a parte quelle che non ho-avete animato) più un livello con la nave, l'alberatura e le poche vele che, data la posizione, è inutile od impossibile animare.

Potrei salvare png-24 trasparenti per ogni livello di vela, ma ne avrei fino alle calende greche.
Tanto vale ipotizzare alcune combinazioni fra i livelli delle vele e salvare vari png con tutta la nave al completo, utilizzando ora un livello ora l'altro delle vele animate.
Un bel giochetto da perderci la capa, ma sempre meglio che gestire poi un'ottantina di elementi da sistemare a registro.

Quindi in pratica ecco quel che ho fatto:
1- Ho reso invisibile il fondo (mi serve roba trasparente).
2- Ho reso visibile tutti gli elementi della nave ed alberature e funi e le poche vele non animate.
3- Ho reso visibili tutti i livelli 1 (nel senso dei livelli non deformati col filtro fluidifica) delle vele animate.

Ho salvato l'ambaradan come png-24 tasparente, con un nome a caso (nave-1.png).

Fermi restando i punti 1 e 2, ho reso visibili SOLO tutti i livelli 2 delle vele animate.
Ho salvato l'ambaradan come png-24 tasparente, con un nome a caso (nave-2.png).

Fermi restando i punti 1 e 2, ho reso visibili SOLAMENTE tutti i livelli 3 delle vele animate.
Ho salvato l'ambaradan come png-24 tasparente, con un nome a caso (nave-3.png).

Fermi restando i punti 1 e 2, ho reso visibili alcuni livelli 1 di alcune vele animate e per le restanti vele animate ho reso visibili i livelli 2.
Ho salvato l'ambaradan come png-24 tasparente, con un nome a caso (nave-4.png).

Fermi restando i punti 1 e 2, ho reso visibili alcuni livelli 2 di alcune vele animate e per le restanti vele animate ho reso visibili i livelli 3.
Ho salvato l'ambaradan come png-24 tasparente, con un nome a caso (nave-5.png).

Avrei potuto proseguire con le altre possibili combinazioni, ma mi ero stufato.
Se voi avete più cervello potete costruire una tavola decisionale ed esplorare tutte le combinazioni possibili su 24 elementi in 3 versioni, tipo una schedina del totocalcio con 24 partite e 3 risultati utili.
Una roba da garantirvi l'eternità, a poterla finire.

   
7
    Ultimo accorgimento, prima di passare a Swish Max.
Swish Max, appunto, ha uno strano sistema per ribaltare (ruotare di 180°) gli oggetti. Ed io ogni volta vado in crisi, che non mi ricordo bene come fare (*).
Per evitarlo io ho fatto come faccio di solito quando qualcosa non mi riesce facile: mi incasino in ripetizioni barbosissime, come contare sulle dita da 1 a 100, non che io abbia cento dita, pur contando i piedi, ma s'è capito il paragone, spero.
Ho riletto gli otto png delle onde, li ho ribaltati in orizzontale, e li ho risalvati cambiandogli nome:
Ro1, Ro1-2, Ro2, Ro2-2, etc.

Non ve l'avrei detto, ma poi lo si sarebbe visto sulle schermate di SwishMax, quindi l'ho detto, che se non si fosse visto col cavolo che lo dicevo, non nel senso che mi serviva il cavolo per dirlo, nel senso ... chiaro, si?
   
         
8
    Apro un nuovo filmato (1280 x 720).
Per la dimensione regolatevi come lunghezza su un png di onda, per l'altezza su un png di onda sommanso l'altezza di un png della nave.

Importo le 5 immagini della nave.
Le sistemo tutte nella stessa posizione:
x = 645
Y = 304

riducendone leggermente le dimensioni:
lunghezza (x) 90%
altezza (Y) 90%

Queste indicazioni valgono nel caso mio, sistemate la nave come vi va.

Nell'arco di 12 fotogrammi le faccio apparire in sequenza, per poi farle sparire.
Lo schema dei fotogrammi chiave è indicato nella figura qui sotto.


Raggruppo le 5 immagini come sprite (clip filmato)
Nella seconda parte dell'immagine c'è la sequenza dei fotogrammi per la clip filmato (24 keyframe) con i valori di rotazione applicati ai singoli fotogrammi (colonne di numeri neri sono il fotogramma, colonne dei numeri rossi sono i gradi di rotazione).
SwishMax
 
 

 
   
Questo il risultato. Con un qualche spostamento orizzontale e/o verticale che dovrete fare ad occhio, in parte per compensare gli spostamenti determinati dalle rotazioni, in parte, ma questo dopo aver sistemato le onde, per evitare che il vascello si alzi al di sopra della cresta dell'onda.
   
 

 
9
    Prima fila di onde.

Importo le 8 immagini dell'onda.
Le sistemo tutte nella stessa posizione, riducendone le dimensioni come indicato nella figura qui sotto:
lunghezza (x) 70%
altezza (Y) 50%

Nell'arco di 24 fotogrammi le faccio apparire in sequenza, per poi farle sparire.
I valori dei fotogrammi chiave sono indicati sempre nella figura qui sotto.


In breve, a parte il primo png (o1) sono invisibili al fotogramma 1, appaiono visibili al 50% sull'ultimo fotogramma nel quale è visibile l'elemento sottostante, sono poi visibili al 100% per 3 fotogrammi, e finalmente spariscono.
   
 

 
   
Con quest'altro risultato:
   
 

 
10
    Importo le 8 immagini dell'onda ribaltata in orizzontale (Ro1, etc).
Le sistemo tutte nella stessa posizione, riducendone le dimensioni come indicato nella figura qui sotto:
lunghezza (x) 80%
altezza (Y) 80%

Nell'arco di 24 fotogrammi le faccio apparire in sequenza, per poi farle sparire.
I valori dei fotogrammi chiave sono indicati sempre nella figura qui sotto.


In breve, a parte il terzo png (Ro2) sono invisibili al fotogramma 1, appaiono visibili al 50% sull'ultimo fotogramma nel quale è visibile l'elemento sottostante, sono poi visibili al 100% per 3 fotogrammi, e finalmente spariscono.
   
 

 
10
   
Con il risultato finale:
   
 

 
         
    Anche questa guida finirebbe qui, ma in realtà non finisce del tutto.
Devo parlarvi dei gabbiani e della schiuma del mare.
Diciamo un paio di giorni ed integro le parti mancanti, anche se la nave galleggia ed il mare si muove comunque.
   
   

 

 

   
    (*) Che nessuno si metta in testa di utilizzare quel che scrivo per un tema in classe: grammaticalmente e sintatticamente è roba scorretta, tipo il "che" usato al posto del "perchè" ed altre piacevolezze. Le scrivo di proposito, che mi diverte (visto il che?) rifarmi a forme dialettali dal me pais, delle mie parti.
Che (ci sono ricascato) ormai siamo in pochi ad usare il dialetto come forma colloquiale più amichevole.
Che l'altro giorno che ero seduto al bar per un cappuccino alla veloce, e c'erano alcuni avventori (sta per clienti) seduti al tavolino alle mie spalle, ed arriva un tale con la giacca alquanto spiegazzata, che (non la giacca, lui) era della combriccola dietro di me, ed uno di quelli seduti, sfoderando una bella cadenza piemontese, gli fa:

"Hai dormito vestito?"

Che l'altro, preso d'infilata, non ha saputo far di meglio che rispondergli col tono di chi sta
al gioco: "Si"

Ed il primo, non contento d'averlo già preso per i fondelli, insiste:

"Avevi paura di morire?".

Che io la ghignata (risata) che mi son fatto fra me e me me la ricordo ancora.
Che io l'ho capita dopo un secondo, forse voi no, ed a spiegarvi che nei tempi andati ai defunti gli si metteva addosso l'abito buono, e che se uno va a dormire vestito è come se pensasse che se muore quella notte lì, almeno l'abito buono ce l'ha già addosso, che potrebbe anche essere una prova di sfiducia verso gli eredi, che io di spiegarvi questo non c'ho proprio gnun-na voja, nessuna voglia.
   
         
         

fine della guida

 
altre guide
mare e onde
 


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