Rozdział 20. Wstawianie obiektów multimedialnych

Jednym z największych wyzwań przy tworzeniu treści multimedialnych jest stwierdzenie, która z dostępnych technologii najlepiej nadaje się do osiągnięcia założonego celu i wybranie takiej drogi jego realizacji, aby wszyscy byli zadowoleni. W tym rozdziale tym właśnie się zajmiemy. Jak już wiesz, Dreamweaver i Flash użyte razem, pozwalają na stworzenie bogatej multimedialnie zawartości. Teraz czas, abyś dowiedział się czegoś o aplikacjach Shockwave, QuickTime, RealSystem, Java i innych, które rozszerzają możliwości przeglądarek ponad HTML.

Kluczowe tematy podejmowane w tym rozdziale to:

• Obsługa zawartości multimedialnej przez przeglądarki

• Narzędzia programu Dreamweaver do obsługi modułów dodatkowych Netscape i kontrolek ActiveX

• Najpopularniejsze formaty plików multimedialnych, obsługiwane przez moduły dodatkowe, takie jak na przykład Shockwave.

• Aplety Javy i ich integracja ze stronami WWW

• Dźwięk na stronach WWW

• Detekcja modułu dodatkowego

Rozbudowa możliwości przeglądarek za pomocą modułów dodatkowych i ActiveX

Przeglądarki to przede wszystkim interpretery kodu HTML. Ich działanie polega na tłumaczeniu instrukcji zawartych w znacznikach i zapisanych w pliku HTML na postać ekranową, użyteczną dla użytkownika. Dołączenie do kodu HTML skryptów JavaScript pozwala na wprowadzenie na strony WWW interaktywności. Jako takie przeglądarki jednak nie są w stanie obsługiwać takiej różnorodności plików multimedialnych, jaką chętnie widziałbyś na swoich stronach. Nie mogą wyświetlić sekwencji wideo, nie potrafią obsługiwać i prezentować dźwięku, nie umieją wyświetlić zawartości w formacie PDF, ani też obsłużyć skomplikowanej interaktywności i animacji, bez których nie obejdą się dziś żadne gry.

Całe szczęście przeglądarki są rozszerzalne. O wykonanie tego, czego same nie potrafią, mogą zwrócić się do oprogramowania zewnętrznego. I tak się często dzieje w czasie Twojego surfowania po Internecie, choć nie zawsze masz tego świadomość.

Moduły dodatkowe, aplikacje pomocnicze i typy MIME

Ilekroć przeglądarka napotyka na plik, musi określić jego rodzaj i wybrać sposób obsługi. Odbywa się to poprzez analizę typu MIME (Multipurpose Internet Mail Extension). Typ MIME to informacja, jaką serwer sieciowy wysyła wraz z plikiem przy pobieraniu strony na komputer użytkownika. Informacja ta zawiera opis kategorii pliku i instrukcje pozwalające przeglądarce wybrać sposób potraktowania pliku.

W celu zabezpieczenia, na wypadek gdyby serwer sieciowy nie przesłał ze ściąganym plikiem danych MIME, przeglądarka analizuje także sufiks lub inaczej rozszerzenie nazwy pliku. Niektóre standardowe typy MIME i stowarzyszone z nimi rozszerzenia nazwy zostały zaprezentowane na rysunku 20.1.

Rys. 20.1. Popularne typy MIME i stowarzyszone z nimi rozszerzenia nazwy

Jeśli typ MIME lub rozszerzenie nazwy wskazują, że przeglądarka nie będzie w stanie obsłużyć pliku, sięga ona po pomoc zewnętrzną - a stanowi ją aplikacja pomocnicza lub moduł dodatkowy.

Aplikacja pomocnicza to program, który obsługuje dany typ plików. Może nią być dowolny program na Twoim komputerze. Stuffit Expander i WinZip to przykłady aplikacji pomocniczych. Ilekroć przeglądarka natrafi na plik o rozszerzeniu nazwy .zip lub typ MIME application/zip, najpewniej odszuka i uruchomi jeden z tych programów. Każdy z tych programów może być także uruchamiany przez przeglądarkę niezależnie.

Moduł dodatkowy (ang. plug-in), tak jak aplikacja pomocnicza, dysponuje możliwościami, których brak przeglądarce, lecz nie jest samodzielną aplikacją. Moduły nie mogą być uruchamiane i nie mogą działać samodzielnie. W zamian rozbudowują możliwości przeglądarki. Moduły muszą rezydować w folderze Plug-Ins, który jest folderem podrzędnym foldera zawierającego oprogramowanie przeglądarki. Przykładem tego typu wsparcia jest moduł dodatkowy Flash, o którym wspominaliśmy w rozdziale 18., „Animacje Flash”. Jeśli przeglądarka znajdzie plik o rozszerzeniu nazwy .swf lub o typie MIME application/x-shockwave-flash, przystąpi prawdopodobnie do szukania i uruchamiania tego modułu (terminu „moduł dodatkowy” używamy tu dla określenia wbudowanego rozszerzenia przeglądarki. Implementacjami tej technologii w przypadku dwóch najpopularniejszych przeglądarek, Netscape Navigator i Microsoft Internet Explorer, są moduły dodatkowe Netscape oraz kontrolki ActiveX. Obie omawiane są w dalszej części rozdziału).

Konfiguracja i dostosowywanie

Dlaczego twierdzimy, że przeglądarka prawdopodobnie zareaguje w określony sposób na dany typ MIME? Ponieważ każda przeglądarka musi najpierw zostać skonfigurowana, aby potrafiła zinterpretować pewne typy MIME, a dowolne dwie przeglądarki, nawet tej samej wersji i działające w takim samym środowisku, mogą byś skonfigurowane odmiennie. Przeglądarka jest skonfigurowana natychmiast po instalacji, lecz w zależności od źródła, z którego pochodzi (promocyjne lub pełne oprogramowanie z dysku CD, instalacja przy zakupie komputera, pobranie z witryn Microsoft lub Netscape, itp.), konfiguracje poszczególnych kopii tej samej wersji oprogramowania mogą się różnić. Ponadto, co oczywiste, także sami użytkownicy mogą zmienić ustawienia przeglądarki, dostosowując ją do własnych potrzeb.

Aby przejrzeć ustawienia przeglądarki Netscape Navigator 4 lub zmienić je, uruchom przeglądarkę i wybierz z menu Edit pozycję Preferences. Następnie w oknie dialogowym Preferences rozwiń kategorię Navigator i wybierz pozycję Applications. Ustawienia, które się pojawią, będą wyglądały mniej więcej tak jak na rysunku 20.2.

Rys. 20.2. Okno dialogowe Preferences dla przeglądarki Netscape Navigator 4. Każdemu typowi MIME przyporządkowano aplikację pomocniczą, moduł dodatkowy lub działanie, które ma zostać podjęte, jeśli przeglądarka natrafi na ten typ

Aby dostosować do własnych potrzeb konfigurację przeglądarki Internet Explorer 5, uruchom przeglądarkę, wybierz w menu Tools pozycję Internet Options; jednak przejrzenie skojarzeń typów plików i typów MIME (lecz nie ich modyfikacja) jest możliwe tylko za pośrednictwem standardowych narzędzi systemu Windows - przypis tłum. W wersji tej przeglądarki dla systemu Macintosh ustawienia można modyfikować w oknie dialogowym Preferences (wybierz pozycję Preferences w menu Edit i kliknij kategorię Download Options lub File Helpers) (patrz rysunek 20.3).

Rys. 20.3. Internet Explorer dla systemu Macintosh - okno dialogowe Preferences oraz okno dialogowe edycji typu pliku. Internet Explorer nie pozwala na zmianę tych ustawień

Ewentualne problemy z konfiguracją

Autorzy stron WWW nie mogą kontrolować sposobu obsługi różnych typów plików przez przeglądarki. Starają się jedynie przewidzieć sposób skonfigurowania przeglądarek użytkowników i przygotowują strony tak, aby radziły sobie w sposób elegancki z ewentualnym niepowodzeniem w tym względzie (strategiami tego rodzaju zajmiemy się w dalszej części rozdziału).

• Niedostępne moduły dodatkowe lub aplikacje pomocnicze - jeśli nawet w ustawieniach przeglądarki typ MIME jest prawidłowo skojarzony z aplikacją pomocniczą lub modułem dodatkowym, nie oznacza to, że na komputerze użytkownika aplikacja ta lub moduł są dostępne. Jest to najczęstszy problem prześladujący projektantów, którzy chcieliby poszerzać zawartość multimedialną swoich stron WWW.

• Nieznane typy MIME - jeśli ściągnięty plik nie jest rozpoznawany przez przeglądarkę (nie rozpoznaje ona ani jego typu MIME, ani rozszerzenia nazwy), kwestia potraktowania pliku zostanie przekazana w ręce użytkownika.

• Nieoczekiwane lub niewłaściwe polecenie - przypisanie lub działanie wyspecyfikowane w konfiguracji domyślnej mogą odbiegać od wskazań autora; wskazania autora mogą też nie być najlepszym wyborem, biorąc pod uwagę konfigurację systemu użytkownika.

Moduły dodatkowe Netscape a obiekty ActiveX

Wiele lat temu, aby umożliwić twórcom umieszczanie na stronach HTML zawartości multimedialnej, Netscape wprowadził technologię modułów dodatkowych rozbudowujących możliwości jego własnej przeglądarki. Firma wprowadziła także znacznik <EMBED>, którego zadaniem jest wskazanie przeglądarce modułu obsługującego dany typ zawartości multimedialnej. Chociaż znacznik ten nigdy nie został uwzględniony w oficjalnej specyfikacji języka HTML tworzonej przez W3C, cieszył się dużym wzięciem u użytkowników. Internet Explorer zaadoptował znacznik <EMBED> i system modułów dodatkowych, i jest on obecnie uważany za bezpieczny i pewny sposób umieszczania zawartości multimedialnej na stronach WWW. Chociaż mędrcy nadal mówią o modułach dodatkowych Netscape, nie jest to już technologia typowa dla Netscape.

W międzyczasie Microsoft rozwijał własny zestaw technologii wspomagających współużytkowanie informacji i kooperację różnych typów aplikacji. Technologia łączenia i osadzania obiektów (OLE; Object Linking and Embedding) i technologia COM (Component Object Model) określająca zasady komunikacji między obiektami znajdującymi się na tym samym komputerze, rozwinęły się ostatecznie w technologię ActiveX. Na potrzeby zastosowań sieciowych Microsoft przystosował swoją przeglądarkę do obsługi mini-programów zwanych kontrolkami ActiveX, które kontrolują umieszczone na stronie WWW obiekty ActiveX i pośredniczą w przekazywaniu do nich informacji za pośrednictwem znacznika <OBJECT>. Kontrolkę ActiveX można zaprojektować pod kątem współpracy z dowolną aplikacją, w tym także z Internet Explorerem. Komunikacja między kontrolką ActiveX a przeglądarką może odbywać się w języku skryptowym VBScript, stworzonym przez Microsoft, a sam system komunikacji przypomina komunikację między przeglądarką a modułami dodatkowymi Netscape, w której stosowany jest JavaScript, język skryptowy rozwinięty przez Netscape.

W rezultacie dostępne są dwa sposoby umieszczania zawartości multimedialnej w oknie przeglądarki: jako obiekty wspierane przez moduły dodatkowe oraz jako obiekty ActiveX. O ile obie przeglądarki obsługują moduły dodatkowe, to technologię ActiveX jedynie Internet Explorer. Sieć powiązań technologii ActiveX z innymi technologiami firmy Microsoft, ogranicza zakres jej działania tylko do platformy Windows. Ponieważ Internet Explorer bazuje przede wszystkim na ActiveX, obsługa obiektów wymagających modułów dodatkowych jest gorsza niż w przypadku Navigatora Netscape. W przeglądarce Netscape komunikacja z obiektami wspieranymi przez moduły dodatkowe odbywa się za pośrednictwem języka JavaScript. Internet Explorer nie zezwala na dostęp do obiektów korzystających z modułów i ActiveX przy użyciu tego języka; języka VBScript można z kolei użyć wyłącznie do komunikacji z obiektami ActiveX, lecz już nie do komunikacji z obiektami korzystających z modułów. Internet Explorer dla systemu Macintosh także nie obsługuje ActiveX, a wszystko to razem znacznie ogranicza zakres Twojej kontroli nad obsługą zawartości multimedialnej w różnych przeglądarkach i na różnych platformach.

Poza tym, chociaż większość najważniejszych producentów modułów dodatkowych tworzy także kontrolki ActiveX i moduły Netscape, to jednak nie czynią tak wszyscy. Na przykład Apple nie wypuścił wersji ActiveX popularnego modułu QuickTime, choć QuickTime jest przypuszczalnie technologią wieloplatformową.

Jako twórcy stron WWW codziennie musimy stąpać po tym polu minowym. Dreamweaver oferuje pomoc, wspierając obie technologie i troszcząc się pieczołowicie o szczegóły, aby strony były dostępne jak najszerszej szerzy odbiorców. (Jeśli stosujesz moduły dodatkowe, nawet Dreamweaver nie jest w stanie zapewnić pełnej kompatybilności między różnymi przeglądarkami i platformami sprzętowymi. Staraj się więc oszczędnie korzystać z zawartości multimedialnej i starannie testować swoje strony w wielu przeglądarkach i na różnych platformach. Pomyśl także o tym, aby zaprojektować strony tak, że nawet w przypadku braku obsługi multimediów, zachowana zostanie ich funkcjonalność.)

Moduły dodatkowe Netscape (znacznik <EMBED>)

Aby wstawić w dokumencie programu Dreamweaver zawartość multimedialną korzystając ze znacznika <EMBED>, klikasz na palecie obiektów ikonę Insert Plugin. W wersji 4 programu znajdziesz ją w kategorii Special (w poprzedniej wersji należała ona do kategorii Common). Wstawiony obiekt jest obiektem typu ogólnego i może być stosowany do wstawiania treści o różnych typach MIME, obsługiwanych przez różne moduły dodatkowe. Rysunek 20.4 prezentuje obiekt na palecie obiektów oraz jego właściwości w inspektorze Property.

Rys. 20.4. Ikona Insert Plugin z kategorii Special palety obiektów oraz inspektor Property prezentujący właściwości obiektu Plugin i okno parametrów obiektu

W inspektorze Property pojawiają się ogólne właściwości elementów utworzonych za pomocą narzędzia Insert Plugin, które można stosować z dowolnymi treściami multimedialnymi:

• Src - określa adres URL źródła pliku multimedialnego. Wypełnienie tego pola jest konieczne.

• Plg URL - określa wartość atrybutu pluginspage. Jest nią pełny adres URL witryny, z której można ściągnąć moduł dodatkowy. Jeśli przeglądarka użytkownika nie dysponuje odpowiednim modułem, który umożliwia obsługę pliku źródłowego, lecz w znaczniku <EMBED> umieszczono atrybut pluginspage określający adres URL, użytkownik uzyska możliwość udania się pod ten adres i pobrania modułu (poprzez ikonę braku modułu). Jest to opcjonalne rozwiązanie, lecz zalecane.

• Name - tak jak elementy HTML, tak i treści multimedialne muszą mieć swoją nazwę, aby można było odwoływać się do nich w skryptach. Ta właściwość jest opcjonalna.

• W i H - w tych polach określane są w pikselach wymiary obszaru przydzielonego obiektowi na stronie. Domyślnie przydzielany jest obszar o wymiarach 32x32 pikseli, ponieważ Dreamweaver nie jest w stanie określić rzeczywistych wymagań. Większość modułów wymaga zdefiniowania tych wartości.

• V Space i H Space - w tych polach można wprowadzić dodatkowy wolny obszar wokół obiektu. Są to ustawienia opcjonalne

• Align - to ustawienie określa sposób wyrównania obiektu na stronie. Jest opcjonalne.

• Border - określa szerokość obramowania wokół obiektu. Jest opcjonalne.

Dodatkowe parametry stowarzyszone z danym modułem dodatkowym można umieścić w znaczniku <EMBED>, klikając w inspektorze Property przycisk Parameters. Otworzy się wówczas okno dialogowe Parameters (patrz rysunek 20.4). Aby tą drogą dodać parametry, musisz znać ich nazwy i wartości.

W oknie dokumentu Dreamweaver nie wyświetli automatycznie osadzonej w dokumencie treści multimedialnej, lecz pokaże jedynie obszar jej przydzielony. Aby ją zobaczyć i usłyszeć, naciśnij w inspektorze Property przycisk Play. Dopóki którakolwiek z przeglądarek działających na Twoim komputerze będzie wyposażona w odpowiednie moduły, Dreamweaver poradzi sobie z wyświetleniem zawartości.

Obiekty ActiveX (znacznik <OBJECT>)

Aby wstawić w dokumencie programu Dreamweaver zawartość multimedialną korzystając ze znacznika <OBJECT>, klikasz na palecie obiektów ikonę Insert ActiveX. Znajdziesz ją w kategorii Special. Rysunek 20.5 prezentuje obiekt na palecie obiektów oraz jego właściwości w inspektorze Property. Podobnie jak w przypadku obiektu Plugin, jest to obiekt typu ogólnego i można go stosować z różnymi kontrolkami ActiveX.

Rys. 20.5. Ikona Insert ActiveX z kategorii Special palety obiektów oraz inspektor Property prezentujący właściwości obiektu ActiveX i okno parametrów obiektu

W inspektorze Property dostępne są ustawienia takie jak dla obiektu Plugin oraz dodatkowe. Oto one:

• Class ID - jest to nazwa kontrolki ActiveX, która ma wspomóc obsługę treści multimedialnych. Kontrolki Shockwave, Flash i RealMedia są dostępne na rozwijanej liście; pozostałe musisz wpisać ręcznie. Ręcznie wprowadzona nazwa kontrolki jest dodawana do listy rozwijanej i na niej pozostaje tak długo, dopóki jej nie usuniesz (aby ją usunąć z listy, kliknij przycisk ze znakiem minus (-), który znajdziesz obok).

• ID - definiuje opcjonalny parametr ID kontrolki ActiveX. Najczęściej jest on stosowany w odwołaniach do obiektu umieszczanych w skryptach.

• Base - określa adres URL witryny, z której można ściągnąć żądaną kontrolkę ActiveX. Jeśli przeglądarka użytkownika nie dysponuje odpowiednią kontrolką ActiveX, która umożliwia obsługę pliku źródłowego, lecz w znaczniku <OBJECT> znajdzie się atrybut base, którego wartością jest adres URL, o ile to będzie możliwe, kontrolka zostanie automatycznie ściągnięta. Jest to parametr opcjonalny, lecz zalecany.

• Data - określa adres URL pliku z danymi. Wiele kontrolek ActiveX (w tym Flash, Shockwave i RealPlayer) nie korzysta z tego parametru.

• Alt Img - tu podajesz ulokowanie obrazu, który zostanie wyświetlony, jeśli przeglądarka nie obsługuje znacznika <OBJECT>.

• Embed - jeśli zaznaczysz to pole wyboru, Dreamweaver doda znacznik <EMBED> w obrębie znacznika <OBJECT>, aby umożliwić obsługę przeglądarki Netscape na wszystkich platformach, a przeglądarki Internet Explorer na platformach działających pod kontrolą innych systemów niż Windows.

Tak jak w przypadku obiektu plugin, naciśnij w inspektorze Property przycisk Play.

Początek ramki

Uwaga

Zamiast korzystać ze znaczników <EMBED> lub <OBJECT> możesz po prostu zdefiniować połączenie prowadzące do żądanego pliku multimedialnego. W tym celu utwórz na stronie połączenie tekstowe lub graficzne (używając obrazu), a następnie w polu Link inspektora Property podaj ulokowanie pliku multimedialnego lub skorzystaj z przycisku Browse i znajdź plik. Jest to dość prymitywna metoda udostępniania multimediów w witrynie, ponieważ nie daje ona żadnej kontroli nad parametrami i skryptami.

Koniec ramki

Technologie modułów dodatkowych

W tej części rozdziału przyjrzymy się najpopularniejszym modułom dodatkowym, takim jak Shockwave, QuickTime i RealMedia. Dowiesz się dla jakiego typu multimediów są one przeznaczone, czym różnią się kontrolki ActiveX od modułów Netsape oraz jaką masz możliwość kontroli nad każdym z nich.

Shockwave

Shockwave jest modułem dodatkowym i pokrewnym formatem plików, który umożliwia wyświetlenie w przeglądarce pliku utworzonego w programie Macromedia Director. Przez długie lata Director stanowił standard przemysłowy oprogramowania do produkcji profesjonalnych prezentacji na płytach CD-ROM. Director umożliwia łączenie grafiki, animacji, tekstów, dźwięku oraz obrazów wideo w spójną całość. Jego wewnętrzny język skryptowy, Lingo, pozwala na uzyskiwanie bardzo rozbudowanej interaktywności. Stosując oprogramowanie Director Multiuser Server sekwencje wideo Directora można wykorzystać przy tworzeniu gier sieciowych, pogawędek sieciowych i innych aplikacji sieciowych. Przeznaczone dla programu Director rozszerzenia (tworzone przez Integration Media) umożliwiają połączenie sekwencji wideo tego programu z bazami danych i plikami PDF (V12 i PDF Xtras).

Przy tworzeniu prezentacji umieszczanych na płytach CD, sekwencje wideo Directora zapisuje się jako samodzielne aplikacje. Natomiast prezentacje sieciowe zawierają sekwencje wideo zapisane w specjalnym formacie o rozszerzeniu nazwy .dcr i typie MIME application/x-director. Aby zobaczyć tego typu zawartość w oknie przeglądarki, użytkownicy muszą mieć moduł dodatkowy Shockwave, który jest dostępny pod adresem www.macromedia.com.

Technologia bazująca na duszkach

Director, a tym samym i Shockwave, korzysta z technologii duszków (ang. Sprite Technology), co oznacza, że poszczególne elementy prezentacji, takie jak obrazy, dźwięki i tekst muszą być ładowane do pamięci tylko raz, po czym, w trakcie odtwarzania sekwencji wideo, mogą być wielokrotnie wykorzystywane. Skrypty opisujące ich zachowanie pozwalają osiągnąć wysoką efektywność animacji. Technologia ta efektywnie wykorzystuje zasoby pamięci i pozwala tworzyć względnie niewielkie pliki, które nie obciążają bardzo sieci.

Przesył strumieniowy

Shockwave to także technologia pozwalająca na strumieniowy przesył danych, co w praktyce oznacza, że sekwencja wideo jest odtwarzana już w trakcie ściągania. Dzięki temu nawet długie i skomplikowane prezentacje mogą być przesyłane przez sieć, bez ryzyka długiego oczekiwania na ich odtworzenie. Podobnie jak w przypadku programu Flash, w programie Shockwave strumieniowy przesył informacji jest realizowany po stronie klienta, co oznacza, że nie jest wymagana specjalna konfiguracja serwera. Aby dowiedzieć się nieco więcej na temat Shockwave, odwiedź stronę www.macromedia.com/shockzone.

