Rozdział 9.

Tworzenie animowanych
obrazów

Myślę, że na jakiś czas masz już dosyć kodowania, a zatem, w tym rozdziale odpoczniesz od pisania na klawiaturze i nauczysz się operować na pikselach! Animowane grafiki dodają blasku i zwiększają siłę wyrazu stron WWW, a przy tym, ich tworzenie wcale nie jest tak trudne jak można przypuszczać. Używając odpowiedniego oprogramowania, można tworzyć własne animowane grafiki, z których będziesz mógł korzystać przy tworzeniu stron WWW. W tym rozdziale zdobędziesz podstawowe informacje dotyczące tworzenia animowanych grafik. A zatem przygotuj się aby:

• przyjrzeć się poszczególnym klatkom animowanych GIF-ów i określić co sprawia, że sprawiają one wrażenie, jak gdyby się ruszały,

• dowiedzieć się gdzie i kiedy należy umieszczać animacje na stronach WWW,

• dowiedzieć się, jak należy tworzyć przezroczyste GIF-y i jak wybrać przezroczysty kolor,

• poznać narzędzia używane do edycji grafik i tworzenia obrazów GIF, których będziesz mógł użyć do kreowania animowanych GIF-ów,

• określić cechy i możliwości programów graficznych, które mogą się przydać,

• dowiedzieć się, w jaki sposób kompilować i zmniejszać wielkość animowanych plików GIF,

• nauczyć się tworzenia własnych klatek, które wykorzystasz w swej pierwszej animacji.

Czym jest animacja?

Wyobraź sobie, że posiadasz plik rysunków, ułożonych jeden po drugim. Każdy rysunek jest nieco inny od poprzedniego, a wszystkie są ułożone w ściśle określonym porządku. Szybko przerzucając kartki z poszczególnymi rysunkami, możesz odnieść wrażenie ruchu. Szybkość animacji zmienia się, w zależności do tempa przewracania kartek z poszczególnymi rysunkami.

W zasadzie plik animacji (niezależnie od tego czy jest to animowany GIF, plik Windows AVI, film Quick Time, czy też plik MPEG) nie jest niczym więcej niż wirtualną książeczką z rysunkami. Kilka rysunków, które zazwyczaj mają tę samą wielkość, jest zwykle umieszczanych w ściśle określonym porządku. Służy do tego oprogramowanie, które w taki czy inny sposób, generuje skrypt. Skrypt ten zostaje „wbudowany” w plik animacji i definiuje parametry jej działania, takie jak: szybkość, z jaką mają być wyświetlane poszczególne rysunki (czyli szybkość animacji), sposób, w jaki rysunki mają być na siebie nakładane, itp. A zatem, zamiast grupy plików, z których każdy należałoby indywidualnie otwierać i wyświetlać, uzyskujesz jeden plik, zawierający wiele ramek, odtwarzanych sekwencyjnie w sposób przypominający wyświetlanie filmu.

Zapewne widziałeś animację tańczącego dziecka, które błyskawicznie zyskało wielką popularność w Internecie. Po przejrzeniu zasobów Internetu, twórca serialu telewizyjnego Ally McBeal odnalazł tańczące dziecko i postanowił wykorzystać ten pomysł w filmie. „Baby Cha” zostało stworzone dzięki wspólnym staraniom firm Viewpoint Datalabs (która opracowała model dziecka) oraz Kinetix — działowi firmy Autodesk (twórcy programów 3D Studio Max oraz dodatku Character Studio). Jeśli przez przypadek nie widziałeś „Baby Cha”, to koniecznie odwiedź witrynę firmy Kinetix, a znajdziesz w niej doskonałe przykłady, pokazujące, w jaki sposób animacje mogą przyciągnąć zainteresowanie i skoncentrować je na witrynie WWW. Wszystkie animacje zostały zapisane w formacie Video for Windows AVI (upewnij się, że używana przeglądarka WWW jest w stanie obsługiwać te pliki), a ściągnięcie niektórych spośród nich, może chwilę potrwać. Niemniej jednak warto chwile poczekać i zobaczyć je. Animacje te możesz znaleźć pod adresem http://www.punchbaby.com/clip_baby.htm --> [Author:p8R] .

Na rysunku 9.1 możesz zobaczyć odpowiednik „Baby Cha”. Tańczący szympans także został stworzony przy użyciu programów 3D Studio Max oraz Character Studio, czyli tych samych, które zostały wykorzystane przy tworzeniu „ Baby Cha”. Na rysunku przedstawiłam jedynie 30 klatek animacji (zrenderowałam co piątą klatkę, tak aby na rysunku mogła się zmieścić cała sekwencja). Wszystkie klatki przedstawione na rysunku tworzą sekwencję, zaczynającą się od lewego, górnego wierzchołka rysunku i kończącą w jego prawym, dolnym rogu. Zwróć uwagę, iż każda klatka animacji różni się nieco od pozostałych. Odtwarzając sekwencję wszystkich klatek, można zobaczyć szympansa, który obraca się i podskakuje, jednocześnie unosząc i opuszczając lewe ramię.

Rysunek 9.1. Trzydzieści ramek animacji tańczącego szympansa

Odtwarzając te obrazki sekwencyjnie jeden po drugim, uzyskuje się efekt ruchu. Wizerunki tworzące animacje nie zawsze muszą się zmieniać tak płynnie, jak w tym przykładzie. W sekwencji można także wyświetlać grupę dowolnych obrazów, takich jak zdjęcia bądź paski reklamowe. W ten sposób można uzyskać animację przypominającą pokaz slajdów czy też prezentację.

Kiedy i gdzie używać animacji

„Baby Cha” oraz tańczący szympans są atrakcyjne, ale niezbyt praktyczne. A zatem, do czego można używać animacji na stronach WWW?

Jako regułę powinieneś przyjąć, iż animacji należy używać w celu zwrócenia na coś uwagi osoby oglądającej stronę. Zbyt wiele animacji dekoncentruje i zmniejsza zainteresowanie stroną. Użytkownik nie będzie bowiem wiedział, na co najpierw należy spojrzeć, a jego uwaga może zostać odwrócona od najważniejszych informacji umieszczonych na stronie. A zatem, animacji należy używać stosunkowo rzadko i w odpowiedni sposób. Przede wszystkim nie należy umieszczać na jednej stronie WWW zbyt wielu animacji, może to bowiem sprawić, że będzie się bardzo długo ładowała.

Poniżej przedstawiłam podstawowe zastosowania animacji.

• Reklamy. Dla niektórych osób reklamy są denerwujące i czasami starają się ich unikać. Jeśli jednak witryna jest sponsorowana przez jakąś organizację lub chciałbyś zwrócić uwagę oglądających ją osób na własne produkty lub zdolności, to wykorzystanie reklam jest standardowym rozwiązaniem.

• Animowane wypunktowania. Animowane wypunktowania są znacznie bardziej interesujące od zwyczajnych list, należy jednak starać się, aby były subtelne. Jeśli lista składa się z wielu punktów (powyżej 10), to wykorzystanie animowanych wypunktowań może rozpraszać uwagę użytkownika.

