Før vi kaster os over vores første animation, Bouncing Ball, vil jeg først lave en teknisk udfordring: Teksten skal tegnes ind, som om man havde skrevet teksten i hånden. Fig Leaf Rag har en smuk indledning med tryk på slutningen, hvor vi vil placere udråbstegnets punkt.

Der er flere metoder, der er mere eller mindre gode, afhængigt af den situation, vi står overfor. Da jeg arbejder med en grafik tablet, vil jeg male skriften og vise jer, hvordan animationen fungerer. Men først vil jeg vise jer, hvordan man også kunne gøre det, selvom det ikke er min favoritmetode:


Trin 1–10

Trin 1

Jeg vil gerne fjerne tekstlaget og i stedet oprette et kompositionslag, et almindeligt pixellag, hvor jeg kan male. Teksten skal være indeni laget. Så opretter jeg en underkomposition ved at bruge Ctrl+Shift+C eller via Lag>Komposition. Dette kalder jeg "Typo_Intro".

Animation let at lave: Streganimation

Trin 2

Alle attributter blev overført, også Turbulent Displacement.

Da jeg ikke ønsker dette, markerer jeg Turbulent Displacement, trykker Ctrl+X og indsætter det hele et kompositionslag højere oppe ("Fig Leaf Rag").

Animation let at lave: Streganimation

Trin 3

Lad os vende tilbage til "Typo_Intro"-kompositionen. Her har vi afsløret teksten og kan animere det hele.

Det første valgmulighed ville være via Spor. Jeg tager Pen Tool og trækker den første linje af bogstavet A på teksten. Derefter afslutter jeg og klikker et sted på skærmen med Ctrl-tasten nede, for at afslutte den nuværende sti, før jeg trækker den næste linje af A.

Jeg afslutter igen, klikker på skærmen med Ctrl-tasten nede og trækker derefter den næste linje og så videre, indtil hele skriften er tegnet efter.

Animation let at lave: Streganimation

Trin 4

Nu tilføjer jeg en effekt. I CC-versionen findes det som Stroke under Generate. I CS6 kaldes det Stroke Effect.

Vi vælger en maske eller sætter flueben ved All Masks og kan dermed lade disse masker tegne.

Animation let at lave: Streganimation

Trin 5

Jeg skjuler maskerne med dette lille symbol og farver stien rød. Jeg kan også ændre størrelsen, dog kun globalt for alle masker.

Jeg kan desuden, når jeg viser maskerne igen, flytte og tilpasse de enkelte punkter, så den samlede hvide tekst nedenunder er dækket.

Animering let at lave: Streganimation

Trin 6

Det gode er: Her har jeg en Start- og Slut-slider: Jeg trækker den fra start til slut, og kan derved lade hele teksten tegne.

Det fungerer rigtig godt, men man har ikke den nøjagtige kontrol. Man skal for eksempel altid bruge samme stregtykkelse, så man ikke kan tegne tyndere og tykkere.

Animation let at lave: Streganimation



Derfor vil jeg gerne vise jer en anden metode, som jeg synes er lidt hurtigere end at tegne alt hver for sig ...

Trin 7

I dette tilfælde foretrækker jeg den lidt hurtigere metode med Pensel.

Denne Pensel kan imidlertid ikke anvendes på tekstlag. Vi skal derfor oprette en Underkomposition og kalde den "Typo_Statiske". I denne Underkomposition kan vi arbejde med det samme.

Animation let at lave: Strekanimation

Trin 8

Når vi vil arbejde med Pensel og dobbeltklikker på Pensel-tilstand, åbner lagpanelet, og det er kun der, man kan arbejde med Pensel.

Der er også opstået to nye paneler: Pensel og Mal. I Pensel-panelet kan vi justere størrelse, hårdhed osv. af penslen.

Og i Mal-panelet kan vi vælge maleriets art. Under Varighed står der konstant først, men dette ændrer jeg til Animér maleri.

Jeg tegner en streg, og endnu en, og endnu en - men så snart jeg har tegnet en streg færdig, forsvinder den mærkeligt nok.

Animation let at lave: Streganimation

Trin 9