Początek ramki

Uwaga

Swego czasu Flash był uważany za element technologii Shockwave. Rozszerzenie nazwy .swf oznaczało „Shockwave Flash”. Obecnie jednak Macromedia wprowadza Flash na rynek jako samodzielną całość, oddzieloną od Shockwave, a rozszerzenie .swf oznacza oficjalnie „small Web files” (małe pliki sieciowe).

Koniec ramki

Uwagi na temat Shockwave

Moduł dodatkowy Shockwave jest zgodny z wieloma przeglądarkami i platformami. Dostępny jest jako moduł dodatkowy Netscape i kontrolka ActiveX. Wiele poważnych witryn korzysta z zawartości Shockwave, aby umożliwić zabawę, dostarczyć informacji i zaprezentować treści interaktywne, a wszystko to w celu zwabienia użytkownika na strony witryny. Zgodnie z danymi udostępnionymi przez Macromedia, ponad 167 milionów użytkowników ma na swoich komputerach zainstalowany moduł Shockwave.

Wstawianie obiektu Shockwave

W programie Dreamweaver wstawienie obiektu Shockwave umożliwia ikona Insert Shockwave palety obiektów (patrz rysunek 20.6). Jest ona umieszczona w kategorii Common i umożliwia wstawienie zawartości Shockwave za pomocą znacznika <OBJECT> zawierającego znacznik <EMBED>.

Rys. 20.6. Paleta obiektów, na której zaznaczono ikonę Insert Shockwave

Początek ramki

Uwaga

Poprzednie wersje Dreamweavera umożliwiały autorom stron WWW wybranie, czy przy wstawianiu zawartości Shockwave stosowane mają być oba znaczniki, <OBJECT> i <EMBED>, czy też tylko któryś z nich. W wersji 4 nie ma takiej możliwości.

Koniec ramki

Inspektor Property dla obiektu Shockwave nie zawiera wielu ustawień, ponieważ podstawowe parametry, takie jak pluginspage i base, są ustawiane automatycznie przez sam program (patrz rysunek 20.7). Szerokość i wysokość pola obiektu (pola W i H) nie są narzucane. Dreamweaver ustawia jedynie domyślnie wymiary pola na 32x32 piksele. Prawidłowe wymiary musisz określić samodzielnie korzystając z innego oprogramowania lub stosując metodę prób i błędów i sprawdzając efekty w przeglądarce. Jeśli zdefiniowane w inspektorze Property wymiary pola sekwencji będą mniejsze niż rzeczywiste, sekwencja wideo zostanie przycięta; jeśli będą większe, wokół krawędzi pojawi się pusty obszar.

Rys. 20.7. Inspektor Property dla wstawionego obiektu Shockwave oraz okna dialogowe Parameters i Select Parameter Value, które umożliwiają określenie wartości parametrów typowych dla obiektów --> Shockwave[Author:r]

Aby uzyskać dostęp do innych parametrów sekwencji wideo Shockwave i przypisać im wartości (parametry te są stosowane w znacznikach <object> i <embed> - przypis tłum.), kliknij przycisk Parameters umieszczony w prawym dolnym roku okna inspektora Property. W wyświetlonym oknie Parameters kliknij przycisk ze znakiem plus, (+), aby wyświetlić listę dostępnych parametrów, które można skonfigurować (patrz rysunek 20.7). Większość z tych parametrów odnosi się do skryptów Lingo kontrolujących sekwencję Shockwave. W ćwiczeniu 20.1 znajdziesz więcej informacji na ten temat. Rysunek 20.8 prezentuje listę parametrów, które można przypisać obiektowi Shockwave, oraz opisy ich zastosowania.

Nazwa parametru

Wartość

Opis

name

Jednowyrazowa nazwa

Wymagany przez znacznik <EMBED>, jeśli w skryptach mają się pojawić odwołania do sekwencji.

ID

Jednowyrazowa nazwa

Wymagany przez znacznik <OBJECT>, jeśli w skryptach mają się pojawić odwołania do sekwencji.

width

Liczba całkowita (liczba pikseli)

Szerokość obszaru przydzielanego sekwencji wideo na stronie. Dreamweaver nie jest w stanie określić tej wartości samodzielnie. Jeśli szerokość przydzielonego obszaru będzie się różnić od wymiaru klatki sekwencji, zostanie ona przycięta lub otoczona wolnym obszarem.

height

Liczba całkowita (liczba pikseli)

Wysokość obszaru przydzielanego sekwencji wideo na stronie. Dreamweaver nie jest w stanie określić tej wartości samodzielnie. Jeśli wysokość przydzielonego obszaru będzie się różnić od wymiaru klatki sekwencji, zostanie ona przycięta lub otoczona wolnym obszarem.

align

Wartości dostępne z menu rozwijanego

Parametr określa sposób wyrównania w sytuacji, gdy obok sekwencji wideo (na przykład w tej samej komórce tabeli lub w akapicie) umieszczony zostanie inny element strony.

bgcolor

Wartości dostępne z palety; można także podać sześciocyfrowy kod szesnastkowy koloru

Jeśli rozmiary pola przydzielonego sekwencji wideo będą większe niż rozmiary klatki sekwencji, parametr ten będzie określał kolor pozostałej części przydzielonego obszaru.

vspace

Liczba całkowita (liczba pikseli)

Dodaje wolny obszar nad i pod polem sekwencji wideo. Określ jego szerokość w pikselach.

hspace

Liczba całkowita (liczba pikseli)

Dodaje wolny obszar z prawej i lewej strony pola sekwencji wideo. Określ jego szerokość w pikselach.

autostart

True lub False

Określa, czy odtwarzanie rozpocznie się automatycznie, natychmiast po załadowaniu.

loop

True lub False

Określa czy odtwarzanie sekwencji wideo będzie powtarzane w nieskończonej pętli, czy też zostanie zatrzymane po jednokrotnym odtworzeniu. To ustawienie skutkuje tylko wówczas, gdy własne skrypty sekwencji nie zawierają definicji powtarzania i zatrzymywania sekwencji.

sound

progress

swLiveConnect

swRemote

swStretchStyle

swStretchHAlign

swStretchVAlign

swAudio

swBaner

swBackColor

swForeColor

swFrame

swList

swName

swPassword

swPreloadTime

swSound

swText

swURL

swVolume

swPreLoad Time

sw1

sw2

sw3

sw4

sw5

sw6

sw7

sw8

sw9

Wartości dowolne

Te parametry można wykorzystać do przekazania sekwencji wideo Shockwave dowolnej wartości. Wewnętrzne skrypty sekwencji mogą dowolnie wykorzystywać ich wartości. To autor decyduje, czy na przykład swSound przekazuje do sekwencji wideo informacje na temat dźwięku, czy też informacje całkowicie dowolne. Internet Explorer wymaga, aby parametry przekazywane do sekwencji Shockwave miały takie i wyłącznie takie nazwy (Netscape Navigator nie ma takich wymagań i nazwy mogą być dowolne, pod warunkiem, że skryptach sekwencji wideo programu Director używane są parametry o takich właśnie nazwach).

Rys. 20.8. Parametry przyjmowane przez sekwencję wideo Shockwave wraz z opisem i sugerowanymi wartościami --> [Author:r]

Początek ramki

Uwaga

Zanim przystąpisz do wykonywania ćwiczeń z tego rozdziału, skopiuj folder zawierający niezbędne pliki multimedialne z dysku CD na swój dysk twardy. Pliki znajdziesz w folderze Chapter 20. We wszystkich ćwiczeniach założono, że pliki multimedialne i pliki HTML znajdują się w tym samym folderze.

Koniec ramki

Ćwiczenie 20.1. Wstawianie sekwencji wideo Shockwave

W tym ćwiczeniu wstawisz w dokumencie HTML sekwencję wideo Shockwave i przetestujesz jej podstawowe parametry.

1. Utwórz nowy dokument programu Dreamweaver i zapisz go.

2. Kliknij na palecie obiektów ikonę Insert Shockwave. W oknie dialogowym Select File wybierz plik sample_movie.dcr. Jeśli jeszcze tego nie zrobiłeś, skopiuj plik z dysku CD na dysk twardy swojego komputera, aby dostęp był prostszy.

3. Zdefiniuj rozmiary pola sekwencji wideo wprowadzając w polach W i H inspektora Property wartości 640 i 340.

4. Odtwórz sekwencję w programie Dreamweaver.
   Kliknij w inspektorze Property przycisk Play, a następnie kliknij go ponownie, aby powrócić do pracy nad dokumentem.

5. Poeksperymentuj z rozmiarami pola sekwencji.
   Zdefiniuj rozmiary mniejsze niż wymagane, a następnie odtwórz sekwencję. Powiększ rozmiary pola i ponownie odtwórz sekwencję. Zobaczysz, że sekwencja jest albo przycinana, albo otoczona wolnym obszarem, lecz nie jest przeskalowywana.

6. Przeanalizuj kod źródłowy. Jak zobaczysz, sekwencja wideo jest umieszczana w dokumencie za pośrednictwem znacznika <OBJECT>, który zawiera także znacznik <EMBED>.

<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=8,0,0,0" width="640" height="340">

<param name="src" value="sample_movie.dcr">

<embed src="sample_movie.dcr" pluginspage="http://www.macromedia.com/shockwave/download/" width="640" height="340" swliveconnect="true" >

</embed>

</object>

Przekazywanie parametrów do sekwencji wideo Shockwave

Parametry umieszczone w znacznikach <OBJECT> i <EMBED> można wykorzystać do przekazania do sekwencji wideo Shockwave dowolnych informacji, pod warunkiem, że skrypty obsługujące sekwencję potrafią te informacje wykorzystać. Wśród parametrów znajdziesz i te podstawowe, takie jak AUTOPLAY i LOOP, jak i cały szereg parametrów, z których korzystają w swoich skryptach Lingo autorzy sekwencji tworzonych w programie Director. W programie Director parametry są dostępne poprzez funkcje externalParamValue(), externalParamNumber() i externalParamName(). Parametr zdefiniowany w Dreamweaverze musi mieć dokładnie taką samą nazwę, jak parametr użyty w kodzie Lingo.

Ćwiczenie 20.2. Personalizacja sekwencji wideo Shockwave

W tym ćwiczeniu zajmiesz się modyfikowaniem zawierającej baner powitalny sekwencji wideo Shockwave. Sekwencja jest tak zaprogramowana, że oczekuje parametru sw1, którego wartością jest imię osoby witanej. Rysunek 20.9 pokazuje jak użyto tego parametru w programie Director. Wstawisz sekwencję wideo Shockwave na stronie i dodasz ten parametr przypisując mu odpowiednią wartość.

Rys. 20.9. Interfejs programu Director pokazujący sposób użycia parametru sw1. Skrypt można zmieniać i konfigurować tylko z poziomu programu Director. Użytym językiem skryptowym jest Lingo

1. Utwórz nowy plik i zapisz go pod nazwą welcome.html.

2. Wstaw na stronie sekwencję wideo o nazwie welcome.dcr.
   Zmień w inspektorze Property rozmiary pola przydzielonego sekwencji podając w polach W i H wartości 640 i 340.

3. Sprawdź, czy obiekt Shockwave jest zaznaczony i kliknij przycisk Parameters, aby wyświetlić okno dialogowe Parameters.

4. Wybierz z listy parametrów parametr sw1.
   Nie ma tu znaczenia, którego z parametrów sw użyjesz i w jakim celu, jeśli tylko nazwa parametru znajduje się na liście, a definicja parametru w programie Dreamweaver jest zgodna z jego definicją w sekwencji wideo Shockwave.

Początek ramki

Uwaga

Netscape Navigator zezwala na stosowanie dowolnych nazw parametrów. Internet Explorer akceptuje tylko nazwy znajdujące się na liście rozwijanej.

5. Jako wartość parametru podaj swoje imię.

6. Przetestuj sekwencję wideo w przeglądarce.
   Czy Twoje imię pojawia się na powitalnym banerze? Jaka z tego korzyść? Wyobraź sobie, jak szybko można dostosować prezentacje Shockwave witryny sieciowej, bez konieczności tworzenia nowych sekwencji Shockwave. Tak więc sekwencje mogą znaleźć wielorakie zastosowanie, a raz ściągnięty plik można umieścić w kilku miejscach tej samej witryny.

Dodawanie behawiorów do sekwencji wideo Shockwave

Choć sekwencje wideo Shockwave są zazwyczaj wyposażone w kontrolki nawigacji, jednak można je kontrolować także z poziomu przeglądarki za pomocą skryptów JavaScript (Netscape) lub VBScript (Internet Explorer). Dreamweaver udostępnia behawior Control Shockwave or Flash, który umożliwia włączanie i zatrzymywanie odtwarzania, przewijanie oraz przejście do określonej klatki sekwencji.

Początek ramki

Uwaga

Te behawiory nie działają w Internet Explorerze dla systemu Macintosh, ponieważ Internet Explorer nie zezwala na dostęp do obiektów korzystających z modułów przy użyciu tego języka JavaScript. Platforma Macintosh nie powala także na korzystanie z kontrolek ActiveX i języka VBScript.

Koniec ramki

Ćwiczenie 20.3. Korzystanie z behawiora Control Shockwave or Flash

W tym ćwiczeniu zapoznasz się z kolejnymi etapami stosowania wbudowanego behawiora programu Dreamweaver - Control Shockwave or Flash.

1. Otwórz plik welcome.html, nad którym pracowałeś w poprzednim ćwiczeniu.

2. Zaznacz sekwencję wideo Shockwave i nadaj jej nazwę.
   Podobnie jak w przypadku innych elementów strony, także i ten obiekt jakim jest sekwencja wideo musi mieć swoją nazwę, aby można było odwoływać się do niego w skryptach. Wpisz w inspektorze Property jednowyrazową nazwę w polu wskazanym na rysunku 20.10.

Rys. 20.10. Definiowanie nazwy sekwencji wideo Shockwave dla potrzeb skryptów

3. Pod polem sekwencji wideo umieść wyrazy play i stop.
   Będą to połączenia, których kliknięcie uaktywni behawiory play i stop. Najprościej jest utworzyć połączenia tekstowe.

4. Po wpisaniu i sformatowaniu tekstu, dla każdego z wyrazów umieść w polu Link inspektora Property znak #, aby można było dołączyć behawior. Rysunek 20.11 pokazuje wygląd ekranu po wstawieniu obu kontrolek.

Rys. 20.11. Strona welcome.html zawierająca sekwencję wideo Shockwave i kontrolki odtwarzania. Dla obu kontrolek zdefiniowano połączenia puste, na co wskazuje znak # w inspektorze Property

5. Zaznacz połączenie Play, otwórz paletę Behaviors i wybierz z listy behawior Control Shockwave or Flash.
   W oknie dialogowym Control Shockwave or Flash, w którego polu Movie automatycznie wstawiona zostanie nazwa Twojej sekwencji, wybierz akcję Play (patrz rysunek 20.12).

Rys. 20.12. Behawior Control Shockwave or Flash oraz wywołane przez niego okno dialogowe

6. Powtórz punkt 5. dla połączenia Stop.

7. Opcjonalnie możesz ustawić sekwencję wideo Shockwave tak, aby po załadowaniu strony do okna przeglądarki nie była odtwarzana automatycznie. Zaznacz obiekt, kliknij w inspektorze Property przycisk Parameters, aby wyświetlić okno dialogowe Parameters. Kliknij w nim przycisk ze znakiem plus (+), aby otworzyć okno parametrów sekwencji Shockwave (na rysunku 20.7 znajdziesz informacje na temat sposobu dotarcia do parametrów specyficznych dla obiektów Shockwave). Wybierz z listy parametr Autostart i przypisz mu wartość false.
   Dlaczego to rozwiązanie jest opcjonalne? Wydaje się logiczne, aby sekwencja po załadowaniu nie uruchamiała się sama, bo przecież po to właśnie, by umożliwić jej uruchamianie, umieszczany na stronie przycisk Play - z punktu widzenia użytkownika także byłoby czymś dziwacznym, że sekwencja wideo odtwarza się automatycznie, pomimo obecności na stronie przycisku włączającego odtwarzanie. Jednak pamiętaj, że behawiory Play i Stop nie będą działać w przeglądarce Internet Explorer dla systemu Macintosh. Tak więc jeśli wyłączysz opcję autoodtwarzania i będziesz polegał tylko na poleceniu Play, przy pewnych kombinacjach przeglądarka/platforma, użytkownicy nie będą w stanie odtworzyć sekwencji. Te właśnie względy mogłyby uzasadniać rozpoczęcie prezentacji strony z uruchomioną sekwencją wideo (jest to jedna z przyjemności korzystania z plików multimedialnych).

8. Przetestuj sekwencję wideo w przeglądarce lub nawet w kilku różnych przeglądarkach. We wszystkich, poza Internet Explorerem dla systemu Macintosh, behawiory powinny działać.

Sterowanie sekwencją wideo Shockwave bez pomocy programu Dreamweaver

Jeśli miałbyś ochotę napisać własny skrypt JavaScript, możesz obejść się bez wbudowanych behawiorów programu Dreamweaver. Rysunek 20.13 prezentuje listę poleceń języka JavaScript akceptowanych przez sekwencję wideo Shockwave.

Polecenie

Argumenty

Opis

Stop()

-

Zatrzymuje odtwarzanie sekwencji wideo.

Play()

-

Uruchamia odtwarzanie, startując od bieżącej pozycji.

Autostart()

True lub False

Określa czy sekwencja wideo będzie odtwarzana automatycznie, po załadowaniu strony do okna przeglądarki.

Rewind()

-

Powoduje cofnięcie do pierwszej klatki.

GotoFrame(x)

liczba całkowita

Przewinięcie sekwencji do klatki o wskazanym numerze.

GotoMovie(adresURL)

URL sekwencji wideo

Załadowanie innej sekwencji wideo na miejsce bieżącej.

GetCurrentFrame()

-

Zwraca numer bieżącej klatki.

EvalScript(łańcuch)

łańcuch tekstowy

Przesyła dowolny tekst do skryptu Lingo obsługującego sekwencję wideo. Zostanie on przekazany funkcji EvalScript. (Polecenie EvalScript(), o największych możliwościach spośród tu prezentowanych, pozwala wysłać do sekwencji wideo Shockwave niemal dowolne informacje.)

Rys. 20.13. Polecenia JavaScript akceptowane przez sekwencję wideo Shockwave. W kolumnie Argumenty umieszczono informacje, które muszą pojawić się w nawiasach, za nazwą polecenia

Kod źródłowy funkcji JavaScript pozwalającej sterować sekwencją wideo Shockwave jest następujący (te elementy, które możesz dostosowywać, pisane są kursywą):

<script language=””JavaScript””>

function controlShockwave {

var shock;

if (navigator.appName == ””Netscape””) {

shock = document.mojasekwencja;

} else {

shock = mojasekwencja;

}

shock.Play();

}

</script>

Musisz oczywiście pamiętać, że żadna funkcja JavaScript nie będzie działać w przeglądarce Internet Explorer dla systemu Macintosh.

Uwagi końcowe na temat Shockwave

Jeśli tworzysz zawartość Shockwave, do przygotowania kodu HTML nie potrzebujesz wcale programu Dreamweaver. Director ma opcję Publish, które wygeneruje kod HTML niezbędny dla prawidłowego działania sekwencji. Jeśli masz bardziej rozbudowane potrzeby, możesz sięgnąć po narzędzie Aftershock firmy Macromedia. Jest to aplikacja umożliwiająca generowanie stron HTML wraz z bardzo rozbudowaną warstwą skryptową. W Aftershock można stosować pliki Shockwave i Flash. Na rysunku 20.14 pokazana jest strona utworzona w Aftershock, a otwarta w programie Dreamweaver.

Rys. 20.14. W oknie programu Dreamweaver otwarty został plik HTML utworzony w programie Aftershock. Zwróć uwagę, że inspektor Property nie zezwala na jakąkolwiek bezpośrednią edycję, jest natomiast przygotowany do uruchomienia programu Aftershock

QuickTime

Nie daj się okpić. To, że QuickTime jest produktem Apple, nie oznacza wcale, że jest on przeznaczony tylko dla komputerów Macintosh. QuickTime to zgodne z wieloma platformami rozszerzenie systemowe i moduł dodatkowy rozbudowujący możliwości przeglądarki, a umożliwia on synchronizację mediów i realizację interaktywności podobnej do serwowanej przez aplikacje Shockwave i Flash. Sekwencje wideo QuickTime tworzone są przez zsynchronizowane ścieżki - ścieżki zawierające obraz wideo, dźwięk, duszki (dla interaktywnych i animowanych elementów), dane 3D (na potrzeby modelowania trójwymiarowego), dane VR (umożliwiające realizację wirtualnej rzeczywistości), tekst, a nawet animacje Flash (w swojej pełnej postaci).

Początek ramki

Uwaga

Aby dowiedzieć się więcej na temat produktu QuickTime, odwiedź stronę www.apple.com/quicktime. Firma Apple opublikowała także podręczniki na temat QuickTime w serii „QuickTime Developer , w tym także bardzo pogłębiony podręcznik „QuickTime for the Web”.

Koniec ramki

Przesył strumieniowy i FastStart

Wszystkie sekwencje wideo QuickTime 4 używają technologii FastStart. W technice tej informacje niezbędne do uruchomienia odtwarzania umieszczane są w kilku pierwszych klatkach, co pozwala rozpocząć odtwarzanie sekwencji wideo natychmiast po ściągnięciu pierwszej partii sekwencji. Jeśli tylko wymagana przez sekwencję przepustowość łącza nie przekracza przepustowości połączenia użytkownika, sekwencja będzie odtwarzana płynnie.

Prawdziwym jednak powodem do chwały jest dla QuickTime strumieniowy przesył danych realizowany po stronie serwera. W przeciwieństwie do rozwiązania przyjętego w Shockwave i Flash, gdzie przesył realizowany był po stronie klienta, strumieniowy przesył realizowany po stronie serwera oznacza, że dane nie są w rzeczywistości ściągane na komputer użytkownika, lecz są dostarczane po jednej klatce, podobnie jak sygnał telewizyjny lub radiowy do odbiorników. Strumieniowy przesył danych może odbywać się na bieżąco (tak jak w przypadku audycji prowadzonych na żywo) lub źródłem danych mogą być duże pliki złożone na serwerze sieciowym. Jeśli chcesz wykorzystać możliwości jakie daje ta technika, musisz znaleźć serwer sieciowy, na którym zainstalowano oprogramowanie obsługujące strumieniowy przesył danych QuickTime (dostępne są różne wersje takiego oprogramowania, w tym także bezpłatne oprogramowanie dla Linuxa).

