rozdz18.pdf

Część V. Zastosowanie

multimediów

Rozdział 18. Animacje Flash

Być może zwróciłeś uwagę, że strony WWW zdobywające nagrody, na przykład w

organizowanym przez Macromedia konkursie Sities of the Day , zazwyczaj zawierają sekwencje

wideo programu Flash. Choć istnieje wiele sposobów umieszczania animacji na stronach WWW –

choćby animacje DHTML, animowane GIFy , animacje Javy i JavaScriptu – trudno znaleźć osobę,

która nie byłaby pod wrażeniem tego typu animacji, które można uzyskać w programie Flash.

Niezależnie od tego, czy jest to wirowanie, kręcenie, zanikanie, skakanie, podskakiwanie czy

nawet śpiewanie, animacja Flash jest czymś spektakularnym. Abyś był jeszcze bardziej złakniony

poznania narzędzia jakim jest Flash, wspomnę choćby o możliwości łączenia interfejsu programu

Flash z dynamiczną bazą danych. Oznacza to, między innymi, że witryny e-komercji przestaną

być nudne, a zaczną być piękne. Z każdą nową wersją Flash coraz lepiej spełnia wymagania

stawiane standardowemu narzędziu do tworzenia witryn.

Ci, którzy budują swoje witryny od początku do końca w programie Flash, unikają wielu pułapek

projektowych, które od lat są zmorą projektantów stron WWW. Na przykład sekwencje wideo

programu Flash dostosowują się rozmiarami do okna przeglądarki, co eliminuje obawy związane z

szerokością jej okna. Ponieważ Flash jest programem wektorowym, kwestia utraty jakości obrazu

praktycznie nie istnieje. Chociaż starsze przeglądarki (wersje poniżej 3.0) nie mają wbudowanego

modułu dodatkowego Flash Player, jest wysoce prawdopodobne, że coraz większa rzesza ludzi

doceniając zalety witryn Flash (i innych nowinek pojawiających się na stronach WWW) myśli o

uaktualnieniu oprogramowania, a nawet już to zrobiła.

Przyszłość rysuje się dla programu Flash w różowych barwach, a odbiciem tego jest rosnąca liczba

studentów wybierających na uczelniach kierunki wiążące się z multimediami. Ludzie ci wiedzą, że

Flash to nie tylko kaprys.

W tym rozdziale zbadamy powody tego szału na punkcie tego programu. Oto lista tematów:

Sposób działania programu Flash

Wstawianie sekwencji wideo programu Flash

Stosowanie tekstu programu Flash

Wstawianie przycisków programu Flash

Jak działa Flash

Aby zrozumieć jak działa Flash, musisz zacząć od tego, że Flash nie jest częścią składową

programu Dreamweaver, ani też przeglądarki. Zanim wstawisz sekwencję wideo na stronę WWW

tworzoną w programie Dreamweaver, najpierw musisz przygotować tę sekwencję w programie

Flash. Programy Dreamweaver i Flash – oba wyprodukowane przez firmę Macromedia – można

traktować jak członków jednego zespołu dążących do wspólnego celu: stworzenia wspaniałej

witryny, która nie tylko doskonale wygląda, lecz także udostępnia wiele interaktywnych opcji.

Flash ewoluował od programu do tworzenia animacji typowych dla filmów rysunkowych, przez

animacje dla gier elektronicznych, po prezentacje multimedialne. To, co odróżniło Flash od

pozostałych programów do animacji, to możliwość wyeksportowania animacji jako plików

Shockwave i stosowania ich na stronach WWW.

Każda nowa wersja coraz lepiej zaspokaja potrzeby projektantów i twórców stron WWW. Obecnie

jest to już nie tylko program do animacji. Chociaż nadal użytkownik programu Flash musi znać

podstawy tworzenia animacji, to zakres możliwości, jakie daje program, jest znacznie szerszy.

Można na przykład przesłać zmienne z bazy danych do interfejsu Flash i zaprezentować rezultaty

na stronie WWW za pomocą animacji. Można także stworzyć aplikacje e-komercji, udostępniające

użytkownikom animowany interfejs, który dodatkowo pozwala śledzić stan rachunku oraz

przechowuje numery kart kredytowych.

Połączenie możliwości artystycznych i potencjału technicznego sprawiło, Flash stał się znany jako

program do tworzenia bardziej interesujących witryn. Na przykład projektanci z Oddcast.com

stworzyli interaktywną aplikację, pokazaną na rysunku 18.1 – jest to ruszający się i mówiący bot,

którego można dowolnie wykorzystać.

Rys. 18.1.

Wirtualna gospodyni

witryny Oddcast.com

przyprawi Cię o

