Część 1.

Zaawansowane techniki animacji

Części składowe języka HTML

Kluczem do tworzenia złożonych animacji we Flashu jest podział projektu na prostsze elementy. Ruch biegacza to generalnie ciąg ruchów jego kończyn; i podobnie jest w programie - przyjmij, że na każdy projekt składa się grup podstawowych elementów. Takie rozkładanie jednego skomplikowanego ruchu na kilka mniejszych, prostszych, pozwala zastosować na każdym wyodrębnionym elemencie odpowiednią technikę animacji, w efekcie upraszczając cały proces jej tworzenia. Technika ta daje ci też większą kontrolę nad twoim dziełem i bardziej pozytywne rezultaty. Załóżmy teraz, że chciałbyś wykonać animację głowy odwracającej się do kamery. Dobrze byłoby zastanowić się najpierw, jak podzielić całą animację na pojedyncze ruchy. Animowanie od razu całej sekwencji jest trudne - jeśli nie niemożliwe - z uwagi na mnogość zachowań poszczególnych elementów, składających się na ruch głowy. Sam zarys głowy może być animowany klatka po klatce, jako że chodzi nam o zaprezentowanie zmiany widoku od profilu do pozy frontalnej. Poszczególne elementy twarzy tworzyć będą klony symboli, odpowiednio ściskane i rozciągane w automatycznej animacji ruchu, zgrane z obrotem całej głowy. Włosy natomiast mógłbyś poddać animacji kształtu, oddając w ten sposób ich falowanie czy nawet lekkie opadanie w momencie, kiedy głowa nagle przestaje się poruszać. Poznanie sposobu na łączenie różnych technik odseparowywania elementów animacji umożliwia nie tylko pokonanie wielu problemów w procesie tworzenia animacji, ale także przyzwyczaja cię do korzystania ze złożonych warstw i tworzenia symboli poszczególnych komponentów projektu. To z kolei ułatwia zarządzanie animacją i późniejsze poprawki. Niniejszy rozdział opisuje techniki tworzenia złożonych animacji przez łączenie i rozszerzanie podstawowych zdolności Flasha.

Wykorzystanie automatycznego tworzenia animacji ruchu Proces automatycznego tworzenia animacji ruchu (Motion Tweening) umożliwia zmianę dowolnych właściwości klonu symbolu, np. jego umiejscowienia, rozmiaru, obrotu w przestrzeni, koloru, czy przezroczystość. Z uwagi na wszechstronność, technika ta znajduje zastosowanie przy rozwiązywaniu różnorodnych problemów związanych z animacją, podstawą większości projektów we Flashu. Jako że automatyczna animacja ruchu ma wiele wspólnego z właściwościami klonu symbolu, można przyjąć, że tak naprawdę jest to animacja samego klonu. Niezależnie od tego, czy na scenie faktycznie odbywa się konkretny ruch, zmiany klonów pomiędzy poszczególnymi ujęciami kluczowymi wymagają zastosowania automatycznej animacji ruchu. Jeśli przyjmiesz, że jest to animacja klonu, łatwiej będzie ci zdecydować, kiedy wykorzystać animację ruchu, kiedy animację kształtu, a kiedy animację klatka po klatce. Tworzenie płynnie zapętlonych animacji Pętle animacji są ważne, ponieważ umożliwiają tworzenie ciągłego ruchu przy zdefiniowanych jedynie kilku ujęciach kluczowych. Wykorzystuje się je jako elementy interfejsu, w postaci obracających się przycisków, przewijanych menu czy cyklicznych ruchów w postaci maszerującej postaci, trzepoczących skrzydeł motyla lub wirującej planety. Żeby zachować płynność takiej zapętlonej animacji, trzeba upewnić się, że zarówno pierwsza, jak i ostatnia klatka kluczowa są identyczne, lub prawie identyczne, tak by mieć wrażenie ciągłości ruchu. Rozważymy teraz sposób wykonania dwóch najpopularniejszych typów zapętlonej animacji: grafiki przewijanej i grafiki animowanej po zamkniętej ścieżce.

Rys. 1.1. Pięć obiektów umiejscowionych na scenie tak, jak mogłyby wyglądać w początkowym momencie przewijania od prawej do lewej. Obiektami mogą być przyciski lub proste grafiki Rys. 1.2. Zgrupuj poszczególne obiekty, posługując się poleceniem Modify/Group Rys. 1.3. Utwórz określony wzór, kopiując i wklejając grupę

Rys. 1.4. Powyższa grupa składa się jedynie z dwóch obiektów. Utwórz kolejne grupy, żeby całość wykraczała poza scenę Rys. 1.5. Utwórz grupę z całego wzoru ułożenia elementów Rys. 1.6. Druga powtarzająca się grupa zostaje przeniesiona w miejsce, które na początku zajmowała pierwsza

Grafika przewijana jest powszechnym elementem interfejsu, mającym zastosowanie choćby w prezentowaniu opcji menu. Technikę tą możesz również wykorzystać do tworzenia animacji tła, odgrywanej nieustannie w oczekiwaniu na określone działanie użytkownika. W celu stworzenia grafiki przewijanej: Utwórz elementy, które mają być przewijane po scenie, a następnie rozmieść je tak, jak mogłyby wyglądać w dowolnym momencie (rys. 1.1). Zaznacz wszystkie elementy i wybierz Modify/Group (rys. 1.2). Skopiuj grupę do schowka, a następnie wklej kopię zaraz obok oryginału - tak, żeby całość tworzyła ciąg powtarzających się elementów. Na przykład, jeśli twoje elementy są przewijane od prawej do lewej, umieść nową grupę na prawo od oryginału (rys. 1.3). Zwykle przewijane elementy są większe niż rozmiar sceny, ale jeśli twoja pierwsza grupa jest mniejsza, to będziesz musiał powielić ją więcej niż raz, żeby uzyskać powtarzający się wzór, rozciągający się poza scenę (rys. 1.4). Zaznacz wszystkie utworzone grupy i zgrupuj je w jedną całość (rys. 1.5). Dzięki temu będziesz mógł ją animować. Utwórz ujęcie kluczowe w późniejszym punkcie na osi czasu. Zaznacz grupę z ostatniego ujęcia kluczowego i przesuń ją tak, żeby druga powtarzająca się grupa elementów była przyporządkowana pierwszej. Kiedy przesuwasz grupę, posługuj się linią jej zaznaczenia, żeby dopasować jej pozycję (rys. 1.6). Utwórz automatyczną animację dla przygotowanych ujęć kluczowych.

