Før vi starter på vår første animasjon, Bouncing Ball, vil jeg først ta en teknisk utfordring: Teksten skal tegnes inn, akkurat som om teksten ble skrevet for hånd. Fig Leaf Rag har en vakker innledning med en aksent på slutten, hvor vi vil plassere utropstegnets punkt.

Det finnes flere metoder som kan fungere bedre eller dårligere, avhengig av situasjonen vi har. Ettersom jeg arbeider med et grafisk brett, vil jeg male teksten og vise dere hvordan animasjonen fungerer. Først vil jeg imidlertid vise dere hvordan man også kan gjøre det, selv om det ikke er min favorittmetode:


Trinn 1-10

Trinn 1

Jeg vil fjerne tekstlaget og i stedet opprette et komposisjonslag, et vanlig piksellag hvor jeg kan male. Teksten skal være i laget. Jeg oppretter derfor en underkomposisjon med Ctrl+Skift+C eller via Lag>Opprett underkomposisjon. Dette kaller jeg "Typo_Intro".

Animasjon gjort enkelt: Strek-animasjon

Trinn 2

Alle attributtene ble tatt med, også Turbulent Offset.

Siden jeg ikke ønsker dette, klikker jeg på Turbulent Offset, trykker på Ctrl+X og limer dette inn i en komposisjon lenger opp ("Fig Leaf Rag").

Animasjon gjort enkelt: Strektegning

Trinn 3

La oss gå tilbake til komposisjonen "Typo_Intro". Her har vi avdekket teksten og kan animere denne.

Første alternativ er via Stier. Jeg bruker Penn-verktøyet og trekker den første linjen til bokstaven A på teksten. Deretter stopper jeg og klikker et eller annet sted i det svarte mens jeg holder Ctrl--tasten nede, for å avslutte den nåværende stien, før jeg fortsetter med å tegne den andre linjen til A.

Jeg stopper igjen, klikker med Ctrl--tasten i det svarte og tegner deretter neste linje og så videre, til hele teksten er tegnet.

Animasjon laget enkelt: Strektegning

Trinn 4

Nå legger jeg til en effekt. Vi finner den som Kontur i CC-versjonen under Generere. I CS6 ble den kalt Strikkeffekt.

Der velger vi en maske og huker av for Alle masker, slik at vi kan la disse maskene tegne.

Animasjon laget enkelt: Strek-animasjon

Trinn 5

Jeg skjuler maskene med dette lille symbolet og farger stien rød. Jeg kan også endre Størrelse, men det gjelder globalt for alle maskene.

Når maskene er synlige igjen, kan jeg justere og tilpasse de enkelte punktene, slik at hele den hvite teksten under dekkes.

Animasjon gjort enkelt: Striekanimasjon

Trinn 6

Det fine her er at jeg har en Start- og Slutt-skyveknapp: jeg skyver den fra start til slutt, og kan dermed la hele teksten tegnes.

Dette fungerer veldig bra, men man har ikke nøyaktig kontroll. For eksempel må man alltid bruke samme strekbredde, man kan altså ikke tegne tynnere og tykkere.

Animasjon gjort enkelt: strektegning



Derfor vil jeg gjerne vise dere en annen metode, som etter min mening er litt raskere enn å tegne alt individuelt ...

Trinn 7

I dette tilfellet foretrekker jeg den litt raskere metoden med en Pensel.

Denne penselen kan imidlertid ikke brukes på tekstlag. Derfor må vi opprette en underkomposisjon og kalle den "Typo_Statisch". Vi kan jobbe direkte i denne underkomposisjonen.

Animasjon laget enkelt: Streakanimasjon

Trinn 8

Når vi vil bruke en pensel og dobbeltklikker på penselmodus, åpnes lagbehandleren og det er kun der vi kan jobbe med penselen.

Det har også blitt opprettet to nye paneler: Pensel og Malen. I Pensel-panelet kan vi justere størrelse, hardhet osv. av penselen.

Og i Malen-panelet kan vi velge malingsmetoden. Først står den på konstant for Varighet, men jeg endrer den til Animert mal.

Jeg setter en strek, så en til og en til - men så snart jeg har fullført en strek forsvinner den merkelig nok.

Animasjon gjort enkelt: Strektegning

Trinn 9