• Linie poziome. Często można zobaczyć cienkie linie animowanych gradientów, używane jako poziome linie umieszczane na stronach WWW. Można jednak tworzyć znacznie bardziej interesujące elementy graficzne tego typu — linię składającą się z klawiszy fortepianu i grających na nich nutek, Amorka strzelającego z łuku, dwóch graczy odbijających piłeczkę tenisową tam i z powrotem, rekina pływającego od jednego skraju strony do drugiego lub cokolwiek innego, co tylko pasuje do tematyki strony. Staraj się jednak utrzymać wymiary animacji w rozsądnych granicach, gdyż w przeciwnym przypadku rozmiar jej pliku stanie się zbyt duży.

• Animowane logo. Animowane logo na stronie głównej może przyciągnąć uwagę do Twej firmy lub produktu. Jeśli logo jest duże, to można podzielić je na kilka części, a w jednej z nich umieścić animację. Poszczególne części logo można następnie umieści w tabeli z niewidocznymi obramowaniami, dzięki czemu na stronie zostaną one wyświetlone jako jedna grafika.

• Ikony. Animacja może być bardzo efektywna, jako sposób zwrócenia uwagi na konkretne miejsce strony WWW. Możesz umieścić animowaną kopertę lub skrzynkę pocztową tuż obok adresu poczty elektronicznej, błyskający napis „Nowe!” koło ważnej informacji, dzwoniący telefon obok swojego numeru telefonu, płonące ognisko obok bardzo interesującego hiperłącza i tak dalej.

Tworzenie przezroczystych obrazów GIF

Bez wątpienia spotkałeś się już z obrazami, które wydawały się „pływać” na stronie WWW. W odróżnieniu od obrazów wyświetlanych w kształcie prostokątów, przezroczyste obrazy GIF zazwyczaj mają nieregularne kształty, a tło, na którym zostały umieszczone, jest widoczne.

W zależności od oprogramowania używanego do stworzenia lub skompilowania pliku, przezroczyste tło można także tworzyć w animowanych obrazach GIF. Niektóre programy kompilujące animowane GIF-y pozwalają zdefiniować przezroczysty kolor podczas kompilowania animacji, inne natomiast nie dają takich możliwości. W zależności od tego można zastosować dwa sposoby tworzenia animowanych obrazów GIF.

• Jeśli program używany do tworzenia animacji pozwala na globalne określenie koloru przezroczystego w całym rysunku lub w jego poszczególnych klatkach, to będziesz mógł określić ten kolor jeszcze przed zapisaniem animacji w pliku.

• Jeśli program używany do tworzenia animacji nie daje możliwości globalnego określenia koloru przezroczystego, to będziesz musiał określić go indywidualnie dla każdego obrazu tworzącego animację. Następnie powinieneś zapisać każdy obraz GIF z określonym przezroczystym kolorem na dysku i zaimportować do programu używanego do tworzenia animowanych GIF-ów. Wykreowanie animacji w taki sposób zabiera nieco więcej czasu, ale za to masz pewność, że zadziała.

Wybór przezroczystego koloru

Oto, jak działają przezroczyste GIF-y. Zazwyczaj w tym celu używane są obrazy, które poza obszarami, jakie mają być widoczne, mają jednolite tło. Kolor tego tła zostaje następnie określony w danym obrazie jako kolor „przezroczysty”. Jeśli tworzysz animację z myślą o stronie WWW, która posiada obraz tła, to twórz lub wybieraj obrazy GIF, których kolor tła jest zbliżony do koloru tła strony, na przykład, jeśli tłem strony jest czarne, rozgwieżdżone niebo, to przezroczysty GIF powinien mieć jednolite, czarne tło. Jeśli natomiast strona ma delikatne, pastelowe tło, to obraz GIF powinien mieć białe lub bardzo delikatne tło.

Dlaczego to takie ważne? Wiele programów graficznych wykorzystuje rozpraszanie do „wygładzenia” wyglądu pionowych i krzywych linii. Jeśli umieścisz czarną linię na średnim lub ciemnym tle, to wokół niej będzie widoczna jaśniejsza obwódka, wyraźnie odcinająca się od reszty strony. A zatem, najlepiej jest rozpocząć tworzenie obrazu od wyboru tła, które kolorem lub odcieniem jest zbliżone do tła strony, na której obraz zostanie umieszczony.

Nowy termin Rozpraszanie (ang. antialiasing) to procedura, za pomocą której zmiękcza się agresywny wygląd kontrastowych obrazów generowanych przez komputer. W tym celu miesza się barwy oryginalnych, kontrastujących kolorów, aby uzyskać pośrednio zabarwione piksele. Na przykład, jeśli wyświetlasz czarną linię na białym tle, to program graficzny może wygładzić jej wygląd, wstawiając na krawędziach różne odcienie szarości.

Praktyczne wykorzystanie rozpraszania przedstawiłam na rysunku 9.2. Przedstawiony na nim obrazek został stworzony na białym tle. Można zauważyć piksele o jasnych kolorach oraz jasną obwódkę na rysunku wyświetlonym na czarnym tle, widocznym po lewej stronie. Oczywiście to skrajny przypadek, jednak dobrze ilustruje sposób, w jaki rozpraszanie może wpłynąć na wygląd przezroczystych obrazów GIF.

Rysunek 9.2. Antyaliasing może czasami powodować wyświetlenie obwódki wokół przezroczystych obrazów GIF

Jeśli tworzysz swoje własne przezroczyste obrazy GIF, pamiętaj, aby nie używać koloru tła w żadnej innej części rysunku, za wyjątkiem tych, które mają być przeźroczyste. To ważne i w pełni uzasadnione, gdyż po określeniu koloru przezroczystego, każdy piksel o tym kolorze stanie się przezroczysty. Jeśli jakikolwiek obszar rysunku będzie miał ten sam kolor, to w Twym dziele mogą pojawić się niezaplanowane i niepożądane dziury.

A co zrobić, jeśli w obrazie chcesz użyć tego samego koloru, który został wybrany jako kolor przezroczysty? Załóżmy, że tworzysz rysunek z białym tłem, jednak chciałbyś, aby także oczy rysowanych postaci były białe. Rozwiązanie jest bardzo proste. Wystarczy użyć czystego, białego koloru (czerwony: 255, zielony: 255, niebieski: 255) jako tła oraz prawie białego koloru (czerwony: 255, zielony: 255, niebieski: 250) do narysowania oczu. Oba kolory wyglądają niemal identycznie, jednak dla programu graficznego są to zupełnie inne kolory. A zatem, oczy rysowanych postaci pozostaną białe.

Programy umożliwiające kompilację animowanych GIF-ów