Wstaw nowe ujęcie kluczowe dokładnie przed ostatnim ujęciem, które następnie usuń (rys. 1.7). W rezultacie uzyskasz ładnie zapętloną animację, która nie polega jedynie na ciągłym odtwarzaniu dwóch identycznych klatek. Ścieżka ruchu w warstwie wzorcowej (Guide Layer) pozwala na uzyskanie płynnego ruchu wzdłuż ścieżki, od punktu początkowego do końcowego. Jeśli punkt końcowy ścieżki będzie odpowiadał początkowemu, uzyskasz pętlę „bez szwów” i właściwie zamkniętą ścieżkę ruchu. W celu stworzenia zamkniętej ścieżki ruchu: Utwórz symbol graficzny i umieść jego klon w obrębie sceny (rys. 1.8). Utwórz warstwę wzorcową, klikając ikonę Add Guide Layer poniżej warstw. Pojawi się nowa warstwa, a pierwsza stanie się warstwą podporządkowaną (rys. 1.9). W warstwie wzorcowej narysuj elipsę. Wybierz narzędzie strzałki (Arrow) z ustawionym modyfikatorem przyciągania (Snap), a następnie umieść punkt środkowy klonu na ścieżce symbolizowanej przez elipsę (rys. 1.10).

Rys. 1.7. Utwórz nowe ujęcie kluczowe (u góry) i usuń ostatnie ujęcie kluczowe (u dołu) Rys. 1.8. Klon symbolu graficznego umieszczamy w obrębie sceny. Tworzymy automatyczną animację wzdłuż ścieżki Rys. 1.9. Ścieżka ruchu będzie się znajdować w warstwie prowadzącej, powyżej warstwy Layer 1 Rys. 1.10. Punkt przyciągania klonu symbolu Ziemi zostaje przyłożony do ścieżki ruchu

Rys. 1.11. Pozycje Ziemi w klatce 1. i klatce 14. w warstwie Layer 1 są identyczne Rys. 1.12. Punkt środkowy Ziemi w środkowym ujęciu kluczowym został umiejscowiony na drugim wierzchołku elipsy Rys. 1.13. Ziemia porusza się w tą i z powrotem po tym samym odcinku elipsy

Dodaj klatki do obydwu warstw i utwórz nowe ujęcie kluczowe w ostatniej klatce warstwy podporządkowanej. Żeby otrzymać zapętloną animację, zarówno pierwsze, jak i ostatnie ujęcie kluczowe muszą być identyczne (rys. 1.11). Zaznacz środkową klatkę w warstwie podporządkowanej i utwórz nowe ujęcie kluczowe. W tym ujęciu klon powinien znajdować się po przeciwnej stronie elipsy - przesuń go (rys. 1.12). Zaznacz wszystkie klatki pomiędzy trzema ujęciami kluczowymi i z palety Frame wybierz Motion Tweening. Twój klon wędruje teraz wzdłuż ścieżki wyznaczonej przez elipsę. Niestety, zamiast wykonać pełne okrążenie, po prostu wraca do punktu wyjścia (rys. 1.13).

Chwyć klon w ostatnim ujęciu kluczowym warstwy podporządkowanej i przesuń go w pobliże klonu z ujęcia środkowego, uważając, by punkt środkowy pozostawał cały na ścieżce (rys. 1.14). Flash automatycznie animuje dwa klony, wybierając najbardziej bezpośrednią ścieżkę, tak więc skracając odległość pomiędzy dwoma ostatnimi ujęciami kluczowymi z dolnego odcinka elipsy, zmuszasz program do wykorzystania właśnie tego odcinka. Teraz twój klon powędruje wzdłuż obu stron elipsy (rys. 1.15). Wskazówka Ten sam efekt zapętlenia możesz również otrzymać, usuwając niewielki fragment ścieżki. Tworząc przerwę, uzyskujesz w rzeczywistości otwartą ścieżkę z punktami początkowym i końcowym, określającą ruch twojego klonu (rys. 1.16). Korzystanie z wielu warstw podporządkowanych Pojedyncza warstwa wzorcowa może oddziaływać na więcej, niż jedną warstwę podporządkowaną, umożliwiając odtwarzanie kilku animacji na tej samej ścieżce. Jest to świetny sposób na budowanie złożonych animacji, wykorzystujących wiele obiektów poruszających się w tym samym kierunku, np. maszerujący żołnierze, krwinki przepływające przez arterię, wystrzeliwane raz za razem kule czy zrywające się do ucieczki stado bydła. Podczas, gdy poszczególne klony mogą objawiać drobne różnice w zachowaniu, ty - opierając się na warstwie wzorcowej - zawsze zachowujesz kontrolę nad ich głównym kierunkiem ruchu. Dla przykładu, liście powiewające wzdłuż sceny mogą być animowane wszystkie z wykorzystaniem tylko jednej warstwy wzorcowej. Warstwa ta określa główny kierunek wiatru, a przy tym poszczególne liście zachowują pewną odrębność w sposobie przemieszczania się, określoną w oddzielnych warstwach podporządkowanych.

Rys. 1.14. Trzy ujęcia kluczowe Ziemi. Pierwszy klon jest ustawiony bliżej środkowego klonu w górnej części elipsy, podczas gdy ostatni klon znalazł się w pobliżu środkowego klonu w dolnej części elipsy Rys. 1.15. Ziemia porusza się wokół zamkniętej ścieżki Rys. 1.16. Niewielka przerwa tworzy początkowy i końcowy punkt dla twojej ścieżki ruchu

Rys. 1.17. Zaznaczenie warstwy podporządkowanej (u góry) i wstawienie nowej warstwy automatycznie przekształca utworzoną warstwę w warstwę podporządkowaną Rys. 1.18. Zwykła warstwa (Layer 2) może zostać przekształcona w warstwę podporządkowaną przez przeciągnięcie poniżej warstwy wzorcowej Rys. 1.19. Klon umieszczony na scenie w warstwie leaf 2

