Share
Nøkkelen til animasjon, som mange ting, er en logisk tilnærming og god arbeidsflyt. I denne tutten tar Hasier deg gjennom planlegging, skissering og raffinering av animasjonen for å gi deg bevegelsen du leter etter.
Under denne opplæringen oppretter vi følgende animasjon:
Denne opplæringen vil bli delt inn i 4 deler. I hver del vil vi gå over de forskjellige stadiene i å skape en animasjon fra start til slutt. Dette er opplæringsdelene og deres innhold:
I den første delen av denne opplæringen vil vi gå over tingene du trenger å vite før du begynner å animere. Ikke overse disse tingene; Planlegger animasjonen før du hopper rett inn i Flash, og du sparer mye tid senere.
Det aller første skrittet i å skape en animasjon er selvfølgelig å avgjøre hva du vil animere. I denne opplæringen vil vi animere dette:
Han er en enkel spion karakter jeg laget for en tid siden. Fordi han er så enkel, er det lett å animere ham. Hvis dette er første gang du prøver å animere, foreslår jeg at du gir min spion en tur før du går videre til mer komplekse tegn.
Så, ta et stykke papir og tegne spionen et par ganger. Ramme-for-ramme-animasjon betyr å tegne det samme igjen og igjen, så du bør føle deg komfortabel med å tegne karakteren din. Slik trekker jeg ham:
Når du kjenner din karakter innvendig ute, er det på tide å begynne å tenke på å bringe ham til livs. Animasjoner er planlagt gjennom nøkkelrammer (også kalt miniatyrbilder). I denne opplæringen vil jeg referere til dem som nøkkel tegninger for ikke å forvirre dem med Flash-keyframes. Så, hva er en nøkkeltegning? Nøkkeltegninger er tegningene som forteller historien og definerer bevegelsen i en animasjon. Med andre ord, de er en måte å oppsummere animasjonen på noen få tegninger. Eksempelet nedenfor viser hvordan en liten forskjell i en nøkkeltegning kan ha stor innvirkning på den endelige animasjonen:
En nøkkeltegning må planlegges i starten og slutten av en bevegelse, og hver gang en retningsendring eller rytme oppstår i animasjonen. Så ta en titt på den siste animasjonen og skisser nøkkeltegningene med tanke på disse pekene. De burde se noe slikt ut:
Når du har fått tak i å tegne din karakter og har planlagt ut animasjonen, er det på tide å gå videre til Flash.
Start med å åpne et nytt Flash-dokument. Standard 12 fps er for lav for en animasjon, så for denne opplæringen bruker vi 15 fps.
Gi navnet på det nåværende laget "BG". Velg en lysfarge og skisser grunnleggende bakgrunnen til scenen, i vårt tilfelle et rom. Ikke tegne noe fancy, bare elementene som trengs for å skape grov animasjon: vegger, gulv og vinduet.
For å skisse i Flash velger jeg vanligvis en stor penselstørrelse med trykkfølsomhet på og gir utjevning ned til rundt 10. Dette gir meg større frihet til å skisse, da jeg kan variere slagtykkelsen så mye jeg vil ha og ha mer kontroll over skarp vinkler på grunn av lav utjevning. Jeg foreslår at du bruker de samme innstillingene som meg. Ikke bekymre deg hvis slagene dine ser jævla ut; vi kan fikse det på slutten.
Nå skal vi gjenskape de viktigste tegningene vi har laget tidligere. Lag et nytt lag og nev det som "Spion". I den første rammen skal du skissere den første nøkkeltegningen du planla før. Igjen, bare tegne de grunnleggende figurene. Det skal se slik ut:
Sett inn et tomt keyframe (F7) i "Spy" -laget. Slå på løkskinn, slik at du kan se forrige ramme. Med den første tegningen som veiledning tegner du den andre nøkkeltegningen.
Gjenta samme prosess for resten av nøkkeltegningene. Når du er ferdig, bør du ha fem nøkkelrammer med fem forskjellige nøkkeltegninger.
Nå kommer vi til det viktigste (og sannsynligvis det vanskeligste) trinnet i å skape en animasjon: timing; beregne tiden mellom våre hovedtegninger. Det vi gjør nå, bestemmer hele animasjonen, så det er viktig at det er gjort riktig.
Velg den første rammen i "Spy" -laget, og legg til noen blanke nøkkelrammer (F7) mellom første og andre nøkkeltegninger. Gjør det samme med resten av keyframes. Dette er hva tidslinjen din skal se ut som:
Test filmen (Ctrl + Enter). Som du kan se, er timingen helt feil, så gå tilbake til .fla for å fikse det. Hvis timingen mellom to hovedtegninger er for kort, legg til flere tomme nøkkelrammer mellom dem; Hvis timingen er for lang, slett du noen keyframes.
Etter tweaking det litt, test filmen for å se om det ser bedre ut enn før. Hvis det fortsatt ikke ser riktig ut, bruk noen flere endringer. Det er vanskelig å bilde animasjonen med bare fem nøkkelrammer, så vær ikke bekymret hvis det ikke er perfekt på dette stadiet; vi kan justere timingen igjen senere. Så langt er dette mitt resultat:
Kjernen i animasjonen vår er nå fullført, men det er fortsatt mye arbeid å gjøre. For det første må vi legge til flere keyframes for å få animasjonen til å virke jevn. Tegningene som vises mellom nøkkeltegninger for å fullføre animasjonen kalles på riktig måte. Tegning i betjener er ganske enkelt, siden vi allerede har gjort det meste av arbeidet da vi laget nøkkeltegningene.
Velg en keyframe mellom de to første nøkkeltegningene og slå på løkskinn. Med to tegninger som referanse tegner du spion halvveis mellom nøkkeltegningene i gjeldende ramme.
Gjenta prosessen. Tegn en ny keyframe mellom hver av hovedtegningene. Du bør ha ni nøkkelrammer.
Test filmen. Hvis timingen fortsatt ikke ser riktig ut, er det nå på tide å endre det. Som jeg sa før, er timing den viktigste delen i animasjon, så ta deg tid til å sørge for at det er riktig. Etter justering av keyframes, bør animasjonen se slik ut:
Det er lite mer å forklare. Fortsett å legge inn mellomrom mellom inbetweens for å jevne ut animasjonen til det ikke er flere tomme nøkkelrammer igjen. Test filmen for å se om noe må løses. Dette var resultatet mitt til dette stadiet:
Den grove animasjonen er nå ferdig. I denne delen av opplæringen arbeider vi med å tegne den rene versjonen av vår karakter.
Opprett en ny mappe og navnet "grov". Slå lagene "BG" og "Spy" til guidelag, slik at de ikke vises når filmen publiseres. Lås begge lagene og legg dem i mappen. Lag et nytt lag og nev det "Spy" igjen. I dette laget skal vi tegne den rene versjonen av vår karakter.
Bytt fyllfarge til svart og sett børstinnstillingene som beskrevet i trinn 4. Ta nå tegningene du gjorde i begynnelsen. Bruk dem som referanse for å tegne spionen over grove tegningen.
Gjør det samme for alle keyframes. Du kan bruke løkskinn for å bruke den forrige rammen som referanse.
Ting ser definitivt mye renere ut, men de er fortsatt ikke rene nok. Ta en nærmere titt på de rene tegningene. Du vil legge merke til at slagene er hakkede. Vi kunne forlate dem som for denne animasjonen, men hvis vi jobbet på et større prosjekt, måtte vi optimalisere dem. Optimalisering er en metode Flash bruker til å finjustere en form ved å redusere mengden kurver som trengs for å definere formen.
For å optimalisere strekkene i animasjonen, velg tegningene fra alle rammene (med "Rediger flere rammer" slått på) og klikk Endre> Form> Optimaliser (Crt + Alt + Skift + C). Dialogboksen Optimaliser kurver åpnes. Du kan justere mengden av utjevning med glidebryteren. Merk av for "Bruk flere passerer" -boksen. Dette vil glatte formen igjen og igjen til ingen ytterligere utjevning kan oppnås uten å påvirke formen. Når du klikker OK, vil meldingen komme opp som viser prosentandelen av kurvereduksjonen.
Slå av "rediger flere rammer" og ta en titt på tegningene dine. De er mye jevnere nå, men sjansene er at optimaliseringen har endret seg (minst litt). Du kan redigere dem med Free Transform Tool (Q). Pass på at alle tegninger er stengt og ikke har hull.
Det er nå på tide å gi spionen litt farge. Så ta tak i Paint Bucket (K) og fyll ham! Jeg brukte # 000033 for hodet, # 010243 for kroppen og #FFFFFF for øynene.
Merk: Hvis du klikker med Paint Bucket inne i tegningen og ingenting skjer, betyr det at tegningen din har et gap et sted. Finn det og lukk det med Free Transform Tool.
Animasjonen er fullført, men det er fortsatt noen forbedringer å gjøre. Det jeg forklarer her er bare forslag som du ikke trenger å følge ord for ord, og jeg vil derfor ikke bruke mye tid på hver enkelt.
Nå som vi har farget spionen trenger vi en like fargerik bakgrunn. Formålet med denne opplæringen var imidlertid å vise animasjonsprosessen, så å skape bakgrunnen ligger utenfor omfanget av denne tut. Men for de som er nysgjerrige, er det en rask summery av hvordan det ble gjort:
Jeg gjenskapte rommet i Swift3D, et program designet for å inkorporere 3D-elementer i Flash. Jeg eksporterte scenen som vektorer og åpnet den i Flash. Til slutt gjorde jeg noen endringer i fargen og la en gul glød for lampen.
Du kan lage din bakgrunn direkte i Flash eller på annen måte. Hvis du vil bruke min, finner du den i kildefilene.
Som du sikkert har lagt merke til, er det et lite problem som vi må fikse. Fordi "Spy" -laget ligger på toppen av "BG" -laget, kan vi se spionen når han skal ligge bak veggen i de første rammene. For å dekke den delen av kroppen hans som ikke skal vises, bruker vi en lagmaske.
Lag et nytt lag, slå det til et maskelag, og merk det riktig på "Mask". Lag "Spy" -laget maskert. Hvis du har fulgt denne opplæringen, kjenner du sikkert Flash godt nok til å være kjent med lagsmasker, men jeg går raskt over dem:
Et maskelag inneholder en fylt form som tillater et koblet (maskert) lag å bli sett gjennom det; Alle tomme områder i maskelaget blir usynlige i det maskerte laget.
Vår maske skal dekke hele spionet (i alle rammene hvor en del av kroppen hans skal være skjult) unntatt den delen som stikker ut av vinduet. De sier et bilde er verdt tusen ord, så ta en titt nedenfor:
Merk: Hvis du låser både maskelaget og det maskerte laget, ser du maskens effekt.
Den siste berøringen jeg la til animasjonen var en myk skygge under spionen. Opprett en svart sirkel i et nytt lag. Forvandle den slik at den ser ut som spionens skygge.
Konverter det til et filmklipp og animer det slik at det følger veggen og bakken under spion (som jeg sa før, vil jeg ikke komme inn i detaljer, du burde kunne gjøre dette på egen hånd). Den animerte skyggen skal se slik ut:
For å få skyggen til å se ut som en skygge, senk alfaen til 25% i inspeksjonsfilen for filmklipp. For å få det til å virke mykt, legg til et uskarphetfilter i filterfliken med parametrene vist nedenfor.
Gratulerer! Test filmen, lene deg tilbake og slapp av. Du kan nå kalle deg en animator. Men husk dette er bare begynnelsen! Se rundt deg! Det er uendelige ting å animere! Lag dine egne figurer, utforsk nye teknikker, utvikle din egen stil, og viktigst: ha det gøy å animere!
Det er mange bøker om tradisjonell animasjon som jeg foreslår at du tar en titt på. Tre bøker som skiller seg ut er:
Hvis du er interessert i Flash-animasjon, bør du gå til biteycastle.com og se på Adam Phillips prisbelønte animasjoner, så vel som hans Bitey Castle Academy.
Accentsconagua