Podstawy animacji:

W przeciągu kilku ostatnich lat dokonał się – głównie za sprawą Flasha – ogromny postęp w dziedzinie animacji na potrzeby sieci. Początkowo możliwości animatorów ograniczone były głównie przez wolne połączenia modemowe, które potrafiły skutecznie zniechęcić użytkowników do ściągania stosunkowo ‚ciężkich’ animacji. Obecnie, dzięki powszechnemu dostępowi do łącz szerokopasmowych animacja w internecie przeżywa prawdziwy rozkwit. Flash jest niewątpliwie najdogodniejszym narzędziem do tworzenia animacji na potrzeby internetu i nie tylko. W najnowszej wersji wprowadzono wiele ulepszeń które sprawiły że jest to doskonałe narzędzie zarówno dla początkujących jak i zaawansowanych animatorów.

kurs animacji Flash

Mimo ogromnych możliwości, które niesie za sobą korzystanie z narzędzi Flasha, szybko przekonasz się że wciąż niezastąpione będą inne narzędzia. Jakie? Może wyda Ci się to śmieszne, ale w początkowej fazie tworzenia animacji zawsze wyłączam komputer, biorę kartkę papieru i ołówek i staram się przenieść moje myśli na papier. Uwierz mi że ślęczenie przed monitorem nie jest najlepszym rozwiązaniem jeśli szukasz pomysłu i inspiracji. Jeśli nic nie przychodzi Ci do głowy, rozejrzyj się dookoła. Spójrz przez okno, przypomnij sobie sytuację która zapadła Ci w pamięć i spróbuj odtworzyć ją na papierze. Możesz też otworzyć książkę, przeczytać losowe zdanie i spróbować je zilustrować na papierze. Jest to wypróbowany sposób który skutecznie pobudza wyobraźnię i polepsza koncentrację.

Czy musisz mieć talent do rysowania? Zależy, co chcesz osiągnąć. Jeśli właśnie obejrzałeś najnowszą produkcję studia Disneya i zajrzałeś do tego kursu by nauczyć się robić podobne animacje, to nie jest odpowiednia droga – wyłącz komputer i rozpocznij studia na ASP lub w szkole filmowej. Nie chcę Cię jednak zniechęcać. Czasem najbardziej profesjonalnie, ale bez pomysłu wykonana animacja nie dorasta do pięt klimatem czy inwencją kreatywnego animatora – amatora. Wcale nie musisz tworzyć doskonałych animacji by osiągnąć satysfakcję i uznanie odwiedzających Twoją stronę – w internetowych animacjach, które są z reguły krótkie liczy się coś innego – przekaz, treść, pomysł, oryginalność, cel. Masz genialny pomysł – ołówek to sprawa drugorzędna. Zresztą zaraz zobaczysz, jak łatwo można za pomocą Flasha stworzyć ciekawie wyglądającą postać.

Gdy przejrzysz pierwsze lekcje tego kursu, możesz zapytać po co uczę Cię rysować. Zapewne koncentrujesz się na tworzeniu stron we Flashu i technika rysowania może nie być tak atrakcyjna jak np. podstawy ActionScript czy inne tematy związane z publikacją Flashowych filmów w sieci. Możesz też uważać że nie masz zdolności plastycznych i nie będziesz korzystał z tego typu elementów na swoich stronach. Pragnę jednak wyprowadzić Cię z błędu – nauka rysowania dała mi naprawdę bardzo dużo gdy zaczynałem przygodę z Flashem i uważam ją za jedną z podstawowych umiejętności sprawnego grafika i animatora Flash. Przede wszystkim, zdziwisz się jak łatwo możesz tworzyć dobrze wyglądające grafiki i jak bardzo okaże się to pomocne przy tworzeniu stron www, bannerów itp., oswoisz się także z interfejsem programu, wyrobisz sobie pewien unikalny styl tworzenia, który znajdzie odzwierdciedlenie we wszystkich Twoich pracach.

W poniższym kursie 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ę. Kurs ten nie stanowi opisu jednej konkretnej czynności, ale składa się z kilku niezależnych części, zawierających podstawy, które po lekturze artykułu będziesz mógł rozszerzyć.

Kurs animacji, podobnie jak kurs Flasha podzieliłem na kilka części. W części pierwszej znajdziesz opis podstawowych narzędzi programu Flash i poznasz prostą technikę rysowania, w części drugiej zajmiemy się zagadnieniami stricte związanymi z animacją naszych Flashowych obiektów. Podobnie jak pozostałe kursy na stronie kurs opiera się na najnowszej wersji Flasha.