Zmieniając ścieżkę w warstwie wzorcowej, wpływasz na zachowanie jednocześnie wszystkich liści. Takie wykorzystanie pojedynczej ścieżki do zarządzania wieloma warstwami jest przykładem sposobu, w jaki możesz budować całe złożone animacje - w naszym przypadku powiewające liście - z bardzo prostych elementów: jednej warstwy wzorcowej i jednego symbolu liścia. W celu przyporządkowania drugiej warstwy podporządkowanej warstwie wzorcowej: Zaznacz pierwszą warstwę podporządkowaną i kliknij ikonę Insert Layer. Nad pierwszą warstwą podporządkowaną pojawi się druga (rys. 1.17). lub Możesz wykorzystać inny sposób, klikając istniejącą zwykłą warstwę i przeciągając ją poniżej warstwy podporządkowanej. Teraz ta warstwa stanie się warstwą podporządkowaną (rys. 1.18). Aby określić punkt środkowy obiektu w drugiej warstwie podporządkowanej: Utwórz drugą warstwę podporządkowaną i wprowadź klon, który chcesz automatycznie animować (rys. 1.19).

Zaznacz klon w drugiej warstwie podporządkowanej. Wybierz Modify/ Transform/Edit Center (rys. 1.20). W obrębie klonu pojawi się biały krzyżyk, wskazujący aktualny punkt środkowy (rys. 1.21). Przeciągnij krzyżyk w nowe miejsce. Usuń zaznaczenie klonu, klikając w obrębie sceny. Zaznacz ponownie klon. Nowy punkt środkowy pojawi się w miejscu, które przed chwilą określiłeś (rys. 1.22). Posługując się narzędziem strzałki (Arrow Tool) z aktywnym modyfikatorem przyciągania (Snap to Objects), przeciągnij punkt środkowy klonu nad początek ścieżki w warstwie wzorcowej (rys. 1.23). Utwórz nowe ujęcie kluczowe w ostatniej klatce. Nowo utworzony klon w ostatnim ujęciu kluczowym zachowa punkt środkowy klonu edytowanego. Teraz przeciągnij klon z ostatniego ujęcia kluczowego nad koniec ścieżki w warstwie wzorcowej. Automatyczna animacja ruchu w drugiej warstwie podporządkowanej przebiega wzdłuż tej samej ścieżki, co animacja w warstwie pierwszej. Jednak nowy punkt środkowy klonu w drugiej warstwie podporządkowanej określa sposób prowadzenia obiektu po ścieżce (rys. 1.24). Rys. 1.24. Dwie automatyczne animacje, przebiegające wzdłuż tej samej ścieżki. Drugi liść jest prowadzony inaczej, co stanowi efekt przesunięcia jego punktu środkowego

Rys. 1.20. Zaznacz klon w drugiej warstwie podporządkowanej i wybierz Modify/Transform/Edit Center Rys. 1.21. Edytowany punkt środkowy liścia Rys. 1.22. Nowy punkt środkowy liścia Rys. 1.23. Punkt środkowy liścia - tutaj zaznaczony - przyłączono do ścieżki

Rys. 1.25. Liść w warstwie leaf 2 zaczyna przemieszczać się po ścieżce ruchu zaraz po liściu w warstwie leaf 1 Rys. 1.26. Przesuń ostatnie ujęcie kluczowe w warstwie leaf 1 w pobliże pierwszego ujęcia kluczowego (u góry). Zaznacz klatki nieprawidłowej animacji (w środku), a następnie przekonwertuj wszystkie ujęcia kluczowe na zwykłe klatki (u dołu)

Różnicowanie umiejscowienia w czasie animacji w drugiej warstwie podporządkowanej: Przeciągnij pierwsze ujęcie kluczowe w drugiej warstwie podporządkowanej do późniejszego punktu na osi czasu. Sekwencja automatycznej animacji ruchu dla tej warstwy będzie zaczynać się po wystartowaniu pierwszej animacji, ale obie i tak zakończą się w tym samym momencie (rys. 1.25). Przeciągnij ostatnie ujęcie kluczowe w pierwszej warstwie podporządkowanej do wcześniejszego punktu na osi czasu. Ujęcie kluczowe zostanie przesunięte, jednak zaraz za nim pojawi się nowe, psując sekwencję animacji ruchu. Przekonwertuj ujęcia kluczowe w zwykłe klatki, wybierając polecenie Insert/Clear keyframe (rys. 1.26). Pozostało tylko dopasować do siebie poszczególne sekwencje ruchu w warstwie wzorcowej. Popraw zgranie w czasie animacji ruchu, przesuwając pierwsze i ostatnie ujęcie kluczowe w obydwu warstwach podporządkowanych. Wskazówki Możesz urozmaicać animacje przez rozmieszczanie klonów w dowolnych punktach wzdłuż ścieżki w warstwie wzorcowej. Punkty te niekoniecznie muszą leżeć dokładnie na początku czy końcu ścieżki. Animacja ruchu i tak będzie funkcjonować. Bardziej złożone efekty osiągniesz, korzystając z animowanych klonów symboli, przemieszczających się wzdłuż ścieżki ruchu. Pętla animacji przyporządkowana do konkretnego symbolu nie przeszkadza mu jednocześnie poruszać się zgodnie z osią czasu w warstwie wzorcowej.

W celu miejscowego zróżnicowania animacji zbudowanej na kilku warstwach podporządkowanych: Przejdź do trybu edycji symbolu graficznego, który wykorzystujesz na ścieżce ruchu. Zaznacz reprezentację symbolu w oknie i dokonaj konwersji na symbol graficzny. W ten sposób tworzysz symbol graficzny w obrębie innego symbolu, co pozwala również na wykonanie animacji ruchu w obrębie tego symbolu. Utwórz zapętloną automatyczną animację ruchu (rys. 1.27). Wyjdź z trybu edycji symbolu i odtwórz film, żeby zobaczyć, w jaki sposób animacja ruchu symbolu integruje się z główną animacją na scenie (rys. 1.28).

Rys. 1.27. Animowany symbol graficzny liścia, falującego w górę i w dół Rys. 1.28. Odtwórz animację i zobacz, jak liście podążają wzdłuż ścieżki ruchu, jednocześnie wykonując własne ruchy, określone w dodatkowej animacji osobno dla każdego z nich

Rys. 1.29. Parametr First ustalono na wartość 4 (u góry), co sprawia, że pętla animacji liścia będzie odtwarzana z rozpoczęciem klatki 4. Pozostałe opcje odtwarzania zawarte w menu rozwijanym to Play Once (odtwórz jednokrotnie) i Single Frame (pojedyncze ujęcie)

