====

Easing i Custom Easing we Flashu CS3



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ęśniej 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 ekeft.

Kurs Animacji Flash

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.

Kurs Animacji Flash

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:

Kurs Animacji Flash

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 wszytskie 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 panelu Properities kliknij na przycisk Edit.

Kurs Animacji Flash

Twoim oczom ukaże się oś oraz linia przypominająca wykres funkcji liniowej.

Kurs Animacji Flash

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:

Kurs Animacji Flash

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 przycisku Edit. Twoim oczom ukaże się krzywa animacji dla Ease równego 100. Powinieneś już dokładnie rozumieć, co się dzieje na osi.

Kurs Animacji Flash

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).

W panelu występują jeszcze inne przyciski jak na przykład Stop i Play Kurs Animacji Flash, które pozwala na bieżąco "podglądać" naszą animację, oraz nieoceniony przycisk Reset Kurs Animacji Flash, 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 klatek przed i po odbiciu. Zaznacz klatki 18-23, kliknij na zaznaczeniu prawym przyciskiem myszy i wybierz opcję Remove Tween

Kurs Animacji Flash

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óżnył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ą wszytskie 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 18 klatki naszej animacji i za pomocą opcji Free Transform lakko rozciągnij naszą piłeczkę w pionie:

Piłeczka

Tą operację powtórzymy w klatce 19, ale tu aż do przesady rozciągniemy piłeczkę. W klatce 20 znajduje się stan piłeczki kiedy dotyka podłoża, od którego ma się odbić. Chciałbym, żebyśmy tak rozciągnęli piłeczkę w klatce 19, żeby jej dolna krawędź pokryła się z dolną krawędzią piłeczki z klatki 20. Zanim rozciągniesz piłeczkę, pamiętaj, żeby Registration Point (czyli tą białą kropeczkę) przesunąć na samą górę piłki - wówczas będziesz rozciągał jedynie w doł a górna krawędź pozostanie bez zmian:

 

pilka Flash

 

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 poziomie 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).

pilka odbicie

W kolejnych klatkach 22-23 postępuj tak, aby w końcu piłeczka wróciła do swoich normalnych kształtów, możesz ją przy okazji nieco wydłużyć w pionie.

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ąc Ease na 100 (out), dla kuleczki odbijającej się w górę. Teraz eksperymentu z klatkami, przesuwaj kształty tak, by uzyskać odpowiedni rezultat.