Rozmieszczenie w czasie i przestrzeni:

Potrafisz już w prosty sposób tworzyć rysunki postaci, masz też pewne pojęcie o bardzo ważnym terminie jaki ja nazywam rozmieszczeniem w czasie i przestrzeni (ang. timing and spacing). Warto zapamiętać to sformułowanie bowiem będziesz się z nim bardzo często spotykał podczas dalszej nauki animacji. Z wspomnianym zagadnieniem miałeś do czynienia tworząc animację odbijającej się piłeczki, a ma ona ścisły związek z Flashowym Custom Easing. Warto zauważyć że zrozumienie i właściwe stosowanie odpowiednich reguł dotyczątych rozmieszczenia w czasie i przestrzni jest podstawową umiejętnością każdego animatora, nie tylko pracującego we Flashu. Chodzi tu bowiem o przyspieszanie i opóźnianie pewnych elementów animacji (rozmieszczenie w czasie) i położenie animowanych elementów w odpowiedniej odległości od siebie (rozmieszczenie w przestrzeni). Zrozumienie działających tu mechanizmów jest kluczowe dla uzyskania płynnej animacji. Musisz wiedzieć, że animując we Flashu bardzo często posługujemy się easingiem, a gdy wymagana jest jeszcze precyzyjniejsza animacja (często gdy rzeczy dzieją się bardzo wolno), przechodzimy na metodę poklatkową (FbF).

Jak mówią wybitni animatorzy ze stajni Disney'a - "It's all in the timing and spacing". Dla płynnego odtworzenia ruchu niezbędne jest stosowanie odpowiednich odstępów czasowych i między elementami. Często doświadczenie w tym zakresie przychodzi w miarę tworzenia kolejnych animacji, jednak istnieją pewne podstawowe zasady, które postaram się w zwięzły sposób przedstawić.

Najprościej będzie to zrobić na kolejnym, klasycznym przykładzie z odbijaniem piłeczki. Stwórz nowy dokument Flasha i ustaw jego właściwości - szerokość na 700px, wysokość - 400 px, ilość fps na 24. Od tej pory, jeśli nie napiszę inaczej, każdy dokument będzie się opierał na tej prędkości animacji - przypominam, że 24 klatki na sekundę pozwalają na rejestrację przez nasze oko płynnego ruchu a ograniczenie ich liczby sprzyja odciążeniu procesora i zmniejszeniu wagi naszego Flashowego filmu. Dodatkowo, 24 to pewna magiczna liczba dla animatorów, jeśli będziesz mial do czynienia z innymi materiałami na temat animacji - tutorialami, kursami czy książkami - z reguły wszyscy autorzy stosują tą samą liczbę klatek, co znacznie ułatwia dalszy proces tworzenia animacji i nauki a zarazem powoduje, że przyzwyczajasz się do pewnej odległości na listwie czasowej utożsamiając ją intuicyjnie z odpowiednim czasem trwania animacji. Wyjaśniając dodam, że np. przy tworzeniu stron www często przyjmuje się inne wartości fps, w zależności od wielu czynników. Niektórzy projektanci Flash stosują nawet framerate dochodzący do 50 fps! Częstym błędem początkujących jest przekonanie, że im więcej klatek na sekundę tym lepiej... nic bardziej mylnego! Tak duże wartości fps można stosować okazjonalnie, mając pełną świadomość konsekwencji, jakie taka operacja za sobą niesie - np. znaczne przeciążenie procesora, zwłaszcza jeśli na scenie dużo się dzieje i stosujemy "rozrzutnie" efekt alpha.

Stworzymy teraz animację piłeczki po torze, będzie ona się odbijała od podłoża z lewej do prawej strony. Najpierw w istniejącej warstwie musimy narysować tor ruchu dla piłeczki. Wybieramy Oval Tool (O), wyłączamy kolor wypełnienia, kolor linii ustawiamy na szary i rysujemy coś na kształt jajka. Nie będzie nam potrzebny cały okrąg, więc zaznaczymy go mniej więcej do połowy i usuniemy jedną część. Powinno to wyglądać mniej więcej tak:

Nie jest to jeszcze idealnie to, o co nam chodzi. Przeciągając lekko dolne "krawędzie" uzyskamy pożądany efekt.

Teraz jest ok. Kopiując i odpowiednio zmiejszając fragment naszej ścieżki (przytrzymując Shift zachowasz odpowiednie proporcje), powinieneś otrzymać podobny efekt. Dorysowanie linii pomocniczych na osobnej warstwie z pewnością ułatwi sprawę.

Możesz teraz usunąć warstwę z liniami pomocniczymi. Przyjrzyj się poniższemu screenowi.

Zaznaczyłem na nim punkty odbicia - czerwone kropki... to jest właśnie rozmieszczenie w czasie! Chodzi o moment uderzeń, odstęp czasowy między kolejnymi odbiciami, rytm tego, co się dzieje na scenie... i to jest tak niebywale ważne!
Uchwycenie momentu odbicia piłeczki jest czynnością intuicyjną i nie sprawi Ci zapewne większych kłopotów. Przykład ten jednak pomaga zrozumieć cały mechanizm, który później bardzo się skomplikuje, np. przy animacji idącej postaci.

O ile w przypadku rozmieszczenia w czasie animatorom z pewną wprawą udaje się osiągnąć zadowalające wyniki, jeśli chodzi o rozmieszczenie w przestrzeni - tylko w pracach najlepszych można zachwycać się perfektyjnym opanowaniem tej trudnej sztuki. Podobnie jak rozmieszczenie w czasie, rozmieszczenie w przestrzeni można łatwiej zrozumieć obserwując otaczającą nas rzeczywistość. Często by odpowiednio dobrać rozmieszczenia, warto wykonać szereg prób na danym elemencie bądź nagrać jakieś zdarzenie (odbijanie piłeczki) na video, a potem w zwolnionym tempie obserwować poszczególne fazy lotu i odbicia.

Zanim pokażę Ci rozmieszenie w czasie, musisz w kolejnej warstwie narysować piłeczkę (narzędziem Oval Tool (O), z wciśniętym Shiftem dla zachowania proporcji, u mnie kolor wypełnienia czerwony, linia granatowa grubości 2px) i umieścić ją w odpowiednim miejscu na scenie.

Piłeczkę zamieniłem na obiekt typu Graphic (Ctrl+F8) i nadalem jej nazwę "pilka"

Teraz tworzymy Guide Layer - na warstwę, na której znajduje się ścieżka, klikamy prawym przyciskiem myszy i z rozwijanego menu wybieramy opcję Guide. Ikonka warstwy zmieni się na młoteczek. Pozostaje nam przeciągnąć warstwę z piłeczką w taki sposób, żeby znalazła się w obrębie warstwy ze ścieżką (robiłeś to już w kursie Flasha). Poniżej przedstawiam kolejne etapy tych czynności.

Zajmiemy się teraz animacją naszej piłeczki. Stwórz Motion Tween dla warstwy z piłeczką i kolejną klatkę kluczową w tej warstwie umieść w klatce 11 (F6). Te 11 klatek stanowić będzie czas w jakim piłeczka z samej góry opadnie do pierwszego punktu stycznego z podłożem. Zauważ, że poruszając teraz piłeczką za pomocą kursorów, trzyma się ona wytyczonej ścieżki. Przesuń więc piłeczkę na sam dół pierwszego łuku. Czas na Easing. Na razie, dla uproszczenia, będziemy się posługiwali zwykłym easingiem dostępnym po kliknięciu na odpowiednią klatkę w panelu properities. Oczywiście można by to też zaprezentować, nawet precyzyjniej, metodą poklatkową umieszczając po kolei w każdej klatce kopię piłeczki w innym położeniu, jednak dla oszczędzenia czasu zastosujemy tutaj zwykły easing. Kliknij na pierwszą klatkę w warstwie z piłeczką i ustaw dla niej wartość Ease na -60 (Ease In).

