Voordat we ons richten op onze eerste animatie, de Bouncing Ball, wil ik eerst een technische uitdaging aangaan: de tekst moet zichzelf tekenen, alsof de tekst met de hand is geschreven. Fig Leaf Rag heeft een prachtige intro met de klemtoon aan het einde, waar we het uitroepteken zullen plaatsen.
Er zijn verschillende methoden die meer of minder effectief zijn, afhankelijk van de situatie. Omdat ik met een grafisch tablet werk, zal ik het schrift tekenen en laten zien hoe het animeren werkt. Maar voordat ik dat doe, zal ik jullie laten zien hoe het ook gedaan kan worden, hoewel dit niet mijn favoriet is:
Stappen 1-10
Stap 1
Ik wil de tekstlaag verwijderen en in plaats daarvan een compositielaag, een normale pixellaag, waarop ik kan schilderen. De tekst moet binnen de laag zitten. Ik maak dus een subcompositie met Ctrl+Shift+C of via Laag>Subcompositie maken. Dit noem ik "Typo_Intro".
Stap 2
Alle eigenschappen zijn behouden, inclusief Turbulent Displace.
Omdat ik dat niet wil, klik ik op Turbulent Displace, doe Ctrl+X en voeg dat dan een compositie hoger ("Fig Leaf Rag") opnieuw in.
Stap 3
Laten we teruggaan naar de "Typo_Intro"-compositie. Hier hebben we de tekst blootgelegd en kunnen we dit alles animeren.
De eerste optie zou zijn via Paden. Ik pak het Pennengereedschap en trek de eerste lijn van de letter A over de tekst. Dan pauzeer ik en klik ergens in het zwarte met ingedrukte Ctrl-toets en eindig zo het huidige pad voordat ik de tweede lijn van de A volg.
Vervolgens pauzeer ik weer, klik ik in het zwart met ingedrukte Ctrl-toets en trek dan de volgende lijn en zo verder, totdat de gehele tekst is nagetrokken.
Stap 4
Nu voeg ik een effect toe. We vinden dit als Contour in de CC-versie onder Generate. In CS6 heette dit Stroke Effect.
Dan kiezen we een masker uit of vinken Alle Maskers aan en kunnen zo deze maskers laten tekenen.
Stap 5
Ik verberg de maskers met dit kleine symbool en kleur het Pad rood. Ik kan ook de Grootte aanpassen, maar dit geldt alleen globaal voor alle maskers.
En als ik de maskers weer zichtbaar maak, kan ik de afzonderlijke punten nog verplaatsen en aanpassen, zodat de gehele witte tekst eronder bedekt is.
Stap 6
Het mooie hiervan is: Ik heb hier een Begin- en Eind-schuifregelaar: Ik trek van begin tot eind en zo kan ik de hele tekst laten tekenen.
Dit werkt goed, maar je hebt niet de exacte controle. Je moet bijvoorbeeld altijd dezelfde lijndikte gebruiken, dus je kunt niet dunner en dikker tekenen.
Daarom wil ik jullie graag nog een andere methode laten zien die naar mijn mening iets sneller gaat dan alles afzonderlijk na te trekken...
Stap 7
In dit geval geef ik de voorkeur aan de iets snellere methode met de Penseel.
Deze Penseel kan echter niet op tekstlagen worden toegepast. We moeten dus opnieuw een Subcompositie maken en noemen het "Typo_Statisch". In deze Subcompositie kunnen we direct werken.
Stap 8
Zodra we met de Penseel willen werken en dubbelklikken in de Penseelmodus, opent het Lagenvenster en only dan kunnen we met de Penseel werken.
Er zijn ook twee nieuwe panelen verschenen: Penseel en Schilderen. In het Penseel-paneel kunnen we de grootte, hardheid, enz. van de penseel instellen.
En in het Schilderen-paneel kunnen we de manier van schilderen kiezen. Bij Duur staat aanvankelijk constant, maar ik verander dit naar Geanimeerd schilderen.
Ik zet een streep neer en nog een en nog een - maar zodra ik een streep af heb, verdwijnt hij op een vreemde manier.
Stap 9
Wanneer ik naar het andere tabblad ga en langs de tijdlijn scroll, zie ik dat alle lijnen er zijn en allemaal automatisch worden getekend.
Stap 10
Als je UU invoert voor alle gewijzigde eigenschappen, krijgen we hieronder heel veel subeigenschappen.
Voor elk daarvan worden ook begin- en eindpunten weergegeven.
Bovendien kunnen we de individuele afstand, hardheid en zelfs de positie van elke lijn veranderen - zelfs nadat deze is getekend.
Gewoon doorgaan: Stap 11–20
Stap 11
Ik wis nogmaals alles, zodat we meer overzicht hebben.
Ik teken nogmaals een nieuwe lijn en als je in de lagenweergave bent, zie je het pad. Dat is wat er wordt opgeslagen.
Stel dat de getekende lijn me niet bevalt, dan kan ik deze ook overschilderen door deze te selecteren en vervolgens gewoon opnieuw te tekenen. Het wordt geüpdatet en eenvoudig overschreven.
Stap 12
Hetzelfde geldt voor het traceren van de tekst, want dat is de snelste manier om zoiets te animeren.
Dus ik maak mijn diameter iets kleiner en volg de tekst met mijn grafische tablet en teken deze hier in.
Stap 13
Ik heb alle lijnen getekend en als we alles afspelen in de tijdlijn, zien we ook dat alles er is.
Als ik op U druk, krijgen we al onze keyframes terug.
Stap 14
Als ik op de toets Ü druk, wordt het venster waarover de muis beweegt gemaximaliseerd. In dit geval de tijdlijn. Zo heb ik meer ruimte en kan ik elementen die eruit springen beter herkennen. Ik breng ze een beetje terug, zodat ze allemaal ongeveer even lang duren.
Stap 15
Laten we het eens afspelen.
Overigens: Als je per ongeluk de Caps Lock hebt ingeschakeld, update After Effects niet meer. Dan krijg je de melding Caps Lock uitschakelen om de weergave te vernieuwen.
Als we dit nu laten afspelen, begint After Effects met het tekenen van alle letters tegelijk. Het zou echter van voren moeten beginnen en dan naar achteren gaan. En dat is precies het knelpunt. Om het te krijgen zoals ik wil, zou ik alles met de hand moeten tijdgeven - één lijn per keer. Dat is een behoorlijke klus. Ik wil het graag sneller maken.
In de volgende stap leg ik uit hoe precies - maar eerst markeren we alle lijnen.
Stap 16
Daarom gebruik ik een script dat deze keyframes na elkaar plaatst.
Dit script heb ik zelf geschreven en natuurlijk ook meegegeven. Je vindt het in de map Scripts met de naam Sequentie lijnen. Wie de film "Sequence lagen uit After Effects" kent, kan zich ongeveer voorstellen wat het script doet.
Ik open het script in Extend Script en voer het uit.
Stap 17
Nu hebben we als het ware een trap van keyframes en de tekst wordt stap voor stap getekend. Nog steeds zeer langzaam.
Dat moeten we versnellen. Selecteer alles, pak de laatste keyframe die je vindt, druk op de Alt-toets en sleep deze naar 5 seconden.
Dan gaat het al veel sneller.
De laatste punt moet nog wat vertraagd worden, maar daar zullen we ons zo meteen mee bezighouden.
Stap 18
Ik wil nog graag praten over de offset-waarde. Deze heeft invloed op de keyframe-overgangen:
Als we momenteel naar de keyframe-overgangen kijken, begint de volgende altijd precies waar de vorige eindigt (a).
Als ik dat niet wil en bijvoorbeeld liever twee frames pauze tussen twee lijnen wil, geef ik een 2 in bij offset.
Natuurlijk moet ik eerst alle penseelstreken selecteren voordat ik het script kan activeren. Met Ctrl+A kan ik ze allemaal tegelijk selecteren.
Of als ik wil dat de frames elkaar overlappen, stel ik de waarde op -2 voor offset in. Dan zou het altijd twee frames achter de eigenlijke gaan. Als je het echter al zo snel hebt ingekort als hier, heeft dat geen zin. Ik ben ook tevreden met de 2.
Stap 19
Wat ik zeker nog wil veranderen, is het timing van het uitroepteken. Dat wil ik liever beter synchroniseren met de muziek.
Daarom heb ik de muziek ook nodig in de compositie. Ik ga dus naar de tab "Fig Leaf Rag" en kopieer het bestand.
Vervolgens ga ik indien nodig met een Alt-klik terug naar de compositie en voeg het daar in.
Stap 20
Nu kijken we waar de twee posities zijn die we nodig hebben. Hiervoor gebruik ik het numerieke toetsenbord en druk op de Komma-toets om een voorbeeld te maken. De sterretjestoets * op het numerieke toetsenbord gebruik ik om een marker te plaatsen. Op apparaten zonder numeriek toetsenbord, vooral op de Mac, zouden het cmd+Komma zijn voor het voorbeeld en cmd+8 voor de marker.
Ik laat nu de muziek afspelen en plaats de markers precies op de plaatsen waar de streep en de punt van het uitroepteken moeten komen (1). Namelijk precies bij de twee accenten van de melodie.
Ik heb dus twee markers geplaatst: Bij de eerste moet de streep van het uitroepteken klaar zijn en bij de tweede moet de punt worden geplaatst.
Ik plaats de hulplijn op de eerste marker en schakel over naar de compositie "Typo_Statisch". Daar schuif ik het frame dat de lijn van het uitroepteken aangeeft op de hulplijn (2).
Datzelfde doe ik met de tweede marker, die de positie voor de punt aangeeft: Ik plaats de hulplijn op de marker, schakel over naar de compositie en verschuif het frame dienovereenkomstig.
De laatste stappen
Stap 21
Ik wil de streep van het uitroepteken langzamer laten tekenen dan het tekst ervoor, zodat we meer nadruk hebben bij het uitroepteken (1).
En de tekst moet over het algemeen iets sneller klaar zijn. Dus selecteer ik alles ervoor (2) en trek het een stukje naar voren (3).
Zo past het timingtechnisch perfect.
Stap 22
We hebben de tekst over de tekst getrokken en willen daar nu nog wat aanpassingen aan maken.
Eerst dupliceer ik de laag "Typo_Statisch" en verwijder ik op de onderste laag het effect van het penseel.
Stap 23
In de bovenste laag hebben we de getekende tekst met daaronder de originele witte tekst.
In de onderste laag hebben we de normale witte tekst.
Als we in de bovenste laag het selectievakje bij Transparantie behouden aanzetten, zijn alleen de getekende rode lijnen er nog.
Stap 24
Dus de bovenste laag moet worden gebruikt als masker voor de onderste laag.
Als het masker niet wordt weergegeven, klik dan eenvoudig onderaan op Schakel overvloeimodi in/uit, dan wordt het bewegende masker BewMas weergegeven.
Dan kan ik een Alpha-masker selecteren en precies het resultaat behalen dat ik nodig heb. Dat wil zeggen, overal waar deze lijnen worden getekend, is mijn oorspronkelijke tekst zichtbaar.
Ik heb echter iets verschoven, want direct aan het begin staat al de A daar.
Stap 25
Dus selecteren we het beste nogmaals alle penselen met een rechthoek-selectie van onder naar boven (1) en halen dan de twee frames van het uitroepteken met Shift+selectie eruit (2). Deze twee zijn tijdstechnisch al perfect gepositioneerd.
Vervolgens verplaatsen we het eerste frame een klein beetje naar rechts onderaan, zodat de A helemaal aan het begin nog niet te zien is.
Nu past het.
Stap 26
We hebben dit gedaan in de subcompositie, hier hebben we nog het effect van Turbulente Verschuiving.
Als we dit in deze compositie bekijken, hebben we niet alleen geel en verandert de kleur, maar het wiebelt ook nog.
Stap 27
Het is prachtig en past perfect, maar de kleur moet pas daarna veranderen of eigenlijk helemaal niet. Kleurverandering blijft dus voorlopig uit.
Zo hebben we de eerste 4 seconden van de trailer klaar en we zien elkaar weer in het volgende deel van de tutorial, bij de Bouncing Ball.
