Animacji 2D: Rozciąganie i spłaszczanie

Adobe CC 2021

0:02Cześć, Witam Cię serdecznie w kolejnej lekcji.

0:05Teraz będę chciał w praktyce pokazać Ci

0:06jak możemy wykorzystać tę zasadę zgłoszeń stretch, czyli rozciąganie i spłaszczenie.

0:14Zaczniemy od ilustracji

0:18przygotowanej w Ilustratorzy, a następnie przeniesiemy wszystko do Astera i

0:22tam będziemy już stosować tę zasadę na praktycznym przykładzie.

0:27Rozpoczniemy od prostego projektu prostej

0:30animacji odbijającej się piłeczki od paletki do ping ponga tak zwanego.

0:38I mam tutaj plik Illustratora z elementami wektorowym.

0:43Mam tutaj warstwę z naszą paletką z piłeczką i warstwę z tłem.

0:48Wszystkie te pliki są oczywiście dostępne w źródłach w

0:52folderze Paletka, także możesz z nich skorzystać.

0:56I oczywiście wszystkie istotne elementy muszą być na osobnych warstwach.

1:01O przygotowaniu

1:03obrazów, grafiki, ilustracji na potrzeby animacji też później porozmawiamy.

1:08Na razie chciałbym Cię wprowadzić w te podstawy samej stricte animacji jako

1:13takiej, więc zajmiemy się prostym przykładem.

1:19Piłkę mamy na osobnej warstwie, paletkę też na osobnej.

1:23Tak jak wspomniałem i osobna warstwa to tło.

1:25Musimy zaciągnąć to wszystko do aplikacji Adobe After Effects.

1:28Więc przechodzę do After, a tutaj tworzy nowy projekt i muszę zaciągnąć

1:34oczywiście te wektory, więc wybieram plik, a następnie Import file.

1:40Z folderu Paletka

1:43wybieram wektory, następnie ping pong a i jest to dokładnie ten plik wektorowy,

1:49który przed chwilą widzieliśmy w ilustratorzy.

1:53Przede wszystkim muszę zaciągnąć to jako kompozycję z zachowaniem rozmiarów warstw.

1:57To jest bardzo ważne.

1:58Jeżeli ta opcja nie jest u Ciebie

1:59widoczna, być może musisz wcisnąć przycisk Options i teraz dopiero

2:05importujemy to jako kompozycję z zachowaniem rozmiaru warstw.

2:09Wybieram Open.

2:12No i mamy tutaj zobacz w panelu Project dwie pozycje kompozycje ping pong oraz

2:19wszystkie warstwy osobno wszystkie warstwy Illustratora.

2:22After wie, że są to wektory.

2:25Teraz po prostu tę kompozycję możemy otworzyć klikając na nią dwukrotnie.

2:29I mamy tutaj kompozycje już wczytane.

2:33Możemy przejść do menu głównego wybierając kompozycja i ustawienia kompozycji.

2:39Tutaj możemy ustawić sobie na przykład

2:42Full HD, ale z 20 24 klatkami na sekundę, czyli 1920x1080.

2:50Czas trwania ustawmy tutaj sekundę, myślę, że będzie w porządku.

2:56Wybieram teraz przycisk OK i i nasza sekunda na osi czasu ma 24 klatki.

3:02Co teraz będziemy robić?

3:03Oczywiście musimy wprawić w ruch naszą piłeczkę.

3:05Paletką zajmiemy się za chwilę, więc rozpoczynam pracę z naszą piłką.

3:13Rozwijamy listę z opcjami transform.

3:16I oczywiście mamy pozycje, skalę, rotację, przeźroczystość.

3:20Anchor points, czyli

3:22punkt odniesienia zostawiamy na środku, będziemy animować pozycję.

3:28Oczywiście nie musimy robić sobie bałaganu, wystarczy, że

3:31wybierzemy tutaj klawisz P na klawiaturze i widzimy tylko pozycje i pozycje.

3:36Tylko i wyłącznie będziemy animować, więc klikam na stop.

3:40Mamy już pierwszą klatkę kluczową.

3:41Ustawmy się np.

3:43na środku, czyli na 12 klatce.

3:45Tutaj nasza piłeczka powędruje oczywiście

3:48w lewo, więc powiedzmy, że nasza piłeczka odbije się mniej więcej na taką odległość.

3:54No i teraz oczywiście piłeczka musi wrócić.

3:55Chciałbym, żeby ona była przywiązana

3:57sznurkiem do naszej paletki, ale tym zajmiemy się później.

4:00Więc teraz wystarczy, że po prostu zaznaczy naszą klatkę tą pierwszą command

4:04c lub kontrolce na Windowsie i wklejam tutaj na ostatnią klatkę.

4:09Oczywiście animacja będzie się zapętlić,

4:11więc jeśli wybiorą spację to nasza piłka sobie wędruje.