Wskazówki Na palecie Instance ustaw odpowiednio parametr odtwarzania w opcji Behavior oraz parametr opcji First, aby określić sposób odtwarzania animowanych klonów symboli graficznych (rys. 1.29). Jeśli poszczególne pętle animacji będą rozpoczynać się w różnych ujęciach, to unikniesz ich wzajemnego zsynchronizowania względem siebie (rys. 1.30). Obracanie twoich klonów na tym etapie pracy dodatkowo podkreśla złożoność animacji, czyniąc ją jeszcze bardziej interesującą i spontaniczną. Poeksperymentuj z obracaniem klonów poruszających się wzdłuż ścieżki ruchu.

Rys. 1.30. Trzy klony tego samego symbolu graficznego, z różnymi ustawieniami opcji odtwarzania First. Pętla animacji motyla na rysunku po lewej rozpoczyna się w klatce 1. Skrzydła zamykają się. Pętla animacji motyla w środku startuje w klatce 4. Skrzydła są już zamknięte i zaczynają się otwierać. Motyl po prawej otwiera skrzydła - ta pętla animacji rozpoczyna się w klatce 10

Wykorzystanie automatycznego tworzenia animacji kształtu Animowanie kształtu jest techniką pozwalającą tworzyć amorficzne przemiany, niemożliwe do osiągnięcia z wykorzystaniem takich transformacji klonów symboli, jak rotacja, skalowanie czy przekrzywianie. Wypełnienie (Fill), obwiednia (Outline), gradient (Gradient) i przezroczystość (Alpha) są atrybutami animowanego kształtu. Flash tworzy animację kształtu w sposób, który jest możliwie najprostszą drogą do celu. Metoda ta jednak objawia się czasami nieoczekiwanymi rezultatami, w rodzaju nakładających się na siebie kształtów czy pojawiających się niespodziewanie, a następnie łączących się ze sobą dziur (rys. 1.31). Takie niepożądane efekty są zwykle wynikiem tworzenia ujęć kluczowych zawierających kształty zbyt złożone do animowania wszystkich naraz. Podobnie jak w przypadku automatycznej animacji ruchu, tak też i tutaj, dzielenie skomplikowanej sekwencji animacji kształtu na prostsze komponenty, a następnie separowanie ich w osobnych warstwach, zaowocuje o wiele lepszymi przejściami. Wskaźniki zmiany kształtu (Shape Hints) umożliwiają programowi określenie odpowiadających sobie punktów pierwszego i drugiego kształtu. Niekiedy wprowadzenie pośrednich ujęć kluczowych i, co za tym idzie, stanów pośrednich, może usprawnić skomplikowaną animację. Jeśli nawet składa się z wielu elementów, łatwiej wtedy zarządzać każdym z nich. Korzystanie ze wskaźników zmiany kształtu Wskaźniki zmiany kształtu pozwalają programowi przyporządkować poszczególne punkty jednego kształtu odpowiadającym im punktom drugiego. Wprowadzając więcej wskaźników zmiany kształtu, zyskujesz lepszą kontrolę nad przebiegiem animacji kształtu.

Rys. 1.31. Próba przekształcenia słowa „flash” w słowo „shape”. Zwróć uwagę na rozproszenia pomiędzy „s” i „p”, a także dziurę, która pojawia się między „h” i „e”

Rys. 1.32. Zaznacz pierwsze ujęcie kluczowe animacji kształtu i wybierz Modify/Transform/ Add Shape Hint Rys. 1.33. Pierwszy wskaźnik zmiany kształtu pojawia się w środku sceny, w pierwszym ujęciu kluczowym

W celu dodania wskaźnika zmiany kształtu: Zaznacz pierwsze ujęcie kluczowe automatycznej animacji kształtu. Wybierz Modify/Transform/Add Shape Hint (rys. 1.32). W środku twojego kształtu pojawi się litera otoczona czerwonym pierścieniem (rys. 1.33). Przesuń pierwszy wskaźnik zmiany kształtu do punktu w obrębie twojego kształtu. Upewnij się, że dla narzędzia strzałki (Arrow Tool) uaktywniłeś modyfikator Snap to Objects, bowiem tylko wtedy możliwe będzie przyciąganie zaznaczenia do wierzchołków i krawędzi. Zaznacz ostatnie ujęcie kluczowe sekwencji animacji kształtu i przesuń pasującą literę, otoczoną pierścieniem, do odpowiedniego punktu końcowego kształtu. Przeniesiony właśnie wskaźnik zostanie podświetlony na zielono, a pierwszy wskaźnik - na żółto, co będzie oznaczać, że obydwa wskaźniki umiejscowiono prawidłowo (rys. 1.34). Kontynuuj dodawanie wskaźników - pamiętając, że może ich być najwyżej 26 - aż uzyskasz pożądaną animację kształtu (rys. 1.35). Rys. 1.35. Zmiana „T” w „I” z wykorzystaniem wskaźników zmiany kształtu (po lewej) i bez nich (po prawej)

Wskazówki Wskaźniki rozmieszczaj zgodnie z ruchem wskazówek zegara lub w przeciwnym kierunku. Flash lepiej interpretuje rozmieszczanie sekwencyjne, niż rozrzucanie punktów po całej scenie. Wskaźniki zmiany kształtu muszą być rozmieszczane na krawędziach lub po rogach kształtu. Jeśli dodasz wskaźnik po prostu wewnątrz lub na zewnątrz kształtu, pozostanie on podświetlony na czerwono i program go zignoruje. Jeśli chcesz obejrzeć animację bez wskaźników zmiany kształtu, wybierz View/Show Shape Hints. Opcja zostanie odznaczona i wskaźniki będą ukryte. Jeśli przesuwasz całą animację kształtu poleceniem Edit Multiple Frames, pamiętaj, że będziesz musiał ponownie ustawiać wszystkie wskaźniki zmiany kształtu. Niestety, nie jest możliwe przesuwanie wszystkich wskaźników jednocześnie. W celu usunięcia wskaźnika zmiany kształtu: Przeciągnij niepotrzebny wskaźnik poza scenę. Odpowiadający mu wskaźnik w innym ujęciu kluczowym zostanie usunięty automatycznie. W celu usunięcia wszystkich wskaźników zmiany kształtu: Wybierz Modify/Transform/Remove All Hints.

Rys. 1.36. Złożona animacja ruchu wymaga wielu pośrednich ujęć kluczowych Rys. 1.37. Bezpośrednia zmiana „Z” w „S” prowadzi do wypaczenia kształtu litery Rys. 1.38. Kształt pośredni Rys. 1.39. „Z” bez niespodzianek przechodzi w pośredni kształt (w środku), a później następuje już tylko płynna przemiana w „S”