Når jeg går tilbage til den anden fane og kører langs tidslinjen, kan jeg se, at alle streger er der, og de bliver alle automatisk tegnet.

Animation let at lave: streganimation

Trin 10

Når man trykker på UU for alle ændrede egenskaber, får vi her nede mange under-egenskaber.

For hver enkelt vises også start og slutning.

Derudover kan vi ændre hver enkelt streges afstand, hårdhed og endda position - selv efter at den er blevet tegnet.

Animation let at lave: Streganimation

Bliv ved: Trin 11-20

Trin 11

Jeg sletter alt igen, så vi kan bevare overblikket.

Jeg tegner endnu en streg, og når I er i lagvisningen, kan I se stien. Det er det, der gemmes.

For eksempel, hvis den malede streg ikke falder i din smag, kan du også male over den ved blot at vælge den og derefter male igen. Den bliver opdateret og overskrevet.

Animation let at lave: Streganimation

Trin 12

Jeg vil også gerne tegne teksten igen, fordi det er den hurtigste måde at animere sådan noget på.

Jeg gør derfor min diameter lidt mindre og trækker teksten med grafiktabletten og tegner den her ind.

Animation let at lave: Streganimation

Trin 13

Jeg har tegnet alle streger, og når vi afspiller det hele i tidslinjen, kan vi også se, at alt er der.

Når jeg trykker på U, vises alle nøgleframes igen.

Animation let at lave: Streganimation

Trin 14

Når jeg trykker på tasten Ü, maksimeres vinduet, som musen på det tidspunkt befinder sig over. I dette tilfælde tidslinjen. Så får jeg mere plads og kan bedre se elementerne, der skiller sig ud. Disse trækker jeg lidt tilbage, så de alle varer nogenlunde det samme.

Animation nemt lavet: Streganimation

Trin 15

Lad os afspille det.

I øvrigt: Hvis I ved et uheld har trykket på Caps Lock, opdaterer After Effects ikke længere. Så får I beskeden Deaktivér Caps Lock for at opdatere visningen.

Når vi nu lader det afspille, begynder After Effects at tegne alle bogstaver samtidig. Det skal dog begynde forrest og derefter fortsætte bagud. Og det er præcis det, der er problemet. For at få det, som jeg ønsker det, skal jeg justere hele tinget manuelt - en streg ad gangen. Det er en stor opgave. Jeg vil gerne have det gjort hurtigere.

I næste trin vil jeg forklare jer, hvordan præcist - men først markerer vi alle stregerne.

Animation let at lave: streganimation

Trin 16

Derfor bruger jeg et script, der placerer disse nøgleframes efter hinanden.

Dette script har jeg selv skrevet og har naturligvis også givet jer det. I finder det i mappen Scripts med navnet Sequence strokes. Hvis I kender filmen "Sequenzebenen aus After Effects", kan I omkring forestille jer, hvad dette script gør.

Jeg åbner scriptet i Extend Script og kører det.

Animation let at lave: Streget animation.

Trin 17

Nu har vi stort set en trappe af nøgleframes, og teksten tegnes skridt for skridt. Dog stadig meget langsomt.

Det skal vi fremskynde. Til det vælger vi alt, tager den sidste nøgleframe, vi finder, holder Alt-tasten nede og trækker den til 5 sekunder.

Så går det meget hurtigere.

Animation let at lave: Streganimation



Det sidste punkt skal forsinkes lidt, men det tager vi os af med det samme.

Trin 18

Jeg vil gerne tale om værdien offset-. Den påvirker overgangene mellem nøgleframes:

Hvis vi ser på nøgleframe-overgangene lige nu, begynder den næste altid præcis der, hvor den forrige slutter (a).

Hvis jeg ikke ønsker det og for eksempel hellere vil have to frames pause mellem to streger, indtaster jeg en 2 i offset.

Naturligvis skal jeg igen vælge alle pensler, før jeg kan aktivere scriptet. Med Ctrl+A kan jeg vælge dem alle på én gang.

Animation let at lave: Streganimation



Eller jeg vil have, at frames overlapper, så indstiller jeg værdien på offset til -2. Derefter vil den altid gå to frames tilbage bagved den faktiske. Hvis I imidlertid har forkortet det så hurtigt som her, giver det ingen mening. Jeg er også tilfreds med toeren og holder fast i den.

