Share
Pentru designeri, o mare parte din atracția Flash se află în capacitatea sa de a permite utilizatorilor să adauge mișcarea și interactivitatea la aproape orice. Pentru majoritatea utilizatorilor noi, adevăratul Wow! factorul vine atunci când prima dată dau seama cum să aducă lucrurile la viață folosind cronologia Flash și ActionScript.
Astăzi ne vom uita la modul în care putem folosi cele mai multe dintre instrumentele Flash care ne aruncă la noi pentru a adăuga animație simbolurilor noastre. Acesta poate fi un subiect destul de dens, care să acopere cât de mult aplicația a crescut de la primele sale zile de la un moment dat, dar voi încerca să păstrez lucrurile concise și abordabile. Pentru o acoperire mai profundă, nu ezitați să consultați alte tutoriale despre Activetuts + și sunt sigur că veți găsi ceea ce căutați.
Deși acest post a fost scris pentru Flash Professional CS5, majoritatea sfaturilor ar trebui să funcționeze foarte bine în versiunile mai vechi. Voi încerca să fac un punct pentru a evidenția ori de câte ori ceva este foarte specific pentru cea mai recentă versiune a Flash.
Înainte de a intra în detalii, să luăm câteva minute pentru a trece peste un jargon pe care îl vom referi aici. Deoarece majoritatea noului Flash vin cu o expunere foarte puțin sau deloc la conceptul de imagini în mișcare, unele dintre aceste concepte pot fi un pic cam descurajante pentru a obține. Cel mai bine este să le acoperim în avans înainte de a face o scufundare profundă în aspectele practice ale animației și interactivității în Flash.
FPS (sau rata de cadre), foarte simplu, se referă la numărul de cadre redate în fiecare secundă. Orice imagine în mișcare - animație sau video - este o serie de imagini statice, proiectate unul după altul la o viteză foarte mare, provocând iluzia mișcării. Dacă ați văzut o rolă de filme din momentul în care au folosit de fapt film pentru a filma, veți vedea că este pur și simplu o bandă cu multe fotografii. Cât de repede proiectorul filmului trece prin ele este ceea ce se numește FPS.
FPS implicit în versiunile anterioare de Flash a fost de 12, care a fost acum bumped pana la 24 peste ultimele versiuni. Acest lucru s-ar putea datora faptului că Flash a progresat de la a fi un instrument de animație pur vector la modul preferat de redare a videoclipurilor pe web. Deoarece videoclipurile trebuie să se joace la minimum 24 de cadre pe secundă pentru a funcționa fără probleme, containerul Flash trebuie, de asemenea, să cânte la un nivel scăzut. De asemenea, playerul Flash sa îmbunătățit drastic acum și poate face volume mult mai mari de date necesare pentru a juca la fps mai mare fără a lua o lovitură de performanță.
Luat direct din cărțile celulare de animație, adăugarea (scurt pentru interconectare) este metoda utilizată pentru a crea cadre intermediare între două cadre cheie. De exemplu, dacă aș anima mâna unui personaj din poziția obișnuită de a arăta ceva, aș trage prima și ultima poziție și apoi trag cadrele între ele pentru a simula mișcarea. Câte cadre se întâmplă între cele două cadre cheie este definită de rata cadrelor de animație și de timpul în care aveți nevoie să fie finalizată mișcarea. Miscari mai mici inseamna mai multe cadre tween si invers.
Flash-ul ne ușurează prin desenarea cadrelor tween itself, spre deosebire de ceea ce ați face într-o animație tradițională manuală. Din moment ce CS4, există trei moduri distinct diferite de tween-shape, clasic și tween de mișcare. Să înțelegem fiecare un pic:
Shape tween: Cel mai de bază tip de tween, deși probabil că nu o veți folosi prea mult. Începeți cu o formă și transformați-o în timp. Cu excepția cazului în care ambele forme nu sunt complexe și sunt foarte asemănătoare unul cu celălalt, probabil că veți avea nevoie de multă practică pentru a face acest lucru la lucru. Puteți adăuga sugestii de formă pentru a forța anumite puncte pe o formă să se comporte în timpul transformării.
Clasic tween: Până la versiunea CS3, aceasta a fost metoda primară de adăugare în Flash, una care a fost la fel de iubită de toată lumea așa cum a fost urâtă. În principiu, luați un simbol și modificați proprietățile dintre cadrele cheie - cum ar fi dimensiunea, poziția, efectul de culoare etc. Deoarece metoda depinde de două stări distincte - una pe fiecare cadru cheie - editarea unui simbol animat poate fi o sarcină destul de obositoare. Ceva la fel de simplu ca mutarea simbolului în jurul valorii de are nevoie de tine pentru a selecta simbolul pe fiecare cadru cheie și mutați-l exact aceeași sumă.
Mișcare: De departe cel mai mare upgrade la capabilitățile de animație ale Flash, mișcarea tween aduce editorul de mișcări foarte iubit al After Effects la Flash. Cea mai mare schimbare între metoda veche și noua este că mișcarea tween este acum bazată pe obiecte, nu pe baza cronologiei, ca în metoda veche. Aplicați tweens la simboluri, cu un control mai bun asupra oricărui aspect fizic al obiectului prin panoul editorului de mișcare. Sigur, încă aplicați mișcarea pe cronologie, dar acum este posibil să selectați un simbol, să îl mutați și animația să fie purtată cu ea.
Știm că atunci când o minge cade în lumea reală, viteza ei nu este întotdeauna aceeași. Coboară viteza pe măsură ce se apropie de pământ, apoi bate la aproximativ aceeași viteză și încetinește, atingând vârful unde se îndreaptă spre pământ. Când animați obiecte în Flash, acestea se vor transforma într-un ritm uniform în mod implicit. Dacă v-ați întrebat de ce textul dvs. animat care intră și iese din scenă se simte plat, acesta este motivul. Cu relaxare, puteți să-i spuneți, practic, Flashului ca mișcarea să fie accelerată sau decelerată fără a fi nevoie să modificați poziția manual la fiecare cadru.
Una dintre cele mai mari probleme cu vechea mișcare de mișcare în Flash - ceva ce nu mi-am dat seama până nu am văzut-o pe cel nou - a fost că animația a fost predominant bazată pe cronologie. Ați creat un cadru cheie pe un strat, ați plasat un simbol pe el, ați adăugat un alt cadru cheie la câteva cadre distanță și ați modificat simbolul. În esență, ați avut de-a face cu două exemple distincte de simbol. Mișcarea nu a făcut altfel decât instanța din următorul cadru cheie. Sigur, am trecut prin iad încercând să repoziționăm elementele după animarea lor, dar asta a fost modul în care Flash și-a jucat cărțile.
Apoi, cu CS4 a venit editorul de mișcare, iar lucrurile s-au schimbat pentru totdeauna. Din nefericire, editorul de mișcare nu este exact cea mai bine înțeleasă parte a Flash-ului, chiar și după o versiune și jumătate. Permiteți-mi să iau câteva momente atunci și să discut câteva povești interesante despre modul în care funcționează acest lucru și cum puteți face ca lucrul pentru dvs..
Acum puteți să vă editați simbolurile în două moduri distincte pentru a iniția o animație - din interiorul editorului de mișcare sau direct pe scenă, ca în zilele vechi. Fiecare parametru fizic al simbolului selectat - cum ar fi coordonatele x, y, scala, efecte de culoare, filtre etc. - este acum listat ca un rând în editorul de mișcare. Trebuie doar să vă mutați într-un punct din cronologie și să schimbați parametrul, iar pentru acest parametru este generat un cadru cheie. Dacă vă place modul tradițional, vizual de a anima lucrurile, pur și simplu mergeți la un cadru și editați simbolul pe scenă.
Ceea ce este important de înțeles este faptul că cadrele cheie sunt acum adăugate pe parametru, deci dacă ați mutat instanța pe scenă, va exista un cadru cheie numai pentru coordonatele X și / sau Y din editorul de mișcare. Acest lucru oferă o gamă foarte largă de control asupra animației - ceva imposibil de realizat în versiunile mai vechi ale Flash.
Notă: Nu este necesar să creați în mod explicit un cadru cheie. Doar mutați la un cadru, schimbați ceva despre instanță și un cadru cheie este generat automat doar pentru acest parametru. Pentru o mulțime de oameni, aceasta este o schimbare culturală; ceva ce li se pare foarte dificil să se obișnuiască. Deși puteți crea manual un cadru cheie, am descoperit că este inutil pentru cea mai mare parte.
În loc de câmpul de introducere unică și de butonul "Editare", acum obțineți un întreg rând dedicat relaxării în noul editor de mișcare. O linie punctată, care acoperă toate cadrele unei îmbinări, face foarte ușor să vedem cum funcționează relaxarea. Presetările incluse sunt o modalitate bună de a începe. O linie curbată înseamnă că viteza animației crește treptat sau scade. O linie dreaptă înseamnă consecventă, chiar și ritmică. Aveți posibilitatea să creați cât mai multe facilități pe care le doriți și să le atribuiți câte unul pentru fiecare parametru. Amintiți-vă că relaxarea trebuie atribuită în mod explicit fiecărui set de parametri. Dacă nu faceți asta, animația dvs. va continua să fie aceeași mișcare plată.
Odată ce ați înțeles cum funcționează relaxarea cu presetările, este timpul să faceți aventuros și să încercați opțiunea "personalizat". Ceea ce ajungeți aici este o linie solidă roșie în locul celei punctate, indicând faptul că o puteți edita. Mergeți la un cadru și creați un cadru cheie în rândul de relaxare "personalizat" pentru a adăuga un nod bezier în cronologie. Apoi puteți folosi mânerele de noduri pentru a edita curba așa cum doriți.
Sfat rapid: Dacă nu sunteți prea sigur de modul în care funcționează relaxarea, dar doriți să vă luați instantaneu animațiile în mai multe crestături, utilizați această regulă pe care o folosesc în mod obișnuit - elementele care apar (nimic care intră în cadru sau pe scenă) funcționează cel mai bine cu un " Simplu (Mediu) "relaxare la" 50 ", în timp ce elemente de dispariție funcționează cel mai bine cu aceeași relaxare la -50". Acest lucru face animația generală să se simtă mult mai netedă și mai consistentă. De regulă, folosesc relaxarea pe aproape orice se mișcă în animațiile mele.
Atunci când mutați un obiect în timp, folosind mișcarea tween, apare o linie de la punctul de înregistrare al simbolului care arată punctul de început și sfârșit al mișcării, precum și fiecare dintre cadre. O caracteristică aparent ascunsă aici este faptul că această cale este ca orice altă linie din Flash. Puteți utiliza instrumentele de selecție și stiloul pentru a le modifica așa cum ați face orice altă cale. Faceți clic și trageți oriunde, dar capetele căii (în timp ce nu este selectată) pentru ao converti într-o curbă. Apoi puteți utiliza instrumentul de sub-selecție pentru a edita mânerele bezier de pe noduri pentru un control mai bun. De fiecare dată când adăugați un cadru cheie în calea de mișcare, o nouă curbă bezier se adaugă la cale, pe care o puteți edita atunci când aveți nevoie de ea.
Dacă 3D în Flash este ceea ce ați dorit întotdeauna, dar nu ați avut inima să jucați în jurul cadrelor 3D, cum ar fi papervision, aici este un mod rapid și murdar de a falsifica mișcarea 3D în Flash. Puteți utiliza noul instrument de rotire 3D împreună cu editorul de mișcare pentru a face obiectele să se rotească în 3 dimensiuni pentru acel jazz adăugat.
Rotația 3D nu este prezentată în editorul de mișcare decât dacă îl folosiți de fapt pe un obiect. Pentru a face acest lucru, selectați Instrumentul de rotație 3D, selectați obiectul și faceți clic și trageți una dintre cele trei linii colorate care apar. Fiecare dintre cele trei linii reprezintă o axă - verde este Y, roșu este X și albastru este Z. X & Y sunt de obicei cele care vor face obiectul să arate ca și cum ar fi rotit în spațiul 3D. Ia-o în poziția dorită, du-te la sfârșitul mișcării și mișcați-o rotiți din nou. Adăugați o ușurință "Bounce" pentru unele condimente suplimentare.
Fluxul de lucru tipic de animație este acela de a crea o compoziție a cadrelor cheie dintr-o animație și apoi să adăugați mișcare fiecărui obiect, după cum este necesar. Pentru tot ce trebuie să alunece din afara scenei de pe stânga, asta înseamnă că trebuie să mut obiectul pe primul cadru, să reduc alfa, să merg la ultimul cadru, să îl mut înapoi la locul unde doream și să măresc alfa la 100%. Acesta este modul în care a fost întotdeauna într-adevăr, așa că nu am deranjat atât de mult până la o dimineață frumoasă când am descoperit "cadrele cheie reversibile". Ideea este chiar prost, dar merită nenumărate ore dacă animați lucruri în și în afara scenei în fiecare zi.
Iată cum funcționează. Odată ce ai compozit în loc, pur și simplu animați opusul efectului de care aveți nevoie. Porniți de la poziția finală a obiectului și animați-o afară spre stânga. Include tot ce aveți nevoie pentru a face animația perfectă - alfa, blur, et al. Apoi, pur și simplu faceți clic dreapta pe tween și faceți clic pe 'keyframes reverse', și voila! Aveți diapozitivul din animația din stânga exact așa cum trebuie să fie.
Poate că cel mai mare economizor de timp pentru mine de când am început să folosesc editorul de mișcare în Flash, a fost abilitatea de a aplica mișcarea unui obiect, de ao copia și de a le lipi pentru toate celelalte. Acest lucru are sens atunci când aveți o grămadă de obiecte care se deplasează într-un mod asemănător - de exemplu, o listă de gloanțe. Odată ce ați aplicat o adăugare la unul dintre elementele listă (presupunând că fiecare dintre ele este un singur filigran în stratul propriu, bineînțeles), faceți clic dreapta pe tween și selectați "Copy Motion". Apoi, pur și simplu selectați primele cadre cheie ale tuturor celorlalte elemente de listă, faceți clic dreapta și selectați "Paste Motion". După aceea, puteți modifica fiecare, dacă este necesar.
Iată câteva sfaturi rapide pentru a economisi timp, energie și câteva cadre atunci când se ocupă cu animația în Flash:
Asta ne aduce la capătul unui alt capitol din Sfaturi Flash și cele mai bune practici pentru designeri. Dacă ați folosit Flash în urmă cu câțiva ani și v-ați revenit recent, veți aprecia, fără îndoială, saltul imens pe care l-a făcut de-a lungul anilor ca instrument de animație profesionist. Sper că aceste sfaturi vă vor ajuta să vă luptați cu unele dintre instrumentele și caracteristicile mai noi, surprinzător de documentate. Aveți mai multe sfaturi și trucuri de împărțit? Să auzim despre ele în comentariile.
Accentsconagua