Korzystanie z pośrednich ujęć kluczowych Dodawanie pośrednich ujęć kluczowych wprowadza do skomplikowanej animacji stany pośrednie, które umożliwiają tworzenie prostszych i łatwiejszych w zarządzaniu zmian. Pomyśl o tym, jak o automatycznej animacji ruchu. Załóżmy, że chcesz zaprojektować animację przedstawiającą ruch kuli zmierzającej od lewego górnego rogu sceny, przez prawy górny róg, do lewego dolnego i stamtąd do prawego dolnego rogu (rys. 1.36). Nie wystarczy wprowadzenie tylko dwóch ujęć kluczowych, jednego z kulą w górnym lewym rogu i drugiego, przedstawiającego ją w prawym dolnym rogu sceny, a następnie oczekiwanie, że Flash tak po prostu utworzy animację obiektu zygzakującego po scenie. Trzeba dołączyć do sekwencji dodatkowe ujęcia kluczowe - tak, aby program mógł animować kulę etapami. I ta sama zasada obowiązuje przy animacji kształtu. Korzystając z pośrednich ujęć kluczowych, uzyskasz bardziej dramatyczny efekt przejścia jednego obiektu w drugi. W celu utworzenia pośredniego ujęcia kluczowego: Przyjrzyj się, jak nieudanie przebiega animacja kształtu przedstawiająca przejście litery „Z” w literę „S” (rys. 1.37). Wprowadź ujęcie kluczowe w pośrednim punkcie sekwencji animacji. W nowo utworzonym ujęciu kluczowym poddaj edycji kształt, zamieniając go w coś w rodzaju schodka, który później zamieni się w ostateczny kształt (rys. 1.38). Cała animacja opiera się teraz na mniejszych zmianach, dając lepszy rezultat w postaci bardziej płynnego przejścia (rys. 1.39).

Niekiedy jednak dołączenie pośrednich ujęć kluczowych nie wystarcza i wtedy trzeba się dodatkowo posłużyć wskaźnikami zmiany kształtu. Niżej podaję trzy sposoby na dodanie wskaźników do animacji kształtu, w której wykorzystano pośrednie ujęcia kluczowe. W celu użycia wskaźników zmiany kształtu z wieloma ujęciami kluczowymi: Zaznacz pośrednie ujęcie kluczowe i dodaj wskaźniki zmiany kształtu, tak jak by to było pierwsze ujęcie kluczowe. Pamiętając o znaczeniu kolorów podświetlenia, zwróć uwagę które wskaźniki należą do poszczególnych sekwencji animacji. Żółty oznacza wskaźnik dla pierwszego ujęcia kluczowego, a zielony - odpowiednio, ostatniego (rys. 1.40). lub Wstaw nowe ujęcie kluczowe, zaraz przy drugim ujęciu kluczowym, i zacznij dodawać wskaźniki zmiany kształtu. Nowe ujęcie kluczowe pozwala dodawać kolejne wskaźniki bez obawy o nakładanie się wskaźników z poprzedniej sekwencji (rys. 1.41). lub Utwórz nową warstwę (powielającą pośrednie i ostatnie ujęcia kluczowe animacji kształtu), w której następnie dodaj kolejne sekwencje animacji kształtu. Kopiowanie pośredniego ujęcia kluczowego pozwala trzymać wskaźniki zmiany kształtu w oddzielnych warstwach, co również pomaga uniknąć nakładających się wskaźników (rys. 1.42).

Rys. 1.40. To pośrednie ujęcie kluczowe zawiera dwie grupy wskaźników zmiany kształtu. Niektóre stanowią wskaźniki końcowego kształtu dla pierwszej animacji, inne odnoszą się do początkowego kształtu drugiej animacji Rys. 1.42. Warstwa Layer 2 oddziela początkowe wskaźniki zmiany kształtu, należące do animacji kształtu z klatek 7 - 15, od końcowych wskaźników zmiany kształtu, przynależnych do animacji z klatek 1 - 7

Rys. 1.43. Podczas przekształcania „F” w „D” na obrzeżach pierwszego kształtu pojawia się dziura Rys. 1.44. Dziurę oraz kształty wypełnione umieszczono w dwóch osobnych warstwach

Korzystanie z warstw dla uproszczenia zmian kształtu Funkcja automatycznego tworzenia animacji kształtu umożliwia kreowanie bardzo złożonych animowanych sekwencji w obrębie pojedynczej warstwy, ale poleganie tylko na tym sposobie prowadzi czasem do zupełnie nieprzewidywalnych rezultatów. Korzystaj z warstw do rozdzielania skomplikowanych kształtów, a następnie twórz złożone, ale prostsze animacje kształtu. Na przykład, kiedy animujemy przemianę litery „F” w literę „D”, na krawędziach pierwszego kształtu pojawia się dziura z końcowego kształtu (rys. 1.43). Wydzielenie dziury w literze „D” i potraktowanie jej jako białego kształtu pozwala uzyskać kontrolę nad tym, kiedy i jak się ona pojawi. Wstaw nową warstwę i utwórz drugą animację dla dziury. Animacja powstała z połączenia tych dwóch z pewnością da o wiele lepsze efekty (rys. 1.44).

Animowanie masek Maskowanie jest prostym sposobem na selektywne odkrywanie części warstwy lub warstw leżących poniżej. Wymaga to przekształcenia jednej warstwy w warstwę maski i warstw leżących poniżej - w warstwy maskowane. Dodając animację do warstwy maski czy warstw maskowanych, albo do wszystkich naraz, możesz tworzyć dynamiczne maski, które poruszają się, zmieniają kształt, odkrywają poruszające się obrazki w rezultacie możesz wykroczyć daleko poza proste, statyczne obrazki, pokazywane jak przez judasza. Animowane maski pozwalają osiągać takie złożone efekty, jak poruszające się reflektory, soczewki powiększające obrazy czy też coś w rodzaju promieni rentgenowskich, które ukazują bardziej skomplikowane detale, kiedy padają na maskowany obszar. Dzięki animowanym maskom jest możliwe także uzyskanie kinowych efektów nachodzenia jednej sceny na drugą, czy nawet efektu przysłony, kiedy to jedna scena znika z ekranu, przyjmując kształt kurczącego się okręgu i zostawiając tym samym kolejną scenę na ekranie. Wstawianie warstw nad maskami i pod nimi pozwala na jeszcze większą złożoność animowanych masek. Przykładowo, kształt wypełniony gradientem alfa da efekt powolnego rozpłynięcia się ostrych krawędzi maski w miękkim świetle reflektora. W celu animowania warstwy maski: W warstwie Layer 1 utwórz obrazek stanowiący tło, ewentualnie zaimportuj bitmapę. Wstaw nową warstwę powyżej pierwszej warstwy. Zaznacz górną warstwę i wybierz Modify/ Layer. W polu Type wybierz opcję Mask. Teraz zaznacz dolną warstwę i wybierz ponownie Modify/Layer. W polu Type zaznacz opcję Masked. Górna warstwa tworzy od tej chwili warstwę maski, a dolna warstwę maskowaną (rys. 1.45).