Trin 19

Hvad jeg helt sikkert gerne vil ændre, er timingen af udråbstegnet. Jeg vil gerne placere det bedre i forhold til musikken.

Derfor har jeg brug for musikken i kompositionen. Jeg går derfor til fanen "Fig Leaf Rag" og kopierer filen.

Derefter går jeg evt. tilbage til kompositionen ved at trykke Alt-og klikke her for at indsætte den.

Animation let at lave: Streganimation

Trin 20

Nu ser vi, hvor de to positioner, vi har brug for, er. Til dette bruger jeg Num-Pad og trykker på Komma-tasten for at oprette en forhåndsvisning. Jeg trykker på stjernetasten * på Num-Pad for at placere en markør. På enheder uden Num-Pad, især på Mac, ville det være Cmd+Komma for forhåndsvisning og Cmd+8 for markør.

Jeg lader nu musikken afspille og placerer markørerne præcist på de steder, hvor stregerne og punktet på udråbstegnet skal komme (1). Nemlig præcist ved de to accenter i melodien.

Jeg har altså sat to markører: Ved det første skal stregerne på udråbstegnet være færdige, og ved det andet skal punktet sættes.

Jeg placerer linjen på den første markør og skifter til kompositionen "Typo_Statisch". Her flytter jeg den ramme til linjen, der angiver linjen på udråbstegnet (2).

Det samme gør jeg med den anden markør, der angiver positionen for punktet: Jeg placerer linjen på markøren, skifter til kompositionen og flytter rammen derefter.

Animation let at lave: Streganimation

De sidste trin

Trin 21

Jeg vil gerne have stregerne på udråbstegnet til at blive tegnet langsommere end skriften foran, så vi har en stærkere effekt på udråbstegnet (1).

Og skriften skal generelt færdiggøres lidt hurtigere. Jeg markerer derfor alt det foran (2) og trækker det lidt fremad (3).

Så passer timingen helt perfekt.

Animering gjort let: Streganimation

Trin 22

Vi har malet teksten over teksten og vil nu ændre noget ved det.

Først kopierer jeg laget "Typo_Statisch" og sletter effekten Malen-på det nederste lag.

Animation let at lave: Streganimation

Trin 23

På det øverste lag har vi altså den malede tekst med den hvide original under. På det nederste lag har vi den helt normale hvide tekst.

Hvis vi markerer afkrydsningsfeltet Male gennemsigtighed på det øverste lag, er der kun de malede røde streger tilbage.

Animation let at lave: Streganimation

Trin 24

Det øverste lag skal altså bruges som maske for det nederste lag.

Hvis masken ikke vises, klikker du simpelthen nederst på Aktiver/deaktiver blandingstilstande, så vises bevæget maske BewMas.

Derefter kan jeg vælge en alfa-maske og opnå præcis det resultat, jeg har brug for. Dvs., overalt hvor disse streger er tegnet, er min originale tekstsynlig.

Animation let at lave: Streganimation



Jeg er dog skredet på en eller anden måde, fordi A'et allerede er der helt i starten.

Trin 25

Så vi vælger bedst igen alle pensler med en rektangel-udvælgelse nedefra og helt op (1) og fjerner derefter de to rammer på udråbstegnet med Shift+udvælgelse (2). De to er allerede perfekt positioneret tidsmæssigt.

Derefter flytter vi den første ramme lidt til højre nederst, så A'et slet ikke er synligt i starten.

Nu passer det.

Animation er let: Stregeanimation

Trin 26

Vi har gjort det i underkompositionen, her har vi stadig effekten Roterende forskydning.

Hvis vi ser det hele i denne komposition, er det ikke kun i gult, og farven ændrer sig, men det bevæger sig også.

Animation let at lave: Streganimation

Trin 27

Det er vidunderligt og passer perfekt, men farven skal ændres bagefter eller overhovedet ikke. Skift farver forbliver derfor deaktiveret foreløbig.

Animation let at lave: Streganimation



Så har vi de første 4 sekunder af traileren færdige, og vi ser hinanden igen i næste del af tutorialen, med Bouncing Ball.