Når jeg går tilbake til den andre fanen og beveger meg langs tidslinjen, ser jeg at alle strekene er der og alle tegnes automatisk.

Animasjon enkelt laget: Strektegning.

Trinn 10

Hvis man trykker UU for alle endrede egenskaper, får vi her nede mange underegenskaper.

For hver enkelt vises også start og slutt.

I tillegg kan vi endre individuell avstand, hardhet og til og med posisjon av hver strek - selv etter at den er tegnet.

Animasjon enkelt laget: Streganimasjon

Fortsett enkelt: Trinn 11–20

Trinn 11

Jeg sletter alt en gang til, slik at vi får bedre oversikt.

Jeg trekker en ny strek en gang til, og når du er i lagvisningen, ser du stien. Det er det som blir lagret.

Hvis jeg for eksempel ikke liker den tegnede streken, kan jeg male over den ved å velge den og bare male den på nytt. Den vil bli oppdatert og enkelt overskrevet.

Animasjon gjort enkelt: strektegning

Trinn 12

Jeg vil også gjerne ettertegne teksten, for det er den aller raskeste måten å animere noe på.

Så jeg gjør min diameter litt mindre og går over teksten med grafikkbrettet og tegner den inn her.

Animasjon gjort enkelt: Strekanimasjon

Trinn 13

Jeg har tegnet alle strekene, og når vi spiller det hele av i tidslinjen, ser vi også at alt er der.

Hvis jeg trykker U, får vi alle nøkkelruter tilbake.

Animasjon gjort enkelt: Streganimasjon

Trinn 14

Hvis jeg trykker på tasten Ü, maksimeres vinduet jeg hover over med musen. I dette tilfellet tidslinjen. Slik får jeg mer plass og kan bedre se elementene som skiller seg ut. Disse trekker jeg litt tilbake, slik at alle varer omtrent like lenge.

Animasjon laget enkelt: Strektegning

Trinn 15

La oss spille det av.

Forresten: Hvis du ved et uhell har trykket på Caps Lock, oppdaterer ikke After Effects lenger. Da får du beskjeden Deaktiver caps lock for å oppdatere visningen.

Når vi nå lar det spille av, begynner After Effects å tegne alle bokstavene samtidig. Men det skal jo begynne foran og deretter gå bakover. Og akkurat det er utfordringen. For å få det slik jeg vil, må jeg time hele greia manuelt - en strek om gangen. Det er ganske arbeidskrevende. Jeg vil gjerne gjøre det raskere.

I neste trinn vil jeg forklare nøyaktig hvordan - men først markerer vi alle strekene.

Animasjon gjort enkelt: Stiftanimasjon

Trinn 16

Derfor bruker jeg et script for å sette disse nøkkelrutene etter hverandre.

Dette scriptet har jeg skrevet selv og har selvfølgelig gitt det med. Du finner det i mappen Scripts med navnet Sequence strokes. Hvem som kjenner filmen "Sequence layers from After Effects" kan omtrent forestille seg hva dette scriptet gjør.

Jeg åpner scriptet i Extend Script og kjører det.

Animasjon lett laget: Streganimasjon

Trinn 17

Nå har vi praktisk talt en trapp av nøkkelruter og teksten tegnes steg for steg. Imidlertid er det fortsatt veldig sakte.

Dette må vi øke hastigheten på. For å gjøre dette velger vi alt, tar den siste nøkkelruten vi finner, trykker på Alt-tasten og drar den til 5 sekunder.

Da går det betydelig raskere.

Animasjon gjort enkelt: Strektegning



Den siste punkten må forsinkes litt til, men det tar vi oss av straks.

Trinn 18

Jeg vil gjerne snakke litt om offset-verdien. Den påvirker nøkkelruteovergangene:

Hvis vi ser på nøkkelruteovergangene nå, begynner den neste alltid nøyaktig der den forrige slutter (a).

Hvis jeg ikke vil ha det sånn, og for eksempel heller vil ha to rammer pause mellom to streker, skriver jeg inn 2 i offset.

Naturligvis må jeg velge alle pensler igjen før jeg kan aktivere scriptet. Med Ctrl+A kan jeg velge alle på en gang.

Animasjon lett laget: Streakanimasjon



Eller jeg vil at rammene skal overlappe, da setter jeg verdien -2 på offset. Da ville den alltid gå to rammer tilbake bak den faktiske. Hvis du imidlertid har forkortet det så raskt som vi har gjort her, gir dette ingen mening. Jeg er fornøyd med 2 og lar det være slik.