Rys. 1.45. Warstwa Layer 2 jest warstwą maski, a warstwa Layer 1 - warstwą maskowaną

Rys. 1.46. Animacja kształtu, przedstawiająca wijącą się linię, znajduje się w warstwie maski. Zdjęcie nurkującej dziewczyny umieszczono w warstwie maskowanej Rys. 1.47. Animacja kształtu odkrywa zdjęcie nurkującej dziewczyny

W warstwie maski utwórz automatyczną animację ruchu lub animację kształtu (rys. 1.46). W warstwie maskowanej wstaw odpowiednią ilość klatek, pasującą do liczby klatek animacji w warstwie maski. Zablokuj obie warstwy i oceń efekt zastosowania animowanej maski na obrazie w warstwie maskowanej (rys. 1.47).

Wskazówki Umieść nieznacznie różniące się między sobą kopie obrazu w zwykłej warstwie, poniżej warstwy maski i warstw maskowanych. Animowana maska będzie się teraz zachowywać jak rodzaj filtra odsłaniającego obraz leżący poniżej. Dla przykładu: do warstwy maskowanej wstaw jasny obraz, a do zwykłej warstwy znajdującej się pod nią - ciemniejszą wersję tego samego obrazka. Maska zamieni się w reflektor oświetlający obraz (rys. 1.48). Poeksperymentuj z innymi kombinacjami różnych kopii jednego obrazu, np. ostrą i rozmytą, rysunkiem w skali szarości oraz kolorowym - czy obrazem rozbarwianym (rys. 1.49). Umieść w warstwie maski animację rozszerzającego się prostokąta, który zakrywa scenę, naśladując w ten sposób kinowy efekt nakładania się obrazów (rys. 1.50). Rys. 1.50. Warstwa maski zawiera dużą animację kształtu, która zakrywa całą scenę (u góry). W efekcie uzyskuje się kinowy efekt nałożenia obrazów, zachodzący między obrazem w warstwie maskowanej i obrazem znajdującym się w warstwie zwykłej

Rys. 1.48. Poruszający się reflektor umieszczony w warstwie maski (spotlight) odkrywa zdjęcie witrażu z warstwy maskowanej (bitmap). Ciemniejsza kopia zdjęcia umieszczona została w zwykłej warstwie leżącej poniżej (dark bitmap) Rys. 1.49. Poruszające się pionowe kształty z warstwy maski (u góry) odkrywają zdjęcie kolarzy umieszczone w warstwie maskowanej. Kopia zdjęcia wstawiona do leżącej najniżej zwykłej warstwy jest lekko przesunięta, co daje efekt zafalowania obrazu (u dołu)

Rys. 1.51. Kształty w warstwie mask Rys. 1.52. Animacja ruchu w warstwie maskowanej (Layer 1) jest odtwarzana w obrębie kształtów w warstwie maski Rys. 1.53. Obraz zamku przesuwa się pod maską. Kolor tła jest kolorem sceny

W celu animowania warstwy maskowanej: Mając dwie warstwy, przekształć górną w warstwę maski, a dolną - w warstwę maskowaną. Narysuj wypełniony kształt (lub kształty) w warstwie maski (rys. 1.51). Figury te wyznaczą obszar, przez który będzie widoczna twoja animacja umieszczona w warstwie maskowanej. W warstwie maskowanej utwórz automatyczną animację kształtu lub animację ruchu, odtwarzaną w obrębie kształtu w warstwie maski (rys. 1.52). Zablokuj obie warstwy i zobacz efekt animowanej maski pojawiającej się zza warstwy maski (rys. 1.53).

Wskazówka Prezentowana technika jest użyteczną alternatywą dla posługiwania się automatyczną animacją kształtu w celu animowania krawędzi i podobnych typów obiektów, które rosną, kurczą się czy wypełniają. Na przykład, wyobraź sobie animację przedstawiającą dopalający się lont bomby (rys. 1.54). Utwórz maskę lontu, a następnie animację warstwy maskowanej, która stopniowo robi się coraz mniejsza, przypominając właśnie kurczący się lont (rys. 1.55). Wszystkie wypełnienia w warstwie maski Flash widzi jako kształty kryjące, nawet jeśli użyjesz przezroczystego wypełnienia lub gradientu. Wszystkie maski mają więc ostre krawędzie. Żeby uzyskać miększy obrys, umieść wypełnienie gradientowe z przezroczystym środkiem nad maską lub pod nią - tak, aby ukryć jej krawędzie. W celu uzyskania miękkich krawędzi maski: Utwórz warstwę maski i warstwę maskowaną. W warstwie maskowanej umieść lub narysuj obraz stanowiący tło. W warstwie maski narysuj elipsę. Skopiuj elipsę. Wstaw nową warstwę i umieść ją między warstwą maski i warstwą maskowaną. Ta nowa warstwa zostanie przekształcona w warstwę maskowaną. Wybierz Edit/Paste in Place. W nowej warstwie maskowanej pojawi się nowa elipsa, która zostanie umieszczona dokładnie pod elipsą w górnej warstwie maski (rys. 1.56).

Rys. 1.54. Lont jest coraz krótszy Rys. 1.55. Lont bomby to cienka linia w warstwie maski. Animowany prostokąt w warstwie maskowanej kurczy się, wyglądając jak spalający się, coraz krótszy lont

Rys. 1.57. Gradient kołowy z przezroczystym środkiem, umieszczony w górnej warstwie maskowanej Rys. 1.58. Ostateczny wygląd maski o miękkich krawędziach Rys. 1.59. Maska o zmiękczonych krawędziach stanowi kombinację maski w górnej warstwie (warstwie maski), gradientu kołowego w środkowej warstwie (górna warstwa maskowana) i obrazu tła, umieszczonego w dolnej warstwie (dolna warstwa maskowana)

