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:
q Sposób działania programu Flash
q Wstawianie sekwencji wideo programu Flash
q Stosowanie tekstu programu Flash
q Wstawianie przycisków programu 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
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
Oto procedura, która pozwoli Ci natychmiast rozpoznać obraz wektorowy:
Rys. 18.2.
Obraz wektorowy zaznaczony w Fireworks można dostosowywać przesuwając punkty przy użyciu narzędzia Open Path
Koniec 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.
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 >
<PARAM NAME =”MOVIE” VALUE=”nazwafilmu.swf”>
<PARAM NAME =”PLAY” VALUE=”true”>
<PARAM NAME =”LOOP” VALUE=”true”>
<PARAM NAME =”QUALITY” VALUE=”high”>
<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.
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.
Tak więc, gdy następnym razem ktoś zapyta „Czy znasz Shockwave?”, wyjaśnij mu o co chodzi.
Inny typ pliku, który także powinieneś poznać ma rozszerzenie nazwy .swt (Flash Generator Template). Pliki .swt pozwalają modyfikować sekwencje wideo programu Flash. W programie Dreamweaver pliki te reprezentują przyciski programu Flash. Przygotowane w programie Flash przyciski można wyeksportować jako pliki .swt, a następnie umieścić w oknie dialogowym Insert Flash Button programu Dreamweaver.
W Twojej kopii oprogramowania Dreamweaver pewien zestaw plików .swt jest już dostępny w oknie Insert Flash Button. Pliki te są zgromadzone w folderach Flash Buttons i Flash Text (oto pełna ścieżka dostępu: Dreamweaver\Configuration\Flash Objects\Flash Buttons (lub Flash Text)). Wszelkie nowe przyciski, które utworzysz w programie Flash i wyeksportujesz jako pliki .swt, także powinny znaleźć się w tym ulokowaniu.
Jeśli na temat tworzenia szablonów przycisków Flash chcesz się dowiedzieć nieco więcej, przejrzyj elektroniczny podręcznik dostępny w witrynie Macromedia.com. Znajdziesz go w sekcjach Dreamweaver Support lub Flash Support pod hasłem „Using Button Templates with Dreamweaver”.
Nie tylko Flash i Director potrafią eksportować pliki do formatu .swt. Takich programów jest znacznie więcej. Jeśli się porozglądasz dobrze, będziesz zdziwiony, jak popularna jest to opcja.
Jak to dobrze, że zdecydowałeś się poznać program Dreamweaver – masz tu cały zestaw narzędzi, dzięki którym Twoje sekwencje wideo będą działać i wyglądać lepiej.
Wstawianie sekwencji wideo Flash do dokumentu programu Dreamweaver nie mogłoby być prostsze:
Rys. 18.3.
Wstawianie multimedialnego obiektu programu Flash do dokumentu programu Dreamweaver 4.0
Inspektor Property umożliwia zmianę najczęściej stosowanych dla sekwencji wideo programu Flash ustawień:
q Nazwa sekwencji wideo – wpisz w tym polu nazwę sekwencji, do która będzie można odwoływać się w skryptach. Pole nazwy nie ma w inspektorze Property swojej etykiety. Znajdziesz je obok ikony Flash, z lewej strony okna. Pamiętaj, aby nie używać w nazwach znaków specjalnych oraz spacji.
q W i H – te pola określają w pikselach szerokość i wysokość pola sekwencji wideo. Możesz także zdefiniować wymiary w innych jednostkach: pc (pica), pt (punkty), in (cale), mm (milimetry), cm (centymetry) i % (procentowa wartość mierzona względem obiektu nadrzędnego). Między wartością a jednostką nie można umieszczać spacji. Oto przykład definicji: 30%.
Rys. 18.4.
Zaznacz obiekt programu Flash w swoim dokumencie i otwórz inspektora Property, aby zmienić właściwości sekwencji wideo
q File – to pole określa ścieżkę dostępu do pliku programu Flash. Możesz kliknąć ikonę foldera, aby znaleźć plik.
q Align – skorzystaj z tego pola, aby wskazać sposób wyrównania sekwencji wideo na stronie i w oknie przeglądarki.
q Bg – tu definiowany jest kolor tła dla sekwencji wideo. Skorzystaj z palety kolorów Dreamweavera i wskaż kolor bezpieczny, obsługiwany w Internecie.
q ID – w tym polu definiowany jest opcjonalny parametr ID kontrolki ActiveX. Jest on stosowany przede wszystkim do przekazywania informacji między kontrolkami ActiveX.
q V Space i H Space – określ w pikselach szerokość wolnego obszaru wokół pola sekwencji wideo.
q Parameters – ten przycisk otwiera okno dialogowe zawierające dodatkowe ustawienia dla sekwencji wideo. Opis parametrów programu Flash znajdziesz w punkcie „Parametry sekwencji wideo programu Flash”. Dodatkowe parametry pojawiają się, gdy sekwencja wideo pochodzi z programu Flash. Sięgnij do dokumentacji tego programu, aby znaleźć więcej informacji na temat stosowania parametrów.
q Quality – w tym polu umieszczana jest wartość atrybutu QUALITY znaczników <OBJECT> i <EMBED> uruchamiających sekwencję wideo. Wartość ta określa stopień wygładzania stosowany w trakcie odtwarzania sekwencji. Kuszące jest przyjąć wartość najwyższą, lecz trzeba pamiętać, że odtwarzanie filmów w wysokiej jakości wymaga szybszych procesorów. W punkcie „Parametry sekwencji wideo programu Flash” znajdziesz więcej informacji na temat ustawień jakości odtwarzania.
q Scale – to pole wskazuje znacznikom <OBJECT> i <EMBED>, które uruchamiają sekwencję wideo, stopień przeskalowania.
q Autoplay – jeśli zaznaczysz to pole wyboru, sekwencja zostanie odtworzona automatycznie, po załadowaniu strony.
q Loop – zaznaczenie tego pola wyboru spowoduje powtarzanie sekwencji w nieskończonej pętli.
q Reset Size – ten przycisk pozwala przywrócić domyślne rozmiary zaznaczonej sekwencji.
W tym ćwiczeniu będziesz korzystał z plików z foldera Storm na dysku CD dołączonym do książki. Do otwartego w programie Dreamweaver dokumentu storm.html wstawisz sekwencję wideo Flash o nazwie lightning.swf i skonfigurujesz jej właściwości korzystając z inspektora Property. Następnie przypisując połączeniu behawior dodasz do sekwencji możliwość jej kontroli.
Ukończona wersja tego ćwiczenia, o nazwie storm_done.html, także znajduje się w folderze Storm. Skorzystaj z niej, jeśli wykonanie ćwiczenia sprawi Ci trudność. Swoją wersję finalną ćwiczenia zapisz pod nazwą storm.html na dysku twardym. Będzie nam potrzebna w ćwiczeniu 18.2.
Wolf-1