Załóżmy, że wybrałeś lub stworzyłeś serię obrazów, które chcesz umieścić w poszczególnych klatkach animacji. Kolejnym etapem jest skompilowanie niezależnych obrazów do postaci jednego animowanego pliku. Dostępnych jest bardzo wiele programów umożliwiających tworzenie animowanych obrazów GIF, przeznaczonych do umieszczania na stronach WWW. Animowane GIF-y stały się tak popularne, iż kilka komercyjnych i shareware-owych programów graficznych zostało wyposażonych we wbudowane narzędzia do ich tworzenia, między innymi, w narzędzie do tworzenia animowanych GIF-ów, zostały wyposażone programy Paint Shop Pro 5.0 oraz Ulead PhotoImpact — bardzo popularne programy graficzne działające w systemie Windows 95/98. Oba programy zostaną bardziej szczegółowo opisane w dalszej części rozdziału, w podrozdziale „Narzędzia pomocne przy tworzeniu obrazów”.

Nawet programy służące do tworzenia prezentacji, takie jak Microsoft PowerPoint, pozwalają na tworzenie i zapisywanie prezentacji w formie animowanych obrazów GIF, które, na przykład, mogą być wykorzystywane jako reklamy.

Choć niemal wszystkie programy graficzne pozwalają na tworzenie GIF-ów, to jednak nie wszystkie są w stanie tworzyć animowane pliki GIF. I przeciwnie, są takie programy, które pozwalają tworzyć animowane pliki GIF, lecz nie dają możliwości tworzenia samych obrazów. Jeśli jesteś zwolennikiem programów graficznych, które nie mają możliwości tworzenia animowanych GIF-ów, to i tak nie musisz się przejmować. Poniżej przedstawiłam kilka programów umożliwiających kompilację animowanych plików GIF.

GIF Construction Set (dla systemów Windows)

Jednym z najbardziej popularnych programów shareware'owych, umożliwiających tworzenie animowanych GIF-ów i działających w systemie Windows, jest program GIF Construction Set firmy Alchemy Mindworks (dostępny w wersjach przeznaczonych dla systemów Windows 3.1 oraz Windows 95/NT). Cena tego programu nie jest wygórowana, a dzięki kreatorowi animacji w jaki został wyposażony, tworzenie animowanych GIF-ów jest wyjątkowo szybkie. Proces tworzenia animacji odbywa się poprzez wybór plików metodą „przeciągnij i upuść”. Bardzo bogate możliwości programu pozwalają, między innymi, na wybór palety, określenie koloru przezroczystego, wykorzystywanie efektów przejść, określanie opóźnień czasowych, konwersję klipów wideo zapisanych w formie plików AVI do postaci animowanych plików GIF.

