Tutorial per la creazione di GIF animate
per Age of Empires II
Tutorial per la creazione di GIF animate |
|
| < Precedente < | ^ Inizio ^ | > Successivo > |
Ho creato questo tutorial per aiutare chi ha voglia a creare GIF animate sul tema di Age of Empires II: The Conquerors. Io ne ho già create un po', di GIF, e ogni tanto qualcuno mi chiede come fare (ehi, guardate che a me non me l'ha insegnato nessuno ! ihih). Allora, visto che non ho voglia di spiegarlo tutte le volte, leggete questo tutorial, che ho scritto in base alla mia esperienza personale.
Per creare queste GIF, sono necessari due programmi di facile utilizzo:
Scaricate e installate il programma. Avviate il programma. La prima volta che lo avviate, il programma chiede di creare un backup dei file di Age2 che contengono le interfacce:
Scegliete Sì e aspettate che finisca. A questo punto si carica il programma:
I file di backup sono stati salvati nella cartella Data_X nella cartella del programma:
Adesso create un nuovo progetto. Andate su File > New Project :
Il nuovo progetto può essere salvato ovunque, non è obbligatorio salvarlo nella cartella di Age2, e nemmeno nella cartella di MPS. Per comodità, lo salveremo nella cartella di MPS. Scegliete un nome per il progetto (nell'esempio: "Age II Frames"):
Il nuovo progetto viene salvato in formato AXP. Viene creata una nuova cartella con il nome del progetto (nell'esempio: Age II Frames), nella quale c'è la cartella temp, che potete usare per salvare i vostri file. Se decidete di cancellare queste due cartelle, ogni volta che avvierete il vostro progetto verranno comunque ricreate. Per comodità, salveremo i nostri file nella cartella temp.
Il nuovo progetto non è da salvare, ci serve solo per poter accedere alle interfacce grafiche di Age2. (Il programma in realtà serve per modificare le interfacce di Age2, che non è lo scopo di questo tutorial.) Accediamo al progetto. Assicuratevi che nella finestra Project Explorer sia selezionato By Location:
Aprite la cartella graphics.drs e Table 1:
Vedete un elenco di "risorse": sono le interfacce grafiche degli oggetti di Age2 (unità, eroi, edifici). Prendiamo per esempio la prima: fate doppio clic su Resource #2, che corrisponde a un arciere che attacca.
A destra compare una serie di menù (General, SLP, BMP, Frames) e alcuni pulsanti.
In basso abbiamo una serie di finestre:
Selezioniamo Normal Colors per comodità. Nella parte sinistra della finestra ci sono tre menù:
Se prendiamo il Frame 1, l'arciere è ancora in stato di riposo, ma se prendiamo ad esempio il Frame 4 l'arciere è nel mezzo dell'azione:
L'arciere può essere rivolto anche in un'altra direzione. I Frames precedenti corrispondevano all'arciere di fronte. Se prendiamo ad esempio il Frame 14, l'arciere guarda in basso a sinistra:
Scegliete il Player e la Palette che preferite, poi nel menù Frames selezionate Extract All:
Scegliamo (come detto prima) la cartella temp e clicchiamo su OK:
Adesso abbiamo due menù:
Appena completata l'estrazione, compare un messaggio che conferma l'estrazione riuscita:
I file vengono salvati secondo un particolare codice:
G0000209
La prima lettera corrisponde al tipo di interfaccia (G, S o U).
Le successive 5 cifre corrispondono al numero della risorsa.
Le ultime 2 cifre corrispondono al numero del Frame.
Potete anche lavorare su un solo Frame. In questo caso usate il menù BMP.
Prima di usare quel menù, dovete scegliere l'Editor: selezionate Tools > Select Bitmap Editor
Scegliamo Paint (l'Editor per eccellenza!). Il percorso è "C:\WINDOWS\system32\mspaint.exe"
Il menù BMP contiene alcune voci:
Scegliete il nome del file e cliccate su Salva:
Si apre una finestra con le Palettes da #0 a #255. La #255 è quella di default. Selezionate un'altra Palette (nell'esempio: #83):
Adesso l'arciere non ha più lo sfondo fucsia ma arancione:
C'è anche il menù SLP, ma, come già detto, non è lo scopo di questo tutorial.
Scaricate e installate il programma. Se avete la versione freeware, si aprirà una finestra:
Cliccate su Continue. Il programma dura 30 giorni, dopodichè è necessario registrarlo per continuare a usarlo in modo completo. (N.B.: Le funzioni spiegate in questo tutorial non vengono disabilitate. Che fortuna!)
Creare una GIF animataAdesso creeremo una vera e propria GIF animata!
Per farlo, prendiamo un esempio: cerchiamo di creare un alabardiere messo di fronte che attacca.
Su MPS scegliete, con doppio clic, l'alabardiere che attacca, che corrisponde alla Resource #2787:
Scegliete il colore (nell'esempio: verde) e lo sfondo (nell'esempio: fucsia). Per lo sfondo, di solito uso la Palette 50505, che è praticamente uguale alla 50500 tranne che per lo sfondo, mentre con il Player 6 userei con Mask Color un altro colore, ma che non sia già nell'oggetto (vedremo il perchè).
Estraiamo i Frames che ci interessano: quelli dell'alabardiere di fronte vanno dal #1 al #10 e il tipo è G. Scegliete OK.
Su Animagic selezionate File > Append frames per caricare i Frames :
Scegliete BMP come Tipo file:
Selezionate i file desiderati (cliccare sul primo e poi cliccare sull'ultimo tenendo premuto Shift) e cliccate su Apri:
Nella finestra Frame List compaiono i file caricati e a sinistra l'immagine selezionata:
Adesso salvate la GIF: selezionate File > Save as :
Scegliete un nome e cliccate su Salva :
Bene! Avete creato la vostra prima GIF animata! Così com'è però è davvero brutta e antiestetica (brr):
Vediamo come possiamo migliorarla!
Elaborare e ottimizzare la GIFLa cosa più importante è prima di tutto assicurarsi che i singoli Frames abbiano le stesse dimensioni, altrimenti si hanno effetti devastanti. Abbiate la pazienza di ridimensionare i Frames uno ad uno:
Adesso carichiamo i nuovi Frames e salviamo la GIF. Se avete ancora la GIF precedente caricata, andate prima su File > New per creare la nuova GIF:
Creiamo la nuova GIF come la precedente e salviamola. Ecco il risultato:
Questa va molto meglio! Se notate, vedete che l'alabardiere si sposta da sinistra a destra con un movimento un po' strano... Se siete bravi, potete cercare di sistemare i Frames per farli apparire in una successione che abbia più senso (ad esempio per farlo stare fermo sul posto!). Per semplificarci, ecco come li ho sistemati io:
Potete vedere la vostra GIF in anteprima con i tasti Play (per avviare l'animazione) e Stop (per fermare l'animazione):
Se non vi piace un Frame, potete eliminarlo selezionando Edit > Delete:
Potete anche inserire nuovi Frames con Insert frames:
Scegliete i Frames che volete aggiungere e cliccate su Apri. I Frames aggiunti vengono posti sopra il Frame selezionato (nell'esempio: stavo selezionando il Frame 05):
Potete aggiungere nuovi Frames anche con Append frames. La differenza con Insert frames è che Append frames inserisce i nuovi Frames al fondo:
Adesso però torniamo a questa GIF:
Visto che abbiamo tolto e aggiunto Frames (abbiamo pacioccato un po', diciamo), ricarichiamola. Per aprire una GIF salvata selezionate File > Open:
Visto che abbiamo pacioccato la GIF e non l'abbiamo salvata, compare una finestra di messaggio che ci chiede se la vogliamo salvare. Visto che non ci interessa salvarla, scegliete No:
Adesso scegliete GIF come Tipo file. Scegliete la GIF e cliccate su Apri:
Ecco, abbiamo aperto il file salvato. Se notate, i Frames non hanno più il nome originale, ma sono chiamati con il nome della GIF (nell'esempio: "Esempio_centrato.gif") seguito da .000, .001, .002 e così via:
Adesso creiamo una GIF trasparente. Cliccate sul pulsante Transparent color:
Cliccate sullo sfondo (nell'esempio è fucsia):
Il fucsia è diventato il colore di trasparenza ed è visualizzato nella barra di stato in basso a destra:
Salvate la GIF. Ecco il risultato:
La trasparenza è molto utile, soprattutto in HTML, per evitare inestetismi, ad esempio quando si ha uno sfondo di colore diverso da quello della GIF.
Per capire meglio facciamo un esempio.
Prendiamo un'altra GIF che ho creato (un'unità di fanteria leggera che cammina):
Apparentemente le tre GIF sono identiche. In realtà sono completamente diverse! Ce ne rendiamo conto solo cambiando lo sfondo:
La prima non è trasparente, la seconda è trasparente con lo sfondo bianco, la terza è trasparente con lo sfondo fucsia. Delle tre la seconda è decisamente fuori luogo, perchè è trasparente anche dove non dovrebbe (sullo scudo, sull'elmo, dove c'è il bianco), mentre le altre vanno bene, dipende dall'uso che se ne vuol fare.
Modificare la velocitàTorniamo alla nostra GIF:
Non vi piace perchè è troppo lenta? Cliccate sul pulsante Frame rate:
Vi compare una finestra: a sinistra avete due riquadri, a destra avete l'elenco dei Frames. Consideriamo il riquadro All Frames:
Indica il numero di millisecondi che ogni Frame deve durare: più è basso e più veloce è la GIF. Ecco ad esempio la GIF con Frame rate "100":
Adesso consideriamo il riquadro Selected Frames.
Indica quante volte un singolo Frame deve ripetersi (praticamente, quali Frames devono durare di più). Ad esempio ripetiamo il Frame .005 per 3 volte:
Ecco il risultato:
È possibile ripetere anche più Frames. Ad esempio ripetiamo gli ultimi 5 Frames:
I primi 5 dureranno 100 millisecondi, mentre gli ultimi 5 dureranno 3 volte tanto, cioè 300 millisecondi. Ecco il risultato:
Ora siete in grado di creare le vostre GIF! Sbizzarritevi! 
| < Precedente < | ^ Inizio ^ | > Successivo > |
Qualcuno si chiederà come fare a unire due GIF (ad esempio due unità che combattono). Ci sono diversi metodi:
Ho fatto anche lo sforzo di unirle (la prima ha 15 Frames, la seconda 20):
Passiamo all'HTML. Cliccate qui e scaricate il file. Estraete il contenuto del file. Nel file multipleGIF.htm sono posizionate le due GIF. Il file fa riferimento al file multipleGIF.css, che contiene le informazioni riguardo la posizione delle due GIF: "div1" è l'abitante del villaggio, "div2" è il lupo. Provate a cambiare le coordinate (top e left) e risalvate il file. Ricaricate il file HTML e le GIF si saranno spostate! Questo è il metodo che uso per provare prima di montare insieme più GIF.
Questo tutorial è finito, spero che vi sia servito.
In caso di dubbi contattatemi: anora-toxica_jyk.uc.dt@hotmail.com