Ok, tyle tytułem wstępu, do dzieła!

Zobacz także kurs animacji Flash na eduweb.pl!

Paleta Tools

W najnowszej, ósmej edycji Macromedia Flash, niewielkie zmiany wprowadzono w palecie Tools. Nie będę po kolei omawiał wszystkich narzędzi, jednak zwrócę uwagę na te, które posiadają teraz dodatkowe opcje. I tak na przykład wybierzmy narzędzie Brush Tool.

Poniżej, w palecie Tools, sekcji Options, mamy do wyboru opcję Brush Mode.

Dostępne tryby to:

  • Paint Normal: W tym trybie rysując pędzlem przykrywamy wszystko, co jest widoczne w danej klatce (jak wypełnienia, linie czy obramowania)
  • Paint Fills: Rysując pędzlem przykrywamy wypełnienia oraz obszar roboczy (pozostawiając obramowanie czy linie)
  • Paint Behind: Rysujemy „za” elementami wspomnianymi powyżej
  • Paint Selection: Pozwala na rysowanie jedynie w obrębie zaznaczonych elementów
  • Paint Inside: Przykrywamy tylko elementy wypełnienia (pod warunkiem, że zaczniesz malować wewnątrz wypełnienia)

Kolejną nowością jest opcja Object Drawing (J) oznaczona ikonką . W prostym rozumieniu pozwala w jednej klatce rysować obiekty, które mogą nachodzić na siebie bez żadnych „konsekwencji”. Przy odznaczeniu tej opcji przechodzimy do standardowego trybu Merge Drawing, w którym jeden kształt stworzony na drugin a następnie usunięty powoduje „wycięcie” kształtu pierwszego. Wkrótce przekonasz się, że opcja ta może być pożyteczna przy tworzeniu wielu kształtów w jednej klatce a następnie rozdzielaniu ich do osobnych warstw po zaznaczeniu i wybraniu opcji Distribute to Layers.


Zajmijmy się teraz narzędziem Pencil.

Podobnie jak w przypadku pędzla, w opcji ołówka mamy teraz dodatkową ikonkę . Po kliknięciu otrzymujemy rozwijane menu z następującymi trybami:

Dostępne są tryby:

  • Straighten: Bardzo przydatny tryb pozwalający osiągnąć proste linie przy rysowaniu „z ręki”. W tym trybie drobne drgania naszej dłoni nie wpływają na stabilność kreski
  • Smooth: Rysowane przez nas linie są w tym trybie automatycznie wygładzane
  • Ink: To jak gdyby tryb „normalny” – linia rysowana przez nas jest dokładnym odwzorowaniem ruchów ręki

Zobacz także kurs animacji Flash na eduweb.pl!

Rysujemy!

Pierwszą i podstawową czynnością, jaką musimy wykonać przed animowaniem, jest stworzenie postaci. Wbrew pozorom jest to czynność bardzo ważna, od której zależy powodzenie i końcowy efekt pracy. Większość animatorów do tworzenia postaci posługuje się tabletem, którego zakup polecam. Przyjrzyjmy się poniższej ilustracji:

Są to linie wykonane za pomocą narzędzi Flasha. Pierwsza kreska wykonana została narzędziem Brush Tool, druga tabletem, trzecia narzędziem Pencil Tool, ostatnia natomiast narzędziem Pen Tool. Każda z przedstawionych technik ma swoje zalety i cechy charakterystyczne, jednak jak zauważyłeś najbardziej oryginalne i ciekawe efekty daje użycie tabletu, dzięki zastosowaniu w nim zmiennych poziomów nacisku. Dlatego popularnym wśród animatorów procesem jest tworzenie postaci najpierw na papierze, a następnie odrysowywanie zeskanowanego obrazka we Flashu przy pomocy tabletu.

Zakładam, że nie posiadasz jeszcze tabletu, więc nauczę Cię najprostszej metody rysowania postaci, która nie wymaga ani nadzwyczajnych umiejętności, ani znakomitej znajomości Flasha.

Zobacz teraz, jak będzie wyglądał końcowy efekt naszej pracy:

Jak widzisz nasz bohater nie jest ideałem – ma zeza oraz nieproporcjonalnie duże prawe oko, ale nie będzie nas to teraz interesowało.
Ważna jest technika, za pomocą której został stworzony. Już wkrótce zobaczysz, jakie to proste!

Zaczynamy od organizacji miejsca pracy.

