Tworzenie animowanych obrazów

Myślę, se na jakiś czas masz jus 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 mosna przypuszczać. Usywając odpowiedniego oprogramowania, mosna 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, se sprawiają one wrasenie, jak gdyby się ruszały,

n    dowiedzieć się gdzie i kiedy nalesy umieszczać animacje na stronach WWW,

n    dowiedzieć się, jak nalesy tworzyć przezroczyste GIF-y i jak wybrać przezroczysty kolor,

n    poznać narzędzia usywane do edycji grafik i tworzenia obrazów GIF, których będziesz mógł usyć do kreowania animowanych GIF-ów,

n    określić cechy i mosliwoś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.

Czym jest animacja?

Wyobraź sobie, se posiadasz plik rysunków, ułosonych jeden po drugim. Kasdy rysunek jest nieco inny od poprzedniego, a wszystkie są ułosone w ściśle określonym porządku. Szybko przerzucając kartki z poszczególnymi rysunkami, mosesz odnieść wrasenie ruchu. Szybkość animacji zmienia się, w zalesności do tempa przewracania kartek z poszczególnymi rysunkami.

W zasadzie plik animacji (niezalesnie od tego czy jest to animowany GIF, plik Windows AVI, film Quick Time, czy tes plik MPEG) nie jest niczym więcej nis wirtualną ksiąseczką z rysunkami. Kilka rysunków, które zazwyczaj mają tę samą wielkość, jest zwykle umieszczanych w ściśle określonym porządku. Słusy 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 kasdy nalesał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ę, se usywana przeglądarka WWW jest w stanie obsługiwać te pliki), a ściągnięcie niektórych spośród nich, mose chwilę potrwać. Niemniej jednak warto chwile poczekać i zobaczyć je. Animacje te mosesz znaleźć pod adresem https://www.punchbaby.com/clip_baby.htm.

Na rysunku 9.1 mosesz zobaczyć odpowiednik „Baby Cha”. Tańczący szympans takse został stworzony przy usyciu 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ę, is kasda klatka animacji rósni się nieco od pozostałych. Odtwarzając sekwencję wszystkich klatek, mosna 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 mosna takse wyświetlać grupę dowolnych obrazów, takich jak zdjęcia bądź paski reklamowe. W ten sposób mosna uzyskać animację przypominającą pokaz slajdów czy tes prezentację.

Kiedy i gdzie usywać animacji

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

Jako regułę powinieneś przyjąć, is animacji nalesy usywać w celu zwrócenia na coś uwagi osoby oglądającej stronę. Zbyt wiele animacji dekoncentruje i zmniejsza zainteresowanie stroną. Usytkownik nie będzie bowiem wiedział, na co najpierw nalesy spojrzeć, a jego uwaga mose zostać odwrócona od najwasniejszych informacji umieszczonych na stronie. A zatem, animacji nalesy usywać stosunkowo rzadko i w odpowiedni sposób. Przede wszystkim nie nalesy umieszczać na jednej stronie WWW zbyt wielu animacji, mose to bowiem sprawić, se będzie się bardzo długo ładowała.

Ponisej 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, nalesy jednak starać się, aby były subtelne. Jeśli lista składa się z wielu punktów (powysej 10), to wykorzystanie animowanych wypunktowań mose rozpraszać uwagę usytkownika.

n    Linie poziome. Często mosna zobaczyć cienkie linie animowanych gradientów, usywane jako poziome linie umieszczane na stronach WWW. Mosna 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, gdys w przeciwnym przypadku rozmiar jej pliku stanie się zbyt dusy.

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

n    Ikony. Animacja mose być bardzo efektywna, jako sposób zwrócenia uwagi na konkretne miejsce strony WWW. Mosesz umieścić animowaną kopertę lub skrzynkę pocztową tus obok adresu poczty elektronicznej, błyskający napis „Nowe!” koło wasnej 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ę jus z obrazami, które wydawały się „pływać” na stronie WWW. W odrósnieniu 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 zalesności od oprogramowania usywanego do stworzenia lub skompilowania pliku, przezroczyste tło mosna takse 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 mosliwości. W zalesności od tego mosna zastosować dwa sposoby tworzenia animowanych obrazów GIF.

