Guide animazione 2D - animazione camminata

Camminata.
Omaggio a Keysoul.it

(Il link volutamente non funziona, come già nel caso del precedente omaggio)

Da mesi la remeno (tergiverso, perdo tempo, cerco scuse, mi invento alibi improbabili ... me la remeno infatti) per non affrontare il fastidio di spiegare da dove sono usciti i disegni, il perchè del rifare qualcosa che esiste, il come mai non hai altre idee possibilmente tue, e così via.

Poi, visto che Keysoul.it ha chiuso, ho pensato di mettere in linea l'animazione di una camminata, presa di sana pianta da una serie di immagini ricavate da quel sito.

Solo che c'ho messo più tempo del previsto: qualche problemino (con l'età tendo sempre più a minimizzare) di troppo che mi ha costretto ... vabbuò, ora son solo ricordi.

Ma con i ricordi, come per la gestione delle cose rimandate, non si sa mai come si va a finire, tendono a mischiarsi, ricordi, rimpianti, sensazioni, frammenti di futuro e di passato che si ingarbugliano.
Che io di alpini e di marcette militari non ne sapevo una beneamata.
Pur essendo vissuto fra vecchie foto della seconda, tanta gente in divisa con la penna sul cappello, fotografie smangiate dal tempo e consunte dall'uso e da antiche abitudini di incollarle e di rappezzarle col nastro adesivo, facce ignote ma famigliari, che quello che ti capita da bambino poi te lo porti a spasso per tutta la vita, e m'è capitato di sfogliare vecchie foto alla ricerca del viso di mio padre mischiato (anche lui) in quelle ammucchiate che sono le foto di gruppo, che finisce che uno ci disegna un cerchietto intorno al viso, con tanto di freccina, per distinguerlo velocemente la prossima volta, e poi, se mai tu volessi riprodurre o tirar su con lo scanner la foto, ti tocca rincretinire a tirar via i cerchietti rossi e le freccine blu senza cancellare troppo del resto della foto.
Che però i ricordi siano fetenti l'ho scoperto un paio d'anni fa, quando a Torino sono arrivati gli alpini per il raduno annuale. Che mio padre c'era anche andato un due o tre volte in passato, quando si radunavano nelle vicinanze del Toro, ma io mai visti e mai pensato di andarci, che era roba loro, d'altri tempi, di un passato che mi sfiorava solo nei ricordi di quella massa di foto (tutte in bianco-e-nero, naturellement).
Che manco sapevo più dove fossero dall'ultima volta che ci si era messi, io e mia sorella, a cercar di risistemarle.
Ma poi capita che vengono al Toro, che l'avevo saputo dal tiggì3, ma quasi per caso, che mi interessava un'altra notizia locale, che poi non han dato, ma non doveva poi essere così importante visto che non mi ricordo quale fosse.
Che poi, quasi a farlo apposta, s'erano sistemati nei dintorni di casa, e nei giorni precedenti la sfilata c'erano le bande che provavano le marcette, e finisce che la cosa mi tira su da non so dove una specie di magone, che però mi piace, è quel tipo d'allegria triste che ti viene quando stai finendo il gelato e ti spiace che sia quasi alla fine, ma sei contento che ti puoi lavare le mani tutte impiastricciate di roba appiccicosa...

Finisce che ci vado anche io.
Dico a mia moglie: che ne dici se ...? E lei subito: si, dai, che a lei piace camminare, dalle da camminare, solo che poi vien fuori che le scarpe sono scomode, troppo strette o troppo larghe che se le perde, ma tu vedi che sono dimagrita? Figurati, anche nei piedi. Ma sarà mica il caldo che fa gonfiare le punte?
Che insomma qualcosa che non va lei lo trova sempre.

Finisce che ci andiamo. E per tutto il giorno. Sotto il sole, a sudare tutti contenti, che la sera le marcette me l'ero imparate tutte, comprese le parole.
Che per tutto il mese poi non ho fatto altro che fischiettarle, tanto che lei ha finito col dire: o la pianti o divorzio. Che io ci ho anche pensato su un po'.

Finisce che l'ho piantata.
Non lei, l'ho piantata di fischiare.
Però qui ce l'ho messa, la marcetta.
Trattasi della marcia dei coscritti piemontesi, tutta in piemontese.

