Animacje są bardzo często stosowane w Internecie i obecnie można znaleźć niewiele witryn WWW, które są ich pozbawione. Banery reklamowe tworzone z animowanych GIF-ów są już wszechobecne w Internecie. Animowane logo i przyciski są doskonałym sposobem na urozmaicenie każdej witryny. W miarę wzrostu przepustowości Internetu bardzo popularne stały się krótkie, animowane filmy rysunkowe.

W tym rozdziale omówimy pokrótce niektóre podstawowe cechy animacji, a następnie zajmiemy się funkcjami Fireworks umożliwiającymi ich tworzenie. Będziemy pracowali z klatkami Fireworks i z funkcjami eksportu animowanych GIF-ów, takimi jak tempo animacji i zapętlanie. Przyjrzymy się również kwestiom, którym będziesz musiał stawić czoło przy tworzeniu animowanych banerów reklamowych. Omówimy cały proces ich tworzenia.


	Szczegółowe informacje o importowaniu animacji i wielu plików jako animacji znajdziesz w rozdziale 14.

Podstawowe wiadomości
o animacjach sieciowych

Animacja opiera się na prostej sztuczce. Pokaż mi szybką sekwencję podobnych obrazków z niewielkimi zmianami w położeniach i właściwościach obiektów, a pomyślę, że widzę poruszający się obiekt. Ruch taki może być prosty lub bardzo złożony. Niepotrzebne jest nawet tempo animacji stosowane powszechnie w filmach, czyli dwadzieścia cztery klatki na sekundę. Już przy tempie wynoszącym trzy klatki na sekundę można zauważyć ruch obiektów (zapętl dwie klatki, a zobaczysz miganie obiektów).

Fireworks umożliwia tworzenie animowanych GIF-ów, więc przyjrzymy się bliżej temu formatowi grafiki. Przekonasz się jednak, że wiele technik stosowanych przy tworzeniu dobrych animowanych GIF-ów doskonale sprawdza się również przy budowaniu animacji sieciowych w innych formatach.

Kwestia przepustowości

Pamiętaj, że najważniejszą sprawą jest zawsze przepustowość Internetu. Wielokrotnie będę drążył ten temat, ponieważ przepustowość łączy jest czynnikiem, który należy rozpatrzyć przy tworzeniu każdej grafiki internetowej. Musisz przeanalizować każdy swój ruch i jego wpływ na ostateczny rozmiar końcowego pliku animowanego GIF-a. W trakcie całego procesu tworzenia animacji sieciowej musisz ostrożnie dobierać poszczególne parametry, takie jak liczba wykorzystywanych kolorów, liczba klatek, tempo animacji i wielkość animowanego obszaru obrazka. Jeśli chcesz użyć większej liczby kolorów, być może będziesz musiał zrezygnować z kilku klatek i zadowolić się mniej płynną animacją. Jeżeli animujesz złożone kształty, które nie są zbyt dobrze kompresowane, być może będziesz musiał użyć niewielkiej liczby kolorów.

Doskonałym miernikiem przepustowości Internetu jest połączenie dial-up. Sieć jest powolna i z reguły statyczna, o czym wiedzą wszyscy jej użytkownicy. Twoim sukcesem b 131i81b 1;dzie, jeżeli uda Ci się zaoferować widzom szybką, dynamiczną prezentację. Podczas projektowania animacji musisz pamiętać o właściwościach kompresji GIF. Duże obszary jednolitych kolorów i poziome pasy są kompresowane znacznie lepiej niż fotografie zawierające subtelne przejścia tonalne, pionowe pasy koloru lub gradienty i wypełnienia ditheringiem.

Kompromis

Nawet jeśli nie otrzymasz Oskara za swoją animację, nie oznacza to jeszcze, że powinieneś z niej zrezygnować. Musisz przeanalizować każdy jej element, gdyż najmniejszy, dodatkowy ruch powoduje wzrost wymaganej przepustowości łącza. Wśród Twoich widzów największą popularnością cieszyć się będą zapewne krótkie i zwięzłe animacje. Jest tak niezależnie od tego, czy tworzysz złożony film rysunkowy z zawiłą fabułą,

abstrakcyjny projekt, czy też animowane logo. Jeśli przed przystąpieniem do tworzenia animacji określisz, co chcesz osiągnąć, zwiększysz swoje szanse na stworzenie dobrej animacji o jak najmniejszych rozmiarach pliku.

Animowane GIF-y doskonale sprawdzają się w jednych zastosowaniach, ale w innych wypadają nie najlepiej. Dobrze przeanalizuj wszystkie ograniczenia i skup się na tworzeniu dobrych animowanych GIF-ów, a nie tylko na tworzeniu dobrych animacji, które mają być podstawą do utworzenia animowanego GIF-a. W Internecie najlepiej działają: proste animowane logo, przyciski i animacja klatka po klatce. Pomocne może być myślenie o animowanych GIF-ach w kategoriach pokazu slajdów, a nie filmów. Przeważnie będziesz pracował z mniejszą liczbą klatek niż w filmach oraz z wolnymi, prostymi animowanymi elementami. Myślenie o animowanych GIF-ach jako o prezentacjach typu PowerPoint przypomina mi o wszystkich ograniczeniach tego formatu. Można pokazać, że ruch obiektu powstaje poprzez jego płynne animowanie, zmiany klatka po klatce, przesunięcie przez całą szerokość obrazka. Można także umieścić obiekt po lewej stronie obszaru roboczego, rozmyć go w środku tego obszaru i wyświetlić ponownie oryginalną wersję obiektu po prawej stronie.


	Pamiętaj o wszystkim czego nauczyłeś się oglądając sobotnie kreskówki i czytając komiksy. Techniki takie jak dymki z wypowiedziami bohaterów oraz linie ilustrujące ruch lub akcje w statycznych komiksach pomogą Ci przekazać wszystkie potrzebne informacje bez dodawania zbędnych klatek - a tym samym - uzyskać mniejsze pliki. Zamiast tworzyć płynny ruch obiektu po obszarze roboczym z wykorzystaniem dziesięciu klatek, utwórz dymki i linie informujące o poszczególnych zdarzeniach w animacji. Stosowanie tego typu sztuczek pozwala na tworzenie małych animacji, które umożliwiając przekazanie wszystkich niezbędnych informacji.

Jak zwykle w Internecie, będziesz musiał mieć na względzie stosowane przez użytkowników przeglądarki internetowe. Animowane GIF-y są zazwyczaj odtwarzane trochę szybciej w Internet Explorerze niż w Netscape Navigatorze. Oczywiście szybkość odtwarzania animacji zależy także od szybkości komputera. Nie próbuj precyzyjnie ustawiać tempa animacji i przerw pomiędzy poszczególnymi klatkami. Spróbuj skorzystać z pewnej anarchii panującej w Internecie. Zaufaj ustawieniom tempa animacji definiowanym przez Fireworks i miej nadzieję, że będą one najlepsze z możliwych.

Dlaczego animowany GIF

Fireworks jest doskonałym narzędziem do tworzenia animowanych GIF-ów. Tworzenie iluzji animacji polega na rozłożonych w czasie zmianach obiektów znajdujących się w obszarze roboczym. Te zawsze edytowalne obiekty Fireworks można łatwo przesuwać, skalować lub stosować do nich efekty. Po ukończeniu animacji, doskonałe funkcje optymalizacji grafiki w Fireworks umożliwiają utworzenie animowanego GIF-a o jak najmniejszym rozmiarze pliku. (Ponownie w grę wchodzi przepustowość Internetu).


	Najczęściej animowane GIF-y są tworzone bezpośrednio w Fireworks, możesz jednak wyeksportować animację jako zestaw plików, za pomocą polecenia File Export, a następnie z listy Save As wybierając Frames to Files lub Layers to Files. Pliki te (które mogą być zapisywane także w innych formatach plików, na przykład PNG lub JPEG) mogą być następnie modyfikowane w innych aplikacjach lub wykorzystywane w innych formatach animacji, na przykład prezentacjach SMIL odtwarzanych w RealPlayerze lub pokazach slajdów tworzonych w interaktywnym DHTML-u (Dynamicznym HTML-u).

Animowane GIF-y posiadają pewne ograniczenia, które stają się widoczne przy porównaniu ich funkcji z funkcjami innych, "poważniejszych" formatów animacji, stosowanych w Internecie. Porównanie takie znajdziesz w tabeli 23.1.

Tabela 23.1.

Porównanie różnych formatów animacji internetowych

Format		Dźwięk	Interaktywność	Odtwarzanie potokowe	Przezroczystość	Kolory
Animowany GIF		Nie	Nie	Nie	Tak
Dynamiczny HTML		Nie	Tak	Tak	Tak	Miliony
Java		Tak	Tak	Tak	Nie	Miliony
Flash		Tak	Tak	Tak	W niektórych przypadkach	Miliony
Shockwave		Tak	Tak	Tak	Nie	Miliony
QuickTime		Tak	Tak	Tak	Nie	Miliony
RealPlayer		Tak	Tak	Tak	Nie	Miliony

	Przezroczystość w powyższej tabeli oznacza przezroczyste tło po umieszczeniu animacji w przeglądarce, która nie jest obsługiwana przez środowisko edycyjne i w sam format animacji.

Z tabeli wynika, że animowany GIF jest formatem o niewielkich możliwościach. Inne formaty obsługują interaktywność i są automatycznie odtwarzane potokowo lub symulują takie odtwarzanie za pomocą wielu plików składowych. Niektóre z nich obsługują obraz, a wiele dodaje do tego obsługę dźwięku. Co więcej - Flash umożliwia tworzenie o bardziej złożonych animacji zapisywanych w plikach o bardzo małych rozmiarach.

Dlaczego więc animowane GIF-y są tak powszechnie stosowane? Dlaczego projektanci rezygnują z jednej lub wielu innych, wydawałoby się lepszych, metod? Odpowiedzi na te i wiele innych pytań oraz szczegółowe opisy obsługi poszczególnych formatów przez przeglądarki internetowe znajdziesz w tabeli 23.2.

Tabela 23.2.

Obsługa formatów animacji internetowych przez przeglądarki

Format	Navigator 2 i 3 i IE 3	Navigator 4 i 6 i IE 4 i 5	Większość innych przeglądarek
Animowany GIF	Tak	Tak	Tak
Dynamiczny HTML	Nie	Tak	Nie
Java	Tak; użytkownik może ją wyłączyć	Tak; użytkownik może ją wyłączyć	Nie
Flash	Za pomocą modułu	Za pomocą modułu	Nie
Shockwave	Za pomocą modułu	Za pomocą modułu	Nie
QuickTime	Za pomocą modułu	Za pomocą modułu	Nie
RealPlayer	Za pomocą modułu	Za pomocą modułu	Nie

Gdy przyjrzysz się powyższym zestawieniem, przekonasz się, że animowany GIF wcale nie wypada tak źle na tle pozostałych formatów. Inne formaty może są efektowne, ale animowany GIF jest bardziej niezawodny. Nieważne na jakiej platformie sprzętowej pracuje użytkownik, animowany GIF zawsze będzie mógł być wyświetlany.

Zestaw narzędzi Fireworks
do tworzenia animacji

Tworzenie animacji skupia się wokół kilku najważniejszych narzędzi:

