In questo tutorial ti mostreremo come animare una fantastica esplosione in Flash, che potresti usare per un gioco d'azione cartoon. Ti portiamo dal concepimento al completamento, poi ti mostriamo come esportarlo e come importarlo in altre scene.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Decidi quale tipo di esplosione sarebbe più adatta alla tua scena. È una piccola esplosione? Una bomba atomica? Un Batman anni '60, appariscente, "WHAM"? In questo caso faremo un'esplosione più piccola, ma con l'esperienza potresti fare tutto quello che vuoi.
Una volta che sai cosa vuoi animare, cerca un riferimento. Internet è sorprendente per questo perché puoi semplicemente cercare filmati relativi a ciò che vorresti fare e studiarli attentamente.
Una volta che sei pronto, prendi qualche pezzo di carta e inizia a disegnare la tua esplosione. L'animazione è pianificata attraverso i fotogrammi chiave, che sono generalmente le parti più estreme dell'animazione che raccontano la storia grezza di come qualcosa si muoverà. In questo caso, la prima cosa a cui dovresti pensare è il primo bagliore di luce.
Quindi, disegna le chiavi spiegando come il fumo e la luce escono dalla bomba. Ne vuoi perlomeno uno in cui il fumo esce per primo dalla luce, poi uno quando il fumo è al suo massimo ed estremo, e poi un fotogramma alla fine. Ecco i nostri disegni di keyframe, che illustrano questo processo:
Disegna gli intermezzi per questi fotogrammi. Fondamentalmente, stai ora disegnando tutti i frame che si adattano al centro di questi keyframe. Includeremo i nostri schizzi qui per riferimento.
A questo punto scansioniamo tutti i nostri disegni in modo da poterli rintracciare in Flash.
Apri Flash e modifica le tue impostazioni in base a ciò che sarebbe più adatto per la tua scena attuale. Puoi vedere tutte le tue impostazioni di base nel pannello delle proprietà sul lato destro dello screenshot. Nel nostro caso, lavoreremo a 550x500px e 24 frame al secondo, con uno sfondo bianco.
Successivamente devi importare tutti i tuoi disegni di linea in Flash Pro Biblioteca. La libreria è fondamentalmente un luogo in cui tutti i file che si stanno utilizzando nell'animazione vengono memorizzati per la custodia. Puoi farlo andando a File> Importa> Importa nello stage, quindi selezionando tutti i tuoi disegni e premendo Apri.
Dopo questo appariranno tutti sullo stesso fotogramma chiave, ma se li selezioni tutti, fai clic con il tasto destro del mouse e premi "Distribuisci su livelli", appariranno come livelli separati, tutti sullo stesso fotogramma chiave. Quindi puoi semplicemente trascinare e rilasciare le singole chiavi nelle posizioni giuste, o sui propri livelli su tutto su un livello, a seconda di quale preferisci.
Aggiungi un nuovo livello alla timeline, quindi inizia a disegnare sulle vecchie linee usando lo strumento Linea. Generalmente non ci preoccupiamo di usare lo strumento pennello perché ci sono troppi nodi sulle linee che possono rendere le cose estremamente difficili da modificare in un secondo momento. Ciò che devi sostanzialmente fare è tracciare linee usando lo strumento linea, quindi usare lo strumento selezione per manipolare la curva tra i due punti. (Ulteriori suggerimenti di disegno di Flash sono disponibili qui.)
Una volta che il frame è stato interamente tracciato con lo strumento linea, selezioniamo tutte le linee, quindi vai a Modifica> Forma> Converti linee in riempimenti. Occasionalmente ci saranno anomalie in cui parti della linea spariscono. Se ciò accade, inizia selezionando segmenti più piccoli dell'immagine, quindi eventualmente facendo l'intero grafico insieme. Una volta fatto ciò, puoi modificare la profondità della linea usando lo strumento di selezione e facendo clic e trascinando sui bordi delle linee.
Colorare le linee usando lo strumento secchiello.
Ripeti i passaggi 9-11 fino a quando tutti i fotogrammi sono finiti.
Seleziona tutto su una cornice, premi F8 e trasformalo in un simbolo. Assegnare un nome corretto e apparirà nella libreria per essere utilizzato e riutilizzato in qualsiasi momento. L'organizzazione è molto importante mentre ti stai animando. Le cose possono confondersi rapidamente se non si nomina e si ordina tutto correttamente, quindi si prega di farlo. È anche possibile creare cartelle nella libreria.
Uno strumento importante che può davvero aiutarti ad animare è lo strumento Onion Skin. Con Onion Skinning puoi facilmente visualizzare i fotogrammi più vicini a quello che stai modificando in modo da poter capire subito se un pezzo di animazione funzionerà come pianificato o meno. Il pulsante Onion Skin si trova nella parte inferiore della timeline.
Per visualizzare in anteprima la tua animazione completa in qualsiasi momento, vai a Controllo> Prova filmato> Prova. Precaricherà tutta la tua animazione e poi ti mostrerà esattamente come apparirà una volta esportato.
Quando sei pronto per esportare vai su File> Esporta> Esporta film. Chiamalo come vuoi, scegli .swf dal menu a discesa, quindi premere Salva. A seconda della dimensione della tua animazione potresti dover aspettare un po '.
Esportare immagini .gif è quasi lo stesso. Quando colpisci File> Esporta> Esporta film scegli .gif invece di .swf dal menu a discesa.
Per importare un'esplosione in una scena già esistente, aprite prima entrambe le scene. Quindi, seleziona tutti i fotogrammi dell'animazione esplosione sulla timeline, copia tutti i fotogrammi, quindi premi Ctrl + F8. Apparirà un dialogo. Assegna un nome all'esplosione, quindi salvalo come grafico. Hit OK. Dovrebbe apparire una schermata vuota senza animazione. Quindi fare clic sul primo fotogramma della nuova timeline e incollare tutti i fotogrammi. Dopo questo, premi il pulsante "Scena 1" sotto la timeline, ma sopra la finestra dell'animazione per tornare alla timeline originale. Dopo averlo fatto, l'animazione dovrebbe essere nella libreria. Seleziona la tua animazione nella libreria, fai clic con il tasto destro e copiala. Potrai quindi incollarlo nella libreria di qualsiasi altro FLA che hai aperto.
La creazione di filmati è quasi la stessa di quella descritta nel passaggio precedente. Per creare un filmato, segui esattamente le istruzioni dell'ultimo passaggio, ma seleziona "Filmato" invece di "Grafico" quando raggiungi il dialogo dopo aver premuto Ctrl + F8. La differenza tra un elemento grafico e un clip filmato è che il clip filmato può essere identificato in modo univoco mediante ActionScript, ovvero il linguaggio di codifica utilizzato da Flash per creare giochi e supporti interattivi. Quando il film è compilato, viene creata una copia dalla libreria e trasformata per l'animazione. La copia può essere sfocata, ridimensionata, ecc., Durante il runtime, senza dover creare animazioni separate in fase di progettazione, riducendo così la quantità di memoria del computer necessaria e mantenendo le dimensioni del file SWF piccole.
Per creare un foglio sprite della tua animazione, prima colpisci File> Esporta> Esporta film e selezionare Sequenza PNG per creare un set di grafica PNG, uno per ciascun frame. Dopo averli creati, puoi utilizzare qualsiasi software di modifica delle immagini (come Photoshop) per importarli come batch e quindi copiarli / incollarli tutti in un unico file di immagine più grande.
In alternativa, è possibile ingrandire la scena di Flash, visualizzare ogni fotogramma di animazione in una sola volta e quindi spostare le singole immagini in posizione prima di esportare una singola immagine.
Una terza opzione è utilizzare lo strumento di Keith Peters, SWFSheet.
Speriamo ti sia piaciuto questo tutorial! Se fai un'esplosione con esso, per favore condividilo nei commenti :)