Ważną rzeczą, którą musimy zrobić na początku, jest przygotowanie Flasha do pracy. Najpierw określ rozmiary filmu w zakładce properities (u mnie 500×500 px). Teraz ustal ilość klatek wyświetlanych na sekundę (FPS). Domyślną wartością dla tego pola jest 12, jednak nie wystarczy to do płynnego wyświetlania animacji. Optymalnym rozwiązaniem jest ustawienie framerate na 24 fps, co gwarantuje płynność przy stosunkowo niskim obciążeniu procesora. Uważaj, by nie przesadzić z ilością fps – gdy wybierzesz np. 40, komputer może nie wyrabiać przy bardziej złożonych animacjach (zwłaszcza jeśli animujesz Alphą – zamiast tego, o ile to możliwe, stosuj metodę Tint). Bez względu na to, jaką wartość wybierzesz, staraj się konsekwentnie ją stosować dla kolejnych filmów. Dzięki temu przyzwyczajeniu będzie Ci łatwiej dobierać „na oko” odległość na listwie czasowej, która przekłada się na czas trwania animacji.

Kolejnym ułatwieniem będzie przystosowanie do naszych potrzeb listwy czasowej. Jako że będziemy pracować na wielu warstwach, warto nieco zmniejszyć wysokość warstw. W tym celu klikamy na ikonce w prawym górnym rogu listwy czasowej. Rozwiniemy menu, w którym dostępne są następujące opcje:

Z menu wybieramy opcję Short. Aby widzieć więcej klatek na listwie czasowej możemy wybrać także opcję Small, jednak na razie nie warto tego robić gdyż będziemy pracować głównie w pierwszych klatkach naszych warstw. Warto też zwrócić uwagę na pozostałe dostępne opcje, zwłaszcza nową opcję Previev, która pozwala na podgląda każdej klatki bezpośrednio z listwy czasowej. Niestety, wybranie tej opcji z pewnością nie sprzyja zaoszczędzeniu miejsca na monitorze.
Przejdźmy do konkretów.