u Paleta Frames (Klatki). Centrum zarządzania większością właściwości animacji, w którym możesz manipulować pojedynczymi klatkami (jak reżyser edytuje poszczególne klatki filmu): dodawać je, usuwać, zmieniać kolejność oraz definiować czas trwania poszczególnych klatek.


	Niektóre kontrolki palety Frames - na przykład tempo animacji - znajdują się również w oknie dialogowym Export Preview.

u Paleta Layers (Warstwy). Miejsce, w którym możesz zarządzać warstwami wszystkich klatek. Możesz organizować swoje animacje poprzez utrzymywanie obiektów wszystkich klatek na osobnych warstwach lub tworzyć warstwy współużytkowane przez wszystkie klatki. Warstwy współużytkowane umożliwiają utworzenie tła lub statycznych obiektów, które będą wykorzystywane przez całą animację.

u Kontrolki odtwarzania. Za pomocą kontrolek podobnych do tych, jakie można spotkać w magnetowidach, możesz przechodzić pomiędzy klatkami lub odtworzyć całą animację bezpośrednio w oknie dokumentu.

u Symbole graficzne. Fireworks umożliwia sekwencjonowanie, czyli tworzenie pośrednich kroków pomiędzy dwoma kopiami tego samego symbolu, co pozwala na szybkie utworzenie animacji.

u Symbole animacji. Wieloklatkowy symbol, stanowiący samodzielną animację.

Zarządzanie klatkami

Od zwykłych dokumentów Fireworks animacje odróżnia fakt, że mogą posiadać wiele klatek. Zaczynają pracę z animacjami, trudno będzie Ci zrozumieć związki pomiędzy warstwami i klatkami dokumentu. Jednak wiedza na temat ich współdziałania jest niezbędna.

Klatki animacji można porównać do klatek tradycyjnej taśmy filmowej (rysunek 23.1), którą możesz odtwarzać za pomocą projektora. W trakcie odtwarzania, w danej chwili na ekranie widoczna jest tylko jedna klatka. Najpierw wyświetlana jest klatka z numerem 1, następnie 2, 3 itd. Dodając klatkę do dokumentu, wydłużasz taśmę filmową i zarazem cały film. Zmieniając kolejność klatek w palecie Frames, wyobraź sobie, że wycinasz ją z taśmy filmowej i wklejasz z powrotem w innym miejscu taśmy. Jeżeli piątą klatkę przeniesiesz na początek filmu (przed klatkę z numerem 1), numery wszystkich klatek zostaną zmodyfikowane tak, że klatka 5. stanie się klatką 1., klatka 1. - klatką 2. itd.

Rysunek 23.1.

Klatki animacji traktuj jak klatki tradycyjnej taśmy filmowej,
zaś warstwy
jak kilka kawałków taśm sklejonych razem

Warstwy animacji można porównać do kilku różnych taśm filmowych sklejonych razem. Gdy włączysz odtwarzanie animacji, wszystkie warstwy znajdujące się w klatce 1. zostaną jednocześnie wyświetlone na ekranie, następnie pojawią się warstwy klatki 2., później klatki 3. itd. Podobnie jak w przypadku statycznych dokumentów Fireworks, warstwy umożliwiają organizowanie kolejności obiektów oraz utrzymywanie różnych obiektów z dala od siebie (na odrębnych warstwach), aby można je było łatwiej edytować. Gdy dodajesz nową warstwę do dokumentu, to tak, jakbyś dodawał całą nową taśmę filmową do istniejącego stosu taśm. Zmiana kolejności warstw w palecie Layers jest podobna do zmiany kolejności naklejania na siebie taśm znajdujących się w stosie.


	Gdy dodajesz klatkę do swojego filmu, automatycznie uzyskuje ona takie same warstwy, jak pozostałe klatki. Trzymając się metafory taśmy filmowej - dodanie klatki do jednej taśmy powoduje dodanie jej do wszystkich pozostałych taśm. Gdy dodajesz warstwę do filmu, jest ona dodawana do wszystkich jego klatek. Dodanie warstwy powoduje utworzenie nowej taśmy filmowej o takiej samej długości, jaką mają pozostałe taśmy.

Jedną z najważniejszych zalet interakcji pomiędzy warstwami i klatkami jest możliwość współużytkowana warstw. Zawartość współużytkowanej warstwy jest taka sama dla wszystkich klatek dokumentu. Nieważne jest, w której klatce edytujesz obiekty znajdujące się na współużytkowanej warstwie, zmiany są uwzględniane we wszystkich klatkach dokumentu. Jest to bardzo przydatna funkcja przy tworzeniu statycznych elementów, takich jak tła. Przyjrzymy się jej bliżej w kolejnych podrozdziałach.

Większość pracy związanej z tworzeniem animacji będziesz wykonywał z pomocą palety Frames (rysunek 23.2), więc musisz ją mieć przez cały czas otwartą. Z poziomu tej palety możesz dodawać, usuwać, zmieniać kolejność lub duplikować klatki. Możesz oglądać i edytować pojedyncze klatki, ich grupy lub wszystkie klatki dokumentu jednocześnie. Możesz kopiować lub przenosić obiekty pomiędzy poszczególnymi klatkami. Można również definiować tempo dla każdej klatki znajdującej się w animowanym GIF-ie. Podobnie jak w palecie Layers, w palecie Frames również znajduje się ikona selekcji, wyświetlana obok nazwy klatki, w której znajduje się zaznaczony obiekt.

Rysunek 23.2.

Zarządzanie klatkami za pomocą palety Frames
i jej użytecznego rozwijanego menu

Frames list - Lista klatek

Frame names - Nazwy klatek

Frame timing - Tempo klatki

Selection icon - Ikona selekcji

Options pop-up - Lista opcji

Options pop-up button - Przycisk listy opcji

Onion ... - Menu techniki "Onion skinning"

Distribute ... - Rozłóż na klatki

New/Duplicate ... - Nowe/Duplikuj klatki

Delete ... - Usuń klatki


	Podczas pracy z animacjami warto zadokować paletę Layers wraz z paletą Frames. Umożliwi to łatwe przechodzenie pomiędzy funkcjami w obu paletach. Jeżeli masz dużo miejsca na ekranie, możesz obie palety umieścić obok siebie. Dopóki są one pod ręką, ich położenie nie jest istotne.

Dodawanie klatek

Rozpoczynając pracę z animacją w Fireworks, Twój dokument będzie posiadał tylko jedną klatkę. Oczywiście będziesz musiał to zmienić, zanim zaczniesz tworzyć jakiekolwiek poruszające się obiekty. Najpierw będziesz musiał w przybliżeniu założyć, ile klatek powinna zawierać Twoja animacja, a następnie dodać taką liczbę klatek do dokumentu. Później - w razie potrzeby - będziesz mógł dodawać lub usuwać kolejne klatki. Innym rozwiązaniem stosowanym przy tworzeniu animacji jest rozpoczęcie od jedynie dwóch klatek: pierwszej i ostatniej. Po ustaleniu początkowego i końcowego stanu animacji, łatwo będziesz mógł utworzyć zawartości wszystkich pośrednich klatek.

Aby dodać klatkę na końcu listy palety Frames, kliknij przycisk Add Frames (Dodaj klatki) (pusta kartka papieru ze znakiem plus) u dołu palety lub wybierz z menu polecenie Insert Frame

Aby dodać jedną lub więcej klatek w określonym miejscu listy palety Frames

1. Wybierz polecenie Add Frames z rozwijanego menu palety Frames

Fireworks wyświetli okno dialogowe Add Frames (rysunek 23.3).

Rysunek 23.3.

Okno dialogowe Add Frames daje możliwość precyzyjnej kontroli nad liczbą i położeniami wstawianych klatek

