Animate en Acrobatic Spy Bruke Flash Tidslinje
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Nøkkelen til animasjon, som mange ting, er en logisk tilnærming og god arbeidsflyt. I denne tut, tar Hasier deg gjennom planlegging, skisser og avgrense animasjon for å gi deg den bevegelsen du leter etter.
Final Animation Forhåndsvisning
I løpet av denne opplæringen vi vil lage følgende animasjon:
Oversikt
Denne opplæringen vil bli delt inn i 4 deler. I hver del vil vi gå over de ulike stadiene i å lage en animasjon fra start til slutt. Dette er opplæringen deler og deres innhold:
Før Animere
Tegning tegnet
Planlegging animasjonen
The Rough Animation
Skissere i Flash
Nøkkel tegninger og timing
inbetweens
The Clean Animation
rene tegninger
Optimization
Vipper tegnet
finpuss
Legge bakgrunnen
Maske
Opprette en skygge
Part I: Før Animere
I den første delen av denne opplæringen, vil vi gå over de tingene du trenger for å vite før du begynner å animere. Ikke overse disse tingene; planlegger animasjonen før du hopper rett inn i Flash vil spare deg for mye tid senere
Trinn 1:. Bli kjent med Character
Den aller første skritt i å lage en animasjon er, selvfølgelig , bestemmer hva du vil animere. I denne opplæringen vil vi animere dette:
Han er en enkel spion tegn jeg har gjort opp for en tid siden. Fordi han er så enkelt, er det lett å animere ham. Hvis dette er første gang du prøver å animere, foreslår jeg at du gir meg spion en gå før du går videre til mer komplekse karakterer.
Så, ta et stykke papir og tegne spion et par ganger. Frame-by-frame animasjon betyr å tegne det samme om og om igjen, slik at du skal føle deg komfortabel å tegne figuren din. Her er hvordan jeg drar ham
Trinn 2: Nøkkel Tegninger
Når du vet din karakter innsiden ut, er det på tide å begynne å tenke på å bringe ham til livet. Animasjoner er planlagt gjennom nøkkelbilder En nøkkel tegning må planlegges i begynnelsen og slutten av en bevegelse, og hver gang en endring i retning eller rytme forekommer i animasjonen. Så, ta en titt på den endelige animasjon og skissere de viktigste tegninger tatt hensyn til disse pekerne. De bør se omtrent slik ut: Når du har fått taket på tegningen din karakter og har planlagt ut animasjon, er det på tide å gå videre til Flash. Start med å åpne en ny Flash-dokument. Standard 12 fps er for lavt for en animasjon, så for denne opplæringen vi skal bruke 15 fps. navn gjeldende lag "BG". Velg en lys farge og skissere de grunnleggende bakgrunnen av scenen, i vårt tilfelle, et rom. Ikke tegne noe fancy, bare de elementene som trengs for å skape den grove animasjon. Vegger, gulv, og vinduet For å skissere i Flash jeg velger vanligvis en stor pensel størrelse med trykkfølsomhet på og bringe glatting ned til rundt 10. Dette gir meg mer frihet til skisse, som jeg kan variere slaget tykkelse så mye som jeg vil, og ha mer kontroll over skarpe vinkler på grunn av den lave utjevning. Jeg foreslår at du bruker de samme innstillingene som meg. Ikke bry deg om slagene dine ser hakkete; vi kan fikse det på slutten. Nå kommer vi til å gjenskape de viktigste tegningene vi har gjort tidligere. Lag et nytt lag og gi den navnet noe sånt som "Spy". I det første bildet, skissere den første nøkkelen tegningen du planlagt før. Igjen, bare tegne grunnformene. Det skal se omtrent slik ut: Sett inn en tom keyframe (F7) i "Spy" lag. Slå på skinnelige lag, slik at du kan se den forrige rammen. Med den første tegningen som en guide, tegne den andre tasten tegningen. Gjenta den samme prosessen for resten av de viktigste tegninger. Når du er ferdig, bør du ha fem nøkkel med fem forskjellige nøkkel tegninger Vi kommer da det viktigste (og trolig den vanskeligste) skritt i å lage en animasjon.: timing Velg den første rammen i "Spy" laget og legge til et par tomme nøkkelbilder (F7) mellom første og andre nøkkel tegninger. Gjør det samme med resten nøkkelbilder. Dette er hva en tidslinje skal se ut: Test filmen (Ctrl + Enter). Som du kan se, er timingen helt feil, så gå tilbake til FLA for å fikse det. Hvis timingen mellom to viktige tegninger er for kort, legge mer tomme nøkkel mellom dem; hvis timingen er for lang, slette noen nøkkelbilder. Etter å tilpasse det litt, teste filmen for å se om det ser bedre ut enn før. Hvis det fortsatt ikke ser riktig gjelde noen flere endringer. Det er vanskelig å se for seg animasjon med bare fem nøkkelbilder, så ikke bekymre deg hvis det ikke er perfekt på dette stadiet; vi kan justere timingen på nytt senere. Så langt er dette mitt resultat: Kjernen i vår animasjon er nå ferdig, men det er fortsatt mye arbeid som må gjøres. For det første må vi legge til flere nøkkel å lage animasjonen virker glatt. Tegningene som vises mellom sentrale tegninger for å fullføre animasjonen er passende kalt inbetweens. Tegning inbetweens er ganske enkelt, som vi allerede har gjort det meste av arbeidet når vi har gjort de viktigste tegningene. Velg en keyframe mellom de to første viktige tegninger og slå på skinnelige lag. Med to tegninger som en referanse, tegne spionen halvveis mellom de sentrale tegninger i gjeldende rammen. Gjenta prosessen. Tegn en ny keyframe mellom hver av de viktigste tegninger. Du bør ha ni nøkkelbilder. Test filmen. Hvis timingen fremdeles ikke ser riktig ut, nå er det på tide å endre det. Som jeg sa tidligere, er timing den viktigste delen i animasjon, så ta deg tid til å sørge for at det er riktig. Etter tweaking nøkkelbilder, bør animasjonen se slik ut: Det er litt mer å forklare. Hold legge inbetweens mellom inbetweens å jevne ut animasjonen til det ikke er flere tomme nøkkel igjen. Test din film å se om noe må fikses. Dette var mitt resultat opp til dette stadiet: Den grove animasjonen er nå gjort. I denne delen av opplæringen vil vi jobbe med å tegne den rene versjonen av vår karakter. Opprett en ny mappe og gi den navnet "grov". Drei "BG" og "Spy" lag i guide lag slik at de ikke vil bli vist når filmen er publisert. Lås begge lag, og sette dem i mappen. Lag et nytt lag og gi den navnet "Spy" igjen. I dette laget skal vi trekke den rene versjonen av vår karakter. Endre fyllfargen til svart og sette børsteinnstillinger som beskrevet i trinn 4. Nå tar ut tegningene du gjorde i begynnelsen. Bruke dem som en referanse for å tegne spion over grove tegningen. Gjør det samme for alle nøkkelbildene. Du kan bruke gjennomskinnelige lag til å bruke den tidligere rammen som en referanse. Ting er definitivt ser mye renere, men de er fortsatt ikke rent nok. Ta en nærmere titt på de rene tegninger. Du vil merke slag er hakkete. Vi kunne forlate dem som er for denne animasjonen, men hvis vi jobber med et større prosjekt, ville vi trenger for å optimalisere dem. Optimalisering er en metode Flash bruker for å avgrense en figur ved å redusere mengden av kurver for å definere formen. For å optimalisere slag i animasjonen, velg tegninger fra alle bildene (med "Rediger flere frames" slått på), og klikk Endre> Figur> Optimize (CRT + Alt + Shift + C). Optimaliser Curves dialogboks vil åpne opp. Du kan justere mengden glatting med glidebryteren. Sjekk "Bruk flere pasninger" boksen. Dette vil jevne formen igjen og igjen til det ikke lenger glatting kan oppnås uten at det påvirker formen. Når du klikker OK, vil meldingen komme opp som viser hvor mange prosent av kurven reduksjon. Slå av "edit flere rammer" og ta en titt på tegningene. De er mye jevnere nå, men sjansene er optimalisering har endret (minst litt) formene. Du kan redigere dem med Free Transform Tool (Q). Sørg for at alle tegningene er lukket og har ingen hull. Det er nå på tide å gi den spion litt farge. Så ta tak i Paint Bucket (K) og fylle ham inn! Jeg brukte # 000033 for hodet, # 010243 for kroppen, og #FFFFFF for øynene. Merk: Hvis du klikker med Paint Bucket inne i tegning og ingenting skjer, betyr det at tegningen har et gap et sted. Finn det og lukke den med Free Transform Tool Animasjonen er ferdig, men det er noen forbedringer fortsatt igjen å gjøre. Hva jeg forklare her er bare forslag som du ikke må følge ord for ord, og jeg vil derfor ikke bruke mye tid på hver enkelt Nå som vi har farget spionen vi trenger en like fargerik bakgrunn. Formålet med denne opplæringen, derimot, var å vise prosessen med animasjon, så skaper bakgrunnen er utenfor rammen av denne tut. Men for de som er nysgjerrige, her er en rask oppsummering av hvordan det ble gjort: Jeg gjenskapt rommet i Swift3D, et program utviklet for å innlemme 3D-elementer i Flash. Jeg eksport scenen som vektorer og åpnet den i Flash. Til slutt, jeg har gjort noen endringer i farge og lagt en gul glød for lampen. Du kan lage din bakgrunn direkte i Flash eller annen måte vil. Hvis du ønsker å bruke mine, finner du det i kildefilene Som du har sikkert allerede lagt merke til, det er et lite problem som vi trenger å fikse. Fordi "Spy" laget er på toppen av "BG" lag, kan vi se spion når han er ment å være bak veggen i første bilde. For å dekke en del av hans kropp som ikke skulle bli vist vi skal bruke en lagmaske. Lag et nytt lag, slå den inn i en maske laget, og hensiktsmessig name it "Mask". Gjør "Spy" lag maskert. Hvis du har vært i stand til å følge med denne opplæringen, har du sannsynligvis vet Flash godt nok til å bli kjent med lagmasker, men jeg skal gå over dem raskt: En maske laget inneholder en fylt form som gjør at en bundet (maskert) lag for å bli sett gjennom den; alle tomme områder i maske laget vil bli usynlig i den maskerte laget. Vår Masken skal dekke hele spion (i alle rammer der en del av kroppen hans skal skjules) med unntak av den delen som stikker ut av vinduet. De sier at et bilde er verdt tusen ord, så ta en titt nedenfor: Hvis du er interessert i Flash-animasjon, bør du ta turen til biteycastle.com og sjekk ut Adam Phillips prisbelønte animasjoner samt hans bitey Castle Academy. Anmeldelser
(også kalt thumbnails
). I denne opplæringen vil jeg referere til dem som nøkkel tegninger
slik som å ikke forveksle dem med Flash er nøkkelbilder. Så, hva er en nøkkel tegning? Nøkkel tegninger er tegninger som forteller historien og definerer bevegelsen i en animasjon. Med andre ord, de er en måte å oppsummere animasjon i noen tegninger. Eksempelet nedenfor viser hvordan en liten forskjell i en nøkkel tegning kan ha en stor innvirkning på den endelige animasjonen:
Part II: The Rough Animation
Trinn 3
Trinn 4
Trinn 5
Trinn 6
Step7
Step8
; å beregne tiden mellom våre nøkkel tegninger. Hva vi gjør nå vil avgjøre hele animasjon, så det er viktig at det blir gjort riktig.
Trinn 9
Trinn 10
Trinn 11
Trinn 12
Step 13
Del III: The Clean Animation
Step 14
Step 15
Trinn 16
Trinn 17
Trinn 18
Del IV:. Finpuss
Trinn 19:. En ren bakgrunn
Trinn 20:. Maske