Ma non su questa pagina, l'ho messa nell'animazione ingrandita, quella che potete vedere cliccando sulla lente in alto a destra.


1
	Qui sotto ci sono 12 immagini di altrettanti fotogrammi che rappresentano la base di un ciclo di camminata. Ho sistemato ogni fotogramma successivo al di sopra del fotogramma precedente (ridotto in monocromatico per rendere più visibili le differenze di disegno). Si tratta di ripassarle utilizzando il lazo e poi bordare di nero i profili essenziali. volendo far prima si può ricorrere alla duplicazione dell'ultimo livello per poi modificare le sole parti che differiscono dal livello-fotogramma precedente. Per fare in questo modo è consigliabile applicare il bordino nero solo alla fine delle manipolazioni. Si può anche (ed è quel che ho fatto io) realizzare i fotogrammi utilizzando le parti del disegno separate fra di loro (due livelli per il braccio destro, due livelli per il braccio sinistro, etc) per poi modificare velocemente le posizioni ruotando le parti e risistemandole al posto loro e, quando occorre, modificare un po' il disegno togliendo gli eccessi ed aggiungendo le zone mancanti. Detto così ci capisco poco anche io, quindi l'unico modo che ho per darci un taglio è sistemare i 12 fotogrammi in posizione di scarico: cliccare sul bottoncino dorato in alto a sinistra di questa pagina e scaricate lo zip con le 12 immagini. Che fate prima voi e soprattutto faccio prima anch'io. Quasi mi scordavo: il risultato dei 12 fotogrammi, sbattuto su ImageReady, è quello che si vede nell'immaginetta qui sotto a destra. Altro aspetto da non trascurare: dal settimo fotogramma in poi il movimento praticamente è identico a quello dei fotogrammi precedenti: 1 = 7, 2 = 8, etc. L'unica differenza è che le braccia e le gambe si invertono di posizione rispetto al busto: nel fotogramma 1 il braccio nascosto è alla destra del busto mentre nel fotogramma 7 è alla sinistra del busto, e così per l'altro braccio e per le gambe. A non essere pignoli basterebbero i primi 6 fotogrammi per realizzare una camminatina alla buona: trovate un esempio del risultato alla destra delle immagini 5 - 6.	Photoshop
1-2

3-4

5-6

7-8

9-10

11-12

	Finito di disegnare ho salvato le 12 immagini come png 24 trasparente (ricordarsi di oscurare lo sfondo): co01.png, co02.png ... Poi mi sono dato da fare per trovare uno sfondo del Toro che fosse adatto a fare da sfondo, che uno sfondo se non fa da sfondo direi che fa uno sfondone. Non lo metto in rete, uno sfondo vale l'altro, qui tutta l'animazione sta nella camminata. Che ho realizzato passando a SwishMax.


2
	Definisco un filmato di 1280x720 px, 24 ftg/sec, sfondo nero. Importo l'immagine di sfondo e la sistemo in centro. Importo le 12 immagini della camminata, lasciandole dove finiscono automaticamente, ovvero in mezzo al filmato. Poi le animo. Per prima cosa definisco "scompari" (o remove) le immagini a partire dalla seconda (co02.png) Doppio clic sul fotogramma 1 dell'immagine 1. Clic col tasto destro del mouse sul fotogramma 3 dell'immagine co01.png: la definisco "scompari" (o remove) Questo fa si che per i primi 2 fotogrammi si vedrà la sola immagine co01.png, poi tutto sparisce. Copio il contenuto della linea temporale dell'immagine co01.png sui fotogrammi 1-2-3. Incollo la copia sulla linea temporale dell'immagine co02.png a partire dal fotogramma 3. Incollo la copia sulla linea temporale dell'immagine co03.png a partire dal fotogramma 5. incollo ... Si fa prima a guardare l'immagine qui sotto: c'è tutta la storia per le 12 immagini	Swish Max

3
	Seleziono le 12 immagini e le raggruppo come "clip filmato" (o sprite), che rinomino: _1 Riduco la dimsnsione al 50%. Sposto lo sprite in posizione -100 X, 374 e rotti Y: che sia fuori dallo schermo.