2. Wpisz liczbę klatek w polu dialogowym Number lub ustal ją za pomocą suwaka (maksymalnie 10 klatek .

3. Wybierz położenie wstawianych klatek. Dostępne opcje to: At the beginning (Na początku), Before current frame (Przed bieżącą klatką), After current frame (Po bieżącej klatce) i At the end (Na końcu). Kliknij przycisk OK

Nowe klatki zostaną utworzone i dodane w zdefiniowanym miejscu palety Frames

Nazywanie klatek

Fireworks nadaje klatkom nazwy "Frame 1" lub "Frame 2". Takie nazwy mogą wprowadzać zamieszanie podczas tworzenia animacji i przemieszczania obiektów pomiędzy klatkami. Aby nadać klatce opisową nazwę, kliknij dwukrotnie jej nazwę w palecie Frames. Fireworks otworzy małe okno dialogowe, w którym możemy wpisać dowolną nazwę (rysunek 23.4). Po wpisaniu nowej nazwy, usuń okno dialogowe przez kliknięcie poza obszarem tego okna lub przez naciśniecie klawisza Enter Return

Fireworks 4 umożliwia wprowadzanie nazw opisowych dla klatek w palecie Frames.

Rysunek 23.4.

Kliknij dwukrotnie nazwę klatki, aby wprowadzić żądaną nazwę

Usuwanie klatek

Najważniejszą rzeczą, o której musisz pamiętać przy usuwaniu klatek jest to, że usunięcie klatki powoduje również usunięcie wszystkich znajdujących się w niej obiektów, z wyjątkiem tych, które wchodzą w skład warstwy współużytkowanej. Musisz zachować szczególną ostrożność przy identyfikowaniu i usuwaniu właściwych klatek.

Jeśli przez przypadek usuniesz jakąś klatkę i będziesz chciał ją przywrócić, wybierz z menu polecenie Edit Undo lub użyj skrótu klawiaturowego Ctrl+Z (Command+Z).

Aby usunąć klatkę, zaznacz ją w liście palety Frames i wykonaj jedną z poniższych czynności:

u Kliknij przycisk Delete Frames (ikona kosza na śmieci) u dołu palety Frames

u Przeciągnij nazwę klatki na przycisk Delete Frames u dołu palety Frames

u Wybierz polecenie Delete Frames z rozwijanego menu palety Frames

Zmiana kolejności klatek

W czasie pracy z animacją być może będziesz chciał zmienić kolejność klatek, aby niektóre z nich znajdowały się we wcześniejszej lub późniejszej części animacji.

W tym celu zaznacz wybrane klatki i przeciągnij je w górę lub w dół listy palety Frames


	Jeżeli pracowałeś wcześniej z paletą Layers, być może przyzwyczajony jesteś do tego, że po przeciągnięciu warstwy w dół lub w górę listy zachowuje ona przez cały czas taką samą nazwę. Jednak zmiana kolejności klatek spowoduje ich przenumerowanie, odzwierciedlające nowe położenia. Pierwsza klatka animacji zawsze będzie miała nazwę Frame 1.

Duplikowanie klatek

Jednym ze sposobów na zaoszczędzenie czasu jest kopiowanie sekwencji istniejących klatek i późniejsze modyfikowanie ich zawartości. Jeżeli utworzyłeś na przykład animację przedstawiającą wschód słońca, możesz skopiować jej wszystkie klatki i odwrócić ich kolejność, aby otrzymać animację zachodzącego słońca. W ten sposób nie tylko zaoszczędzisz czas, który musiałbyś poświęcić na utworzenie animacji, ale także otrzymasz takie same położenia słońca, jakie miało przy wschodzeniu.

Aby zduplikować pojedynczą klatkę, przeciągnij jej nazwę z listy palety Frames na przycisk Add Frames, który znajduje się u dołu palety Frames. Fireworks wstawi kopię klatki zaraz po klatce oryginalnej.

Aby zduplikować jedną lub więcej klatek i umieścić kopie w określonych położeniach w liście palety Frames

1. Wybierz polecenie Duplicate Frames z rozwijanej listy palety Frames

Fireworks wyświetli okno dialogowe Duplicate Frames


	Okno dialogowe Duplicate Frames jest bardzo podobne do okna Add Frames przestawionego na rysunku 22.3.

2. Wpisz numery duplikowanych klatek w polu dialogowym Number lub wybierz maksymalnie 10 klatek za pomocą suwaka.

3. Wybierz położenie duplikowanych klatek. Dostępne opcje to: At the beginning (Na początku), Before current frame (Przed bieżącą klatką), After current frame (Po bieżącej klatce) i At the end (Na końcu). Kliknij przycisk OK

Klatki zostaną zduplikowane, a kopie umieszczone w określonym miejscu listy palety Frames

Animowanie obiektów

Ważną częścią tworzenia animacji jest zarządzanie wyglądem zmieniających się w czasie obiektów dokumentu. Jeżeli tworzysz prosty animowany wschód słońca, animacja rozpoczyna się od słońca położonego u dołu obszaru roboczego, które następnie przesuwa się w miarę upływu czasu (przez dziesięć kolejnych klatek) do wyższego położenia w obszarze roboczym. W tym samym czasie przesuwać się mogą także chmury, podczas gdy ziemia i niebo pozostają nieruchome.

Na pewno nie będziesz chciał rysować każdego z tych obiektów po kilka razy. Nie dość, że przysporzyłoby Ci to mnóstwo dodatkowych zajęć, to jeszcze przypuszczalnie każdy z obiektów byłby nieco inny. Jeśli wygląd słońca zmieniałby się w każdej klatce, znikłoby wrażenie ruchu, a pojawiłby się oczywisty obraz "podmieniania" obiektów.

Podczas tworzenia animacji utwórz raz wszystkie potrzebne obiekty, a następnie kopiuj lub rozkładaj je na poszczególne klatki. Następnie kopie obiektów możesz przesuwać lub modyfikować, aby uzyskać wrażenie obiektów poruszających się lub zmieniających w czasie.

Przechowywanie podobnych obiektów na ich własnych warstwach pozwoli Ci pracować jedynie z wybranymi obiektami i łatwiejsze kopiowanie ich do kolejnych klatek. W przykładzie animowanego wschodu, słońce możesz przechowywać na jednej warstwie, na innej chmury i na jeszcze innej statyczne obiekty tła.

Kopiowanie obiektów do klatek

W większości przypadków będziesz dodawał obiekty do innych klatek poprzez ich kopiowanie. Aby skopiować obiekt lub obiekty do innej klatki:

4. Zaznacz obiekt(y).

5. Wybierz polecenie Copy to Frames (Kopiuj do klatek) z rozwijanego menu palety Frames

Fireworks wyświetli okno dialogowe Copy to Frames (rysunek 23.5).

6. Wybierz położenie kopiowanych obiektów. Dostępne opcje to: All frames (Wszystkie klatki), Previous frame (Poprzednia klatka), Next frame (Następna klatka) lub Range (Zakres klatek), która umożliwia zdefiniowanie określonego zestawu klatek. Kliknij przycisk OK

Rysunek 23.5.

Użyj okna dialogowego Copy

to Frames,
aby skopiować obiekty

do wszystkich klatek
lub tylko
do określonego zestawu klatek

Rozkładanie obiektów na klatki

Jeśli będziesz chciał rozłożyć grupę obiektów na klatki, wszystkie obiekty zostaną rozłożone po bieżącej klatce, zgodnie z ich kolejnością w stosie. Obiekt znajdujący się najwyżej w grupie pozostanie w bieżącej klatce, obiekt pod nim zostanie przeniesiony do następnej klatki itd. Jeżeli rozpoczniesz pracę od pustego obszaru roboczego i utworzysz trzy obiekty, na przykład kwadrat, okrąg i gwiazdę, gwiazda będzie się znajdowała na samym wierzchu stosu, gdyż została utworzona jako ostatnia. Jeżeli zaznaczysz te obiekty i rozłożysz je na klatki, gwiazda (która była narysowana jako ostatnia) będzie się znajdowała w ostatniej klatce animacji. Jeżeli będzie to konieczne, do dokumentu zostaną dodane nowe klatki, aby pomieścić wszystkie obiekty. Jeśli na przykład chcesz rozłożyć dziesięć obiektów w dokumencie posiadającym pięć klatek, zostanie dodanych pięć nowych klatek, aby pomieścić wszystkie obiekty.

Za pomocą wyżej opisanej metody możesz bardzo szybko przekształcić statyczny dokument w animację. Obiekty utworzone jako pierwsze będą znajdowały się na samym początku animacji.

Aby rozłożyć wybrane obiekty na wiele klatek, zaznacz je i wykonaj jedną z poniższych czynności:

u Kliknij przycisk Distribute to Frames (ikona taśmy filmowej) u dołu palety Frames

u Wybierz polecenie Distribute to Frames z rozwijanego menu palety Frames

u Przeciągnij ikonę selekcji (niebieski kwadrat) na przycisk Distribute to Frames

Zarządzanie statycznymi obiektami

Fireworks upraszcza zarządzanie statycznymi obiektami animacji poprzez współużytkowanie warstw przez wszystkie klatki dokumentu. Jeżeli na przykład w pierwszej klatce utworzysz tło animacji, możesz ustawić warstwę z tłem jako współużytkowaną, co sprawi, że tło będzie widoczne we wszystkich klatkach dokumentu. Po ustawieniu warstwy jako współużytkowanej, znajdujące się na niej obiekty możesz modyfikować w dowolnej klatce, a dokonane zmiany będą odzwierciedlane w pozostałych klatkach animacji. Wszystkie statyczne obiekty animacji wystarczy utworzyć tylko raz.

Aby zdefiniować warstwę jako współużytkowaną przez wszystkie klatki animacji:

7. Kliknij dwukrotnie w palecie Layers nazwę warstwy, która ma być współużytkowana.

Fireworks wyświetli okno dialogowe Layer Options (Opcje warstwy).

8. Zaznacz opcję Share Across Frames i kliknij przycisk OK

Fireworks wyświetli ostrzeżenie, że wszystkie obiekty tej warstwy, na innych klatkach, zostaną usunięte. Kliknij przycisk OK, aby usunąć te obiekty i ustawić warstwę jako współużytkowaną

Aby usunąć współużytkowanie warstwy przez wszystkie klatki animacji:

9. Kliknij dwukrotnie w palecie Layers nazwę warstwy, której współużytkowanie chcesz usunąć.

Fireworks wyświetli okno dialogowe Layer Options (Opcje warstwy).

10. Usuń zaznaczenie opcji Share Across Frames i kliknij przycisk OK

Fireworks zapyta Cię, czy zawartość warstwy chcesz pozostawić we wszystkich klatkach dokumentu, czy tylko w bieżącej klatce. Wybierz opcję Current, aby pozostawić zawartość warstwy tylko w bieżącej klatce. Wybierz opcję All, aby zawartość warstwy pozostawić we wszystkich klatkach dokumentu.


	Innym sposobem ustawiania współużytkowania warstwy jest wybranie warstwy w palecie Layers i zaznaczenie lub usunięcie zaznaczenia polecenia Share Layer w rozwijanym menu palety Layers.

Kontrolki animacji

W trakcie budowania animacji w Fireworks na pewno będziesz chciał ją odtworzyć, aby zobaczyć, jak wyglądają zmiany pomiędzy klatkami. Fireworks oferuje kontrolki przypominające przyciski magnetowidu, znajdujące się u dołu okna dokumentu, które umożliwiają podgląd animacji (rysunek 23.6).

Rysunek 23.6.

Kontrolki animacji znajdujące się
w oknie dokumentu Fireworks umożliwiają sterowanie wieloklatkowym dokumentem jak filmem wideo

Last ... - Przejdź do ostatniej klatki

Play/Stop button (stopped) - Odtwarzaj/Zatrzymaj odtwarzanie (zatrzymany)

First ... - Przejdź do pierwszej klatki

VCR ... - Kontrolki animacji

Next ... - Następna klatka

Previous ... - Poprzednia klatka

Current ... - Numer bieżącej klatki

Play/Stop button (playing) - Odtwarzaj/Zatrzymaj odtwarzanie (odtwarzany)

Po kliknięciu przycisku Play Fireworks odtworzy animację z wykorzystaniem tempa zdefiniowanego w palecie Frames lub zakładce Animation okna dialogowego Export Preview Jeżeli nie ustawisz żadnego tempa, Fireworks będzie odtwarzał animację z przerwą pomiędzy klatkami wynoszącą domyślnie 0,07 sekundy. Ustawieniom opóźnień w odtwarzaniu animacji przyjrzymy się w kolejnym podrozdziale.

W trakcie odtwarzania animacji przycisk Play zamieniany jest na przycisk Stop. Fireworks wyświetla również numer bieżącej klatki oraz oferuje przyciski, które umożliwiają szybkie przejście do poprzedniej, kolejnej, pierwszej lub ostatniej klatki animacji.


	Odtwarzanie animacji możesz zatrzymać także poprzez kliknięcie w dowolnym miejscu okna dokumentu.

Animacja odtwarzana w oknie dokumentu jest zawsze zapętlana, niezależnie od tego, czy zapętlanie będzie włączone czy wyłączone w palecie Frames. Ustawienia zapętlania w palecie Frames mają znaczenie jedynie w eksportowanych plikach animowanych GIF-ów.

Opóźnienia w odtwarzaniu klatek

Pierwszą rzeczą do zapamiętania przy ustawianiu prędkości odtwarzania animacji jest to, że definiowane ustawienia są ostatecznie odczytywane jedynie w przybliżeniu. Podczas gdy Fireworks traktuje je bardzo precyzyjnie - po wyeksportowaniu animacji jako animowanego GIF-a - jej tempo znajduje się w "wirtualnych rękach" oprogramowania odtwarzającego, przeważnie przeglądarki internetowej. Internet Explorer zwykle odtwarza animacje szybciej niż Navigator. Prędkość uzależniona jest także od szybkości komputera.


	Jeśli obliczane tempo odtwarzania animowanego GIF-a nie jest dostatecznie wysokie, tempo zdefiniowane w aktualnie pobieranej animacji jest zupełnie pomijane, a każda jej klatka jest odtwarzana bezpośrednio po pobraniu do komputera użytkownika. W podrozdziale "Projektowanie stron z animowanymi GIF-ami" znajdziesz kilka sztuczek dotyczących odtwarzania pobieranych GIF-ów.

Domyślne opóźnienie w odtwarzaniu nowych klatek wynosi 7 i jest definiowane w setnych częściach sekundy. Przykładowo, 25 oznacza ćwierć sekundy, 50 to pół sekundy, zaś 200 to dwie sekundy.

Aby zmienić opóźnienie w odtwarzaniu klatek:

11. Wybierz z menu polecenie Window Frames lub użyj skrótu klawiaturowego Shift+F2, aby wyświetlić paletę Frames

12. Kliknij dwukrotnie czas klatki, który chcesz modyfikować. Fireworks wyświetli okno edycyjne z ustawieniami opóźnienia klatki (rysunek 23.7).

13. Wpisz nową wartość w polu tekstowym Frames Delay

Rysunek 23.7.

Kliknij dwukrotnie czas klatki,
aby wyświetlić okno edycyjne z ustawieniami opóźnienia w odtwarzaniu

14. Usuń zaznaczenie opcji Include when Exporting, jeśli chcesz, aby ustawienia opóźnienia stosowane były jedynie w trakcie odtwarzania animacji w Fireworks i były pomijane przy eksporcie animowanego GIF-a.

15. Kliknij w dowolnym miejscu poza oknem edycyjnym lub wciśnij klawisz Enter Return), aby ukryć to okno.