Wersje programu przeznaczone dla systemów Windows 3.1 oraz Windows 95/NT można skopiować z witryny firmy Alchemy Mindworks (http://www.mindworkshop.com/alchemy/ gifcon.html). Na witrynie można także znaleźć wiele przykładów.

GifBuilder (dla systemu Macintosh)

Bardzo popularnym programem działającym w systemie Macintosh jest GifBuilder, napisany przez Yvesa Puqueta. Ten dostępny bezpłatnie program daje możliwości wykorzystania skryptów i wstawiania obrazów zapisanych w kilku różnych formatach. Można w nim modyfikować istniejące animowane pliki GIF oraz importować kolekcje obrazów zapisanych w formatach GIF, TIFF, PICT oraz PSD (wykorzystywanych w programie Photoshop). Program pozwala także na importowanie animacji zapisanych w kilku innych formatach, takich jak QuickTime, PICS, Adobe Premiere FilmStrip 1.0 oraz klatki z obrazów Adobe Photoshop 3.0 zapisane w kolorze lub w różnych odcieniach szarości. Aktualnie dostępna jest wersja 0.5 programu, która, między innymi, wyświetla ikony ramek w oknie Frames, umożliwia wykorzystanie filtrów, efektów przejść oraz przycinanie animacji.

Stronę domową programu można znaleźć pod adresem http://homepage.mac.com/piguet/gif.html.

Ćwiczenie 9.1. Kompilacja animacji

W tym ćwiczeniu skompilujemy 10 obrazów tworzących animację odbijającej się piłki. Obrazy zostały zapisane w plikach o nazwach od ball01.tga do ball10.tga. W dalszej części rozdziału pokażę, w jaki sposób obrazy te zostały stworzone.

Animację skompiluję przy użyciu programu PhotoImpact GIF Animator. Jeśli używasz innego programu graficznego działającego w systemie Windows, który jednak nie dysponuje możliwością tworzenia animowanych plików GIF, to możesz skopiować program ULead PhotoImpact GIF Animator z witryny WWW Web Utilities prowadzonej przez firmę ULead (http://www.webutilities.com/ga/ga_main.htm).

Konkretne polecenia oraz terminologia zastosowana w programie, którego używasz, może być nieco inna, jednak zasady na pewno będą takie same. Każdy kompilator animowanych obrazów GIF pyta, jakie obrazy mają zostać umieszczone w animacji, w jakiej kolejności należy je ułożyć, jakie mają być odstępy czasowe pomiędzy poszczególnymi klatkami i tak dalej. Jeśli program, którego używasz, dysponuje kreatorem lub innym narzędziem wspomagającym proces tworzenia animacji, tym lepiej.

Aby skompilować animowany plik GIF przy użyciu programu GIF Animator, należy wykonać następujące czynności.

1. Jeśli skopiowałeś z Internetu próbną wersję programu GIF Animator, to kliknij przycisk Start i wybierz z menu opcję ProgramyULead GIF Animator 5GIF Animator. Gdy na ekranie pojawi się okno dialogowe Startup Wizard, wybierz opcję FileAnimation Wizard.

2. W pierwszym oknie dialogowym określ wymiary, jakie będzie posiadała tworzona animacja. W tym celu w polu Width podaj jej szerokość, a w polu Height jej wysokość. (Obie wartości są wyrażone w pikselach.). Kliknij przycisk Dalej, aby przejść do kolejnego okna dialogowego kreatora.

3. W drugim oknie dialogowym wybierz pliki, które chcesz umieścić w animacji. Kliknij przycisk Add Image, po czym odszukaj dysk i folder, w którym zapisałeś swoje obrazy. W wyświetlonym oknie dialogowym Otwieranie możesz wybierać tylko pojedyncze pliki, aby zaznaczyć za jednym razem całą grupę plików, które utworzą animację, kliknij przycisk Browse. W wyświetlonym oknie dialogowym kliknij nazwę ostatniego z nich (ball10.tga), a następnie wciśnij klawisz Shift i kliknij nazwę pierwszego (ball01.tga). Kliknij przycisk OK, a następnie przycisk Open, spowoduje to umieszczenie wybranych plików na liście. (Z jakiegoś powodu, gdy najpierw zaznaczysz nazwę pierwszego pliku, a potem ostatniego, to po wstawieniu do listy kolejność plików zostaje zamieniona. Niech to będzie przykładem, dlaczego warto zapisywać pliki w ponumerowanej sekwencji. Jeśli pliki na liście zostaną umieszczone w niewłaściwej kolejności, zawsze będziesz mógł ją zmienić posługując się metodą „przeciągnij i upuść”.)

4. Kliknij przycisk Dalej, aby przejść do następnego okna dialogowego — Frame Duration. Należy w nim określić, jak długo będzie wyświetlany każdy obraz, nim na jego miejscu pojawi się następny. Szybkość animacji możesz określić podając długość okresu czasu, przez który będzie wyświetlana każda klatka (wyrażony w setnych sekundy) lub ilość klatek wyświetlanych w czasie sekundy. Jeśli zmienisz jedną z tych wartości, druga zostanie odpowiednio zmodyfikowana. Pewne wyobrażenie o szybkości wyświetlania poszczególnych klatek może Ci dać obszar podglądu, w którym, z wybraną przez Ciebie prędkością, są wyświetlane kolejne cyfry. Po podaniu wartości, której chcesz użyć (w ty przypadku określiłam, że szybkość ma wynosić 0,15 sekundy, co odpowiada 7 klatkom na sekundę), kliknij przycisk Dalej.

5. To jest to! Animator Wizard wyświetli kilka informacji dotyczących sposobu utworzenia animacji. Jedyne co Ci pozostaje do zrobienia, to kliknięcie przycisku Zakończ. Gdy Animation Wizard utworzy plik animacji, zostanie on wyświetlony w oknie programu (patrz rysunek 9.3).

Rysunek 9.3. Wszystkie pliki tworzące animację zostają zapisane w formie jednego pliku

6. Aby zobaczyć animację, kliknij zakładkę Preview umieszczoną poniżej paska narzędzi. Przejście na dowolną z pozostałych dwóch zakładek Edit lub Optimize przerywa odtwarzanie animacji.

Teraz znasz już podstawowe etapy tworzenia i kompilacji animowanych plików GIF. Każdy program umożliwiający tworzenie animowanych GIF-ów udostępnia dodatkowe możliwości, które warto wypróbować. Jeśli poświęciłeś trochę czasu na skopiowanie z Internetu programu ULead GIF Animator, to, wykorzystując jego możliwości, będziesz mógł dodawać do animacji efekty przejścia tekstu, przejścia kolorów, dodatkowe efekty specjalne oraz wzbogacać ją na wiele innych sposobów. Możliwość wykorzystania takich opcji zależy jednak wyłącznie od używanego programu, dlatego też wszelkie dodatkowe eksperymenty pozostawiam Tobie.

Optymalizacja redukuje wielkość plików animacji, dzięki temu możliwe jest skrócenie czasu ich pobierania z Internetu. Choć nie wszystkie programy używane do tworzenia animowanych GIF-ów dysponują tymi samymi narzędziami optymalizacji, to jednak poznanie metod działania tych narzędzi jest bardzo przydatne i warto je poznać. Analizując sposoby optymalizacji, można bowiem określić metody ograniczania wielkości animowanych plików GIF. W celach demonstracyjnych przedstawię teraz nieco bardziej skomplikowaną animację.

Ograniczanie wielkości animacji

Czy pamiętasz animację tańczącego szympansa, którą przedstawiłam na początku tego rozdziału? Jeszcze zanim zrenderowałam poszczególne klatki animacji, poczyniłam pewne założenia co do wielkości pliku. Miałam bowiem na względzie wielkość wynikowego pliku animacji oraz czas konieczny do jego skopiowania i wyświetlenia w przeglądarce.

Tworząc animację, przede wszystkim, miałam na względzie wielkość pliku. Zdawałam sobie sprawę z tego, iż jeśli plik animacji będzie mniejszy, to czas konieczny do jego skopiowania będzie krótszy. Z tego względu wypróbowałam wiele różnych wielkości i w końcu zdecydowałam, że animacja będzie miała wymiary 115x120 pikseli. Jeśli bym się zdecydowała na stworzenie animacji o jeszcze mniejszych wymiarach, to trudno byłoby rozpoznać, że przedstawia ona szympansa.

Kolejnym zagadnienie, które wzięłam pod uwagę tworząc animację, była ilość ramek. Także w tym przypadku odpowiednią ilość ramek trzeba było określić eksperymentalnie. Szympans został stworzony przy użyciu programu, używanego zazwyczaj do generacji klipów wideo. Standardowa szybkość filmów wideo w USA wynosi około 30 klatek na sekundę. Jednak w przypadku animacji tworzonych na potrzeby Internetu tak wysoka szybkość jest całkowicie niepraktyczna, gdyż czas konieczny do skopiowania pliku animacji były niesłychanie długi. Całkiem rozsądnym rozwiązaniem jest stworzenie animacji o prędkości wahającej się pomiędzy 10 a 15 klatkami na sekundkę, choć w niektórych przypadkach można zastosować nawet mniejsze prędkości. Z tego względu, zdecydowałam się ograniczyć ilość ramek wyświetlanych na sekundę do 6 i zrenderowałam co piątą klatkę animacji.

Teraz jednak musiałam zmodyfikować szybkość odtwarzania pliku animacji, aby zrównoważyć zmniejszoną ilość ramek. W przypadku animacji wyświetlanych z szybkością 30 ramek na sekundę, każda z ramek jest widoczna przez około 3,33 setne sekundy. Jeśli pomnożymy tę wartość razy 5 (gdyż zrenderowałam co piątą klatkę animacji) okaże się, że aby szympans tańczył z poprawną prędkością, każda z ramek mojej animacji musi być wyświetlana przez około 0,16 sekundy.

Jak na razie ograniczyłam wielkość animacji, redukując jej rozmiary oraz ilość klatek. Kolejnym sposobem zmniejszenia wielkości animowanego pliku GIF jest redukcja ilości kolorów. Pliki GIF zawierają zazwyczaj 256 kolorów, chyba że ich twórca wybrał inną ilość. Można jednak zmniejszyć ilość kolorów w palecie, co jednocześnie powoduje zmniejszenie wielkości pliku. W tabeli 9.1 przedstawiłam wpływ zmniejszenia wielkości palety kolorów na czas pobierania animacji (przy wykorzystaniu modemu 28.8 Kbps). Wynikowe pliki zostały utworzone przy wyłączonej opcji zastosowania rozpraszania, co zazwyczaj wpływa na zmniejszenie wielkości plików animacji.

Tabela 9.1. Redukcja ilości kolorów w palecie animacji szympansa.

Ilość kolorów	Wielkość pliku	Czas pobierania (przy szybkości 28.8 Kbps)
paleta 256-kolorowa	54654 bajty	23 sekundy
zredukowana do 128 kolorów	50290 bajtów	17 sekund
zredukowana do 64 kolorów	41637 bajtów	15 sekund
zredukowana do 32 kolorów	34772 bajty	13 sekund
zredukowana do 16 kolorów	28324 bajty	10 sekund

Przy 16 kolorach animowany szympans wciąż wyglądał całkiem rozsądnie, choć w niektórych klatkach wokół niego pojawiały się błyski. Z tego względu zdecydowałam, że wersja 32-kolorowa stanowi najlepszy kompromis pomiędzy wyglądem animacji a czasem jej pobierania. Redukując ilość kolorów w palecie, udało mi się zmniejszyć plik o 20 kB, a czas pobierania o 10 sekund (przy założeniu, że będzie wykorzystywane połączenie o prędkości 28.8 Kbps). Całkiem nieźle! A jak się możesz przekonać, patrząc na rysunek 9.4, bohater animacji wciąż wygląda jak szympans.

Rysunek 9.4 Zmniejszenie ilości kolorów w naszej animacji do 32 powoduje zmniejszenie wielkości pliku o prawie 30 kB, a jej wygląd jest wciąż możliwy do przyjęcia

Ćwiczenie 9.2. Optymalizacja animacji

Aktualnie każda klatka animacji odbijającej się piłki ma pełną paletę kolorów (określaną także czasami jako „paleta True Color”). Wynika to z faktu, iż w skład animacji weszły 24-bitowe pliki Targa (TGA). Jest wysoce nieprawdopodobne, aby w takiej prostej animacji zostały wykorzystane wszystkie 256 kolory, a zatem, zmniejszając ilość kolorów w palecie, będzie można skrócić czas jej pobierania.

Zobacz w jaki sposób optymalizacja kolorów wpływa na wielkość pliku animacji składającej się z 10 ramek o wymiarach 300x100 pikseli. Przyjrzyj się tabeli 9.2 i sprawdź różnice wielkości pliku animacji po redukcji ilości kolorów dostępnych w palecie. Podane czasy pobierania animacji zakładają, iż wykorzystany będzie modem o prędkości transmisji 28,8 Kbps.

Tabela 9.2. Redukcja ilości kolorów w palecie animacji piłki.

Ilość kolorów	Wielkość pliku	Czas pobierania (przy szybkości 28,8 kb/s)
paleta 256-kolorowa	9476 bajtów	3 sekundy
zredukowana do 128 kolorów	8765 bajtów	3 sekundy
zredukowana do 64 kolorów	8148 bajtów	2 sekundy
zredukowana do 32 kolorów	6971 bajtów	2 sekundy
zredukowana do 16 kolorów	5552 bajty	1 sekunda

Redukcja czasu pobierania animacji o dwie sekundy może nie wydaje się duża, jednak gdy na stronie umieszczonych jest kilka obrazów, to każdy bajt ich wielkości ma znacznie. W przypadku animacji odbijającej się piłki w zupełności wystarczy nam paleta składająca się z 16 kolorów. Wykorzystanie 32-bitowej palety daje co prawda nieco lepszy efekt, jednak czy naprawdę ta różnica w jakości jest warta dodatkowego 1,5 kB wielkości pliku? Musisz to ocenić sam, pamiętaj przy tym, iż podjęta decyzja będzie także zależeć od znaczenia, jakie animacja ma na stronie. W przypadku animacji o fotograficznej jakości, których poszczególne klatki różnią się delikatnymi zmianami kolorów, zbytnie ograniczenie wielkości palety nie da oszałamiających rezultatów. W takich przypadkach, jedynym sposobem zmniejszenia wielkości wynikowego pliku animacji jest ograniczenie ilości ramek oraz ich wymiarów.

Poniżej opisałam czynności, jakie należy wykonać w programie ULead GIF Animator, aby zmniejszyć ilość kolorów.

1. Wybierz opcję FileOptimization Wizard lub naciśnij klawisz F11. Na ekranie pojawi się pierwsze okno dialogowe narzędzia Optimization Wizard.

2. Otrzymasz propozycję, czy utworzyć „globalną paletę zoptymalizowaną” (Global Optimized palette) dla danej animacji. Zazwyczaj jest to dobry pomysł, gdyż można w ten sposób wybrać najlepsze kolory ze wszystkich ramek animacji. Opcji tej nie należy jednak wybierać w przypadku, gdy kolory używane w poszczególnych klatkach animacji drastycznie się różnią (na przykład, gdy przedstawiają one błyskające światła, wykorzystują efekty przejść, itd.). Zazwyczaj jednak, dzięki wybraniu tej opcji można uzyskać mniejsze pliki animacji. Gdy wybierzesz opcję Yes (Recommended), aby utworzyć globalną paletę animacji, kliknij przycisk Dalej.

3. Optimization Wizard zapyta, ile kolorów należy umieścić w globalnej palecie animacji. W polu Number of Colors wpisz 32. Następnie, w polu Dither value, podaj wartość, jakiej należy użyć przy określaniu rozpraszania. W przypadku obrazów o jakości fotograficznej wartość ta powinna być większa, a w przypadku animacji tekstowych — mniejsza. Kliknij przycisk Dalej, aby przejść do następnego okna dialogowego.

4. Tam zostaną wyświetlone dwie opcje mające wpływ na wielkość pliku animacji. Pierwsza z opcji pozwala określić, czy należy usuwać powtarzające się piksele. Jeśli jakiś piksel wyświetlanej klatki animacji jest taki sam, jak w poprzedniej ramce, to czy nie lepiej będzie wykorzystać go, zamiast ponownie wyświetlać? Wybierz opcję Yes (Recommended) zaznaczoną domyślnie, aby usuwać powtarzające się piksele.

Następnie zostaniesz zapytany, czy należy usunąć bloki komentarzy. Do plików GIF można dodawać komentarze, takie jak: nazwy, uwagi, itp. Należy przy tym pamiętać, iż powodują one zwiększenie wielkości pliku. Jeśli nie potrzebujesz komentarzy, to wybierz opcję Yes (Recommended) domyślnie zaznaczoną, aby je usunąć.

Kliknij przycisk Dalej, aby przejść do następnego okna dialogowego.

5. W kolejnym oknie dialogowym zostają wyświetlone wszystkie wybrane do tej pory opcje, dzięki czemu możesz je jeszcze raz przejrzeć. Jeśli wybrałeś odpowiednie i nie chcesz ich zmieniać, to kliknij przycisk Zakończ, aby zoptymalizować animację. Okno dialogowe przedstawione na rysunku 9.5 prezentuje uzyskane oszczędności w wielkości i czasie pobierania animacji. Jeśli chcesz, to klikając przycisk Preview, możesz wyświetlić okienko podglądu animacji. Jeśli wyświetliłeś podgląd animacji, to zamknij jego okno, klikając przycisk X widoczny w jego prawym, górnym rogu.

Rysunek 9.5. Narzędzie wyświetla wyniki optymalizacji i pokazuje uzyskane oszczędności

6. Po zapoznaniu się z wynikami optymalizacji, zapisz animację, klikając przycisk Save As umieszczony z prawej strony okna dialogowego GIF Optimization.

Narzędzia pomocne przy tworzeniu obrazów

„Baby Cha” oraz tańczący szympans to przykłady demonstrujące możliwości, jakie można uzyskać dzięki wykorzystaniu najlepszych dostępnych programów służących do tworzenia animacji. Nie musisz jednak popadać w desperację. W rzeczywistości, aby tworzyć animacje na potrzeby stron WWW, nie będziesz potrzebował drogiego oprogramowania. Istnieje kilka godnych uwagi programów graficznych rozprowadzanych jako shareware, dostępnych w całkiem rozsądnych cenach. Zanim kupisz te programy, możesz je skopiować z Internetu i przetestować ich możliwości. Jeśli jednak wolisz korzystać z oprogramowania komercyjnego i doceniasz zalety posiadania drukowanej instrukcji, to też znajdziesz coś dla siebie — istnieje bowiem kilka pakietów graficznych dostępnych w sprzedaży detalicznej, cechujących się dużymi możliwościami i rozsądną ceną.

We wcześniejszej części rozdziału wspominałam, że jednym z najpopularniejszych programów graficznych, działających w systemach Windows 95/98 oraz Windows NT, jest program Paint Shop Pro 5.0. Program ten, dostępny zarówno jako shareware, jak i w sprzedaży detalicznej, został wyposażony w kompilator animowanych plików GIF o nazwie Animation Shop. Narzędzie to, krok po korku przeprowadza użytkownika przez cały proces tworzenia animacji, dzięki czemu staje się on szybki i prosty. Możliwości tego narzędzia są bardzo podobne do możliwości programu ULead GIF Animator, którego we wcześniejszej części rozdziału użyłam do stworzenia dwóch animacji. Aktualną wersję programu Paint Shop Pro (oraz Animation Studio) można znaleźć na witrynie WWW pod adresem http://www.jasc.com/product.asp?pf_id=001.

ULead PhotoImpact (http://www.ulead.com/pi/runme.htm) jest edytorem graficznym dostępnym w sprzedaży detalicznej, wyposażonym w wiele możliwości edycji obrazów i tworzenia animacji. We wcześniejszej części rozdziału przedstawiłam już możliwości programu GIF Animator, dostarczanego wraz z programem PhotoImpact. 30-dniowe, demonstracyjne wersje obu programów można skopiować z witryny WWW firmy ULead.

Na witrynie CNET można znaleźć demonstracyjne i shareware'owe wersje programów należących niemal do wszystkich możliwych kategorii. Dział witryny — Download.com — przedstawiony na rysunku 9.6, zapewnia łatwy dostęp do informacji o niemal wszystkich dostępnych programach komputerowych. Niektóre z programów dostępnych na tej witrynie to wersje programów dostępnych w sprzedaży posiadające ograniczone możliwości funkcjonalne lub limitowany czas działania, natomiast inne to programy shareware'owe o pełnych możliwościach, które można wypróbować przed zakupem. Bez trudu, na podstawie ilości pobranych z witryny kopii programów, można ocenić, które z nich cieszą się największą popularnością. Niemniej jednak, w opisach większości programów można znaleźć wyczerpującą listę możliwości, którą można przeanalizować przed kliknięciem przycisku rozpoczynającego pobieranie programu.

Rysunek 9.6. Witryna CNET Download.com pozwala na skopiowanie wielu programów służących do edycji obrazów oraz tworzenia animacji

W poszukiwaniu programów służących do kreowania animacji, edycji obrazów oraz tworzenia wszelkiego rodzaju plików multimedialnych, należy przejrzeć kategorię Multimedia and Design witryny Download.com dla odpowiedniej platformy sprzętowej (PC lub Macintosh). Programy przeznaczone dla komputerów PC można znaleźć pod adresem:

http://www.download.com/pc/fdoor/0,322,0,0.html?st.dl.mfd.platforms.fd.

natomiast użytkownicy komputerów Macintosh mogą znaleźć interesujące ich programy pod adresem:

http://www.download.com/mac/fdoor/0,322,0,0.html?st.dl.mfd.platforms.fd.

Ewentualnie można także odwiedzić witrynę CNET poświęconą programom shareware'owym: http://www.shareware.com/ lub dział Web Building poświęcony tworzeniu stron WWW: http://builder.cnet.com/webbuilding/0-3880.html?tag=bl. Witryna Shareware.com pozwala na wybór interesującego Cię programu spośród ponad 250 tysięcy dostępnych programów shareware-owych. Natomiast dział Web Building witryny CNET koncentruje się na narzędziach związanych z WWW.

Przydatne możliwości programów

Nie wszystkie programy graficzne dysponują takimi samymi możliwościami, a co więcej, jest ich tak wiele, że czasami trudno zdecydować, który jest najlepszy. Niemniej jednak można wyróżnić kilka cech programów świadczących o ich przydatności, zwłaszcza jeśli chodzi o tworzenie animacji prezentowanych na stronach WWW. Poniżej podałam kilka zaleceń dotyczących możliwości, jakie powinien posiadać program graficzny.

• Możliwość otwierania, tworzenia oraz zapisywania obrazów w wielu różnych formatach. Najważniejsza jest, oczywiście, możliwość tworzenia i zapisywania obrazów w formatach GIF i JPEG, gdyż to one są głównie wykorzystywane na stronach WWW.

• Możliwość redukcji ilości kolorów w 256-kolorowych obrazach GIF. Jak się dowiedziałeś we wcześniejszej części rozdziału, zapisanie obrazu wykorzystującego tylko 3 lub 4 kolory przy użyciu palety 256-kolorowej, prowadzi do zmarnowania bardzo wielu bajtów.

• Możliwość operowania na zaznaczonych fragmentach obrazu, obiektach oraz warstwach. Dzięki możliwości operowania na zaznaczonych fragmencie obrazu, będziesz mógł wprowadzać w nim modyfikacje, a jednocześnie pozostałe fragmenty obrazu nie ulegną zmianie. Obiekty to „pływające” elementy obrazu, których położenie i wielkość można, w razie konieczności, łatwo zmieniać, tak aby pasowały do kompozycji całego obrazu. Warstwy pozwalają natomiast wyświetlać określone obiekty „ponad” lub „poniżej” innych obiektów tworzących obraz.

• Możliwość zapisywania obrazów posiadających obszary przezroczyste. Ta możliwość jest szczególnie ważna, jeśli chcesz tworzyć przezroczyste obrazy GIF, które wydają się „pływać” ponad stroną WWW. Byłoby optymalnie, gdyby możliwości te posiadał także program używany do kreowania animowanych plików GIF.

Kiedy już znajdziesz program graficzny, który będzie Ci odpowiadał, pozostałe czynniki są nieco trudniejsze — będziesz bowiem potrzebował wprawnego oka oraz bardzo wiele cierpliwości i kreatywności.

Ćwiczenie 9.3. Tworzenie ramek animacji odbijającej się piłki

Do stworzenia przykładowych animacji przedstawionych w tym rozdziale zdecydowałam się użyć programu ULead PhotoImpact. Jeśli jednak posługujesz się innym programem graficznym, to i tak nie masz się czym przejmować, gdyż omawiane pojęcia są zazwyczaj takie same. Choć obsługa nowego programu może stanowić wyzwanie, to jednak powinieneś sobie poradzić i wykonać podobny przykład w programie graficznym, którego używasz. Moim zamiarem jest przedstawienie pomysłów oraz możliwości funkcjonalnych, w jakie powinien być wyposażony program graficzny. Jeśli program, na którym pracujesz, umożliwia wykonywanie operacji na zaznaczonych fragmentach obrazów oraz wypełnianie gradientowe, to stworzenie animacji odbijającej się piłki powinno być stosunkowo proste.

Tworzenie animacji najprościej jest rozpocząć od fragmentów, które w poszczególnych klatkach pozostaną takie same. Aby zacząć tworzenie animacji odbijającej się piłki, stwórz obraz o wymiarach 300x100 pikseli, w 24-bitowej palecie kolorów (True Color) i z białym tłem. (W każdym programie graficznym, praca z pełną paletą kolorów daje możliwość wykorzystania wszelkich dostępnych efektów graficznych.) Używając narzędzia Paint (trzeci przycisk od dołu umieszczony na pasku narzędzi wyświetlonym z lewej strony okna programu), narysuj niebo i ziemię (patrz rysunek 9.7).

Rysunek 9.7. Tworzenie animacji rozpocznij od narysowania tła oraz innych elementów które nie będą ulegały zmianie w poszczególnych klatkach

Opis Click to select brush shape — Kliknij tutaj, aby określić kształt pędzla Paint tool — Narzędzie Paint Click to … Color Picker — Kliknij tutaj, aby wybrać kolor w oknie Color Picker Adjust … — Zmień wielkość pędzla Color Picker — Okno dialogowe Color Picker

Większość programów graficznych umożliwia określenie wielkości pędzla używanego do rysowania. W programie PhotoImpact, posługując się przyciskami dostępnymi na pasku narzędzi wyświetlonym u góry okna programu (patrz rysunek 9.7), można określić zarówno wielkość jak i kolor pędzla. Dostępna jest także opcja pozwalająca na odtwarzanie jednej lub kilku ostatnio wykonanych czynności. Możesz z niej skorzystać, jeśli to, co narysowałeś nie przypadnie Ci do gustu. Wystarczy wybrać opcję EditUndo Before. Ostatnia wykonana czynność zostanie wyświetlona na samym początku listy.

Jak na razie wszystko było łatwe, prawda? Kolejnym etapem będzie stworzenie piłki. W tym celu będziesz musiał narysować okrąg i wypełnić jego wnętrze kolorowym gradientem. To kolejna możliwość powszechnie dostępna w bardzo wielu programach graficznych. W programie PhotoImpact można to zrobić w bardzo prosty sposób. Utwórz kolejny obraz o pełnej palecie kolorów i wymiarach 40x40 pikseli. Kolor tła nie ma w tym przypadku większego znaczenia, gdyż i tak docelowo tło będzie przezroczyste, zatem na razie może być białe. Wybierz narzędzie Selection i zmień jego kształt na okrąg (opcja Circle). Zaznaczanie obszaru o kształcie okręgu powinieneś rozpocząć od lewego, górnego rogu niewielkiego obrazu. Następnie przeciągnij wskaźnik myszy w kierunku prawego, dolnego rogu obrazu, tak aby został w nim wykreślony okrąg. Teraz możesz zwolnić przycisk myszy. Wokół okręgu pojawi się niebieska i czerwona, ruchoma linia przerywana. Oznacza ona, iż zaznaczony obszar jest aktywny (patrz rysunek 9.8).

Rysunek 9.8. W drugim, niewielkim obrazie zaznacz obszar o kształcie okręgu

Opis Selection… — Narzędzie Selection Choose … — Określ kształt zaznaczanego obszaru, wybierając opcję Circle

Teraz będziesz musiał wypełnić zaznaczony obszar gradientem. Jeśli używasz innego programu graficznego, to czynności, jakie będziesz musiał w tym celu wykonać, będą zapewne inne. Wypełnianie gradientowe jest zazwyczaj dostępne jako jedna z opcji poleceń Paint Bucket lub Fill. W programie PhotoImpact, należy wybrać opcję Elliptical Gradient Fill (w tym celu kliknij i przytrzymaj wciśnięty przycisk Fill, co spowoduje wyświetlenie rozwijalnego menu, z którego będziesz mógł wybrać opcję Elliptical Gradient Fill). Jako metodę wypełniania wybierz opcje Two-Color, a następnie, jako skrajne kolory gradientu wybierz kolor czerwony i czarny.

Teraz umieść wskaźnik narzędzia Fill (wypełnienie) w miejscu, w którym tworzona piłka ma być czerwona, na przykład, umieść wskaźnik na prawo i powyżej środka piłki. Następnie kliknij lewy przycisk myszy i przeciągnij jej wskaźnik, tak aby obrys wypełnienia gradientowego objął całą piłkę (patrz rysunek 9.9). Gdy zwolnisz przycisk myszy, powstanie śliczna, trójwymiarowa piłka.

Rysunek 9.9. Aby wypełnić zaznaczony obszar użyj dwukolorowego wypełnienia gradientowego

Opis Choose Two-Color… — Jako metodę wypełnienia wybierz opcję Two-Color Outer color… — Zewnętrzny kolor gradientu (czarny) Inner color… — Wewnętrzny kolor gradientu (czerwony) Elliptical… — Narzędzie Elliptical Gradient Fill

Nadeszła wreszcie kolej, aby umieścić piłkę na ziemi. Zadanie to jest bardzo proste. Rysowana piłka wciąż jest zaznaczona, a zatem, wystarczy nacisnąć kombinację klawiszy Ctrl+C, aby ją skopiować do Schowka. Teraz przejdź do obrazu zawierającego tło animacji (kliknij pasek tytułowy okna obrazu, a zostanie on uaktywniony) i naciśnij kombinację klawiszy Ctrl+V — w ten sposób zaznaczona piłka zostanie wklejona jako obiekt do obrazu zawierającego tło. Na pasku narzędzi, wyświetlonym z lewej strony okna programu, wybierz narzędzie Pick (wybór) i umieść skopiowaną piłkę w lewym, górnym wierzchołku obrazu, jak pokazałam na rysunku 9.10.

Rysunek 9.10. Skopiuj piłkę i wklej ją na rysunku tła

Opis Pick tool — Narzędzie Pick

Tworząc animację, zazwyczaj zapisuję jej poszczególne klatki w formacie True Color, a określenie najlepszej palety kolorów dla wszystkich ramek pozostawiam programowi używanemu do tworzenia animowanych plików GIF. Jednak nie zawsze można zastosować to rozwiązanie, na przykład, jeśli chcesz dodać do animacji obszary przezroczyste, to niektóre programy wymuszają ograniczenie wielkości palety do 256 kolorów, a dopiero potem pozwalają na określenie koloru przezroczystego i zapisanie obrazu pliku GIF.

Animacja odbijającej się piłki nie ma jednak żadnych obszarów przezroczystych, a palety kolorów zazwyczaj są lepsze, jeśli obrazy od samego początku są tworzone w formacie Tue Color. Aby zapisać pierwszą klatkę animacji, wybierz opcje FileSave As. W polu Save As Type wybierz opcje TGA (Targa File Format), jak pokazałam na rysunku 9.11. Nadaj plikowi nazwę, którą będziesz mógł łatwo zapamiętać, na przykład: ball01.tga. Pamiętaj także, aby nazwę zakończyć odpowiednią liczbą cyfr, umożliwiającą zapisanie całkowitej ilości ramek, które wejdą w skład animacji. Na przykład, aby stworzyć animację składającą się z 10 ramek, pierwszemu plikowi nadaj nazwę ball01.tga, a w nazwach kolejnych plików umieszczaj sekwencyjnie coraz wyższe numery, kończąc na pliku ball10.tga.

Rysunek 9.11. Zapisz pierwszą klatkę animacji w pliku i zakończ jego nazwę liczbą

Notatka

Zapisując obrazy w programie PhotoImpact, zobaczymy na ekranie ostrzeżenie informujące, że obiekty zostaną połączone z tłem. Możesz jednak kliknąć przycisk Yes i kontynuować, gdyż o ile tylko, podczas tworzenia kolejnych ramek, oryginalny obraz wciąż będzie otworzony, to piłka będzie traktowana jako obiekt, który bez trudu będziesz mógł przesuwać. Jeśli jednak, na wszelki wypadek, będziesz chciał zapisać kopię obrazu w taki sposób, aby piłka była traktowana jako obiekt, to zapisz ją w formacie UFO (ULead File for Objects) lub w innym formacie charakterystycznym dla używanego programu graficznego, jeśli tylko daje on możliwość obsługi obiektów.

Aby stworzyć kolejną klatkę animacji, wybierz narzędzie Pick i przesuń piłkę nieco ku dołowi i w prawo, tak jak pokazałam na rysunku 9.12. Zapisz obraz w pliku o nazwie ball02.tga.

Rysunek 9.12. Tworząc następną klatkę, użyj narzędzia Pick, aby przesunąć piłkę i zapisz obraz w pliku, nadając mu nową nazwę

Rozumiesz już ideę? Tworząc kolejne klatki animacji, należy przesuwać piłkę, imitując jej odbicia w pionie i przesunięcie od lewej do prawej strony obrazka. W ten sposób stwórz pozostałe klatki animacji, tak aby piłka dotarła do prawego brzegu obrazka. Zapisz je w sekwencyjnie ponumerowanych plikach. Na ostatniej ramce piłka ma być niewidoczna, a zatem usuń ją, naciskając klawisz Delete. Następnie zapisz ostatnią klatkę animacji w pliku. Na rysunku 9.13 przedstawiłam dodatkowe klatki, jakie wejdą w skład tworzonej animacji odbijającej się piłki. Wszystkie klatki zmniejszyłam o połowę, dzięki czemu zmieściły się one w oknie programu i można zobaczyć, w jaki sposób poszczególne klatki różnią się od siebie.

Rysunek 9.13. W podobny sposób stwórz kolejne klatki animacji i zapisz je w plikach o kolejnych numerach

Podsumowanie

Mam nadzieję, że wykonanie ćwiczeń zamieszczonych w tym rozdziale stanowiło miłą, odprężającą przerwę. Te proste przykłady powinny nauczyć Cię podstawowych pojęć, które pomogą Ci w dalszej pracy. Nie popadaj w zniechęcenie, jeśli nie będziesz w stanie stworzyć doskonałej animacji już za pierwszym razem — to wymaga nieco praktyki. Wystarczy próbować, a w końcu osiągniesz zamierzony efekt. Warto także poznawać możliwości używanego oprogramowania. W każdym programie można zastosować jakieś sztuczki, dzięki którym tworzenie grafiki i animacji staje się znacznie prostsze.

Warsztat

W tej części rozdziału przedstawię najważniejsze zagadnienia dotyczące tworzenia animacji prezentowanych na stronach WWW oraz kilka dodatkowych ćwiczeń, dzięki którym będziesz mógł poprawić swoje umiejętności tworzenia animacji.

Pytania i odpowiedzi

16. Chciałbym, aby odtwarzanie mojego animowanego GIF-a zatrzymało się na końcu, po czym, po chwili, ponownie się rozpoczęło. Jak to zrobić?

15. Większość kompilatorów animowanych plików GIF pozwala na indywidualne określenie czasu wyświetlania każdej klatki animacji. A zatem, wystarczy wybrać ostatnią klatkę animacji i powiększyć czas, w którym będzie widoczna. Na przykład, aby klatka była widoczna przez sekundę wpisz wartość 100 (setnych sekundy). Pozostałe klatki animacji będą odtwarzane z oryginalną prędkością, natomiast ostatnia z nich będzie widoczna przez sekundę, następnie animacja zostanie odtworzona od początku.

16. Czy mogę stworzyć animowane tło strony WWW?

15. Tak, jednak nie jest to najlepszy pomysł. Choć animowane chmury lub migające gwiazdy wydają się być doskonałym pomysłem, to jednak będą rozpraszały uwagę osoby oglądającej stronę i utrudnią skoncentrowanie jej na umieszczonych na niej informacjach. Pamiętaj, jakie elementy strony są najistotniejsze i staraj się używać animacji w taki sposób, aby dodatkowo je wyeksponować.

16. W jaki sposób można tworzyć animacje w innych formatach, takich jak Video for Windows (AVI), QuickTime lub MPEG?

15. Proces tworzenia takich animacji jest bardzo podobny. Wciąż będziesz musiał stworzyć każdą klatkę animacji, jednak dodatkowo będzie Ci potrzebny program, który potrafi zapisywać animacje w wybranym formacie.

Quiz

1. Czym różni się animowany plik GIF od normalnego pliku GIF?

2. W jaki sposób najłatwiej jest rozpocząć tworzenie animacji?

3. Podaj trzy sposoby ograniczania czasu koniecznego do pobrania pliku animacji.

4. Dlaczego zapisywanie poszczególnych klatek animacji w plikach o nazwach zakończonych kolejnymi numerami jest dobrym rozwiązaniem?

5. Jaki jest najlepszy sposób wykorzystania animacji na stronach WWW?

Odpowiedzi

1. Animowany plik GIF zawiera wiele obrazów zapisanych w jednym pliku. Obrazy te są odtwarzane sekwencyjnie, dając wrażenie ruchu.

2. Tworzenie animacji najłatwiej jest rozpocząć od narysowania tych fragmentów obrazu, które nie będą się zmieniać w poszczególnych klatkach.

3. Wielkość pliku animacji można zmniejszyć, ograniczając wymiary obrazów, ilość klatek animacji oraz ilość użytych kolorów.

4. W niektórych programach używanych do tworzenia animacji, podczas dodawania kilku obrazów jednocześnie, kolejność w jakiej zostaną one zapisane w animacji może być zmieniana. Umieszczając w nazwach obrazów kolejne liczby, bez trudu można określić, czy zostały one dodane w odpowiedniej kolejności.

5. Najlepszym sposobem wykorzystania animacji jest użycie ich w celu zwrócenia uwagi osoby oglądającej stronę WWW na jej najistotniejsze fragmenty.

Ćwiczenia

1. Teraz, kiedy już wiesz, w jaki sposób stworzyć proste wrażenie ruchu, spróbuj zrobić coś trudniejszego. Narysuj prostą twarz, która będzie mrugać okiem, a jej wyraz będzie się zmieniał ze smutnego na wesoły.

2. Stwórz tekstową reklamę. Spróbuj animować tekst, zmieniając w poszczególnych klatkach jego kolor bądź położenie lub oba te elementy jednocześnie.

2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)

2 D:\Dokumenty\HELION\HTML\Tekst\HTML po jezykowej\+R-09MP.doc

Ups - nie byłem w stanie znaleźć tych animacji.

---