Projektuj Animacje UI z Lottie Files i After Effects: Pierwsze ruchome wektory

0:00Jesteśmy w kolejnej lekcji Wracamy do After Effects.

0:02W menu głównym wybieram File, a następnie za importuje tutaj monetę, którą

0:06rysowaliśmy w lekcji poprzedniej.

0:07Wybieram więc import, a następnie Fill.

0:10Mogę skorzystać też ze skrótów klawiaturowych Command i lub Ctrl i jeśli

0:14pracujesz z Windowsem, zaznaczam nasz plik Illustratora, czyli

0:17Coin, a następnie, co bardzo ważne, muszę przejść tutaj do Importuj jako i

0:23wybieram kompozycję z zachowaniem rozmiarów warstw.

0:26Możliwe, że nie widzisz tych opcji.

0:28Być może są one ukryte, dlatego trzeba wybrać Show Options, a następnie wybrać

0:33Import as Composite in Retail Layer size i oczywiście checkbox na Create Composite

0:41tak aby od razu została stworzona z tego nowa kompozycja.

0:44Wybieram Open.

0:45I mamy tutaj w panelu Project dwie pozycje.

0:50Pierwsza to kompozycja o nazwie Coin oraz druga to folder z warstwami z

0:55Illustratora, czyli dokładnie z tymi warstwami, które tutaj przygotowaliśmy.

1:01OK, są one tutaj teraz nie będą nam potrzebne.

1:05Jeżeli klikniemy dwukrotnie lewym klawiszem myszy na naszą

1:08kompozycję, to przejdziemy do niej.

1:10I tutaj otrzymujemy kompozycję z dokładnie takim samym rozmiarem jak nasz dokument w

1:13ilustratorzy, czyli 800 na 800 pikseli i trzy warstwy.

1:17Widzimy, że one są dokładnie tak samo nazwane jak te w ilustratorzy.

1:21Możemy przejść do ustawień kompozycji przechodząc na Kom position,

1:24a następnie Position Settings.

1:25I tutaj widzimy, że faktycznie to 800 na 800 pikseli, a

1:30framerate 30 klatek na sekundę. Nie jest to potrzebne.

1:33Myślę, że możemy spokojnie ustawić sobie tutaj np.

1:3525. Będzie nam wygodniej.

1:38Ustawmy na razie 15 sekund i 20 klatek.

1:41Na razie niech to zostanie w porządku.

1:43Wybierzmy przycisk OK, a następnie powiększymy sobie ten nasz

1:50naszą kompozycję, ten widok.

1:52I co tutaj mamy? Mamy naszą monetę, dolar i profil.

1:57Myślę, że na razie wyłączymy sobie ten profil, a zajmiemy się samą tą monetą.

2:05Wybieram prawy klawisz myszy, a następnie tutaj na dole.

2:10Możesz teraz tego nie widzieć, bo jest to poza ekranem nagrywania tutaj, ale na dole

2:15tej listy znajduje się pozycja Create.

2:19Jeśli na nią zajadę, pojawi się Create Shape from vector layer.

2:23Wybieram więc Create Shape from Vector Layer i mamy kolejną warstwę.

2:26Zwróć uwagę, że ta warstwa oryginalna została wyłączona z

2:31Z widoku mamy tutaj wyłączone oczko i w zasadzie ona nie jest nam potrzebna.

2:35Możemy ją po prostu usunąć.

2:37Otrzymaliśmy za to nową warstwę, która tak naprawdę jest odwzorowaniem tych kształtów

2:42wektorowych, które stworzyliśmy sobie w ilustratorzy,

2:45czyli tych wszystkich punktów, które tutaj są narysowane.

2:49Dokładnie zostało to w ten sposób zinterpretowane I właśnie

2:53dlatego najlepsze rozwiązanie to współpraca między ilustratorem a after

2:59efektem, ponieważ After Efekt świetnie rozumie pliki ilustratora i potrafi je z

3:03powrotem przetłumaczyć na obiekty wektorowe.

3:05Jeśli rozwiniemy tę listę, to przechodzimy do opcji warstw.

3:09I mamy tutaj dwie pozycje Contents, a następnie Transform Transform.

3:14To są bardzo podstawowe atrybuty warstwy, takiej jak

3:20punkt odniesienia, pozycja, skala, rotacja i transparentność.

3:24I tymi właściwościami możemy sterować w czasie, czyli np.