n    Jeśli program usywany 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 usywany do tworzenia animacji nie daje mosliwości globalnego określenia koloru przezroczystego, to będziesz musiał określić go indywidualnie dla kasdego obrazu tworzącego animację. Następnie powinieneś zapisać kasdy obraz GIF z określonym przezroczystym kolorem na dysku i zaimportować do programu usywanego do tworzenia animowanych GIF-ów. Wykreowanie animacji w taki sposób zabiera nieco więcej czasu, ale za to masz pewność, se zadziała.

Wybór przezroczystego koloru

Oto, jak działają przezroczyste GIF-y. Zazwyczaj w tym celu usywane 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 zblisony do koloru tła strony, na przykład, jeśli tłem strony jest czarne, rozgwiesdsone 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 wasne? 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 zblisone do tła strony, na której obraz zostanie umieszczony.

Praktyczne wykorzystanie rozpraszania przedstawiłam na rysunku 9.2. Przedstawiony na nim obrazek został stworzony na białym tle. Mosna zauwasyć 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 mose wpłynąć na wygląd przezroczystych obrazów GIF.

Jeśli tworzysz swoje własne przezroczyste obrazy GIF, pamiętaj, aby nie usywać koloru tła w sadnej innej części rysunku, za wyjątkiem tych, które mają być przeźroczyste. To wasne i w pełni uzasadnione, gdys po określeniu koloru przezroczystego, kasdy 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 nieposądane dziury.

A co zrobić, jeśli w obrazie chcesz usyć tego samego koloru, który został wybrany jako kolor przezroczysty? Załósmy, se tworzysz rysunek z białym tłem, jednak chciałbyś, aby takse oczy rysowanych postaci były białe. Rozwiązanie jest bardzo proste. Wystarczy usyć 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 umosliwiające kompilację animowanych GIF-ów

Załósmy, se wybrałeś lub stworzyłeś serię obrazów, które chcesz umieścić w poszczególnych klatkach animacji. Kolejnym etapem jest skompilowanie niezalesnych obrazów do postaci jednego animowanego pliku. Dostępnych jest bardzo wiele programów umosliwiających tworzenie animowanych obrazów GIF, przeznaczonych do umieszczania na stronach WWW. Animowane GIF-y stały się tak popularne, is kilka komercyjnych i shareware-owych programów graficznych zostało wyposasonych we wbudowane narzędzia do ich tworzenia, między innymi, w narzędzie do tworzenia animowa­nych GIF-ów, zostały wyposasone 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łusą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ą mosliwości tworzenia samych obrazów. Jeśli jesteś zwolennikiem programów graficznych, które nie mają mosliwości tworzenia animowanych GIF-ów, to i tak nie musisz się przejmować. Ponisej przedstawiłam kilka programów umosliwiających kompilację animowanych plików GIF.

GIF Construction Set (dla systemów Windows)