Trinn 19

Hva jeg absolutt vil endre på, er timingen av utropstegnet. Jeg vil gjerne justere det bedre i forhold til musikken.

Derfor trenger jeg også musikken i komposisjonen. Jeg går derfor til fanen "Fig Leaf Rag" og kopierer filen.

Deretter går jeg eventuelt tilbake til komposisjonen med Alt--klikk og legger den inn her.

Animasjon gjort enkelt: Strektegning

Trinn 20

Nå ser vi hvor de to posisjonene vi trenger, er. For å gjøre dette, bruker jeg Num-Pad og trykker på Komma--tasten for å lage en forhåndsvisning. Jeg trykker på stjernetasten * på Num-Pad for å sette en markør. På enheter uten Num-Pad, spesielt på Mac, ville det være cmd+Komma for forhåndsvisning og cmd+8 for markøren.

Jeg lar nå musikken spille og setter markørene nøyaktig der streken og punktet til utropstegnet skal komme (1). Nøyaktig ved de to aksentene i melodien.

Jeg har dermed satt to markører: Ved den første skal streken til utropstegnet være ferdig, og ved den andre skal punktet settes.

Jeg plasserer hjelpelinjen på den første markøren og bytter til komposisjonen "Typo_Statisch". Der skyver jeg den rammen til hjelpelinjen, som markerer linjen til utropstegnet (2).

Jeg gjør det samme med den andre markøren, som viser posisjonen for punktet: Jeg setter hjelpelinjen på markøren, bytter til komposisjonen og flytter rammen i henhold.

Animasjon laget enkelt: Streganimasjon

De siste trinnene

Trinn 21

Jeg vil gjerne la streken til utropstegnet tegnes saktere enn skriften før, slik at vi får mer trykk på utropstegnet (1).

Og skriften skal generelt bli litt raskere ferdig. Derfor markerer jeg alt før (2) og flytter det litt fremover (3).

Da passer timingen perfekt.

Animasjon laget enkelt: Strektegning

Trinn 22

Vi malte skriften over tekst og vil nå endre litt på den.

Jeg dupliserer først laget "Typo_Statisch" og sletter malings-effekten på det nederste laget.

Animasjon gjort enkelt: Streganimasjon

Trinn 23

På det øvre laget har vi den malte teksten med den hvite originalen under.

På det nedre laget har vi den helt vanlige hvite teksten.

Hvis vi huker av for Maler gjennomsiktighet på det øvre laget, er det bare de malte røde stripene igjen.

Animasjon laget enkelt: Strep-tegning

Trinn 24

Så det øvre laget skal brukes som maske for det nedre laget.

Hvis masken ikke vises, klikker du bare nederst på Aktiver/deaktiver blendingsmodus, så vises den bevegelige masken BewMas.

Der kan jeg velge en alfa-maske og oppnå akkurat det resultatet jeg trenger. Det vil si, overalt hvor disse stripene tegnes, er også min originale tekst synlig.

Animasjon gjort enkelt: Strektegning



Jeg har imidlertid rotet med noe, fordi bokstaven A allerede er der i begynnelsen.

Trinn 25

Så velger vi best alle penslene med et rektangel--utvalg fra bunn til topp (1) og tar deretter ut de to rammene til utropstegnet med Shift + utvalg (2). De to er allerede tidfestet perfekt.

Deretter flytter vi den første rammen litt til høyre nedenfor, slik at A-en fortsatt ikke er synlig helt i begynnelsen.

Nå passer det.

Animasjon gjort enkelt: Strektegning

Trinn 26

Vi gjorde dette i underkomposisjonen, her har vi fortsatt effekten Skakende forskyvning.

Når vi ser på helheten i denne komposisjonen, har vi den ikke bare i gult og fargen endres, men den dirrer også.

Animasjon gjort enkelt: Strektegning

Trinn 27

Det er fantastisk og passer perfekt, men fargen skal endres etterpå eller faktisk ikke i det hele tatt. Endre farger er derfor foreløpig utelatt.

Animasjon gjort enkelt: Strek-animasjon



Slik har vi de første 4 sekundene av traileren ferdig, og vi sees igjen i neste del av opplæringen, med den sprettende ballen.