1
43
Złożone projekty
Kluczem do tworzenia złożonych animacji we Flashu jest podział projektu na prostsze elementy. Ruch biegacza to generalnie ciąg ruchów jego kończyn; i podobnie jest w programie – przyjmij, że na każdy projekt składa się grup podstawowych elementów. Takie rozkładanie jednego skomplikowanego ruchu na kilka mniejszych, prostszych, pozwala zastosować na każdym wyodrębnionym elemencie odpowiednią technikę animacji, w efekcie upraszczając cały proces jej tworzenia. Technika ta daje ci też większą kontrolę nad twoim dziełem i bardziej pozytywne rezultaty.
Załóżmy teraz, że chciałbyś wykonać animację głowy odwracającej się do kamery. Dobrze byłoby zastanowić się najpierw, jak podzielić całą animację na pojedyncze ruchy. Animowanie od razu całej sekwencji jest trudne – jeśli nie niemożliwe – z uwagi na mnogość zachowań poszczególnych elementów, składających się na ruch głowy. Sam zarys głowy może być animowany klatka po klatce, jako że chodzi nam o zaprezentowanie zmiany widoku od profilu do pozy frontalnej. Poszczególne elementy twarzy tworzyć będą klony symboli, odpowiednio ściskane i rozciągane w automatycznej animacji ruchu, zgrane z obrotem całej głowy. Włosy natomiast mógłbyś poddać animacji kształtu, oddając w ten sposób ich falowanie czy nawet lekkie opadanie w momencie, kiedy głowa nagle przestaje się poruszać.
Poznanie sposobu na łączenie różnych technik odseparowywania elementów animacji umożliwia nie tylko pokonanie wielu problemów w procesie tworzenia animacji, ale także przyzwyczaja cię do korzystania ze złożonych warstw i tworzenia symboli poszczególnych komponentów projektu. To z kolei ułatwia zarządzanie animacją i późniejsze poprawki.
Niniejszy rozdział opisuje techniki tworzenia złożonych animacji przez łączenie i rozszerzanie podstawowych zdolności Flasha.
Tworzenie animacji ruchu
Druga grupa
Pierwsza grupa
Proces automatycznego tworzenia animacji ruchu (Motion Tweening) umożliwia zmianę dowolnych właściwości klonu symbolu, np. jego umiejscowienia, rozmiaru, obrotu w przestrzeni, koloru, czy przezroczystość. Z uwagi na wszechstronność, technika ta znajduje zastosowanie przy rozwiązywaniu różnorodnych problemów związanych z animacją, podstawą większości projektów we Flashu. Jako że automatyczna animacja ruchu ma wiele wspólnego z właściwościami klonu symbolu, można przyjąć, że tak naprawdę jest to animacja samego klonu. Niezależnie od tego, czy na scenie faktycznie odbywa się konkretny ruch, zmiany klonów pomiędzy poszczególnymi ujęciami kluczowymi wymagają zastosowania automatycznej animacji ruchu. Jeśli przyjmiesz, że jest to animacja klonu, łatwiej będzie ci zdecydować, kiedy wykorzystać animację ruchu, kiedy animację kształtu, a kiedy animację klatka po klatce.
Pętle animacji są ważne, ponieważ umożliwiają tworzenie ciągłego ruchu przy zdefiniowanych jedynie kilku ujęciach kluczowych. Wykorzystuje się je jako elementy interfejsu, w postaci obracających się przycisków, przewijanych menu czy cyklicznych ruchów w postaci maszerującej postaci, trzepoczących skrzydeł motyla lub wirującej planety. Żeby zachować płynność takiej zapętlonej animacji, trzeba upewnić się, że zarówno pierwsza, jak i ostatnia klatka kluczowa są identyczne, lub prawie identyczne, tak by mieć wrażenie ciągłości ruchu.
Rozważymy teraz sposób wykonania dwóch najpopularniejszych typów zapętlonej animacji: grafiki przewijanej i grafiki animowanej po zamkniętej ścieżce.
Rys. 1.1. Pięć obiektów umiejscowionych na scenie tak, jak mogłyby wyglądać w początkowym momencie przewijania od prawej do lewej. Obiektami mogą być przyciski lub proste grafiki
Rys. 1.2. Zgrupuj poszczególne obiekty, posługując się poleceniem Modify/Group
Rys. 1.3. Utwórz określony wzór, kopiując i wklejając grupę
Rys. 1.4. Powyższa grupa składa się jedynie z dwóch obiektów. Utwórz kolejne grupy, żeby całość wykraczała poza scenę
Rys. 1.5. Utwórz grupę z całego wzoru ułożenia elementów
Rys. 1.6. Druga powtarzająca się grupa zostaje przeniesiona w miejsce, które na początku zajmowała pierwsza
Grafika przewijana jest powszechnym elementem interfejsu, mającym zastosowanie choćby w prezentowaniu opcji menu. Technikę tą możesz również wykorzystać do tworzenia animacji tła, odgrywanej nieustannie w oczekiwaniu na określone działanie użytkownika.
1. Utwórz elementy, które mają być przewijane po scenie, a następnie rozmieść je tak, jak mogłyby wyglądać w dowolnym momencie (rys. 1.1).
2. Zaznacz wszystkie elementy i wybierz Modify/Group (rys. 1.2).
3. Skopiuj grupę do schowka, a następnie wklej kopię zaraz obok oryginału – tak, żeby całość tworzyła ciąg powtarzających się elementów. Na przykład, jeśli twoje elementy są przewijane od prawej do lewej, umieść nową grupę na prawo od oryginału (rys. 1.3).
Zwykle przewijane elementy są większe niż rozmiar sceny, ale jeśli twoja pierwsza grupa jest mniejsza, to będziesz musiał powielić ją więcej niż raz, żeby uzyskać powtarzający się wzór, rozciągający się poza scenę (rys. 1.4).
4. Zaznacz wszystkie utworzone grupy i zgrupuj je w jedną całość (rys. 1.5). Dzięki temu będziesz mógł ją animować.
5. Utwórz ujęcie kluczowe w późniejszym punkcie na osi czasu.
6. Zaznacz grupę z ostatniego ujęcia kluczowego i przesuń ją tak, żeby druga powtarzająca się grupa elementów była przyporządkowana pierwszej. Kiedy przesuwasz grupę, posługuj się linią jej zaznaczenia, żeby dopasować jej pozycję (rys. 1.6).
7. Utwórz automatyczną animację dla przygotowanych ujęć kluczowych.
8.
9.
Warstwa podporządkowana
10.
Ścieżka ruchu
11.
12.
Punkt środkowy
13.
Klon symbolu Ziemi
14.
Warstwa wzorcowa
15. Wstaw nowe ujęcie kluczowe dokładnie przed ostatnim ujęciem, które następnie usuń (rys. 1.7). W rezultacie uzyskasz ładnie zapętloną animację, która nie polega jedynie na ciągłym odtwarzaniu dwóch identycznych klatek.
Ścieżka ruchu w warstwie wzorcowej (Guide Layer) pozwala na uzyskanie płynnego ruchu wzdłuż ścieżki, od punktu początkowego do końcowego. Jeśli punkt końcowy ścieżki będzie odpowiadał początkowemu, uzyskasz pętlę „bez szwów” i właściwie zamkniętą ścieżkę ruchu.
1. Utwórz symbol graficzny i umieść jego klon w obrębie sceny (rys. 1.8).
2. Utwórz warstwę wzorcową, klikając ikonę Add Guide Layer poniżej warstw. Pojawi się nowa warstwa, a pierwsza stanie się warstwą podporządkowaną (rys. 1.9).
3. W warstwie wzorcowej narysuj elipsę.
4. Wybierz narzędzie strzałki (Arrow) z ustawionym modyfikatorem przyciągania (Snap), a następnie umieść punkt środkowy klonu na ścieżce symbolizowanej przez elipsę (rys. 1.10).
Usuwamy ostatnie ujęcie kluczowe z klatki 15.
Tworzy nowe ujęcie kluczowe
Rys. 1.7. Utwórz nowe ujęcie kluczowe (u góry) i usuń ostatnie ujęcie kluczowe (u dołu)
Rys. 1.8. Klon symbolu graficznego umieszczamy w obrębie sceny. Tworzymy automatyczną animację wzdłuż ścieżki
Rys. 1.9. Ścieżka ruchu będzie się znajdować w warstwie prowadzącej, powyżej warstwy Layer 1
Rys. 1.10. Punkt przyciągania klonu symbolu Ziemi zostaje przyłożony do ścieżki ruchu
Ziemia w ujęciach kluczowych 1. i 14.
Ziemia w ujęciu kluczowym 7.
Rys. 1.11. Pozycje Ziemi w klatce 1. i klatce 14. w warstwie Layer 1 są identyczne
Rys. 1.12. Punkt środkowy Ziemi w środkowym ujęciu kluczowym został umiejscowiony na drugim wierzchołku elipsy
Rys. 1.13. Ziemia porusza się w tą i z powrotem po tym samym odcinku elipsy
5. Dodaj klatki do obydwu warstw i utwórz nowe ujęcie kluczowe w ostatniej klatce warstwy podporządkowanej. Żeby otrzymać zapętloną animację, zarówno pierwsze, jak i ostatnie ujęcie kluczowe muszą być identyczne (rys. 1.11).
6. Zaznacz środkową klatkę w warstwie podporządkowanej i utwórz nowe ujęcie kluczowe. W tym ujęciu klon powinien znajdować się po przeciwnej stronie elipsy – przesuń go (rys. 1.12).
7. Zaznacz wszystkie klatki pomiędzy trzema ujęciami kluczowymi i z palety Frame wybierz Motion Tweening. Twój klon wędruje teraz wzdłuż ścieżki wyznaczonej przez elipsę. Niestety, zamiast wykonać pełne okrążenie, po prostu wraca do punktu wyjścia (rys. 1.13).
Ziemia w ostatnim ujęciu kluczowym znajduje się w punkcie końcowym ścieżki
Punkt końcowy
Punkt początkowy
Ziemia w ujęciu kluczowym 14.
15.
Ziemia w ujęciu kluczowym 1.
16. Chwyć klon w ostatnim ujęciu kluczowym warstwy podporządkowanej i przesuń go w pobliże klonu z ujęcia środkowego, uważając, by punkt środkowy pozostawał cały na ścieżce (rys. 1.14). Flash automatycznie animuje dwa klony, wybierając najbardziej bezpośrednią ścieżkę, tak więc skracając odległość pomiędzy dwoma ostatnimi ujęciami kluczowymi z dolnego odcinka elipsy, zmuszasz program do wykorzystania właśnie tego odcinka. Teraz twój klon powędruje wzdłuż obu stron elipsy (rys. 1.15).
Wskazówka
n Ten sam efekt zapętlenia możesz również otrzymać, usuwając niewielki fragment ścieżki. Tworząc przerwę, uzyskujesz w rzeczywistości otwartą ścieżkę z punktami początkowym i końcowym, określającą ruch twojego klonu (rys. 1.16).
Pojedyncza warstwa wzorcowa może oddziaływać na więcej, niż jedną warstwę podporządkowaną, umożliwiając odtwarzanie kilku animacji na tej samej ścieżce. Jest to świetny sposób na budowanie złożonych animacji, wykorzystujących wiele obiektów poruszających się w tym samym kierunku, np. maszerujący żołnierze, krwinki przepływające przez arterię, wystrzeliwane raz za razem kule czy zrywające się do ucieczki stado bydła. Podczas, gdy poszczególne klony mogą objawiać drobne różnice w zachowaniu, ty – opierając się na warstwie wzorcowej – zawsze zachowujesz kontrolę nad ich głównym kierunkiem ruchu.
Dla przykładu, liście powiewające wzdłuż sceny mogą być animowane wszystkie z wykorzystaniem tylko jednej warstwy wzorcowej. Warstwa ta określa główny kierunek wiatru, a przy tym poszczególne liście zachowują pewną odrębność w sposobie przemieszczania się, określoną w oddzielnych warstwach podporządkowanych.
Rys. 1.14. Trzy ujęcia kluczowe Ziemi. Pierwszy klon jest ustawiony bliżej środkowego klonu w górnej części elipsy, podczas gdy ostatni klon znalazł się w pobliżu środkowego klonu w dolnej części elipsy
Rys. 1.15. Ziemia porusza się wokół zamkniętej ścieżki
...
A-n-i-t-a