Jeśli do eksportu animowanego GIF-a wykorzystujesz okno dialogowe Export Preview, opóźnienie w odtwarzaniu klatki możesz ustawić w polu tekstowym Frame Delay znajdującym się w zakładce Animation

Technika "Onion skinning"

W większości przypadków w oknie dokumentu wyświetlana jest tylko zawartość bieżącej klatki. Zawartość kolejnych możesz obejrzeć, przechodząc z jednej klatki do drugiej, ale jest to dość kłopotliwe. Bardziej precyzyjny podgląd zmian pomiędzy klatkami zapewnia widok Onion Skinning, w którym możesz jednocześnie edytować wiele różnych klatek.


	"Onion skinning" jest tradycyjną techniką animacyjną polegającą na rysowaniu na półprzezroczystej kalce (podobnej do skóry cebuli) i pozwalającą na jednoczesne wyświetlenie wielu różnych rysunków.

Przycisk Onion Skinning znajdujący się w lewym dolnym rogu palety Frames daje dostęp do rozwijanego menu Onion Skinning (rysunek 23.8) i możliwość wyboru wyświetlanych klatek. Możesz zdefiniować dowolny zakres lub wszystkie klatki animacji.

Rysunek 23.8.

Znajdujące się w palecie Frames menu Onion Skinning oferuje kilka metod wyboru jednocześnie wyświetlanych lub nawet edytowanych klatek

Onion Skinning range selector - Znacznik zakresu klatek używanych w technice "Onion Skinning"

Onion Skinning menu - Menu "Onion Skinning"

Po włączeniu techniki "Onion skinning", wszystkie obiekty znajdujące się w bieżącej klatce są wyświetlane normalnie, zaś obiekty z innych klatek są lekko przyciemniane. Po włączeniu odtwarzania animacji za pomocą kontrolek, które znajdują się u dołu okna dokumentu, technika "Onion skinning" jest chwilowo wyłączana.

Ustawianie zakresu klatek używanych w technice "Onion skinning"

Włączenie techniki "Onion skinning" i zdefiniowanie zakresu wyświetlanych klatek jest możliwe dzięki jednej z poniższych metod:

u Zdefiniuj zakres klatek za pomocą znacznika Onion Skinning, znajdującego się po lewej stronie palety Frames (rysunek 23.2). Jest to najszybsza metoda określania zakresów klatek, zwłaszcza w krótkich animacjach. Aby dodać do zakresu klatki poprzednie, kliknij w pustym polu nad znacznikiem. Aby dodać do zakresu klatki kolejne, kliknij w pustym polu pod znacznikiem. Aby zawęzić zakres klatek, kliknij znacznik. Aby wyłączyć "Onion skinning", kliknij u dołu znacznika.

u Wybierz predefiniowany zakres klatek z menu Onion Skinning w palecie Frames. Aby wyświetlić bieżącą i następną klatkę, zaznacz opcję Show Next Frame. Aby wyświetlić klatkę bieżącą, poprzednią i następną, zaznacz opcję Before and After. Aby wyświetlić wszystkie klatki, zaznacz opcję Show All

u Wybierz z rozwijanego menu Onion Skinning polecenie Custom, aby wyświetlić okno dialogowe Onion Skinning (rysunek 23.9), które daje Ci możliwość precyzyjnego definiowania wyświetlanych klatek. W polach tekstowych Before Current Frame (Przed bieżącą klatką) i After Current Frame (Po bieżącej klatce) wpisz liczbę klatek, które chcesz wyświetlić, oraz określ stopień krycia tych klatek za pomocą wartości Opacity. Przy wartości 0 zawartość klatek jest niewidzialna, podczas gdy przy wartości 100 wszystkie obiekty w innych klatkach wyświetlane są jakby znajdowały się w klatce bieżącej.

Rysunek 23.9.

W oknie dialogowym Onion Skinning możesz zdefiniować zakres klatek używanych w technice Onion skinning oraz ustawić stopień krycia tych klatek

Edycja wielu klatek

Po włączeniu opcji Multi-Frame Editing możesz w oknie dokumentu zaznaczać i edytować obiekty znajdujące się w różnych klatkach. Nieważne, czy obiekty znajdują się w bieżącej klatce i są wyświetlane "normalnie", czy też w innej klatce, w której są przyciemnione. Łatwo możesz zaznaczać wszystkie wersje określonego obiektu we wszystkich klatkach i przesuwać je oraz skalować, jakby były jednym obiektem.

Aby włączyć możliwość edycji wielu klatek, zaznacz opcję Multi-Frame Editing w oknie dialogowym Onion Skinning lub w menu Onion Skinning. Aby wyłączyć edycję wielu klatek, usuń zaznaczenie opcji Multi-Frame Editing w oknie dialogowym Onion Skinning

Ustawienia i opcje eksportu

Animowany GIF obsługuje opóźnienia w odtwarzaniu klatek, zapętlanie i różne metody usuwania klatek. Wszystkie te opcje znajdziesz w palecie Frames i w zakładce Animation okna dialogowego Export Preview

Pierwsze ustawienie eksportu, które musisz zdefiniować dla animowanego GIF-a to jego format. Wybierz z menu polecenie Window Optimize, aby wyświetlić paletę Optimize i z rozwijanej listy formatów wybierz opcję Animated GIF (rysunek 23.10).

Rysunek 23.10.

W palecie Optimize jako format eksportu wybierz Animated GIF

Jak zwykle, ostatnim krokiem przed opublikowaniem grafiki w Internecie jest jej "odchudzenie". Wszystkie zasady dotyczące eksportowania zwykłych statycznych GIF-ów
stosują się również do GIF-ów animowanych. Zredukowanie liczby kolorów powoduje zmniejszenie rozmiaru pliku, a zdefiniowanie przezroczystości ułatwia połączenie grafiki z tłem przeglądarki, gdy animowany GIF staje się częścią strony WWW.


	Więcej o specyficznych dla animowanego GIF-a opcjach eksportu dowiesz się z rozdziału 15.

Usuwanie klatek

Oprócz opcji oferowanych dla zwykłego GIF-a, animowany GIF ma dodatkową funkcję, która umożliwia redukowanie rozmiaru pliku - usuwanie klatek. W większości przypadków możesz wykorzystywać domyślne ustawienia usuwania klatek, aby tworzyć bardzo małe animowane GIF-y. Poznanie ustawień eksportu pozwoli Ci, w zależności od typu tworzonej animacji, zaoszczędzić kilka kilobajtów.

Opcje usuwania klatek dostępne są jedynie w menu Frame Disposal znajdującym się w zakładce Animation okna dialogowego Export Preview. Aby otworzyć okno dialogowe Export Preview, wybierz z menu polecenie File Export Preview. Wybierz w nim jedną z następujących opcji:

u Unspecified (Nieokreślona). Fireworks automatycznie wybierze metodę usuwania dla każdej klatki animacji. Jest to domyślne ustawienie, które w większości przypadków pozwala na tworzenie animowanych GIF-ów o bardzo małych rozmiarach.

u None (Żadna). Nakłada każdą klatkę na wierzch poprzedniej klatki. Najpierw wyświetlana jest pierwsza klatka, następnie nad nią dodawana jest kolejna, później jeszcze jedna itd. Jest to działanie odpowiednie dla małych, statycznych obiektów dodawanych nad dużym tłem. Technika ta działa dobrze na przykład w animacjach, w których przez cały czas odtwarzania animacji wyświetlane jest statyczne logo.

u Restore to Background (Przywróć do tła). Wyświetla zawartość każdej nowej klatki nad kolorem tła. Używana jest na przykład do przesuwania obiektów w przezroczystych animowanych GIF-ach.

u Restore to Previous (Przywróć do poprzedniej). Wyświetla zawartość nowej klatki nad zawartością klatki poprzedniej. Używana jest na przykład przy przesuwaniu obiektów po obrazku tła.

Oprócz ustawień dostępnych w menu Frame Disposal, istnieją jeszcze dwie opcje w dużym stopniu wpływające na rozmiary plików:

u Auto Crop (Automatyczne kadrowanie). Fireworks porównuje każdą klatkę animacji z klatką poprzednią i usuwa z niej wszystko poza zmieniającym się obszarem. Redukcja rozmiaru pliku spowodowana jest tym, że informacje o każdym animowanym GIF-ie zapisywane są tylko raz. Można w ten sposób uniknąć sytuacji, w których na przykład niebieska plama znajdująca się w określonym położeniu jest zapisywana osobno w każdej klatce animacji.

Przy eksporcie animowanego GIF-a do edycji w innej aplikacji, zalecane jest wyłączenie opcji Auto Crop. Niektóre typy aplikacji niezbyt dobrze obsługują ten rodzaj optymalizacji i mogą w nich powstawać różne zniekształcenia. Jedną z takich aplikacji jest Macromedia Director 7.

u Auto Difference (Automatyczna różnica). Przekształca niezmieniające się piksele w obszarze Auto Crop na przezroczystość, co niekiedy umożliwia jeszcze większe zredukowanie rozmiaru pliku.

Opcje Auto Crop i Auto Difference mogą być włączane i wyłączane za pomocą rozwijanego menu palety Frames lub w zakładce Animation okna dialogowego Export Preview

Zapętlanie

Zapętlanie jest funkcją dość prostą w stosowaniu. Każdy animowany GIF może być odtwarzany dowolną ilość razy lub ustawiany na ciągłe zapętlanie, a to oznacza, że nigdy nie będzie zatrzymywany. Jeżeli ostatnia klatka animacji jest dobrze wyglądającym punktem końcowym, najlepszym rozwiązaniem jest ustawienie animacji na zapętlanie skończoną liczbę razy.

Przy tworzeniu animowanych rolloverów najlepszym rozwiązaniem jest ustawienia "wiecznego" zapętlania. Umieść kursor nad animowanym GIF-em, który jest odtwarzany tylko jeden raz, a być może stwierdzisz, że nie jest on odtwarzany w ogóle lub tylko połowicznie. Różne przeglądarki internetowe inaczej traktują przeładowywane animowane GIF-y.

Aby zmienić ustawienia zapętlania animowanego GIF-a, wykonaj jedną z poniższych czynności:

u Wybierz opcję No Looping (Brak zapętlania), określoną liczbę lub opcję Forever (Ciągłe zapętlanie) z menu Looping w palecie Frames (rysunek 23.11).

Rysunek 23.11.

Z menu Looping w palecie Frames wybierz
opcje zapętlania animacji

u Zaznacz przycisk Play Once (Odtwarzaj tylko raz) lub Loop (Zapętlaj) w zakładce Animation okna dialogowego Export Preview, podczas eksportowania animacji. Jeśli wybierzesz przycisk Loop, wybierz także opcję Forever (Ciągłe) lub liczbę z rozwijanej listy Number of Loops (Liczba pętli). Liczbę pętli możesz też wpisać bezpośrednio w polu tekstowym.

