w Praktyce
6 godz. 18 min · After Effects · Grafika motion i 3D
Michał WedlechowiczWystartujemy z wprowadzeniem do After Effects. Poznamy podstawowe funkcje programu, przygotujemy i zaciągniemy do niego pierwsze materiały i zaczniemy wprawiać je w ruch pracując na ścieżkach wektorowych. Zainstalujemy plugin Lottie i skonfigurujemy swoje konto w serwisie Lottie FIles, abyśmy mogli eksportować tam nasze animacje i pobierać je w formatach dotLottie albo JSON.
W drugim rozdziale zaczniemy pracować nad docelowym projektem. Poznasz te funkcje Aftera, które będą istotne dla przygotowania plików Lottie. Poznasz też ograniczenia i najczęstsze problemy, oraz dowiesz się jak sobie z nimi radzić i jak optymalizować pliki importowane do After Effects. Dowiesz się też jakich narzędzi wolno używać, a które nie są wspierane przez format Lottie. Jeżeli natomiast pracujesz już z motion designem i znasz bardzo dobrze After Effects, to dzięki temu szkoleniu będziesz wiedział jak wykorzystać swoje umiejętności na zupełnie nowym polu, jakim jest animacja na potrzeby interfejsów.
Ostatni rozdział kursu to dopracowanie projektu w najmniejszych szczegółach i praca ze ścieżkami wektorowymi oraz z ich animacją. Usuniemy niepotrzebne elementy w kompozycjach i zadbamy o optymalizację pliku oraz o jego wagę. Postaramy się, żeby jego waga oscylowała w granicach od kilkudziesięciu do maksymalnie kilkuset kilobajtów, aby nie obciążać strony internetowej. Dodatkowo zaimportujemy nasz Lottie do Webflow, abyśmy mogli zobaczyć jak w praktyce będzie działała nasza animacja i w jakie interakcje możemy z nią wchodzić.
Jednym z praktycznych projektów jaki stworzymy w trakcie kursu będzie Bardzo zaawansowana animacja postaci oparta na ruchu węzłów wektorowych. Do stworzenia projektu wystarczą nam podstawowe funkcje Aftera. W kursie dowiesz się, że projektując animację pod Lottie nie możemy korzystać z bardziej złożonych narzędzi After Effects, ponieważ mogą nie być one wspierane przez format Lottie czy JSON. Przejdziemy przez listę funkcjonalności, które możemy stosować, a których lepiej unikać, aby mieć pewność, że nasze animacje będą wyświetlać się prawidłowo na wielu różnych platformach.
Materiał szkoleniowy, to zbiór lekcji wideo, poukładanych w odpowiednich rozdziałach i podzielonych na części tematyczne. Został opracowany z myślą o: projektantach graficznych, UI designerach, motion designerach. Wszystkie lekcje przygotowane są tak, aby osoby początkujące mogły nauczyć się podstaw animacji obsługi After Effects. Natomiast osoby posiadające już doświadczenie z animacją dowiedzą się jak wykorzystać swoją wiedzę dla tworzenia animacji i interakcji w dziedzinach związanych z Digital Designem. Kto jeszcze może skorzystać na wiedzy zawartej w tym kursie? Graficy pracujący w zawodzie od lat - doświadczeni graficy będą mogli wykorzystać swoją wiedzę na zupełnie innym polu, jakim jest motion. Dowiedzą się jak działa After Effects, oraz jak eksportować poprawne pliki Lottie, niezawierające błędów. Zyskają nowe perspektywy i umiejętności, które pozwolą im wyróżnić się na konkurencyjnym rynku pracy. Freelancerzy pracujący zdalnie dla dużych agencji reklamowych - dla nich materiał to droga do poznania nowych technik pracy i wykorzystania swojej wiedzy na zupełnie innych polach, co przełożyć się może na otrzymywanie bardziej zróżnicowanych zleceń i lepsze zarobki.
W tej lekcji będziemy kontynuować pracę z czatem.
Widzimy, że tutaj tak naprawdę czat bot sam zadał pytanie
dla usera dotyczące procedury Task i teraz
chciałbym, żeby user wpisał tutaj wiadomość Source, czyli pewnie.
I co możemy zrobić?
Przejdźmy do kompozycji o nazwie Empty.
Tutaj powiększymy przede wszystkim panel z warstwami.
To co chciałbym zrobić tutaj, to na pewno będziemy musieli wpisać
tutaj nową wiadomość tekstową.
Czyli skoro ta wiadomość tutaj już nam się skończyła, to możemy uciąć tą warstwę.
Nie będzie nam ona już potrzebna.
Ta pierwsza wiadomość tekstowa o.
Ciach! Ucinam warstwę, przypominam.
Służy do tego alt i prawy nawias kwadratowy, aby uciąć ją z prawej strony,
a żeby uciąć warstwę z lewej strony alt i lewy nawias kwadratowy.
OK, mamy odpowiedź chatbota, która jednocześnie z pytaniem
odczekam chwilę, powiedzmy.
Raz 2, 3, 4 sekundy.
I tutaj chciałbym, żeby użytkownik wpisał nową wiadomość tekstową, więc
wybieram narzędzie Type Tool.
Klikam i wpisuję.
Odpowiedź usera OK, ona powinna znaleźć się tutaj.
Powinniśmy naturalnie tę warstwę przekonwertować na ścieżki wektorowe,
czyli wybierzmy prawy klawisz myszy Create shape from.
shape from text, czyli kształty z tekstu.
Oryginał możemy usunąć, nie jest nam potrzebny.
Tę warstwę rozpoczniemy może nie w 26, a w 25 sekundzie animować, więc
możemy sobie ją tutaj przyciąć.
Alt i lewy nawias kwadratowy.
Wszystkie warstwy z tekstem niech będą żółte, więc tutaj też
wybierzemy kolor Yellow.
Co tutaj mamy?
Jeśli przejdziemy do contents, to widzimy, że mamy 4.
Mamy 5 grup warstw, każda odpowiada za jeden znak sura i wykrzyknik.
I tutaj robimy dokładnie to samo co ostatnio, czyli zaznaczamy wszystkie te
grupy, rozwijam jedną z nich, następnie
przechodzę do Transform i może przeniesiemy się jedną klatkę do przodu.
Tutaj opacity ustawiamy na 100%.
Klikając na stop otrzymamy pierwszą klatkę kluczową dla wartości 100%.
Teraz cofamy się o jedną klatkę do tyłu i ustawiamy tutaj 0.
I teraz jeżeli zaznaczę naszą warstwę wybieram klawisz U i mam wszystkie klatki
kluczowe tutaj już wyświetlone dla każdego ze znaków.
No i tutaj już jest dużo łatwiej, bo mamy tylko kilka znaków.
OK.
O, i teraz ładnie nam się to wpisuje.
Co robimy? No tutaj oczywiście.
Kiedy użytkownik już piszę ten tekst, to ten tekst powinien naturalnie zniknąć i
pojawić się w formie pop upu na czacie.
Czyli tutaj z skupujemy te klatki z opacity z poprzedniej wiadomości Command
C i tu je wklejamy Command V to nam tu znika.
OK, możemy też warstwę sobie przyciąć i kiedy nam to znika to tu
powinien wyskoczyć kolejny.
Kolejna wiadomość w formie popup u, więc zaznaczam sobie teraz tą kompozycję
conversation i tutaj ustawiamy klatkę kluczową nową.
Tutaj między tą klatką kluczową a tą nic się nie dzieje, bo one mają dokładnie
takie same wartości dla pozycji.
Ale przeniesiemy się np.
raz, dwa, trzy, cztery, pięć klatek do przodu.
I tutaj już nam wskakuje nowa wiadomość.
OK.
Niech to wygląda w ten sposób, jeśli chodzi o prędkość tego ruchu.
Może troszeczkę za szybko rozciągnięty w czasie.
Te dwie klatki kluczowe.
A teraz znacznie lepiej.
Czyli user to wpisał?
A może troszkę niech to wcześniej nam wskoczy.
Super!
To co jeszcze trzeba zrobić, to żeby to nam fajnie tutaj z takim efektem over czuć
się pojawiło zarówno avatar usera jak i ta wiadomość.
Czyli przechodzimy już tutaj do tej kompozycji z konwersacją.
Odnajdujemy te elementy wszystkie warstwy, które odpowiadają za
animację trzeciej wiadomości.
Może prze koloruje na niebiesko, albo może na zielono?
O tak, nam będzie znacznie łatwiej.
OK, możemy sobie te warstwy tutaj przyciąć.
Kopiujemy sobie te klatki kluczowe dla skali z stąd np.
które nam dają taki fajny efekt over shoot.
I to samo tutaj zrobimy dla SG dla tego tekstu, tylko że
zmienimy punkt odniesienia tu i Command V.
No i fajnie nam się tutaj pojawia. Ciach!
Tylko, że tą wiadomość troszeczkę opuścimy.
Przesuniemy ją o dwie klatki w prawo.
A teraz lepiej i wróćmy do kompozycji o nazwie Empty.
Zobaczmy teraz.
Fajnie.
I zobaczmy, jak to wygląda w naszej głównej kompozycji, którą docelowo
będziemy renderować, czyli alias Main Animation.
Fajnie.
Co jeszcze zrobimy?
Powinniśmy otrzymać kolejną odpowiedź od przedmiotu.
Więc wróćmy do kompozycji Empty.
I tutaj, kiedy?
User odpowiedział.
No to czas, bo znowu powinien wyskoczyć ze swoją wiadomością.
Czyli tu proponuję, żebyśmy postawili klatkę kluczową za pomocą tej ikonki.
Dzięki temu ustawiamy dokładnie taką samą klatkę kluczową,
z takimi samymi ustawieniami, wartościami dla pozycji jak tutaj.
Czyli po prostu między tymi klatkami kluczowymi nic się nie dzieje.
No i teraz wskakuje nam odpowiedź chatbota.
W ten sposób na przykład możemy troszeczkę wydłużyć to w
czasie, bo jest to większa wiadomość.
I tutaj znowu chciałbym.
Dać taki efekt over shoot pojawianie się tego awatara oraz tekstu.
Więc klikam dwukrotnie na kompozycję.
Tutaj naturalnie. Myślę, że możemy.
Skopiować te klatki kluczowe.
Damy je tutaj.
To jest teraz Message numer 4.
A wszystkie warstwy, które stworzą nam Message numer 4, niech będą np.
w kolorze różowym.
OK.
No i teraz może przycinamy sobie te warstwy tutaj
alt i lewy na kwadratowy Command V.
Wklejam te klatki kluczowe, które dają nam właśnie ten efekt over shoot.
Natomiast to co trzeba zrobić to zmienić punkt odniesienia.
Tutaj, w tym miejscu, żeby tekst po prostu zaczął animować się stąd.
To samo zrobimy z tym tekstem.
Ciach i ciach!
I z tym ciach oraz z tym.
Ciach!
OK, tylko teraz musimy poprzesuwać to w czasie.
To jest avatar.
Następnie to jest wiadomość, która powinna się pojawić po avatarze, czyli
przesuniemy to o dwie klatki.
Następnie chciałbym, żeby pojawił się może ten panel, a następnie dopiero to,
potem to i to, a na samym końcu to.
Chociaż tak naprawdę ten panel mógłby się pojawić troszeczkę inaczej.
Albo zmieńmy mu punkt odniesienia i ustawmy go tutaj.
Też wygląda fajnie.
Albo zamieńmy go na kształt wektorowy, co w zasadzie i tak będziemy musieli zrobić.
Zajmijmy go na kształt wektorowy i po prostu za nim ujmie ścieżkę.
Czyli możemy wybrać sobie u usunąć sobie tą skalę te klatki kluczowe dla skali.
Albo możemy zaznaczyć klatki kluczowe i wybrać Backspace albo
Delete, albo wyłączyć stoper.
I teraz wybieram prawy klawisz myszy.
Tutaj na samym dole wybieram Create shape from vector layer.
OK, zobaczmy czy mamy tutaj jakiś merge paf.
Chyba coś tutaj jest ok, więc od razu usuńmy.
Zobaczmy, czy mamy tutaj też jakieś dodatkowe grupy.
Jest naturalnie.
A więc w momencie kiedy o tutaj To by było dobrze, gdyby nam się
to jakoś zaczęło rozciągać ten panel.
I zróbmy coś takiego.
Wybieram stop Poczta PAF.
Cofam się tutaj w czasie.
Zaznaczmy sobie.
O.
Te węzły, Dajmy je wyżej.
Dajmy je tu.
W porządku.
Tam przesuniemy się jeszcze w czasie w tym miejscu i dajmy coś takiego.
I teraz będzie się to animować w taki sposób.
Ciach i dopiero ciach.
Tylko, że jest to troszeczkę niekompatybilne z tekstem.
Więc albo opuścimy tekst.
Czyli teraz.
Dopiero powinny pojawiać się elementy tekstowe o.
O fajnie, naturalnie.
Warto tutaj wzbogacić ten ruch o leasing, czyli F9 function.
Możemy przejść do Graph edytora.
Zobaczmy co tutaj możemy zrobić. Może.
Zrobimy coś takiego.
OK.
Fajnie.
Spróbujmy jeszcze troszeczkę opóźnić ten tekst.
Gdzieś tutaj np.
O, teraz chyba wygląda lepiej.
To też sobie opuścimy. A jeśli tak.
To może dajmy jeszcze bardziej do tyłu.
Fajnie.
Przechodzimy do kompozycji Empty.
I zobaczmy, jak nam się to animuje.
Popracujemy tutaj nad leasingiem. Może jednak?
I jeszcze to przesuniemy sobie tu o.
Troszeczkę za wcześnie. Dajmy to jednak nieco później.
OK.
I teraz wybieram kompozycję Empty.
Zaznaczam te klatki kluczowe, przechodzę do Graph Editor, Upewniam się, że
pracujemy tutaj z prędkością, czyli prawy klawisz myszy.
Edit Speed Graph i zróbmy tutaj coś takiego.
Fajnie.
OK, tutaj w tej kompozycji Main animation też wygląda to całkiem super.
Zastanawiam się tylko, czy ten odstęp między tą wiadomością a tą krótką
wiadomością Shure nie jest za długi przypadkiem?
Chyba tak, ale to jest kwestia przesunięcia klatek kluczowych.
OK, przejdźmy teraz do kolejnej lekcji.
Ja tutaj w przerwie uzupełnię jeszcze tą animację tego czatu,
bo to co jeszcze trzeba zrobić to naturalnie wyświetlić jeszcze tą
wiadomość, którą będzie wpisywał użytkownik lub zgód plis.
Czyli for the next available slot.
I potem na końcu wyjdzie.
Wyskoczy nam jeszcze ostatnia animacja od chatbota.
Rodzaje dat gdy post jest z Gadget i w zasadzie tyle.
Zapiszmy zmiany i ja teraz zajmę się tym, a po przerwie wrócę do Ciebie z kolejną
lekcją, w której pokażę Ci jak wygląda już całość.