Kurs Animacji Flash - rysowanie

• 

poniedziałek, 20 sierpnia 2012 10:08

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.

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 odzwierciedlenie we wszystkich Twoich pracach.

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

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ę Preview, 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 wszystko 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 podobnych do cienia, który chcesz otrzymać. Złap teraz za odpowiednie rogi kwadratu i przeciągnij 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!

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 wszystkiego na głównej listwie czasowej.

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.

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

 

Źródło: Grzegorz Róg