Come contribuire: animare le illustazioni
Per animare le illustrazioni è necessario dividerle nei vari "pezzi" da far muovere: se nell'illustrazione è presente Dante, o un animale, o un qualunque personaggio che si vuole far muovere, bisogna cancellare tutta l'immagine tranne il personaggio, e salvare l'immagine in formato PNG usando come colore trasparente quello usato per cancellare la parte di immagine che non interessa.
Prendiamo ad esempio questa illustrazione:
Al centro c'è un uccello che vola:
Se vogliamo farlo muovere, dovremo scontornarlo...
e cancellare completamente tutto il resto dell'immagine, usando un colore qualunque che non sia il bianco o il nero:
L'immagine andrà poi salvata specificando che il colore usato per la cancellazione deve essere considerato trasparente, ad esempio salvando l'immagine con IfranView, che al momento del salvataggio chiede di selezionare il colore trasparente:
L'operazione va ripetuta per tutti gli oggetti in movimento.
Da notare che il movimento può essere usato non solo per animare i personaggi, ma anche per dare profondità all'immagine: facendo infatti muovere a velocità diverse aree dell'illustrazioni che corrispondono a oggetti a distanze diverse dall'osservatore, si avrà un effetto di "profondità simulata":
In questa illustrazione sono stati aggiunti 5 piani di profondità, evidenziati nell'immagine che segue con 5 toni di grigio:
Dante e Virgilio vengono mosso davanti al livello 2 (rocce di sfondo) ma dietro al livello 4 (albero con rovi), per cui sembrano muoversi sul terreno e scomparire dietro i rami neri del cespuglio.
E' importante tenere presente che poichè nelle illustrazioni originali l'informazione sulla profondità di immagine non è presente, in tali illustrazioni mancano delle parti di immagine, che vanno aggiunte a mano. Ad esempio, per far muovere l'uccello di cui sopra non è sufficiente scontornarlo: nella parte di immagine che costituisce lo sfondo, infatti, l'uccello rimarrebbe presente, per cui limitandosi a spostare l'uccello sull'immagine di sfondo, comparirebbe un "clone" dell'uccello, fermo nella posizione originale:
L'immagine su cui deve muoversi l'uccello va quindi modificata per eliminare l' "ombra" dell'uccello stesso. Chiaramente però non si può semplicemente "cancellarlo" nel senso tradizionale del termine, altrimenti succederebbe questo:
Bisogna invece sostituirlo con i colori e gli elementi che circondano l'uccello, come se effettivamente non fosse mai stato disegnato, così:
Per lo stesso motivo, quando si muove un'area dell'illustrazione per dare il senso di profondità, bisogna tenere a mente che la zona di sfondo che andrà ad essere scoperta dallo spostamento dell'area in primo piano, non è stata mai disegnata dall'autore dell'illustrazione; si può quindi ricorrere allo stratagemma di cui sopra, disegnando la parte mancante, oppure, se l'area da spostare è molto grande, far partire il suo spostamento da una posizione iniziale diversa da quella originale.
Anche qui un'immagine vale più di mille parole. Partendo sempre dall'immagine precedente:
Dovendo muovere tutta l'area di destra, si andrebbe a scoprire il bianco della parte di immagine inesistente:
Nel caso di sinistra, l'area di immagine viene mossa, nell'animazione, verso destra senza che siano state apportate correzioni all'illustrazione originale, quindi si andrà a scoprire il bianco dell'immagine, cioè l'area che non è mai stata disegnata. Piuttosto che disegnare a mano tutta la zona bianca, cosa che potrebbe risultare difficile o impossibile per aree grandi, si può procedere invece come illustrato nella parte destra dell'immagine: l'area da spostare verso destra viene preliminarmente spostata di qualche pixel a sinistra, prima di iniziare lo spostamento; in questo modo, quando quest'area si muoverà verso destra andrà a scoprire una parte di immagine pre-esistente anzichè il bianco.
Questo offest iniziale viene indicato nel file move.js:
Facendo quanto sopra, cioè spostando "in anticipo" alcune aree dell'immagine più verso il centro prima dell'inizio dell'animazione, ovviamente ne risentiranno i bordi dell'immagine, in cui compariranno delle aree bianche; bisognerà allora sovrapporre al lato destro dell'illustrazione un'immagine consistente in un rettangolo verticale bianco; qui sotto è rappresentato in grigio per evidenziarlo:
In realtà conviene rifilare tuti e 4 i bordi in una volta sola, e piuttosto che sovrapporre 4 rettangoli distinti, conviene sovrapporre un'unica grande cornice; per ralizzare materialmente tale cornice bisogna creare un rettangolo grande quanto l'illustrazione originale, e all'interno di esso colorare col colore trasparente un rettangolo un po' più stretto dell'illustrazione originale; sovrapponendolo all'illustrazione, si oterrà la rifilatura dei bord; il processo è illustrato qui sotto, con la cornice colorata in grigio anzichè in bianco, per chiarezza:
Il risultato finale:
In realtà la creazione dell'animazione gif finale è ancora un po' rozza, per cui si è reso necessario elaborarla ulteriormente: utilizzando il programma Ulead Gif animator, antichissimo e non più supportato da anni ma ancora estremamente valido, l'immagine è stata ritagliata e rimpicciolita per adattarle a questa pagina.