Wideo & lottie w Adobe XD.

 

Cześć!

W końcu się doczekaliśmy: Adobe postanowiło dodać jedną z najbardziej wyczekiwanych funkcji – dodawania do prototypów elementów wideo oraz animacji. 

Możemy nareszcie nadać prototypom, dzięki nowym interakcjom, zupełnie nowe życie. Pokażę krok po kroku, jak to zrobić, oraz powiem trochę więcej o dość ciekawym formacie animacji, którym jest lottie.

 

Ale zacznijmy od tego, czym jest lottie?

Lottie to animacje składające się wyłącznie z kodu. To digitalny opis kolorów, kształtów i ruchów animacji. Dzięki swojej formie mogą być wykorzystywane wszędzie: od stron i aplikacji po gry, smartwatche czy nawet ebooki.

Olbrzymią przewagą tych animacji nad dotychczasowymi formami (np. gif) jest to, że są bardzo małe i kompaktowe. Mimo swoich niewielkich rozmiarów oddają bardzo wysoką jakość, a to dzięki połączeniu elementów wektorowych i rastrowych.

Istnieje ogromna baza tego typu animacji do pobrania, ale można też stworzyć je samemu poprzez eksport animacji stworzonych w After Effects albo Animate – wystarczy jedynie zainstalować plugin (chociaż plugin do Animate jest dopiero w fazie alfa).

Przejdziemy krok po kroku przez tutorial, jak dodawać elementy wideo oraz lottie na makiety.

Zachęcam do korzystania z pliku dołączonego do tego artykułu.

 

Wideo w Adobe XD

Stwórzmy podstawową makietę dla aplikacji społecznościowej.

Na głównym ekranie dodajmy karuzelę z odtwarzającymi się materiałami wideo.

Pobrałem kilka filmów platformy Coub na potrzeby makiet do tego tutoriala.

Filmik po prostu przeciągnijmy z folderu na arkusz Adobe XD.

Po prawej stronie, w document assets, pojawi się nowa zakładka – videos. Można stamtąd przeciągać elementy wideo na prototypy. Po zaznaczeniu materiału możemy zobaczyć opcje odtwarzania – po otwarciu szczegółów będziemy mogli dodać własny thumbnail do wideo, przyciąć materiał, wyłączyć odtwarzanie dźwięku oraz zaznaczyć, aby materiał odtwarzał się w pętli.

W kwestii przycinania: żadne zmiany nie są stałe. Przycięty materiał można w każdej chwili rozszerzyć do pierwotnej długości.

W przypadku naszych materiałów ustawmy tylko autoodtwarzanie, pętlę oraz wyłączmy głos.

Nasze filmy są różnych wielkości, a ja chciałbym też, żeby na prototypie nie było widać dolnego znaku wodnego od Coub. Dlatego przytnijmy materiał za pomocą maski.

Na materiał nałóżmy obiekt o takiej szerokości, jakiej chciałbym, żeby była karuzela z wideo na aplikacji. Następnie zaznaczmy całość i przytnijmy do maski za pomocą Ctrl + Shift + M (Command + Shift + M).

Zróbmy tak również z pozostałymi materiałami. Następnie stwórzmy komponent i umieśćmy wideo na osobnych stanach. Dla przypomnienia: komponent tworzymy zaznaczając obiekt i klikając w górnym prawym rogu przycisk „+” (przy sekcji Components) albo korzystając z skrótu Ctrl + K (Command + K).

Dodajmy do default state podpis i przyciski do przewijania karuzeli. Jeżeli dodajemy coś na komponencie do stanu default, to zostaje to dodane do wszystkich jego stanów. Tak samo zadzieje się, gdy powtarzający się w stanach element będziemy edytować na default state.

Teraz ustawmy przejścia. W widoku prototype w default state naszego komponentu niech strzałka w prawo zmienia jego stan na drugie wideo, a strzałka w lewo – na trzecie. Na kolejnych stanach również ustawmy, żeby strzałki zmieniały stany komponentu.