4
	Camminatina. Doppio clic sulla linea temporale dello sprite al fotogramma 240. Definisco (scrivo proprio il numero per evitare di spostarmi sulla verticale) la posizione d'arrivo a 1400 X.

45
	1. Copio lo sprite _1 (clic e tener premuto sull'icona dello sprite con il tasto destro, poi scegliere l'opzione Copia oggetto - Copy Object) e lo incollo in posizione (clic e tener premuto in un punto qualsiasi dello schermo con il tasto destro, poi scegliere l'opzione Incolla in posizione - Paste in place) 2. Rinomino la copia dello sprite _1 con il nome _2 3. Sposto sulla linea temporale dello sprite _2 il rettangolo che definisce il movimento orizzontale, facendolo iniziare al fotogramma 25. (clic e tener premuto in un punto qualsiasi del rettangolo sulla linea temporare e spostare il mouse verso destra, fin dove occorre) Perchè il fotogramma 25? L'intento è di far coincidere il "passo" fra i due omini. Lo sprite di base contiene 24 fotogrammi, quindi ho pensato che al 25° fotogramma l'azione del primo sprite sarebbe ricominciata allo stesso modo dell'azione del secondo sprite. Poi ho fatto una prova, che un conto è la grammatica, altro conto la pratica, vero?

6
	Ora facciamo le cose in grande. Copio ed incollo in posizione lo sprite _2 per 10 volte e rinomino gli sprite ottenuti proseguendo nella numerazione: _3, _4, _5 ... _12. Sposto, sulla linea temporale, l'animazione sistemandone la partenza di 24 fotogrammi rispetto alla partenza dello sprite sottostante. L'animazione qui sotto riporta i valori di partenza dei singoli sprite e se ne vede anche il risultato. Vediamo anche oltre allo schermo, ma poi non succede in pratica. trattandosi di un filmato flash quello parte subito. Fate conto che l'animazione termina quando l'ultimo omino si impila fuori schermo a destra e ricomincia con la piazza vuota e con gli omini che compaiono a sinistra.

7
	Si tratta a questo punto di fare in modo che la camminata-sfilata continui per ore ed ore ed ore. E non è che possiamo aggiungere altri sprite per allungare il brodo ... ops la fila. Meglio approfittare di quelli presenti per farli ripartire una volta che sono arrivati alla fine del percorso. Poco importa se si forma qualche buco fra gli omini, in fondo è un raduno di ex alpini, che sono si bravi a marciare, ma con l'età e le bevute qualcuno può anche perdere il passo, no? Ho fatto in questo modo, molto semplice. Fatti 2 conti lo sprite continua a marciare sempre con un ciclo di 24 fotogrammi. Lasciando un buco di 23 e sistemando un keyframe (un rettangolino) di un fotogramma che riporti in posizione iniziale (- 100 X) lo sprite, possiamo, sul 25° fotogramma a partire dalla fine della camminata, farlo riprendere a camminare a sinistra dello schermo, come all'inizio del filmato. Detto fatto, e sembra proprio funzionare. E soprattutto tiene il passo, la cadenza. Linea temporale sprite _1. Doppio clic sul fotogramma 263. Si forma il rettangolo lungo 23 fotogrammi. Questo per il buco. Doppio clic sul fotogramma 264. Si forma il rettangolo lungo un solo fotogramma. Questo serve per rimandare l'omino in posizione di partenza. Sul pannello trasformazione faccio che scrivere il valore della posizione X: -100. Copio il rettangolo di animazione che va dal fotogramma 1 al fotogramma 240. Mi porto sul fotogramma 265 ed incollo. Ora l'animazione prosegue fino al fotogramma 504.

8
	Copio i tre pezzi di animazione (dal fotogramma 241 al fotogramma 504) e li incollo sulla linea temporale degli altri sprite, partendo dal fotogramma successivo alla fine dell'animazione presente prima di incollarli. E così abbiamo chiuso un cerchio, ma ... Ma per consentire che tutto si svolga all'infinito faccio qualcosa che parrà strano: seleziono, uno alla volta, gli sprite e li raggruppo, uno solo per volta (cioè un gruppo per ogni sprite) come "clip filmato". In questo modo ci si garantisce che il loop prosegua anche se inseriremo altre cosette che renderebbero complicata la gestione del filmato finale. Cerco di spiegarmi: prendiamo ad esempio lo sprite _1. Quando arriveremo al fotogramma 504 ci saranno altri sprite che faranno proseguire il filmato per altri fotogrammi durante i quali il povero sprite _1 se ne starà lì fermo ad aspettare che l'ultimo del carro arrivi alla fine ed il filmato possa ricominciare. E questo poichè l'animazione è posta sulla timeline dello sprite. Ma raggruppando come sprite lo sprite _1 comprenderemo nel gruppo anche la sua animazione, ed il nuovo sprite, senza i vincoli di una time line contenente effetti di animazione, arrivato al termine dell'azione (ftg 504) non si fermerà ma ricomincerà subito, ripartendo dlal'inizio. Credo sia chiaro come un gatto nero di notte, ma che posso farci, più che provare?

	Bene. Si sono anche formati plotoncini casuali, elementi che camminano più staccati, proprio come in una vera marcia. O almeno così mi pare. Distanze variabili, ma tutti vanno al passo, sono cadenzati. Ovviamente perdendoci più tempo si potrebbe avere tutta la fila ininterrotta, ma sarebbe anche un po' monotono.
9
	Per animare un po' la scena ho poi aggiunto altri omini che danno un senso di profondità al filmato. Si fa così: Copio ed incollo in posizione uno sprite a caso. Diciamo lo sprite _1. Lo separo (Ungroup). In questo modo ricompare lo sprite _1 con la sua bella timeline contenente l'animazione. Cancello il contenuto della timeline. Lo sprite così lo vediamo in posizione iniziale (-100 X). Lo rinomino _13. Poi lo ingrandisco. L'originale era al 50%, questo lo porto al 60% che è come dire che lo sposto più vicino a noi che lo guardiamo (sarebbe l'asse Z, la profondità, il 3D per dirla papale papale). Lo porto più a sinistra (è più grosso, deve stare fuori schermo all'inizio) a -190 X. Lo abbasso un po' (è più vicino a noi, quindi lo dovremmo vedere più in basso) a 440 Y. Se è più vicino, il tratto di strada che noi vediamo (fate conto che è come fossimo davanti ad una finestra che limita il campo visivo) dovrebbe essere più corto, quindi ... ... doppio clic all'altezza del fotogramma 225. Scrivo 1480 come valore della X (è più grosso, deve andare fuori schermo). Questo omino è un battitore libero, non deve stare in colonna con altri omini pari suoi (nel senso di dimensione), quindi non mi devo preoccupare di allungare il brodo come abbiamo fatto con i primi 12 sprites. Ci si limita a dargli la libertà di loop: Lo raggruppo in uno sprite (clip filmato): ciclerà all'infinito, porello. Possiamo poi aggiungere altri personaggi, sempre più in primo piano, e sempre con gli accorgimenti usati per lo sprite _13: più sono grossi, più passano velocemente sullo schermo e sempre più in basso.
	Non sto a dare indicazioni per questi ultimi, fate a piacer vostro, con una sola accortezza: Se li raggruppate in uno sprite (uno per ogni sprite, mi raccomando) cicleranno a prescindere dal ciclo altrui. Se li lasciate non raggruppati (= lo sprite con la sua bella timeline visibile) sarà quello con la timeline più lunga a determinare l'attesa di quelli non raggruppati prima di riciclare e quindi di ricomparire sullo schermo. Mettiamola così: se sono raggruppati (uno per ogni gruppo, mi ri-raccomando) determineranno un ciclo più casuale che se non lo sono. Ma sono finezze: in tutto quel bordello di omini che sgambettano nessuno si accorgerà se qualcosa si ripete o no. Fra le altre cose una di certo vi potrà capitare: che alcuni perdano il passo, che vadano fuori tempo: a me è successo ma ho pensato che, tutto sommato, fosse anche positivo e meno monotono.

	Bene. Siam giunti al fin della licenza, e io tronco () Che tutto sto camminare mi ha anche un po' stancato. Mica ho più l'età per 'ste robe, dai. Alla prox. () Citazione demenziale del Cyrano del buon Edmond Rostand.