Wypełnij wklejoną elipsę gradientem kołowym, definiując jego środek jako przezroczysty i obrzeża jako kryjące, w tym samym kolorze co scena (rys. 1.57). Zablokuj wszystkie trzy warstwy i oceń efekt maskowania (rys. 1.58). Warstwa maski pozwala ci widzieć poprzez obszar wyznaczony przez elipsę. Górna warstwa maskowana kryje krawędzie elipsy - w wyniku tworzenia stopniowego zaciemnienia w kierunku środka. Dolna warstwa maskowana zawiera obraz tła (rys. 1.59). Miękkie krawędzie tworzone przy użyciu przezroczystych gradientów kołowych spisują się dobrze w przypadku masek kołowych, jeśli jednak kształt maski staje się bardziej skomplikowany, trzeba uciec się do dokonania poprawek na samym kształcie. W celu uzyskania miękkich krawędzi maski o złożonym kształcie: Utwórz warstwę maski i warstwę maskowaną. Umieść lub narysuj obrazek w warstwie maskowanej. W warstwie maski narysuj jakiś skomplikowany kształt. Skopiuj narysowany kształt. Wstaw nową warstwę maskowaną pomiędzy warstwę maski i pierwszą warstwę maskowaną.

Wybierz Edit/Paste in Place. Twój złożony kształt pojawi się w nowej warstwie maskowanej, dokładnie pod pierwotnym kształtem w górnej warstwie maski (rys. 1.60). Narysuj obrzeża wokół twojego kształtu, korzystając z narzędzi Oval Tool lub Rectangle Tool (rys. 1.61). Obszar pomiędzy narysowanym kształtem a obrzeżem wypełnij kolorem tła, a następnie usuń pierwotny kształt. Twój złożony kształt stanowi teraz „dziurę” w większym kształcie (rys. 1.62). Zaznacz cały kształt i wybierz Modify/ Shape/Soften Fill Edges (rys. 1.63). Rys. 1.63. Wybierz Modify/Shape/Soften Fill Edges

Rys. 1.61. Pusty prostokąt narysowany wokół złożonego kształtu Rys. 1.62. Wypełniając obszar pomiędzy kształtem i prostokątem, a następnie usuwając kształt, tworzysz otwór

Rys. 1.64. Okno dialogowe Soften Edges Rys. 1.65. Zmiękczone krawędzie powiększają się kosztem „dziury”, umożliwiającej widzenie poprzez maskę w warstwie maski Rys. 1.66. Miękkie krawędzie nieokrągłej maski, utworzone po wybraniu polecenia Modify/Shape/Soften Edges

Otworzy się okno dialogowe Soften Edges (rys. 1.64). Parametr Distance określa grubość miękkiej krawędzi. Parametr Number of steps ma wpływ na płynność przekształcenia kształtu - od kryjącego do przezroczystego. Parametr Direction określa kierunek, w którym będzie postępować zmiękczanie krawędzi. W polu Distance wprowadź wartość w pikselach, a następnie ustal wartość parametru Number of steps i zaznacz opcję Expand dla parametru Direction. Wszystkie krawędzie wokół twojego kształtu staną się miększe. Jako że cały kształt trochę się powiększył, jednocześnie zmniejsza się otwór (rys. 1.65). Zablokuj wszystkie trzy warstwy i obejrzyj efekt maskowania (rys. 1.66).

Chociaż Flash umożliwia tworzenie wielu warstw maskowanych pod pojedynczą warstwą maski, to nie możesz posiadać więcej, niż jednej warstwy maski oddziałującej na dowolną ilość warstw maskowanych (rys. 1.67). W przypadku tworzenia wielu warstw maski musisz jednocześnie kopiować warstwy maskowane (rys. 1.68). Pojwia się pytanie, po co właściwie tworzyć więcej warstw maski? Wyobraź sobie animację, w której dwa reflektory przesuwają się niezależnie po górnej części obrazu (rys. 1.69). Każdy z tych reflektorów musi zostać umieszczony na osobnej warstwie, jeśli chcesz je animować, tak więc potrzebujesz dwóch warstw maski. W celu utworzenia wielu warstw maski: Umieść obraz w warstwie maskowanej. Utwórz pierwszą maskę w warstwie maski powyżej obrazka (rys. 1.70). Skopiuj swój obraz do oddzielnej warstwy maskowanej, powyżej pierwszej maski. Rys. 1.70. Pierwszy z reflektorów to animacja ruchu w warstwie maski

Rys. 1.67. Warstwy Layer 3 i Layer 2 zdefiniowano jako warstwy maski, ale na warstwę Layer 1 (maskowaną) oddziałuje tylko warstwa Layer 2 Rys. 1.68. Obie warstwy Layer 2 i Layer 3 mogą oddziaływać na warstwę Layer 1 tylko po jej skopiowaniu Rys. 1.69. Dwa niezależne reflektory nałożone na obraz, każdy w osobnej warstwie maski

Rys. 1.71. Drugi z reflektorów jest animacją ruchu w drugiej warstwie maski, znajdującej się ponad skopiowaną warstwą maskowaną Rys. 1.72. Wyświetlanie masek w postaci konturów pozwala podejrzeć skrywany pod nimi obraz. Zaznacz opcję View layers as outlines w oknie Layer Properties lub kliknij ikonę Show as Outlines w odpowiedniej warstwie

Utwórz drugą maskę w innej warstwie maskowanej, powyżej skopiowanego obrazka (rys. 1.71). Na każdy z dwóch identycznych obrazków oddziałuje jedna z warstw maski, a zatem tak naprawdę na twój obraz wpływającą obie maski. Zwiększaj ilość warstw maski, kopiując obrazek do nowych warstw maskowanych. Wskazówki Żeby widzieć, co odkrywają twoje maski, użyj wypełnienia przezroczystego lub zaznacz opcję View layers as outlines w oknie Layer Properties (rys. 1.72). We Flashu nie jest możliwe, żeby więcej niż jedna warstwa maski oddziaływała na warstwę maskowaną w tym samym punkcie na osi czasu, tak więc musisz kopiować warstwy maskowane, jak to opisano w poprzednim ćwiczeniu. Jeśli spróbujesz obejść problem, tworząc symbol graficzny w kilku warstwach (rys. 1.73), a następnie umieszczając klon tego symbolu w warstwie maski (rys. 1.74), program użyje tylko warstwy jako maski (rys. 1.75). Nie inaczej będzie w przypadku klonu klipu filmowego w warstwie maski. Warstwy maski z klonem klipu filmowego pokazują jedynie pierwszą klatkę z dolnej warstwy jako maskę.

