Animare un'esplosione di cartoni animati con Flash Professional - Basix

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.


Anteprima del risultato finale

Diamo un'occhiata al risultato finale su cui lavoreremo:


Passo 1: Scegli il tipo di esplosione che desideri

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.


Passaggio 2: cerca riferimenti

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.


Passaggio 3: iniziare a disegnare

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.


Passaggio 4: Disegna tutti i fotogrammi chiave

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:


Passaggio 5: Disegna tutti i messaggi di posta elettronica

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.


Passaggio 6: scansiona i tuoi disegni

A questo punto scansioniamo tutti i nostri disegni in modo da poterli rintracciare in Flash.


Passaggio 7: modificare le impostazioni di base del 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.


Passaggio 8: importa i tuoi disegni

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.


Passaggio 9: Disegna le tue linee iniziali

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.)


Passaggio 10: Converti linee in riempimenti

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.


Step 11: Colora i tuoi disegni

Colorare le linee usando lo strumento secchiello.


Passaggio 12: Completa tutti i fotogrammi dell'animazione

Ripeti i passaggi 9-11 fino a quando tutti i fotogrammi sono finiti.


Passaggio 13: organizza la tua animazione

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.


Step 14: Onion Skinning

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.


Passaggio 15: Anteprima dell'animazione

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.


Passaggio 16: esporta il film

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 '.


Passaggio 17: Esportare come GIF

Esportare immagini .gif è quasi lo stesso. Quando colpisci File> Esporta> Esporta film scegli .gif invece di .swf dal menu a discesa.


Passaggio 18: importa la tua animazione in una scena esistente

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.


Passaggio 19: creare un filmato

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.


Passaggio 20: creare un foglio di sprite

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.


clicca per ingrandire.

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 :)