Teraz użyj omawianego wcześniej narzędzia Onion Skin i zaznaczając 10 pierwszych klatek zobacz jak prezentuje się nasza animacja.

O to chodziło! Kolejnym zadaniem będzie utworzenie podobnej struktury dla reszty odbić. Będziemy tu animować piłeczkę do i od połowy łuku po to, aby łatwiej ustawiać parametry easing. Kolejny łuk będzie w całości zawierał 16 klatek, tak więc połowa luku to 8 klatek. Dodaj zatem klatkę kluczową w klatce 19 i piłeczkę umieść w najwyższym punkcie łuku. Problemem, jaki może tu wystąpić, to taki, że piłka nie będzie chciała przemieszczać się po łuku w którąś ze stron - będzie ona omijać łuk i lecieć najprostszą drogą z punktu do punktu. Jeśli tak się dzieje, to znaczy że linie naszej ścieżki są źle usytuowane - stykają się lub są krzywe na końcach. Warto to sprawdzić w powiększeniu i dokonywać poprawek cały czas pracując w trybie Onion Skin, co jest w tym przypadku bardzo pomocne.

Teraz pora ustalić wartość ease dla klatki 11. Będzie to Ease Out o wartości 60.

Efekt przedstawia się następująco:

Przez kolejne 8 klatek naszej animacji piłeczka ma pokonać drogę do następnej czerwonej kropki. Wstawmy więc klatkę kluczową w w klatce 27 i przesuńmy piłeczkę aż do kropki. W klatce 19 ustawiamy Ease na -60 (In). Zaznaczając klatki od 11 do 27 i uruchamiając Onion Skin powinieneś zobaczyć następujący efekt:

Przy tej okazji krótko omówię kolejną niezwykle ważną kwestię. Chodzi o nazewnictwo i rozmieszczenie klatek w animacji. Można uznać, że to jedno odbicie stanowi pewną całość (którą teraz będziemy powielać). Struktura tej całości liczy 16 klatek i przedstawia się następująco na listwie czasowej:

W animacji wykształcił się pewien specyficzny sposób nazywania klatek, warto, żebyście znali te terminy ponieważ spotkacie się z nimi w kolejnych tutorialach i kursach. Klatki pierwsza i ostatnia to klatki skrajne (extremes), klatki kluczowe nazywają się tak samo (key frames albo po prostu keys), pozostałe klatki to klatki pośrednie (inbetweens). Dodatkowo, klatkę występującą w środku animacji (w naszym przypadku jest to również klatka kluczowa), będziemy nazywać pozycją przejściową, natomiast w kursach po angielsku znajdziecie wymiennie dwie nazwy - breakdown albo passing position (pass pos). Warto zapamiętać na później te nazwy.

Tymczasem skupmy się na naszej animacji. Pozostało nam powtórzyć operacje które wykonywaliśmy dla pierwszego odbicia na kolejne. Postępujemy analogicznie, pamiętając o ustalaniu wartości Ease. Dla ułatwienia podam Wam ilości klatek, jakie powinny przypadać na kolejne odbicia. Następny łuk piłeczka powinna pokonać w 12 klatek, czyli do 39 klatki ( z klatką kluczową i piłeczką w górnym punkcie w klatce 33) - odpowiednio Ease 60 dla 27 klatki i Ease -60 dla 33 klatki. Kolejny łuk to 8 klatek - do klatki 47 z kluczową klatką 43. Konsekwentnie Ease 60 dla 39 klatki, Ease - 60 dla klatki 43. Ostatni łuk - 6 klatek, klatka 47 z Ease na 60, klatka 50 - Ease na - 60, i klatka 53 jako ostatnia, piłeczka powinna się znaleźć na podłożu.