Zagnieżdżanie warstw maski
Tworzenie wielu masek pozwala na to, by każda z warstw maski oddziaływała w takim samym stopniu na obrazek i animację. W omówionym uprzednio ćwiczeniu każdy z reflektorów oddziaływał na obraz niezależnie jeden od drugiego. Gdybyś jednak chciał, aby - zamiast niezależnego funkcjonowania - działanie kilku masek uzupełniało się wzajemnie, musisz zagnieździć pierwszą maskę wewnątrz warstwy maskowanej.	Utwórz swoją pierwszą maskę i warstwy maskowane w symbolu graficznym (rys. 1.76). Umieszczenie klonu tego symbolu w warstwie maskowanej na głównej osi czasu umożliwi ci utworzenie drugiej maski, oddziałującej na klon (rys. 1.77). Zagnieżdżając symbol graficzny w warstwie maskowanej, możesz tworzyć uzupełniające się efekty maskowania.
Rys. 1.76. Poruszające się pionowe paski maskują zdjęcie kolarzy. Ta animowana maska jest zawarta w symbolu graficznym (venetian blind animation)	Rys. 1.77. Poruszający się reflektor maskuje klon symbolu venetian blind animation. W efekcie uzyskuje się dwie animowane maski, jednak jako pierwsza jest wstawiana maska venetian blinds, a dopiero po niej maska reflektora

Rozdział 1.

44

43

Złożone projekty

1

Złożone projekty

Druga grupa

Pierwsza grupa

Usuwamy ostatnie ujęcie kluczowe z klatki 15.

Ziemia w ujęciu kluczowym 7.

Warstwa wzorcowa

Ziemia w ujęciu kluczowym 1.

Ścieżka ruchu

Nowy punkt środkowy

Przeciągnij warstwę Layer 2 poniżej warstwy wzorcowej

Klon w warstwie leaf 2

Rys. 1.34. Odpowiadający pierwszemu - wskaźnik zmiany kształtu w ostatnim ujęciu kluczowym

Opcje odtwarzania

Klatka, w której startuje animacja

Kształty przejściowe

Dziura

Pierwszy wskaźnik zmiany kształtu

Drugie
ujęcie kluczowe

Pierwsze
ujęcie kluczowe

Końcowy wskaźnik zmiany kształtu, odpowiadający wskaźnikowi z pierwszego ujęcia kluczowego

Warstwa maskowana

Warstwa maski

Tworzy nowe ujęcie kluczowe

Warstwa podporządkowana

Klon symbolu Ziemi

Punkt środkowy

Ścieżka ruchu

Ziemia w ujęciach kluczowych 1. i 14.

Ziemia w ujęciu kluczowym 14.

Ziemia w ujęciu kluczowym 7.

Punkt początkowy

Punkt końcowy

Ziemia w ostatnim ujęciu kluczowym znajduje się w punkcie końcowym ścieżki

Klon w warstwie leaf 2

Klon w warstwie leaf 1

Punkt środkowy

Liść wyśrodkowany

Liść przesunięty

Ścieżka ruchu

Klon w warstwie leaf 1

Ostatnie ujęcie kluczowe przesunięte z klatki 13. do klatki 9.

Zaznacz klatki 10 - 13

Przekonwertuj ujęcia kluczowe na zwykłe klatki

„Poprzeczka” litery T płynnie zawęża się, tworząc I

Tutaj T, zmieniając się w I, przechodzi niepotrzebne przeobrażenia

Trzecie
ujęcie kluczowe

Ostatnie
ujęcie kluczowe

Kształty łączące

Początkowy wskaźnik kształtu dla siódmego ujęcia kluczowego

Rys. 1.41. Wskaźnik zmiany kształtu w nowej warstwie

Wskaźniki zmiany kształtu w warstwie Layer 2

Animacja kształtu w warstwie Layer 2

Nurkująca dziewczyna w warstwie Layer 1

Maska

Obraz w warstwie bikers

Obraz 1

Obraz 2

Animacja kształtu

Obraz zamku przemieszczającego się pod maską

Maska

Kurczący się kształt w warstwie fuse fill

Rys. 1.56. Ta sama elipsa pojawia się zarówno w warstwie maski (ellipse 1), jak i w górnej warstwie maskowanej (ellipse 2). Zdjęcie kobiety umieszczono w dolnej warstwie maskowanej (background)

Kształt w warstwach ellipse 1 i ellipse 2

Obraz w warstwie background

Alfa = 100%

Alfa = 0

Maska

Gradient kołowy z przezroczystym środkiem

Obraz tła

Rys. 1.60. Złożony kształt w górnej warstwie maskowanej, umieszczony nad obrazem w dolnej warstwie maskowanej

Pusty prostokąt

Złożony kształt

Ta warstwa nie funkcjonuje jako warstwa maski

Duplikaty warstw

Pierwsza maska

Druga maska

Kształt w warstwie spotlight 2

Kształt w warstwie spotlight 1

Opcja Show as Outlines

Kontury warstwy spotlight 2

Kontury warstwy spotlight 1

Rys. 1.73. Dwa poruszające się reflektory utworzone w obrębie symbolu graficznego

Rys. 1.74. Klon animowanego symbolu graficznego znajduje się w warstwie maski

Rys. 1.75. Flash używa jako maski jedynie dolnej warstwy animowanego symbolu graficznego

Złożone projekty

Tworzenie animacji ruchu

Tworzenie animacji ruchu

Tworzenie animacji ruchu

Tworzenie animacji ruchu

Tworzenie animacji ruchu

Tworzenie animacji ruchu

Tworzenie animacji kształtu

Tworzenie animacji kształtu

Tworzenie animacji kształtu

Animowanie masek

Animowanie masek

Animowanie masek

Animowanie masek

Animowanie masek

Tworzenie animacji ruchu

Tworzenie animacji ruchu

Tworzenie animacji ruchu

Tworzenie animacji ruchu

Tworzenie animacji kształtu

Tworzenie animacji kształtu

Tworzenie animacji kształtu

Animowanie masek

Animowanie masek

Animowanie masek

Animowanie masek

Animowanie masek

Animowanie masek

---