Uwagi na temat QuickTime

Moduł QuickTime jest uważany za podstawę multimediów w sieci, rozpowszechnioną i pewną zarówno na platformach Mac , jak i PC, oraz dla obu głównych typów przeglądarek. Zgodnie z danymi podanymi przez Apple na całym świecie rozprowadzono i zainstalowano 100 milionów kopii programów do odtwarzania QuickTime Player i modułu dodatkowego dla przeglądarek.

Niestety do momentu, gdy powstawała ta książka, Apple nie wypuścił jeszcze kontrolki ActiveX dla modułu QuickTime, co ogranicza Ci możliwości sterowania treściami QuickTime za pomocą skryptów w przeglądarce Internet Explorer. Nie ma natomiast problemów z QuickTime w przeglądarce Netscape.

W czerwcu 2000 roku RealNetworks udzieliło modułowi licencji na stosowanie z programem RealPlayer, co oznacza, że moduł dodatkowy Real G2 (i kontrolka ActiveX) może wyświetlać także zawartość QuickTime. Problemem jest jednak to, że polecenia skryptowe przewidziane do sterowania modułem QuickTime mogą nie działać tak dobrze, jak powinny.

Wszystkie profesjonalne programy do tworzenia dźwięków, filmów i animacji umożliwiają tworzenie plików w formacie QuickTime. Wśród tego typu oprogramowania są Electrifier Pro (tylko dla komputerów Mac), LiveStage (Mac i PC) i Adobe GoLive (Mac i PC), przy czym ten ostatni zawiera niewielki, elegancki mini-program do tworzenia plików w formacie QuickTime, będący elementem składowym edytora stron WWW. Ograniczone możliwości wbudowano także w QuickTime Pro, a w programie Flash możliwy jest eksport interaktywnych prezentacji jako sekwencji wideo QuickTime.

Różnorodne bezpłatne programy narzędziowe współpracujące z QuickTime - w tym Plug-In Helper, do którego wrócimy później - są dostępne pod adresem www.developer.apple.com/quicktime/quicktimeintro/tools.

Wstawianie obiektu QuickTime

Aby wstawić w dokumencie programu Dreamweaver zawartość QuickTime, korzystasz z opisanej już wcześniej ikony Insert Plugin (nie próbuj korzystać z ikony Insert ActiveX, bo nie ma jeszcze kontrolki ActiveX dla QuickTime).

Początek ramki

Uwaga

Jeśli chciałbyś rozbudować możliwości swojej kopii programu Dreamweaver, na stronie Macromedia Exchange znajdziesz obiekt QuickTime. To rozszerzenie dodaje do kategorii Common palety obiektów ikonę Insert QT i umożliwia obsługę obiektów QT za pomocą okna właściwości, które ułatwia dostęp do wszystkich parametrów.

Koniec ramki

Okno właściwości Property Inspector dla zawartości QuickTime ma oczywiście charakter ogólny, bowiem używasz ogólnego obiektu modułu, aby ją wstawić. Podobnie jak dla Shockwave, rozmiary pola (pola W i H) są zawsze domyślnie równe 32x32 piksele. Jeśli przyjmiesz rozmiary mniejsze niż oryginalne rozmiary klatki sekwencji, klatka zostanie przycięta, lecz nie przeskalowana. Jeśli rozmiary będą większe, wokół klatki dodany zostanie wolny obszar.

Sekwencje wideo QuickTime akceptują wiele parametrów. Aby przypisać parametr, którego nie ma w inspektorze Property, kliknij w inspektorze Property przycisk Parameters i otwórz okno dialogowe Parameters. Wpisz w tym oknie nazwy parametrów i określ ich wartości (w przeciwieństwie do okna Parameters dla sekwencji Shockwave, w tym przypadku nie masz możliwości korzystania z pomocniczej listy, z której można parametry wybierać). Rysunek 20.15 prezentuje listę użytecznych parametrów akceptowanych przez sekwencje wideo QuickTime.

Ćwiczenie 20.4. Wstawianie sekwencji wideo QuickTime

W tym ćwiczeniu wstawisz w dokumencie HTML sekwencję wideo QuickTime (na jej przykładzie przekonasz się o elastyczności tego formatu - zawiera ona dane MIDI, grafikę wektorową i obraz wideo) i skonfigurujesz szereg parametrów, które wpływają na sposób jej odtwarzania.

1. Utwórz nowy plik HTML. Zapisz go jako quicktime.html.

2. Wstaw na stronie obiekt sample.mov korzystając z ikony Insert Plugin na palecie obiektów (kategoria Special).
   Jeśli jeszcze tego nie zrobiłeś, skopiuj plik z dysku CD na swój dysk twardy.

3. Zaznacz wstawiony obiekt i skonfiguruj niektóre podstawowe ustawienia:
   W = 416
   H = 326
   pluginspage = http://www.apple.com/quicktime/download
   (Rzeczywista wysokość klatki wynosi 310 pikseli, lecz dodatkowe 16 pikseli dodajemy na pasek sterowania, który pojawi się poniżej klatki sekwencji wideo.)

Parametr

Wartość

Opis

src

Adres URL

Nazwa odtwarzanej sekwencji (ten parametr jest niezbędny).

pluginspage

”http://www.apple.com/

quicktime/download”

Adres, pod którym przeglądarka znajdzie w razie potrzeby moduł QT.

type

”application/x-quicktime”

Na wypadek, gdyby serwer nie przesłał wraz ze ściąganym plikiem jego typu MIME, ten parametr umożliwia poinformowanie przeglądarki, jak ma potraktować plik.

name

Dowolna nazwa jednowyrazowa

Parametr jest wymagany przez znacznik <EMBED>, jeśli w skryptach mają się znaleźć odwołania do sekwencji.

width

Liczba całkowita (liczba pikseli)

Szerokość pola przydzielanego sekwencji na stronie. Dreamweaver nie potrafi samodzielnie określić tej wartości. Jeśli przyjęta wartość będzie różna od rzeczywistej, klatka zostanie przycięta lub pojawi się obok wolny obszar.

height

Liczba całkowita (liczba pikseli).

Wysokość pola przydzielanego sekwencji na stronie. Dreamweaver nie potrafi samodzielnie określić tej wartości. Jeśli przyjęta wartość będzie różna od rzeczywistej, klatka zostanie przycięta lub pojawi się obok wolny obszar.

align

Wartości dostępne z menu rozwijanego.

Parametr określa sposób wyrównania w sytuacji, gdy obok sekwencji wideo (na przykład w tej samej komórce tabeli lub w akapicie) umieszczony zostanie inny element strony.

bgcolor

Wartości należy podać w postaci sześciocyfrowego kodu szesnastkowy koloru; można też zdefiniować kolor stosując jego nazwę.

Jeśli rozmiary pola przydzielonego sekwencji wideo będą większe niż rozmiary klatki sekwencji, parametr ten będzie określał kolor pozostałej części przydzielonego obszaru.

vspace

Liczba całkowita (liczba pikseli)

Dodaje wolny obszar nad i pod polem sekwencji wideo. Określ jego szerokość w pikselach.

hspace

Liczba całkowita (liczba pikseli)

Dodaje wolny obszar z prawej i lewej strony pola sekwencji wideo. Określ jego szerokość w pikselach.

autoplay

True lub False

Określa, czy odtwarzanie rozpocznie się automatycznie, natychmiast po załadowaniu.

loop

True, False lub Palindrom

Pozwala włączyć powtarzanie sekwencji. Domyślnie ma wartość False. Wartość Palindrome powoduje naprzemienne odtwarzanie sekwencji do przodu i wstecz.

controller

True, False lub qtvr

Określa czy pod polem sekwencji ma być wyświetlony pasek sterujący i jaki jest jego typ. Domyślnie pasek zawiera przyciski Play, Stop i Pause. W przypadku sekwencji QTVT należy stosować pasek qtvt. Jeśli decydujesz się na dołączenie paska sterującego, musisz powiększyć o 16 pikseli wartość podawaną w atrybucie height. W przeciwnym razie pasek zostanie obcięty.

scale

”ToFit”, ”Aspect” lub liczba

Określa czy zachowane mają być oryginalne wymiary klatki sekwencji (wartość domyślna =1), czy też mają być one powiększone (wartości >1) lub pomniejszone (wartości<1). ToFit spowoduje przeskalowanie bez zachowania proporcji, dopasowując sekwencję do wymiarów zdefiniowanych za pomocą atrybutów width i height. Aspect spowoduje przeskalowanie z zachowaniem proporcji.

volume

liczba całkowita z przedziału 0-100

Określa poziom głośności (wartość domyślna wynosi 100, wartość równa 0 oznacza całkowite wyciszenie).

kioskmode

True lub False

Jeśli True, użytkownik nie ma możliwości zapisać kopii sekwencji (wartość domyślna = False).

starttime

Wskaźnik czasu w formacie godziny:minuty:sekundy:klatki - wartość domyślna to 00:00:00.

Definiuje klatkę, od której rozpocznie się odtwarzanie sekwencji (w skali czasu).

endtime

Wskaźnik czasu w formacie godziny:minuty:sekundy:klatki.

Definiuje klatkę, na której zakończy się odtwarzanie sekwencji (w skali czasu). Ustawienie wpływa jedynie na odtwarzanie sekwencji , a nie na pobieranie jej z sieci - cała sekwencja musi zostać ściągnięta.

href

bezwzględny lub względny adres URL

Jeśli atrybut jest stosowany, kliknięcie w polu sekwencji spowoduje przejście pod wskazany adres URL.

targetn

”nazwa_ramki”

Wartości to: _self, _top, _parent, _blank, myself lub nazwa konkretnej ramki.

Jest stosowany wraz z atrybutem hotspot (n jest identyfikatorem obszaru aktywnego) lub href.

playeveryframe

True lub False

W przypadku wolniejszych komputerów sekwencje mogą „gubić” klatki, ponieważ procesor nie jest w stanie przetworzyć danych tworzących klatkę w odpowiednim czasie. Jeśli parametr ma wartość True, odtworzone zostaną wszystkie klatki, nawet jeśli spowoduje to spowolnienie odtwarzania.

qtnextn

Adres URL podany w następujący sposób: ”<URL>”

lub ”<URL>T<cel>” , jeśli zdefiniowano parametr target. n może przyjmować wartości od 0 do 256.

Wskazuje sekwencję wideo, która zostanie odtworzona jako następna. Zazwyczaj stosowane są wartości: T<myself> (spowoduje zastąpienie bieżącej sekwencji), T<quicktimeplayer> (uruchomi aplikację QuickTime Player) lub nazwa dowolnego okna lub ramki. Liczba całkowita n pozwala ustawić ciąg sekwencji do odtwarzania, np.: qtnext1, qtnext2, itd. (należy stosować adresy bezwzględne lub podawać je względem pliku zawierającego sekwencję QuickTime, a nie pliku HTML, który go zawiera).

Rys. 20.15. Niektóre użyteczne parametry akceptowane przez sekwencje wideo QuickTime

Początek ramki

Podpowiedź

Jeśli zainstalowałeś QuickTime na swoim komputerze, masz program odtwarzający QuickTime Player. Aby określić rzeczywiste rozmiary klatki sekwencji QT, otwórz plik w tym programie i wybierz Get Info w menu Movie. W oknie, które się otworzy, rozwiń menu z prawej strony i wybierz Size.

Koniec ramki

4. Spróbuj odtworzyć sekwencję. Jeśli zainstalowałeś QuickTime na swoim komputerze, po naciśnięciu przycisku Play w inspektorze Property, Dreamweaver będzie w stanie rozpocząć odtwarzanie.

5. Poeksperymentuj z innymi parametrami.
   Kliknij w inspektorze Property przycisk Parameters, aby wyświetlić okno Parameters. Wypróbuj działanie takich oto parametrów:

• controller = false
  (Przetestuj stronę - jak zobaczysz, pole sekwencji nie ma paska sterowania, co uniemożliwia włączenie i zatrzymanie odtwarzania. Ustawienie H o 16 pikseli przekracza rzeczywistą wysokość sekwencji.)

• volume = 50

• loop = true

• autoplay = false
  (Bezwzględnie pasek sterowania jest potrzebny w tej sytuacji!).

• scale = ToFit
  (Po wprowadzeniu tego parametru, zmień drastycznie wymiary sekwencji, aby jej pole było rzeczywiście spłaszczone i szerokie. Zobaczysz, że sekwencja dostosuje się do tych rozmiarów, nawet jeśli miałoby to znaczyć zniekształcenie obrazu.)

• scale = Aspect
  bgcolor = #FF0000
  (Nie zmieniaj rozmiarów i wyświetl sekwencję raz jeszcze. Teraz nie będzie zniekształceń, a wolny obszar będzie pokrywało czerwone tło.)

• href = http://www.newrider.com
  (Gdy zdefiniowany zostanie ten parametr, kliknięcie pola sekwencji w przeglądarce powinno poprowadzić Cię na strony Wydawnictwa New Riders.)

• href = totem.mov
  target = myself
  (Jeśli plik totem.mov z dysku CD będzie w tym samym folderze, co plik sample.mov, kliknięcie pola sekwencji powinno spowodować zastąpienie filmu sample.mov filmem totem.mov.)

• qtnext1 = <totem.mov> T<myself>
  (Pozwól, by pierwsza z sekwencji wideo odtworzona została w przeglądarce w całości. Po zakończeniu odtwarzania, automatycznie powinna zastąpić ją sekwencja totem.mov. Zwróć uwagę na nietypową postać wartości tego parametru.)

Ćwiczenie 20.5. Definiowanie serii odtwarzanych sekwencji przy użyciu programu Plug-In Helper

Plug-In Helper to jeden z kilku bezpłatnych programów narzędziowych udostępnianych przez Apple do obsługi sekwencji wideo QuickTime. Z jego pomocą możesz zapisywać parametry bezpośrednio w sekwencji wideo QuickTime, zamiast podawać je w znaczniku <EMBED> kodu HTML. Kiedy jest to użyteczne? Jeśli korzystasz z parametrów HREF lub QTNEXT1, aby zastąpić jedną sekwencję wideo inną, możesz dla każdej z nich ustawić osobne parametry.

Plug-In Helper pozwala także zabezpieczyć sekwencje wideo QT przed kopiowaniem, tak aby użytkownik nie mógł zapisać ich z poziomu okna przeglądarki na swoim dysku twardym (pamiętaj jednak, co potwierdzą to wszyscy guru komputerowi z firmy Apple, że nie ma całkowicie skuteczniej metody zabezpieczenia się przed hakerami. Najwyżej możesz liczyć na onieśmielenie przeciętnego użytkownika przed „przypadkowym pożyczeniem sobie” Twoich plików).

W tym ćwiczeniu utworzysz niekończącą się prezentację, w której każda z sekwencji wideo jest odtwarzana w pętli, dopóki użytkownik nie kliknie pola sekwencji, co spowoduje wyświetlenie kolejnego filmu (aby zobaczyć końcowy rezultat, otwórz plik pictureshow.html, który znajdziesz na dysku CD dołączonym do książki). Będziesz korzystać z trzech sekwencji wideo, dla których zdefiniowano już niektóre parametry korzystając z programu Plug-In Helper.

Dlaczego potrzebny Ci będzie Plug-In Helper? Aby się dowiedzieć, spróbuj najpierw wykonać swoje zadanie bez pomocy tej aplikacji.

1. Utwórz nowy plik. Zapisz go jako pictureshow_test.html.

2. Korzystając z ikony Insert Plugin palety obiektów wstaw na stronie plik nefertiti_plain.mov.
   Jeśli jeszcze tego nie zrobiłeś, przekopiuj ten plik z dysku CD na swój dysk Twardy, aby ułatwić do niego dostęp.
   Wszystkie pliki, w których nazwach użyto wyrazu „plain”, nie mają skonfigurowanych parametrów.

3. Dodaj niezbędne parametry.
   Potrzebne Ci połączenie, które będzie prowadziło do następnej sekwencji wideo, jeśli aktualnie prezentowana zostanie kliknięta. Dodaj więc następujące parametry:
   width = 428
   height = 321
   loop = true
   controller = false
   href = mumy_plain.mov
   target = myself

4. Wypróbuj swoją prezentację!
   Prawdopodobnie od razu napotkasz na pewne problemy. Przede wszystkim plik mummy_plain.mov próbuje wyświetlić się ze swoim własnym paskiem sterowania. A gdy już znajdzie się na miejscu, nie ma sposobu, aby załadować następny plik.

5. Zastąp plik nefertiti_plain.mov plikiem nefertiti.mov.
   Nowy plik ma już w sobie osadzonych kilka parametrów: parametry LOOP, CONTROLLER, HREF i TARGET zostały dodane przy użyciu programu Plug-In Helper. Rysunek 20.16 prezentuje interfejs programu Plug-In Helper oraz parametry pliku nefertiti.mov.
   

Rys. 20.16. Interfejs programu Plug-In Helper prezentujący plik nefertiti.mov. Zwróć uwagę, że adres URL sekwencji wideo umieszczony jest w osobnym polu, a nie wśród pozostałych parametrów jako parametr HREF (nie ma to jednak znaczenia). Target jest natomiast na liście parametrów. Sekwencja wideo została ponadto zabezpieczona przed kopiowaniem

6. W programie Dreamweaver usuń w oknie dialogowym Parameters wszystkie parametry.
   Jeśli bowiem będą one obecne w obu miejscach, te które zdefiniowano w Dreamweaverze zdominują ustawienia. Nie chcesz przecież zdezorientować przeglądarki.

7. Przetestuj raz jeszcze swój pokaz.
   Ze względu na osadzone w sekwencjach parametry, wszystkie trzy filmy powinny załadować się bez pasków sterujących i powinny być odtwarzane w pętli. Po kliknięciu, każda z sekwencji wideo powinna uruchamiać następną.

Obiekty QTVR

QuickTime Virtual Reality (QTVR) to pewna odmiana sekwencji wideo QT rozbudowanej o ścieżkę VR. Ścieżki VR zawierają dane - z kamer lub wygenerowane komputerowo za pośrednictwem oprogramowania do tworzenia animacji trójwymiarowych - i umożliwiają użytkownikowi ingerencję w sceny i układ obiektów we wszystkich trzech wymiarach.

Istnieją dwa typy sekwencji QTVR: VR panorama i VR object. Panoramiczna sekwencja wideo prezentuje oczom oglądającego scenę; widz może obraz obracać wokół siebie, oglądać w postaci panoramicznej, nachylać i przybliżać; może zobaczyć wszystko co jest wokół niego, tak jakby stał na środku sceny i rozglądał się wokół. Pozycja obserwatora i wszystko, co widzi on wokół, nosi nazwę węzła (ang. node). W przypadku panoramy o wielu węzłach, obserwator może przenosić się między nimi klikając obszary aktywne. Na przykład w jednym z węzłów mógłbyś oglądać salon, a kliknięcie drzwi kuchennych przenosiłoby Cię do innego węzła - kuchni.

Drugi z typów sekwencji wideo prezentuje obiekt - obserwator może obiekt przeciągać i oglądać go z dowolnej strony.

Sekwencje QTVR zachowują się w przeglądarce zasadniczo podobnie do zwykłych sekwencji wideo QT. Mają jednak własny zestaw parametrów. Prezentuje go rysunek 20.17.

Parametr

Wartość

Opis

correction

”None” lub ”Full”

Tryb korekcji panoramy. Wartość ”None” powoduje prezentację sekwencji typu VR panorama bez korekcji zawijania (zniekształcenie w pionie i w poziomie); wartość ”Full” włącza korekcję.

fov

wartość w stopniach

Definiuje wstępne pole widzenia (stopień przybliżenia).

pan

wartość w stopniach z zakresu od 0 do 360^o

Definiuje wstępny kąt widzenia.

node

Liczba całkowita reprezentująca ID węzła

Definiuje węzeł początkowy dla wielowęzłowej sekwencji VR.

tilt

wartość w stopniach

Określa początkowy kąt nachylenia (w górę lub w dół).

Rys. 20.17. Parametry sekwencji wideo QTVR

Korzystanie ze strumieniowego przesyłu QuickTime

Strumieniowe sekwencje wideo QT stanowią specjalny typ sekwencji, w których dane dostarczane są na bieżąco przez serwer. Strumieniowy przesył danych odbywa się za pośrednictwem protokołu RTSP (Real-Time Streaming Protocol), a HTTP (Hypertext Transfer Protocol). Aby można było skorzystać z tej technologii, serwer musi zostać skonfigurowany pod kątem obsługi protokołu RTSP. Przesyłane strumieniowo dane mogą pochodzić z nadawanych na żywo audycji lub z plików zapisanych na serwerze czy też w innym miejscu.

Aby możliwe było odtwarzanie sekwencji wideo QT w sposób strumieniowy, musi ona zostać zapisana w specjalnym formacie. Takie możliwości daje oprogramowanie QuickTime Pro firmy Apple. Kolejne wymaganie to umieszczenie sekwencji na serwerze, który pozwala na realizację strumieniowego przesyłu danych. Ostatni wymóg dotyczy połączenia prowadzącego z Twojej strony HTML do pliku QT - konieczne jest tu zastosowanie adresowania bezwzględnego, a stosowanym protokołem musi być RTSP, tak jak w tym przykładzie:

rtsp://www.domena.com/mojasekwencja.mov

Czasami ta metoda adresowania wprowadza przeglądarki w błąd i w efekcie nie wiedzą one jaki moduł dodatkowy powinny uruchomić, aby obsłużyć sekwencję wideo. Warto więc dodać znacznik <EMBED> o takiej postaci:

<embed src=”fake_movie.mov” ...

qtsrc=”rtsp://www.domena.com/mojasekwencja.mov”>

Plik fake_movie.mov to niewielka, fikcyjna sekwencja wideo, którą tworzysz, aby zarezerwować miejsce na tę właściwą - dopóki przesyłana strumieniowo sekwencja nie zostanie odnaleziona, odtwarzania nie da się uruchomić. Parametr QTSRC specyfikuje plik właściwy. W programie Dreamweaver można zdefiniować ten parametr w oknie dialogowym Parameters. Rysunek 20.8 prezentuje ten i inne parametry dla odtwarzanych strumieniowo sekwencji wideo QT.

Parametr

Wartość

Opis

starttime

Wskaźnik czasu w formacie godziny:minuty:sekundy:klatki - wartość domyślna to 00:00:00:00.

Definiuje klatkę, od której rozpocznie się odtwarzanie sekwencji (w skali czasu).

endtime

Wskaźnik czasu w formacie godziny:minuty:sekundy:klatki.

Definiuje klatkę, na której zakończy się odtwarzanie sekwencji (w skali czasu). Ustawienie wpływa jedynie na odtwarzanie sekwencji , a nie na pobieranie jej z sieci - cała sekwencja musi zostać ściągnięta, tak więc nie jest to bardzo efektywny parametr.

qtsrc

URL

Informuje moduł dodatkowy, aby zignorował atrybut src i odtworzył plik, którego URL jest wartością parametryu qtsrc. Jest to przydatne, aby powstrzymać przeglądarkę przed próbami obsługi pliku przy użyciu innych modułów dodatkowych, oraz aby wskazać kolejny z odtwarzanych strumieniowo filmów.

qtsrcchokespeed

Liczba reprezentująca przepustowość w bitach na sekundę

Określa maksymalną przepustowość, z jakiej ściągany strumieniowo plik może korzystać. W przypadku użytkowników korzystających z bardzo szybkich łączy (takich jak na przykład linie T1) pozwala zapobiec zdominowaniu serwera lub zajęciu całego pasma jego łączy.

Rys. 20.18. Niektóre użyteczne parametry akceptowane przez sekwencje wideo QuickTime odtwarzane strumieniowo

Sterowanie sekwencją wideo QuickTime przy pomocy skryptów JavaScript

Można i nie można sterować sekwencją wideo QuickTime przy pomocy skryptów JavaScript. Sekwencje wideo QT funkcjonują jako obiekty JavaScript. Z tej racji można do nich zastosować cały wachlarz właściwości i metod. Niestety, w czasie, gdy powstawała ta książka, sterowanie działało jedynie w przeglądarce Netscape. Internet Explorer jak na razie nie zezwala obiektom wstawionym za pomocą znacznika <EMBED> komunikować się z modułami za pomocą języka JavaScript. No i oczywiście nie ma wersji ActiveX dla modułu QuickTime, co wyklucza korzystanie ze znacznika <OBJECT>. Rysunek 20.19 prezentuje niektóre użyteczne właściwości obiektu QT dostępne poprzez JavaScript - wszystkie świetnie działają w przeglądarce Netscape.

Parametr

Wartość

Opis

src

Adres URL

Nazwa odtwarzanej sekwencji.

pluginspage

”http://www.apple.com/

quicktime/download”

Adres, pod którym przeglądarka znajdzie w razie potrzeby moduł QT.

type

”application/x-quicktime”

Na wypadek, gdyby serwer nie przesłał wraz ze ściąganym plikiem jego typu MIME, ten parametr umożliwia poinformowanie przeglądarki, jak ma potraktować plik.

name

Dowolna nazwa jednowyrazowa

Parametr jest wymagany przez znacznik <EMBED>, jeśli w skryptach mają się znaleźć odwołania do sekwencji.

width

Liczba całkowita (liczba pikseli)

Szerokość pola przydzielanego sekwencji na stronie. Dreamweaver nie potrafi samodzielnie określić tej wartości. Jeśli przyjęta wartość będzie różna od rzeczywistej, klatka zostanie przycięta lub pojawi się obok wolny obszar.

height

Liczba całkowita (liczba pikseli).

Wysokość pola przydzielanego sekwencji na stronie. Dreamweaver nie potrafi samodzielnie określić tej wartości. Jeśli przyjęta wartość będzie różna od rzeczywistej, klatka zostanie przycięta lub pojawi się obok wolny obszar.

align

Wartości dostępne z menu rozwijanego.

Parametr określa sposób wyrównania w sytuacji, gdy obok sekwencji wideo (na przykład w tej samej komórce tabeli lub w akapicie) umieszczony zostanie inny element strony.

bgcolor

Wartości należy podać w postaci sześciocyfrowego kodu szesnastkowy koloru; można też zdefiniować kolor stosując jego nazwę.

Jeśli rozmiary pola przydzielonego sekwencji wideo będą większe niż rozmiary klatki sekwencji, parametr ten będzie określał kolor pozostałej części przydzielonego obszaru.

vspace

Liczba całkowita (liczba pikseli)

Dodaje wolny obszar nad i pod polem sekwencji wideo. Określ jego szerokość w pikselach.

hspace

Liczba całkowita (liczba pikseli)

Dodaje wolny obszar z prawej i lewej strony pola sekwencji wideo. Określ jego szerokość w pikselach.

autoplay

True lub False

Określa, czy odtwarzanie rozpocznie się automatycznie, natychmiast po załadowaniu.

loop

True, False lub Palindrom

Pozwala włączyć powtarzanie sekwencji. Domyślnie ma wartość False. Wartość Palindrome powoduje naprzemienne odtwarzanie sekwencji do przodu i wstecz.

controller

True, False lub qtvr

Określa czy pod polem sekwencji ma być wyświetlony pasek sterujący i jaki jest jego typ. Domyślnie pasek zawiera przyciski Play, Stop i Pause. W przypadku sekwencji QTVT należy stosować pasek qtvt. Jeśli decydujesz się na dołączenie paska sterującego, musisz powiększyć o 16 pikseli wartość podawaną w atrybucie height. W przeciwnym razie pasek zostanie obcięty.

scale

”ToFit”, ”Aspect” lub liczba

Określa czy zachowane mają być oryginalne wymiary klatki sekwencji (wartość domyślna =1), czy też mają być one powiększone (wartości >1) lub pomniejszone (wartości<1). ToFit spowoduje przeskalowanie bez zachowania proporcji, dopasowując sekwencję do wymiarów zdefiniowanych za pomocą atrybutów width i height. Aspect spowoduje przeskalowanie z zachowaniem proporcji.

volume

liczba całkowita z przedziału 0-100

Określa poziom głośności (wartość domyślna wynosi 100, wartość równa 0 oznacza całkowite wyciszenie).

kioskmode

True lub False

Jeśli True, użytkownik nie ma możliwości zapisać kopii sekwencji (wartość domyślna = False).

starttime

Wskaźnik czasu w formacie godziny:minuty:sekundy:klatki - wartość domyślna to 00:00:00.

Definiuje klatkę, od której rozpocznie się odtwarzanie sekwencji (w skali czasu).

endtime

Wskaźnik czasu w formacie godziny:minuty:sekundy:klatki.

Definiuje klatkę, na której zakończy się odtwarzanie sekwencji (w skali czasu). Ustawienie wpływa jedynie na odtwarzanie sekwencji , a nie na pobieranie jej z sieci - cała sekwencja musi zostać ściągnięta.

href

bezwzględny lub względny adres URL

Jeśli atrybut jest stosowany, kliknięcie w polu sekwencji spowoduje przejście pod wskazany adres URL.

targetn

”nazwa_ramki”

Wartości to: _self, _top, _parent, _blank, myself lub nazwa konkretnej ramki.

Jest stosowany wraz z atrybutem hotspot (n jest identyfikatorem obszaru aktywnego) lub href.

playeveryframe

True lub False

W przypadku wolniejszych komputerów sekwencje mogą „gubić” klatki, ponieważ procesor nie jest w stanie przetworzyć danych tworzących klatkę w odpowiednim czasie. Jeśli parametr ma wartość True, odtworzone zostaną wszystkie klatki, nawet jeśli spowoduje to spowolnienie odtwarzania.

qtnextn

Adres URL podany w następujący sposób: ”<URL>”

lub ”<URL>T<target>” , jeśli zdefiniowano parametr target. n może przyjmować wartości od 0 do 256.

Wskazuje sekwencję wideo, która zostanie odtworzona jako następna. Zazwyczaj stosowane są wartości: <myself> (spowoduje zastąpienie bieżącej sekwencji), <quicktimeplayer> (uruchomi aplikację QuickTime Player) lub nazwa dowolnego okna lub ramki. Liczba całkowita n pozwala ustawić ciąg sekwencji do odtwarzania, np.: qtnext1, qtnext2, itd. (należy stosować adresy bezwzględne lub podawać je względem pliku zawierającego sekwencję QuickTime, a nie pliku HTML, który go zawiera).

Rys. 20.19. Właściwości obiektu sekwencji wideo QuickTime. Obsługuje je tylko Netscape

Aktywacja sterowania sekwencją wideo QuickTime za pomocą JavaScript

Aby można było określać właściwości obiektów QT za pomocą języka JavaScript, musisz to najpierw umożliwić. W tym celu wywołaj okno dialogowe Parameters i parametrowi enablejavascript przypisz wartość true.

Wywoływanie funkcji JavaScript przez sekwencję wideo QuickTime

Chociaż Internet Explorer nie zezwala na stosowanie poleceń języka JavaScript do sekwencji wideo QT, to w obu przeglądarkach można wykorzystać sekwencję wideo QT do wydania poleceń JavaScript przeglądarce. Kliknięcie pola sekwencji wideo QT - czy też wyznaczonego obszaru aktywnego tego pola - może aktywować dowolną funkcję JavaScript. Można to zrobić na kilka sposobów, co za chwilę sam zobaczysz.

Korzystanie z parametru HREF

Wartością parametru HREF znacznika <EMBED> może być nie tylko adres URL, lecz także wyrażenie JavaScript. W takim przypadku skrypt jest aktywowany, gdy użytkownik klika w polu sekwencji wideo. Polecenie może mieć postać pełnego, prostego wyrażenia JavaScript lub też wywołania funkcji zdefiniowanej w sekcji HEAD dokumentu. Jedyne ograniczenie stanowi sam sposób aktywacji polecenia - konieczne jest bowiem kliknięcie pola sekwencji, nie ma więc możliwości, aby utworzyć zewnętrzne przyciski lub kontrolki. Składnia wyrażenia jest następująca:

<embed name=”test” src=”vaquita.mov” width=”320” height=”240” enablejavascript=”true” href=”javascript:callThisFunction()”>

</embed>

Ta metoda ciągle nie działa zbyt dobrze w Internet Explorerze.

Korzystanie z programu Plug_in Helper

Bardziej skuteczną metodą, która rzeczywiście działa w obu typach przeglądarek, jest wsparcie się programem Plug-In Helper i osadzenie adresu URL lub ścieżki URL bezpośrednio w samej sekwencji wideo. W przypadku ciągu sekwencji wideo QT zdefiniowanego przy użyciu parametrów qtnextn, każda z sekwencji może mieć własny adres URL. Wówczas można tak zdefiniować ustawienia, że kliknięcie pola sekwencji wideo o danym adresie spowoduje wykonanie odrębnych poleceń JavaScript. Jeśli sekwencja QT zawiera kilka ścieżek wideo, czy to wyświetlanych sekwencyjnie, czy też równolegle, możesz za pomocą programu Plug-In Helper przypisać każdej z nich inny URL. Taka sekwencja wideo będzie zachowywać się podobnie jak mapa odnośników, reagując w różny sposób w zależności od miejsca, w którym użytkownik kliknie.

Ćwiczenie 20.6. Przypisywanie sekwencji wideo QT behawiorów

Być może z przyjemnością dodałbyś polecenia JavaScript do swoich sekwencji wideo QT, lecz nie chcesz sam pisać skryptów. Odrobina zmian w kodzie źródłowym, drobna pomoc ze strony programu Plugin-Helper i możesz sięgać po przygotowane już behawiory programu Dreamweaver. W tym ćwiczeniu tak skonfigurujesz sekwencję wideo, że jej kliknięcie spowoduje wyświetlenie tekstu na warstwie.

1. Utwórz nowy plik i zapisz go pod nazwą qt_layers.html.

2. Narysuj warstwę i umieść na niej sekwencję wideo QT o nazwie totem.mov.
   Wymiary samej sekwencji wideo, a więc bez paska sterowania, wynoszą 416x310. Poeksperymentuj z różnymi parametrami, nie zmieniaj jedynie atrybutu HREF. Jak zobaczysz, większość treści odtwarzanych przy pomocy modułów może funkcjonować na warstwie. Skorzystaj z inspektora Property i nadaj warstwie nazwę Movie.

3. Wstaw kolejną warstwę, obok tej zawierającej pole sekwencji wideo - tu pojawi się opisowy tekst. Nazwij warstwę Blurb. Nie dopuść, aby obie warstwy się pokrywały - zawartość korzystająca z modułu dodatkowego nie radzi sobie dobrze z obsługą parametru z-index.

Początek ramki

Podpowiedź

Jeśli umieszczasz zawartość korzystającą z modułu dodatkowego na warstwie, nie stosuj skomplikowanych ustawień. Taka warstwa i tak będzie wyświetlana na pozostałych, bez względu na wartość atrybutu z-index. Widzialność możesz skonfigurować jako hidden tylko wówczas, jeśli umieszczona na warstwie sekwencja wideo nie jest odtwarzana. Może się też zdarzyć, że animacja warstwy nie będzie działać poprawnie, i że nie będzie ona mogła być przeciągana.

Koniec ramki

4. Utwórz na warstwie Blurb proste połączenie tekstowe. Dreamweaver nie zezwala na przypisywanie behawiorów bezpośrednio sekwencjom wideo QT, więc najpierw skonfigurujesz tymczasowe połączenie tekstowe, aby dołączyć do niego behawior. Wpisz jakiś tekst, na przykład kliknij mnie lub test i przekształć go w połączenie umieszczając znak # w polu Link inspektora Property (patrz rysunek 20.20).

5. Zaznacz połączenie, otwórz paletę Behaviors i wybierz z menu rozwijanego Action pozycję Set Text, a następnie pozycję Set Text of Layer z menu podrzędnego. Teb behawior umożliwia dynamiczną zmianę zawartości warstwy. W oknie dialogowym, które się ukaże, wybierz z listy Layers warstwę Blurb i wpisz tekst w polu New HTML (wraz ze znacznikami HTML), który chcesz wyświetlić na warstwie Blurb, gdy użytkownik kliknie sekwencję wideo QT. Rysunek 20.20 pokazuje o co tu chodzi.

6. Przetestuj stronę w przeglądarce. Jeśli wykonałeś wszystko prawidłowo, przesunięcie wskaźnika myszki nad połączeniem tekstowym spowoduje wyświetlenie opisowego komentarza, który wprowadziłeś.

7. Wyświetl dokument w widoku kodu, znajdź wywołanie funkcji dodane do połączenia tekstowego i skopiuj je. Kod źródłowy będzie wyglądał mniej więcej tak (ten fragment, który powinieneś zaznaczyć i skopiować jest pisany czcionką pogrubioną):
   <a href="#" onMouseOver="MM_setTextOfLayer('blurb','','%3Ch2%3ETotem%3C/h2%3E%0D%0A%3Cp%3ETen eksponat to piękny przykład ptasiego totemu. Pochodzi z nieistniejącej już od dawna cywilizacji Karaoke.%3C/p%3E')">Kliknij mnie </a>
   

Rys. 20.20. Przypisywanie behawiora Set Text of Layer do tymczasowego połączenia tekstowego

8. W widoku projektu zaznacz sekwencję wideo QT i otwórz okno Parameters. Wprowadź kod, który będzie wartością parametru HREF. Pamiętaj, że kod ten musi zaczynać się od javascript:, po czym pojawia się polecenie JavaScript, które ma zostać wykonane. W tym ćwiczeniu kod, który wprowadzimy jako wartość atrybutu HREF powinien być następujący:
   
   "javascript:MM_setTextOfLayer('blurb',' ', 'Ten eksponat to piękny przykład ptasiego totemu. Pochodzi z nieistniejącej już od dawna cywilizacji Karaoke.')"
   
   Wprowadzając kod w polu Value, wpisz ręcznie pierwszą część, a następnie wklej wywołanie funkcji, które skopiowałeś w poprzednim kroku. W oknie Parametrs zrobi się tłoczno, lecz wszystko powinno działać prawidłowo.

9. Przetestuj dokument. Kliknij pole sekwencji wideo - w polu warstwy tekstowej powinien pojawić się tekst komentarza.

10. Usuń połączenie tekstowe - lecz ostrożnie! Ponieważ sekwencja wideo zagreguje na kliknięcie, połączenie tekstowe nie jest Ci już potrzebne. Nie możesz go jednak usunąć tak po prostu, ponieważ Dreamweaver usunie z sekcji HEAD całą funkcję. Aby pozbyć się połączenia tekstowego, wyświetl dokument w widoku kodu i usuń kod połączenia ręcznie. Spójrz na sekcję HEAD - w znaczniku <script> nadal powinny być dwie funkcje. Sekwencja QT także powinna działać bez problemów.

Ćwiczenie 20.7. Sterowanie sekwencją wideo QuickTime przy użyciu adresów URL ścieżek

W tym ćwiczeniu zajmiemy się sekwencją wideo QT o dwóch ścieżkach wideo, a każda z nich ma swój adres URL stowarzyszony z funkcją JavaScript. Definiując te funkcje w sekcji HEAD dokumentu HTML, możesz wysłać do sekwencji wideo polecenia lub wykorzystać sekwencje do wykonania innych poleceń JavaScript, jakich tylko będziesz chciał. Oczywiście nie możesz zmieniać wywołań funkcji bez korzystania z pomocy programu Plug-In Helper, który pozwala modyfikować plik zawierający sekwencję. Nazwy funkcji są już zdefiniowane i bez programu Plug-In Helper ich nie zmienisz. Mimo to rezultaty Twojej pracy będą działać i w Netscape, i w Internet Explorerze.

Plik, a którego będziesz korzystać to multitrack.mov. Rysunek 20.21 pokazuje okno programu Plug-In Helper, a w nim obie ścieżki wideo i przypisane im wywołania funkcji.

Rys. 20.21. Okno programu Plug-In Helper, a w nim obie ścieżki wideo i przypisane im wywołania funkcji (plik został złożony z sekwencji składowych przy użyciu QuickTime Pro)

1. Utwórz nowy plik i zapisz go w tym samym folderze co plik multitrack.mov pod nazwą multitrack.html.

2. Korzystając z ikony Insert Plugin z palety obiektów, umieść na stronie obiekt multitrack.mov.

3. Przypisz sekwencji wideo następujące parametry:
   width = 272
   height = 372
   controller = false
   loop = true
   enablejavascript = true

4. Zdefiniuj w sekcji HEAD dokumentu dwie funkcje. Nie unikniesz tu ręcznego wpisywania kodu. Zaczniemy od wpisania szkieletów funkcji. W ścieżkach sekwencji wideo zapisane są na stałe odwołania do następujących funkcji: FirstFunction() i SecondFunction(). Zgodnie z tym przygotujemy szkielety odpowiednich funkcji:
   <script language=”javascript”>
   function FirstFunction() {
   //to co tu umieścimy, zostanie wykonane,
   //gdy kliknięta zostanie pierwsza sekwencja wideo
   }
   function SecondFunction() {
   //to co tu umieścimy, zostanie wykonane,
   //gdy kliknięta zostanie druga sekwencja wideo
   }
   </script>

5. Spróbuj umieścić w definicji funkcji coś bardzo prostego, na przykład utworzenia okienka z komunikatem, aby przetestować kod. Zmień kod tak jak pokazano poniżej:
   <script language=”javascript”>
   function FirstFunction() {
   alert(”To jest pierwsza funkcja”);
   }
   function SecondFunction() {
   alert(”To jest druga funkcja”);
   }
   </script>
   Następnie przetestuj dokument w przeglądarce. Kliknięcia poszczeg1nych sekwencji wideo powinny spowodować ukazanie się okna z innym komunikatem (patrz rysunek 20.22).

6. Wypróbuj inne użyteczne skrypty! Jeśli jesteś wystarczająco dobry w pisaniu skryptów JavaScript, możesz zaprogramować swoje funkcje pod kątem wykonania dowolnego zadania (jedynie nie mogą one kontrolować samej sekwencji wideo). Jeśli wolisz polegać na behawiorach programu Dreamweaver, będziesz musiał sięgnąć po program Plug-In Helper i zmienić adresy URL ścieżek. Wszystkie behawiory przekazują argumenty do funkcji, a więc nie da się ich w ten sposób wykorzystać.

Rys. 20.22. Testowanie funkcji JavaScript osadzonych w sekwencjach wideo QT. Kliknięcie pierwszej z sekwencji powoduje wyświetlenie okna komunikatu

Tworzenie sekwencji wideo QuickTime

Jeśli chcesz, aby Twoja sekwencja wideo miała fantazyjne kontrolki sterowania, które będą działać we wszystkich przeglądarkach, utwórz je w QuickTime. W sekwencję można wbudować ścieżki duszków, a one z kolei mogą funkcjonować jako interaktywne elementy (a więc jako przyciski).

Sekwencje wideo QuickTime można także osadzać w sekwencjach wideo Shockwave. Jeśli tylko użytkownik ma na swoim komputerze zainstalowane systemowe rozszerzenie QuickTime, przeglądarka potrzebuje do uruchomienia sekwencji jedynie modułu Shockwave lub kontrolki ActiveX. Tak więc twórca strony WWW może przesłać parametry do Shockwave (tak jak w ćwiczeniu 20.7), a twórca korzystający z programu Director może napisać w Lingo polecenia, które wykorzystają te parametry do sterowania sekwencją QuickTime. Jest to także przydatne, aby poszerzyć zakres kompatybilności strony WWW o dodatkowe przeglądarki, ponieważ Shockwave oferuje ActiveX i moduł dodatkowy dla obu platform.

Pliki multimedialne RealSystems

RealNetworks od dawna jest podstawowym dostawcą oprogramowania do obsługi mediów strumieniowych w sieci. Składowe systemu RealSystem - RealAudio, RealVideo, RealPix, RealText i RealFlash - umożliwiają autorom umieszczanie na stronach WWW przesyłanych strumieniowo multimedialnych treści różnego typu. Poszczególne elementy standardu RealMedia można łączyć w multimedialne prezentacje korzystając z wywodzącego się z XML języka SMIL (Synchronized Multimedia Integration Language). Aby umożliwić strumieniowy przesył danych, strony WWW zawierające treści RealMedia muszą być umieszczone na serwerze wyposażonym w oprogramowanie RealServer. Przeglądarki przy obsłudze mediów różnego typu korzystają z aplikacji RealPlayer oraz modułu Real G2 i kontrolki ActiveX. Firma RealNetworks podaje, że ponad 170 milionów użytkowników na całym świecie korzysta z programu RealPlayer oraz związanych z nim modułów dodatkowych przeglądarki.

Początek ramki

Uwaga

SMIL nie jest częścią technologii RealSystems. Jest to język oparty o znaczniki, podobnie jak HTML. Pliki SMIL są także czytane przez program QuickTime Player, moduł przeglądarki oraz przez program Windows Media Player. Aby lepiej poznać ten język, odwiedź witrynę W3C - www.w3c.org.

Koniec ramki

Rysunek 20.23 prezentuje typy MIME składowych systemu RealSystem i stowarzyszone z nimi rozszerzenia nazwy.

Składowa systemu RealSystem

Typ MIME

Rozszerzenie nazwy