3:30możemy animować pozycję czy skalę, czy rotować w czasie ten obiekt.

3:36Natomiast to co nas interesuje teraz to zawartość content.

3:39I mamy tutaj dwie grupy obiektów wektorowych.

3:42Pierwsza z nich to grupa, która tworzy ten pomarańczowy

3:47owal I faktycznie mamy tutaj naszą ścieżkę, która jest zbudowana dokładnie z

3:50takich samych punktów, z takich samych punktów wektorowych jak ta w Ilustrator.

3:56Mamy jej wypełnienie w kolorze ciemno pomarańczowym.

4:00Jeśli sobie rozwiniemy, a następnie rozwiniemy drugą, to teraz mamy

4:04podświetlony ten większy, jasno żółty owal i też mamy tutaj jego wypełnienie.

4:11Właśnie w ten sposób zamieniliśmy te.

4:15Odczytywane przez After Effects warstwy jako bitmapy.

4:18Zamieniliśmy je na kształty wektorowe i teraz właśnie z nimi będziemy pracować.

4:23Możemy je w każdej chwili sobie tutaj zmieniać i też możemy

4:27zmieniać ich wygląd w czasie.

4:29Jeżeli ja tutaj przy tej ścieżce włączę sobie tzw.

4:32stop watch.

4:34i ustawię tu pierwszą klatkę kluczową, a następnie przeniosę się

4:38o sekundę do przodu i np.

4:40ten węzeł sobie zaznaczy, a następnie przeniosę go tutaj i ustawmy Play head to

4:47spacja aby wybrać Play.

4:49No i widzimy, że ten kształt się animuje, a więc w taki sposób możemy

4:54pracować z naszymi plikami. Teraz.

4:59weźmy sobie profil naszej monety i upewnijmy się, że jest

5:03on ustawiony na środku.

5:04Wybieramy więc transform, a następnie pozycję.

5:09Nie będę jej animować, ale jako że nasz dokument to 800 800 to

5:13idealny środek to będzie 400.

5:17Czyli tu. Ok.

5:19Teraz.

5:25Chciałbym animować naszą monetę.

5:27Wybierzmy więc dla obu ścieżek stop łącz, czyli klikam tutaj.

5:34Dla pierwszej ścieżki tworzącej nasz ciemniejszy owal i tutaj

5:38klikam przy drugiej ścieżce.

5:40Film nam nie jest potrzebny, więc zginiemy i tutaj.

5:43Przy drugiej ścieżce też klikam na stop.

5:45Mam klatki kluczowe przy.

5:50Pierwszej klatce są one tutaj zostały postawione i np.

5:53jeśli przeniesiemy się na pierwszą sekundę, a następnie

5:58zaznaczymy sobie wszystkie te węzły wektorowe, które tworzą naszą monetę,

6:03to możemy sobie np.

6:06kliknąć dwukrotnie na jeden z nich i możemy sobie je spłaszczyć np.

6:11w ten sposób.

6:18OK.

6:20I teraz zobaczmy, co się dzieje z naszą monetą w czasie.

6:22Widzimy, że.

6:32Ona nam się tutaj ładnie obraca, ale to samo musimy zrobić z tym znaczkiem dolara,

6:37więc prawy klawisz myszy ponownie, a następnie wybierz znowu Create.

6:41Nie widzisz tego?

6:42Poza ekranem nagrywania jest niestety ta opcja, ale ja spróbuję tutaj wyciągnąć

6:48ten panel.

6:52I znowu prawy klawisz myszy Create shape from vector layer.

6:56To jest właśnie ta funkcja, która zamieni nam warstwę,

7:00która wyświetlona jest jako bitmap, a zamieni nam te warstwy na oryginalne

7:04kształty wektorowe z Illustratora.

7:08OK.

7:10I widzimy już ścieżkę wektorową, która tworzy nam naszą literkę S.

7:14Tą oryginalną warstwę mogę sobie usunąć klawiszem Delete albo Backspace.

7:17Nie będzie mi to potrzebne.

7:19No i zobaczmy co tu mamy.

7:21Mamy transform, czyli wszystkie te standardowe właściwościach.

7:25pozycja, skala, rotacja, no i contents czyli naszą zawartość, naszą ścieżkę

7:29wektorową, która tworzy naszą literkę S.

7:32Klikam na stop, po czym również tutaj, a następnie znowu przenoszę

7:35się na pierwszą sekundę.

7:36I tutaj też będę chciał zaznaczyć sobie wszystkie te węzły