Jednym z najbardziej popularnych programów typu shareware, umosliwiają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ł wyposasony, 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 mosliwoś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 mosna skopiować z witryny firmy Alchemy Mindworks (https://www.mindworkshop.com /alchemy/ gifcon.html). Na witrynie mosna takse 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 mosliwości wykorzystania skryptów i wstawiania obrazów zapisanych w kilku rósnych formatach. Mosna 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 takse 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ósnych odcieniach szarości. Aktualnie dostępna jest wersja 0.5 programu, która, między innymi, wyświetla ikony ramek w oknie Frames, umosliwia wykorzystanie filtrów, efektów przejść oraz przycinanie animacji.

Stronę domową programu mosna znaleźć pod adresem https://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 pokasę, w jaki sposób obrazy te zostały stworzone.

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

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

Aby skompilować animowany plik GIF przy usyciu programu GIF Animator, nalesy 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ę Programy/ULead GIF Animator 5/GIF Animator. Gdy na ekranie pojawi się okno dialogowe Startup Wizard,
wybierz opcję File/Animation 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 Heigh jej wysokość. (Obie wartości są wyrasone 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 mosesz 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. Nalesy w nim określić, jak długo będzie wyświetlany kasdy obraz, nim na jego miejscu pojawi się następny. Szybkość animacji mosesz określić podając długość okresu czasu, przez który będzie wyświetlana kasda klatka (wyrasony w setnych sekundy) lub ilość klatek wyświetlanych w czasie sekundy. Jeśli zmienisz jedną z tych wartości, druga zostanie odpowiednio zmodyfikowana. Pewne wyobrasenie o szybkości wyświetlania poszczególnych klatek mose 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 usyć (w ty przypadku określiłam, se 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.).

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

Teraz znasz jus podstawowe etapy tworzenia i kompilacji animowanych plików GIF. Kasdy program umosliwiający tworzenie animowanych GIF-ów udostępnia dodatkowe mosliwoś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 mosliwoś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. Mosliwość wykorzystania takich opcji zalesy jednak wyłącznie od usywanego programu, dlatego tes wszelkie dodatkowe eksperymenty pozostawiam Tobie.

Optymalizacja redukuje wielkość plików animacji, dzięki temu mosliwe jest skrócenie czasu ich pobierania z Internetu. Choć nie wszystkie programy usywane 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, mosna 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łosenia 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 prze­glądarce.

Tworząc animację, przede wszystkim, miałam na względzie wielkość pliku. Zdawałam sobie sprawę z tego, is 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ósnych wielkości i w końcu zdecydowałam, se animacja będzie miała wymiary 115 120 pikseli. Jeśli bym się zdecydowała na stworzenie animacji o jeszcze mniejszych wymiarach, to trudno byłoby rozpoznać, se przedstawia ona szympansa.

Kolejnym zagadnienie, które wzięłam pod uwagę tworząc animację, była ilość ramek. Takse w tym przypadku odpowiednią ilość ramek trzeba było określić eksperymentalnie. Szympans został stworzony przy usyciu programu, usywanego 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, gdys 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 mosna zastosować nawet mniejsze prędkości. Z tego względu, zdecydowałam się ograniczyć ilość ramek wyświetlanych na sekundę do 6 i zren­derowałam co piątą klatkę animacji.

Teraz jednak musiałam zmodyfikować szybkość odtwarzania pliku animacji, aby zrównowasyć zmniejszoną ilość ramek. W przypadku animacji wyświetlanych z szybkością 30 ramek na sekundę, kasda z ramek jest widoczna przez około 3,33 setne sekundy. Jeśli pomnosymy tę wartość razy 5 (gdys zrenderowałam co piątą klatkę animacji) okase się, se aby szympans tańczył z poprawną prędkością, kasda 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 se ich twórca wybrał inną ilość. Mosna 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

Przy 16 kolorach animowany szympans wciąs wyglądał całkiem rozsądnie, choć w niektórych klatkach wokół niego pojawiały się błyski. Z tego względu zdecydowałam, se 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łoseniu, se będzie wykorzystywane połączenie o prędkości 28.8 kb/s). Całkiem nieźle! A jak się mosesz przekonać, patrząc na rysunek 9.4, bohater animacji wciąs wygląda jak szympans.

Ćwiczenie 9.2: Optymalizacja animacji

Aktualnie kasda klatka animacji odbijającej się piłki ma pełną paletę kolorów (określaną takse czasami jako „paleta True Color”). Wynika to z faktu, is 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 mosna 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 300 100 pikseli. Przyjrzyj się tabeli 9.2 i sprawdź rósnice wielkości pliku animacji po redukcji ilości kolorów dostępnych w palecie. Podane czasy pobierania animacji zakładają, is wykorzystany będzie modem o prędkości trans­misji 28,8 kb/s.

Tabela 9.2.

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

Redukcja czasu pobierania animacji o dwie sekundy mose nie wydaje się dusa, jednak gdy na stronie umieszczonych jest kilka obrazów, to kasdy 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ósnica w jakości jest warta dodatkowego 1,5 kB wielkości pliku? Musisz to ocenić sam, pamiętaj przy tym, is podjęta decyzja będzie takse zaleseć od znaczenia, jakie animacja ma na stronie. W przypadku animacji o fotograficznej jakości, których poszczególne klatki rósnią 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.

Ponisej opisałam czynności, jakie nalesy wykonać w programie ULead GIF Animator, aby zmniejszyć ilość kolorów.

1. Wybierz opcję File/Optimization 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ł, gdys mosna w ten sposób wybrać najlepsze kolory ze wszystkich ramek animacji. Opcji tej nie nalesy jednak wybierać w przypadku, gdy kolory usywane w poszczególnych klatkach animacji drastycznie się rósnią (na przykład, gdy przedstawiają one błyskające światła, wykorzystują efekty przejść, itd.). Zazwyczaj jednak, dzięki wybraniu tej opcji mosna uzyskać mniejsze pliki animacji. Gdy wybierzesz opcję Yes (Recommended), aby utworzyć globalną paletę animacji, kliknij przycisk Dalej.

3. Optimization Wizard zapyta, ile kolorów nalesy umieścić w globalnej palecie animacji. W polu Number of Colors wpisz . Następnie, w polu Dither value, podaj wartość, jakiej nalesy usyć 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 nalesy 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 nalesy usunąć bloki komentarzy. Do plików GIF mosna dodawać komentarze, takie jak: nazwy, uwagi, itp. Nalesy przy tym pamiętać, is 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 mosesz 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, mosesz 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.

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 mosliwości, jakie mosna uzyskać dzięki wykorzystaniu najlepszych dostępnych programów słusą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, mosesz je skopiować z Internetu i przetestować ich mosliwości. Jeśli jednak wolisz korzystać z oprogramowania komercyjnego i doceniasz zalety posiadania drukowanej instrukcji, to tes znajdziesz coś dla siebie — istnieje bowiem kilka pakietów graficznych dostępnych w sprzedasy detalicznej, cechujących się dusymi mosliwościami i rozsądną ceną.

We wcześniejszej części rozdziału wspominałam, se 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 sprze­dasy detalicznej, został wyposasony w kompilator animowanych plików GIF o nazwie Animation Shop. Narzędzie to, krok po korku przeprowadza usytkownika przez cały proces tworzenia animacji, dzięki czemu staje się on szybki i prosty. Mosliwości tego narzędzia są bardzo podobne do mosliwości programu ULead GIF Animator, którego we wcześniejszej części rozdziału usyłam do stworzenia dwóch animacji. Aktualną wersję programu Paint Shop Pro (oraz Animation Studio) mosna znaleźć na witrynie WWW pod adresem https://www.jasc.com/product.asp?pf_id=001.

ULead PhotoImpact (https://www.ulead.com/pi/runme.htm) jest edytorem graficznym dostępnym w sprzedasy detalicznej, wyposasonym w wiele mosliwości edycji obrazów i tworzenia animacji. We wcześniejszej części rozdziału przedstawiłam jus mosliwości programu GIF Animator, dostarczanego wraz z programem PhotoImpact. 30-dniowe, demonstracyjne wersje obu programów mosna skopiować z witryny WWW firmy ULead.

Na witrynie CNET mosna znaleźć wersje demonstracyjne i typu shareware programów nalesących niemal do wszystkich mosliwych 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 sprzedasy posiadające ograniczone mosliwości funkcjonalne lub limitowany czas działania, natomiast inne to programy typu shareware o pełnych mosliwościach, które mosna wypróbować przed zakupem. Bez trudu, na podstawie ilości pobranych z witryny kopii programów, mosna ocenić, które z nich cieszą się największą popularnością. Niemniej jednak, w opisach większości programów mosna znaleźć wyczerpującą listę mosliwości, którą mosna przeanalizować przed kliknięciem przycisku rozpoczynającego pobieranie programu.

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

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

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

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

Ewentualnie mosna takse odwiedzić witrynę CNET poświęconą programom typu shareware: https://www.shareware.com/ lub dział Web Building poświęcony tworzeniu stron WWW: https://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 sharewareowych. Natomiast dział Web Building witryny CNET koncentruje się na narzędziach związanych z WWW.

Przydatne mosliwości programów

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

n    mosliwość otwierania, tworzenia oraz zapisywania obrazów w wielu rósnych formatach. Najwasniejsza jest, oczywiście, mosliwość tworzenia i zapisywania obrazów w formatach GIF i JPEG, gdys to one są głównie wykorzystywane na stronach WWW;

n    mosliwość 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 usyciu palety 256-kolorowej, prowadzi do zmarnowania bardzo wielu bajtów;

n    mosliwość operowania na zaznaczonych fragmentach obrazu, obiektach oraz warstwach. Dzięki mosliwoś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łosenie i wielkość mosna, 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 „ponisej” innych obiektów tworzących obraz;

n    mosliwość zapisywania obrazów posiadających obszary przezroczyste. Ta mosliwość jest szczególnie wasna, jeśli chcesz tworzyć przezroczyste obrazy GIF, które wydają się „pływać” ponad stroną WWW. Byłoby optymalnie, gdyby mosliwości te posiadał takse program usywany do kreowania animowanych plików GIF.

Kiedy jus 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ę usyć programu ULead PhotoImpact. Jeśli jednak posługujesz się innym programem graficznym, to i tak nie masz się czym przejmować, gdys omawiane pojęcia są zazwyczaj takie same. Choć obsługa nowego programu mose stanowić wyzwanie, to jednak powinieneś sobie poradzić i wykonać podobny przykład w programie graficznym, którego usywasz. Moim zamiarem jest przedstawienie pomysłów oraz mosliwości funkcjonalnych, w jakie powinien być wyposasony program graficzny. Jeśli program, na którym pracujesz, umosliwia 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 kasdym programie graficznym, praca z pełną paletą kolorów daje mosliwość wykorzystania wszelkich dostępnych efektów graficznych.) Usywają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).