To jest właśnie spacing! Chodzi o odstępy pomiędzy naszym obiektem w kolejnych klatkach. Obok rozmieszczenia w czasie jest to najważniejszy czynnik, który wpływa na płynność animacji Flash!

Może nie są to najciekawsze rzeczy, jakie występują w animacji, ale bez wątpienia jest to wiedza elementarna bez której nie da się wykonać dobrego filmu Flash.

Aby dodać więcej dynamizmu naszej piłeczce, porozciągamy ją trochę narzędziem Free Transform tak jak to zrobiliśmy w poprzednim przykładzie. Jednak tym razem zrobimy to dużo lepiej dzięki zastosowaniu prostego triku. Aby osiągnąć jak najlpeszy rezultat musimy przejść na animację poklatkową (FbF). Najprostszym i najlepszym sposobem będzie zaznaczenie wszytskich klatek animacji na warstwie z piłeczką i wybranie po kliknięciu prawego przycisku myszy polecenia Convert to Keyframes.

Zajmijmy się teraz płynnym odbiciem. Przejdźmy do klatki 11 i przesuńmy znajdującą się w niej piłeczkę nieco na dół a następnie przy pomocy narzędzia Free Transform rozciągnijmy ją i obrómy tak, aby dotykała podłoża. Na poniższym screenie przedstawiam dokładnie o co mi chodzi. Pamiętaj, że dużo łatwiej jest pracować cały czas przy włączonym Onion Skin.

Dzięki zastosowaniu tego prostego triku ruch naszej piłki będzie dużo bardziej dynamiczny. Rozciągnięcie jej i pozwolenie na kontakt z podłożem zanim się odbije dodało nieco impetu, ciężaru.

Przejdźmy teraz do następnej klatki i rozciągnijmy piłeczkę w drugą stronę. Rozciągnij piłkę i trochę ją "zgnieć", pamiętając by następnie opuścić ją o kilka pikseli tak, by dotykała podłoża.

O to chodziło! Teraz zobacz jak wygląda ruch piłeczki. Dużo lepiej, prawda? W takim razie powtórz powyższy zabieg dla wszytskich odbić. Przy każdym kolejnym odbiciu nieco mniej rozciągaj piłeczkę - wraz z ilością uderzeń będzie bowiem spadać jej siła. Po ostatnim uderzeniu dodaj jeszcze jedną klatkę kluczową i w przedostatniej klatce nieco rozciągnij jeszcze piłeczkę. Sprawi to, że cykl nie zatrzyma się "sztywno" a piłeczka jeszcze nieznacznie się odkształci po ostatnim uderzeniu. Gdy już to zrobisz, animacja będzie gotowa!

Pragnę żebyś zapamiętał, że w przedstawionym tu przykładzie dość mocno rozciągaliśmy naszą piłeczkę. W rzeczywistości wygląda to jednak trochę inaczej. Nie każda piłka "rozpłaszcza" się w podobny sposób, a zależy to między innymi od jej twardości i impetu (wyobraź sobie np. odbijającą się w ten sposób piłeczkę golfową - zupełnie nienaturalne!). Przy animowaniu można sobie pozwolić na wiele przejaskrawień, jednak tutaj radzę być uważnym. Wiele razy bowiem widziałem animacje Flash, gdzie znacznie przesadzono z "rozpłaszczaniem" postaci i efekt był raczej nieprzyjemny dla oka. Gwoli ścisłości, aby uzyskać jeszcze lepsze odbicia należałoby naszą piłkę jeszcze inaczej transformować przy odbiciu. Zauważ, że teraz jej powierzchnia odbicia jest zdecydowanie za mała, w rzeczywistości powinna większą powierzchnią odbić się od ziemi. Warto tak robić przy czystej animacji poklatkowej, natomiast w naszym przykładzie, jako że animowaliśmy obiekt, nieco utrudniłoby to sprawę. W każdym razię, myślę że efekt i tak jest zadowalający.