7:41wektorowe, a następnie klikam dwukrotnie lewym klawiszem na jeden z nich i

7:46znowu sobie tutaj to spłaszczenie.

7:53Np. w ten sposób.

7:55No i widzimy jak się teraz zachowuje nasza moneta.

7:57Może wyłączmy ten profil?

8:09Widzimy, że ona się spłaszcza, ale teraz musimy zrobić coś, aby powróciła

8:13ona do swojego pierwotnego kształtu.

8:16Czyli myślę, że będzie dobrze, jeśli tutaj te dwie warstwy sobie po prostu

8:22utkniemy w tym miejscu, aby to zrobić.

8:26Mogę po zaznaczeniu ich z Shift, czyli zaznaczam jedną, a następnie

8:30z Shift klikam na drugą.

8:32Po ich zaznaczeniu mogę wybrać Alt, a następnie prawy nawias kwadratowy po to

8:37aby przyciąć te dwie warstwy dokładnie w tym miejscu, gdzie znajduje się Play head,

8:42czyli one tutaj już się kończą i dalej nawet jeżeli byśmy wprowadzili jakieś

8:45zmiany w klatkach kluczowych, to już po prostu nam się te warstwy nie wyświetlą.

8:53Teraz myślę, że możemy je skopiować wybierając Command D.

8:58Przenieśmy je tu wyżej i ustawmy je w tym miejscu.

9:05Tutaj zwróć uwagę na dole mam taką ikonkę z dwiema piramidami.

9:10Mogę się tutaj przybliżyć na linii czasu.

9:12Mogę sobie ją powiększyć tak, aby widzieć nie tylko sekundy, ale również

9:16też poszczególne klatki.

9:20Tutaj mają zaznaczone te dwie warstwy.

9:22Wybiorą klawisz U na klawiaturze.

9:25W tym momencie widzę wszystkie klatki kluczowe, które są dodane do tych warstw.

9:31Teraz to co chciałbym zrobić to po prostu zamienić je miejscami.

9:35Czyli zaznaczam sobie te dwie, te trzy klatki kluczowe, następnie te i te np.

9:39jadą sobie tu na koniec, a te jadą tu na początek.

9:49OK.

9:50No i teraz tutaj musimy wprowadzić pewną zmianę.

9:53Jeżeli włączymy sobie nasz koń profil.

9:55Musimy tu wprowadzić pewną modyfikację.

9:58Ponieważ koń profil jest tutaj przesunięty w prawo i widzimy, że

10:03niezbyt dobrze się to zgrywa.

10:05Dlatego będziemy musieli sobie tutaj zaznaczyć

10:09ścieżki wektorowe, które tworzą literkę S, a następnie przenieść je tutaj

10:16do prawej krawędzi warstwy Coin Profile.

10:20I to samo zrobimy z tą warstwą, która tworzy nam owal monety.

10:26Więc zaznaczam te dwie klatki kluczowe.

10:28Mogę tutaj zaznaczyć wszystkie te węzły i też przesunąć je na prawą stronę.

10:34Mogę też to zrobić za pomocą strzałek na klawiaturze.

10:40OK.

10:41No i teraz command minus aby oddalić się od sumować się od naszej kompozycji.

10:46Zobaczmy jak się teraz to zachowa.

10:48Wyłączmy na razie tą warstwę kont profile.

10:54Teraz widzimy, że nasza moneta wraca.

10:59Dokładnie w ten sposób.

11:01I tutaj chciałbym, żeby nasza kompozycja się zakończyła na drugiej sekundzie i

11:05pierwszej klatce nie muszę przechodzić do ustawień kompozycji

11:11i tutaj zmieniać czas trwania kompozycji. Nie muszę tego robić.

11:15Wystarczy, że tutaj przesunę ten pasek do pozycji play chatu czy w ogóle do

11:21jakiejkolwiek innej pozycji, na której chciałbym, aby kompozycja się kończyła.

11:24Czyli w naszym przypadku tutaj jest to dokładnie druga sekunda i pierwsza klatka.

11:30I teraz jeżeli włączę Play to będziemy mieli widok podglądu w pętli.

11:42Brakuje nam tu oczywiście tego profilu monety, ale tu będzie troszkę

11:47więcej pracy, więc myślę, że możemy przerzucić to na kolejną lekcję.

11:51No teraz to wszystko. Zapisujemy zmiany i przechodzimy dalej.