Eksportowanie animacji za pomocą okna dialogowego Export Preview

Mimo że większość opcji eksportu animowanych GIF-ów możesz zdefiniować w paletach Frames i Optimize, wszystkie te ustawienia znajdziesz również w innym miejscu
- w oknie dialogowym Export Preview, oferującym bardziej wiarygodny podgląd animacji niż ten dostępny w oknie dokumentu.

Aby wyeksportować animację za pomocą okna dialogowego Export Preview

16. Wybierz z menu polecenie File Export

Fireworks wyświetli okno dialogowe Export Preview (rysunek 23.12).

Rysunek 23.12.

W zakładce Animation okna dialogowego Export Preview znajdują
się wszystkie ustawienia eksportowanej animacji

Frame View ... - Pokaż/Ukryj klatkę

Animation tab - Zakładka Animation

Frame Disposal ... - Menu z opcjami usuwania klatek

Frame Delay ... - Pole wartości opóźnienia klatki

Play Once ... - Odtwarzaj tylko raz

Loop button - Przycisk pętli

Number of ... - Lista rozwijana z liczbami powtórzeń animacji

VCR controls - Kontrolki odtwarzania animacji

17. W zakładce Options z rozwijanej listy formatów plików wybierz Animated GIF

18. W zakładkach Options i File zdefiniuj ustawienia, dostępne również dla statycznych GIF-ów, takie jak Bit Depth (Głębia bitowa) i Transparency (Przezroczystość).

19. W zakładce Animation zaznaczaj kolejno wszystkie klatki animacji i wpisz dla każdej z nich żądaną wartość (w setnych częściach sekundy) w polu tekstowym Frame Delay (Opóźnienie klatki). Aby klatki były wyświetlane najszybciej, jak to tylko możliwe, wartość Frame Delay powinna wynosić 0. Obejrzyj ustawienia tempa animacji za pomocą kontrolek odtwarzania, które znajdują się pod oknem Preview w prawym dolnym rogu okna dialogowego Export Preview


	Więcej o ustawieniach optymalizacji eksportowanych GIF-ów znajdziesz w rozdziale 15.

20. Jeśli chcesz, możesz użyć przycisku Frame View/Hide (ikona oka), który znajduje się po lewej stronie nazwy każdej z klatek, aby ukryć lub wyświetlić daną klatkę. Jeżeli klatka będzie ukryta, nie zostanie wyeksportowana i nie będzie wyświetlana w animacji odtwarzanej w Fireworks.


	Ustawienie Frame Delay (Opóźnienie klatki) jest zapisywane wraz z eksportowanym plikiem. Fireworks będzie korzystał z tego ustawienia w czasie odtwarzania animacji w oknie dokumentu z wykorzystaniem kontrolek animacji.

21. Określ metodę usuwania klatek za pomocą odpowiedniej opcji z rozwijanego menu Frame Disposal (przycisk z koszem na śmieci, który znajduje się obok pola Frame Delay

22. Za pomocą przycisków Loop i Play Once określ, czy animacja ma być zapętlana, czy nie. Jeśli klikniesz przycisk Loop, musisz wybrać z listy rozwijanej Number of Loops liczbę powtórzeń animacji. Możesz wybrać liczbę powtórzeń z listy, wpisać inną liczbę w polu tekstowym lub wybrać opcję Forever, aby animacja była zapętlana w nieskończoność. Kliknij przycisk Next (Dalej).

Fireworks wyświetli okno dialogowe Export

23. Określ ścieżkę dostępu i nazwę eksportowanego animowanego GIF-a, a następnie kliknij przycisk Save

Animacja zostanie wyeksportowana jako animowany GIF.

Wykorzystywanie animowanych GIF-ów w projektach internetowych

Jedną z najważniejszych zalet animowanych GIF-ów jest fakt, że można je umieszczać na stronach WWW prawie tak łatwo jak zwykłe obrazki w formacie GIF. W tym podrozdziale znajdziesz opisy kilku metod wstawiania animowanych GIF-ów na strony WWW, pozwalających na tworzenie kompletnych prezentacji.

Animowanie obrazków tła

Przeglądarki internetowe (wersje 4 i późniejsze) mogą wyświetlać animowane GIF-y jako obrazki tła. Za pomocą małego animowanego GIF-a można wypełnić całą stronę WWW, tworząc w ten sposób bardzo dynamiczną prezentację o małym rozmiarze fizycznym pliku.

Wielokrotne wykorzystywanie animacji

Przeglądarka musi pobrać animowanego GIF-a tylko jeden raz. Jeśli wykorzystasz animację ponownie na tej samej lub innej stronie, będzie ona odtwarzana z pamięci podręcznej przeglądarki. Funkcja ta jest szczególnie przydatna w przypadku wykorzystywania animowanych logo i przycisków.

Skalowanie animacji

Za pomocą atrybutów height i width znacznika <img> można wyświetlać animacje o większych rozmiarach bez zwiększania rozmiarów ich plików. Niewielka utrata jakości występująca po przeskalowaniu obrazka do podwójnych rozmiarów (zmniejszasz wówczas o połowę rozdzielczość obrazka) jest niewielką ceną za znaczne zwiększenie wrażenia jakie robi duża animacja. Jeżeli tworzysz na przykład animację o wymiarach 200 200 pikseli, możesz na stronie WWW podwoić jej rozmiary za pomocą następującego znacznika <img>

Do dostosowywania rozmiarów animacji możesz także wykorzystać procentowe wartości jej szerokości i wysokości. W jednych animacjach działanie takie sprawdza się lepiej niż w innych, ale również umożliwia zaoszczędzenie wielu kilobajtów. Ustaw atrybuty width i height na 100%, aby animacja wypełniła całe okno przeglądarki. Znacznik <img> wyglądałby wówczas mniej więcej tak:

Wykorzystywanie tła przeglądarki w obrazku

Jednym z ograniczeń animowanych GIF-ów jest mała liczba kolorów obsługiwanych przez ten format i wysoka cena, jaką trzeba zapłacić za każdy dodatkowy kolor. Możesz jednak dać swojej animacji pełnokolorowe tło poprzez nadanie jej przezroczystości i umieszczenie jej nad tłem stworzonym z obrazka w formacie JPG. Rozmiar całej prezentacji pozostanie niewielki, gdyż łączone są ze sobą zalety formatu GIF (animacja i przezroczystość) oraz formatu JPEG (wiele kolorów przy małym rozmiarze pliku).

Wstępne ładowanie animacji

Istnieją dwie metody wstępnego ładowania animowanych GIF-ów, zapobiegające "skakaniu" odtwarzania animacji w trakcie ich pobierania z Internetu:

u Zastosowanie atrybutu lowsrc znacznika <img>. Do czasu załadowania całego obrazka przeglądarka będzie wyświetlała obrazek o małej jakości wskazywany znacznikiem lowsrc. Poniższy wiersz kodu mówi przeglądarce, aby w trakcie ładowania pliku animated. gif wyświetlała spacer.gif, a następnie zastąpiła spacer.gif załadowanym plikiem animated.gif:

Plik spacer.gif. jest przezroczystym obrazkiem o wymiarach 1 1 piksel, używanym przez Fireworks do rozmieszczania grafiki w tabelach. Będziesz miał kilka kopii takich obrazków, jeśli choć raz eksportowałeś plastrowane obrazki z Fireworks. Gdy nie masz ani jednego, utwórz obrazek o wymiarach 1 1 piksel z przezroczystym obszarem roboczym i wyeksportuj go. Plik taki ma bardzo małe rozmiary, więc nie wpłynie na rozmiar pliku całej strony WWW. Obrazek jest także przezroczysty, więc do czasu rozpoczęcia animacji będzie widać przez niego kolory tła.


	Internet Explorer nie obsługuje atrybutu lowsrc znacznika img.

u Zastosowanie behawiora Swap Image do zamieniania statycznego obrazka spacer.gif za pomocą animacji. Zmień zdarzenie uruchamiające behawior Swap Image na onLoad. Behawior zostanie uruchomiony po załadowaniu całej zawartości strony i statyczny obrazek zostanie zastąpiony pobranym z Internetu animowanym GIF-em.


	Więcej informacji o behawiorach Fireworks znajdziesz w rozdziale 21.

Animowane rollovery

Zastąpienie stanu Over rollovera za pomocą animacji o takich samych wymiarach pozwala uzyskać bardzo ciekawe rezultaty. Gdy użytkownik umieści kursor nad przyciskiem, rozpoczyna się odtwarzanie animacji. Po usunięciu kursora z obszaru przycisku animacja jest zatrzymywana.


	Niektóre przeglądarki mają kłopoty z odtwarzaniem złożonych animacji GIF w rolloverach. Najlepiej sprawdzają się małe, proste animacje z ustawionym ciągłym zapętlaniem.

Aby utworzyć prosty animowany rollover:

24. Utwórz rollover zawierający przynajmniej trzy stany (Up Over i Down), a następnie wyeksportuj jako GIF. (Rollover zawierający tylko dwa stany będzie raczej skakał niż się poruszał.) Zwróć uwagę na nazwę pliku eksportowanego przez Fireworks stanu Over. Będzie to nazwa w stylu _r2_c2_f2, gdzie f2 oznacza drugą klatkę, w której utworzyłeś stan Over


	Szczegółowe informacje o tworzeniu rolloverów znajdziesz w rozdziale 21.

Po wyeksportowaniu pliku jako rollover, musisz go wyeksportować ponownie jako animowany GIF. Poszczególne klatki, w których znajdowały się wszystkie stany rollovera, zostaną przekształcone na klatki animacji.

25. Aby wyeksportować plik jako animowany GIF, wybierz z menu polecenie File Export Preview

Fireworks wyświetli okno dialogowe Export Preview

26. Z listy formatów znajdującej się w zakładce Options wybierz opcję Animated GIF

27. Kliknij przycisk Loop w zakładce Animation, wybierz opcję Forever i kliknij przycisk Next

Fireworks wyświetli okno dialogowe Export

28. Z rozwijanej listy Slicing wybierz opcję No Slicing

29. Z rozwijanej listy HTML Style wybierz opcję None

30. Zaznacz plik reprezentujący stan Over Twojego rollovera i kliknij przycisk Save, aby pod taką samą nazwą zapisać animowanego GIF-a.

Fireworks zapyta Cię, czy chcesz zastąpić plik oryginalny. Kliknij przycisk Yes

Gdy otworzysz utworzony przez Fireworks plik HTML, zobaczysz, że umieszczenie kursora nad przyciskiem spowoduje odtworzenie stanów Up Over i Down rollovera.


	Możesz również utworzyć animowanego rollovera, którego animacja będzie zatrzymywana po umieszczeniu nad nim kursora. Za pomocą animacji zastąp w tym celu obrazek f1, a nie f2. Animacja zostanie uruchomiona po załadowaniu strony WWW i zatrzymana po umieszczeniu kursora nad przyciskiem.

Plastrowanie animacji

W pracy z animacjami możesz wykorzystywać wszystkie narzędzia Fireworks służące do plastrowania.


	W palecie Object wybierz dla wszystkich statycznych plastrów animacji format GIF, JPEG, PNG lub inny żądany format. Ustaw opcje eksportowanych plastrów na Export Defaults, a następnie wybierz Animated GIF jako format eksportu dla całego dokumentu.

Oto niektóre koncepcje przydatne przy plastrowaniu animacji:

u Dołączanie dodatkowych kolorów: Utwórz plastry z pełnokolorowych, statycznych obszarów, a następnie wyeksportuj je jako obrazki JPEG lub PNG. Animacja będzie posiadała wówczas obszary 24-bitowego koloru.

u Dodawanie interakcji: Zastąp puste plastry animowanego GIF-a za pomocą elementów formularzy HTML, takich jak listy opcji lub przyciski opcji.


	Więcej informacji o plastrowaniu obrazków w Fireworks znajdziesz w rozdziale 20.

Sekwencjonowanie symboli graficznych

Animacje tworzone w Fireworks możesz rozwijać poprzez umieszczanie w nich symboli graficznych. Symbole są wielokrotnie wykorzystywanymi obiektami, umieszczanymi w bibliotekach Fireworks. Kopie symboli zlokalizowane w obszarze roboczym nazywane są "Instances". Posiadają one łącza z symbolami oryginalnymi, więc zmodyfikowanie określonych właściwości symbolu powoduje zastosowanie tych zmian we wszystkich jego kopiach.


	Aby dobrze zrozumieć zagadnienia opisywane w kolejnych podrozdziałach, musisz mieć podstawowe wiadomości na temat symboli. Więcej o symbolach graficznych dowiesz się z rozdziału 17.

Dwie lub więcej kopii tego samego symbolu może być automatycznie sekwencjonowane przez Fireworks. Sekwencjonowanie jest terminem używanym w animacji i oznaczającym generowanie pośrednich klatek pomiędzy dwoma obrazkami, w celu utworzenia łagodnego przejścia jednego obrazka w inny. Wystarczy, że utworzysz w Fireworks początkowy i końcowy punkt sekwencji, a program automatycznie utworzy wszystkie kroki pośrednie. Każda nowo tworzona kopia jest lekko modyfikowana w stosunku do poprzedniej, co powoduje powstanie efektu ewoluowania pierwszej kopii do ostatniej. Możesz również sekwencjonować więcej niż dwie kopie (rysunek 23.13). W takim przypadku o każdej kopii powinieneś myśleć jako o kluczowej klatce animacji.

Rysunek 23.13.

Każda kopia jest klatką kluczową animacji. Fireworks automatycznie utworzy wszystkie pośrednie obiekty

Original - Kopia oryginalna

Sekwencjonowanie można naturalnie wykorzystywać do symulowania ruchu, ale sekwencjonując właściwości obiektów można również zmieniać je w czasie. Jeśli przeskalujesz kopię do większych rozmiarów i będziesz ją sekwencjonował z inną kopią o niezmienionych wymiarach, sekwencjonowane kopie będą skalowane w celu uzyskania płynnego przejścia pomiędzy nimi (rysunek 23.13). Wszystkie właściwości kopii, które można modyfikować, mogą być także sekwencjonowane. Oto te właściwości:

u Przekształcenia, takie jak zmiana szerokości, wysokości lub przekrzywienie wykonywane narzędziami transformacji dostępnymi w podmenu Modify Transform


	Fireworks zawsze sekwencjonuje dwie lub więcej kopii tego samego symbolu, niemożliwe jest więc sekwencjonowanie kształtów, ponieważ kształty kopii zawsze są takie same. Jeżeli chcesz sekwencjonować kształty obiektów, możesz utworzyć przejście w programie Macromedia FreeHand, a następnie zaimportować je do Fireworks i rozłożyć na klatki. Sekwencjonowanie kształtów możesz wykonać również w aplikacji Macromedia Flash, zapisać rezultat jako dokument Adobe Illustratora i zaimportować go do Fireworks z zachowaniem informacji o wektorach.

u Krycie i tryby mieszania ustawiane w palecie Object

u Live Effects. Jeżeli do wszystkich kopii zastosowany jest ten sam efekt, możesz sekwencjonować jego właściwości. Jeśli chciałbyś, aby obiekt nieposiadający na początku żadnego efektu został zamieniony na obiekt zmodyfikowany efektem, musisz wyzerować ustawienia efektu pierwszej kopii, zaś dla drugiej kopii zdefiniować większe wartości parametrów efektu.

Fireworks zawsze wykonuje sekwencjonowanie w kierunku od obszaru roboczego: najpierw bierze pod uwagę obiekty znajdujące się najniżej w stosie, na końcu zaś obiekty, które są na samym wierzchu (rysunek 23.14). Jeżeli sekwencjonujesz więcej niż dwa obiekty, najpierw dostosuj ich kolejność w stosie.

Rysunek 23.14.

Po sekwencjonowaniu cztery kopie stają się jedną animacją. Zwróć uwagę,
że Fireworks wykonuje sekwencjonowanie zgodnie z kolejnością obiektów w stosie. Zaczyna od obiektów znajdujących się najbliżej obszaru roboczego,
zaś na końcu sekwencjonuje obiekty, które są
na samym wierzchu

Original - Kopia oryginalna


	Nie myśl, że obiekty są sekwencjonowane od lewej do prawej strony obszaru roboczego. Kierunek sekwencjonowania determinowany jest kolejnością obiektów w stosie.

Po ustaleniu właściwej kolejności w stosie sekwencjonowanych obiektów, musisz również zdecydować, ile kroków pośrednich powinien utworzyć Fireworks pomiędzy poszczególnymi obiektami. Ponownie przyjrzyj się rysunkowi 23.13. W tym sekwencjonowaniu wykorzystane zostały trzy kroki, więc Fireworks pomiędzy oryginalnymi kopiami utworzy trzy obiekty pośrednie.

Do tej pory sekwencjonowaliśmy obiekty i tworzyliśmy pojedynczą klatkę przedstawiającą obiekty rozłożone na całym obszarze roboczym. Zazwyczaj jednak, aby utworzyć prawdziwą animację, będziesz musiał rozłożyć sekwencjonowane obiekty do różnych klatek. Możesz to zrobić w trakcie sekwencjonowania lub w dowolnym momencie zaznaczyć sekwencjonowane obiekty i kliknąć w palecie Frames przycisk Distribute to Frames. Fireworks rozłoży obiekty na klatki, rozpoczynając od obiektu znajdującego się na spodzie stosu, czyli tak samo jak wykonywane jest sekwencjonowanie. Zachowana zostanie więc właściwa kolejność obiektów.

Aby sekwencjonować kopie:

31. Utwórz obiekt lub grupę obiektów, a następnie przekształć je na symbol. Zaznacz w tym celu obiekt i wybierz z menu polecenie Insert Convert to Symbol. Wpisz nazwę symbolu w oknie dialogowym Symbol Properties i kliknij przycisk OK. Obiekt zostanie przekształcony na symbol i zapisany w bibliotece. W obszarze roboczym pozostanie kopia tego symbolu.

32. Wybierz z menu polecenie Edit Duplicate lub użyj skrótu klawiaturowego Ctrl+Alt+D Command+Option+D), aby utworzyć nową kopię. Duplikat kopii jest również kopią. Pamiętaj, że kopia będzie się znajdowała wyżej w stosie obiektów niż oryginał.