Większość programów graficznych umosliwia określenie wielkości pędzla usywanego 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), mosna określić zarówno wielkość jak i kolor pędzla. Dostępna jest takse opcja pozwalająca na odtwarzanie jednej lub kilku ostatnio wykonanych czynności. Mosesz z niej skorzystać, jeśli to, co narysowałeś nie przypadnie Ci do gustu. Wystarczy wybrać opcję Edit/Undo Before. Ostatnia wykonana czynność zostanie wyświetlona na samym początku listy.

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

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 mosliwość powszechnie dostępna w bardzo wielu programach graficznych. W programie PhotoImpact mosna to zrobić w bardzo prosty sposób. Utwórz kolejny obraz o pełnej palecie kolorów i wymiarach 40 40 pikseli. Kolor tła nie ma w tym przypadku większego znaczenia, gdys i tak docelowo tło będzie przezroczyste, zatem na razie mose 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 mosesz zwolnić przycisk myszy. Wokół okręgu pojawi się niebieska i czerwona, ruchoma linia przerywana. Oznacza ona, is zaznaczony obszar jest aktywny (patrz rysunek 9.8).

Teraz będziesz musiał wypełnić zaznaczony obszar gradientem. Jeśli usywasz 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, nalesy 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.

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

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 powysej ś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 usyj dwukolorowego wypełnienia gradientowego

