Kurs Animacji Flash - animacja obiektów
wtorek, 14 sierpnia 2012 12:13
To już druga część kursu animacja Flash, w której zajmiemy się zagadnieniami stricte związanymi z animacją naszych Flashowych obiektów.
Tym razem postaram się zapoznać Cię z podstawowymi zagadnieniami związanymi z tworzeniem i animowaniem postaci we Flashu. Jeżeli dopiero zaczynasz swoją przygodę z animowaniem, znajdziesz tu wiele przydatnych pojęć i technik oraz wskazówek, które ułatwią Ci dalszą pracę.
Onion Skin
Funkcja Onion Skin służy do wyświetlania naraz kilku klatek animacji. Jest ona nieocenionym narzędziem każdego animatora. Przydaje przy edycji i pozycjonowaniu obiektów animacji zwłaszcza kiedy tworzymy animację poklatkową (frame by frame). Funkcję uaktywniamy klikając na przycisk Onion Skin w dolnej cześci listwy czasowej, oznaczony ikonką 
. Gdy to zrobimy, zobaczymy podświetlony podświetlony na szaro obszar nagłówka.
Obszar ten możemy dowolnie rozciągać, klikając na jednym z jego narożników i przeciągając w dowolną stronę. Jeśli w obrębie Onion Skin jest jakaś animacja, obiekty w klatkach, w których się znajdujemy, są widoczne w pełnych kolorach. Pozostałe obiekty w innych klatkach animacji są jakby wyblakłe. Prezentuje się to następująco:
Jeśli już mamy włączoną funkcję Onion Skin, klikając na ikonkę Onion Skin Outlines 
, możemy sprawić, aby obiekty w każdej klatce animacji (oprócz tej klatki, w której aktualnie się znajdujemy) posiadały jedynie obramowania. Włączenie tej opcji sprawia, że tor ruchu naszego obiektu staje się bardziej przejrzysty.
Po kliknięciu na przycisk Modify Onion Makers mamy do wyboru opcje:
- Always Show Makers – wyświetla nad listwą czasu obszar “cebulki” niezależnie od tego, czy funkcja Onion Skin jest włączona
- Anchor Onion Marks – blokuje czerwony wskaźnik nad listwą czasu w miejscu, w którym się znajduje poczas włączenia opcji
- Onion 2 – wyświetla po dzwie klatki po każdej stronie wybranego przez nas ujęcia
- Onion 5 – wyświetla po pięć klatkek po każdej stronie wybranego przez nas ujęcia
- Onion All – wyświetla wszystkie klatki po każdej stronie wybranego ujęcia.
Easing i Custom Easing we Flashu 8
W najnowszej wersji Flasha opatrzonej cyferką 8 pojawił się zupełnie nowy sposób na tak zwany “easing”. Funkcja ease oraz inne sposoby stosowania easingu we wcześniejszych wersjach Flasha były jednym z najczęściej używanych narzędzi animatora. Normalnie animacje wykonywane za pomocą polecenia Create Motion Tween wyglądają dosyć “sztywno”, co wynika z faktu, iż poruszające się po jakiejś linii animowane obiekty mają stałą prędkość w danej jednostce czasu. Custom Easing pozwala na nadanie naszemu obiektowi zmiennej prędkości, czego efektem jest zwiększona dawka realizmu. Obrazując mój wywód, używając opcji Custom Easing dla poruszającego się w linii prostej obiektu możemy na przykład sprawić, że obiekt szybciej będzie poruszał się na początku animacji, a zwolni na końcu. Dzięki dopracowaniu opcji Ease z Flasha MX 2004, we Flashu 8 mamy możliwość kontrolowania w intuicyjny sposób prędkości animacji w każdym jej odcinku. Stosowania opcji Ease i Custom Ease nauczę Cię na prostym przykładzie. Stwórz nowy dokument Flasha, ustaw wartość FPS w panelu Properities na 25 i w pierwszej klatce narysuj piłeczkę posługując się narzędziem Oval Tool (O) (wciskając przycisk Shift stworzysz idealne koło). Teraz stwórz Motion Tween i dodaj klatkę kluczową w 20 klatce. Teraz przejdź do 20 klatki i przesuń piłeczkę w dół za pomocą kursora (z wciśniętym klawiszem Shift nasz obiekt będzie się poruszał 10 razy szybciej). Korzystając z Onion Skin, powinieneś uzyskać podobny efekt.
Teraz zajmijmy się funkcją Ease. Zaznacz kliknięciem pierwszą klatkę. W panelu Properities jest teraz dostępna opcja Ease, którą zaraz się posłużymy.
Naszym założeniem jest stworzenie płynnego ruchu piłeczki, która ma odbijać się od powierzchni. Mając na uwadze ziemskie prawo grawitacji, piłeczka podrzucona do góry ma dużą prędkość początkową, która następnie maleje i osiąga 0, gdy piłeczka znaduje się w najwyższym punkcie. Następnie zaczyna opadać powoli przyspieszając. Gdybyś teraz chciał obejrzeć naszą animację, nie będzie ona wyglądała zbyt realistycznie. Dlatego właśnie ustawimy dla pierwszej klatki Ease na -100. Dla klatki 20 powtórzymy operację wprowadzając za to wartość 100. Wartość tą możesz wprowadzić z klawiatury lub posłużyć się suwakiem:
Przetestuj teraz działanie naszej animacji. Piłeczka wygląda dużo bardziej realistycznie – na początku porusza się wolniej – opada, i przyspiesza spadając. Sprawimy teraz, by piłeczka w podobny sposób podskakiwała w górę. W tym celu wystarczy wykorzystać prosty trick: skopiuj wszystkie klatki (np. klikając na niej prawym klawiszem myszy i wybierając opcję Copy), a następnie wklej je za 20 klatką (postępuj podobnie wybierając teraz Paste Frames) i zamień kolejność klatek 21 z 41 (wymaga to kilku przeciągnięć). Zobacz teraz, jak wygląda nasza animacja. Lepiej, prawda?
Teraz zobaczysz na czym polega Custom Ease. Jest to narzędzie dużo dokładniejsze i dające nieporównywanie większe możliwości. W nowej warstwie lub nowym dokumencie znów narysuj podobną piłeczkę w pierwszej klatce. Zaznacz tą klatkę, stwórz Motion Tween i w paneluProperities kliknij na przycisk Edit.
Twoim oczom ukaże się oś oraz linia przypominająca wykres funkcji liniowej.
Oś pionowa podaje procentowy czas trwania animacji, natomiast pozioma informuje nas o klatce, w której się aktualnie znajdujemy. Jednokrotnie klikając na prostą animacji, zauważysz, że powstał na niej czarny kwadracik – punk ten możemy dowolnie przeciągać modyfikując naszą krzywą animacji. Jak prosto zauważyć zmieniamy w ten sposób zależność między czasem odtwarzania a poszczególnymi klatkami. Przeanalizujmy to na przykładzie:
Nietrudno zauważyć, że w tym przypadku Flash dojdzie do 80% animacji już w trzeciej klatce, a następne 20% “dogra” przez kolejne 4 klatki. Użycie Custom Ease jest dosyć intuicyjne i wystarczy trochę treningu, aby usyskać zadowalający efekt. Polecam teraz poeksperymentować trochę na stworzonej przez nas piłeczce. Przejdź np. do 20 klatki naszej animacji, w której Ease ustawiłeś na 100. Teraz kliknij na przyciskuEdit. Twoim oczom ukaże się krzywa animacji dla Ease równego 100. Powinieneś już dokładnie rozumieć, co się dzieje na osi.
Jak widzisz, krzywa obrazuje fakt, iż nasza animacja na początku przyspiesza, by w ostatnich klatkach znacznie zwolnić. Pewnie zauważyłeś już w okienku Custom Ease In/ Ease Out kilka przydatnych opcji. Property – z rozwijanej listy możemy wybrać, jaki typ animacji nas interesuje (Wykonujemy to po odznaczeniu checkboxu Use one setting for all properties – który to domyślnie przypisuje identyczne ustawienia dla każdego typu animacji).
- Position: ustalamy Easing dla poruszającego się po scenie obiektu (tak jak to ma miejsce w przypadku naszej piłeczki)
- Rotation: Easing dla obracającego się obiektu
- Scale: Easing dla skalowanego obiektu – chodzi o np. powiększanie oraz inne modyfikacje kształtu wykonane za pomocą narzędzia Free Transform
- Color: chodzi o Easing dla zmiany koloru danego obiektu
- Filters: ogromne możliwości daje nam Easing Filtrów Flasha. Dzięki tej opcji możemy wprowadzić w życie interesujące i realistyczne efekty jak na przykład stopniowe wyostrzanie obiektu (z filtrem Blur)
W panelu występują jeszcze inne przyciski jak na przykład Stop i Play 
, które pozwala na bieżąco “podglądać” naszą animację, oraz nieoceniony przycisk Reset 
, który pozwoli nam przywrócić domyślną dla Ease wartość zero, jeśli zbyt dużo namieszamy.
Na deser nadamy naszej piłeczce jeszcze więcej realizmu. Sprawimy, że przy każdym odbiciu będzie się odkształcała, a następnie wracała do pierwotnej postaci. W tym celu zaznaczmy kilka klatep przed i po odbiciu (powiedzmy, że będą to klatki od 16 do 25). Teraz zaznacz klatki 17-24, kliknij na zaznaczeniu prawym przyciskiem myszy i wybierz opcję Remove Tween.
Czas zapoznać Cię z drugą metodą animacji we Flashu, którą nazywamy animacją poklatkową (z ang. Frame by Frame – FbF). Zapewne pamiętasz pierwsze “animacje”, które tworzyłeś na papierze. Na brzegu określonej liczby karteczek rysowałeś postaci, których pozy różniły się jedynie nieznacznie, a następnie wprawiając w ruch karteczki obserwowałeś efekt ruchu. To właśnie na tej bazie tworzone są wszystkie animacje (co możesz doskonale zaobserwować dzięki Onion Skin). Rzeczy dzieją się tak szybko, że ludzkie oko rejestruje “przeskakiwanie” obiektu, jako płynny ruch (pamiętasz, co pisałem o tym, jak ważne jest dobranie odpowiedniej liczby klatek wyświetlanych na sekundę? Teraz widzisz, jak ściśle to wszystko jest ze sobą połączone). Jak już wspomniałem, drugim po Motion Tweenie typem animacji jest animacja FbF. Jest ona niezastąpiona jeśli chcemy uzyskać maksymalną kontrolę nad animowanym obiektem i sam korzystam z niej bardzo często. Przejdź teraz do 17 klatki naszej animacji i za pomocą opcji Free Transform lakko rozciągnij naszą piłeczkę. Taką operację powtórz dla klatek 18, 19 i 20, za każdym razem również troszeczkę zwężając piłeczkę i za pomocą kursorów ustawiając ją we właściwej pozycji (pamiętaj, żeby mieć cały czas włączone Onion Skin!). Powinno to wyglądać następująco w 20 klatce:
Czas na gwałtowne odbicie. Na tym etapie rzeczy dzieją się tak szybko, że nasze oko nie zarejestruje “przeskoku” nawet przy znaczącej zmianie kształtu. W klatce 21 rozciągnij więc naszą piłeczkę w pionie i za pomocą kursorów ustaw na odpowiednim miejscu (tak, by jej dolna krawędź pokrywała się z dolną krawędzią rozpłaszczonej piłeczki z poprzedniej klatki).
W kolejnych klatkach 22-24 postępuj tak, aby w końcu piłeczka wróciła do swoich normalnych kształtów.
Teraz przetestuj film. Być może nie uzyskasz idealnego efektu, ale będzie to już efekt zbliżony, który teraz możesz poprawić np. ustawiającEase na 100 (out), dla kuleczki odbijającej się w górę. Teraz eksperymentu z klatkami, przesuwaj kształty tak, by uzyskać odpowiedni rezultat.
Zakończenie
Gratuluję! Dotrwałeś do końca artykułu! Na dodatek nauczyłeś się już wiele i znasz sporo przydatnych terminów. Jeśli zastanawiasz się teraz, jaki rodzaj animacji stosować (poklatkowy czy Motion Tween), mogę Ci jedynie powiedzieć, że ja sam korzystam z tych metod na przemian i uzupełniam je tak, jak w powyższym przykładzie. W niektórych animacjach rzeczy dzieją się tak szybko, że niepotrzebne jst stosowanie metody FbF, jednak gdy jakiś element Twojego filmu wymaga precyzji i idealnego odwzorowania ruchu, polecam spędzić trochę czasu na modyfikowaniu kolejnych klatek, co daje maksimum kontroli i przynosi znakomite rezultaty. W razie pytań lub wątpliwości zapraszam do pisania na forum. Zyczę zapału i wytrwałości przy tworzeniu kolejnych wspaniałych animacji.
Źródło: Grzegorz Róg