drżenie

Grafika wektorowa a rastrowa

Jednym z terminów, który pojawia się często w połączeniu z programem Flash jest termin „grafika

wektorowa”. Jeśli należysz to tych biedaków, którzy nie rozumieją, co on oznacza, przeczytaj ten

rozdział, a przestanie to być czarna magia.

Obrazy wektorowe są wyświetlane na ekranie lub wysyłane do drukarki obsługującej PostScript w

oparciu o dokładnie określone równania matematyczne. Projektanci dokumentów drukowanych i

stron WWW są równie wielkimi wielbicielami grafiki wektorowej, bowiem cechuje ją szeroki

zakres skalowalności przy zachowaniu jakości obrazu. Dotyczy to zarówno ekranu komputera, jak

i wydruku na drukarkach obsługujących PostScript.

Jeśli na przykład chcesz umieścić logo firmy na tablicy ogłoszeń, projektant Twojego plakatu

niewiele będzie w stanie zdziałać z przesłanym mu obrazem rastrowym o rozdzielczości 72 dpi.

Żeby uzyskać sensowny efekt, najpierw musi on odtworzyć logo w postaci wektorowej –

korzystając z takich programów, jak Adobe Illustrator lub Photoshop, ewentualnie Macromedia

Freehand lub Fireworks. Dopiero powstały w ten sposób obraz wektorowy można powiększyć do

rozmiaru wymaganego na plakacie, bez obaw o rozmycie krawędzi i utratę koloru. Jeśli będzie to

konieczne, to samo logo wektorowe można następnego dnia pomniejszyć tak, aby zmieściło się w

rogu koperty, i nadać mu inny kolor. I nadal krawędzie będą ostre, a kolor prawdziwy. W tym się

właśnie zawiera piękno grafiki wektorowej. Dodatkowa korzyść to niewielki rozmiar plików.

Flash jest programem wektorowym, a więc wszelkie obiekty, które powstają przy użyciu jego

modułu rysunkowego automatycznie przeskalowują się, dopasowując do rozmiarów okna. Nie

musisz więc ich rozciągać lub pomniejszać i nie tracą one jakości. To samo dotyczy wszelkich

kształtów wektorowych, które wklejasz lub importujesz do biblioteki programu Flash. Inaczej jest

jednak w przypadku fotografii i zeskanowanych grafik. Obrazy fotograficzne, takie jak obrazy

JPG , to pliki zawierające ilustracje rastrowe i nie można ich skalować. Innymi przykładami grafiki

rastrowej (oprócz obrazów BMP ) są obrazy w formatach TIF , PICT i GIF .

Komputery nie potrafią skalować grafiki rastrowej bez utraty jakości, ponieważ obraz rastrowy

stanowi zestaw pikseli, których ułożenia nie można zmienić. Dla grafiki rastrowej układ pikseli

jest czymś tak trwałym, jak dla Ciebie struktura DNA. Wymuszenie zmiany rozmiarów takiego

obrazu zawsze powoduje utratę jakości. Uwaga ta jest równie prawdziwa dla obrazów

prezentowanych na ekranie, jak i drukowanych. Utrata jakości pojawia się także jako efekt

kompresji lub usunięcia kolorów (tak jak w przypadku eksportu do formatu GIF ).

Program Flash pozwala na importowanie grafiki rastrowej i stosowanie jej w animacjach. Warto

jednak, abyś już teraz wiedział, że spowolni to odtwarzanie filmu tam, gdzie nie są dostępne łącza

o wysokiej przepustowości. Oczywiście wzrośnie także rozmiar pliku .swf powstałego po

wyeksportowaniu do formatu Shockwave.

Obrazy rastrowe nie są wcale rzadkie w sekwencjach wideo, lecz zaleca się ograniczanie ich

liczby. W przeciwnym razie efektem Twoich działań będzie bardzo wolny film. Flash daje nad

tym pewną kontrolę, poprzez możliwość zmiany poziomu jakości obrazu przy eksporcie do

formatu JPG . Im wyższa jakość obrazu JPG , tym większy rozmiar pliku i wyższe obciążenie łączy.

Początek ramki

Identyfikacja grafiki wektorowej

Oto procedura, która pozwoli Ci natychmiast rozpoznać obraz wektorowy:

1. Otwórz plik zawierający obraz w programie do edycji grafiki (takim jak Fireworks lub

Flash).

2. Zaznacz obraz.

3. Jeśli na obrazie pojawią się ruchome punkty – tak zwane uchwyty (patrz rysunek 18.2),

jest to obraz wektorowy. W takim przypadku możesz zwiększać lub zmniejszać jego

rozmiar (korzystając z narzędzia przeskalowywania), bez obawy o utratę jakości.

