nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
onda grafica
___________________
 

 

Onda grafica.

Questa guida serve per realizzare alla veloce un movimento costante e senza fine (moto perpetuo oppure loop, a vostra scelta).
Un trucco, quindi, per ottenere un loop nell'animazione di un elemento che si snoda, non importa se in orizzontale o in verticale.
Tipo il movimento di un'onda, ovviamente semplificata, schematica, grafica.
Che chiamo effetto onda (per le kw e per dar sfogo alla fantasia).

Ora sul loop (in latino de loop, quasi come in inglese (*))
Probabilmente in altre pagine troverete delle note simili.
Il loop (ciclo) è quello che significa letteralmente: un ciclo (continuo), nel quale il primo fotogramma si "aggancia" all'ultimo e consente di ripetere (e rivedere) l'animazione a tempo indeterminato, senza "sganci".

Un po' di terminologia, così poi la posso usare senza che ci si capisca una beneamata.

Aggancio: il movimento prosegue in modo fluido.
Si realizza, in genere, definendo il fotogramma di arrivo identico al fotogramma di partenza,
si esegue un'interpolazione automatica o la si fa manualmente e poi si butta via uno dei due fotogrammi esterni, l'ultimo o il primo. Questo per evitare una pausa nell'azione
(due fotogrammi uguali = doppia permanenza sullo schermo).
Credo sia uno dei pochi casi in cui avere "meno pausa" sia gradito.

Sganci: il passaggio da un fotogramma al successivo con un movimento brusco rispetto a tutti i fotogrammi precedenti, quasi mancassero dei fotogrammi intermedi. Da non confondere con lo "stacco" che è altra roba.

 
1
    Per prima cosa apro Photoshop (mi piace dire banalità) e creo un file di 400x350 px.

Creo un nuovo livello (
onda)


Con lo strumento lazo poligonale traccio una bella curva ondulata, come quella sotto.

(La parte in basso, non ondulata, è solo quella che si fa per chiudere il perimetro)

Photoshop
   


 
2
    Menù > Modifica > Traccia.

Utilizzo 16 pixel di spessore ed un azzurro intenso come colore

Lo strumento traccia segue il perimetro. La parte bassa, in eccesso, ora la ripuliamo ...
 
   

 
3
   
Con lo strumento lazo poligonale circondo la parte in eccesso (quella in basso) e la cancello (tasto CANC) ed ottengo l'immagine qui sotto.

Questo per la prima onda.
 
   

 
4
    Duplico il livello onda, lo rinomino onda1 e lo sposto verso il basso, per farne una seconda, di onda  
   

 
       
5
    Ora il trucco:

Avviso: le immagini che mostro qui sotto non sono reali, nel senso che qui ho raddoppiato la visione del quadro per poter mostrare cosa capita alle onde.
In realtà si lavora sempre sull'immagine da 400x350.

Per prima cosa collego i due livelli onda e li unisco (chiamiamoli onde).
Duplico il livello onde (lo chiamo onde2) e lo sposto a sinistra.
Se accosto le due onde naturalmente non coincidono. Ma se ...
 
   

 
6
    ... se rientro verso destra, coprendo il livello onde (che qui è quello più chiaro) fino al punto da ottenere la perfetta sovrapposizione delle due estremità, ottengo un'unica onda che però è anche un moto perpetuo.
(Se la sovrapposizione non è perfetta intervengo col lazo poligonale per tagliare le eventuali piccole parti in eccesso)

Nell'immagine piccola, sotto, si vede come fare per sistemare le onde a registro.

 
   




 
7
    La prova ve la mostro utilizzando sempre l'immagine grande (non reale) e sovrapponendo una cornice nera, che è l'immagine reale, così da vedere come lavorano le onde in animazione.  
   



 
8
   

Per l'animazione:

In primis unisco fra di loro i due livelli onda e onda2, così da ottenere un unico livello, che col tweening funziona.

il primo frame è l'onda iniziale.
Si duplica quel frame e si sposta l'onda a registro con quella iniziale.
Per controllare basta cliccare rispettivamente sul primo e sul secondo frame. Se non si muove niente, siete a registro.

Poi impostate il tweening col numero di frame che volete.
Una volta che i fotogrammi sono stati creati buttate via l'ultimo o il primo, che sono identici fra di loro.

C'est terminé. Ou terminè? Boh

ImageReady
   


 
   

Un altro esempio di animazione lo trovate qui
(che magari ci siete venuti da lì, cioè da qui, no, da lì ...
... fate come non aveste letto, meglio)
 
    (*)
Ho riletto, ed ho capito che non avevo capito neppure io il fatto del de loop che sarebbe latino. Di latino c'è solo il de, intorno a, de cossa se ciàcola, complemento di argomento, tipo de bello gallico.
E l'assonanza "de - the" non la spiego, ma manco morto, tiè.


Se poi ti va ancora di lasciare un commento, sulla guida non sul loop, il link è qui sotto (Blogger).
 
       

fine della guida

 
altre guide
onda
     
 


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