Zacznijmy więc rysować naszego bohatera. Ja zwykle zaczynam od największych części przechodząc na końcu do szczegółów. Pamiętaj, żeby każdy obiekt, a w zasadzie figurę, którą stworzymy, umieszczać na osobnej warstwie w pierwszej klatce. Zacznijmy więc od ogólnego zarysu postaci. Z panelu Tools wybierz narzędzie Oval Tool (O), wyłącz obramowanie, kolor wypełnienia ustaw na pomarańczowy (w moim przypadku #FFCC00) i mniej więcej na środku pola pracy narysuj owal o rozmiarach podobnych do rozmiarów figury naszego bohatera i zbliżonym kształcie.
Teraz wybierz narzędzie Selection Tool (V), ustaw kursor na krawędzi poniżej lewej połowy naszego kształtu, złap za krawędź i przeciągnij tak, by utworzyć kształt jak najbardziej zbliżony do oczekiwanego. Ten sam zabieg powtórz po przeciwnej stronie. Powinieneś osiągnąć podobny efekt:

Kiedy już stworzysz odpowiedni kształt zaznacz go, skopiuj (Ctrl+C), a następnie wklej zachowując odpowiednie położenie za pomocą kombinacji klawiszy Ctrl+Shift+V. Teraz kliknij prawym przyciskiem myszy na zaznaczonym obiekcie i wybierz opcję Distribute to Layers.

W klatkach kluczowych każdej warstwy masz teraz ten sam kształt. Zablokuj wyższą warstwę i zmień kolor naszego obiektu na czarny. Jeśli wszytsko dobrze zrobiłeś, nie zauważysz tej zmiany. Teraz kliknij prawym przyciskiem na naszym kształcie i z rozwijanego menu wybierz opcję Free Transform. Z wciśniętym klawiszem Shift (by zachować proporcje) rozciągnij kształt tak, by stworzyć czarne krawędzie. Teraz poeksperymentuj trochę i za pomocą kursorów lekko przemieszczaj czarny kształt, by uzyskać właściwy efekt.

Pozostale elementy naszego bohatera zostały wykonane w podobny sposób. Jedyne narzędzia, z jakich korzystałem to wspomniane Oval Tool (O), Selection Tool (V) oraz Free Transform Tool (Q) i Rectangle Tool (R). W kwadracie mamy możliwość przekształcać zarówno boki jak i rogi. Pokażę Ci jeszcze prosty sposób na stworzenie cieni na postaci. Stwórz nową warstwę, wybierz narzędzie Rectangle Tool (R) a następnie w palecie Tool, w opcjach dostępnych dla wybranego narzędzia kilknij na ikonkę . Opcja Snap to Object, którą właśnie zaznaczyłeś, sprawia, że krawędzie poszczególnych kształtów „przyciągają się”. Sprawdźmy to w praktyce. Ustaw kolor wypełnienia na trochę ciemniejszy niż kolor, którego używałeś wcześniej. W tym celu po kliknięciu na ikonkę wypełnienia i rozwinięciu okienka z dostępnymi kolorami, wybierz z prawego górnego rogu ikonkę . Teraz zmień kolor za pomocą suwaka – przesuń go nieco w dół. Kolory, które tworzysz w ten sposób są później dostępne w dolnej części palety wypełnienia.

Narysuj teraz kwadrat o wymiarach pobnych do cienia, który chcesz otrzymać. Złap teraz za odpowiednie rogi kwadratu i przeciądnij je w stronę krawędzi kształtu tak jak na obrazku:

Dopasuj pozostałe krawędzie i boki kwadratu tak, by uzyskać odpowiedni efekt.
Pozostałe elementy, które stworzyłem za pomocą identycznej techniki jak te omówione, prezentują się następująco.

Niektóre z nich wydają się być bardziej skomplikowane, jak skrzydło czy grzywa, ale tak naprawdę stworzenie ich to tylko kwestia treningu. Do zmiany wyglądu poszczególnych kształtów stosujcie nie też opcje Disort oraz Envelope, dostępne w rightcilck menu. Poza tym, pracuj zawsze w jak największym powiększeniu. To zapewni sporą kontrolę i precyzję wykonywanych przez Ciebie elementów

Znasz już technikę tworzenia podobnej postaci. Technika ta wymaga odrobiny treningu, więc nie oczekuj, że od razu uzyskasz wymarzone efekty. Próbuj, doskonal swoją technikę, wprowadzaj w życie nowe pomysły. Rysuj na papierze i przenoś swoje szkice na komputer, a potem wykorzystuj we Flashu. Wkrótce stworzysz ciekawy zbiór postaci, który jest osobistym skarbem każdego animatora. Poznasz także optymalne metody rysowania postaci w sposób, aby później było łatwo je animować. Czy zwróciłeś na przykład uwagę, dlaczego większość bohaterów Hanna-Barbera posiada widoczny element oddzielający głowę od tułowia (Fred Flinstone ma krawat, Scooby Doo – obrożę)? Pozwala to animatorom w łatwy sposób poruszać głową postaci bez konieczności przenoszenia ruchów na resztę ciała postaci. Bez muszki ruchy głowy misia Yogi wyglądałyby nienaturalnie!


Zobacz także kurs animacji Flash na eduweb.pl!

Tworzymy symbole.

Kiedy masz już gotową postać, przed zanimowaniem powinieneś każdy element naszego bohatera przekształcić w symbol. Aby to uczynić, kliknij na klatkę z danym obiektem (lub zaznacz sam obiekt), a następnie wciśnij F8. Z dostępnych opcji wybierz Symbol typu Graphic. Możesz równie dobrze zamknąć kształt w Movie Clipie, jednak ja osobiście wolę (o ile to możliwe) pracować z symbolami typu Graphic. Ich podstawową zaletą jest fakt, iż przeciągnięte z biblioteki na główną scenę nie wymagają testowania filmu, by można było podejrzeć zawartą w nich animację. Następnym razem możesz od tworzyć symbole na bieżąco, podczas pracy z kształtami. Ważne jest, żebyś wszytskie elementy na scenie trzymał zamknięte w symbolach. Jest kilka powodów, dla których powinieneś to robić. Przede wszystkim, kiedy zamykasz jakiś kształt w symbolu, trafia on do biblioteki (Ctrl+L). Symbol przeciągnięty z biblioteki jest ładowany przez Flasha tylko raz, co skutkuje mniejszymi rozmiarami pliku oraz szybszym ładowaniem. Kolejnym argumentem przemawiającym za stosowaniem symboli jest fakt, iż możemy dla nich stosować odpowiednie parametry takie jak Tint, Alpha, czy Brightness. Wreszcie, dobrze zorganizowana biblioteka pomaga nam zachować porządek a przy dużych projektach składających się z wielu osobnych elementów wręcz niemożliwe jest trzymanie wszytskiego na głównej listwie czasowej.

Zobacz także kurs animacji Flash na eduweb.pl!

Nazewnictwo

Ważne jest, żebyś wyrobił sobie dobry nawyk nazywania zarówno symboli, jak i odpowiednich warstw. Na listwie czasowej możesz także wyświetlać informacje w postaci komentarzy dodawanych do poszczególnych klatek. Aby to zrobić wystarczy zaznaczyć kliknięciem dowolną klatkę kluczową, a następnie w panelu Properities, polu Frame [Frame Label], wpisać odpowiedni teks poprzedzając go znakiem komentarza – dwoma slashami („//”).

Jak pewnie zauważyłeś, pod polem Frame Label znajduje się także rozwijana lista opcji – kiedy wpisałeś komentarz owa opcja zmieniła się automatycznie na Comment. Dzięki tej opcji możesz wpisać w pole Frame Label dowolny tekst, a dopiero potem określić, czy będzie on nazwą klatki (do której będziesz odnosił się z poziomu ActionScript), wspomnianym komentarzem, czy tzw. kotwicą.

Warto wyrobić sobie system nazewnictwa i trzymać się go w każdym projekcie. Możecie uznać to za banał, jednak mnie dzięki konsekwencji stosowania nazw pracuje się dużo szybciej i prościej. Zwłaszcza przy tworzeniu postaci będziesz musiał posługiwać się dziesiątkami symboli. Będziesz też korzystał z opcji Swap Symbol w panelu Properities, dzięki której możesz w dowolnym miejscu listwy czasowej zamienić jeden symbol na inny. Jest to nieocenione przy animowaniu, kiedy w bibliotece mamy kilka różnych pozycji np. ręki czy nogi. Wtedy wystarczy jedynie posłużyć się opcją Swap Symbol by zamienić odpowiednie elementy. Przy odpowiednim nazewnictwie (ja stosuję np. nazwy „noga”, noga1″, noga2″ itd.), właściwe symbole będą się znajdowały obok siebie i łatwo będzie je zastąpić bez przekopywania całej biblioteki.
Kolejnym ułatwieniem pozwalającym sprawnie organizować zawartością biblioteki oraz warstwami na listwie czasowej są foldery. Foldery w bibliotece tworzymy klikając w wolnym polu biblioteki prawym przyciskiem myszy i z rozwijanego menu wybierając opcję New Folder. Teraz możemy zmienić nazwę naszego folderu i umieszczać w nim odpowiednie symbole oraz inne obiekty obecne w bibliotece. Za pomocą podobnej operacji możemy stworzyć folder na listwie czasowej (opcjonalnie wystarczy kliknąć na ikonkę ), w którym będziemy umieszczać odpowiednie warstwy.

Zobacz także kurs animacji Flash na eduweb.pl!

Cień postaci.

Aby stworzyć cień dla postaci musisz całą postać zamknąć w pojedynczym symbolu typu Movie Clip (lub Graphic, ale na potrzeby tego artykułu stwórz MC). W tym celu możesz zaznaczyć i skopiować wszystkie klatki na listwie czasowej, a następnie utworzyć nowy symbol (Ctrl+F8) i tam je wkleić. Teraz przeciągnij nasz symbol na scenę i w zakładce properities, opcję Color ustaw na Tint i wybierz jeden z szarych kolorów. Teraz wystarczy tylko odpowiednio umiejscowić nasz cień w stosunku do postaci i użyć opcji Free Transform, aby odpowiednio go zmodyfikować.

Jeśli postać jest animowana, wystarczy powtórzyć tą samą operację kopiując wszytskie klatki bądź duplikując symbol w obrębie biblioteki a następnie wykonując tą samą operację.

Cień we Flashu 8.

Nowością we Flashu 8, która z pewnością ucieszy wielu grafików, są filtry (wynik fuzji Adobe+Macromedia?). Filtry są dostępne w panelu Properities i można ich używać dla Movie Clipów, tekstu, oraz przycisków. Jeśli znasz programy graficzne typu Photoshop, z pewnością doskonale wiesz, do czego służą filtry. Filtry dodajemy po zaznaczeniu danego obiektu i wybraniu z panelu Properities, zakładki Filters, ikonki . Naszym oczom ukaże się rozwijane menu, z którego możemy wybierać filtry.

Wykonaj teraz podobną operację dla naszego cienia. Zaznacz obiekt kliknięciem a następnie przejdź do zakładki Filters i wybierz filtr Blur.

Prostszym sposobem jest użycie od razu filtra Drop Shadow, bez konieczności korzystania z opcji Tint. Aby zaciemnić dany klip wystarczy wtedy zaznaczyć w zakładce Filters opcję Hide Object. Warto jeszcze zmienić kolor lub ustawić opcję Strenght dla koloru czarnego na 50%.

W obu przypadkach powinniśmy uzyskać podobny efekt.

Zobacz także kurs animacji Flash na eduweb.pl!

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

Zobacz także kurs animacji Flash na eduweb.pl!

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ęś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 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óż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 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ą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.

Zobacz także kurs animacji Flash na eduweb.pl!

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.