W tym rozdziale
§ Zrozumienie zasad funkcjonowania listwy czasowej
§ Cechy charakterystyczne warstw
§ Ustawienia listwy czasowej
§ Właściwości warstw i ustawienia wyświetlania ujęć
§ Zależności pomiędzy listwą czasową a obszarem roboczym
§ Kolejność wyświetlania obiektów i grupowanie obiektów
§ Edycja animacji na listwie czasowej
§ Przenikanie ujęć (funkcja Onion Skin)
Listwa czasowa jest filarem, na którym opiera się tworzenie animacji we Flashu. Dokładne zrozumienie jej działania jest kluczem do efektywnego wykorzystania tego programu. Jak się wkrótce przekonasz, jedną z najważniejszych zalet listwy czasowej jest możliwość szybkiego odczytywania z niej wielu informacji dotyczących struktury filmu i zawartości poszczególnych ujęć.
Dzięki listwie czasowej zawartość projektu Flasha jest porządkowana zgodnie z dwoma wymiarami: czasem i głębokością.
· Czas: Sekwencja ujęć (Frames) jest reprezentowana w poziomie, od lewej do prawej, zgodnie z ich kolejnością w czasie. Jeśli więc na przykład prędkość odtwarzania filmu jest ustawiona na 20 klatek na sekundę, klatka 40 odpowiada minięciu drugiej sekundy animacji.
Uwaga
Chociaż mogłeś usłyszeć, że czas i przestrzeń nie mają we Flashu żadnych ograniczeń, w rzeczywistości ograniczenia takie występują w praktycznie każdym aspekcie, także w przypadku liczby ujęć na listwie czasu. Na jednej listwie czasu możesz zdefiniować 16 000 ujęć — co rozciąga czas trwania filmu prawie do następnego Bożego Narodzenia. Jeśli jednak nawet to ci nie wystarcza, powinieneś rozważyć możliwość wykorzystania klipów filmowych oraz scen.
· Głębokość: Flash pozwala umieszczać różne elementy projektu na odrębnych warstwach (Layers), nakładanych na siebie zgodnie z kolejnością ustawianą na liście obok listwy czasowej. Dzięki temu możesz przypisywać różnym obiektom niezależne akcje, komentarze, etykiety i dźwięki. Elementy graficzne z warstw leżących niżej są przysłaniane przez obiekty znajdujące się na wyżej leżących warstwach, co jednak nie ma żadnego wpływu na ich strukturę. W środowisku edycyjnym każdą warstwę można ukryć i ponowne wyświetlić (ikona z okiem), zablokować lub odblokować możliwość jej edycji (ikona z kłódką) a także ustawić tryb wyświetlania warstwy — zwyczajny, lub tylko krawędzie obiektów (ikona z kwadratem). Pamiętaj jednak, że żadne z tych ustawień nie ma wpływu na wyświetlanie gotowego filmu: obiekty znajdujące się na warstwach będą wyświetlane niezależnie od tego, czy warstwa jest widoczna, czy niewidoczna w oknie edycyjnym Flasha.
Warto w tej chwili nadmienić, że we Flashu 5 wprowadzono kilka zmian dotyczących listwy czasowej. Zmiany te miały na celu poprawić czytelność ujęć i ułatwić manipulowanie nimi, szczególnie w przypadku bloków ujęć pomiędzy ujęciami kluczowymi.
Ponieważ ujęcia automatycznie generowane pomiędzy ujęciami kluczowymi same w sobie nie przechowują żadnych informacji, ich zawartość zależy wyłącznie od otaczających je ujęć kluczowych. Logicznym rozwiązaniem wydaje się więc możliwość zaznaczania takiego bloku ujęć jako jednej całości (ujęcie kluczowe oraz wszystkie następujące po nim ujęcia pośrednie). Dzięki temu można kliknąć i przesunąć na listwie czasu cały blok ujęć — kursor po kliknięciu przyjmuje wygląd dłoni, którą można przeciągnąć blok w lewo lub w prawo.
Wskazówka
Chociaż niektórzy znakomici artyści Flashowi twierdzą, że nowe rozwiązania Flasha 5 dotyczące listwy czasowej wprowadzają pewne zamieszanie, my zalecamy stosowanie tych rozwiązań, ponieważ w ogólnym podsumowaniu są one zdecydowanie lepsze. Jeśli wcześniej używałeś Flasha 4 i mimo wszystko wygodniej pracuje ci się z jego listwą czasową, mamy dla ciebie dobrą wiadomość — możesz przywrócić Flashowi 5 ustawienia listwy czasowej z Flasha 4. Aby to zrobić, wybierz polecenie Edit/Preferences/General i włącz opcje Flash 4 Selection Style oraz Flash 4 Frame Drawing, a następnie naciśnij OK.
Na rysunku 8.1. Opisano wszystkie najważniejsze elementy listwy czasowej.
Rysunek 8.1. Ponieważ animacja jest sztuką tworzenia obrazów zmieniających się w czasie, listwę czasową można uznać za filar wszystkich operacji związanych z animowaniem sceny. Na listwie czasowej znajdują się warstwy (Layers) i ujęcia (Frames), nazywane też klatkami, przy użyciu których budujemy strukturę filmu
Zgodnie z opisami na rysunku 8.1., najistotniejszymi elementami listwy czasowej są:
· Pasek tytułowy. Identyfikuje on listwę czasową, o ile listwa nie została zakotwiczona (Dock) w górze lub u dołu ekranu.
· Znacznik aktywnej warstwy (Active Layer). Jest to w rzeczywistości coś więcej niż tylko ikona. Aby uaktywnić warstwę, kliknij jej nazwę lub zaznacz jakieś ujęcie (bądź grupę ujęć) w jej obrębie. Obok nazwy warstwy pojawi się wtedy ikona z ołówkiem, oznaczająca, że warstwa została uaktywniona — bardziej jednak czytelnym sygnałem o uaktywnieniu warstwy jest wyświetlanie jej nazwy na czarnym tle, podczas gdy pozostałe warstwy posiadają nazwy wyświetlane na szarym tle. W danej chwili może być aktywna tylko jedna warstwa.
· Wyświetlanie (Show) i ukrywanie (Hide) warstwy. Klikając w kolumnie pod ikoną z okiem możesz ukryć warstwę, bądź przywrócić wyświetlanie ukrytej warstwy. Gdy warstwa jest ukryta, obok jej nazwy pojawia się czerwona litera „X”. Aby włączyć z powrotem wyświetlanie warstwy, kliknij tę literę.
Ostrzeżenie
Ukryte warstwy są eksportowane wraz z filmem i ich zawartość staje się widoczna w docelowej przeglądarce. Nawet jeśli obiekty na tej warstwie znajdą się poza wyświetlanym obszarem filmu i przez to nie będą widoczne, zwiększają one niepotrzebnie wielkość pliku. Z tego powodu powinieneś oczyścić projekt z niepotrzebnych elementów i zapisać na dysku plik .FLA zanim przystąpisz do eksportowania filmu.
· Blokowanie (Lock) i odblokowanie (Unlock) warstwy. Przełączniki w tej kolumnie blokują bądź odblokowują możliwość edycji warstwy. Podobnie jak w przypadku ukrywania warstwy, gdy warstwa jest zablokowana, w kolumnie z kłódką pojawia się czerwony znak „X”.
· Sposób wyświetlania warstwy. W tej kolumnie możesz zmienić sposób wyświetlania warstwy — jeśli znajduje się tu wypełniony kwadrat, warstwa jest wyświetlana zgodnie z jej docelowym wyglądem. Jeżeli natomiast klikniesz i w miejscu wypełnionego kwadratu pojawi się pusta w środku ramka, na warstwie widoczne będą tylko kontury obiektów w kolorze odpowiadającym kolorowi ramki. Czasem jest to użyteczne gdy chcemy dokładnie przeanalizować i dopracować animację różnych warstw. Kolor krawędzi obiektów (Outline Color) można zmodyfikować w oknie z właściwościami warstwy (Layer Properties — zobacz rysunek 8.7), dostępnym po wybraniu polecenia Modify/Layer lub po podwójnym kliknięciu wspomnianego kwadratu z kolorem krawędzi (możesz też kliknąć prawym przyciskiem myszy nazwę warstwy i wybrać z menu podręcznego polecenie Properties).
· Wskaźnik czasu. Czerwony prostokąt, z którego wybiega pionowa linia przecinająca listwę czasu we wszystkich ujęciach (klatkach), nazywany jest wskaźnikiem czasu (Playhead). Zaznacza on pozycję aktualnej klatki animacji. Przesuwając go kursorem w lewo i w prawo przechodzisz z jednego ujęcia do drugiego. Gdy przeciągniesz go kursorem do końca widocznego zakresu animacji, możesz przejść do tych ujęć animacji, które nie zmieściły się w widocznym na ekranie fragmencie skali czasu. Możesz też przesuwać wskaźnikiem ze stałą prędkością i tym samym śledzić przebieg animacji, co niektórzy dowcipnie nazywają „szorowaniem” listwy czasowej.
· Oś czasu. Jest to linijka, na której odmierzane są jednostki czasu — każda podziałka odpowiada jednej klatce animacji.
· Ustawienia wyświetlania ujęć. Po kliknięciu ikony na końcu skali czasu rozwijane jest menu podręczne, w którym — jak widać na rysunkach 8.8 i 8.9 — można zmienić sposób wyświetlania ujęć a także osi czasu.
· Dodawanie warstwy (Insert Layer). Kliknięcie tej ikony powoduje dodanie nowej warstwy bezpośrednio ponad aktywną warstwą. Domyślnie warstwom nadawana jest numeracja zgodna z kolejnością ich tworzenia. Podwójne kliknięcie na nazwie warstwy umożliwia jej zmianę wedle własnego upodobania.
· Dodawanie ścieżki ruchu warstwy (Add Guide Layer). Ścieżka ruchu (warstwa typu Guide) pozwala zmusić wybrany obiekt do poruszania się wzdłuż określonej trajektorii. Po kliknięciu tej ikony ponad aktywną warstwą umieszczana jest warstwa typu Guide, zawierającą ścieżkę ruchu dla tej warstwy. Więcej na temat ścieżek ruchu przeczytasz w rozdziale 11., „Animacje”.
· Usunięcie warstwy (Delete Layer). Ikona ta usuwa aktywną warstwę z projektu, niezależnie od tego, czy jest ona zablokowana, czy też nie. Nie jest możliwe usunięcie ostatniej warstwy projektu, która pozostanie po usunięciu wszystkich wcześniejszych warstw.
· Centrowanie ujęcia (Center Frame). Kliknij tę ikonę, aby dopasować widok listwy czasowej w taki sposób, że bieżąca klatka (ujęcie) będzie znajdowała się pośrodku widocznego zakresu animacji.
· Tryb przenikania ujęć (Onion Skin). Dzięki tej funkcji możliwe jest równoczesne wyświetlanie na ekranie więcej niż jednego ujęcia animacji (dokładniejszy opis funkcji przenikania ujęć znajdziesz w dalszej części tego rozdziału).
· Krawędzie w trybie przenikania ujęć (Onion Skin Outlines). Po włączeniu tej ikony funkcja przenikania ujęć wyświetla tylko krawędzie obiektów w kolejnych ujęciach.
· Równoczesna edycja wielu ujęć (Edit Multiple Frames). Standardowo w trybie Onion Skin możliwa jest edycja tylko bieżącego ujęcia. Włączenie ikony Edit Multiple Frames pozwala na edycję dowolnego ujęcia spomiędzy znaczników zakresu przenikania ujęć.
· Zakres przenikania ujęć (Modify Onion Markers). Włącz tę ikonę, a wyświetlisz menu podręczne, pokazane na rysunku 8.15. Oprócz możliwości ręcznego określenia zakresu przenikania ujęć, pozwala ono na zmianę innych ustawień dotyczących trybu przenikania ujęć i jego zakresu.
· Numer bieżącego ujęcia (Current Frame). Wyświetlany tu jest numer aktualnego ujęcia animacji. Jest to dość przydatne gdy ujęcia wyświetlane są w pomniejszonej wersji, co z kolei możemy ustawić w menu podręcznym pokazanym na rysunku 8.6).
· Prędkość odtwarzania animacji (Frame Rate). Widać tu prędkość wyświetlania filmu, wyrażaną w klatkach na sekundę (frame per second, w skrócie fps). Chociaż domyślnie program zakłada prędkość 12 fps, zazwyczaj korzystniej jest na początku przyjąć prędkość 20 fps. Na zmianę tego ustawienia pozwala okno Movie Properties, otwierane poleceniem Modify/Movie (skrót Ctrl+M lub Command+M). Możesz też wykonać podwójne kliknięcie na polu wyświetlającym prędkość animacji, a również zostanie wyświetlone okno Movie Properties.
Prędkość zdefiniowana w jednostkach fps nie zawsze musi być rzeczywistą prędkością odtwarzania filmu — jest to raczej prędkość maksymalna. Rzeczywista prędkość zależy od wielu uwarunkowań, w tym prędkości przesyłania danych przez sieć, szybkości procesora oraz zasobów sprzętowych — a są to zmienne, nad którymi nie masz kontroli. Możesz jednak zmieniać „intensywność” animacji — złożone ruchy i skomplikowane obiekty wymagają większego nakładu obliczeń procesora niż proste ruchy i mało rozbudowane obiekty. Bardzo ważne jest to, aby zakładana prędkość odtwarzania animacji była osiągana — co możesz sprawdzić w oparciu o testy przeprowadzane na różnych maszynach — przynajmniej w początkowej fazie pracy nad projektem.
· Czas od początku animacji do bieżącej klatki (Elapsed Time). Wyświetlany jest tutaj całkowity czas (mierzony w sekundach), jaki upływa od pierwszej klatki animacji do bieżącej klatki. Czas ten jest wyliczony przy uwzględnieniu zadanej w projekcie prędkości odtwarzania animacji.
Położenie, wielkość i kształt listwy czasowej może być zmieniany w taki sposób, aby lepiej pasować do twoich technik pracy, tak samo zresztą jak możesz zmieniać ustawienia dowolnych innych okien i paneli Flasha. W systemie z dwoma monitorami listwa czasowa może być wyświetlana na drugim monitorze, razem z wszystkimi panelami — pozostawiając na pierwszym monitorze tylko okno dokumentu, które nie jest już przysłaniane przez okna narzędziowe programu.
· Przemieszczenie listwy czasowej do innego położenia możliwe jest przy pomocy kursora myszy, którym należy uchwycić pasek tytułowy i przeciągnąć w wybrany punkt ekranu. Jeśli listwa czasowa została zakotwiczona (Dock) w górze lub w dole ekranu i nie widać jej paska tytułowego, kliknij gdzieś w szarym obszarze ponad listwą warstw, a następnie przeciągnij kursorem i odblokuj w ten sposób położenie listwy czasowej.
· Jeśli listwa czasu nie jest zakotwiczona, można zmieniać jej rozmiar poprzez przeciągnięcie kursorem prawego dolnego narożnika (komputery PC) lub specjalnego uchwytu (komputery Mac), który również znajduje się w prawym rogu. Jeśli listwa czasowa jest zakotwiczona, możesz zmieniać jej wysokość, przeciągając kursorem poziomą krawędź oddzielającą listwę od okna roboczego.
· Aby zmienić szerokość pola wyświetlającego nazwy warstw oraz ikony sterujące warstwami (na przykład jeśli nazwy warstw są zbyt długie i nie mieszczą się w pierwotnej szerokości pola), kliknij i przeciągnij pionową krawędź oddzielającą to pole od pola wyświetlającego ujęcia animacji.
Opanowanie zagadnień związanych z operacjami na warstwach pozwala znacznie wygodniej i szybciej pracować nad projektami.
Domyślnie nowa warstwa wstawiana jest zawsze ponad aktywną warstwą projektu. Aby zmienić kolejność warstw, kliknij nazwę warstwy lub tuż obok niej (w każdym razie przed kolumną z ikonami sterującymi wyświetlaniem), po czym przeciągnij nazwę warstwy do wybranej pozycji na liście warstw i zwolnij przycisk myszy.
Dla lepszej funkcjonalności i wygodniejszej pracy nad projektem, a także w celu ułatwienia sobie późniejszej pracy z językiem ActionScript, dobrym zwyczajem jest nadawanie warstwom odpowiednio znaczących nazw. W tym celu wystarczy wykonać podwójne kliknięcie na nazwie danej warstwy i wpisać nową nazwę.
Nowa listwa czasowa Flasha 5 przekazuje wiele informacji na temat tego co dzieje się w animacji, jak pokazano na rysunkach 8.2 i 8.3.
Rysunek 8.2. Elementy listwy czasowej Flasha 5
Rysunek 8.3. Różne typy ujęć na listwie czasowej Flasha
· Ujęcie kluczowe (keyframe). Ujęcie kluczowe jest to takie ujęcie, którego zawartość różni się w stosunku do poprzednich lub następnych ujęć. W ujęciach kluczowych na listwie czasu wyświetlane są małe czarne koła.
· Bloki ujęć. Są one nowością we Flashu 5. Blok ujęć zaczyna się od ujęcia kluczowego (keyframe)i obejmuje wszystkie ujęcia aż do następnego ujęcia kluczowego (jednak nie obejmuje już tego ujęcia), od którego jest oddzielony czarną pionową linią. Na rysunku powyżej widać kilka bloków ujęć figurujących w różnych warstwach. Zwróć uwagę na to, że blok można przesuwać kursorem jako jedną całość do innego położenia w czasie.
o Końcowe ujęcie kluczowe. Gdy blok ujęć kończy się ujęciem kluczowym, ujęcie to wyświetlane jest jako pusty prostokąt (zobacz rysunek 8.3), obok którego widoczna jest pionowa linia oznaczająca koniec bloku.
o Ujęcia pośrednie. Jeśli ujęcia w segmencie nie są puste, program wyświetla je na szaro.
o Puste ujęcia. Gdy ujęcia nie zawierają żadnych obiektów, wyświetlane są na biało.
· Animacja klatka-po-klatce. O animacji tego typu mówimy wtedy, gdy animacja składa się z samych ujęć kluczowych. Zawartość każdego takiego ujęcia różni się od wcześniejszych i od następnych ujęć. Więcej informacji na temat animacji klatka-po-klatce znajdziesz w rozdziale 11., „Animacje” oraz w rozdziale 37., „Tworzenie kreskówek we Flashu”.
· Animacja automatyczna. We Flashu możliwe jest automatyczne generowanie ujęć pośrednich pomiędzy ujęciami kluczowymi, co odbywa się na drodze interpolacji funkcją Tween (więcej o tej metodzie animacji przeczytasz w rozdziale 11., „Animacje”). Gdy włączysz funkcję Tween dla danego bloku ujęć, zmienia on kolor i pojawia się na nim strzałka biegnąca od początkowego ujęcia kluczowego do końcowego. Możliwe są dwie wersje automatycznej animacji:
o Animacja ruchu (Motion Tween). Blok ujęć przyjmuje kolor niebieski.
o Animacja kształtu (Shape Tween). Blok ujęć wyświetlany jest na zielono.
· Ścieżka ruchu (warstwa typu Motion Guide). Warstwy typu Motion Guide stosujemy do definiowania trajektorii ruchu obiektów z innych warstw. Ścieżkę ruchu na warstwie Motion Guide można narysować standardowymi narzędziami Pencil Tool oraz Line Tool. Bardziej szczegółowe informacje w tym zakresie znajdziesz w rozdziale 11., „Animacje”.
· Warstwa maskująca (warstwa typu Mask). Warstwa maskująca służy do ukrywania (maskowania) wybranych obszarów warstw leżących pod nią. Dokładniejsze omówienie pracy z maskami znajdziesz w rozdziałach 10. („Rysowanie we Flashu”) oraz 11. („Animacje”).
· Etykieta (Label). Etykiet używamy do nadawania ujęciom nazw informujących o ich zawartości, co czasem łatwiej pomaga uporządkować projekt niż same numery ujęć. Zaletą tego rozwiązania jest fakt, że nawet jeśli wykonujesz różne operacje na ujęciach, nie ulegają rozbiciu związki ujęć z odpowiadającymi im skryptami języka ActionScript. W czasie eksportowania etykiety są zapisywane wraz z plikiem .SWF, więc rozsądne jest stosowanie względnie krótkich nazw. Etykietę zaznaczonemu ujęciu można nadać w panelu Frame, wpisując ją w pole Label. Po wpisaniu etykiety naciśnij Enter (Return), aby ostatecznie przypisać ją ujęciu.
· Komentarz (Comment). Komentarze to specjalny rodzaj etykiet, poprzedzonych podwójnym znakiem ukośnika (//). Komentarze nie są eksportowane wraz z plikiem .SWF, więc nie musisz się tutaj przejmować ich długością i możesz wpisywać nawet bardzo długie komentarze. Podobnie jak zwykłe etykiety, komentarze wpisujemy w panelu Frame, wprowadzając przed każdym z nich podwójny ukośnik, czyli ciąg „//”.
Jon rozpoczyna prawie każdy projekt Flasha od utworzenia czterech warstw o specjalnych nazwach, znajdujących się na samym szczycie listy z warstwami projektu. Zapewnia to czytelność i wygodną pracę nad dalszymi elementami projektu. Nazwy warstw (nie musisz wcale stosować identycznych, jednak zwróć uwagę na przyjętą konwencję) to następujące skróty: lbls = etykiety (labels), cmnts = komentarze (comments), atns = akcje (actions) i snds = dźwięki (sounds).
...
lukaszwalda