RealAudio

audio/x-realaudio

.ra

RealAudio

audio/vnd.rn-realaudio

.ra

RealVideo

video/vnd.rn-realaudio

.rv

RealPix

video/vnd.rn-realpix

.rp

RealText

text/vnd.rn-realtext

.rt

RealG2 with Flash

image/vnd.rn-realflash

.rf

Dokument SMIL

application/smil.smi

.smil

RAM

audio/x-pn-realaudio

.ram

RAM osadzony

audio/x-pn-realaudio

.rpm

Rys. 20.23. Szeroko stosowane typy MIME i rozszerzenia nazwy mediów RealSystem

Początek ramki

Uwaga

Szczegółowe informacje na temat RealMedia znajdziesz pod adresem www.realnetworks.com.

Koniec ramki

Uwagi na temat RealMedia

Technologie RealSystem są zgodne z wieloma platformami i typami przeglądarek. Chociaż klipy RealMedia zazwyczaj odtwarzane są w odrębnym oknie programu RealPlayer, to możliwe jest także osadzenie ich na stronie WWW. Moduł RealG2 i kontrolka ActiveX RealG2 są dostępne dla obu typów przeglądarek.

Przesył strumieniowy

Aby umożliwić strumieniowy przesył danych, strony WWW zawierające treści RealMedia muszą być umieszczone na serwerze wyposażonym w oprogramowanie RealServer. Jeśli jednak nie interesuje Cię przesył strumieniowy, lecz wystarczy Ci sam RealPlayer i jego moduły dodatkowe, możesz skorzystać ze zwykłego serwera sieciowego.

Przygotowywanie treści medialnych

Pliki RealAudio i RealVideo można tworzyć w wielu profesjonalnych programach do tworzenia dźwięku i wideo. Pliki RealPix (które prezentują serie nieruchomych obrazów i zarządzają ich wyświetlaniem) mogą powstawać w dowolnym edytorze tekstu. Same obrazy to standardowe pliki JPEG, GIF lub PNG, które spreparowano pod kątem przesyłu strumieniowego za pomocą JPEGTRAN, bezpłatnego programu narzędziowego oferowanego przez RealNetworks. Pliki RealText (stosowane do wyświetlania tekstu animacji) i pliki SMIL także powstają w zwykłych edytorach tekstu. RealNetworks ma w swej ofercie programy do przygotowania treści multimedialnych - na przykład RealProducer, RealPresenter i RealSlideShow. Podstawowe wersje niektórych z nich są nawet bezpłatne, a wiele jest dostępnych w wersjach dla różnych platform.

Pliki RAM i RAMGEN

Ponieważ pliki RealMedia muszą być odtwarzane bezpośrednio z serwera, wymagają specjalnych metaplików, tak zwanych plików RAM (o rozszerzeniu nazwy .ram lub .rpm). RAMGEN to usługa RealServers, która dynamicznie tworzy plik RAM. Połączenia do plików RealMedia składowanych na serwerach RealServer muszą być w takim przypadku sformułowane w sposób uwzględniający parametr RAMGEN. Jeśli pliki RealMedia są pobierane z komputerów lub serwerów nie udostępniających usługi RAMGEN (na przykład ze zwykłych serwerów sieciowych), musisz sam przygotować plik RAM.

Wstawianie obiektów RealMedia

W programie Dreamweaver można wstawiać obiekty RealMedia przy pomocy narzędzi Insert Plugin lub Insert ActiveX z palety obiektów. Użycie obiektu ActiveX umożliwia Ci skorzystanie ze wszystkich możliwości udostępnianych przez kontrolkę ActiveX Media (oczywiście tylko w przeglądarce Internet Explorer dla systemu Windows). Jeśli nie planujesz korzystać ze skryptów, metoda wstawiania nie ma znaczenia.

Ćwiczenie 20.8. Wstawianie pliku RealAudio za pomocą znacznika <EMBED>

Zaczniemy od przyjęcia założenia, że klip RealAudio będzie umieszczony na lokalnym komputerze użytkownika lub na standardowym serwerze sieciowym. Następnie spróbujemy zaadaptować procedurę do wymagać stawianych przez serwer RealServer.

1. Odszukaj plik RealAudio jazzy1_surestream_32.rm. Plik ten znajduje się na dysku CD. Jeśli jeszcze tego nie zrobiłeś, skopiuj go na dysk twardy swojego komputera. Jeśli masz zainstalowany program RealPlayer, możesz odtworzyć plik dźwiękowy bezpośrednio w nim, aby go przetestować.

2. Utwórz plik RAM dla potrzeb lokalnego dostępu. Twoim zadaniem jest stworzenie połączenia do lokalnej kopii pliku dźwiękowego, który właśnie odszukałeś. Ponieważ nie ma serwera RealServer i brak jest usługi RAMGEN, musisz sam utworzyć plik RAM. Pliki RAM można przygotować w dowolnym edytorze tekstu, lub w programie Dreamweaver, korzystając z jego widoku kodu.
   Spróbujmy więc tej drugiej metody. Utwórz w Dreamweaverze nowy plik i zapisz go pod nazwą realmusic.rpm (pamiętaj o rozszerzeniu!) Wyświetl plik w widoku kodu i usuń domyślny szkielet HTML.

3. Wpisz w pliku RAM adres URL pliku RealAudio.
   Plik RAM powinien zawierać tylko jeden wiersz kodu - wspomniany adres URL. Można go podać jako adres bezwzględny lub względny, lecz konieczne jest uwzględnienie protokołu. Zakładając, że zapisałeś plik RAM w tym samym folderze co plik muzyczny, kod źródłowy w pliku RAM powinien być następujący:
   file://jazzy1_surestream_32.rm
   Notacja file:// to protokół odwoływania się do plików składowanych lokalnie. Reszta adres względny, podający ścieżkę dostępu do pliku dźwiękowego (jeśli umieściłeś plik dźwiękowy w innym folderze niż plik RAM, musisz to uwzględnić w kodzie). Gdy wszystko gotowe, zapisz i zamknij plik.

4. Utwórz nowy plik i zapisz go jako realaudio.html. Będzie to strona WWW, która zawiera klip muzyczny. W tym ćwiczeniu nie będziemy się zajmować jej zawartością graficzną. Jednak nic nie stoi na przeszkodzie, żebyś później dodał tekst i obrazy. Nie jest to trudne zadanie.

5. Korzystając z ikony Insert Plugin z palety obiektów, wstaw w dokumencie plik RAM, który przygotowałeś. Pamiętaj, że nie wstawiasz samego pliku dźwiękowego. To ważne! Pliki RealMedia muszą odwoływać się albo do pliku RAM lub usługi RAMGEN na serwerze RealServer, albo nie będą działać.

6. Zdefiniuj parametry pliku dźwiękowego. Rysunek 20.24 prezentuje listę parametrów akceptowanych przez program RealPlayer i moduł dodatkowy Real. Wymagane są tylko parametry SRC, WIDTH i HEIGHT. W tym przypadku plik nie ma komponenty wizualnej, a więc parametry określające rozmiar odnoszą się do panelu sterowania dźwiękiem, który zostanie umieszczony na stronie.
   Później zobaczysz w jaki sposób zmieniać parametry panelu. Na razie przyjmijmy ustawienia domyślne i zmieńmy jedynie szerokość i wysokość, przypisując parametrom width i height wartości 350 i 100.

Parametr

Wartość

Ustawienie domyślne

Opis

src

URL

[parametr wymagany]

Określa ulokowanie klipu źródłowego.

width

Liczba (procenty lub piksele)

[parametr wymagany]

Określa szerokość okna lub panelu sterującego.

height

Liczba (procenty lub piksele)

[parametr wymagany]

Określa wysokość okna lub panelu sterującego.

maintainaspect

true lub false

false

Umożliwia zachowanie proporcji, jeśli wymiary nie odpowiadają wymiarom oryginalnym.

autostart

true lub false

false

Określa czy klip zacznie być odtwarzany natychmiast po załadowaniu strony.

Rys. 20.24. Parametry akceptowane przez RealPlayer, moduł RealG2 i kontrolkę ActiveX RealG2

7. Przetestuj stronę w przeglądarce. Zakładając, że masz program RealPlayer i jego moduły dodatkowe, Twój dokument powinien prezentować się w przeglądarce tak jak na rysunku 20.25. Ponieważ nie zmieniałeś ustawienia parametru Autostart, a jego wartość domyślna to false, musisz kliknąć na panelu sterującym przycisk Play, aby zabrzmiała muzyka.

8. Poeksperymentuj z innymi parametrami. Skorzystaj z listy przedstawionej na rysunku 20.24, a w szczególności wypróbuj takie oto ustawienia:

• pluginspage = http://www.realnetworks.com
  (Ten parametr występuje w inspektorze jako pole Plg URL. Nie został uwzględniony na liście z rysunku 20.24, bowiem moduł Real z niego nie korzysta. Jednak skorzysta z niego przeglądarka, jeśli na komputerze użytkownika nie będzie modułu).

• nojava = true
  (Jeśli ten parametr nie zostanie ustawiony na true, Netscape uruchomi po załadowaniu klipu maszynę wirtualną Javy, co sprawi wrażenie spowolnienia ładowania strony. Java jest niezbędna tylko wówczas, gdy sterowanie klipem odbywa się za pomocą języka JavaScript, co w tym przypadku nie ma miejsca).

• controls = wybierz z listy z rysunku 20.26.
  Parametr CONTROLS określa, które z kontrolek stertowania pojawią się na panelu sterowania dźwiękiem. Przyjmuje on różne wartości, a ich pełna lista przedstawiona została na rysunku 20.26. Zwróć uwagę, że w zależności od przyjętych tu ustawień, może okazać się konieczna także zmiana wymiarów samego panelu.

Rys. 20.25. Plik realmusic.html w oknie przeglądarki. Domyślny panel sterowania ma rozmiary zgodne z zalecanymi

9. Wprowadź w pliku RAM zmiany, aby przystosować go do udostępniania klipu z serwera sieciowego. Jak pamiętasz, plik RAM określa protokół i podaje względny adres URL pliku dźwiękowego, który ma zostać odtworzony. Chociaż dobrze jest w trakcie tworzenia strony WWW, przed umieszczeniem jej na serwerze, korzystać z lokalnego adresowania (tak jak to wcześniej robiłeś), plik RAM trzeba jednak poddać modyfikacjom i umieścić w nim adres sieciowy pliku dźwiękowego. Otwórz w tym celu plik RAM w oknie programu Dreamweaver i wyświetl go w widoku kodu. Zastąp protokół i adres względny adresem bezwzględnym, tak jak w przykładzie poniżej:
   
   htptp://www.webdomain.com/media/ jazzy1_surestream_32.rm
   
   Jeśli chcesz to przetestować, umieść w pliku RAM rzeczywisty adres, a następnie umieść plik HTML, plik RAM oraz plik muzyczny na serwerze sieciowym i spróbuj czy wszystko działa. Ponieważ korzystasz tu z adresowania bezwzględnego, nie możesz testu przeprowadzić lokalnie.

Wartość

Opis

Rekomendowane rozmiary (w pikselach)

all lub default

Wyświetla panel programu RealPlayer z wszystkimi kontrolkami sterowania.

375x100

imageview

Wyświetla okno obrazu z przeznaczeniem na wideo i animację.

176x132 lub większe

playbutton

Wyświetla przycisk play/pause.

44x26

playonlybutton

Wyświetla przycisk play.

26x26

pausebutton

Wyświetla przycisk pause.

26x26

stopbutton

Wyświetla przycisk stop.

26x26

FFCtrl

Wyświetla przycisk przewijania w przód.

26x26

RWCtrl

Wyświetla przycisk cofania.

26x26

MuteCtrl

Wyświetla przycisk wyciszania.

26x26

MuteVolume

Wyświetla przycisk wyciszania i suwak regulacji głośności.

26x88

VolumeSlider

Wyświetla suwak regulacji głośności.

26x65

PositionSlider

Wyświetla suwak pozycji odtwarzania klipu.

120x26

TACCtrl

Wyświetla pole informacji o klipie.

370x32

HomeCtrl

Wyświetla logo Real.

45x25

InfoVolumePanel

Wyświetla informacje o prezentacji oraz suwak głośności i przycisk wyciszania.

325x55

InfoPanel

Wyświetla panel informacji o prezentacji.

300x55

StatusBar

Wyświetla panel stanu prezentujący komunikaty, wskaźnik obciążenia sieci, LED, i pole pozycji.

300x50

StatusField

Wyświetla tylko panel stanu.

200x30

PositionField

Wyświetla pole pozycji, które podaje aktualnie odtwarzane miejsce w linii czasowej i całkowitą długość klipu.

90x30

Rys. 20.26. Możliwe wartości parametru CONTROLS dla klipów RealSystem. Ponieważ poszczególne kontrolki sterowania mają różne rozmiary, stosuj rekomendowane wartości parametrów width i height

10. Zmodyfikuj plik HTML w taki sposób, aby przystosować go do korzystania z pliku dźwiękowego udostępnianego na serwerze RealServer.
    Jeśli nie masz dostępu do konta na serwerze RealServer, nie będziesz w stanie przetestować efektów swojej pracy. Procedura jest następująca:

• Przede wszystkim zapomnij o pliku RAM - nie będzie on dłużej potrzebny.

• Otwórz plik HTML i zaznacz obiekt rezerwujący miejsce na korzystającą z modułu dodatkowego zawartość. W polu SRC inspektora Property musisz wpisać adres, który mniej więcej będzie podobny do przedstawionego poniżej:
  http://realserver.company.com:8000/ramgen/media/jazzy1_surestream_32.rm?embed
  Szczegółową postać adresu musisz ustalić z administratorem serwera RealServer.

Ćwiczenie 20.9. Wstawianie prezentacji SMIL przy użyciu znacznika <OBJECT>

Zasadnicza część procesu umieszczania obiektów RealMedia na stronie WWW jest taka sama, niezależnie od tego, czy stosowany jest znacznik <EMBED>, czy też <OBJECT>. Jest jednak kilka różnic, o których musisz pamiętać. W tym ćwiczeniu zajmiesz się sekwencją, który zawiera treści RealAudio i RealPix oraz synchronizujące je instrukcje SMIL.

1. Odszukaj plik realdemo.smil. Znajdziesz go na dysku CD. Jeśli jeszcze tego nie zrobiłeś, skopiuj go na dysk twardy swojego komputera. Jeśli masz zainstalowany program RealPlayer, możesz uruchomić plik bezpośrednio w nim, aby zobaczyć, jak prezentacja ma wyglądać.
   Jeśli chcesz, otwórz plik także w programie Dreamweaver lub w edytorze tekstu, a zobaczysz jego strukturę. Plik SMIL synchronizuje kilka plików RealMedia - slideshowtext.rt, fadein_simple.rp i jazzy1_surestream_32.rm. Aby prezentacja działała, wszystkie te pliki źródłowe muszą pozostać w takiej samej relacji względem pliku SMIL, jaka jest określona w kodzie źródłowym prezentacji.
   Pliki slideshowtext.rt i fadein_simple.rp także możesz otworzyć w edytorze tekstu. Jak zobaczysz, zawierają one odwołania do obrazów JPEG. Także i w tym przypadku relacja między plikiem RP a plikami zawierającymi obrazy musi być taka sama jak w kodzie źródłowym prezentacji.

2. Utwórz plik RAM i zapisz go jako realdemo.rpm. Podobnie jak w poprzednim ćwiczeniu, możesz to zrobić korzystając z programu Dreamweaver. Utwórz nowy dokument, wyświetl go w widoku kodu i usuń cały podstawowy kod HTML. Wpisz następnie kod zawierający protokół i względne połączenie do pliku SMIL. Zakładając, że plik RAM znajduje się w tym samym folderze co plik SMIL, odpowiedni wiersz kodu powinien wyglądać tak:
   file://realdemo.smil
   Zapisz plik RAM i zamknij go.

Początek ramki

Uwaga

Pliki RAM o rozszerzeniu .rpm są wyświetlane w przeglądarce. Pliki RAM z rozszerzeniem .ram uruchamiają program RealPlayer.

Koniec ramki

3. Utwórz w programie Dreamweaver nowy plik i zapisz go jako realdemo.html.

4. Wstaw w dokumencie tabelę, za pomocą której określisz układ strony. Nie jest to absolutnie konieczne, lecz pomoże Ci zobaczyć, jak poszczególne elementy RealMedia są rozmieszczane na stronie. Utwórz tabelę o szerokości (parametr width) 256 pikseli, a atrybutom Cell Padding, Cell Spacing i Border przypisz wartości 0. Zdefiniuj w niej trzy wiersze i jedną kolumnę. Po wstawieniu tabeli, górnej komórce nadaj wysokość (parametr H) równą 256 pikseli, a środkowej 20.

5. Korzystając z ikony Insert ActiveX na palecie obiektów, wstaw w górnej komórce tabeli plik RAM realdemo.rpm. Pamiętaj, że wstawianie obiektu ActiveX to proces dwuetapowy. Dla wstawionego obiektu trzeba zdefiniować w inspektorze Property wartość parametru SRC - musisz więc wskazać plik, który chcesz wstawić.

6. Z listy Class ID inspektora Property wybierz kontrolkę Real G2. Jak pokazuje rysunek 20.27 jest ona umieszczona na tej liście. Jeśli nie, musisz wpisać tę pozycję ręcznie:
   clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA.

Rys. 20.27. Inspektor Property dla kontrolki ActiveX prezentuje rozwinięte menu Class ID

7. Zdefiniuj podstawowe parametry. Wymiary prezentacji (które można podglądnąć w pliku SMIL, jeśli to konieczne) wynoszą 256x256. Przypisz więc odpowiednie wartości parametrom W i H. W polu BASE wpisz http://www.realnetworks.com.

8. Zdefiniuj inne parametry, w tym także CONTROLS. Gdybyś przetestował prezentację w przeglądarce nie konfigurując żadnych innych parametrów, poza tymi, o których już wspominaliśmy, nie będzie ona wyglądać tak, jak powinna. Nie poleciłeś bowiem jeszcze modułowi, aby wyświetlił obraz. W oknie parametrów ogólnych, Parameters, wpisz następujące ustawienia:
   controls = imagewindow
   autostart = true
   Teraz, gdy wyświetlisz stronę w przeglądarce, pokaz slajdów powinien zostać zaprezentowany automatycznie. Rysunek 20.28 pokazuje jak powinien on wyglądać. Oczywiście nie ma możliwości sterowania pokazem, ponieważ nie jest wyświetlany pasek z kontrolkami sterowania. Tym zajmiemy się później.

Rys. 20.28. Plik realdemo.html w przeglądarce. Parametrowi CONTROLS przypisano teraz wartość imagewindow

9. Skopiuj obiekt rezerwujący miejsce na kontrolkę ActiveX do dolnej komórki tabeli. Pojawia się tu pewien problem. Nie możesz dodać panelu sterowania do wstawionego klipu, ponieważ parametrowi CONTROLS przypisałeś już wartość IMAGEWINDOW, a nie można przypisać mu jednocześnie drugiej wartości, określającej typ panelu sterowania. Poradzimy sobie z tym wstawiając klip dwukrotnie - raz jako okno obrazu, a drugi raz jako panel sterujący. Skopiuj obiekt rezerwujący miejsce na kontrolkę ActiveX, a następnie umieść punkt wstawiania w dolnej komórce tabeli i wklej go tu. Nadaj mu wymiary 256x256, a z listy Align wybierz sposób wyrównania Top. Rysunek 20.29 pokazuje aktualny wygląd strony w programie Dreamweaver.

10. Dla nowego obszaru rezerwującego miejsce zdefiniuj wartość parametru CONTROLS jako PLAYBUTTON. Wyświetl swój dokument raz jeszcze w przeglądarce - powinieneś zobaczyć wspaniałą sekwencję wideo oraz przyciski Play i Stop, co pokazuje rysunek 20.30. Odkryjesz jednakże kolejny problem. Wstawione sekwencje nie są w żaden sposób ze sobą powiązane. Dla przeglądarki są to dwie niezależne instancje sekwencji wideo. Musisz je ze sobą połączyć.

Rys. 20.29. Plik realdemo.html z dwoma kopiami pliku RAM
Rys. 20.30. Plik realdemo.html w przeglądarce - wyświetlany jest zarówno obraz, jak i panel sterowania

11. Dla każdej z instancji sekwencji wideo dodaj parametr CONSOLE i przypisz mu wartość MAIN. Parametr CONSOLE umożliwia połączenie ze sobą odrębnych elementów w taki sposób, że przeglądarka wie, iż mają one funkcjonować jako całość. Wszystkie elementy, które współdzielą tę samą wartość parametru CONSOLE, będą traktowane jako jedność. Nazwa nie ma znaczenia, dopóki jest jednakowa dla wszystkich składowych.
    Z drugiej instancji klipu wideo warto usunąć parametr AUTOSTART.
    Wyświetl dokument w przeglądarce, a zobaczysz, że przyciski Play i Stop działają teraz prawidłowo - uruchamiają i zatrzymują sekwencję.
    Możesz w ten sposób dołączać do swojej prezentacji dowolną liczbę elementów sterujących, rozmieszczając je w różnych miejscach strony lub grupując razem. Wystarczy jedynie utworzyć obiekty rezerwujące miejsce, zmienić wartości parametrów CONTROLS i zastosować identyczne nazwy jako wartości wszystkich parametrów CONSOLE. Mieszaj i dopasowuj kontrolki sterujące - to jest jak zabawa klockami!

Początek ramki

Podpowiedź

Pamiętaj, że gdy nadejdzie czas umieszczenia prezentacji na serwerze sieciowym lub serwerze RealServer, będziesz musiał zmienić wszystkim umieszczonym na stronie instancjom klipu wideo wartość atrybutu SRC.

Koniec ramki

Ćwiczenie 20.10. Edycja plików RealText, RealPix i SMIL

Jak się już zdążyłeś przekonać, wiele z elementów prezentacji RealMedia opartych jest na plikach tekstowych. Formaty SMIL, RealText i RealPix to pochodne języka XML, a pliki tego typu można edytować w dowolnym edytorze tekstu lub w widoku kodu programu Dreamweaver (więcej informacji na temat stosowania w programie Dreamweaver innych języków opartych o znaczniki znajdziesz w rozdziale 23., „Skrypty i języki oparte o znaczniki”).

W tym ćwiczeniu wprowadzisz pewne zmiany w prezentacji, nad którą pracowałeś w poprzednim ćwiczeniu. Zobaczysz, jak proste jest to zadanie i jak przydatny w nim okazuje się Dreamweaver.

1. Odszukaj plik fadein_simple.rp i zapisz go jako fadein_simple_2.rp. Plik ten znajdziesz w folderze Fadein, wraz z innymi plikami RealMedia.

2. Otwórz w programie Dreamweaver plik fadein_simple_2.rp i wprowadź w jego kodzie źródłowym zmiany - dodaj do pokazu slajdów kolejny obraz. Czyż kod nie wydaje się znajomy, choć inny? RealPix to specjalny język oparty o znaczniki, wywodzący się z XML, a służący do sterowania prezentacją obrazów.
   Odszukaj fragment kodu, który odnosi się obrazów prezentowanych w pokazie slajdów. Dodaj obraz o nazwie peppers.jpg, tak jak pokazuje to rysunek 20.31. Zwróć uwagę, że w kodzie źródłowym umieszczone są indeksy czasowe - synchronizacja zdarzeń odbywa się w oparciu o te indeksy. Musisz tak je zmienić, aby wszystko zmieściło się w 70 sekundach - tyle wynosi czas trwania sekwencji wideo (nie możesz wydłużyć pokazu slajdów, bowiem muzyka jest odtwarzana także przez 70 sekund).

Rys. 20.31. Kod źródłowy pliku fadein_simple_2.rp, w którym dodano fragment dla nowego obrazu. Kod dodawany lub zmieniany jest wyświetlany czcionką pogrubioną

3. Otwórz plik slideshowtext.rt i zapisz go jako slideshowtext_2.rt. Wprowadź w jego kodzie zmiany, dodając podpis dla dodanego wcześniej obrazu. Kod w tym pliku jest w formacie RealText, który stanowi kolejną pochodną XML. Język RealText kontroluje wygląd animowanego tekstu. Wprowadź w kodzie zmiany zgodnie z wytycznymi z rysunku 20.32. Zwróć szczególną uwagę na zmienione indeksy czasowe. Tekst powinien zostać wyświetlony tuż po pojawieniu się obrazu i powinien zniknąć przed zniknięciem obrazu. Aby prezentacja działała poprawnie, wszystkie punkty czasowe muszą być skoordynowane.

4. Otwórz plik realdemo.smil i zapisz go jako realdemo_2.smil. Wprowadź w nim zmiany, aby teraz odnosił się on do nowych plików RT i RP, które właśnie utworzyłeś. Format SMIL to następna pochodna XML. Służy do synchronizacji różnych mediów, określając gdzie i kiedy mają zostać użyte. Kontroluje też układ ekranu i linię czasową prezentacji. W takich prezentacjach RealMedia jak ta, plik SMIL synchronizuje RealMedia. Można go stosować z innymi typami mediów, aby tworzyć sekwencje wideo QuickTime.
   Wprowadź w kodzie źródłowym zmiany zgodnie ze wskazówkami zawartymi na rysunku 20.33.

Rys. 20.32. Kod źródłowy pliku slideshowtext_2.rt. Dodany fragment zaznaczono czcionką pogrubioną

Rys. 20.33. Kod źródłowy pliku realdemo_2.smil zawierający odwołania do nowych plików RealPix i RealText. Zmieniany kod zaznaczono czcionką pogrubioną

5. Utwórz dla nowej prezentacji nowy plik RAM. Zapisz go jako realdemo_2.rpm.
   Utwórz w Dreamweaverze nowy plik i usuń z niego w widoku kodu całą zawartość HTML. Wpisz protokół i względny adres URL pliku SMIL, tak jak tutaj:
   file://realdemo_2.smil

6. Utwórz nowy plik HTML i zapisz go jako realdemo_2.html. Wstaw w nim nowy plik RAM. Skorzystaj z ikony Insert Plugin lub Insert ActiveX. Zdefiniuj rozmiary jako równe 256x256, a parametrowi AUTOPLAY przypisz wartość TRUE.

7. Przetestuj swój dokument w przeglądarce. Czy działa?
   Jeśli chcesz wypróbować zmienioną wersję pliku SMIL unikając tworzenia pliku RAM, możesz otworzyć ją bezpośrednio w programie RealPlayer.

RealSystems - podsumowanie

Jeśli zamierzasz szeroko korzystać na swoich stronach z plików RealMedia, powinieneś pomyśleć o rozszerzeniu swojej kopii Dreamweavera poprzez zainstalowanie obiektów Real G2. Obiekty te, utworzone przez RealNetworks, a dostępne na stronie Macromedia Dreamweaver Exchange, tworzą na palecie obiektów nową kategorię - Real G2 - zawierającą pełny zestaw obiektów: RealAudio, RealVideo, RealFlash, itd. Obiekty te są nawet w stanie samodzielnie wygenerować dla Ciebie pliki RAM. Na stronach witryny RealNetworks, www.realnetworks.com/devzone znajdziesz rozbudowane pliki pomocy, zawierające szczegółowe instrukcje na temat posługiwania się językami RealText, RealPix i SMIL.

Rozbudowywanie możliwości przeglądarki za pomocą Javy

Jeśli męczy Cię ta żonglerka modułami dodatkowymi, możesz sięgnąć po całkowicie inne rozwiązanie, także służące rozszerzeniu możliwości przeglądarki - a jest nim Java. Animacje Javy nie są tak płynne jak animacje Shockwave lub Flash. Java nie obsługuje także strumieniowego przesyłu danych, ani po stronie klienta, ani po stronie serwera. Nie jest też tak prosta jak technologia modułów dodatkowych, o której wcześniej czytałeś. To, co stanowi, że Java bywa czasami lepszym rozwiązaniem niż Shockwave, QuickTime, czy cokolwiek innego, to fakt, że nie wymaga ona, by przeglądarka użytkownika była wyposażona w różnorodne moduły dodatkowe i kontrolki ActiveX.

Co to jest Java?

Java to wprowadzony w 1995 roku przez Sun Microsystems, obiektowy język programowania niezależny od platformy sprzętowej i systemowej (mimo podobieństwa nazwy, Java nie ma nic wspólnego z językiem JavaScript).

Java umożliwia tworzenie w pełni funkcjonalnych i samodzielnych aplikacji oraz mini-aplikacji, zwanych apletami, uruchamianych przez wbudowaną w przeglądarkę WWW wirtualną maszynę Javy. Ponieważ Java to pełny język programowania, o konstrukcji zbliżonej do konstrukcji języka C++, jego aplety mogą mieć bardzo rozbudowane możliwości. Stosowane są one powszechnie, począwszy od gier sieciowych, po animacje i efekty specjalne, liczniki odwiedzin, zegary, kalkulatory i narzędzia nawigacji.

Jak działa Java

Aby zrozumieć, co czyni Javę językiem sieci, najpierw musisz poznać różnice między nią, a innymi językami programowania.

Komputery nie „rozumieją” ani C++, ani Javy, ani innych języków programowania, a przynajmniej nie bezpośrednio. Językiem rozumianym przez komputery jest „język liczb” zwany kodem maszynowym. Program napisany w dowolnym języku programowania musi najpierw zostać skompilowany lub inaczej mówiąc „przetłumaczony” na język maszynowy. Postać języka maszynowego jest specyficzna dla danej platformy - z tej właśnie przyczyny Twoja kopia programu Dreamweaver będzie działać tylko na komputerach typu PC lub tylko na komputerach Mac. Programy muszą być kompilowane dla danego typu komputera i będą wówczas działały tylko na tym typie komputerów.

Java jest inna. Java jest kompilowana tak, by działała na fikcyjnym komputerze zwanym wirtualną maszyną. Wirtualna maszyna to w rzeczywistości program, skompilowany dla konkretnej platformy. Na komputerach działających pod kontrolą systemu Windows wirtualna maszyna to Microsoft VM, na komputerach Macintosh - jest to Mac OS Run-Time for Java (MRJ). Gdy aplikacja lub aplet Javy są uruchamiane na wirtualnej maszynie, dokonuje ona przetłumaczenia kodu na typowy dla danej platformy kod maszynowy. Tak więc sam aplet jest niezależny od platformy.

Początek ramki

Uwaga

Jeśli chcesz się więcej dowiedzieć na temat Javy, odwiedź witrynę firmy Sun pod adresem www.java.sun.com. Informacje na temat implementacji wirtualnej maszyny Javy znajdziesz pod adresami www.microsoft.com/java i www.apple.com/java.

Koniec ramki

Uwagi na temat Javy

Mam dla Ciebie jeszcze jedną dobrą wiadomość. Javę cechuje nie tylko przenośność między platformami, lecz także niezależność od typu przeglądarki. Przeglądarka, natrafiając na umieszczony na stronie WWW aplet Javy, uruchamia wirtualną maszynę i usuwa się jej z drogi. Nie musisz martwić się o brak modułów. Do uruchomienia apletu potrzebna Ci tylko wirtualna maszyna (która jest zainstalowana na większości komputerów) i przeglądarka z uaktywnioną obsługą Javy (tę możliwość mają niemal wszystkie przeglądarki).

Oprócz dobrej wieści, mam też złą - nic nie jest doskonałe. Niektóre wirtualne maszyny są wolniejsze niż inne, a ponadto mają błędy. Uruchomienie wirtualnej maszyny zabiera trochę czasu, co sprawiać wrażenie wydłużonego czasu ładowania strony - a to z reguły irytuje użytkownika. Ponadto, ponieważ wirtualna maszyna jest wbudowana w przeglądarkę, zawierające błędy aplety, mogą doprowadzić do zawieszenia się przeglądarki.

Z Javą wiążą się także kwestie bezpieczeństwa. Tak zwane „wrogie” aplety projektowane są tak, aby zachowywały się jak wirusy. Inne mogą spowodować przypadkowe uszkodzenie systemu. Wirtualne maszyny starają się chronić system przed niebezpieczeństwami tego typu, lecz same nie mogą być w pełni odporne. W efekcie w wielu instytucjach, w których obraca się cennymi informacjami, instalowane są firewalle nie dopuszczające Javy. Także użytkownicy mogą wyłączyć obsługę Javy na swoich komputerach.

Java i media

Aplety Javy mogą zwierać obrazy i dźwięk. Obrazy muszą być w formatach GIF lub JPEG. Jeśli aplet korzysta z dźwięku, nie ma znaczenia jaki moduł dodatkowy przeglądarka zazwyczaj stosuje do obsługi plików dźwiękowych, ponieważ to nie przeglądarka będzie plik tym razem obsługiwać, lecz wirtualna maszyna. Pliki dźwiękowe w apletach Javy są w formacie AU (o rozszerzeniu nazwy .au). Java nie potrafi obsługiwać sekwencji wideo, choć potrafi tworzyć animacje lub „fałszywe sekwencje wideo” z szeregu nieruchomych obrazów. Animacje Javy nie są tak płynne i szybkie jak animacje Shockwave, Flash i QuickTime.

Korzystanie z apletów

Posługiwanie się apletami nie przypomina pracy z sekwencjami Shockwave lub QuickTime, czy też innymi typami mediów sieciowych, ponieważ ich struktura jest zupełnie inna. Gdy pierwszy raz zetkniesz się z apletem, spytasz zapewne: „Co to są te wszystkie pliki i gdzie jest aplet?”.

Pliki klas

Podstawowy skompilowany aplet Javy to plik o rozszerzeniu nazwy .class (a nie .java - to rozszerzenie stosowane jest tylko do nieskompilowanych plików źródłowych).

Aplety często składają się z więcej niż jednego pliku. Złożony aplet może zawierać kilka plików klas, z których tylko jeden jest apletem. Pozostałe są plikami wspomagającymi i są wywoływane w trakcie działania apletu. W przypadku niektórych apletów stosowana jest jasna konwencja nazewnicza, dzięki której wiadomo, co jest plikiem głównym. Tak będzie na przykład programu o nazwie Tabulator i pliku klasy o nazwie tabulator.class. Często jednak trudno wskazać plik klasy, który ma być osadzony na stronie WWW (najlepsze aplety mają swoją dokumentację, w której wszystko jest opisane).

Pliki multimedialne

Jeśli w aplecie użyte zostały elementy multimedialne - obrazy, dźwięki, sekwencje wideo, itp. - będą się one znajdować w odrębnych plikach, czasami w odrębnych folderach. Musisz stosować się wewnętrznej struktury folderów apletu, określonej przez autora, bowiem inaczej aplet nie będzie w stanie odnaleźć swoich plików multimedialnych.

Pliki archiwalne

Być może spotkałeś kiedyś aplet Javy spakowany do pliku archiwalnego (lub zestawu plików). Pliki te mają rozszerzenia nazwy .jar, .zip lub .cab. W takim przypadku musisz w kodzie HTML odwoływać się do plików archiwalnych i głównego pliku klasy. Informacji na temat nazwy pliku klasy szukaj w dokumentacji apletu (ponieważ aplet jest spakowany, nie masz innej możliwości).

Źródła apletów

Skąd się biorą aplety? Większość pisana jest przez programistów korzystających z języka Java. Nie ma więc jednego źródła zestandaryzowanych apletów. Z tego powodu aplety tak bardzo się od siebie różnią.

Jeśli decydujesz się na użycie na stronach swojej witryny Javy, możesz sam napisać aplet, wynająć programistę, który to zrobi za Ciebie, lub skorzystać z któregoś z apletów dostępnych w sieci. Godnym polecenia miejscem startowym do poszukiwań apletów jest strona zasobów firmy Sun (www.java.sun.com/applets), na której znajdziesz nie tylko aplety do ściągnięcia, lecz także wiele połączeń do innych stron z zasobami. Niektóre aplety są bezpłatne, niektóre są programami typu shareware, a inne możesz kupić. Są aplety o rozbudowanej dokumentacji i szerszych możliwościach dostosowania ich do własnych potrzeb, są też aplety działające lepiej od innych.

Director i Java

Jeśli chcesz tworzyć własne aplety, lecz nie uśmiecha Ci się zostać programistą, możesz skorzystać z programu Director. Opcja Save as Java Xtra pozwala tworzyć animacje lub interaktywne sekwencje wideo, które Director przełoży do kodu Javy i skompiluje. Jednak w wielu przypadkach translacja nie jest możliwa, więc nie dla wszystkich sekwencji wideo Shockwave można stworzyć odpowiedniki w Javie. Aplety Javy ani nie działają tak płynnie i szybko jak sekwencje wideo Shockwave, ani nie uruchamiają się równie szybko, ani nie wykazują takiej jak one stabilności na różnych platformach (oczywiście w ten sposób powraca ponownie pytanie: „A co będzie, jeśli oni nie mają modułów dodatkowych?”. Java jest właśnie po to, aby ominąć ten problem).

Możesz w programie Director przygotować dwie wersje sekwencji wideo: jedną w postaci sekwencji wideo Shockwave, a drugą w postaci apletu Javy, a następnie korzystając z języka JavaScript umieścić w kodzie źródłowym dokumentu HTML odwołania do tej wersji, która jest obsługiwana przez przeglądarkę użytkownika. Program narzędziowy Macromedia Aftershock (o którym już wspominaliśmy) pozwala przygotować taki kod, lecz możesz napisać go sam, korzystając z behawiora Check Plugin programu Dreamweaver.

Początek ramki

Uwaga

Plik slideshow_java.html, na dysku CD, prezentuje sekwencję wideo utworzoną w programie Director, zapisaną w Javie i osadzoną na stronie. Plik slideshow_shock.html prezentuje tę samą sekwencję wideo, zapisaną jako Shockwave i osadzoną na stronie.

Koniec ramki

Flash i Java

Aplety Javy można tworzyć z sekwencji wideo Flash - także i w tym przypadku istnieje wiele ograniczeń.

Działa to w ten sposób: w folderze aplikacji Flash, w jej folderze podrzędnym Players, znajdziesz folder o nazwie Flash Player Java Edition. Zawiera on aplet Javy, z plikiem Flash.class jako plikiem głównym. Jest to wersja Javy odtwarzacza Flash Player. Aplet przyjmuje parametr o nazwie moviename - jeśli jako wartość parametru podasz nazwę pliku SWF, odtwarzacz napisany w Javie odtworzy sekwencję wideo programu Flash.

Ograniczenia? No, tak, jest ich wiele. Przede wszystkim plik SWF musi być w formacie Flash 2, co ogranicza możliwości animacji i poziom interaktywności. Po drugie, ponieważ odtwarzacz musi zostać w całości załadowany na komputer użytkownika, plik ma rozmiar kilkuset kilobajtów. W momencie, gdy już odtwarzacz zostanie ściągnięty, na komputerze użytkownika musi się jeszcze uruchomić wirtualna maszyna Javy. W efekcie, animacja nie będzie tak płynna i szybka jak zwykła animacja Flash, która korzysta z modułu dodatkowego Macromedia.

Jedyna korzyść? Nie jest stosowany moduł dodatkowy. Już wiesz teraz, dlaczego ta metoda rozprowadzania plików Flash nie jest tak popularna. Czasami jednak może się okazać przydatna - nigdy nie wiadomo.

Początek ramki

Uwaga

Plik flash_java.html na dysku CD prezentuje animowany baner programu Flash wykorzystany jako element apletu Javy.

Koniec ramki

Praca z apletami w programie Dreamweaver

Dreamweaver jest wyposażony w narzędzia do pracy z apletami Javy, w tym w narzędzie wstawiania apletów - Insert Applet, i okno właściwości apletu - Applet Property Inspector. Z ich pomocą można wstawiać aplety na istniejące strony lub badać i zmieniać kod źródłowy HTML zazwyczaj dołączany do apletów komercyjnych.

Wstawianie apletu

Narzędzie wstawiania apletów - Insert Applet - znajdziesz w kategorii Special palety obiektów (patrz rysunek 20.34). Sam proces wstawiania jest bardzo prosty. Kliknij ikonę Insert Applet, a w oknie, które się ukaże, znajdź plik klasy i kliknij OK. Oto jest! Twój aplet. Jeśli rzucisz okiem na kod źródłowy, zauważysz, że aplet został wstawiony przy użyciu znacznika <APPLET>.

Początek ramki

Uwaga

Zgodnie z oficjalnymi specyfikacjami W3C, aplety Javy powinny być wstawiane przy użyciu znacznika <OBJECT>. Ponieważ jednak nie wszystkie przeglądarki obsługują takie zastosowania znacznika <OBJECT>, jest więc przyjęte, że w takich sytuacjach stosowany jest znacznik <APPLET>.

Koniec ramki

Rysunek 30.34 prezentuje obiekt Insert Applet oraz okno właściwości apletu Javy, Applet Property Inspector. Oprócz standardowych parametrów (W, H, VSPACE, HSPACE, ALIGN, ALT i NAME) dostępne są jeszcze dwa: CODE i BASE. W polu CODE wskazujesz plik pliku klasy. W polu BASE określasz natomiast folder zawierający pliki apletu (zazwyczaj aplet ma swój własny folder, gdzie składowane są wszystkie jego pliki). Przycisk Parameters umożliwia otwarcie okna dialogowego Parameters, a ono z kolei pozwala zdefiniować dodatkowe parametry apletu.

Rys. 20.34. Ikona Insert Applet i inspektor Property dla apletu Javy. Ponieważ każdy aplet jest inny, w tym oknie właściwości dostępne są ustawienia ogólne oraz przycisk Parameters, który umożliwia dodanie parametrów specyficznych dla danego apletu

Ćwiczenie 20.11. Wstawianie prostego apletu Javy

W tym ćwiczeniu wstawisz najprostszy w świecie aplet Javy. Jest to, tak naprawdę, aplet absolutnie bezużyteczny, a nazywa się SimpleDraw. Stosujemy go tu jedynie po to, aby pokazać początkującym programistom języka Java zasady i specyfikę pracy z apletami.

1. Odszukaj na dołączonym do książki dysku CD folder SimpleDraw i przejrzyj jego zawartość. Jeśli jeszcze tego nie zrobiłeś, skopiuj folder i jego zawartość na dysk twardy swojego komputera. Folder zawiera trzy pliki klas. Czy wiesz, który z nich jest apletem? W przypadku tego apletu, dzięki nazwom, odpowiedź na to pytanie jest oczywista: SimpleDraw.class to aplet. Pozostałe pliki będą wywoływane przez SimpleDraw.class w trakcie jego działania, lecz nie muszą być wywoływane w kodzie HTML.

2. Utwórz nowy plik i zapisz go jako simpledraw.html. Nie zapisuj go jednak w folderze SimpleDraw, lecz w folderze nadrzędnym, aby uzyskać takie same efekty, jak w tym ćwiczeniu.

3. Za pomocą ikony Insert Applet wstaw aplet SimpleDraw na stronie. W wyświetlonym oknie dialogowym Select File wybierz aplet SimpleDraw.
   Zwróć uwagę, że po wstawieniu apletu, w polu Code inspektora Property pojawia się nazwa pliku klasy, a w polu Base nazwa folderu SimpleDraw (patrz rysunek 20.34).

4. W polach W i H zdefiniuj rozmiary pola apletu. Dreamweaver nie potrafi sam określić wymaganych rozmiarów, więc umieszcza wartości domyślne równe 32. Jedyną metodą poznania tych rozmiarów czy też dowiedzenia się jakie rozmiary pola są niezbędne do prawidłowego działania apletu, jest sięgnięcie do dokumentacji lub samodzielne eksperymentowanie.
   W przypadku apletu SimpleDraw nie ma szczególnych wymagań odnośnie rozmiarów, aczkolwiek należy przyjąć wartości co najmniej 150x50. Na razie określ je jako równe 200x200.

5. Wyświetl aplet w przeglądarce. SimpleDraw to prosty aplet. Nie musisz definiować dodatkowych parametrów. W przeglądarce powinieneś zobaczyć coś podobnego do rysunku 20.35. Kliknij w obszarze apletu i narysuj kwadrat lub koło w wybranym kolorze. Możliwość zmiany kształtu i koloru dają rozwijane menu, umieszczone u góry. Zauważysz zapewne, że na uruchomienie wirtualnej maszyny trzeba zaczekać parę chwil. W trakcie działania apletu na pasku stanu przeglądarki wyświetlany jest komunikat o treści mniej więcej takiej: „Appler running” lub „Applet loaded”.
   Skoro już rozumiesz zasady funkcjonowania tego apletu, wiesz także, dlaczego rozmiary można zmieniać. Im większy obszar apletu, tym więcej miejsca ma użytkownik na rysowanie kół i kwadratów. Czy tak działają wszystkie aplety? Nie, każdy jest inny.

Rys. 20.35. Aplet SimpleDraw w przeglądarce

Ćwiczenie 20.12. Wstawianie apletu z wieloma parametrami

W realnym świecie znajdziesz tylko kilka apletów tak prostych jak SimpleDraw. W tym ćwiczeniu wstawimy aplet, który umieszcza na stronie WWW ciąg zmieniających się nieustannie cytatów. Aplet ten jest oferowany bezpłatnie na stronach witryny Sun, www.java.sun.com/openstudio/guide.html. Aby zobaczyć go w działaniu, sięgnij po plik quotes_finished.html, z dysku CD.