33. Umieść duplikat kopii w miejscu, w którym ma się kończyć sekwencja.

34. Zaznacz obie kopie, rysując wokół nich ramkę selekcji lub klikając je kolejno z wciśniętym klawiszem Shift

35. Wybierz z menu polecenie Modify Symbol Tween Instances

Fireworks wyświetli okno dialogowe Tween Instances (rysunek 23.15).

Rysunek 23.15.

W oknie dialogowym Tween Instances ustaw liczbę operacji pośrednich sekwencji i określ, czy chcesz rozłożyć obiekty na klatki

36. Wpisz liczbę etapów sekwencjonowania. Ustawienie trzech kroków spowoduje utworzenie przez Fireworks trzech nowych obiektów pomiędzy wszystkimi kopiami oryginalnymi.

37. Zaznacz opcję Distribute to Frames, aby rozłożyć sekwencjonowane obiekty na klatki i przekształcić je w animację. Kliknij przycisk OK

Fireworks utworzy nowe obiekty, a Ty będziesz miał błyskawicznie utworzoną animację.

Technika Fireworks: sekwencjonowanie Xtra

W przeciwieństwie do Live Effects, rozszerzenia Xtra nie można sekwencjonować, gdyż są one stosowane bezpośrednio jedynie do obiektów bitmapowych. Zastosowanie Xtra do połączonego obiektu powoduje zerwanie połączenia i przekształcenie obiektu na zwykły. Możesz jednak używać sekwencjonowania do szybkiego tworzenia animacji, w których w każdej klatce zmieniane są jedynie ustawienia Xtra.


	W naszym przykładzie użyłem Xtra o nazwie Fire, które jest częścią pakietu Eye Candy produkcji firmy Alien Skin. Fire jest dostępny zarówno w wersji Eye Candy 3.1, jak i Eye Candy 4000. Jeśli nie posiadasz tego pakietu, użyj jednego z filtrów Eye Candy 4000 LE wbudowanych do Fireworks 4 lub innego Xtra, których wiele znajdziesz w Internecie. Więcej informacji o rozszerzeniach Xtra i pakiecie Eye Candy 4000 znajdziesz w rozdziale 12.

Aby animować Xtra w Fireworks:

38. Utwórz obiekt lub obiekty, do których będziesz chciał stosować Xtra i przekształć je na symbol z wykorzystaniem polecenia Insert Convert to Symbol. Wpisz nazwę symbolu w oknie dialogowym Symbol Properties i kliknij przycisk OK. Symbol zostanie umieszczony w bibliotece, zaś jego kopia w obszarze roboczym.

39. Zaznacz kopię i utwórz jej kolejną kopię bezpośrednio nad oryginałem za pomocą polecenia Edit Clone lub skrótu klawiaturowego Ctrl+Shift+D Command +Shift+D

40. Zaznacz obie kopie, rysując wokół nich ramkę selekcji. Jeśli obiekty te są jedynymi obiektami Twojego dokumentu, możesz je szybko zaznaczyć za pomocą polecenia Edit Select All lub skrótu klawiaturowego Ctrl+A Command+A

41. Utwórz sekwencjonowane kopie pomiędzy dwoma istniejącymi kopiami za pomocą polecenia Modify Symbol Tween Instances

Fireworks wyświetli okno dialogowe Tween Instances

42. Ustaw małą liczbę operacji, na przykład 5.

43. Usuń zaznaczenie opcji Distribute to Frames i kliknij przycisk OK

Otrzymasz stos identycznych obiektów, do których zastosujemy Xtra, zmieniając nieco ustawienia, aby każdy obiekt wyglądał inaczej.

44. Zaznacz wszystkie kopie, rysując za pomocą myszy otaczającą je ramkę selekcji.

45. Wybierz z menu polecenie Xtras Eye Candy 4000 Fire

Fireworks wyświetli okno dialogowe Fire dla pierwszej kopii.

46. Zdefiniuj żądane ustawienia i kliknij przycisk OK

Fireworks wyświetli okno dialogowe Fire dla drugiej kopii.

47. Kontrolki efektu będą znajdowały się w takich samych położeniach, w jakich zostawiłeś je przy ustawianiu parametrów efektu dla pierwszej kopii. Zmodyfikuj nieco wartości, aby utworzyć różnicę w wyglądzie kopii. Kliknij przycisk OK