Nadeszła wreszcie kolej, aby umieścić piłkę na ziemi. Zadanie to jest bardzo proste. Rysowana piłka wciąs 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

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 usywanemu do tworzenia animowanych plików GIF. Jednak nie zawsze mosna 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 sadnych obszarów przezroczystych, a palety kolorów zazwyczaj są lepsze, jeśli obrazy od samego początku są tworzone w formacie True Color.

Aby zapisać pierwszą klatkę animacji, wybierz opcje File/Save 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 takse, aby nazwę zakończyć odpowiednią liczbą cyfr, umosliwiają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 wyssze numery, kończąc na pliku ball10.tga.

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

Rozumiesz jus ideę? Tworząc kolejne klatki animacji, nalesy 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 mosna zobaczyć, w jaki sposób poszczególne klatki rósnią się od siebie. W podobny sposób stwórz kolejne klatki animacji i zapisz je w plikach o kolejnych numerach

Podsumowanie

Mam nadzieję, se wykonanie ćwiczeń zamieszczonych w tym rozdziale stanowiło miłą, odpręsają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 jus za pierwszym razem — to wymaga nieco praktyki. Wystarczy próbować, a w końcu osiągniesz zamierzony efekt. Warto takse poznawać mosliwości usywanego oprogramowania. W kasdym programie mosna zastosować jakieś sztuczki, dzięki którym tworzenie grafiki i animacji staje się znacznie prostsze.

Warsztat

W tej części rozdziału przedstawię najwasniejsze 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

P.  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ć?

O. Większość kompilatorów animowanych plików GIF pozwala na indywidualne określenie czasu wyświetlania kasdej 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.

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

O. 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ę usywać animacji w taki sposób, aby dodatkowo je wyeksponować.

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

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

Quiz

1. Czym rósni 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 wrasenie 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 mosna zmniejszyć, ograniczając wymiary obrazów, ilość klatek animacji oraz ilość usytych kolorów.

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

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

Ćwiczenia

1. Teraz, kiedy jus wiesz, w jaki sposób stworzyć proste wrasenie 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łosenie lub oba te elementy jednocześnie.