Rys. 18.2.

Obraz wektorowy

zaznaczony w

Fireworks można

dostosowywać

przesuwając punkty

przy użyciu narzędzia

Open Path

4. Jeśli uchwyty się nie pojawią, obraz może być obrazem rastrowym. Spróbuj rozgrupować

obraz, aby sprawdzić, czy uchwyty się pojawią (w programie Flash rozgrupowanie

umożliwia skrót Ctrl+B ). Jeśli nadal nie są widoczne, masz do czynienia z obrazem

rastrowym.

Koniec ramki

Początek ramki

Podpowiedź

Jeśli wklejasz obiekty Fireworks do sekwencji wideo programu Flash, zostaną one przekształcone

do postaci grafiki rastrowej. Aby zachować postać wektorową, skorzystaj z dostępnej w Fireworks

opcji Copy as Vectors , a następnie, już w programie Flash, rozgrupuj je, stosując skrót Ctrl+B ,

przygotowując je w ten sposób do edycji.

Koniec ramki

Początek ramki

Znaczniki <OBJECT> i <EMBED>

Ponieważ pliki .swf są w formacie wprowadzonym przez Macromedia, ich obsługa w

przeglądarce jest możliwa dopiero po zainstalowaniu programu Macromedia Flash Player.

Najnowsze wersje przeglądarek Netscape Navigator i Internet Explorer mają już wbudowany

moduł Flash Player, aczkolwiek w różnych wersjach.

W przeglądarce Microsoft Internet Explorer Macromedia Flash Player występuje jako kontrolka

ActiveX, do której odwołanie w kodzie HTML umieszcza się w znaczniku <OBJECT> . W

Navigatorze Netscape jest to moduł dodatkowy, do którego odwołanie definiowane jest w

znaczniku <EMBED> .

Tak więc, aby umożliwić obsługę plików .swf w obu typach przeglądarek, w kodzie HTML

należy umieścić oba znaczniki – <OBJECT> i <EMBED> . Oto przykład kodu HTML dla dokumentu

programu Dreamweaver, do którego wstawiono plik Shockwave:

<OBJECT CLASSID=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” WIDTH=”100”

HEIGHT=”100” CODEBASE=http://active.macromedia.com/flash5/cabs/

swflash.cab#version=5,0,0,0 >

<EMBED SRC=”nazwafilmu.swf” WIDTH=”100” HEIGHT=”100” PLAY=”true”

LOOP=”true” QUALITY=”high” PLUGINSPAGE=”

http://active.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version

=ShockwaveFlash”>

</EMBED>

</OBJECT>

Na szczęście nie musisz wiedzieć, jak zapisać zawartość obu znaczników. Dreamweaver tworzy

kod automatycznie, gdy plik Shockwave jest wstawiany do dokumentu. Warto jednak mieć choć

ogólną wiedzę na temat znaczników <OBJECT> i <EMBED> na wypadek, gdybyś kiedyś

potrzebował zmienić parametry lub wprowadzić w nich inne zmiany.

Czy znasz Shockwave?

Posługiwanie się sekwencjami wideo w programie Dreamweaver wymaga przynajmniej

podstawowej znajomości programu Flash i generowanych przez niego plików. Jest z tym często

problem. Ponieważ wielu twórców i projektantów stron WWW nigdy nie korzystało z programu

Flash, o metodach eksportu plików Flash i wstawiania ich w dokumentach HTML krąży wiele

mitów i błędnych teorii.

Aby wstawiana w dokumencie HTML programu Dreamweaver sekwencja wideo mogła zostać

skonfigurowana i odtworzona w przeglądarce, musi ona być w formacie Shockwave Flash ( .swf ).

Sekwencja wideo utworzona w programie Flash zostanie zapisana jako plik .fla , a większość

przeglądarek będzie miała problemy z jej odtworzeniem, dopóki wersja pliku nie zostanie

przekonwertowana do postaci .swf za pomocą polecenia Export .

Być może z tego względu wyraz Shockwave stał się podstawowym źródłem nieporozumienia.

Wiele osób myśli, że Shockwave to program, a tak nie jest. W rzeczywistości Shockwave to typ

pliku. Tak jak .JPG czy .GIF to typy plików graficznych tworzonych przy eksporcie obrazu w

programie do obróbki grafiki, tak rozszerzenie .swf (pochodzące od Shockwafe Flash)

przypisywane jest plikom eksportowanym z Macromedia Flash lub Director (oraz paru innych

programów). Pliki wyeksportowane w programach Flash lub Director do formatu Shockwave

mogą być odtwarzane w przeglądarkach i prezentują się w nich nieźle.

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: