Tworzenie obiektów dla animacji

9
Tworzenie obiektów
dla animacji
qq Jakie narzędzia zawiera przybornik programu Adobe Flash?
qq Co to jest listwa czasowa i jej warstwy?
qq Jak tworzyć i modyfikować krzywe w programie Adobe Flash?
Rozpoczynamy trzecią część podręcznika. Zapoznawszy się z cyfrową obróbką dźwięku i zagadnieniami związanymi z tworzeniem i edycją obrazów statycznych, jesteśmy
gotowi do wykorzystania obydwu mediów do zbudowania ruchomych obrazów, ewentualnie wzbogaconych o dźwięk — czyli mówiąc krótko do tworzenia animacji.
Animacje znajdują szerokie zastosowanie. Mogą wchodzić w skład filmów lub być
atrakcyjnym dopełnieniem prezentacji multimedialnych. Ale chyba najczęściej są
wykorzystywane do wzbogacenia zawartości stron internetowych. Chyba każdy zetknął się już z animowanymi reklamami pojawiającymi się na portalach i stronach
internetowych? Często reklamy takie są irytujące, zwłaszcza gdy zajmują całe okno
przeglądarki i nie dają łatwo się zamknąć. Ale często są pożytecznym źródłem informacji o produktach i usługach firm. Animacje na stronach internetowych mogą być
jak każde narzędzie użyte w dobry lub zły sposób. Warto zastanowić się nad sensem
tworzenia reklam, które wzbudzają w użytkowniku złość i agresję. Czy rzeczywiście
zachęcają do kupienia produktu, który reklamują?
Animacje na stronach internetowych nie muszą ograniczać się do reklam. Często całe
strony internetowe tworzone są jako interaktywna animacja. Wyświetlają informacje i umożliwiają użytkownikowi nawigowanie pośród dostępnych treści. Następny
rozdział wyjaśnia, jak tworzyć takie animacje. Najpierw jednak przedstawimy podstawy tworzenia animacji komputerowej. W rozdziale tym będziemy posługiwać się
programem Adobe Flash. Wprawdzie wiele programów, w tym także narzędzi grafiki komputerowej, na przykład CorelDRAW, pozwala eksportować wyniki do plików
w formacie animacji Flash (np. swf), to jednak pełne możliwości daje jedynie komercyjny program Adobe Flash. Niestety, o ile w wypadku dźwięku i grafiki komputerowej
Multimedia_i_grafika_komputerowa.indb 113
2010-04-28 11:10:50
Rozdział 9 t Tworzenie obiektów dla animacji
możliwe było posługiwanie się darmowymi narzędziami, o tyle w wypadku tworzenia
animacji komputerowej raczej konieczne jest pozostanie przy komercyjnym standardzie (bezpłatną, testową, 30-dniową wersję programu można pobrać ze strony www.
adobe.com).
9.1. Podstawy programu Adobe Flash
Program Adobe Flash w obecnej wersji CS4 (rok 2010) jest potężnym pakietem narzędziowym. Został wyposażony w narzędzia do rysowania i przekształcania obiektów
graficznych, prostej obróbki audio, a nawet wideo, konwersji między formatami, tworzenia animacji. Zawiera także skryptowy język programowania, ActionScript, który
umożliwia tworzenie prostych aplikacji w środowisku Flash. Za jego pomocą można
tworzyć interaktywne animacje, ale także proste programy, na przykład gry (więcej
informacji na temat języka ActionScript zawiera rozdział 10.).
Warto mieć zatem świadomość, że tak skomplikowany pakiet narzędziowy musi posiadać rozbudowany interfejs użytkownika. Przyjrzymy mu się teraz dokładniej. Po
uruchomieniu programu pojawia się okno wyboru typu tworzonej zawartości (rysunek 9.1).
Rysunek 9.1. Okno startowe programu Adobe Flash
114
Multimedia_i_grafika_komputerowa.indb 114
2010-04-28 11:10:52
9.1. Podstawy programu Adobe Flash
Użytkownik ma wiele możliwości wyboru — od otwarcia uprzednio utworzonego projektu (Open a Recent Item (Otwórz ostatni element)), poprzez tworzenie różnych rodzajów nowych projektów (Create New (Utwórz nowy)), skończywszy na przewodnikach,
dokumentacji, pomocy i objaśnieniach nowych funkcjonalności (New Features (Nowe
funkcje)). Utworzymy nowy projekt, którego wynikiem będzie plik Flash, dlatego wybieramy opcję pierwszą od góry w środkowej szpalcie — Flash File (ActionScript 3.0)
(Plik Flash (ActionScript 3.0)). Nie należy mylić projektu, którego wynikiem jest Flash
File (Plik Flash), z Flash Project (Projekt Flash). Jak widać, wybierając rodzaj tworzonego projektu, dodatkowo określamy wersję języka skryptowego ActionScript, która będzie wykorzystywana. Obecnie aktualna jest wersja 3.0, niemniej aby zachować zgodność ze starszymi projektami, może być konieczne tworzenie projektów w wersji 2.0.
W przypadku prostych animacji wybór wersji języka nie ma większego znaczenia.
Jak widać na rysunku 9.2, wybieramy Create New/Flash File (ActionScript 3.0) (Utwórz
nowy/Plik Flash (ActionScript 3.0)). Pojawi się wówczas główne okno aplikacji (rysunek 9.3).
Rysunek 9.2. Krok pierwszy — wybór rodzaju tworzonego projektu
115
Multimedia_i_grafika_komputerowa.indb 115
2010-04-28 11:10:52
Rozdział 9 t Tworzenie obiektów dla animacji
Menu
Scena
Panel
właściwości
Przybornik
narzędzi
Listwa czasu
Rysunek 9.3. Okno główne programu Adobe Flash — zielonym
kolorem zaznaczono najważniejsze elementy interfejsu
Okno programu składa się z kilku komponentów. Główny obszar wypełnia scena. Biały prostokąt reprezentuje aktualny widok animacji. Można go sobie wyobrażać jako
ekran, na którym odtwarzana będzie animacja. Gotowy projekt Flash zostanie wyświetlony w oknie dokładnie wypełnionym obszarem sceny.
Ponad sceną znajduje się pasek menu, z którego mamy dostęp do najważniejszych
funkcji i opcji programu. Pierwszą rzeczą, którą należy zrobić, tworząc projekt w Adobe Flash, jest zapis projektu do pliku. Wybieramy w tym celu polecenie Save As (Zapisz
jako) z menu File (Plik). Podajemy następnie nazwę projektu oraz lokalizację i zapisujemy. Domyślnym formatem pliku projektu (nie należy go mylić z końcowym plikiem
Flash) jest FLA. Jest to wewnętrzny format Adobe Flash.
Poniżej sceny znajduje się podłużny, prostokątny obszar Timeline (Oś czasu) (rysunek 9.4).
Pojedyncza
klatka
Dodanie
nowej wastwy
Warstwa i jej
kolejne klatki
Rysunek 9.4. Obszar osi czasu programu Adobe Flash
Oś czasu jest jednym z najważniejszych pojęć w tworzeniu animacji. To na niej definiujemy, jak zmieniać się będą animowane obiekty oraz co i kiedy się wydarzy. Jak wi-
116
Multimedia_i_grafika_komputerowa.indb 116
2010-04-28 11:10:53
9.1. Podstawy programu Adobe Flash
dać na rysunku 9.4, oś czasu składa się z poziomych pasków oznaczających warstwy,
ułożonych na osi czasu. Czas mierzony klatkami zaznaczono u góry. Warstwy można
wyobrażać sobie jako nałożone na siebie kolejne animacje. Na scenie będą widoczne
obiekty ze wszystkich warstw (z wyjątkiem warstw ukrytych). Każda warstwa składa
się z pojedynczych klatek reprezentowanych w obszarze osi czasowej przez małe pionowe prostokąciki.
9.1.1. Klatki a czas wykonania animacji
W programie Adobe Flash animowane obiekty zmieniają się w kolejnych klatkach. Oś
czasu wyrażona jest również w tych jednostkach — w klatkach. W praktyce jednak
tym, co najbardziej nas interesuje przy projektowaniu i uruchamianiu animacji, jest
czas wykonania animacji w sekundach oraz to, ile sekund albo części sekundy upływa między jednym a drugim położeniem animowanej postaci. Jak wiążą się z sobą te
dwie wielkości? Odpowiedzią jest współczynnik FPS (ang. Frames Per Second — klatki
na sekundę) wyrażający liczbę klatek animacji wyświetlonych w ciągu jednej sekundy.
Aby animacja lub film były płynne, wartość FPS powinna wynosić co najmniej 20.
Standardowo w filmach stosuje się wartości 25, a nawet 30.
W programie Adobe Flash wartość FPS można zmienić, korzystając z osi czasu. Wystarczy kliknąć aktualną wartość FPS, a następnie podać nową (rysunek 9.5).
Rysunek 9.5. Zmiana ustawień liczby klatek na sekundę
Korzystając z przycisków w lewym dolnym rogu obszaru osi czasu, można dodawać
i usuwać warstwy. Warstw może być w projekcie dowolnie dużo — tyle, ile potrzeba.
Dobrze jest umieszczać różne obiekty na oddzielnych warstwach. Przykładowo: jeżeli
animacja przedstawia człowieka idącego na tle jakiegoś krajobrazu oraz poruszające
się nad nim chmury na niebie, to tło umieszczone może być na warstwie nr 1, postać
człowieka na warstwie nr 2, chmury na warstwie nr 3. Ale to nie wszystko. Aby łatwiej odnaleźć poszczególne elementy składowe animacji, warto nadawać warstwom
bardziej opisowe nazwy. A zatem w powyższym prostym przykładzie moglibyśmy
użyć następujących nazw: Tło zamiast Warstwa nr 1, Człowiek zamiast Warstwa nr 2
i Chmury zamiast Warstwa nr 3.
W praktyce zapewne umieścilibyśmy nawet poszczególne chmury na osobnych warstwach, dzięki czemu moglibyśmy kontrolować animację każdej z nich, a także na
przykład przesłonić jedną chmurę drugą. Ponadto takie podejście zwiększa porządek
w projekcie, przez co łatwiej i szybciej można poprawiać błędy i wprowadzać zmiany. Można powiedzieć, że podobnie jak podczas pisania kodu programu w języku
117
Multimedia_i_grafika_komputerowa.indb 117
2010-04-28 11:10:53
Rozdział 9 t Tworzenie obiektów dla animacji
programowania (np. C++), tak i tu obowiązuje odmiana zasady „dziel i rządź”. Podczas
pisania kodu większe klasy czy funkcje zawsze warto podzielić na kilka mniejszych.
Tworząc animację, bardziej złożone warstwy warto rozbić na warstwy prostsze.
Ale jak zmienić nazwę warstwy w programie Adobe Flash? Klikając prawym przyciskiem
myszy daną warstwę, uzyskujemy dostęp do menu kontekstowego (rysunek 9.6). Wybierając Properties (Właściwości), możemy zmienić nazwę warstwy oraz inne jej atrybuty.
Przy okazji warto przyjrzeć się innym poleceniom menu kontekstowego warstwy, gdyż
będą one przydatne później. Jednym z nich jest polecenie Mask (Maska) umożliwiające
tworzenie w warstwie maski, przez którą widać warstwę leżącą pod spodem.
Rysunek 9.6.
Menu kontekstowe warstwy
9.2. Przybornik narzędzi
Zwróćmy teraz uwagę na przybornik narzędzi znajdujący się po prawej stronie okna
aplikacji. Zawiera on szereg narzędzi do rysowania i transformacji obiektów graficznych. Na rysunku 9.7 przedstawiono zawartość przybornika, a poniżej ją opisano.
Dla ułatwienia ponumerowano poszczególne narzędzia. Szczegółowy opis, jak używać narzędzi, znajduje się w kolejnym podrozdziale „Tworzenie statycznych obiektów graficznych”.
1
2 3
4
5
6
7 8
9 10 11 12 13 14 15 16 17 18
19 20 21 22 2324
25
Rysunek 9.7. Zawartość przybornika narzędzi
Poszczególne symbole reprezentują narzędzia lub grupy narzędzi. Symbole grupujące
więcej narzędzi (np. 3, 4 i 6) mają małą, czarną strzałkę w prawym dolnym rogu.
Twórcy Adobe Flash ukryli podobne narzędzia pod jednym symbolem przybornika,
ponieważ wszystkie narzędzia nie zmieściłyby się na jednym pionowym pasku. Jest
ich zbyt wiele. Poniżej poszczególne narzędzia zostały opisane domyślnie pierwszym
118
Multimedia_i_grafika_komputerowa.indb 118
2010-04-28 11:10:53
9.2. Przybornik narzędzi
symbolem. Gdy inny symbol z grupy zostanie wybrany, staje się on symbolem widocznym w przyborniku.
1. Selection Tool (Narzędzie Zaznaczenie). Umożliwia zaznaczanie obiektów.
2. S ubselection Tool (Narzędzie Zaznaczenie cząstkowe). Służy do zaznaczania
i modyfikowania części składowych obiektów, na przykład segmentu krzywej.
3. F
ree Transform Tool (Narzędzie Przekształcanie swobodne) i Gradient Transform
Tool (Narzędzie Przekształcanie gradientu).
4. T
ransformacje w 3D. Symbol grupuje dwie transformacje trójwymiarowe
— 3D Rotation Tool (Narzędzie Obrót 3D) i 3D Translation Tool (Narzędzie
Translacja 3D).
5. L
asso Tool (Narzędzie Lasso). Narzędzie to służy do zaznaczania obszarów
o nieregularnych kształtach.
6. P
en Tool (Narzędzie Pióro) służy do rysowania krzywych Hermite’a zdefiniowanych przez dwa odcinki styczne (o krzywych Hermite’a wspominaliśmy już
w rozdziale 6.). Pod symbolem pióra kryją się jeszcze narzędzia pomocnicze:
Add Anchor Point Tool (Narzędzie Dodaj punkt kontrolny), Delete Anchor Point
Tool (Narzędzie Usuń punkt kontrolny) i Convert Anchor Point Tool (Narzędzie
Konwertuj punkt kontrolny).
7. T
ext Tool (Narzędzie Tekst). Służy do umieszczania w animacji formatowanych
napisów uwzględniających style, czcionki, kolory itd.
8. L
ine Tool (Linia). Umożliwia rysowanie linii na ekranie. Warto przy okazji
wspomnieć, że każde narzędzie ma swoje właściwości, które można zmieniać.
Wybór określonego narzędzia powoduje, że zmienia się zawartość panelu
Properties (Właściwości) w oknie aplikacji Adobe Flash. Przykładowo dla linii
możliwa jest zmiana jej grubości i stylu (rysunek 9.8).
Rysunek 9.8.
Właściwości linii — grubość linii
zmieniono na 20 pikseli
119
Multimedia_i_grafika_komputerowa.indb 119
2010-04-28 11:10:53
Rozdział 9 t Tworzenie obiektów dla animacji
Co więcej, wybór niektórych narzędzi powoduje, że w przyborniku pojawiają się dodatkowe ikonki określające pewne warianty dla wybranego narzędzia.
W przypadku linii jednym z takich wariantów jest tryb doklejania do obiektów
(Snap to Objects). W trybie tym końce rysowanych odcinków mogą być automatycznie przyciągane i doklejane do już narysowanych obiektów, na przykład
innych odcinków, co pozwala na tworzenie łamanych.
9. R
ectangle Tool (Narzędzie Prostokąt). Umożliwia rysowanie prostokątów. Symbol ten grupuje również narzędzia do rysowania kształtów owalnych (Oval
Tool (Owal)), a także złożonych kształtów na bazie prostokąta (Rectangle Primitive Tool (Narzędzie Prostokąt)), owalu (Oval Primitive Tool (Narzędzie Owal))
i gwiazdy (Polystar Tool (Narzędzie Gwiazda-Wielokąt)).
10. P
encil Tool (Narzędzie Ołówek). Służy do rysowania nieregularnych linii. Są one
potem przekształcane na przykład na segmenty krzywych.
11. B
rush Tool (Narzędzie Pędzel) służy do malowania pikseli zadanym wzorcem
(kształtem) i stylem pędzla. Symbol ten kryje również pędzel imitujący aerozol
(Spray Brush Tool (Narzędzie Rozpylacz)).
12. D
eco Tool (Narzędzie Zamalowywanie). Służy do umieszczania na obrazie
ozdobnych wzorów, na przykład listków winorośli (Vine).
13. B
one Tool (Narzędzie Kość). Jest to jedno z bardziej zaawansowanych narzędzi
przybornika Adobe Flash. Umożliwia zdefiniowanie segmentów tworzących
dany kształt (tzw. kości). Możemy wyobrazić sobie narysowany kształt, na
przykład łuk krzywej jako fragment ciała zwierzęcia złożony z kości. Narzędzie
do tworzenia animacji segmentowych pozwala zdefiniować, z ilu kości składać się będzie kształt i jak są one wzajemnie ułożone. Następnie Adobe Flash
wykona animację takiego obiektu. Jest to wygodne, ponieważ ruch na przykład ramienia ma wpływ na położenie dłoni. Animowanie każdego kawałka
osobno byłoby kłopotliwe.
14. S ymbol grupuje dwa narzędzia do wypełniania obszarów kolorem — Paint
Bucket Tool (Narzędzie Wiadro z farbą) i Ink Bottle Tool (Narzędzie Kałamarz).
15. E
yedropper Tool (Narzędzie Kroplomierz). Pobiera kolor punktu na ekranie. Narzędzie podobne do narzędzi dostępnych w programach grafiki komputerowej,
np. w Microsoft Paint.
16. E
raser Tool (Narzędzie Gumka). W zależności od wybranego kształtu usuwa
mniejsze lub większe fragmenty obrazu.
17. Hand Tool (Narzędzie Rączka). Narzędzie nawigacyjne do przesuwania widoku.
18. Z
oom Tool (Narzędzie Powiększenie). Służy do powiększania lub pomniejszania
widoku.
19. Stroke Color (Kolor obrysu). Określa kolor konturu rysowanych obiektów.
20. Fill Color (Kolor wypełnienia). Określa kolor wypełnienia rysowanych obiektów.
21. B
lack and White (Czerń i biel). Zamienia wszystkie kolory w zaznaczonym
obszarze na biały lub czarny, w zależności od tego, czy dany kolor jest bliższy
120
Multimedia_i_grafika_komputerowa.indb 120
2010-04-28 11:10:53
9.3. Tworzenie statycznych obiektów graficznych
bieli czy czerni. Umożliwia prostą transformację wielobarwnego obrazu na
dwukolorowy szkic.
22. S wap Colors (Zamień kolory). Zamienia kolory zaznaczonego obszaru na jeden
z dwóch — aktualnie wybrany kolor konturu lub aktualnie wybrany kolor wypełnienia. Podobnie jak w wypadku narzędzia Black and White (Czerń i biel)
zamiana dokonywana jest na podstawie odległości koloru od kolorów wybranych do zamiany.
Przydatne narzędzia znajdują się nie tylko w przyborniku, ale również w menu głównym aplikacji. Na przykład menu Modify (Modyfikuj) umożliwia grupowanie obiektów na scenie, ich porządkowanie (polecenie Align (Wyrównaj)), transformacje geometryczne sceny i inne.
Ważną sekcją menu jest sekcja Control (Sterowanie), która zawiera polecenia umożliwiające uruchomienie tworzonej animacji. Polecenia Test Movie (Testuj film) i Test
Scene (Testuj scenę) pozwalają podejrzeć, jak aktualnie wygląda animacja.
Oczywiście interfejs programu Adobe Flash zawiera jeszcze inne przydatne funkcje
i opcje. Nie sposób ich tutaj wszystkich omówić. Wykracza to zresztą poza ramy podręcznika. Zainteresowanych odsyłamy do literatury.
9.3. Tworzenie statycznych
obiektów graficznych
Adobe Flash zawiera szereg narzędzi, które przyspieszają proces tworzenia animacji.
W szczególności możliwe jest edytowanie wielu prostych i nieco bardziej skomplikowanych statycznych obiektów graficznych. Po co wykonywać te operacje bezpośrednio
w Adobe Flash, skoro mamy do dyspozycji dedykowane programy? Praca w jednym
narzędziu bez konieczności przełączania się i przenoszenia wyników między aplikacjami oszczędza czas. Ponadto obiekty tworzone w Adobe Flash są przystosowane do
wykorzystania ich w animacji. Zobaczymy, że niektóre funkcjonalności opracowano
z myślą o takim właśnie przeznaczeniu.
Jak już widzieliśmy, Adobe Flash zawiera szereg narzędzi służących do rysowania i edycji prostych obiektów graficznych. Jak z nich korzystać?
Aby narysować prostokąt, należy wybrać z przybornika narzędzie Rectangle Tool
(Narzędzie Prostokąt). Następnie należy kliknąć lewym przyciskiem myszy punkt,
w którym znajdzie się jeden z wierzchołków prostokąta, i przeciągnąć kursor myszy
w miejsce przeciwległego wierzchołka. Zwolnienie przycisku myszy zakończy operację
tworzenia prostokąta. Przebiega ona podobnie jak w typowych programach do grafiki
WSKAZÓWKA
Aby narysować kwadrat, przytrzymaj klawisz Shift podczas rysowania prostokąta.
121
Multimedia_i_grafika_komputerowa.indb 121
2010-04-28 11:10:53