Share
Cheia animației, ca multe lucruri, este o abordare logică și un flux de lucru bun. În acest tut, Hasier vă duce prin planificarea, schițarea și perfecționarea animației pentru a vă oferi mișcarea pe care o căutați.
În timpul acestui tutorial vom crea următoarea animație:
Acest tutorial va fi împărțit în 4 părți. În fiecare parte vom trece peste diferitele etape în crearea unei animații de la început până la sfârșit. Acestea sunt părțile tutorialului și conținutul acestora:
În prima parte a acestui tutorial, vom trece peste lucrurile pe care trebuie să le cunoașteți înainte de a începe să animați. Nu treceți cu vederea aceste lucruri; planificarea animației înainte de a sări direct în Flash vă va economisi mult timp mai târziu.
Primul pas în crearea unei animații este, desigur, să decideți ce doriți să animați. În acest tutorial, vom anima acest lucru:
E un caracter spion simplu pe care l-am făcut până acum. Pentru că este atât de simplu, este ușor să-l animați. Dacă aceasta este prima dată când încerci să animi, îți sugerez să-mi dai spionul înainte să treci la caractere mai complexe.
Deci, apucați o bucată de hârtie și trageți spionul de câteva ori. Cadre cu animație cadru înseamnă desenarea aceluiași lucru în mod repetat, astfel încât ar trebui să vă simțiți confortabil desenarea personajului. Iată cum îl trag:
Odată ce vă cunoașteți caracterul în afară, este timpul să începeți să vă gândiți la aducerea lui la viață. Animațiile sunt planificate prin cadre cheie (numit si miniaturi). În acest tutorial mă voi referi la ele ca la desene-cheie pentru a nu le confunda cu cadrele cheie ale Flash. Deci, ce este un desen cheie? Desenele cheie sunt desenele care spun povestea și definesc mișcarea într-o animație. Cu alte cuvinte, ele reprezintă o modalitate de a rezuma animația în câteva desene. Exemplul de mai jos arată cum o ușoară diferență într-un desen cheie poate avea un impact mare asupra animației finale:
Un desen cheie trebuie planificat la începutul și la sfârșitul unei mișcări și de fiecare dată când în animație survine o schimbare de direcție sau de ritm. Așadar, aruncați o privire la animația finală și schițați desenele cheie ținând cont de aceste indicii. Ar trebui să pară așa:
Când ați ajuns să atârnați de desenarea personajului și să planificați animația, este timpul să treceți la Flash.
Începeți prin a deschide un nou document Flash. Implicit 12 fps este prea mic pentru o animație, deci pentru acest tutorial vom folosi 15 fps.
Denumiți stratul actual "BG". Selectați o culoare deschisă și schița fundalul de bază al scenei, în cazul nostru, o cameră. Nu atrageți nimic fantezist, doar elementele necesare pentru a crea animația aspră: pereții, podeaua și fereastra.
Pentru a schița în Flash, de obicei, aleg o mărime mare a periei, cu sensibilitate la presiune și aduc netezirea în jur de 10. Aceasta îmi dă mai multă libertate de a schița, deoarece pot varia grosimea cursei cât vreau și am mai mult control asupra unghiuri datorită netezirii scăzute. Vă sugerez să utilizați aceleași setări ca și mine. Nu-ți face griji dacă stroke-ul tău arată neclar; putem rezolva asta la sfârșit.
Acum vom recrea desenele cheie pe care le-am făcut anterior. Creați un strat nou și denumiți-l ca "Spion". În primul cadru, schițați primul desen cheie pe care l-ați planificat înainte. Din nou, desenați doar formele de bază. Ar trebui să arate ceva de genul:
Introduceți o cheie cheie (F7) în stratul "Spion". Activați ceapa prin jupuire, astfel încât să puteți vedea cadrul anterior. Cu primul desen ca ghid, trageți al doilea desen cheie.
Repetați același proces pentru restul desenelor cheie. Când ați terminat, ar trebui să aveți cinci cadre cheie cu cinci desene diferite.
Acum ajungem la cel mai important (și probabil cel mai dificil) pas în crearea unei animații: sincronizare; calculând timpul dintre desenele noastre cheie. Ceea ce facem acum va determina întreaga animație, deci este important să se facă bine.
Selectați primul cadru din stratul "Spy" și adăugați câteva cadre cheie necompletate (F7) între primul și cel de-al doilea desen cheie. Faceți același lucru cu celelalte cadre cheie. Aceasta ar trebui să arate cronologia dvs.:
Testați filmul (Ctrl + Enter). După cum puteți vedea, calendarul este greșit, așa că reveniți în .fla pentru ao rezolva. Dacă timpul dintre două desene cheie este prea scurt, adăugați mai multe cadre cheie necompletate între ele; dacă timpul este prea lung, ștergeți câteva cadre cheie.
După ce ați făcut un mic joc, testați filmul pentru a vedea dacă arată mai bine decât înainte. Dacă încă nu pare corect, aplicați mai multe modificări. Este greu de imaginat animația cu doar cinci cadre cheie, așa că nu vă faceți griji dacă nu este perfectă în acest stadiu; putem modifica calendarul din nou mai târziu. Până acum, acesta este rezultatul meu:
Miezul animației noastre este acum complet, dar mai sunt încă multe de făcut. În primul rând, trebuie să adăugăm mai multe cadre cheie pentru a face animația să pară netedă. Desenele care apar între desenele cheie pentru a finaliza animația sunt numite în mod corespunzător intersecții. Desenarea inbetweens este destul de ușor, așa cum am făcut deja cea mai mare parte a lucrării atunci când am făcut desene-cheie.
Selectați un cadru cheie între primele două desene cheie și activați jupuirea cepei. Cu două desene ca referință, trageți spionul la jumătatea distanței dintre desenele cheie din cadrul curent.
Repetați procesul. Desenați un nou cadru cheie între fiecare desen cheie. Ar trebui să aveți nouă cadre cheie.
Testați filmul. Dacă calendarul încă nu arată bine, acum este momentul să îl schimbăm. Așa cum am spus mai înainte, calendarul este cea mai importantă parte din animație, deci luați-vă timpul să vă asigurați că are dreptate. După ce ați modificat cadrele cheie, animația ar trebui să arate astfel:
Nu mai este nimic de explicat. Continuați să adăugați conexiuni între interfețe pentru a netezi animația până când nu mai rămân alte cadre cheie. Testați-vă filmul pentru a vedea dacă ceva trebuie rezolvat. Acesta a fost rezultatul meu până în această etapă:
Animația brutală este acum terminată. În această parte a tutorialului vom lucra la desenarea versiunii curate a personajului nostru.
Creați un dosar nou și denumiți-l "dur". Rotiți straturile "BG" și "Spy" în straturi de ghidare, astfel încât acestea să nu fie afișate la publicarea filmului. Blocați ambele straturi și puneți-le în dosar. Creați un nou strat și denumiți din nou "Spion". În acest strat vom trasa versiunea curată a personajului nostru.
Modificați culoarea de umplere în negru și setați setările periei așa cum este descris în pasul 4. Acum desprindeți desenele făcute de la început. Utilizați-le ca referință pentru a atrage spionul pe desenul brut.
Faceți același lucru pentru toate cadrele cheie. Puteți utiliza jupuirea cu ceapă pentru a utiliza cadrul anterior ca referință.
Lucrurile sunt cu siguranță mult mai curate, dar încă nu sunt suficient de curate. Priviti cu atentie desenele curate. Veți observa că loviturile sunt zdrobite. Le-am putea lăsa ca și în cazul acestei animații, dar dacă lucrăm la un proiect mai amplu, ar trebui să le optimizăm. Optimizarea este o metodă pe care Flash o folosește pentru a rafina o formă prin reducerea numărului de curbe necesare pentru a defini forma.
Pentru a optimiza cursele din animație, selectați desenele din toate cadrele (cu "Editați mai multe cadre") și faceți clic pe Modificare> Formă> Optimizare (Crt + Alt + Shift + C). Caseta de dialog Optimizați curbe se va deschide. Puteți regla cantitatea de netezire cu glisorul. Bifați caseta "Utilizează mai multe treceri". Aceasta va alinia forma in mod repetat pana cand nu se poate obtine o netezire fara a afecta forma. Când faceți clic pe OK, va apărea mesajul care indică procentajul reducerii curbei.
Opriți "editați mai multe cadre" și aruncați o privire la desenele dvs. Ele sunt mult mai fluide acum, dar șansele sunt că optimizarea a modificat (cel puțin ușor) formele. Puteți să le editați cu ajutorul instrumentului Free Transform Tool (Q). Asigurați-vă că toate desenele sunt închise și nu au goluri.
Acum este momentul să dați spionului o culoare. Așa că apucați Bucket Paint (K) și umpleți-l! Am folosit # 000033 pentru cap, # 010243 pentru corp, și #FFFFFF pentru ochi.
Notă: dacă dați clic cu ajutorul Bucketului de vopsea în interiorul desenului și nu se întâmplă nimic, înseamnă că desenul dvs. are un decalaj undeva. Găsiți-o și închideți-o cu instrumentul Free Transform Tool.
Animația este completă, dar mai sunt încă unele îmbunătățiri. Ceea ce vă explic aici sunt simple sugestii pe care nu trebuie să le urmați cu cuvânt, și de aceea nu voi mai petrece mult timp pe fiecare.
Acum că am colorat spionul avem nevoie de fundal la fel de colorat. Scopul acestui tutorial, totuși, a fost de a arăta procesul de animație, astfel încât crearea fundalului este dincolo de scopul acestui tut. Dar pentru cei curioși, iată o scurtă vară a modului în care a fost făcută:
Am recreat camera din Swift3D, un program conceput pentru a încorpora elemente 3D în Flash. Am exportat scena ca vectori și l-am deschis în Flash. În cele din urmă, am făcut unele modificări culorii și am adăugat o strălucire galbenă pentru lampă.
Puteți crea fundalul direct în Flash sau doriți în orice alt mod. Dacă doriți să utilizați a mea, veți găsi în fișierele sursă.
Așa cum probabil ați observat deja, există o mică problemă pe care trebuie să o rezolvăm. Deoarece stratul "Spy" se află pe partea de sus a stratului "BG", îl putem vedea pe spion când se presupune că se află în spatele zidului în primele cadre. Pentru a acoperi acea parte a corpului care nu trebuie arătată, vom folosi o mască de strat.
Creați un strat nou, transformați-l într-un strat de mască și numește-l corespunzător "Mască". Faceți masca stratului "Spy". Dacă ați reușit să urmăriți de-a lungul acestui tutorial, probabil că știți suficient de bine Flash pentru a vă familiariza cu măștile de straturi, dar le voi trece repede:
Un strat de mască conține o formă umplută care permite unui strat legat (mascat) să fie văzut prin el; toate zonele goale din stratul de mască vor deveni invizibile în stratul mascat.
Masca noastră trebuie să acopere întregul spion (în toate cadrele unde o parte a corpului ar trebui să fie ascunsă), cu excepția părții care iese din fereastră. Ei spun că o imagine este în valoare de o mie de cuvinte, așa că aruncați o privire mai jos:
Notă: Dacă blocați atât stratul de mască, cât și stratul mascat, veți vedea efectul măștii.
Ultima atingere pe care am adăugat-o la animație a fost o umbră moale sub spion. Creați un cerc negru într-un nou strat. Transformați-o astfel încât să arate ca umbra spionului.
Conversați-l într-un clip video și animați-l astfel încât să urmați peretele și solul de sub spion (așa cum am spus înainte, nu voi intra în detalii, ar trebui să puteți face acest lucru pe cont propriu). Umbra animată ar trebui să arate astfel:
Pentru a face umbra să pară o umbră, coborâți alfa la 25% în Inspectorul proprietăților filmului. Pentru a face să pară moale, adăugați un filtru de estompare în fila filtrelor cu parametrii de mai jos.
Felicitări! Testați-vă filmul, stați-vă și relaxați-vă. Acum vă puteți numi animator. Dar rețineți că acesta este doar începutul! Uita-te in jurul tau! Există lucruri infinite de animat! Creați personaje personale, explorați noi tehnici, dezvoltați propriul stil și, cel mai important: animați distracția!
Există multe cărți despre animația tradițională, pe care vă sugerez să le aruncați o privire. Trei cărți care se remarcă sunt:
Dacă sunteți interesat de animația Flash, ar trebui să vă îndreptați către biteycastle.com și să explorați animațiile premiate ale lui Adam Phillips, precum și Academia de la Bitey Castle.
Accentsconagua