Rozdział 9. u Tworzenie animowanych obrazów 243
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:
n przyjrzeć się poszczególnym klatkom animowanych GIF-ów i określić co sprawia, że sprawiają one wrażenie, jak gdyby się ruszały,
n dowiedzieć się gdzie i kiedy należy umieszczać animacje na stronach WWW,
n dowiedzieć się, jak należy tworzyć przezroczyste GIF-y i jak wybrać przezroczysty kolor,
n 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,
n określić cechy i możliwości programów graficznych, które mogą się przydać,
n dowiedzieć się, w jaki sposób kompilować i zmniejszać wielkość animowanych plików GIF,
n nauczyć się tworzenia własnych klatek, które wykorzystasz w swej pierwszej animacji.
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.
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ę.
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ę.
„Baby Cha” oraz tańczący szympans są atrakcyjne, ale niezbyt praktyczne. A zatem, do czego można używać animacji na stronach WWW?
Rysunek 9.1.
Trzydzieści ramek animacji tańczącego szympansa
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.
n 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.
n 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.
n 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.
n 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.
n 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.
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.
n 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.
n 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.
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.
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.
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.
Jednym z najbardziej popularnych programów typu shareware, 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.
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.
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.
PannaZWilka