Share
De două ori pe lună, revizuim câteva postări preferate ale cititorilor noștri de-a lungul istoriei Activetuts +. Acest tutorial a fost publicat pentru prima oară în iunie 2009.
În acest tutorial vom crea un ciclu quad run. Animația va fi creată folosind linii simple. Pe parcurs, vom acoperi un pic de teorie a fluxului de lucru și a animației, apoi, aproape de final, vom folosi Motion Tween și ActionScript pentru a muta animalul pe ecran.
Să aruncăm o privire la animația finală pe care vrem să o urmărim:
În primul rând decideți ce doriți să animați (deoarece diferite animale se mișcă în moduri diferite). Voi anima o felină generică, așa că se va mișca într-un fel de leu, ghepard, tigru etc..
Deseori studiez referințele dacă nu știu cum se mișcă subiectul.
Iată câteva site-uri / cărți pe care le-am folosit:
Este util să înțelegeți anatomia animalului, astfel puteți vizualiza mai bine ce se mișcă de fapt sub piele.
Iată câteva cărți despre anatomia animalelor:
Odată ce ați petrecut suficient timp analizând și studiind referințele, este timpul să faceți niște desene. În mod normal, prefer să fac o planificare pe hârtie în primul rând, deși unii oameni preferă să meargă direct pe computer și să înceapă animarea. Nu contează cu adevărat metoda pe care o alegeți, atâta timp cât funcționează pentru dvs..
Apropo, nu trebuie să fii un mare artist care să deseneze. Linile simple sunt destul de bune, atâta timp cât poți înțelege desenele tale. De obicei, voi atrage punctele importante pe care aș vrea să le văd în animație.
Să începem în Flash ...
Modificați dimensiunile și culorile pentru a vă satisface nevoile.
Creați următoarele straturi:
Apoi blocați stratul "acțiuni" deoarece acesta va conține numai codul ActionScript.
FPS pentru animație web variază destul de puțin. Tot drumul de la 4 ~ 48fps. Voi anima la 24 de cadre pe secunda.
Iată câteva alte standarde ...
Pentru a modifica fps-ul, schimbați-l doar în partea de jos a cronologiei sau mergeți la Modify> Document.
Există multe moduri de a anima în Flash, cu toate acestea, voi anima într-un stil mai tradițional prin care voi desena fiecare poza a animației. Voi folosi "Creionul" pentru a desena. Pentru modul "creion", am selectat setarea "Smooth", ceea ce înseamnă că Flash va netezi liniile în timp ce desenez.
Mai întâi selectați stratul "împământat" și trageți o linie dreaptă pentru a reprezenta solul. Apoi blocați stratul. Pământul are o culoare albă (#FFFFFF) și o greutate a cursei de 3.
Du-te în stratul "animal" și începe să desenezi punctele importante. În general, acestea sunt contactele și punctele extreme. Pentru animalele posterioare, am folosit o greutate de 5 stroke. Acum, dacă ați fi planificat acest lucru în avans, puteți să le reprogramați totul în Flash. Dacă doriți, puteți, de asemenea, să scanați în desenele dvs. și să le urmăriți.
Notă: poate doriți să arătați pașii 15 ~ 21 înainte de a începe animarea.
Iată pozițiile pe care le-am tras până acum.
Pentru a extinde cantitatea de cadre pentru stratul "sol", faceți clic dreapta pe cel de-al patrulea cadru și selectați "Inserare cadru". Acest lucru funcționează chiar dacă stratul este "blocat".
Micul punct negru pe fiecare cadru indică o "cheie cheie" în Flash. Pentru a crea un cadru cheie, faceți clic dreapta pe un cadru și selectați "Insert Frameframe" sau mergeți la Insert> Timeline> Keyframe.
Este foarte probabil că veți dori să faceți schimbări după ce ați tras o poză. Pur și simplu selectați "Selection Tool" apoi mutați mouse-ul aproape de linia pe care doriți să o modificați. Când pictograma din partea dreaptă jos a mouse-ului se modifică la o "curbă", faceți clic și trageți linia.
Odată ce sunteți mulțumit de pozițiile principale, puteți începe să jucați cu timpul. Dacă vă testați acum filmul, va fi prea rapid. Introduceți câteva cadre între poziții și jucați cu timpul. Pentru a adăuga un cadru, faceți clic dreapta pe un cadru și selectați "Inserați cadru" sau mergeți la Insert> Timeline> Frame.
Acum, să adăugăm mai multe poziții între ele.
Notă: Nu ezitați să reglați calendarul pentru ca animația să funcționeze în ansamblu.
Putem chiar să o facem mai ușoară prin adăugarea mai multor interfețe.
La animație, mi se pare util să folosesc "pielea de ceapă" și "conturul de piele de pe ceapă". Aceste instrumente pot afișa conținutul pentru o gamă de cadre, înainte și după cadrul curent. De asemenea, puteți mări sau micșora numărul de cadre tragând cercurile de la fiecare capăt.
Unii dintre voi ar putea găsi animație ușor, în timp ce alții nu pot. Prin urmare, am oferit câteva sfaturi care, sperăm, vă vor ajuta în acest proces.
În general, ciclurile de animație se mișcă cu o viteză constantă. Astfel, atunci când animați picioarele, asigurați-vă că diferența dintre distanța fiecărui picior (între cadre) este aproximativ aceeași. Dacă nu, picioarele ar putea părea că alunecă.
Acum să mutăm ciclul de animație pe ecran. În primul rând, totuși, va trebui să convertim cadrele într-un "clip video". Pentru a converti cadre pe cronologia principală la un film clip:
Ar trebui să vă aflați acum în calendarul "ciclului de viață animală". Faceți clic dreapta pe primul cadru și selectați "Inserați cadre".
Acum reveniți la cronologia principală făcând clic pe numele scenei (sub cronologie). Apoi, ștergeți toate cadrele de pe stratul "animal" și trageți "ciclul de alergare animală" din bibliotecă pe scenă.
Folosind Motion Tween, putem muta animalul pe scenă, astfel încât să pară că acesta rulează pe ecran. Distanța pe care doriți să o mutați pentru fiecare cadru trebuie să fie egală cu diferența dintre poziția pentru piciorul plantat (între cadre).
Vom face referire la "diferența" ca la "dX". Iată o formulă care găsește "numărul de cadre" dat fiind faptul că cunoașteți pozițiile inițiale și finale.
numberOfFrames = (finalXPosition - initialXPosition) ÷ dX
Iată un exemplu:
Un animal are o poziție inițială la -50, o valoare dX de 11,5 și o poziție finală la 610. Astfel, cantitatea de cadre între poziția sa inițială și poziția finală este ...
= (610 - -50) ÷ 11,5
= 660 / 11,5
= 57 de cadre (rotunjite la cel mai apropiat număr întreg)
Pentru a crea Motion Tween:
Notă: Cadrul final efectiv este 58 de când cadrul inițial este 1 - numărul de cadre între cadrul inițial și cel final este de 57.
Rezultat:
Este mai ușor să muți animalul utilizând ActionScript, deoarece nu trebuie să vă faceți griji cu privire la formula și tot ce trebuie să știți este dX.
Mai întâi asigurați-vă că aveți un exemplu de "ciclu de alergare pe animale" pe scenă. Dacă nu, mergeți la panoul bibliotecii și trageți unul. Dați-i un nume de instanță "animal_mc", apoi mutați animalul în afara ecranului spre stânga. Apoi selectați cadrul 1 din panoul "Acțiune" și adăugați următorul cod:
AS3:
var dX: Număr = 11,5; // Adaugă o intraFrame la "animal_mc". animal_mc.addEventListener (eveniment.ENTER_FRAME, moveAmimal, false, 0, true); // funcția enterFrame pentru "animal_mc". funcția moveAnimal (evt: Event): void // Poziția x a animalului crește cu dX. evt.target.x + = dX; // Mutați animalul înapoi în stânga atunci când se îndepărtează ecranul. dacă (evt.target.x> stage.stageWidth + evt.target.width) evt.target.x = -evt.target.width;
AS2:
var dX: Număr = 11,5; // Adaugă o intraFrame la "animal_mc". animal_mc.onEnterFrame = function () // Pozitia x a animalului creste cu dX. this._x + = dX; // Mutați animalul înapoi în stânga atunci când se îndepărtează ecranul. dacă (this._x> Stage.width + this._width) this._x = -acest.width;
Rezultat:
Să presupunem că ați vrut animalul să se miște invers (de la dreapta la stânga). Selectați "animal_mc" și mergeți la Modificare> Transformare> Flip orizontal.
Iată noul cod ActionScript:
AS3:
var dX: Număr = 11,5; // Adaugă o intraFrame la "animal_mc". animal_mc.addEventListener (eveniment.ENTER_FRAME, moveAmimal, false, 0, true); // funcția enterFrame pentru "animal_mc". funcția moveAnimal (evt: Event): void // Poziția x a animalului scade cu dX. evt.target.x - = dX; // Deplasați animalul înapoi spre dreapta atunci când se îndepărtează ecranul. în cazul în care (evt.target.x < -evt.target.width) evt.target.x = stage.stageWidth + evt.target.width;
AS2:
var dX: Număr = 11,5; // Adaugă o intraFrame la "animal_mc". animal_mc.onEnterFrame = function () // Pozitia x a animalului scade cu dX. this._x - = dX; // Deplasați animalul înapoi spre dreapta atunci când se îndepărtează ecranul. în cazul în care (this._x < -this._width) this._x = Stage.width + this._width;
Rezultat:
Vă mulțumim pentru că ați citit acest tutorial și sper să vă distrați animând!
Accentsconagua