Zanim przejdziemy do naszej pierwszej animacji, o nazwie Bouncing Ball, chciałbym najpierw podjąć pewne wyzwanie techniczne: tekst powinien być rysowany z czystym przebiegiem, tak jakby tekst został napisany ręcznie. Fig Leaf Rag ma piękną introdukcję z akcentem na końcu, gdzie umieścimy kropkę wykrzyknika.
Istnieje kilka metod, które są mniej lub bardziej dobre, w zależności od sytuacji, z którą mamy do czynienia. Ponieważ pracuję z tabletu graficznego, narysuję pismo i pokażę wam, jak działa animacja. Ale najpierw pokażę wam, jak można to zrobić inaczej, co jednak nie jest moją ulubioną metodą:
Kroki 1–10
Krok 1
Chciałbym pozbyć się warstwy z tekstem i zamiast tego stworzyć warstwę kompozycji, zwykłą warstwę pikselową, na której będę mógł malować. Tekst powinien znajdować się wewnątrz warstwy. Tworzę zatem podkompozycję za pomocą Ctrl+Shift+C lub przez Warstwa>Utwórz podkompozycję. Nazwę to "Typo_Intro".
Krok 2
Wszystkie atrybuty zostały przeniesione, wraz z Przesunięciem turbulentnym.
Ponieważ tego nie chcę, zaznaczam Przesunięcie turbulentne, naciskam Ctrl+X i przenoszę to do kompozycji wyżej ("Fig Leaf Rag").
Krok 3
Wróćmy do kompozycji "Typo_Intro". Tutaj mamy odkryty tekst i możemy go animować.
Pierwszą opcją jest korzystanie z ścieżek. Biorę narzędzie Ołówek i ciągnę pierwszą linię litery A na tekście. Następnie przerywam ruch i klikam gdzieś z wciśniętym klawiszem Ctrl, aby zakończyć bieżącą ścieżkę, zanim narysuję kolejną linię litery A.
Znowu przerywam ruch, klikam z wciśniętym klawiszem Ctrl, aby zakończyć w czarnym miejscu, a następnie ciągnę następną linię, i tak dalej, aż cały tekst zostanie przerysowany.
Krok 4
Teraz dodaję efekt. Możemy go znaleźć jako Kontur w wersji CC w Generuj. W wersji CS6 nazywał się Efekt Konturu.
Wybieramy maskę lub zaznaczamy opcję Wszystkie maski i możemy narysować te maski.
Krok 5
Ukrywam maski za pomocą tego małego symbolu i koloruję ścieżkę na czerwono. Mogę również zmieniać rozmiar, ale to działa globalnie dla wszystkich masek.
Gdy ponownie wyświetlam maski, mogę nadal przesuwać i dostosowywać poszczególne punkty, aby pokryć cały biały tekst poniżej.
Krok 6
To piękne: mam tu suwaki Początek- i Koniec-: przesuwam je od początku do końca i cały tekst zostanie narysowany.
To działa bardzo dobrze, ale nie daje precyzyjnej kontroli. Na przykład trzeba zawsze używać tej samej grubości linii, więc nie można rysować cieńszych lub grubszych linii.
Dlatego chciałbym wam pokazać jeszcze inną metodę, którą moim zdaniem jest trochę szybsza niż ręczne przerabianie wszystkiego ...
Krok 7
W tym przypadku preferuję nieco szybszą metodę z użyciem Pędzla.
Niestety ten Pędzel nie działa na warstwach z tekstem. Musimy więc ponownie utworzyć podkompozycję i nazwać ją "Typo_Statisch". Możemy od razu zacząć pracę w tej podkompozycji.
Krok 8
Gdy chcemy pracować z Pędzlem i klikamy dwukrotnie w trybie Pędzla, otwiera się okno warstw, dopiero tam możemy pracować z Pędzlem.
Pojawiły się też dwa nowe panele: Pędzel i Malowanie. W panelu Pędzel możemy ustawić rozmiar, twardość itp. pędzla.
W panelu Malowanie możemy wybrać rodzaj malowania. Domyślnie jest ustawione na Stałe, ale zmieniam to na Animuj malowanie.
Rysuję, rysuję kolejną linię - ale kiedy skończę jedną linię, nagle znika.
Krok 9
Jeśli wrócę do innego karty i przeglądam na osi czasu, widzę, że wszystkie kreski są obecne i wszystkie są rysowane automatycznie.
Krok 10
Jeśli naciśnę UU dla wszystkich zmienionych właściwości, zobaczymy tutaj wiele podwłaściwości poniżej.
Każda z nich ma również początek i koniec.
Ponadto możemy zmieniać odległość, twardość a nawet pozycję każdej kreski - nawet po jej narysowaniu.
Kontynuujmy: Krok 11–20
Krok 11
Usuwam wszystko ponownie, aby mieć lepszy widok.
Znowu rysuję nową kreskę i gdy jesteś w widoku warstw, zobaczysz ścieżkę. To jest to, co jest zapisywane.
Na przykład jeśli nie podoba mi się narysowana kreska, mogę ją przerysować, wybierając ją i po prostu rysując na nowo. Zostanie zaktualizowany i zastąpiony.
Krok 12
Chciałbym również narysować tekst, ponieważ to jest najszybszy sposób na animację czegoś takiego.
Więc zmniejszam moją średnicę i korzystając z tableta graficznego, narysuję tekst tutaj.
Krok 13
Narysowałem wszystkie kreski i gdy odtwarzamy całość na osi czasu, widzimy, że wszystko jest obecne.
Jeśli naciśnę U, wszystkie klatki kluczowe są ponownie dostępne.
Krok 14
Gdy naciskam klawisz Ü, okno nad którym jest kursor myszy jest maksymalizowane. W tym przypadku przeglądarka czasu. Dzięki temu mam więcej miejsca i lepszy widok na wyróżniające się elementy. Przesuwam niektóre z nich nieco, aby miały podobną długość.
Krok 15
Odtwórzmy to.
Przy okazji: Jeśli przypadkowo wciśniesz klawisz Caps Lock, After Effects przestanie się aktualizować. Otrzymasz komunikat, aby wyłączyć klawisz Caps Lock, aby zaktualizować widok.
Gdy teraz odtwarzamy to, After Effects zaczyna rysować wszystkie litery jednocześnie. Jednakże powinien zacząć od przodu i przejść na tył. I oto jest problem. Aby osiągnąć to, co chcę, musiałbym ręcznie synchronizować wszystkie kreski - jedną po drugiej. To dużo pracy. Chciałbym to zrobić szybciej.
W kolejnym kroku wyjaśnię dokładnie jak - ale najpierw zaznaczmy wszystkie kreski.
Krok 16
dlatego używam skryptu, który ustawia te klatki kluczowe po kolei.
Ten skrypt napisałem sam i również dołączyłem do niego. Znajdziesz go w folderze Skrypty o nazwie Sekwencja kresek. Ci, którzy znają film „Warstwy sekwencyjne w After Effects”, mogą sobie wyobrazić, co robi ten skrypt.
Otwieram skrypt w Extend Script i wykonuję go.
Krok 17
Teraz mamy praktycznie schody z klatkami kluczowymi i tekst jest rysowany po kroku. Jednak wciąż w sposób bardzo powolny.
Trzeba to przyspieszyć. Wybieramy wszystko, bierzemy ostatni klucz, który znajdziemy, naciskamy klawisz Alt- i przeciągamy go na 5 sekund.
Wtedy będzie już znacznie szybciej.
Ostatni punkt musi zostać nieco opóźniony, ale o tym zadecydujemy zaraz.
Krok 18
Chciałbym również porozmawiać o wartości offset-. Ma on wpływ na przejścia między klatkami kluczowymi:
Jeśli teraz spojrzymy na przejścia między klatkami kluczowymi, zauważymy, że następne zawsze zaczyna się dokładnie tam, gdzie kończy się poprzednie (a).
Jeśli nie chcę tego i na przykład wolę mieć dwie klatki przerwy między dwoma kreskami, wpisuję wartość 2 w offset.
Oczywiście muszę ponownie zaznaczyć wszystkie pędzle, zanim mogę aktywować ten skrypt. Mogę zaznaczyć wszystkie naraz za pomocą Ctrl+A.
Albo chciałbym, żeby klatki się nakładały, wtedy ustawiam wartość -2 w offset. Wtedy zawsze cofałby się o dwa klatki za własnym. Jednak jeśli tak szybko skróciliśmy to jak tu, nie ma to sensu. Ja jestem zadowolony z wartości 2 i zostawiam ją tak.
Krok 19
To, co zdecydowanie chcę jeszcze zmienić, to timing wykrzyknika. Chciałbym lepiej dostosować go do muzyki.
Potrzebna mi jest ta muzyka również w kompozycji. Przechodzę zatem do zakładki "Fig Leaf Rag" i kopiuję plik.
Następnie ewentualnie wracam do kompozycji za pomocą przycisku Alt i wklejam ją tutaj.
Krok 20
Teraz sprawdzamy, gdzie są te dwie pozycje, których potrzebujemy. W tym celu używam klawiatury numerycznej i naciskam klawisz Przecinek, aby utworzyć podgląd. Następnie naciskam gwiazdkę * na klawiaturze numerycznej, aby ustawić znacznik. Na urządzeniach bez klawiatury numerycznej, zwłaszcza na Macu, będzie to cmd+Przecinek dla podglądu i cmd+8 dla znacznika.
Teraz puścimy muzykę i ustawimy znaczniki dokładnie w miejscach, gdzie powinny pojawić się kreska i kropka wykrzyknika (1). Dokładnie na dwóch akcentach melodi.
Więc ustawiłem dwa znaczniki: Pierwszy zakończy kreskę wykrzyknika, a drugi ustawi kropkę.
Ustawiam linię pomocniczą na pierwszym znaczniku i przechodzę do kompozycji "Typo_Statisch". Tam przesuwam ramkę na linię pomocniczą, która oznacza linię wykrzyknika (2).
To samo robię z drugim znacznikiem, który wskazuje pozycję dla kropki: Ustawiam linię pomocniczą na znaczniku, przechodzę do kompozycji i przesuwam ramkę odpowiednio.
Ostatnie kroki
Krok 21
Chcę, aby kreska wykrzyknika była rysowana wolniej niż poprzedni tekst, aby uzyskać większe akcenty podczas pojawienia się wykrzyknika (1).
A cały tekst powinien być ukończony nieco szybciej. Zaznaczam zatem wszystko przed nim (2) i przesuwam go nieco do przodu (3).
W ten sposób timing jest idealny.
Krok 22
Namalowaliśmy tekst nad tekstem i teraz musimy to jeszcze nieco zmienić.
Najpierw duplikuję warstwę "Typo_Statisch" i usuwam efekt Malarstwo z dolnej warstwy.
Krok 23
Więc na górnej warstwie mamy namalowany tekst nad oryginalnym białym tekstem poniżej.
Na dolnej warstwie mamy zwykły biały tekst.
Jeśli zaznaczę opcję Maluj na przeźroczystość dla górnej warstwy, to zostaną tylko namalowane czerwone linie.
Krok 24
Więc górna warstwa będzie używana jako maska dla dolnej.
Jeśli maska nie jest wyświetlana, po prostu kliknijcie na dole Włącz/Wyłącz tryby przelania, wtedy zostanie wyświetlona ruchliwa maska BewMas.
Wtedy mogę wybrać Maskę alfa i uzyskać dokładnie ten efekt, który jest mi potrzebny. Oznacza to, że tam, gdzie są te linie rysowane, tam jest również widoczny mój pierwotny napis.
Jednakże coś mi się trochę przesunęło, ponieważ od razu na początku jest litera A.
Krok 25
Wybieramy więc najlepiej wszystkie pędzle za pomocą wybierania prostokątnego od dołu do góry (1), ale usuwamy dwa ramki wykrzyknika za pomocą wyboru z klawiszem Shift (2). Oba są już idealnie umieszczone czasowo.
Następnie przesuwamy pierwszą ramkę nieco w prawo, aby litera A nie była widoczna zupełnie na początku.
Teraz pasuje.
Krok 26
Zrobiliśmy to w zagnieżdżonej kompozycji, tutaj mamy efekt zaburzeń.
Jeśli przyjrzymy się temu w tej kompozycji, nie tylko mamy to w kolorze żółtym, zmieniającym się, ale też trochę się wstrząsa.
Krok 27
To wspaniałe i idealnie pasuje, ale kolor powinien zmienić się dopiero później lub w ogóle. Zmiana kolorów na razie nie wchodzi w grę.
Tak więc pierwsze 4 sekundy trailera są gotowe i zobaczymy się ponownie w następnej części samouczka, przy Bouncing Ball.