I etap gotowy. Możemy na podglądzie zobaczyć, jak wideo odtwarza się automatycznie w tle naszego komponentu i, po przełączeniu, na kolejną kategorię w karuzeli.

 

Lottie w Adobe XD

Teraz dodajmy post z ruchomą grafiką lottie.

Jak wspomniałem wcześniej, format lottie jest bardzo dobrym rozwiązaniem, jeżeli szukamy animacji do prototypów oraz finalnych produktów.

Dla wygody zainstalowałem i korzystałem z pluginu lottie animation do Adobe XD, ale nic nie stoi na przeszkodzie, żeby pobrać animację z strony albo stworzyć ją samemu.

Wyszukałem animację z trofeum i przeniosłem ją na prototyp. Ustawiłem opcję odtwarzania automatycznego oraz zapętlanie animacji. Na podglądzie możemy zobaczyć, jak to wygląda w akcji.

Ale zróbmy teraz coś bardziej złożonego.

Stworzymy przycisk pobierania z wykorzystaniem lottie animation jako jednego z elementów w komponencie.

Na początku na wolną przestrzeń przeciągnijmy wybraną animację pobierania, a następnie dodajmy obok niej napis „Download” i umieśćmy je w przycisku (w zwykłym kształcie z ramką).

Następnie, podobnie jak wcześniej, stwórzmy z tego komponent i zmieńmy wygląd drugiego stanu poprzez usunięcie tekstu i zwężenie obszaru do okręgu wokół animacji.

 

Jedyne, co pozostało, to ustawić przejścia w zakładce prototype na górze strony – po kliknięciu w przycisk ma się on przełączyć w stan „Download”.

Następnie na animacji ustawmy, aby włączała się automatycznie. Taki sam efekt uzyskamy, gdy wybierzemy aktywację przez czas na 0 s oraz lottie playback i play na opcjach odtwarzania. 

Pamiętajmy, żeby w tym przypadku nie zaznaczać pętli przy odtwarzaniu – chcemy, żeby animacja przeszła tylko raz.

Został nam ostatni krok. Teraz po odtworzeniu animacja odtwarza się i wraca do swojej pierwszej klatki – chcemy, żeby po pobraniu znowu pojawił się przycisk pobierania.

Po wybraniu naszego przycisku możemy zobaczyć, że przy niebieskiej linii, pokazującej interakcję, jest mały znaczek „+”. Klikając go, możemy dodać do obiektu drugą interakcję. Wybierzmy tam nową opcję “End of playback”, żeby wywołaniem akcji było zakończenie naszej animacji.

Następnie wybierzmy, żeby typem było auto-animate do stanu default naszego komponentu.

Dzięki temu mamy już pełen komponent, czyli przycisk, który zmienia się na animację pobierania i wraca do swojego pierwotnego stanu po zakończeniu.

 

Podsumowanie

Możliwość dodawania materiałów wideo jest elementem, który doda życia naszym prototypom i pozwoli oddać dokładniej sens wielu naszych projektów.

Dzięki temu, że materiały są traktowane jako edytowalny element, można dowolnie bawić się formą i tworzyć ruchome tła, rozbudowane interakcje oraz pełne prezentacje z wykorzystaniem Adobe XD.

Animacje lottie są wyjątkowo interesującym rozwiązaniem, które wychodzi poza możliwości samego projektowania, pozwalając nam budować ładniejsze, a jednocześnie lżejsze i mniej zawodne produkty.

Dzięki takim animacjom odchudza się też prototypy – dużo barwnych animacji nie musi być już przez nas tworzonych na prototypach. Dodatkowo animacje w After Effects będa służyc nie tylko do projektów, ale jako gotowy element do umieszczenia na finalnym produkcie.

Jestem bardzo ciekaw, co zaproponuje nam Adobe w kolejnych porcjach nowości. Osobiście liczę na większe możliwość projektowania na urządzenia VR i AR, które cieszą się coraz większą popularnością.