Zgodnie z dokumentacją, aplet przyjmuje kilka parametrów. Rysunek 20.36 prezentuje ich listę. Niektóre z parametrów są opcjonalne, inne są niezbędne. Dokumentacja nie określa tego precyzyjnie. Ty wykorzystasz je wszystkie.

Parametr

Opis wraz z sugerowanymi wartościami

bgcolor

Kolor tła apletu. Wartością jest szesnastkowy kod koloru.

bheight

Wysokość obramowania.

bwidth

Szerokość obramowania.

delay

Opóźnienie między kolejnymi klatkami (w milisekundach).

fontname

Nazwa czcionki.

link

Adres URL pliku, który ma zostać załadowany, gdy aplet zostanie kliknięty.

number

Liczba cytatów.

quoteN

Łańcuch znaków rozdzielany znakami „|”, w którym pierwszy człon to sam cytat, drugi określa jego źródło, trzeci to szesnastkowy kod koloru tekstu, czwarty to szesnastkowy kod koloru tła, a ostatni to czas w sekundach, po jakim wyświetlany jest kolejny cytat. N reprezentuje wartość z przedziału 0 i -1.

space

Odległość, w pikselach, między cytatem, a źródłem cytatu.

Rys. 20.36. Parametry apletu generowania cytatów z firmy Sun oraz opisy i sugerowane wartości parametrów

1. Odszukaj folder Quote i przejrzyj jego zawartość. Folder ten zawiera aplet. Znajdziesz w nim klika plików z rozszerzeniem .class. Czy poznasz po nazwie, który z nich jest apletem? (W tym przypadku jest to nieco trudniejsze niż w poprzednim).

2. Utwórz nowy plik i zapisz go jako Quotes.html.
   Nie ma znaczenia czy plik zostanie zapisany w folderze apletu, czy też poza nim. Aplet i tak będzie działał, jeśli tylko parametry CODE i BASE zostaną zdefiniowane poprawnie. Jeśli chcesz wykonać to ćwiczenie dokładnie tak, jak to opisujemy tutaj, zapisz plik poza folderem apletu.

3. Wstaw w dokumencie aplet, korzystając z ikony Insert Aplet z palety obiektów. Główny plik klasy, a więc plik, który powinieneś wstawić, to JavaQuote.class. W polu BASE powinna się pojawić nazwa folderu Classes lub ścieżka dostępu do pliku .class, jeśli dokument HTML zapisany został więcej niż jeden poziom wyżej niż plik .class.

Początek ramki

Uwaga

Wielkość znaku ma w Javie znaczenie! Sprawdź więc czy wszystkie odwołania do plików, folderów, parametry i wartości pisane są znakami odpowiedniej wielkości. W przeciwnym razie aplet nie będzie działać.

Koniec ramki

4. W polach W i H wpisz wartości 300 i 125. Dokumentacja nie określa wymagań w tym względzie, a eksperyment pokazuje, że rozmiary pola apletu nie mają tu wielkiego znaczenia. Zastosuj po prostu takie wartości, które dobrze wpasowują pole apletu w Twoją stronę i nie powodują zasłaniania tekstu.

5. Zdefiniuj parametry.
   Kliknij przycisk Parameters i wpisz parametry. Skorzystaj z listy przedstawionej na rysunku 20.36. Wpisywanie długich cytatów w polu Value okna Parameters może Ci sprawiać kłopot, ponieważ cytaty mogą być długie. Jeśli wolisz, wpisz tekst cytatu w edytorze tekstu, a następnie wklej go w polu Value. Oczywiście, możesz także operować bezpośrednio w widoku kodu programu Dreamweaver, jeśli jest to dla Ciebie wygodne.
   Okno Parameters, po wpisaniu parametrów, będzie wyglądać podobnie jak to z rysunku 20.37.

Rys. 20.37. Okno dialogowe Parameters prezentuje listę wprowadzonych parametrów i ich wartości dla apletu Javy z firmy Sun (tylko część z parametrów jest widoczna)

6. Przetestuj plik w przeglądarce. Jeśli wszystko zostało wykonane prawidłowo, Twoja wirtualna maszyna powinna załadować i wyświetlić ciąg zmieniających się nieustannie cytatów. Możesz poeksperymentować w Dreamweaverze zmieniając wartości parametrów, aby zobaczyć jak można dostosować ten aplet do własnych potrzeb.

Uwagi końcowe na temat Javy: skomplikowane aplety

W przypadku bardziej skomplikowanych apletów, prościej jest skorzystać z ich spakowanych, archiwalnych postaci (zawartych w plikach JAR, CAB lub ZIP), niż wstawiać aplet za pośrednictwem narzędzia Insert Aplet. Ponieważ niemal do wszystkich apletów dołączony jest przykładowy kod HTML pokazujący sposób wstawienia apletu na stronie, skopiuj i wklej ten kod w swoim dokumencie lub utwórz swoją stronę na bazie przykładowej. W takim przypadku pamiętaj jednak, że relacja między ulokowaniami Twojego pliku HTML i pliku apletu musi być taka sama jak w przykładowym kodzie źródłowym. Jeśli więc jeśli plik przykładowy znajduje się w tym samym folderze co aplet, także umieść swój plik HTML w tym samym co aplet folderze. Jeśli wyświetlisz otrzymany w ten sposób dokument w widoku projektu programu Dreamweaver, będziesz mógł oczywiście zaznaczyć aplet i przeglądnąć jego właściwości dokładnie tak samo, jakbyś samodzielnie wstawiał aplet na stronie.

Dźwięk na stronach WWW

Obecnie jednym z popularniejszych zastosowań mediów na stronach WWW jest dźwięk. Efekty dźwiękowe, tła dźwiękowe, muzyka demonstracyjna - co tylko wymienisz, twórcy stron to robią. Wszystkie opcje, o których będziemy mówili w tej części rozdziału dotyczą w jakimś stopniu dźwięku. Lecz jaki jest najlepszy sposób na umieszczanie go na stronie WWW? I co powinniśmy wiedzieć o dźwięku, aby uzyskać najlepsze z możliwych efekty?

Dźwięk cyfrowy: terminy i pojęcia

Zanim zajmiemy się zawiłościami i subtelnościami umieszczania dźwięku na stronach WWW, zapoznajmy się najpierw z podstawową terminologią dotyczącą dźwięku. Im lepiej będziesz rozumiał, jak dźwięk działa na komputerze, tym lepiej będziesz mógł określić, co możesz, a czego nie możesz z nim zrobić na stronie WWW.

Dźwięk próbkowany a syntezowany

Istnieją dwa podstawowe rodzaje dźwięku cyfrowego: próbkowany i syntezowany. Dźwięk próbkowany powstaje w realnym (nie-cyfrowym) świecie - są to głosy, koncerty, nagrania studyjne i pospolite dźwięki słyszane w domu, przekształcone w efekty dźwiękowe - a następnie jest przetwarzany do postaci cyfrowej, co przypomina skanowanie fotografii. I tak jak przy skanowaniu fotografii, w procesie cyfrowego próbkowania dźwięku można zgromadzić więcej lub mniej danych. Im więcej danych, tym lepsza jakość dźwięku, lecz większy rozmiar pliku. Pliki zawierające próbkowany dźwięk są zazwyczaj duże, zbyt duże dla standardowych modemów. W efekcie, na większości stron WWW stosowane są krótkie dźwięki o niskiej jakości lub wyłącznie pętle dźwiękowe (krótkie motywy muzyczne odtwarzane w kółko).

Dźwięk syntezowany tworzony jest na komputerze i odtwarzany przy pomocy syntetyzowanych instrumentów muzycznych. Plik zawierający dźwięk syntezowany nie zawiera dźwięku próbkowanego, lecz przechowuje zapis nutowy wraz z dodatkowymi informacjami na temat instrumentów, które pozwalają odtworzyć go komputerze. Pliki tego typu są niewielkie, szczególnie w porównaniu z plikami dźwięku próbkowanego. Muzyka trwająca 5 minut zajmuje w pliku mniej niż 20K. Ten sam fragment zakodowany jako dźwięk próbkowany zająłby kilka megabajtów. Jedyną wadą dźwięku syntetyzowanego jest to, że nie brzmi on naturalnie. Gdybyś chciał posłuchać piosenki Beatlesów „Yesterday”, dźwięk musiałby być próbkowany. Jeśli Twojemu uchu nie przeszkadza brzmienie syntetyzowanych instrumentów, możesz korzystać z dźwięku syntezowanego i w takiej postaci wysłuchać „Yesterday”.

Standardowe formaty plików

Najpopularniejsze formaty plików dźwiękowych w Internecie to WAV, AIF, AU i MP3.

• Format WAV to format własny systemu Windows. Pliki w tym formacie są chyba na stronach WWW najpopularniejsze. Moduły dodatkowe przeglądarek nie mają zazwyczaj problemów z ich obsługą.

• Pliki AIF są w formacie własnym systemy Macintosh. Są rzadsze niż pliki WAV, lecz równie dobrze obsługiwane w przeglądarkach.

• Format AU jest formatem systemu UNIX. Pliki AU nie kompresują się najlepiej i są w sieci coraz rzadsze. Jest to jedyny format plików dźwiękowych stosowany w apletach Javy.

• Pliki MP3 są dobrze znane dzięki wysokiej jakości dźwięku i zadziwiająco niewielkim rozmiarom. Aby odtworzyć plik MP3 musisz mieć odtwarzacz MP3. Wiele przeglądarek nie jest skonfigurowanych pod kątem obsługi tych plików, dlatego rzadko osadza się je na stronach WWW. Znacznie częściej pliki MP3 są ściągane, a następnie odtwarzane off-line.

Standardowy format plików zawierających dźwięk syntezowany to MIDI. Pliki MIDI są dobrze obsługiwane przez moduły dodatkowe przeglądarek, a na stronach WWW pojawiają się najczęściej jako muzyczne tło.

Problem modułów dodatkowych

Na wstępie tego rozdziału dowiedzieliśmy się, w jaki sposób przeglądarki korzystają z typów MIME i rozszerzeń nazw plików, aby określić rodzaj modułu dodatkowego, który powinien zostać użyty do obsługi danego obiektu. Dotychczas zajmowaliśmy się w tym rozdziale obiektami multimedialnymi, których obsługa wymaga tylko jednego modułu dodatkowego - na przykład jest tylko jeden moduł Shockwave i wszystkie pliki .dcr będą obsługiwane przez ten moduł lub nie będą wcale.

W przypadku dźwięku sprawy się nieco komplikują. Istnieje wiele modułów dodatkowych i aplikacji pomocniczych, które są w stanie obsłużyć każdy z wymienionych formatów plików dźwiękowych, o których przed chwilą wspominaliśmy. Moduł LiveAudio firmy Netscape, Media Player systemu Windows, WinAmp, odtwarzacze QuickTime i RealPlayer - wszystkie mogą odtworzyć plik dźwiękowy. To, do którego z nich odwoła się przeglądarka, zależy tylko od jej ustawień. Jak wiesz, nie ma standardowej konfiguracji przeglądarki.

Czy ma znaczenie, który z modułów obsługuje plik dźwiękowy, jeśli robi to dobrze? Poszczególne moduły dodatkowe przyjmują różne parametry i oferują różne możliwości kontroli, jednak dopóki nie wiesz, który z modułów zostanie użyty, nie możesz wykorzystać jego opcji. Każdy z modułów ma ponadto własny panel kontrolny, który pozwala użytkownikowi włączyć odtwarzanie, zatrzymać je, przewinąć sekwencję muzyczną, itd. Niektóre panele sterujące są duże, niektóre małe, a jeszcze inne mają postać samodzielnych, pływających okien. Jeśli projektujesz stronę WWW zawierającą taki panel sterujący, czyż nie byłoby dobrze wiedzieć, ile miejsca trzeba dla niego zostawić?

Wstawianie dźwięku

Aby wstawić dźwięk na stronie WWW, korzystasz w programie Dreamweaver z ikon Insert Plugin lub Insert ActiveX. Wybierając drugie z narzędzi, masz szersze możliwości kontroli dźwięku (jednak działa to wyłącznie w przeglądarce Internet Explorer dla systemu Windows). Jeśli nie zamierzasz korzystać z opcji ActiveX, nie ma znaczenia, które z narzędzi wstawiania dźwięku wybierzesz. Standardowo dźwięk wstawiany jest w dokumencie HTML przy pomocy znacznika <EMBED> (co odpowiada narzędziu Insert Plugin).

Początek ramki

Uwaga

Jeśli chciałbyś rozszerzyć możliwości swojej kopii programu Dreamweaver, możesz wypróbować obiekt Audio Embed stworzony przez Massimo Foti, a dostępny na stronie Macromedia Dreamweaver Exchange. Ten obiekt korzysta ze znacznika <OBJECT> i zawiera obszerną listę parametrów ActiveX, która pozwala zobaczyć jak szeroki może być zakres kontroli dźwięku w przeglądarce Internet Explorer dla Windows.

Koniec ramki

Ćwiczenie 20.13. Szafa grająca na stronie WWW

W tym ćwiczeniu utworzysz stronę, która umożliwia użytkownikowi nagranie paru zapętlonych ścieżek. Naszym celem jest zademonstrowanie nieprzewidywalności konfiguracji przeglądarki. Gdy zakończysz pracę nad plikiem, wypróbuj go na dowolnych komputerach, a przekonasz się, jak różne są efekty jego działania.

1. Otwórz plik jukebox.html. Plik ten znajdziesz w folderze Jukebox na dysku CD wraz z innymi plikami dźwiękowymi. Jeśli jeszcze tego nie zrobiłeś, skopiuj cały folder na dysk twardy swojego komputera. Jak zobaczysz, plik zawiera tabelę o czterech, teraz pustych, komórkach, w których umieścisz kontrolki sterowania dźwiękiem.

2. Wstaw do pierwszej z nich plik funkyloop1.wav - możesz skorzystać z ikony Insert ActiveX lub ikony Insert Plugin.

3. Zdefiniuj szerokość (pole W) i wysokość (pole H).
   Jest to nieco podchwytliwy etap procesu. Obiekt rezerwujący miejsce, udostępniany Ci przez Dreamweavera, w przeglądarce będzie kontrolką sterowania dźwiękiem. Skoro jednak nie wiesz, jaka kontrolka będzie wyświetlana, to jak możesz określić prawidłowe rozmiary? Możesz zgadywać. Moduł LiveAudio ma panel sterowania o rozmiarach 144x60 pikseli i te wartości można przyjąć na początek jako domyślne. Testując jednak stronę przy różnych konfiguracjach przeglądarki możesz dojść do wniosku, że ustawienia te wymagają zmiany.

4. Określ parametry opcjonalne.
   Ponieważ nie nastawiasz się na określony moduł dodatkowy, nie możesz mieć całkowitej pewności, że parametry zostaną przyjęte. Na szczęście przypisanie parametru, który nie jest obsługiwany, nie jest karalne. W tym ćwiczeniu ustaw parametry w następujący sposób:
   loop = true
   autoplay = false
   autostart = false
   volume = 50
   Wszystkie moduły powinny obsługiwać parametr LOOP. Niektóre obsługują AUTOPLAY, a niektóre AUTOSTART - zdublowaliśmy więc te parametry, podając oba. Parametr VOLUME nie jest obsługiwany przez wszystkie moduły, lecz jego obecność nie uczyni szkody. Zakładając, że wartością parametru VOLUME jest liczba w procentach z przedziału od 0 do 100, wartość 50 powinna wyciszyć dźwięk, aby był przyjemny dla ucha i łagodny.

5. Powtórz cały proces dla pozostałych komórek, wstawiając w nich kolejne pętle muzyczne.
   Zdefiniuj parametry. Gdy skończysz, Twoja strona powinna w Dreamweaverze wyglądać tak jak strona z rysunku 20.38.

Rys. 20.38. Plik juxebox.html, w którym wstawiono w komórkach tabeli cztery pliki dźwiękowe; rozmiary obiektów rezerwujących miejsce wynoszą 144x60 pikseli. Inspektor Property i okno Parameters prezentują ustawienia

6. Przetestuj dokument w przeglądarce. Czy patrząc na panel sterowania dźwiękiem jesteś w stanie powiedzieć, który z modułów został zastosowany? Czy panel sterowania mieści się w zarezerwowanym obszarze? Czy odtwarzanie muzyki uruchamia się automatycznie? Czy się zapętla? Czy wartość parametru VOLUME wywiera jakikolwiek wpływ?
   Na rysunku 20.39 możesz zobaczyć, jak wygląda strona juxebox.html, gdy wybranym do obsługi dźwięku modułem jest QuickTime. Panel QuickTime jest nieco za mały, biorąc pod uwagę rozmiary przydzielonego mu obszaru, lecz nie prezentuje się źle.

Rys. 20.39. Plik juxebox.html w przeglądarce - porównaj wygląd strony dla trzech różnych modułów: QuickTime, Beatnik i LiveAudio

Ćwiczenie 20.14. Wstawianie muzycznego tła

Tło muzyczne to plik dźwiękowy, którego odtwarzanie rozpoczyna się automatycznie przy ładowaniu strony i jest na tyle dyskretne, że nie odrywa uwagi użytkownika od samej strony. Celem tła muzycznego jest pozostać w tle, zazwyczaj więc nie umieszcza się na stronie żadnych wizualnych wskaźników jego obecności (innymi słowy, nie ma panelu sterowania). Tak więc w tym ćwiczeniu nauczysz się czynić muzykę niewidoczną.

1. Otwórz dowolny z plików z poprzednich ćwiczeń (najlepiej taki, na którym nie ma jeszcze muzyki) lub utwórz nowy plik i zapisz go.

2. Umieść punkt wstawiania u góry strony, powyżej wszelkiej jej zawartości, i wstaw plik dźwiękowy acousticgroove.wav. Chcesz, aby muzyka była odtwarzana w tle przy ładowaniu strony, więc plik dźwiękowy musisz wstawić na samym początku strony. Nie przejmuj się, że obiekt rezerwujący miejsce rozpycha inne elementy - w następnym kroku zrobimy z tym porządek.

3. Zdefiniuj rozmiary obiektu jako równe 2x2. Nie chcemy, by panel kontrolny zajmował miejsce na stronie, będzie więc mały. Nie schodź poniżej rozmiarów 2x2, bo w przypadku niektórych przeglądarek może to spowodować ich zawieszenie.

4. Zdefiniuj parametry opcjonalne. Wprowadź w oknie dialogowym Parameters następujące ustawienia:
   hidden = true
   autoplay = true
   autostart = true
   loop = true
   volume = 50
   Parametr HIDDEN spowoduje ukrycie panelu sterowania o rozmiarach 2x2. Kolejne ustawienia włączają automatyczne rozpoczęcie odtwarzania muzyki i powtarzanie jej w pętli. Oczywiście niesie to za sobą pewne niebezpieczeństwo. Użytkownik nie ma dostępu do panelu sterowania odtwarzaniem dźwięku, a zgodnie z ustawieniami muzyka będzie odtwarzana w nieskończoność. Nie chcesz, aby ludzie z wrzaskiem uciekali z Twojej witryny, bo nie mogą już znieść muzyki. Jednak jeśli pętla będzie tak krótka, jak ta wstawiona w przykładzie, to bez zapętlania z tła muzycznego będą nici. Niektóre przeglądarki przyjmują jako wartość parametru LOOP także liczbę. Jeśli w parametrze LOOP określisz liczbę powtórzeń, a moduł dodatkowy nie obsługuje tego, zgodnie z domyślnymi ustawieniami powtarzanie zostanie wyłączone.

5. Przetestuj stronę w przeglądarce. Czy słychać muzykę? Czy panel sterowania jest niewidoczny? Czy muzyka nie jest przykra dla ucha? Czy nie jest zbyt cicha? Lub zbyt głośna? Przynajmniej o rozmiary panelu sterowania nie musisz się martwić!

Kontrola nad dźwiękiem

Czy chcesz mieć przyciski, które wydają dźwięk „klik”, gdy zostaną kliknięte? Czy chcesz wspaniały panel sterowania dźwiękiem, który doskonale współgra z resztą projektu strony i nie zmienia wyglądu oraz rozmiaru w zależności od konfiguracji przeglądarki? Jeśli tak, to chcesz sterować dźwiękiem na swojej stronie WWW.

JavaScript i behawior Play Sound

Z tego samego powodu, dla którego nie można było skorzystać ze skryptów JavaScript, by sterować modułem QuickTime, nie możesz polegać na skryptach JavaScript, by uruchamiać i zatrzymywać z ich pomocą odtwarzanie dźwięku. Nie wszystkie przeglądarki zezwalają skryptom na kontrolowanie obiektu korzystającego z modułu dodatkowego.

Behawior Play Sound programu Dreamweaver stanowi taki właśnie przypadek. Wydaje się to proste: tworzysz przycisk lub połączenie tekstowe, stosujesz behawior, wybierasz plik dźwiękowy, który ma zostać odtworzony. Jedyny problem, że w niektórych przeglądarkach to działa, a w innych nie. Problem nie dotyczy behawiora, lecz ograniczeń przeglądarek.

Ćwiczenie 20.15. Odtwarzanie dźwięku przy pomocy skryptu JavaScript

W tym ćwiczeniu poznasz ograniczenia behawiora Play Sound i zobaczysz, jak można poprawić jego efektywność, pomimo ograniczeń narzucanych przez przeglądarki.

1. Utwórz nowy plik i nazwij go play_sound.html.

2. Wstaw obraz przycisku clickme.gif. Jeśli jeszcze tego nie zrobiłeś, skopiuj ten plik z dysku CD na dysk twardy swojego komputera.

3. Zaznacz obraz i utwórz połączenie, umieszczając w polu Link inspektora Property znak #. Pozwoli to dodać behawior.

4. Zastosuj do obrazu behawior Play Sound. Znajdziesz go na liście Actions palety Behaviors. Rysunek 20.40 ilustruje ten proces. Jako odtwarzany plik wskaż click.aif.

Rys. 20.40. Stosowanie behawiora Play Sound do przekształconego w połączenie przycisku

5. Przeanalizuj swoją stronę i ustawienia inspektora Property. Prawdopodobnie od razu zauważysz, że na stronie pojawił się nowy obiekt rezerwujący miejsce - jest to plik dźwiękowy. Behawior Play Sound powoduje automatyczne wstawienie tego pliku za pomocą znacznika <EMBED> i przypisanie mu różnych parametrów. Jeśli zaznaczysz obiekt i rzucisz okiem na inspektora Property, zobaczysz, jakie są to parametry. Zwróć uwagę, że szerokość i wysokość (pola W i H) mają wartości równe 0. Stanowi to potencjalne zagrożenie i może spowodować w niektórych przeglądarkach problemy - lepiej ustawić wymiary jako równe 2x2.

