nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
animazione radar
___________________
quarta parte
___________________
 

 

Schermo radar animato
Quarta parte: disegno della raggiera e della mappa di spostamento.

Ci ho pensato su un bel po' su come mostrare quel che c'è in questa pagina.
Intanto vi dico di che si tratta.
Si tratta di realizzare la base per mappe di spostamento e quale strumento di disegno per il controllo di un'animazione a scomparsa.
Che detto così non se ne capisce il motivo (per non dire una mazza).
Diciamo che l'animazione del radar si sviluppa in una rotazione circolare, c'è qualcosa (una luce, una scia, una linea luminosa) che percorre lo schermo come la lancetta di un orologio, insomma quel che fa di solito un radar.

Io vorrei far qualcosetta di diverso, ma sempre come animazione rotatoria.
E mi servono delle linee disposte quasi fossero altrettanti diametri del cerchio e con un passo di rotazione di 3 gradi alla volta.
Si tratta perciò di realizzare 60 linee che rappresentano 60 diametri, ma anche 120 raggi.
E così con 120 raggi ruotati di 3 gradi alla volta abbiamo i 360 gradi del cerchio.

E questa pagina si occupa appunto della costruzione della raggiera.


38
   

Creo un file di 600 x 600 pixel, fondo nero.

Il seguito è descritto in animazione qui sotto: utilizzate i tasti numerati per vedere qualcosa.

Tasto 1
Creo un Set di livelli (il nome importa poco)
Creo un nuovo livello nel Set (fondo trasparente)
Con l'aiuto delle guide calamitate traccio una linea verticale nel mezzo, spessa 2 pixel, utilizzando lo strumento linea.

Tasto 2
Creo una nuova azione con le seguenti attività:
Duplico il livello
modifico la selezione ruotandola di 3 gradi.

Tasto 3
Utilizzo l'azione per altre 14 volte, ottenendo alla fine 15 livelli all'interno del set, che coprono 45 gradi.

Tasto 4
Duplico il Set e ruoto tutto di 45% (ora abbiamo mezzo cerchio pieno di linee).
Duplico l'ultimo set e ripeto la rotazione.
Duplico il terzo set e ruoto di nuovo.
Tutto il cerchio è pieno di linee.

Tasto 5
Collego tra di loro i 4 set.
Seleziono un set (diciamo il primo) ed unisco tutti i livelli all'interno del set (CTRL + E)
Seleziono un altro set ed unisco i livelli (CTRL + E)
E così via fino al quarto set.
Ora ho 4 livelli, uno per ogni set che è sparito. Li unisco (CTRL + E) fra di loro ed ottengo un unico livello

Photoshop

   


 
39
   

Altro giro, altro regalo, come urlavano alle giostre.

Si tratta di realizzare 3 livelli per far ruotare nel corso di 3 fotogrammi la raggiera appena ultimata, quell'unico livello finale realizzato qui sopra.

In breve ecco quel che si può vedere nella guida nimata qui sotto:

1. Rinomino il livello (Layer 4 > 1)

2. Duplico il livello (e lo chiamo 2)

3. ruoto il livello di 1 grado.

4. duplico il livello 2 (e lo rinomino come 3).

5. Ruoto anche il livello 3 di 1 grado.

Costruzione
dell'animazione
per il filtro muovi.
   


40
   

Il risultato in animazione lo potete vedere qui sotto (si tratta di rendere visibile un livello alla volta nell spazio di tre fotogrammi)
Solo che vi consiglio uno sguardo di sfuggita, non soffermatevi che potrebbe causarvi dipendenza, senso di nausea, malessere generale, improvvisa voglia di sbattere la capoccia sul monitor ... insomma, uno sguardo e poi fuggire.

   


41
   

Salviamo i psd.
Rendo visibile uno alla volta un livello ed il fondo nero e salvo con nome:
M1.psd - M2.psd - M3.psd.
I tre files costituiranno la base per la mappa di spostamento.


Riapro il file del radar, quello senza i livelli schermo2 e schermo.
Tutti i livelli visibili tranne il livello scia.
Salvo per web (File > Salva per Web > Jpg qualità 100) come base3.jpg.

   


base3.jpg

42
   

Rileggo base3.jpg.
Seleziono tutto - CTRL+A
copio - CRTL+C
ed incollo - CTRL+V
sul psd del radar proprio sotto al livello radar.

Rinomino il livello copiato come base3.

Ora un po' di cose per costruirmi uno strumento per utilizzare il filtro muovi.


Creo un nuovo livello e lo chiamo via1


Clicco con la bacchetta magica, sul livello radar, all'interno del cerchio, nella zona nera ed ottengo in selezione il cerchio vuoto interno.

   

43
   

riduco la selezione:
Selezione > Trasforma selezione.
Scrivo direttamente 20 ed incateno L ed A.

   

