Projektuj Animacje UI z Lottie Files i After Effects: Eksport pliku Lottie

0:00W tej lekcji eksportujemy naszą monetę do pliku LOD.

0:03Pokażę Ci jakie są częste błędy, które wyświetlają się w oknie pluginu.

0:10Jeżeli nie widzisz z okna pluginu to możesz wybrać w menu głównym Window,

0:15następnie Extension i LOD i File.

0:18I teraz musimy oczywiście zalogować się do naszego konta w serwisie Loty File.

0:23Wybieram więc login via browser i zaraz będziemy mieli informację, że

0:27jesteśmy zalogowani i musimy po prostu dać autorowi dostęp do naszego konta.

0:31Więc wybieram Allow access, a następnie wracamy do Adobe After Effects.

0:37I tutaj mamy dwie kompozycje.

0:38Mamy kompozycje Jump oraz Coin.

0:41Kompozycja Coin to jest ta kompozycja, w której animować obrót naszej monety.

0:47Natomiast kompozycja Jump to jest ta kompozycja, w której mamy już gotowy plik

0:52ze skaczącym monetą i właśnie tę kompozycję będę chciał wyrenderować.

0:58Możemy po prostu tutaj zaznaczyć tick i wybrać render, albo ewentualnie możemy

1:03bezpośrednio tutaj wybrać strzałkę.

1:05Zanim jednak do tego przejdziemy, to jeszcze przejdziemy do

1:08ustawień renderingu.

1:12Mamy tutaj kilka rzeczy, na które warto zwrócić uwagę.

1:16Extra Comp.

1:17Jest to checkbox, który powinien być zawsze włączony.

1:19Jeżeli wpisaliśmy jakieś ekspresje, które

1:23nawiązują do zewnętrznych kompozycji, wtedy aby one zostały uwzględnione

1:30w tym renderingu to musimy mieć ten checkbox włączony.

1:33Jeżeli w naszej kompozycji tej której renderuje, tej którą renderuje są

1:37jakieś inne kompozycje, czyli np. w naszym wypadku.

1:40W tej kompozycji Jump znajduje się kompozycja, Koń też.

1:43Aby zostały wyeksportowane poprawnie musimy mieć

1:46włączony ten checkbox Hidden Layers.

1:48Jeżeli w naszym projekcie są jakieś ukryte warstwy, możemy też je wyeksportować.

1:52Wystarczy, że upewnimy się, że mamy ten box włączony.

1:55Ja natomiast z tego nie korzystam.

1:57Jeżeli ukrywam jakieś warstwy za pomocą tej ikonki oczka, to po prostu dlatego, że

2:01nie chcę żeby ona była widoczna i żeby nie i nie chcę, żeby była w renderowane.

2:06Natomiast tutaj kolejna ważna rzecz assets i to dotyczy plików jpg, png czy

2:12jakichkolwiek warstw bitmap owych.

2:14Jeżeli chcemy aby one zostały również renderowane, musimy

2:18zaznaczyć tick przy include assets in json tak aby one zostały dodane

2:24i osadzone w naszym pliku.

2:27W naszym gotowym finalnym pliku json tudzież lod.

2:30LOD. No i ok.

2:31Wybieram teraz save, a następnie wybieram strzałkę przy kompozycji Jump.

2:36Ona została bardzo szybko wyrenderować.

2:38A widzimy jak się wyświetla.

2:40Pracuje bardzo, bardzo płynnie i ja jestem jak najbardziej zadowolony z tego efektu.

2:44Wszystko tutaj pracuje miękko, fajnie i oczywiście zgodnie z tym co

2:51zaprojektowaliśmy w aplikacji Adobe After Effects.

2:53Natomiast możemy od razu przejść do zakładki Download i

2:58możemy pobrać nasz plik.

3:03Może to być JSON, może to być też optimizer Jason, czyli

3:07nieco skompresowany.

3:08Widzimy tutaj małą różnicę między wagami tych dwóch plików, ale może to być też

3:12dolot, który waży 3,2 KB, albo optimizer dolot, czyli nieco skompresowany.

3:18Oczywiście nie wpływa to w żaden sposób na jakość samego pliku.

3:22Też jest nieco mniejszy 2,7 KB.

3:24Widzimy, że te animacje są bardzo leciutkie i

3:30możemy je zapisać w naszym workspace, w naszym Dashboard na stronie LOT Files albo

3:36ewentualnie bezpośrednio sobie pobrać.

3:39Natomiast widzimy, że mamy tutaj w zakładce Features Support

3:44Checker jeden błąd on i świąd.

3:47Czego on dotyczy? Dotyczy on Mask Expansion.

3:51To jest to właściwość maski.

3:55Jest to częsty i dosyć dziwny błąd, ponieważ tak naprawdę

4:00dodając maskę w naszej kompozycjach, nie korzystaliśmy z tego

4:04figura Mask Expansion.

4:06Mimo to jednak ten błąd się tutaj pojawił i widzimy, że nie wszędzie

4:11będzie ta maska dobrze wyświetlana na iOS ie czy na Androidzie.

4:15Dlatego warto zweryfikować ten błąd i zobaczyć co tu jest grane I jeżeli

4:21w jakiś sposób możemy go usunąć i zastąpić czymś innym, to oczywiście należy to

4:26zrobić Mask Expansion.

4:28I tak mamy tutaj w naszej kompozycji Coin maskę dla.

4:37Tego profilu monety.

4:39Ona znajduje się tutaj i to jest ta zielona maska.

4:41Możemy zmienić kolor np.

4:43na żółty albo na jakiś czerwony, żeby była lepiej widoczna, może na fioletowy.

4:50Widzimy, że to jest ta maska.

4:52I tak mamy tutaj maskę, która w zasadzie jest sama w sobie wspierana

4:57przez format ulotki.

4:58Natomiast ona ma taką funkcjonalność jak Expansion Mask

5:03Expansion, czyli jeżeli sobie rozszerzymy tutaj to Mask Expansion, no to widzimy, że

5:07ona jakby obejmuje większy obszar, większy obszar w naszej kompozycji.

5:13Natomiast nie korzystamy z tej wartości.

5:15Tutaj jest 0, cały czas nie korzystamy z tej z tego feature.

5:18Natomiast on został wykryty, jako że jest to domyślny feature.

5:21Jeden z domyślnych ficzerów maski i on został wykryty,

5:26więc będziemy musieli się go pozbyć, zanim potraktujemy nasz plik

5:33LOD jako ten finalny.

5:34Ja staram się, aby tutaj w ogóle nie było żadnych informacji o błędach.

5:38Natomiast jak pozbyć się tego, tego błędu?

5:41Myślę, że możemy się tym zająć w lekcji następnej, do której oczywiście

5:44serdecznie Cię zapraszam.

5:45Do usłyszenia.