4:15Bardzo dobrze o to chodzi.

4:16Myślę, że dobrze by było też, gdyby ta

4:17piłeczka tutaj na początku powędrowała jednak bliżej tej kropki.

4:23OK i teraz sobie kopiujemy raz jeszcze tą

4:26pierwszą klatkę i wklejam ją tutaj na koniec.

4:30No i wszystko jest w porządku.

4:31Tylko że ta animacja w tym momencie jest pozbawiona

4:36tych podstawowych zasad animacji, o których wspomniałem wcześniej.

4:40Nie ma tutaj ani jednej.

4:41Mamy ruch lewo prawo.

4:44Tylko, że musimy po prostu jakoś uatrakcyjnić tą animację, żeby ona

4:47naprawdę była przyjemna dla oka, no i przede wszystkim bardziej realistyczna.

4:53Zaczniemy od zgłoszeń stretch tej pierwszej zasady.

4:57Myślę też, że oczywiście nasza animacja się zapętla.

5:01Tylko, że ta pierwsza klatka jest

5:02wyświetlona dwa razy, więc tą ostatnią klatkę kluczową przesuniemy sobie tutaj.

5:09OK i ta ostatnia pozycja nie będzie tutaj wyświetlona.

5:16Na końcu animacji tylko na początku.

5:18Teraz będzie to wyglądać.

5:21Według mnie dużo lepiej.

5:24Natomiast zajmijmy się teraz zasadą zgłoszeń strać.

5:29Chciałbym, żeby w momencie, kiedy nasza

5:31piłka uderza w paletkę, żeby się troszeczkę spłaszczyć.

5:36Czyli w tym momencie powinna się troszeczkę spłaszczyć i w chwili, kiedy

5:42ucieka w lewą stronę, żeby się troszeczkę rozciągnęła.

5:46Jak to możemy zrobić? Oczywiście będziemy tutaj teraz animować

5:49skalę naszej pozycji, czyli wybieramy S na klawiaturze.

5:52Możemy oczywiście rozwinąć całą listę tych

5:54wszystkich opcji transform, ale nie musimy sobie jak wspomniałem robić bałaganu.

5:59Wybieram S i będziemy teraz.

6:03Animować, animować skalę naszej piłki.

6:08Chciałbym, żeby tutaj na środku, w

6:09momencie kiedy piłka jest maksymalnym oddaleniu się

6:13od naszej paletki, żeby miała swój naturalny rozmiar i kształt, więc ta

6:18ustawi pierwszą klatkę kluczową klikając na stop.

6:21Teraz.

6:24W tym miejscu nasza piłka musi się trochę

6:27spłaszczyć, więc będę chciał teraz animować skalę, ale nie chcę.

6:33Mieć zachowanych proporcji.

6:35Więc upewniam się, że rozłączam łańcuszek.

6:37No i teraz mogę sobie dowolnie naszą piłkę

6:41przekształcać, spłaszczyć ją troszeczkę i delikatnie ściągniemy w ten sposób.

6:54Teraz dobrze by było, żeby w momencie kiedy nasza piłka wędruje.

6:58Oddalając się od paletki dobrze by było, żeby się jakoś rozciągnęła, więc ustawmy

7:05sobie tutaj wyjściowe pozycje wyjściowe wyjściowe wartości czyli 100.

7:10I tutaj jeśli chodzi o wysokość i stoi.

7:12Jeśli chodzi o szerokość to teraz po prostu ją sobie musimy

7:17rozciągnąć w ten sposób, ponieważ nasza piłka jest w ruchu.

7:22Zobacz jak to wygląda teraz.

7:24Tę samą klatkę kluczową z kopiujemy i ustawiamy ją tu.

7:30No i oczywiście na końcu.

7:32W momencie kiedy piłka wraca do naszej

7:34paletki i uderza w nią również musi się spłaszczyć.

7:37Więc tą pierwszą klatkę kluczową, która

7:39jakby spłaszcza naszą piłkę też kopiujemy i ustawiamy na końcu naszej animacji.

7:44Najlepiej tutaj.

7:54Teraz wygląda to znacznie lepiej.

7:56Myślę też, że.

8:02Ten moment, gdzie piłka jest rozciągnięta

8:03możemy troszeczkę przesunąć bliżej paletki.

8:08Ponieważ nasza piłka dopiero w tym

8:10momencie powinna się spłaszczyć, kiedy w paletkę uderza.

8:17Teraz wygląda to dużo ciekawiej.

8:20Bardziej plastycznie i naturalnie.

8:26Na teraz to wszystko w tej lekcji.

8:27Myślę, że możemy przejść dalej.

8:29W następnej zajmiemy się tutaj mózgiem

8:30naszej piłeczki oraz warto by było wprawić w ruch samą paletkę.

8:36OK, do usłyszenia za chwilę.