44
   

Con la selezione in canna torno sul livello via1 e riempio la selezione di bianco (ma non importa, è un colore a caso, per vedere qualcosa.

Deseleziono e sfoco il livello di un 18%.

   

45
   
Creo un nuovo livello e lo chiamo via2


Clicco con la bacchetta magica, sul livello radar, all'interno del cerchio, nella zona nera ed ottengo in selezione il cerchio vuoto interno, proprio come al punto 42.
Modifico la selezione:
Selezione > Trasforma selezione. Ne porto il valore a 115.
 
   

 
46
   

Con la selezione in canna torno sul livello via2 e riempio la selezione di bianco.
Non fate caso alla selezione che si vede nell'immagioe qui sotto. Serve per ...

Seleziono la trasparenza di livello del livello via1

Con la selezione in canna torno sul livello via2 e ...



   


 
47
   


... e cancello

Questo livello (via2) serve per delimitare la zona nella quale agirà il filtro muovi.

   


48
   

Duplico il livello base3. Rinomino la copia col nome muovi1
Duplico il livello muovi1. Rinomino la copia col nome muovi2
Duplico il livello muovi2. Rinomino la copia col nome muovi3

Seleziono la trasparenza di livello del livello via2.

Vado sul livello muovi1 ed applico il filtro:
Filtro > Distorsione > Muovi.
I valori e la mappa di spostamento sono indicati nella figura qui sotto.
Al livello muovi1 applico la mappa m1.psd.

Vado sul livello muovi2 ed applico il filtro:
Filtro > Distorsione > Muovi.
I valori e la mappa di spostamento sono indicati nella figura qui sotto.
Al livello muovi2 applico la mappa m2.psd.

Vado sul livello muovi3 ed applico il filtro:
Filtro > Distorsione > Muovi.
I valori e la mappa di spostamento sono indicati nella figura qui sotto.
Al livello muovi3 applico la mappa m3.psd.

Il risultato lo vedete nell'immagine in basso.

M1, M2, M3 sono i files creati al punto 41, per intenderci.

   



49
   

Mi serve una maschera, poichè il risultato del filtro è un pochetto strano, vero?
Anche valutando il risultato rendendo visibile, al di sopra, il livello radar credo sia meglio circondare la parte esterna con il fondo pulito.

   


50
   


Clicco con la bacchetta magica, sul livello radar, all'esterno del cerchio, nella zona nera ed ottengo in selezione tutto quel che c'è al di fuori del radar.


Vado sul livello base3

+ copio

+ incollo.

Trascino il nuovo livello che s'è creato (lo rinomino maschera) al di sopra dei tre livelli muovi.

   

51
   

Trascino il nuovo livello che s'è creato (lo rinomino maschera) al di sopra dei tre livelli muovi.
Ora è meglio, no?
Il disassamento fra il livello radar ed i livelli muovi fa parte del gioco, lo vediamo fra poco in animazione.

Oscuro il livello radar (anche se non è indispensabile, ma solo per coerenza)
Rendo visibile il livello maschera e, uno alla volta, i livelli muovi.
Salvo tre jpg: radar-muovi1 - radar-muovi2 - radar-muovi3.jpg.

   

52
   

SwishMax.

Per non annoiarvi con ripetizioni inutili, si fa prima a partire dall'ultima animazione, quella realizzata nella terza parte di questa guida.

Si tratta semplicemente di buttar via il file base3 e sostituirlo con i tre files
radar-muovi1 - radar-muovi2 - radar-muovi3.jpg.

Li si importa sulla scena e li si sistema in fondo, al posto della vecchia base.
Poi dobbiamo soltanto farli apparire uno alla volta, per un solo ciclo di 3 fotogrammi.
Quando raggrupperemo le tre immagini in una clip filmato il gioco sarà fatto.

Qui sotto potete vedere come sistemare le cose sulla linea temporale dei singoli elementi:

radar-muovi1: appare al ftg 1 - scompare al ftg 2.
radar-muovi2: nascosto al ftg 1 - compare al ftg 2 - scompare al ftg 3.
radar-muovi3: nascosto al ftg 1 - compare al ftg 3.

Al termine si selezionano tutti e tre e si raggruppano come sprite, come clip filmato.

SwishMax
   


53
    Che alla fine il risultato è strano. Specialmente nella versione a grandezza piena, quella che si vede cliccando sulla lente. Se guardi la parte esterna del cerchio, senza mcercare di mettere a fuoco un particolare qualsiasi, ti pare che tutto ruoti in senso orario, se fissi la mappa in mezzo, o se ti soffermi su un dettaglio, ti pare che tutto sfarfalli un po' in avanti, un po' indietro, in una specie di ballo di sanvito.
L'avevo detto che lo si faceva strano, però.
 
   

 

fine della guida

 
altre guide
radar
               
 


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