Share
Partea 1 a acestui tutorial va lua începători Flash prin principiile fundamentale din spatele desenării și animării vectorilor din Flash. Vom desena și vom anima o minge de pe plajă. Cunoașterea prealabilă a tehnologiei Flash va ajuta desigur, dar următoarele tehnici ar trebui să fie accesibile tuturor și cu majoritatea versiunilor software. Partea 2 vine în curând ...
Mai jos este animația finală la care vom lucra. Doriți acces la fișierele vectoriale Source și copiile descărcate ale fiecărui tutorial, inclusiv acesta? Alăturați-vă VECTORTUTS PLUS doar pentru 9 / lună.
Să începem prin deschiderea unui nou document (Fișier> Nou ...). Doar un document Flash File (ActionScript 2.0) este bine; versiunea Actionscript nu este relevantă, deoarece nu vom folosi niciunul.
Utilizați Inspectorul de proprietăți din partea de jos a ecranului pentru a intra în Proprietățile documentului, faceți clic pe butonul Dimensiuni. Mai întâi, dați documentului dvs. un titlu, apoi dați Etapa (zona documentului dvs., care va fi vizibilă atunci când este publicată) dimensiuni de 600x400px. Culoarea de fundal pe care o vom lăsa alba, dar schimbați Rata cadrelor la 21 fps (Frames Per Second). 21 fps oferă o rată rapidă de animație.
Organizarea este esențială atunci când lucrăm cu Flash, așa că înainte de a începe să tragem mingea, să numim stratul pe care se va afla. Faceți dublu clic pe Layer 1 și denumiți "Ball".
Selectați Instrumentul Oval, definiți un curs și o culoare de umplere, cum ar fi cele afișate. Apoi trageți un cerc uniform (prin menținerea Shift și tragerea mouse-ului). De asemenea, utilizați Inspectorul de proprietăți pentru a oferi Stroke o greutate de 3px.
Prin crearea de simboluri în Flash puteți utiliza mai multe instanțe ale acelorași obiecte într-un singur fișier. Simbolurile sunt toate accesibile din paleta Bibliotecă (Fereastră> Bibliotecă). Prin modificarea unui simbol, toate instanțele acelui simbol din fișier vor fi modificate.
Vom transforma cercul nostru într-un simbol care va deveni balonul nostru. Selectați întregul cerc și apăsați F8. Denumiți-l "mc_ball", alegeți să îl transformați într-un simbol Movie Clip și faceți clic pe OK.
Adăugați un al doilea strat sub stratul "Ball" și numiți-l "Shadow". În primul cadru al acestui strat trageți o elipsă pentru a forma o umbră sub minge. Îndepărtați cursa și colorați-o # E2E0E5. Transformați-l într-un simbol, așa cum ați făcut înainte cu mingea, apoi numiți-l "mc_shadow".
Poziționați cele două simboluri la aproximativ înălțimea corectă pentru a sugera că mingea este așezată pe teren. În paleta Aliniere (Fereastră> Aliniere), bifați Căsuța și centrați cele două simboluri pe orizontală.
Am creat simbolurile noastre în forma lor cea mai de bază, acum să începem să le animăm. Țineți Shift și faceți clic pe cadrul 20 al ambelor straturi din linia de timp. Accesați Modificați> Cronologie> Conversie la Cadrele cheie sau apăsați F6 pentru a transforma aceste cadre în Cadre cheie. Cadrele cheie reprezinta puncte de-a lungul cronologiei in care se intampla ceva. Acest punct pe Cronologie va fi sfârșitul animației; cu alte cuvinte mingea se va ridica de la sol, a ajuns la vârf și a revenit la această poziție de plecare. Același lucru este valabil și pentru umbra noastră: va fi decolorat pe măsură ce mingea va crește și va reveni la această stare inițială la cadrul 20.
Acum, să adăugăm punctul în care mingea este la cea mai mare. Selectați cadrul 10 pe ambele straturi și apăsați F6 pentru a le transforma în Cadre cheie.
Cu glisorul încă la cadrul 10, deplasați simbolul mingii vertical în sus până la un anumit punct al scenei. Selectați instrumentul Transformare liberă și extindeți instanța simbolului "shadow_main".
În cele din urmă, cu umbra selectată, mergeți la Color pe Inspectorul de proprietăți și modificați-o la o valoare Alpha de 30%.
Tweening este procesul prin care Flash generează automat toate etapele între obiecte sau forme două stări.
Vom adăuga cadrele între primul cadru și jumătatea de-a lungul animației de la cadrul 10. Selectați orice cadru între 1 și 10 pe ambele straturi și trimiteți din nou la Inspectorul de proprietăți. Alegeți mișcarea din Tween selectați și veți vedea că cadrele rezultate se transformă în violet.
Mutați cursorul înainte și înapoi de-a lungul cronologiei cu mouse-ul și veți vedea mingea și umbra frumos animate. Viteza acestei mișcări este totuși complet uniformă. Avem nevoie de mingea pentru a decelera pe măsură ce ajunge la apex și putem face acest lucru cu uşura (ha ha).
Din nou, cu un cadru al fiecărui strat selectat (în zona îmbinată), consultați Inspectorul de proprietăți. Schimbați Tweening-ul la Easy Ease cu o valoare de 100. Aceasta va încetini balanța noastră de alpinism.
După ce ați animat cu succes ridicarea mingii, repetați pașii de adăugare pentru cadrele 11 - 20. Acest lucru ușurează mișcarea în -100, determinând accelerarea mingii când se apropie de sol.
Apăsați Command + Enter pentru a vedea mingea animată până acum. Ar trebui să arate ca animația prezentată mai jos.
Presupunând că mingea noastră este făcută din ceva mai flexibil decât diamantul, va schimba forma ușor la impact cu solul. Să adăugăm un ultim keyframe în care mingea se apasă instantaneu.
Selectați cadrul 21 pe ambele straturi și apăsați F6 pentru a le transforma în Cadre cheie. Apoi folosiți Free Transform Tool pentru a suc de fructe simbolul "minge" de pe marginea superioară (țineți apăsat pe Alt ca să îl păstrați pe marginea de jos unde este).
Miscarea noastra viguroasa este completa. Acum trebuie să adăugăm mai multe detalii și să ne mișcăm mingea. Faceți dublu clic pe simbolul "minge" din oricare dintre cadrele cheie pentru a introduce linia temporală a acelui simbol. Veți vedea locația dvs. curentă sub cronologie - ar trebui să vă aflați în "Scena 1, mc_ball".
Faceți clic pe pictograma Inserare strat pentru a crea un al doilea layer peste cel curent. Copiați și inserați cercul în loc de la Layer 1 la Layer 2 (Command + C, Command + Shift + V). Acum numiți stratul inferior "Spinning Ball" și partea superioară "Shade". În cele din urmă, blocați stratul "Spinare minge".
Desenați un cerc mare undeva pe scenă, asigurându-vă că are o culoare diferită față de cercul existent.
Poziționați cercul mai mare astfel încât ceea ce încă mai poate fi văzut din cercul galben are forma corectă pentru a umbri pe minge. Eliberați toate obiectele.
Acum, selectați din nou cercul mai mare și apăsați Ștergeți. Prin plasarea unor forme ne-grupate sau non-simbolizate unul peste celălalt, le combinați în același mod ca și cu pixelii din aplicațiile de vopsea. Îndepărtați acum cercul mai mare, rămânând doar cu semiluna mică care va deveni umbrirea pe minge. Selectați și îndepărtați cursorul rămas și colorați semiluna # E2E0E5.
Deoarece această semilună acționează ca o umbrire pe minge, ar fi frumos să-i dăm o Opacitate Multiplică. Pentru a face acest lucru, trebuie să îl convertim într-un simbol Movie Clip (ar trebui să fii obișnuit cu această acțiune acum). Apăsați pe F8 și denumiți-o "mc_ball_shading" (aceste nume devin dezordonate). Consultați Inspectorul de proprietăți și modificați-l pe Blend to Multiply. Perfect!
Apăsați Command + Enter din nou pentru a vedea mingea animată până acum. Ar trebui să arate ca animația de mai jos.
Având în vedere umbrirea puteți bloca acum stratul "Shade" (poate face chiar invizibil pentru a face munca mai ușoară) și pentru a debloca "Ball Spinning". Vom adăuga un model pentru a da cercului nostru să-i dea aspectul mingii de plajă. Utilizați Instrumentul Oval pentru a desena un oval mare pe scenă. Este nevoie de un accident vascular cerebral de 1px și #FFFFFF, dar fără culori de umplere.
Așezați cursa așa cum se arată în imaginea de mai jos și eliberați-o. Acum, selectați partea din cursa care se află în afara mingii, făcând clic pur și simplu pe ea. Ca și făcând semnalul de umbrire mai devreme, toți vectorii de pe acest strat s-au unit împreună, formând zone separate. Ștergeți partea exterioară a cursei.
Desenați câteva oale și plasați-le în partea de sus a cercului, astfel încât să se unească în partea de sus undeva. Apoi scoateți excesul din afara cercului. Ovalurile nu trebuie să aibă dimensiuni sau proporții egale, încercați doar să recreați ceva asemănător imaginii de mai jos. Ceea ce ați creat este o serie de segmente care pot fi acum colorate individual.
Se alternează segmentele de culori cu # EA512D și se șterg toate bucățile de lovituri albe de pe minge. Apăsați Command + Enter pentru a vedea ce ați făcut până acum. Ar trebui să arate ca animația de mai jos.
Să adăugăm o dimensiune finală a mișcării la animație, vom face mingea să se rotească încet pe măsură ce ricoșă. Pentru a face acest lucru, avem nevoie mai întâi de bila pe stratul "Spinning Ball" pentru a fi transformată într-un simbol. Faceți clic pe primul cadru cheie al stratului pentru a vă asigura că totul este selectat. Acum, apăsați F8 și denumiți acest simbol Movie Clip "mc_ball_base". Veți vedea că a fost adăugat printre celelalte simboluri din paleta Bibliotecă (Fereastră> Bibliotecă).
Selectați cadrul 32 al liniei temporale de pe stratul "Spinning Ball" și apăsați F6 pentru a crea un nou Cadru cheie. Selectați cadrul 32 al liniei temporale de pe stratul de mai sus și apăsați F5. Acest lucru va crea un nou cadru, dar, deoarece simbolul "Shade" nu schimba deloc statul, nu este necesar să facem acest lucru o cheie cheie. Trebuie să ne asigurăm că atunci când cursorul ajunge la acest punct de-a lungul liniei de timp, este prezent simbolul "Shade".
De ce am ales cadrul 32? Ei bine, făcând acest lucru vom face mingea să se rotească o dată la fiecare 32 de cadre. Mingea noastră bounces o dată la fiecare 20 de cadre și astfel acest timp neregulat va însemna că mingea se află la etape de rotație continuă diferite în timpul sariturii. Dacă acest lucru nu este încă clar, va fi în curând ...
Selectați un cadru undeva de-a lungul liniei de timp din stratul "Spinning Ball" și consultați Inspectorul de proprietăți. Selectați Motion tween, așa cum ați făcut cu mișcarea viguroasă. De data aceasta, nu vrem nici o valoare de ușurare, avem nevoie de mingea să se rotească constant cu aceeași viteză. Selectați CW (în sensul acelor de ceasornic) din meniul derulant Rotire și părăsiți 1 ca numărul de ori în care mingea se va roti în timpul procesului de tween. Desigur, stratul "Shade" nu este afectat, iar umbrirea va rămâne astfel în aceeași poziție pe fața mingii.
Deci, tu o ai! Apăsați Comandă + Enter din nou și verificați dacă mișcarea este așa cum doriți. În cazul în care este nevoie de schimbare, puteți mări cantitatea de cadre din tweens, puteți schimba înălțimea mingii, numărul de momente pe care le rotește etc. Acest tutorial vă oferă o perspectivă asupra: cronologiei și straturilor Flash, comportamentul Flash instrumentele de desen vectorial, ierarhia simbolurilor și obiectelor Flash și mișcarea de mișcare.
Sper ca ti-a placut! Partea 2 se dorește să fie publicată luna viitoare și se va extinde pe aceste tehnici, îmbunătățind procesul cu o atingere de Illustrator ...
Abonați-vă la fluxul RSS al VECTORTUTS pentru a rămâne la curent cu ultimele tutoriale vectoriale și articole.
Accentsconagua