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.

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

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 przycisku Edit. 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 klatek przed i po odbiciu. Zaznacz klatki 18-23, 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óż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:

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:

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

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.