Fireworks wyświetli okno dialogowe Fire dla trzeciej kopii.

48. Kontynuuj modyfikowanie ustawień efektu w każdym wyświetlanym oknie dialogowym, dopóki nie zdefiniujesz parametrów dla wszystkich kopii.

W dowolnej chwili możesz w oknie dialogowym Xtra kliknąć przycisk Cancel, aby anulować stosowanie Xtra do wszystkich kopii.

49. Utrzymując zaznaczenie wszystkich kopii, kliknij znajdujący się w palecie Frames przycisk Distribute to Frames (ikona taśmy filmowej).

Wszystkie kopie zostaną rozłożone na klatki, aby utworzyć animację taką, jak przedstawiona na rysunku 23.16. Możesz obejrzeć utworzoną animację za pomocą kontrolek dostępnych u dołu okna dokumentu. Możesz także wybrać z menu polecenie File Export Preview i obejrzeć animację w oknie dialogowym Export Preview lub sprawdzić jej działanie w przeglądarce internetowej za pomocą polecenia File Preview in Browser

Rysunek 23.16.

Przedstawiona
na rysunku animacja palącej się czaszki pracuje w oparciu o zmiany parametrów efektu Fire zastosowanego do wszystkich kopii

Technika Fireworks: sekwencjonowanie głębi

Szybkim i przydatnym efektem, który możesz utworzyć, sekwencjonując kopie jest trójwymiarowa głębia, przy której obiekty wyglądają tak, jakby "wylatywały" z obszaru roboczego.

Aby utworzyć efekt głębi za pomocą sekwencjonowanych kopii:

50. Utwórz obiekt lub grupę obiektów, z którymi będziesz pracował, a następnie przekształć je na symbol za pomocą polecenia Insert Convert to Symbol. Wpisz nazwę symbolu w oknie dialogowym Symbol Properties i kliknij przycisk OK. Symbol zostanie umieszczony w bibliotece, zaś jego kopia pozostanie w obszarze roboczym.

51. Umieść kopię w pobliżu górnej krawędzi obszaru roboczego.

52. Wybierz z menu polecenie Edit Clone lub użyj skrótu klawiaturowego Ctrl +Shift+D Command+Shift+D), aby utworzyć kolejną kopię dokładnie nad pierwszą.

53. Przytrzymaj wciśnięty klawisz Shift i użyj klawisza ze strzałką w dół, aby przesunąć nową kopię w dół bez przemieszczania w prawo lub w lewo. Aby utworzyć realistycznie wyglądający efekt głębi, najlepiej przesunąć kopię o kilkaset pikseli.

54. Utrzymując zaznaczenie kopii, wybierz z menu polecenie Modify Transform Numeric Transform

Fireworks wyświetli okno dialogowe Numeric Transform (Przekształć numerycznie).

55. Wybierz z rozwijanej listy pozycję Scale (Skalowanie), zaznacz opcję Scale Attributes (Skaluj atrybuty) oraz Constrain Proportions (Zachowaj proporcje) i wpisz wartość 30 w polu tekstowym, aby przeskalować kopię do 30% jej oryginalnych rozmiarów. Kliknij przycisk OK

56. Kliknij dwukrotnie kopię i wpisz wartość 10 w znajdującym się w palecie Object polu tekstowym Opacity, aby zmniejszyć krycie kopii do 10%.

57. Wybierz z menu polecenie Modify Arrange Send to Back lub użyj skrótu klawiaturowego Ctrl+Shift+strzałka w dół Command+Shift+strzałka w dół), aby przesunąć kopię na spód stosu.

58. Wciśnij klawisz Shift i klikaj kolejno kopie, aby je zaznaczyć. Jeśli są one jedynymi obiektami w dokumencie, możesz użyć polecenia Edit Select All lub skrótu klawiaturowego Ctrl+A Command+A

59. Wybierz z menu polecenie Modify Symbol Tween Instances

Fireworks wyświetli okno dialogowe Tween Instances

60. Zdefiniuj liczbę kroków, jakie mają być utworzone pomiędzy kopiami, usuń zaznaczenie opcji Distribute to Frames i kliknij przycisk OK

Fireworks wykona sekwencjonowanie kopii.


	Jeśli będziesz chciał zmodyfikować liczbę kroków tworzonych w sekwencjonowaniu, możesz wybrać polecenie Edit Undo, a następnie powtórzyć polecenie dziesiąte i jedenaste.

61. Jeżeli chcesz, możesz zaznaczyć oryginalną kopię i wyróżnić ją poprzez zastosowanie efektu blasku lub wewnętrznego fazowania.

Obiekty będą wyglądały teraz, jakby "wylatywały" z obszaru roboczego (rysunek 23.17).

Rysunek 23.17.

Fireworks utworzy
za pomocą sekwencjonowania kroki pośrednie pomiędzy wyższą i niższą kopią.

Do wyższego obiektu został zastosowany efekt Glow (Blask), aby wyróżnić go z tła

Aby przekształcić utworzony efekt głębi na animację, zaznacz wszystkie kopie, rysując wokół nich ramkę selekcji (jeśli są one jedynymi obiektami Twojego dokumentu, możesz też użyć polecenia Edit Select All) i kliknij przycisk Distribute to Frames w palecie Frames. Obiekty będą animowane tak, jakby "wylatywały" prosto na użytkownika.

Aby rozjaśniać i ściemniać obiekt:

62. Utwórz obiekt lub grupę obiektów, zaznacz je i przekształć na symbol za pomocą polecenia Insert Convert to Symbol. Wpisz nazwę symbolu w oknie dialogowym Symbol Properties i kliknij przycisk OK. Symbol zostanie zapisany w bibliotece, zaś jego miejsce w dokumencie zajmie kopia.

63. Zaznacz kopię i wybierz z menu polecenie Edit Clone lub wciśnij skrót Ctrl+Shift+D Command+Shift+D), aby utworzyć kolejną kopię położoną dokładnie nad poprzednią.

64. Otwórz paletę Object i ustaw w polu tekstowym Opacity wartość krycia nowej kopii na 0%.


	Początkowo może wydawać się, że ustawienia krycia nie odnoszą żadnych skutków, gdyż będziesz widział oryginalną kopię przez nową kopię, która jest teraz przezroczysta.

65. Wybierz z menu polecenie Modify Arrange Send to Back, aby przezroczystą kopię umieścić za oryginalną.

66. Zaznacz obie kopie, rysując otaczającą je ramkę selekcji. Jeśli kopie są jedynymi obiektami w Twoim dokumencie, możesz je zaznaczyć za pomocą polecenia Edit Select All lub skrótu klawiaturowego Ctrl+A Command+A

67. Wybierz z menu polecenie Modify Symbol Tween Instances

Fireworks wyświetli okno dialogowe Tween Instances

68. Zdefiniuj 5 operacji sekwencjonowania.


	Jeśli chcesz, możesz zdefiniować inną liczbę, ale ten przykład cały został oparty na pięciu poleceniach i takiej samej liczbie klatek.

69. Zaznacz opcję Distribute to Frames i kliknij przycisk OK

Włącz odtwarzanie animacji. Obiekty zostaną ściemnione, zaś animacja powinna mieć siedem klatek. W pierwszej klatce kopia jest całkowicie przezroczysta (krycie ustawiona na 0%), w drugiej klatce kopia będzie mniej przezroczysta, czyli zostanie ściemniona, zaś w ostatniej, siódmej klatce będzie już kompletnie nieprzezroczysta.


	W tym punkcie możesz pozostawić animację w aktualnej postaci lub kontynuować jej tworzenie i wykonać rozjaśnianie obiektów.

70. Otwórz paletę Frames i zaznacz ostatnią klatkę animacji, aby wyświetlić ją w oknie dokumentu. Klatka ta zawiera kompletnie nieprzezroczystą kopię.

71. Zaznacz kopię i wybierz z menu polecenie Edit Clone lub użyj skrótu klawiaturowego Ctrl+Shift+D Command+Shift+D), aby utworzyć kopię położoną dokładnie nad pierwszą.

72. Otwórz paletę Object i w polu Opacity ustaw wartość krycia kopii na 0%.

73. Zaznacz obie kopie, rysując otaczającą je ramkę selekcji. Jeśli kopie są jedynymi obiektami w Twoim dokumencie, możesz je zaznaczyć za pomocą polecenia Edit Select All lub skrótu klawiaturowego Ctrl+A Command+A

74. Wybierz z menu polecenie Modify Symbol Tween Instances

Fireworks wyświetli okno dialogowe Tween Instances

75. Ustaw taką samą liczbę operacji, jakiej używałeś przy ściemnianiu kopii (w naszym przypadku 5).

76. Zaznacz opcję Distribute to Frames i kliknij przycisk OK

77. Zaznacz ostatnią klatkę animacji w palecie Frames i usuń ją za pomocą przycisku Delete Frame (ikona kosza na śmieci). Klatka ta jest zbędna, ponieważ kompletnie przezroczysty obiekt znajduje się także w pierwszej klatce animacji. Animacja będzie odtwarzana bardziej płynnie bez tej klatki.

Kliknij przycisk Play, aby włączyć odtwarzanie animacji. Obiekty będą ściemniane, a następnie rozjaśniane (rysunek 23.18). Jeśli chcesz, możesz kliknąć dwukrotnie całkowicie nieprzezroczystą klatkę znajdującą się w środku animacji (w naszym przykładzie jest to klatka 7) i zdefiniować większe opóźnienie, co sprawi wydłużenie przerwy pomiędzy ściemnieniem a rozjaśnieniem. Wybierz z menu polecenie Export Export Preview, aby obejrzeć swoją animację w oknie dialogowy Export Preview, w którym animacje są odtwarzane bardziej płynnie niż w oknie dokumentu.

Rysunek 23.18.

Rozjaśnianie i ściemnianie obiektów za pomocą sekwencjonowania jest prostym zadaniem

Symbole animacyjne

Symbole animacyjne to samodzielne i wieloklatkowe symbole o określonych właściwościach animacji, jak liczba klatek, obrót i skalowanie Symbol animacyjny można utworzyć z dowolnego obiektu, może również zawierać inny symbol. Podobnie jak symbole przycisków i symbole graficzne, są one przechowywane w bibliotece i mogą być ponownie wykorzystywane.


	Symbole animacyjne są nowością w Fireworks 4.

Symbol animacyjny można utworzyć graficznie w edytorze symboli (Symbol Editor), a jego właściwości określić w palecie Object lub za pomocą polecenia Modify Animate Settings. Ścieżkę ruchu symbolu można modyfikować bezpośrednio w oknie dokumentu.

Tworzenie symboli animacyjnych

Nowy symbol animacyjny można utworzyć od podstaw lub przekształcić w tym celu obiekt istniejący.

Aby utworzyć nowy symbol animacyjny:

Wybierz polecenie Insert New Symbol

Fireworks wyświetli okno dialogowe Symbol Properties (rysunek 23.19).

Rysunek 23.19.

W oknie dialogowym Symbol Properties określamy nazwę symbolu i wybieramy Animation jako jego typ

Wpisz nazwę nowego symbolu.

Zaznacz przycisk opcji Animation i kliknij przycisk OK

Fireworks otworzy edytora symboli.

Korzystając z narzędzi do rysowania, utwórz nową grafikę.

Po zakończeniu zamknij okno Symbol Editor

Fireworks umieści nowy symbol animacyjny w bibliotece, a jego kopię w dokumencie.