Rys. 20.41. Inspektor Property dla pliku dźwiękowego wstawionego przy pomocy behawiora Play Sound

6. Przetestuj stronę w paru przeglądarkach. W zależności od typu przeglądarki, jej konfiguracji i rodzaju platformy, na której ona działa, dźwięk stowarzyszony z kliknięciem przycisku będzie lub nie będzie słyszalny. Przy niektórych konfiguracjach przeglądarki, kliknięcie spowoduje otwarcie nowego okna, w którym dźwięk zostanie odtworzony. W najlepszym razie możesz oczekiwać od behawiora Play Sound, że będzie działał w niektórych przeglądarkach i mieć nadzieję, że nie spowoduje niemiłych skutków w innych. Otwarcie nowego okna, to właśnie jeden z nieprzyjemnych skutków, jeśli chciałeś tylko usłyszeć kliknięcie. Szczęśliwie z tym kłopotem możemy się łatwo uporać.

7. Zmodyfikuj skrypt behawiora tak, aby nie powodował otwierania nowego okna. Wyświetl dokument w widoku kodu i odszukaj w jego sekcji HEAD funkcję MM_controlsound.

Początek ramki
Podpowiedź

W widoku kodu kliknij na pasku narzędzi okna programu Dreamweaver ikonę przedstawiającą parę nawiasów klamrowych, {} - rozwiniesz w ten sposób listę wszystkich funkcji zdefiniowanych w dokumencie. Wybierz z niej funkcję MM_controlsound, a zostaniesz automatycznie do niej przeniesiony.

Koniec ramki

Ostatni wiersz w definicji funkcji jest następujący:

else window.location = sndFile;

wstaw na początku tego wiersza dwa ukośniki, które przekształcą go w komentarz, tak jak tutaj:

//else window.location = sndFile;

Wyłączenie wiersza kodu poprzez przekształcenie go w komentarz popularnie nazywa się „wyremowaniem”. Jest to mniej drastyczna metoda niż całkowite usunięcie kodu i zabezpiecza Cię na wypadek, gdybyś kiedyś chciał powrócić do jego stosowania.

8. Przetestuj behawior w tylu przeglądarkach, w ilu możesz. Żadna z nich nie powinna otwierać nowego okna do odtworzenia dźwięku. I jest to wszystko, na co możesz liczyć przy korzystaniu ze skryptu JavaScript do kontroli dźwięku osadzonego na stronie WWW.

Zestawianie wszystkiego w całość

Teraz wiesz już wszystko, lecz zastanawiasz się prawdopodobnie, jak użyć tej wiedzy do zestawienia wszystkiego razem, w śliczną i funkcjonalną stronę WWW. Zamknijmy nasze rozważania analizą kilku kwestii dotyczących strategii.

Stwórz pliki multimedialne

Jeśli chcesz, aby Twoje pliki multimedialne były rzeczywiście pewne i poddające się kontroli, musisz zdecydowanie unikać używania języków skryptowych interpretowanych przez przeglądarkę. Czy korzystasz z sekwencji wideo Flash, Shockwave, QuickTime, plików SMIL odtwarzacza RealPlayer, czy Javy - we wszystkich przypadkach masz do dyspozycji wewnętrzny język skryptowy danej techniki. Jeśli chcesz, aby przyciski wydawały dźwięk „klik”, gdy są klikane, utwórz je w programie Flash (niestety nowe narzędzie programu Dreamweaver, Insert Flash Button, nie pozwala na dołączanie do tworzonych przycisków dźwięków; można to zrobić tylko w samym programie Flash). Jeśli chcesz na swojej stronie wstawić plik muzyczny i wspaniały panel sterujący jego odtwarzaniem, stwórz odpowiedni element za pomocą programów Flash, Shockwave, QuickTime, RealPlayer lub języka Java i osadź go na stronie. Jeśli chcesz umieścić na stronie poddającą się kontroli sekwencję wideo, użyj programu QuickTime, samodzielnie lub w połączeniu z Shockwave.

Na dysku CD znajdziesz plik flash_sound.swf , jest to panel sterowania dźwiękiem utworzony w programie Flash, plik qt_sound.mov - panel sterowania dźwiękiem utworzony w QuickTime, slideshow.dcr - sekwencję wideo Shockwave, które jest wyposażona w sterujące kontrolki oraz plik click_button.swf - przycisk programu Flash z dołączonymi efektami dźwiękowymi. Skorzystaj z tych plików i zobacz jak działają na stronie WWW.

Sprytnie korzystaj z ramek

Zacznij myślenie z zewnątrz ramek - lub od ich środka, jak wolisz. Jeśli decydujesz się na stosowanie na swoich stronach ramek, masz możliwość wspaniałego zintegrowania plików multimedialnych bez wpadania rozpaczliwe pułapki skryptowe.

Kontrolowanie tła muzycznego

Wiesz, że nie da się w sposób absolutnie pewny kontrolować dźwięku na stronie przy pomocy skryptów JavaScript. Lecz wiesz także, że automatyczne odtwarzanie dźwięku i powtarzanie go w pętli działa tylko wówczas, gdy strona jest załadowana do okna przeglądarki. A jeśli zechcesz sprawować kontrolę nad dźwiękiem poprzez ładowanie i zamykanie różnych stron?

Aby zobaczyć jako to działa, odszukaj na dysku CD plik sound_frameset.html i otwórz go w przeglądarce, a następnie w Dreamweaverze. Rysunek 20.42 prezentuje plik w przeglądarce, a rysunek 20.42 w programie Dreamweaver, z podziałem na ramki i pliki składowe.

Rys. 20.42. Plik sound_frameset.htm w przeglądarce

Rys. 20.43. Plik sound_frameset.htm w oknie programu Dreamweaver

W przeglądarce plik działa w następujący sposób: klikasz przycisk i rozpoczyna się odtwarzanie zapętlonego tła muzycznego. Klikasz inny przycisk i muzyka zmienia się. Klikasz przycisk wyłączający muzykę i nic nie gra.

W programie Dreamweaver możesz prześledzić konstrukcję pliku: strona stanowi układ ramek składający się z jednej dużej ramki, zajmującej większą część okna przeglądarki, oraz niewielkiej i wąskiej ramki o nazwie musicFrame, umieszczonej u dołu. Cztery z ładowanych stron zawierają wyłącznie osadzone pliki dźwiękowe, które są tak skonfigurowane, aby odtwarzanie włączało się automatycznie i było zapętlane. Piąty dokument HTML (strona ładowana przy pierwszym otwarciu układu ramek ) zawiera wszystkie cztery pliki dźwiękowe, lecz z parametrami autoplay ustawionymi na false. W ten sposób pliki są wstępnie ściągane bez ich odtwarzania (jeśli nie interesuje Cię wstępne ściąganie, możesz tę stronę pozostawić całkowicie pustą). Wszystko działa, ponieważ nie ma żadnych skryptów. Aby włączyć i zatrzymać odtwarzanie muzyki, wykorzystujesz ograniczenia przeglądarki, zamiast z nimi walczyć.

Ładowanie kilku sekwencji wideo

Tak jak nie możesz stosować skryptów, by kontrolować dźwięk, nie możesz także wykorzystać ich do sterowania sekwencjami wideo. Możesz jednak skorzystać z opisanej właśnie techniki i za pomocą podobnej metody stworzyć iluzję, że panujesz nad sekwencjami.

Aby zobaczyć jak to działa, odszukaj na dysku CD plik movie_frameset.html i otwórz go. Rysunek 20.44 prezentuje go w przeglądarce, a rysunek 20.45 w oknie programu Dreamweaver.

Rys. 20.44. Plik movie_frameset.html w przeglądarce. Kliknięcie przycisku u dołu ekranu powoduje załadowanie nowej sekwencji wideo u góry i wyświetlenie innego tekstu

Rys. 20.45. Plik movie_frameset.html w oknie programu Dreamweaver. Wyświetlono obramowanie ramek, abyś lepiej widział konstrukcję. Składa się on z trzech ramek - kliknięcie przycisku z dolnej ramki powoduje załadowanie sekwencji wideo do górnej prawej ramki i tekstu do górnej lewej

W przeglądarce plik działa w następujący sposób: klikasz przycisk u dołu ekranu; ładowana jest nowa sekwencja wideo, a po lewej stronie pojawia się opisowy komentarz.

W programie Dreamweaver możesz prześledzić konstrukcję pliku: strona stanowi układ trzech ramek - infoFrame, movieFrame i navFrame. Każda sekwencja wideo jest osadzona w swoim pliku HTML, a żaden z tych plików nie na wstępie ładowany. Przyciski są połączone z poszczególnymi plikami HTML i ładują te pliki do ramki movieFrame. Do każdego z przycisków dołączony jest behawior Dreamweavera, który po kliknięciu przycisku powoduje zastąpienie tekstu w ramce infoFrame (tekst mógłby być zmieniany poprzez ładowanie nowego pliku do ramki infoFrame, jeśli także tutaj chcesz uniknąć stosowania skryptów).

Detekcja modułów dodatkowych

Tak więc podjąłeś decyzję, że umieścisz na stronie treści, które wymagają korzystania z jednego lub więcej modułów dodatkowych lub użycia kontrolek ActiveX. Co zrobisz z tymi potencjalnymi odbiorcami Twoich stron, którzy nie mają prawidłowo skonfigurowanej przeglądarki?

Decyzje strategiczne

Czy chcesz udostępnić zastępczą zawartość?

Tworzenie odrębnych wersji stron, pozbawionych treści multimedialnych, jest czasochłonne, nie mówiąc już o podwojonym nakładzie pracy na obsługę obu wersji. Czy chcesz jednak pozostawić część swoich potencjalnych odbiorców wściekłych i wygłodzonych, bez niczego, na co mogliby spojrzeć?

Jeśli tworzysz zawartość zastępczą, w jaki sposób wskażesz odbiorcom, że mogą z niej skorzystać?

Masz do wyboru dwie drogi przekierowywania użytkowników: w sposób jawny i niejawny.

Jawny sposób przekierowywania oznacza, że na wstępnej stronie zadajesz pytanie: „Czy masz taki a taki moduł dodatkowy?”. Kliknięcie Tak powoduje odesłanie użytkownika do stron zawierających treści multimedialne. Kliknięcie Nie skierowuje go do stron alternatywnych. Użytkownicy nie zawsze wiedzą czy mają moduł, o który pytasz. Dobrym pomysłem jest w takim przypadku umieszczenie na wstępnej stronie czegoś, czego obsługa wymaga danego modułu. Wówczas tekst na stronie powinien być taki: „ Jeśli widzisz animację (lub film, lub słyszysz muzykę), masz moduł”. Możesz także umieścić na stronie połączenie do miejsca, z którego można ściągnąć moduł dodatkowy. Jawne przekierowywanie irytuje niektórych, nie wszyscy bowiem lubią pośrednie etapy między sobą a witryną WWW. Z drugiej strony jest to metoda prosta i odporna na błędy użytkownika.

Niejawne przekierowywanie oznacza detekcję modułu w tle i automatyczne skierowanie użytkownika do właściwej wersji stron, bez jego świadomości, że coś takiego ma miejsce. To atrakcyjna opcja, ponieważ z punktu widzenia użytkownika ułatwia korzystanie z witryny. Jest jednak trudniejsza do skonfigurowania i narażona na liczne niebezpieczeństwa.

Detekcja za pomocą behawiora Check Plugin

Standardowa metoda realizacji niejawnej detekcji modułu dodatkowego opiera się na skrypcie JavaScript, wykonywanym w trakcie ładowania strony. Tak właśnie działa behawior pogramu Dreamweaver Check Plugin.

Możesz użyć ten behawior w dwojaki sposób:

• Możesz umieścić go na stronie zawierającej treści multimedialne. Jeśli moduł dodatkowy zostanie znaleziony, przeglądarka nie zmieni wyświetlanej strony. W przeciwnym wypadku jest odsyłana do strony alternatywnej.

• Możesz umieścić behawior na pustej, pozorowanej stronie. W tym przypadku, po stwierdzeniu obecności modułu, przeglądarka jest odsyłana do strony zawierającej treści multimedialne. Jeśli moduł nie zostanie znaleziony, ładowana jest strona alternatywna.

Rysunek 20.46 pokazuje strukturę plików dla obu tych scenariuszy.

Rys. 20.46. Dwa różne sposoby konfiguracji plików pod kątem korzystania z behawiora Check Plugin

Strategia 1. Test przeprowadzany bezpośrednio na stronie zawierającej treści multimedialne Strategia 2. Test przeprowadzany na dodatkowej, fikcyjnej stronie

Drugi scenariusz jest bardziej efektywny, ponieważ nie zmusza użytkowników, na których komputerach nie ma modułu dodatkowego, do czekania na załadowanie się pełnej multimediów strony, aby mogli być oni skierowani do wersji alternatywnej. Pierwszy scenariusz jest natomiast prostszy do realizacji i obsługi, ponieważ oznacza o jeden plik HTML mniej.

Aby zastosować behawior Check Plugin:

1. Zacznij od przygotowania wszystkich niezbędnych plików. Będziesz potrzebował pliku zawierającego media i strony o alternatywnej zawartości. Być może będziesz też chciał stworzyć pustą, pozorowaną stronę, na której znajdzie się tylko sam behawior i nic więcej.

2. Otwórz plik, w którym chcesz wstawić behawior. To może być strona z plikami multimedialnymi lub strona pusta.

3. Kliknij w obszarze selektora znaczników znacznik <BODY>. Behawior musi być wywoływany z poziomu tego właśnie znacznika.

4. W oknie palety Behaviors wybierz z listy Actions pozycję Check Plugin. Wyświetlone zostanie okno dialogowe Check Plugin, takie jak na rysunku 20.47.

Rys. 20.47. Okno dialogowe Check Plugin z przykładowymi ustawieniami

5. Wybierz z rozwijanej listy Select moduł dodatkowy, pod kątem obecności którego chcesz przeprowadzić test. Na liście znajdziesz najpopularniejsze moduły. Jeśli chcesz uwzględnić w teście moduł, którego nie ma na liście, wpisz jego nazwę ręcznie w polu Enter.

6. W pozostałych polach okna dialogowego podaj nazwy utworzonych wcześniej plików. Jeśli dodajesz behawior do strony zawierającej treści multimedialne, w polu If Found, Go to URL umieść adres tej strony. Jeśli behawior dodawany jest do pustej strony, w polu tym powinien pojawić adres strony z multimediami. W polu Otherwise, Go to URL wpisz adres URL strony z alternatywną zawartością.

7. Ważne! Pamiętaj, aby zaznaczyć pole wyboru Always go to first URL if detection is not possible. Niektóre wersje przeglądarki Internet Explorer nie pozwalają na detekcję modułu za pomocą języka JavaScript. Jeśli tego nie zrobisz, użytkownicy takich przeglądarek będą odsyłani do strony alternatywnej, nawet jeśli mają moduł dodatkowy (oczywiście nie jest to miłe).

Ograniczenia detekcji za pomocą skryptu

Jeśli detekcja prowadzona jest przy użyciu skryptu, mogą zdarzyć się komplikacje. Jak już wspomniano, niektóre przeglądarki nie zezwalają na taką detekcję. Korzystając z behawiora Check Plugin, pamiętaj także, że detekcja prowadzona jest pod kątem obecności modułu a nie jego wersji. Co będzie, jeśli obsługa pliku wymaga modułu QuickTime 4.1, a użytkownik ma moduł QuickTime 3? Behawior Check Plugin skieruje użytkowników Twojej strony do wersji wymagającej modułu dodatkowego, lecz zawartość strony pozostanie dla nich niedostępna. Użytkownicy nie będą z takiego obrotu sprawy zadowoleni. Jeśli taka możliwość Cię niepokoi, zastanów się nad metodami detekcji, które nie wymagają skryptów.

Detekcja nie wymagająca skryptów

Istnieje metoda detekcji, w której skrypty nie są stosowane, lecz wymagany jest dostęp do programu, w którym tworzone są pliki multimedialne. Metoda ta, przedstawiona na schemacie z rysunku 20.48, będzie działać dla dowolnego typu plików multimedialnych, jeśli tylko istnieje narzędzie tworzenia tych plików (Flash, Shockwave i RealPlayer). W ćwiczeniu 20.16 użyjesz pliku Shockwave. Zrozumienie zasady jej działania pozwoli Ci przystosować procedurę do dowolnego innego typu pliku multimedialnego.

Rys. 20.48. Detekcja prowadzona bez skryptów, w której korzysta się z fikcyjnej sekwencji wideo i znacznika <META>

Ćwiczenie 20.16. Detekcja modułu dodatkowego Shockwave, w której nie są stosowane skrypty

Oto kolejne etapy procedury demonstrujące zasady detekcji modułu dodatkowego Shockwave, w której nie są stosowane skrypty:

1. Utwórz trzy pliki HTML. Nazwij je shockwave.html, non_shockwave.html i dummy.html. Podobnie jak w przypadku metody korzystającej ze skryptów, w tej metodzie także punktem startowym jest pusta, fikcyjna strona, która służy jedynie do przeprowadzenia detekcji. W zależności od jej wyników, użytkownik zostanie skierowany do strony korzystającej z modułu Shockwave lub strony bez Shockwave.

2. W pliku shockwave.html wstaw plik Shockwave o nazwie slideshow.dcr. Zastosuj dla pola tej sekwencji wideo rozmiary równe 400x400. Innych parametrów nie musisz definiować.

3. W pliku non_shockwave.html wstaw plik o nazwie slideshow.jpg. Jest to po prostu obraz w formacie JPEG, będący pierwszym elementem z pokazu slajdów. Oczywiście w rzeczywistym przypadku należałoby przygotować bardziej funkcjonalną alternatywę, na przykład w oparciu o skrypt JavaScript i zestaw obrazów.

4. W pliku dummy.html wstaw plik shocktest.dcr. Ta sekwencja wideo Shockwave zawiera tylko jedną klatkę i pustą scenę (nie dziw się więc, że nic nie zobaczysz, jeśli będziesz chciał ją podglądnąć). Klatka zawiera wyrażenie Lingo:
   
   on exitFrame
   gotoNetPage shockwave.html
   end
   
   Wyrażenie to określa, że po odtworzeniu klatki, przeglądarka otworzy plik shockwave.html. Rysunek 20.49 pokazuje sposób, w jaki skonfigurowano tę sekwencję wideo Shockwave w programie Director. Jak ona działa? Jeśli użytkownik ma odpowiedni moduł dodatkowy Shockwave, sekwencja wideo shocktest.dcr zostanie odtworzona. Wówczas przeglądarka jest skierowywana do strony zawierającej treści Shockwave. W ten sposób uwzględniane są interesy tych, którzy mają moduł dodatkowy Shockwave.

Rys. 20.49. Konfigurowanie sekwencji wideo shocktest.dcr w Directorze. Pusta scena i wyrażenie Lingo, które ma być wykonane po odtworzeniu pierwszej i jedynej klatki sekwencji

5. Wstaw w pliku dummy.html znacznik <META> przeładowania strony.
   Wyświetl obiekty kategorii HEAD palety obiektów, odszukaj obiekt Insert Refresh i wstaw go. Obiekt ten dodaje do sekcji HEAD dokumentu znacznik <META>, który automatycznie, po zadeklarowanym czasie, ładuje do okna przeglądarki nową stronę. Czas opóźnienia (pole Delay) ustaw na 15 sekund. Jako stronę docelową (pole Go To URL) wpisz non_shockwave.html. Rysunek 20.50 pokazuje ikonę Insert Refresh na palecie obiektów i okno dialogowe Insert Refresh z odpowiednimi ustawieniami.
   

Rys. 20.50. Wstawianie znacznika <META> przeładowania strony w pliku dummy.html. Okno dialogowe Insert Refresh prezentuje ustawienia dla skierowania przeglądarki do strony nie zawierających treści Shockwave

Jak to działa? Piętnaście sekund po załadowaniu, strona sama wymusi przekierowanie do strony nie zawierającej treści Shockwave. Pomysł jest taki: jeśli użytkownik ma moduł dodatkowy, sekwencja wideo shocktest zostanie odtworzona, a przeglądarka przekierowana pod adres URL strony zawierającej treści Shockwave, umieszczony w skrypcie Lingo. Jeśli użytkownik nie ma modułu dodatkowego, sekwencja wideo shocktest nie zostanie odtworzona i nie nastąpi przekierowanie przeglądarki. Po upływie 15 sekund wymuszone zostanie przekierowanie do strony non_shockwave.html. Jest to bardzo zręczny trik.

6. Otwórz plik dummy.html w przeglądarce i zobacz, co się stanie. Jeśli na Twoim komputerze jest zainstalowany moduł Shockwave potrzebny do odtworzenia pliku, bardzo szybko powinieneś zostać przerzucony do strony zawierającej pokaz slajdów. Jeśli nie masz modułu, wyświetlony zostanie tylko obraz JPEG.

Detekcja innych modułów dodatkowych, w której nie są stosowane skrypty

Niezależnie od typów plików multimedialnych, z których korzystasz, działanie tej metody wymaga dostępu do środków zmiany adresu URL w oknie przeglądarki. W przypadku sekwencji wideo Shockwave, jest to polecenie języka Lingo GoToNetPage, dostępne w programie Director. W przypadku innych programów

• Aby przeprowadzić test pod kątem obecności modułu dodatkowego Flash, zastosuj w programie Flash wyrażenie GetURL()języka ActionScript.

• Aby przeprowadzić test pod kątem obecności modułu dodatkowego QuickTime, korzystając z programu Plugin Helper dodaj parametr qtnext1=[URL].

Podsumowanie

W tym rozdziale posmakowałeś podstawowych technologii umieszczania treści multimedialnych na stronach WWW. Czy omówione tu technologie są jedynymi? Nie! Sieć oplata cały świat i jest pełna różnorodności. Nie zajmowaliśmy się technologią Beatnik, alternatywnym modułem dodatkowym do obsługi dźwięku, ani modułem MetaStream, który służy do obsługi strumieniowego przesyłu danych grafiki trójwymiarowej. Nie mówiliśmy tu także ani o programie Windows Media Player, ani o formacie AVI plików wideo. Jak widzisz, bez przerwy pojawiają się i są implementowane nowe technologie. Jeśli chcesz zaproponować odwiedzającym Twoje strony nowe doświadczenia w dziedzinie multimediów, eksperymentuj, a następnie skorzystaj z narzędzi programu Dreamweaver, by zestawić wszystko w całość.

2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)

2 G:\DREAM_trans\rozdz20.doc

Opis nie pasuje do rysunku, a poza tym okna z Maca

Opis nie pasuje do rysunku, a poza tym okna z Maca

---