R 09 07, HTML
[ Pobierz całość w formacie PDF ]
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 rysun
kami.
224
Część 3.
Grafika na WWW
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
.
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 ta
Kiedy
i gdzie używać animacji
„Baby Cha” oraz tańczący szympans są atrakcyjne, ale niezbyt praktyczne. A zatem, do
zego można używać animacji na stronach WWW?
kż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ę.
c
Rozdział 9.
Tworzenie animowanych obrazów
225
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 zainte-
resowanie stroną. Użytkownik nie będzie bowiem wiedział, na co najpierw należy spoj-
rzeć, a jego uwaga może zostać odwrócona od najważniejszych informacji umieszczo-
nych 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ę lu
zwrócić uwagę oglądających ją osób na własne produkty lub
to wykorzystanie reklam jest standardowym rozwiązaniem.
b chciałbyś
zdolności,
Animowane wypunktowania
. Animowane wypunktowania są znacznie bardzi
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
ej
wykorzystanie animowanych
226
Część 3.
Grafika na WWW
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ąceg
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ądnyc
,
o
h 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 kilk
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 obramowan
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
a
iami, dzięki czemu
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 ob-
razy GIF zazwy
jest widoczne.
czaj mają nieregularne kształty, a tło, na którym zostały umieszczone,
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 pro-
gramy kompilujące animowane GIF-y pozwalają zdefiniować przezroczysty kolor pod-
czas kompilowania animacji, inne natomiast nie dają takich możliwości. W zale
od tego można zastosować dwa sposoby tworzenia animowanych obrazów GIF.
żności
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 plik
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 obra
GIF z określonym przezroczystym kolorem na dysku i zaimportować do program
używanego do tworzenia animowanych GIF-ów. Wykreowanie animacji
u.
z
u
w taki
sposób zabiera nieco więcej czasu, ale za to masz pewność, że zadziała.
Rozdział 9.
Tworzenie animowanych obrazów
227
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 na-
stę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 zo-
stanie 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 ko-
lorach 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.
[ Pobierz całość w formacie PDF ]