Aby dodać nowe klatki do nowego symbolu animacyjnego, zaznacz go w obszarze roboczym i dostosuj ustawienie suwaka Frames w palecie Object

Aby edytować właściwości animacji symbolu, zaznacz go i wybierz polecenie Modify Animate w celu otwarcia okna dialogowego Animate

Aby przekształcić istniejący obiekt na symbol animacyjny:

Zaznacz obiekt, który chcesz przekształcić na symbol animacyjny.

Wybierz polecenie Modify Animate Animate Selection lub użyj skrótu klawiaturowego Alt+Shift+F8 Option+Shift+F8

Fireworks wyświetli okno dialogowe Animate (rysunek 23.20).

Rysunek 23.20.

W oknie dialogowym Animate możemy dokonywać modyfikacji ustawień animacji

Zmodyfikuj ustawienia w oknie dialogowym Animate

u Frames (Klatki): Liczba klatek umieszczanych w animacji.


	Maksymalna liczba klatek ustawiana przez suwak Frames to 250, ale w polu tekstowym można wpisać większą liczbę. Fireworks automatycznie doda żądaną liczbę klatek do dokumentu.

u Movement (Ruch): Odległość, na jaką chcesz przemieszczać każdy z obiektów. Zakres wartości od 0 do 250 pikseli, ustawienie domyślne - 72.

u Direction (Kierunek): Kierunek, w którym obiekt ma być przemieszczany. Zakres od 0 do 360 stopni.

u Scaling (Skalowanie): Zmiana rozmiaru od wielkości początkowej do końcowej, wyrażona w procentach. Zakres od 0 do 250%, ustawienie domyślne - 100%.

u Opacity (Krycie): Określenie stopnia rozjaśniania lub ściemniania od początku do końca animacji. Wartości od 0 - pełna przezroczystość, do 100 (ustawienie domyślne) - pełna nieprzezroczystość.

u Rotation (Obrót): Kąt obrotu symbolu od początku do końca animacji. Ustawieniem domyślnym jest 0 stopni, co oznacza brak obrotu. Wybór 90 stopni daje ćwierć obrotu, 180 stopni daje pół obrotu, a 360 stopni - pełny obrót. Wprowadzenie wartości większej niż 360 powoduje rozpoczęcie drugiego obrotu.

u CW i CCW: Odpowiednio zgodnie z ruchem i przeciwnie do ruchu wskazówek zegara; określa kierunek obrotu obiektu.

Kliknij OK.

Nowy symbol zostanie dodany do biblioteki, a kopia zostanie umieszczona w obszarze roboczym.

Modyfikowanie symbolu animacyjnego

Rzadko się zdarza, że od razu uda się stworzyć idealny symbol animacyjny. W większości przypadków niezbędne jest precyzyjne dopasowywanie ustawień symbolu animacyjnego, aby osiągnąć zamierzony efekt.

Istnieje wiele metod zmieniania ustawień symbolu animacyjnego. Poniżej znajduje się ich opis.

Zmiany ustawień animacji

Zaznacz symbol animacyjny i wybierz polecenie Modify Animate Settings, aby otworzyć okno dialogowe Animate, w którym możesz dokonać żądanych zmian.


	Ustawienia w oknie dialogowym Animate zostały opisane we wcześniejszym podrozdziale "Tworzenie symboli animacyjnych".

Wykorzystanie palety Object

Po zaznaczeniu symbolu animacyjnego, w palecie Object wyświetlane są opcje symbolu animacyjnego, podobne do opcji w oknie dialogowym Animate (rysunek 23.21). Zmodyfikuj opcje, aby dostosować odpowiednie ustawienia.

Rysunek 23.21.

W palecie Object dokonujemy modyfikacji opcji symbolu animacyjnego

Modyfikacja ścieżki ruchu

Po zaznaczeniu symboli animacyjnych, wyświetlana jest ścieżka ruchu, przedstawiająca ich ruch przez obszar roboczy, klatka po klatce (rysunek 23.22). Punkt początkowy ścieżki jest oznaczony zieloną kropką, a punkt końcowy - czerwoną. Niebieskie kropki reprezentują kolejne klatki animacji. Sam obiekt jest przedstawiany na ścieżce bieżącej.

Rysunek 23.22.

Ścieżka ruchu przedstawia ruch symbolu animacyjnego. Widoczny obiekt znajduje się na czwartej klatce - klatce bieżącej

Kierunek ruchu symbolu animacyjnego może być zmieniony przez zmianę kąta ścieżki ruchu. Przeciągnij jeden z uchwytów animacji w nowe miejsce:


	Trzymając wciśnięty klawisz Shift w trakcie przeciągania, ograniczamy ruch do pionowego lub poziomego.

u Przesuń zielony punkt, aby przemieścić początkowy punkt animacji.

u Przesuń czerwony punkt, aby przemieścić końcowy punkt animacji.

u Przesuń dowolny niebieski punkt, aby przemieścić obiekt na odpowiedniej klatce. Kliknij niebieski punkt, aby przełączyć się na tę klatkę.

Przekształcanie na symbol graficzny

Wybierz polecenie Modify Animate Remove Animation, aby przekształcić symbol animacyjny na symbol graficzny. Symbol nie będzie już animowany, ale Fireworks zachowa ustawienia animacji, na wypadek gdybyś chciał ponownie przekształcić symbol na symbol animacyjny.

Usuwanie symbolu

Aby usunąć symbol animacyjny z biblioteki:

Wybierz polecenie Window Library, aby wyświetlić paletę Library

W palecie Library zaznacz symbol animacyjny, który chcesz usunąć.

Kliknij przycisk Delete Symbol (ikona kosza na śmieci).

Fireworks wyświetli okno dialogowe z prośbą o potwierdzenie operacji usunięcia symbolu.

Kliknij Delete, aby usunąć symbol.

Modyfikowanie grafiki symbolu

Podobnie jak symbole przycisków i symbole grafiki, symbole animacyjne są oparte na grafice, którą można modyfikować w edytorze symboli (Symbol Editor). Podczas modyfikowania grafiki, w oparciu o którą jest utworzony symbol, zmieniane są również wszystkie jego kopie - te znajdujące się w obszarze roboczym.

Aby zmodyfikować grafikę w symbolu animacyjnym:

Zaznacz symbol animacyjny, który chcesz modyfikować.

Wybierz polecenie Modify Symbol Edit Symbol, aby otworzyć edytora symboli. Możesz również wybrać polecenie Window Library i następnie kliknąć dwukrotnie określony symbol w palecie Library

Dokonaj zmian grafiki w edytorze symboli.

Po zakończeniu zamknij okno Symbol Editor


	W rozdziale 17. znajdziesz więcej informacji o edytorze symboli.

Podsumowanie

Fireworks pozwala na tworzenie i edytowanie animacji z wykorzystaniem wielu różnych technik, z których większość skupiona jest wokół palety Frames. Podczas pracy z animacjami powinieneś pamiętać o następujących rzeczach:

u Bardzo ważnym czynnikiem jest zawsze całkowity rozmiar fizyczny animacji. Każda decyzja musi być podejmowana pod kątem jej wpływu na rozmiar pliku.

u Centrum zarządzania narzędziami animacyjnymi jest paleta Frames, ale nie bez znaczenia jest także paleta Layers

u Każdą klatkę dokumentu Fireworks można porównać do klatki tradycyjnej taśmy filmowej. Skopiuj obiekty do innych klatek za pomocą palety Frames, a następnie zmodyfikuj ich położenie względem obszaru roboczego lub ich właściwości, aby utworzyć animację.

u Warstwy mogą być współużytkowane przez wiele klatek, co umożliwia łatwiejsze zarządzanie statycznymi obiektami animacji.

u Technika "Onion Skinning" pozwala na podglądanie i edycję wielu klatek jednocześnie.

u Istnieje wiele możliwości dla projektów internetowych, które nadają się do wykorzystania w formacie animowanych GIF-ów. Są to na przykład animowane rollovery, plastrowane animacje i animowane tła przeglądarek.

u Sekwencjonowanie jest techniką pozwalającą zaoszczędzić wiele pracy i czasu projektanta, gdyż Fireworks automatycznie wykonuje za niego wszystkie pośrednie etapy animacji. Sekwencjonować można dwie lub więcej kopii tego samego symbolu.

u Fireworks sekwencjonuje obiekty zgodnie z ich kolejnością w stosie, rozpoczynając od obiektu położonego na samym spodzie, czyli najbliżej obszaru roboczego.

u Rozłóż sekwencję na klatki, aby błyskawicznie utworzyć animację.

u Sekwencjonowania możesz używać do tworzenia zaawansowanych efektów, takich jak ściemnianie i rozjaśnianie obiektów lub ich "wylatywanie" z obszaru roboczego.

u Symbole animacyjne ułatwiają animowanie obiektów.

W następnym rozdziale poznasz stosowanie technik animacyjnych umożliwiających tworzenie najpopularniejszej odmiany animowanych GIF-ów - banerów reklamowych.

Document Info

Accesari: 4764
Apreciat:

Comenteaza documentul:

Nu esti inregistrat
Trebuie sa fii utilizator inregistrat pentru a putea comenta

Creaza cont nou

A fost util?

Daca documentul a fost util si crezi ca merita
sa adaugi un link catre el la tine in site

Copiaza codul:
in pagina web a site-ului tau.

eCoduri.com - coduri postale, contabile, CAEN sau bancare

Politica de confidentialitate | Termenii si conditii de utilizare

Techniki animacyjne

Poloneza

ALTE DOCUMENTE

Podstawowe wiadomości o animacjach sieciowych

Kwestia przepustowości

Kompromis

Dlaczego animowany GIF

Zestaw narzędzi Fireworks do tworzenia animacji

Zarządzanie klatkami

Dodawanie klatek

Nazywanie klatek

Usuwanie klatek

Zmiana kolejności klatek

Duplikowanie klatek

Animowanie obiektów

Kopiowanie obiektów do klatek

Rozkładanie obiektów na klatki

Zarządzanie statycznymi obiektami

Kontrolki animacji

Opóźnienia w odtwarzaniu klatek

Technika "Onion skinning"

Ustawianie zakresu klatek używanych w technice "Onion skinning"

Edycja wielu klatek

Ustawienia i opcje eksportu

Usuwanie klatek

Zapętlanie

Eksportowanie animacji za pomocą okna dialogowego Export Preview

Wykorzystywanie animowanych GIF-ów w projektach internetowych

Animowanie obrazków tła

Wielokrotne wykorzystywanie animacji

Skalowanie animacji

Wykorzystywanie tła przeglądarki w obrazku

Wstępne ładowanie animacji

Animowane rollovery

Plastrowanie animacji

Sekwencjonowanie symboli graficznych

Technika Fireworks: sekwencjonowanie Xtra

Technika Fireworks: sekwencjonowanie głębi

Symbole animacyjne

Tworzenie symboli animacyjnych

Modyfikowanie symbolu animacyjnego

Zmiany ustawień animacji

Wykorzystanie palety Object

Modyfikacja ścieżki ruchu

Przekształcanie na symbol graficzny

Usuwanie symbolu

Modyfikowanie grafiki symbolu

Podsumowanie

Document Info

Comenteaza documentul:

A fost util?

Podstawowe wiadomości
o animacjach sieciowych

Zestaw narzędzi Fireworks
do tworzenia animacji