Share
Due volte al mese, rivisitiamo alcuni dei post preferiti dei nostri lettori da tutta la storia di Activetuts +. Questo tutorial è stato pubblicato per la prima volta nel giugno 2009.
In questo tutorial creeremo un ciclo di quad. L'animazione verrà creata utilizzando linee semplici. Lungo la strada copriremo un po 'di flusso di lavoro e teoria dell'animazione, quindi verso la fine utilizzeremo Motion Tween e ActionScript per spostare l'animale sullo schermo.
Diamo un'occhiata all'animazione finale a cui miriamo:
Prima decidi cosa vuoi animare (dato che diversi animali si muovono in modi diversi). Animerò un felino generico, quindi si muoverà in modo simile a un leone, un ghepardo, una tigre, ecc..
Studio spesso i riferimenti se non so come si muove il soggetto.
Ecco alcuni siti / libri che ho usato:
È utile comprendere l'anatomia dell'animale, in questo modo è possibile visualizzare meglio ciò che si sta effettivamente muovendo sotto la pelle.
Ecco alcuni libri sull'anatomia animale:
Una volta che hai passato abbastanza tempo ad analizzare e studiare i riferimenti, è tempo di fare qualche disegno. Normalmente preferisco fare un po 'di pianificazione sulla carta, anche se alcune persone preferiscono andare direttamente al computer e iniziare a animare. Non importa quale metodo scegli, purché funzioni per te.
A proposito, non devi essere un grande artista da disegnare. Le linee semplici sono abbastanza buone, purché tu possa capire i tuoi disegni. Solitamente disegnerò le pose importanti che mi piacerebbe vedere nell'animazione.
Iniziamo con Flash ...
Cambia le dimensioni e i colori in base alle tue esigenze.
Crea i seguenti livelli:
Quindi blocca il livello "azioni" poiché contiene solo codice ActionScript.
Il fps per l'animazione web varia un bel po '. Fino a 4 ~ 48fps. Animerò a 24 fps.
Ecco alcuni altri standard ...
Per modificare il fps, basta cambiarlo nella parte inferiore della timeline, o andare su Modifica> Documento.
Esistono molti modi per animare in Flash, tuttavia animerò in uno stile più tradizionale in cui disegnerò ogni posa dell'animazione. Userò lo "Strumento matita" per disegnare. Per la "Modalità Pencil", ho selezionato l'impostazione "Smooth", che significa che Flash appianerà le linee mentre disegno.
Prima seleziona il livello "terreno" e traccia una linea retta per rappresentare il terreno. Quindi blocca il livello. Il terreno ha un colore del tratto bianco (#FFFFFF) e un peso del tratto di 3.
Entra nel livello "animale" e inizia a disegnare le posizioni importanti. Generalmente sono i contatti e le pose estreme. Per le pose degli animali ho usato un peso di colpo di 5. Ora, se l'hai pianificato in anticipo, puoi semplicemente ridisegnarlo tutto in Flash. Se lo desideri, puoi anche scansionare i tuoi disegni e tracciarli sopra.
Nota: potresti voler osservare i passaggi 15 ~ 21 prima di iniziare l'animazione.
Ecco le pose che ho disegnato finora.
Per aumentare la quantità di fotogrammi per il livello "terreno", fai clic con il pulsante destro del mouse sul quarto fotogramma e seleziona "Inserisci fotogramma". Funziona anche se il livello è "bloccato".
Il piccolo punto nero su ciascun fotogramma indica un "fotogramma chiave" in Flash. Per creare un fotogramma chiave, fai clic con il pulsante destro del mouse su una cornice e seleziona "Inserisci fotogramma chiave" o vai a Inserisci> Linea temporale> Fotogramma chiave.
È molto probabile che vogliate apportare delle modifiche dopo aver disegnato una posa. Basta selezionare lo "Strumento di selezione" e quindi spostare il mouse vicino alla linea che si desidera modificare. Quando l'icona in basso a destra del mouse diventa una "curva", fai clic e trascina la linea.
Una volta che sei soddisfatto delle tue posizioni principali, puoi iniziare a giocare con i tempi. Se testerai il tuo film ora, sarà troppo veloce. Inserisci alcuni fotogrammi tra le pose e gioca con i tempi. Per aggiungere una cornice, fai clic con il pulsante destro del mouse su una cornice e seleziona "Inserisci cornice" o vai a Inserisci> Linea temporale> Cornice.
Ora aggiungiamo altre pose in mezzo.
Nota: Sentiti libero di riadattare i tempi per far funzionare l'animazione nel suo complesso.
Possiamo anche renderlo più agevole aggiungendo altri inbetweens.
Durante l'animazione, trovo utile usare "Onion Skin" e "Onion Skin Outlines". Questi strumenti possono mostrare i contenuti per un intervallo di fotogrammi, prima e dopo il fotogramma corrente. Puoi anche aumentare o diminuire il numero di fotogrammi trascinando i cerchi su ciascuna estremità.
Alcuni di voi potrebbero trovare l'animazione facile mentre altri no. Ho quindi fornito alcuni suggerimenti che, si spera, ti aiuteranno nel processo.
Generalmente, i cicli di animazione si spostano a una velocità costante. Pertanto, quando si animano le gambe, assicurarsi che la differenza tra la distanza di ciascun piede (tra i fotogrammi) sia approssimativamente la stessa. In caso contrario, i piedi potrebbero sembrare scivolosi.
Ora spostiamo il ciclo di animazione sullo schermo. Prima, però, avremo bisogno di convertire i frame in un "Movie Clip". Per convertire i fotogrammi sulla timeline principale in un filmato:
Ora dovresti essere nella timeline "ciclo di conduzione animale". Fai clic con il tasto destro del mouse sul primo fotogramma e seleziona "Incolla fotogrammi".
Ora torna alla timeline principale facendo clic sul nome della scena (sotto la timeline). Quindi cancella tutti i fotogrammi sul livello "animale" e trascina "il ciclo di esecuzione degli animali" dalla libreria sul palco.
Usando Motion Tween possiamo spostare l'animale attraverso il palco così sembra che stia attraversando lo schermo. La distanza che vuoi spostare per ogni fotogramma deve essere uguale alla differenza tra la posizione del piede piantato (tra i fotogrammi).
Faremo riferimento alla "differenza" come "dX". Ecco una formula che trova il "numero di frame" dato che conosci le posizioni iniziali e finali.
numberOfFrames = (finalXPosition - initialXPosition) ÷ dX
Ecco un esempio:
Un animale ha una posizione iniziale a -50, un valore dX di 11,5 e una posizione finale a 610. Quindi la quantità di fotogrammi tra la sua posizione iniziale e la posizione finale è ...
= (610 - -50) ÷ 11,5
= 660 / 11,5
= 57 frame (arrotondati al numero intero più vicino)
Per creare Motion Tween:
Nota: il frame finale effettivo è 58 poiché il frame iniziale è 1 - il numero di frame tra il frame iniziale e finale è 57.
Risultato:
Spostare l'animale con ActionScript è più semplice, poiché non devi preoccuparti della formula e tutto ciò che devi sapere è dX.
Per prima cosa assicurati di avere un'istanza del "ciclo di esecuzione degli animali" sul palco. Altrimenti, vai al pannello della biblioteca e trascinane una. Dagli un nome di istanza "animal_mc", quindi sposta l'animale fuori dallo schermo a sinistra. Quindi seleziona il frame 1 nel pannello "Azione" e aggiungi il seguente codice:
AS3:
var dX: Number = 11.5; // Aggiunge un enterFrame a "animal_mc". animal_mc.addEventListener (Event.ENTER_FRAME, moveAnimal, false, 0, true); // funzione enterFrame per "animal_mc". function moveAnimal (evt: Event): void // La posizione x dell'animale aumenta di dX. evt.target.x + = dX; // Sposta l'animale indietro a sinistra quando si sposta fuori dallo schermo. if (evt.target.x> stage.stageWidth + evt.target.width) evt.target.x = -evt.target.width;
AS2:
var dX: Number = 11.5; // Aggiunge un enterFrame a "animal_mc". animal_mc.onEnterFrame = function () // La posizione x dell'animale aumenta di dX. this._x + = dX; // Sposta l'animale indietro a sinistra quando si sposta fuori dallo schermo. if (this._x> Stage.width + this._width) this._x = -this._width;
Risultato:
Diciamo che volevi che l'animale si muovesse dall'altra parte (da destra a sinistra). Seleziona "animal_mc" e vai a Modifica> Trasforma> Rifletti orizzontalmente.
Ecco il nuovo codice ActionScript:
AS3:
var dX: Number = 11.5; // Aggiunge un enterFrame a "animal_mc". animal_mc.addEventListener (Event.ENTER_FRAME, moveAnimal, false, 0, true); // funzione enterFrame per "animal_mc". function moveAnimal (evt: Event): void // La posizione x dell'animale diminuisce di dX. evt.target.x - = dX; // Sposta l'animale indietro a destra quando si sposta fuori dallo schermo. if (evt.target.x < -evt.target.width) evt.target.x = stage.stageWidth + evt.target.width;
AS2:
var dX: Number = 11.5; // Aggiunge un enterFrame a "animal_mc". animal_mc.onEnterFrame = function () // La posizione x dell'animale diminuisce di dX. this._x - = dX; // Sposta l'animale indietro a destra quando si sposta fuori dallo schermo. if (this._x < -this._width) this._x = Stage.width + this._width;
Risultato:
Grazie per aver letto questo tutorial e spero che ti diverta animare!
Accentsconagua