r41-06, ## Documents ##, flash5biblia

Rozdział 41.

Osadzanie filmu Flasha w dokumencie HTML

W tym rozdziale:[Author ID1: at Tue Nov 27 16:00:00 2001 ]

Ręczne wstawianie filmu do dokumentu HTML
Całkowite wypełnianie okna przeglądarki filmem Flasha
Wykrywanie obecności plug-[Author ID1: at Tue Nov 27 16:01:00 2001 ]inu odtwarzającego filmy Flasha
Wykorzystanie JavaScript w wyświetlaniu filmu

Pisanie dokumentów HTML dla filmów Flasha

W rozdziale 40. nauczyłeś się,[Author ID1: at Tue Nov 27 16:11:00 2001 ] jak korzystać z nowej funkcji Publish, która między innymi umożliwia automatyczne generowanie dokumentów HTML w oparciu o gotowe szablony. Dokumenty te zawierają znaczniki języka HTML potrzebne do wyświetlenia filmu Flasha na stronie WWW. Obecnie zajmiemy się ręcznym wprowadzaniem kodu HTML, który będzie spełniał taką samą funkcję. Dzięki informacjom tu p~~rzysw~~[Author ID1: at Tue Nov 27 16:12:00 2001 ]oda[Author ID1: at Tue Nov 27 16:12:00 2001 ]jo[Author ID1: at Tue Nov 27 16:12:00 2001 ]nym będziesz mógł także modyfikować dokumenty HTML wygenerowane przy uży[Author ID1: at Tue Nov 27 16:12:00 2001 ]ciu [Author ID1: at Tue Nov 27 16:12:00 2001 ]poleceniem[Author ID1: at Tue Nov 27 16:12:00 2001 ]a[Author ID1: at Tue Nov 27 16:12:00 2001 ] Publish.

Uwaga
W zamieszczonych poniżej przykładowych kodach HTML używamy znaku gwiazki (*) wszędzie tam, gdzie występują opcjonalne zmiany w stosunku do ustawień z domyślnego szablonu Flasha — Flash Only (Default).

Do umieszczenia filmu Flasha na stronie internetowej (na przykład w dokumencie HTML) należy wykorzystać dwa znaczniki: <OBJECT> i <EMBED>. Konieczne jest zastosowanie obydwu znaczników, ponieważ każdy z nich jest przeznaczony dla innej przeglądarki: <OBJECT> dla Internet Explorera, a <EMBED> dla Netscape'a pod Windows i na Mac-[Author ID1: at Tue Nov 27 16:13:00 2001 ]u (a także dla Internet Explorera na Mac-[Author ID1: at Tue Nov 27 16:13:00 2001 ]u). Obydwa znaczniki działają podobnie, z niewielkimi różnicami ~~odnośnie~~[Author ID1: at Tue Nov 27 16:13:00 2001 ]dotyczącymi[Author ID1: at Tue Nov 27 16:13:00 2001 ] nazw atrybutów i ich uporządkowania. Pamiętaj o tym, że nawet jeśli obydwa znaczniki znajdą się w kodzie HTML, tylko jeden z nich zostanie odczytany przez przeglądarkę, w zależności od tego, jaka przeglądarka została użyta do wyświetlenia dokumentu. Bez wspomnianych znaczników film Flasha nie może zostać wyświetlony na stronie WWW razem z innymi obrazami czy tekstem.

Wskazówka
Możesz także zdefiniować bezpośredni odsyłacz (link) do pliku .SWF, co jest alternatywną metodą wyświetlania filmów Flasha. Metoda ta jednak uniemożliwia stosowanie atrybutów sterujących odtwarzaniem i wyglądem filmu — jest to praktycznie to samo,[Author ID1: at Tue Nov 27 16:14:00 2001 ] co załadowanie pliku .SWF do programu odtwarzającego filmy Flasha. W dalszej części rozdziału natkniesz się na ćwiczenie opisywane przez Colina Moock'[Author ID1: at Tue Nov 27 16:14:00 2001 ]a, ~~gdzie~~[Author ID1: at Tue Nov 27 16:14:00 2001 ]w nim[Author ID1: at Tue Nov 27 16:14:00 2001 ] znajdziesz więcej informacji na temat bezpośredniego odsyłania do filmu.

Wykorzystanie znacznika <OBJECT>

Przeglądarka Internet Explorer dla Windows jako jedyna korzysta z tego znacznika do włączania kontrolki Flash ActiveX. Gdy skorzystasz z szablonu Flash Only (Default) w oknie Publish Settings, dokument HTML zostanie wygenerowany ze znacznikiem <OBJECT> w następującej postaci:

A. <OBJECT

B. classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

C. codebase="http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash. cab#version=5,0,0,0"

D. ID=home

E. WIDTH=550 HEIGHT=400>

F. <PARAM NAME=movie VALUE="home.swf">

G. <PARAM NAME=quality VALUE=high>

H. <PARAM NAME=bgcolor VALUE=#FFFFFF>

I. * <PARAM NAME=scale VALUE=noborder>

J. * <PARAM NAME=play VALUE=false>

K. </OBJECT>

< --> OBJECT[Author:MMP] [Author ID1: at Tue Nov 27 16:23:00 2001 ]. Początkowy znacznik, zawierający kod ID i dane o lokalizacji kontrolki ActiveX dla[Author ID1: at Tue Nov 27 16:16:00 2001 ] ~~dla~~ [Author ID1: at Tue Nov 27 16:16:00 2001 ]Flasha. Zwróć uwagę na to, że znacznik ten zawiera atrybuty oznaczone powyżej literami od B do E.
classid. Ten długi ciąg znaków jest unikalnym kodem identyfikacyjnym ActiveX. Jeśli wstawiasz znacznik <OBJECT> ręcznie w edytorze tekstu, upewnij się, że skopiowałeś ten ciąg dokładnie tak jak w oryginale.
codebase. Podobnie jak atrybut codebase w znaczniku <APPLET> Javy, ten atrybut znacznika <OBJECT> określa adres URL do [Author ID1: at Tue Nov 27 16:16:00 2001 ]instalatora kontrolki ActiveX. Zwróć uwagę na to, że fragment #version=5,0,0,0 w adresie oznacza, że powinien być używany odtwarzacz plików Flasha w wersji 5. Możesz też określić numer podwersji odtwarzacza, na przykład #version=5,0,29,0, który spowoduje zainstalowanie kontrolki ActiveX w wersji r29 dla Flasha 5. Jeśli odbiorca nie posiada zainstalowanej odpowiedniej kontrolki ActiveX, Internet Explorer automatycznie załaduje ją spod wskazanego adresu.
ID. Ten atrybut znacznika <OBJECT> przypisuje filmowi Flasha identyfikator JavaScript (VBScript), dzięki czemu filmem można sterować przy użyciu funkcji JavaScript lub VBScript. Domyślnie wartość tego atrybutu to po prostu nazwa pliku .SWF (bez rozszerzenia .SWF). Każdy element strony HTML powinien mieć zdefiniowany niepowtarzalny atrybut ID lub NAME. O atrybucie NAME napiszemy w następnym podrozdziale.
WIDTH i HEIGHT>. Te atrybuty określają szerokość i wysokość pola wyświetlającego film Flasha na stronie internetowej. Jeśli nie określisz żadnej jednostki miary, wartości te zostaną wyrażone w pikselach. Jeśli dodasz na końcu każdej wartości znak %, wtedy atrybuty WIDTH i HEIGHT wyrażą wymiary filmu w procentach względem bieżących wymiarów okna przeglądarki. Gdy na przykład wprowadzisz wartość 100% dla obu atrybutów, film Flasha wypełni całe okno przeglądarki, pozostawiając jednak niewielką obwódkę oddzielającą krawędzie filmu od krawędzi okna przeglądarki. W dalszej części rozdziału znajdziesz opis ćwiczenia prezentowanego przez Colina Moock'[Author ID1: at Tue Nov 27 16:18:00 2001 ]a, w którym dowiesz się jak zminimalizować grubość tej obwódki.
<PARAM NAME=movie VALUE="home.swf">. Jest to pierwszy z podrzędnych znaczników <PARAM> osadzonych w obrębie znacznika <OBJECT> </OBJECT>. Każdy z dodatkowych parametrów posiada ustawienie NAME=, którego nie należy mylić z atrybutem NAME lub ID w skryptach JavaScript. W tym przypadku ustawienie movie odnosi się do nazwy pliku z filmem Flasha, która wprowadzana jest jako wartość parametru, czyli atrybut VALUE.
<PARAM NAME=quality VALUE=high>. Ten parametr z atrybutem NAME=quality steruje jakością generowania grafiki Flasha w oknie przeglądarki. Wartość (atrybut VALUE) można wybrać spośród następujących ustawień: low, autolow, autohigh, high lub best. Większość filmów Flasha w sieci korzysta z ustawienia autohigh, które sprawia, że w pierwszej kolejności odtwarzacz próbuje wyświetlać grafikę z wygładzaniem (anti-aliasingiem) i dopiero gdy[Author ID1: at Tue Nov 27 16:19:00 2001 ] ~~jeśli~~ [Author ID1: at Tue Nov 27 16:19:00 2001 ]okaże się, że procesor w komputerze odbiorcy nie jest w stanie zapewnić płynności animacji, wygładzanie jest wyłączane i przyjmowana jest niska jakość wyświetlania (low). Dokładniejszy opis ustawiania jakości filmu Flasha znajdziesz w rozdziale 40., w podrozdziale „Ustawienia formatu HTML (panel HTML)”.
<PARAM NAME=bgcolor VALUE=#FFFFFF>. Wartość tego parametru określa kolor tła, na jakim wyświetlany jest film Flasha. Jeśli publikujesz film za pomocą [Author ID1: at Tue Nov 27 16:19:00 2001 ]poleceniem[Author ID1: at Tue Nov 27 16:19:00 2001 ]a[Author ID1: at Tue Nov 27 16:19:00 2001 ] Publish, kolor ten jest identyczny z kolorem tła filmu ustawianym we Flashu w oknie Movie Properties (polecenie Modify/Movie). Możesz jednak zmienić to ustawienie i ręcznie zdefiniować kolor tła, wprowadzając odpowiednią wartość atrybutu[Author ID1: at Tue Nov 27 16:20:00 2001 ]y[Author ID1: at Tue Nov 27 16:19:00 2001 ] VALUE. Zauważ, że parametr ten, podobnie jak wszystkie znaczniki i atrybuty HTML-a związane z kolorami, używa kodu szesnastkowego do opisu koloru. Więcej informacji na temat koloru znajdziesz w rozdziale 6., „Kolor”.
<PARAM NAME=scale VALUE=noborder>. Ten opcjonalny parametr steruje sposobem skalowania filmu Flasha w polu o wymiarach zdefiniowanych atrybutami WIDTH i HEIGHT znacznika <OBJECT>. Dla parametru scale można określić jedną z następujących wartości: showall, noborder lub exactfit. Jeśli parametr ten nie występuje w kodzie HTML, odtwarzacz Flasha wyświetla film w taki sposób, jak gdyby została przyjęta wartość showall. Oznacza to, że film zostanie przeskalowany do okna określonego atrybutami HEIGHT i WIDTH, przy czym zachowane będą oryginalne proporcje filmu. Dokładniejszy opis działania funkcji scale znajdziesz w podrozdziale „Ustawienia formatu HTML (panel HTML)” w rozdziale 40.
<PARAM NAME=play VALUE=false>. Parametr ten również jest opcjonalny. Przekazuje do odtwarzacza[Author ID1: at Tue Nov 27 16:20:00 2001 ]~~Informuje on odtwarzacz~~[Author ID1: at Tue Nov 27 16:21:00 2001 ] Flasha informację,[Author ID1: at Tue Nov 27 16:21:00 2001 ] czy odtwarzanie filmu powinno się rozpocząć od razu po przesłaniu pierwszych ujęć do przeglądarki. Jeśli wartość (VALUE) tego parametru jest ustawiona na false, film Flasha zostanie zatrzymany w pierwszym ujęciu — tak jak w przypadku umieszczenia akcji stop w pierwszym ujęciu. Jeśli wartością tego parametru będzie true, odtwarzanie filmu rozpocznie się zaraz po rozpoczęciu przesyłania do przeglądarki.
</OBJECT>. Jest to domknięcie znacznika <OBJECT> umieszczonego na początku kodu. Jak pokażemy w dalszej części rozdziału, możesz wstawiać inne znaczniki HTML po[Author ID1: at Tue Nov 27 16:22:00 2001 ]między ostatnim parametrem <PARAM> a zamykającym znacznikiem </OBJECT>, co umożliwia obsługę przeglądarek,[Author ID1: at Tue Nov 27 16:22:00 2001 ] które nie korzystają z technologii ActiveX, takich jak na przykład Netscape. Ponieważ Internet Explorer jest jedyną przeglądarką rozpoznającą znacznik <OBJECT>, pozostałe przeglądarki po prostu pomijają ten znacznik (a także wszystkie jego ustawienia <PARAM>) i odczytują dopiero znaczniki po[Author ID1: at Tue Nov 27 16:22:00 2001 ]między ostatnim parametrem <PARAM> i zamykającym znacznikiem </OBJECT>.

Wskazówka
Znacznik <OBJECT> może zawierać także inne parametry, na przykład WMODE. Ten parametr działa tylko w 32-bitowych wersjach przeglądarki Internet Explorer dla Windows 95, 98 lub NT. Pod koniec rozdziału 39., „Współpraca z programami Dreamweaver i Director”,[Author ID1: at Tue Nov 27 16:25:00 2001 ] możesz przeczytać więcej na temat tego parametru.

Wykorzystanie znacznika <EMBED>

Netscape Communicator (lub Navigator) używa znacznika <EMBED> do obsługiwania tych formatów plików, które wymagają zainstalowania odpowiednich plug-[Author ID1: at Tue Nov 27 16:25:00 2001 ]inów, na przykład formatów Macromedia Flash, Shockwave Director lub Apple QuickTime.

A. <EMBED

B. src="home.swf"

C. quality=high

D. * scale=noborder

E. * play=false

F. bgcolor=#FFFFFF

G. WIDTH=550 HEIGHT=400

H. * swLiveConnect=false

I. TYPE="application/x-shockwave-flash"

J. PLUGINSPAGE="http://www.macromedia.com/shockwave/
download/index.cgi?P1_Prod_Version=ShockwaveFlash">

K. </EMBED>

<EMBED. Jest to początek znacznika <EMBED>. Linie oznaczone literami od B do J są atrybutami tego znacznika, dlatego na końcu linii A nie ma nawiasu > domykającego znacznik.
src. Skrót od „source”, czyli „źródło” — nazwa pliku z filmem Flasha. Ten atrybut znacznika <EMBED> ma takie samo znaczenie jak <PARAM NAME=movie VALUE="home.swf"> w znaczniku <OBJECT>.
quality. Atrybut sterujący jakością wyświetlania grafiki Flasha w oknie przeglądarki. Podobnie jak w jego odpowiedniku dla znacznika <OBJECT>, czyli <PARAM NAME=quality VALUE=high>, wartości tu przyjmowane mogą być następujące: low, autolow, autohigh, high lub best.
scale. Ten atrybut znacznika <EMBED> steruje sposobem dopasowania filmu Flasha do okna przeglądarki lub wymiarów określonych atrybutami WIDTH i HEIGHT (zobacz punkt F). Można tu przyjąć następujące wartości: showall (domyślna, można ją pominąć), noborder lub exactfit.
play. Atrybut decydujący o uruchomieniu odtwarzania filmu Flasha. Jeśli ustawisz go na false, film nie zostanie uruchomiony po załadowaniu, dopóki nie nastąpi określona akcja włączająca odtwarzanie filmu (na przykład akcja przypisana przyciskowi lub ujęciu filmu). Przy ustawieniu true film zaczyna być odtwarzany,[Author ID1: at Tue Nov 27 16:26:00 2001 ] gdy tylko rozpocznie się jego przesyłanie do przeglądarki.
bgcolor. Ustawienie określające kolor tła filmu Flasha. Podobnie jak w poprzednich atrybutach, ten również ma swój identyczny odpowiednik pośród parametrów <PARAM> w znaczniku <OBJECT>, więc możesz zajrzeć do jego opisu w poprzednim podrozdziale.
WIDTH i HEIGHT: Atrybuty definiujące wymiary filmu Flasha wyświetlanego na stronie WWW. Więcej informacji na ich temat znajdziesz w poprzednim podrozdziale, opisującym korzystanie ze znacznika <OBJECT>.
swLiveConnect. Jest to jedyny atrybut, który nie ma swojego odpowiednika wśród atrybutów znacznika <OBJECT>. Uaktywnia on funkcję LiveConnect w przeglądarce Netscape, dzięki której plug-[Author ID1: at Tue Nov 27 16:26:00 2001 ]iny i aplety Javy mogą komunikować się z językiem JavaScript. Domyślnie wartość tego atrybutu to false. Jeżeli zmienimy ją na true (czyli włączymy funkcję LiveConnect), w ładowaniu strony internetowej może nastąpić niewielkie opóźnienie. Najnowsze wersje Netscape nie uruchamiają obsługi Javy,[Author ID1: at Tue Nov 27 16:27:00 2001 ] dopóki nie zostanie załadowana strona z ap[Author ID1: at Tue Nov 27 16:27:00 2001 ]pletem Javy (lub plug-[Author ID1: at Tue Nov 27 16:27:00 2001 ]inem uruchamianym z poziomu Javy, jak w przypadku Flasha). O ile nie korzystasz z akcji FSCommand w filmie Flasha, lepiej jest pozostawić atrybut swLiveConnect z wartością false.
TYPE="application/x-shockwave-flash". Ten atrybut informuje przeglądarkę Netscape, jakiego typu plik MIME (Multipurpose Internet Mail Extension) został osadzony w dokumencie. Każdy typ pliku (.TIF, .JPG, .GIF, .DOC, .TXT i tak dalej) posiada inny nagłówek MIME opisujący zawartość pliku. Filmy Flasha identyfikowane --> s[Author:MMP] [Author ID1: at Tue Nov 27 16:28:00 2001 ]¹ kodem application/x-shockwave-flash. Każdy program (lub system operacyjny), który obsługuje pliki ściągane z sieci i identyfikowane nagłówkiem MIME, na podstawie takiej informacji może uruchomić stosowną aplikację lub plug-[Author ID1: at Tue Nov 27 16:29:00 2001 ]in, za pomocą którego otworzy dany plik. Bez tego atrybutu przeglądarka Netscape może nie rozpoznać typu pliku. W rezultacie w oknie przeglądarki pojawi się „złamana” ikona plug-[Author ID1: at Tue Nov 27 16:29:00 2001 ]inu podczas przesyłania pliku Flasha.
PLUGINSPAGE. Atrybut ten ~~mówi~~ [Author ID1: at Tue Nov 27 16:30:00 2001 ]przekazuje informację do [Author ID1: at Tue Nov 27 16:30:00 2001 ]przeglądarce[Author ID1: at Tue Nov 27 16:30:00 2001 ]ki [Author ID1: at Tue Nov 27 16:30:00 2001 ] [Author ID1: at Tue Nov 27 16:30:00 2001 ]Netscape, gdzie może odszukać odpowiedni plug-[Author ID1: at Tue Nov 27 16:31:00 2001 ]in, jeśli nie jest on zainstalowany w systemie. Nie jest to odpowiednik automatycznej instalacji plug-[Author ID1: at Tue Nov 27 16:31:00 2001 ]inu przy użyciu języka JavaScript — po prostu następuje przekierowanie przeglądarki ~~pod~~[Author ID1: at Tue Nov 27 16:31:00 2001 ]na[Author ID1: at Tue Nov 27 16:31:00 2001 ] adres URL, pod którym można znaleźć odpowiednie programy.
</EMBED>. Zamknięcie znacznika <EMBED>. Niektóre starsze przeglądarki lub przeglądarki działające w trybie tekstowym (na przykład Lynx),[Author ID1: at Tue Nov 27 16:31:00 2001 ] nie potrafią zinterpretować i wyświetlić zawartości znacznika <EMBED>. Możesz więc wstawić alternatywny kod HTML (na przykład znacznik <IMG> wyświetlający statyczny lub animowany plik .GIF) pomiędzy znaczniki <EMBED> i </EMBED>, aby zawartość strony była widoczna w tych przeglądarkach.

Ostrzeżenie
Może to być dla c[Author ID1: at Tue Nov 27 16:32:00 2001 ]C[Author ID1: at Tue Nov 27 16:32:00 2001 ]iebie sporym zaskoczeniem, ale żadna z wersji Internet Explorera dla Mac-[Author ID1: at Tue Nov 27 16:32:00 2001 ]a nie potrafi odczytywać znaczników <OBJECT>. Zamiast tego Internet Explorer na Mac-[Author ID1: at Tue Nov 27 16:33:00 2001 ]u używa plug-[Author ID1: at Tue Nov 27 16:33:00 2001 ]inu emulującego standard Netscape, aby odczytywać zawartość znacznika <EMBED>. Emulator ten nie odczytuje jednak wszystkich atrybutów znacznika <EMBED> tak jak Netscape. W rezultacie atrybut swLiveConnect nie funkcjonuje w przeglądarce Internet Explorer dla Mac-[Author ID1: at Tue Nov 27 16:33:00 2001 ]a. Oznacza to również, że przeglądarka ta nie obsługuje akcji FSCommand.

!!!!!!!!!!!!!!!!!!! Początek szarej ramki !!!!!!!!!!!!!!!!!!!!!

Ćwiczenie eksperta

Rozciąganie filmu na całe okno przeglądarki przy użyciu znacznika <FRAMESET>

Autor: Colin Moock

Biograficzna notka o Colinie znajduje się w opisie jego wcześniejszego ćwiczenia, znajdującym się w rozdziale 18., „Zarządzanie listwami czasowymi”. Niniejsze ćwiczenie jest prawdopodobnie jednym z najpopularniejszych (i najczęściej czytanych) poradników Colina — uczy ono,[Author ID1: at Tue Nov 27 16:34:00 2001 ] jak wykorzystać znacznik <FRAMESET>, aby zawartość filmu Flasha wypełniła całe okno --> przeglądarki[Author:MMP] [Author ID1: at Tue Nov 27 16:33:00 2001 ].

Wypełnianie luk

Wielu projektantów flashowych doświadczyło problemu polegającego na tym, że film Flasha nie wypełnia całkowicie okna przeglądarki. W rezultacie marnuje się pewien obszar ekranu,[Author ID1: at Tue Nov 27 16:34:00 2001 ] albo, co gorsza, pojawia się niepożądana szczelina po[Author ID1: at Tue Nov 27 16:35:00 2001 ]między ~~krawędzią~~[Author ID1: at Tue Nov 27 16:35:00 2001 ]brzegiem[Author ID1: at Tue Nov 27 16:35:00 2001 ] filmu Flasha i krawędzią okna przeglądarki.

Na poniższym rysunku po lewej stronie widać brzydką białą szczelinę wokół filmu Flasha. Po prawej stronie ten sam film wyświetlany jest po zminimalizowaniu tej szczeliny. Projektantom, którzy wolą efekt widoczny po prawej stronie, można polecić dwa rozwiązania funkcjonujące z większością przeglądarek. Pierwsze z nich polega na wykorzystaniu ramek (-->frames[Author ID1: at Tue Nov 27 16:36:00 2001 ]) i ogranicza nas tylko do tych przeglądarek, które obsługują ramki. Drugie rozwiązanie wymaga, aby plug-[Author ID1: at Tue Nov 27 16:35:00 2001 ]in Flasha został wykryty przed rozpoczęciem ładowania i wyświetlania filmu na nowej stronie — nie można więc stosować go we wszystkich rodzajach stron.

0x01 graphic

Pojedyncza ramka

Gdy prawidłowo ustawisz parametry ramki, jej zawartość (w naszym przypadku film Flasha) może zostać rozciągnięta do rozmiarów o jeden lub dwa piksele mniejszych (zależy to od typu przeglądarki) niż wnętrze okna przeglądarki. Aby to osiągnąć, utwórz stronę (na przykład o nazwie -->yourmovie.html[Author ID1: at Tue Nov 27 16:36:00 2001 ]), w której zostanie osadzony film Flasha. Następnie musisz odpowiednio ustawić szerokość (WIDTH) i wysokość (HEIGHT) filmu, a także opcję skalowania (SCALE). Można to zrobić na trzy sposoby.[Author ID1: at Tue Nov 27 16:36:00 2001 ]:[Author ID1: at Tue Nov 27 16:36:00 2001 ]

HEIGHT="100%" WIDTH="100%" SCALE="EXACTFIT". Ta kombinacja dopasowuje każdą krawędź filmu do odpowiadającej jej krawędzi okna przeglądarki, co prowadzi zazwyczaj do zniekształcenia proporcji filmu (chodzi o proporcję szerokości do wysokości filmu).

HEIGHT="100%" WIDTH="100%" SCALE="SHOWALL". W tym przypadku film jest skalowany tak, aby cały zmieścił się w oknie przeglądarki, jednak bez zniekształcania proporcji — w takim przypadku, jeśli proporcje okna przeglądarki nie są identyczne jak proporcje filmu, po bokach filmu lub u góry i u dołu pojawi się para pustych pasów.

HEIGHT="100%" WIDTH="100%" SCALE="NOBORDER". Takie ustawienie dopasowuje film do okna w ten sposób, że film wypełnia cały zadany obszar (nie pozostają puste pasy, jak w poprzednim przypadku), a jednocześnie jego część (która nie zmieściła się w oknie o danych proporcjach) zostaje odcięta.

Kod HTML z wyeksportowanym filmem powinien przypominać poniższy listing. ([Author ID1: at Tue Nov 27 16:37:00 2001 ]Znak ¬ oznacza przeniesienie fragmentu danej linii kodu do następnego wiersza — nie próbuj wstawiać takiego znaku do własnego kodu)[Author ID1: at Tue Nov 27 16:37:00 2001 ].

<OBJECT

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/ ¬
shockwave/cabs/flash/swflash. cab#version=5,0,0,0"

ID=home

WIDTH="100%"

HEIGHT="100%">

<EMBED SRC="yourmovie.swf"

WIDTH="100%"

HEIGHT="100%"

PLAY="TRUE"

LOOP="TRUE"

QUALITY="HIGH"

SCALE="SHOWALL"

PLUGINSPAGE="http://www.macromedia.com/shockwave/ ¬
download/index.cgi?P1_Prod_Version=ShockwaveFlash">

</EMBED>

</OBJECT>

Aby wyświetlić film Flasha, utworzymy zestaw dwóch ramek, ale tylko w obrębie jednej z nich zostanie zamieszczony film. Pierwsza ramka zajmie 100%[Author ID1: at Tue Nov 27 16:38:00 2001 ] ~~procent~~ [Author ID1: at Tue Nov 27 16:38:00 2001 ]ekranu przeglądarki, natomiast w drugiej użyjemy znaku „*”, który oznacza, że ramka ma zająć pozostałą część okna — czyli w tym przypadku nie będzie w ogóle widoczna. W pierwszej ramce użyjemy atrybutu SRC do wyświetlenia dokumentu HTML z filmem Flasha (na przykład wspomniany wcześniej -->yourmovie.html[Author ID1: at Tue Nov 27 16:38:00 2001 ]), natomiast w drugiej ramce zamieścimy pusty dokument HTML z odpowiednim kolorem tła (BGCOLOR). Cała sztuczka polega na tym, aby określić takie atrybuty ramek, że film Flasha zostanie rozciągnięty na całe wnętrze okna przeglądarki. Oto przykładowy kod z właściwymi ustawieniami:

<HTML><HEAD><TITLE>Nazwa filmu Flasha</TITLE></HEAD>

<FRAMESET ROW="100%,*"

FRAMESPACING="0"

FRAMEBORDER="NO"

BORDER="0">

<FRAME NAME="widoczna"

SRC="yourmovie.html"

FRAMEBORDER="0"

BORDER="0"

MARGINWIDTH="0"

MARGINHEIGHT="0"

SCROLLING="NO">

<FRAME NAME="ukryta"

SRC="empty.html"

FRAMEBORDER="0"

BORDER="0"

MARGINWIDTH="0"

MARGINHEIGHT="0"

SCROLLING="NO">

</FRAMESET>

</HTML>

Przeanalizujmy teraz poszczególne linie kodu.[Author ID1: at Tue Nov 27 16:39:00 2001 ]:[Author ID1: at Tue Nov 27 16:39:00 2001 ]

 Atrybut FRAMEBORDER w znaczniku <FRAMESET> może przyjmować wartości logiczne true lub false, natomiast w znaczniku <FRAME> jest to już parametr wyrażający w pikselach grubość odstępu po[Author ID1: at Tue Nov 27 16:39:00 2001 ]między krawędzią okna przeglądarki a krawędzią ramki.

 W znaczniku <FRAMESET> atrybut BORDER określa w pikselach odstęp po[Author ID1: at Tue Nov 27 16:39:00 2001 ]między sąsiednimi ramkami, natomiast w znaczniku <FRAME> stanowi on przestarzałą już wersję atrybutu FRAMEBORDER.

 Atrybut SCROLLING powinien zostać ustawiony na NO, w przeciwnym razie, jeśli wymiary filmu nie będ~~zie~~[Author ID1: at Tue Nov 27 16:39:00 2001 ]ą[Author ID1: at Tue Nov 27 16:39:00 2001 ] większe od wymiarów okna przeglądarki, powstaną puste szczeliny po prawej stronie i u dołu ramki — w miejscach, gdzie pojawiają się suwaki do przewijania zawartości ramki.

Na koniec, aby zredukować szczeliny tak bardzo,[Author ID1: at Tue Nov 27 16:40:00 2001 ] jak to jest możliwe, możesz ustawić odpowiednio marginesy strony wyświetlającej film (dotyczy to tylko przeglądarek Internet Explorer i Nestcape Navigator w wersjach 4 lub nowszych). Aby to zrealizować, dla Netscape'a wprowadzamy znaczniki MARGINHEIGHT i MARGINWIDTH, natomiast dla Internet Explorera używamy znaczników TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN i RIGHTMARGIN. Jeśli chcemy korzystać z obu przeglądarek, należy wprowadzić następujący kod:

Bezpośrednie wywoływanie pliku Flasha (.SWF)

Alternatywą dla opisanej przed chwilą metody z ramkami jest umieszczenie na stronie internetowej odsyłacza bezpośrednio do pliku z filmem Flasha i pozwolenie na to, aby przeglądarka załadowała go i uruchomiła bez wstawiania w dokument HTML. Jeśli więc film Flasha nosił nazwę mojfilm.swf i był osadzony w dokumencie mojfilm.html, odsyłacz do niego standardowo wyglądałby tak:

<A HREF="mojfilm.html"> Obejrzyj mój film </A>

Należy go zmodyfikować następująco:

<A HREF="mojfilm.swf"> Obejrzyj mój film </A>

Metoda ta jest o wiele prostsza niż metoda z ramkami, jednak można ją stosować tylko przy założeniu, że plug-[Author ID1: at Tue Nov 27 16:41:00 2001 ]in Flasha zostanie prawidłowo wykryty w sposób automatyczny, ponieważ nie występują tu żadne instrukcje HTML, które pozwoliłyby na detekcję plug-[Author ID1: at Tue Nov 27 16:41:00 2001 ]inu i ewentualne ściągnięcie go z sieci w przypadku jego braku lub konieczności zaktualizowania. Metody tej nie powinniśmy więc stosować we wszystkich sytuacjach.

Gdy korzystamy z bezpośredniego odsyłacza do pliku .SWF, warto pamiętać o ustawieniu jakości (QUALITY) wyświetlania filmu na wysoką (HIGH) z poziomu samego filmu. Służy do tego akcja toggleHighQuality (dostępna tylko dla wersji Flash 3 lub nowszej). Aby z niej skorzystać, zaznacz pierwsze ujęcie filmu, wyświetl panel Actions (w trybie Normal Mode) i wstaw w ujęcie akcję toggleHighQuality.

!!!!!!!!!!!!!!!!!!! Przypis do szarej ramki !!!!!!!!!!!!!!!!!!!!!

Jeśli chciałbyś dowiedzieć się czegoś więcej o Colinie Moock'[Author ID1: at Tue Nov 27 16:42:00 2001 ]u, przeczytaj jego notkę biograficzną w rozdziale 18., „Zarządzanie listwami czasowymi”.

!!!!!!!!!!!!!!!!!!! Koniec szarej ramki !!!!!!!!!!!!!!!!!!!!!

Wykrywanie odtwarzacza filmów Flasha

Po co mielibyśmy tworzyć flashowe filmy, gdyby nikt nie mógł ich obejrzeć? Ponieważ najczęściej filmy Flasha wyświetlane są na stronach internetowych, bardzo ważne jest zapewnienie, że strona HTML sprawdzi obecność plug-[Author ID1: at Tue Nov 27 16:43:00 2001 ]inu Flasha,[Author ID1: at Tue Nov 27 16:43:00 2001 ] zanim rozpocznie się przesyłanie filmu do okna przeglądarki. Istnieje co najmniej kilka różnych sposobów na wykrywanie obecności plug-[Author ID1: at Tue Nov 27 16:43:00 2001 ]inu w systemie i niniejszy podrozdział zaprezentuje przegląd dostępnych metod.

Plug-[Author ID1: at Tue Nov 27 16:43:00 2001 ]in kontra ActiveX: wyświetlanie bez sprawdzania

Odtwarzacz filmów Flasha jest dostępnych[Author ID1: at Tue Nov 27 16:43:00 2001 ] dla przeglądarek sieciowych w dwóch postaciach: jako plug-[Author ID1: at Tue Nov 27 16:44:00 2001 ]in o nazwie Flash Player (na przykład w przeglądarkach zgodnych ze standardem Netscape) lub jako kontrolka ActiveX o tej samej nazwie (dostępny tylko dla przeglądarki Microsoft Internet Explorer pod Windows 95, 98, NT lub 2000).

Jeśli wstawisz film Flasha do dokumentu HTML bezpośrednio — przy użyciu znacznika <EMBED> (dla przeglądarek Netscape) — akcja potoczy się według jednego z dwóch scenariuszy.[Author ID1: at Tue Nov 27 16:44:00 2001 ]:[Author ID1: at Tue Nov 27 16:44:00 2001 ]

Przeglądarka posiada zainstalowany plug-[Author ID1: at Tue Nov 27 16:44:00 2001 ]in Flasha i załaduje film Flasha.
W przeglądarce nie został zainstalowany plug-[Author ID1: at Tue Nov 27 16:44:00 2001 ]in Flasha i wyświetlona będzie ikona „złamanego” plug-[Author ID1: at Tue Nov 27 16:44:00 2001 ]inu.

Jeżeli nastąpi druga sytuacja, a w znaczniku <EMBED> zamieszczony został atrybut PLUGINSPAG,[Author ID1: at Tue Nov 27 16:47:00 2001 ]E,[Author ID0: at Thu Nov 30 00:00:00 1899 ] użytkownik może kliknąć ikonę i przejść tym samym na stronę firmy Macromedia, skąd można pobrać plug-[Author ID1: at Tue Nov 27 16:47:00 2001 ]in Flasha. Jeżeli natomiast nie użyto atrybutu PLUGINSPAGE, kliknięcie ikony powoduje przejście na stronę z różnymi plug-[Author ID1: at Tue Nov 27 16:47:00 2001 ]inami Netscape'a.

Gdy film Flasha został wstawiony do dokumentu za pomocą znacznika <OBJECT> (tylko dla przeglądarki Internet Explorer w systemie Windows), przeglądarka zachowa się następująco.[Author ID1: at Tue Nov 27 16:47:00 2001 ]:[Author ID1: at Tue Nov 27 16:47:00 2001 ]

Wykryta zostanie kontrolka Flash Player ActiveX i rozpocznie się wyświetlanie filmu.
Przeglądarka nie posiada zainstalowanej kontrolki Flash Player ActiveX i uruchomi automatyczne pobieranie i instalację kontrolki ze strony Macromedia.

Pobieranie i instalacja może zostać uruchomione automatycznie tylko wtedy, gdy odpowiednio zdefiniujesz atrybuty classid i codebase w znaczniku <OBJECT>. W zależności od konfiguracji zabezpieczeń w systemie, może być konieczne potwierdzenie tego, że użytkownik chce rozpocząć proces pobierania i instalacji plików (zobacz rysunek 41.1).

0x01 graphic

Rysunek 41.1. Kontrolka Flash Player ActiveX może zostać pobrana z sieci automatycznie, jeśli przeglądarka Microsoft Internet Explorer napotka w Internecie stronę HTML z filmami Flasha

Chociaż wykorzystanie znaczników <OBJECT> i <EMBED> jest najprostszą metodą integrowania filmów Flasha z dokumentami HTML, nie jest to ani metoda najbardziej przyjazna użytkownikowi, ani najlepiej zapewniająca, że większość odbiorców będzie mogła obejrzeć film na swoim komputerze. Jednym z innych popularnych rozwiązań jest wykrywanie w systemie odtwarzacza przy użyciu skryptów JavaScript i VBScript.

Wykrywanie odtwarzacza Flasha przy użyciu skryptów JavaScript i VBScript

Wykorzystanie skryptów zamieszczonych w obrębie dokumentu HTML jest bardzo popularną metodą wykrywania odtwarzacza Flasha. Jeśli opanowałeś składnię zapisu nowego ActionScriptu we Flashu 5, szybko przekonasz się, że kod JavaScript służący do wykrywania plug-[Author ID1: at Tue Nov 27 16:49:00 2001 ]inu Flasha nie jest wcale skomplikowany. JavaScript jest uniwersalnym językiem skryptowym, który obsługuje większość przeglądarek internetowych (przynajmniej od wersji 3.0). Implementacja JavaScript w przeglądarkach Microsoftu (nosi ona nazwę JScript) nie jest taka sama jak w przypadku Netscape'a. Z tego powodu oprócz JavaScriptu korzystamy także z firmowego rozwiązania Microsoftu w zakresie języków skryptowych — języka VBScript.

Na CD-ROM-ie

Pliki HTML, .FLA, .SWF oraz .GIF związane z omawianymi tu przykładami znajdziesz na CD-ROM-ie dołączonym do książki, w katalogu ch41\Detection.

W tym podrozdziale zajmiemy się utworzeniem dokumentu HTML, który wykryje obecność plug-[Author ID1: at Tue Nov 27 16:49:00 2001 ]inu Flasha przy użyciu języka JavaScript, a także sprawdzi obecność kontrolki Flash Player ActiveX za pomocą odpowiedniego skryptu VBScript. Użyjemy przy tym obrazków z sygnalizatorem świetlnym — jeden obrazek .SWF pokazujący zielone światło i jeden obrazek .GIF z czerwonym światłem — które poinformują nas o wynikach sprawdzania. Wiele stron internetowych korzysta z takiego mechanizmu: zanim wyświetli się plik HTML z filmem Flasha, widz jest informowany o tym, czy jego systemie jest prawidłowo zainstalowany odtwarzacz plików Flasha. Jeśli brakuje takiego odtwarzacza, widz może kliknąć odpowiednie łącze i pobrać plug-[Author ID1: at Tue Nov 27 16:50:00 2001 ]in lub kontrolkę ActiveX.

Ostrzeżenie
Obecność odtwarzacza Flasha można wykryć w większości przeglądarek obsługujących JavaScript, stosując tablicę navigator.mimeTypes. Wartość zwracana dla tej tablicy jest zawsze wartością pustą w przypadku przeglądarek Internet Explorer, w tym także w wersji 4.5 na Macintoshu. Internet Explorer 5.0 dla Mac-[Author ID1: at Tue Nov 27 16:50:00 2001 ]a obsługuje już ten typ tablicy. O ile możemy stosować skrypty VBScript do wykrywania plug-[Author ID1: at Tue Nov 27 16:50:00 2001 ]inu Flasha w przeglądarkach Internet Explorer dla Windows, nie ma możliwości wykonania takiej operacji w przeglądarce Internet Explorer 4.5 na Mac-[Author ID1: at Tue Nov 27 16:50:00 2001 ]u. Możesz jednak skorzystać z pliku typu swiffer, omówionego w następnym podrozdziale, aby wykryć odtwarzacz Flasha z poziomu tej przeglądarki.

Wykrywanie plug-[Author ID1: at Tue Nov 27 16:51:00 2001 ]inu za pomocą [Author ID1: at Tue Nov 27 16:51:00 2001 ]skryptem[Author ID1: at Tue Nov 27 16:51:00 2001 ]u[Author ID1: at Tue Nov 27 16:51:00 2001 ] JavaScript

Zmieniając nieco w szablonie Ad 5 Banner kod JavaScript generowany przez okno Publish Settings, możemy utworzyć mechanizm testowy, który wyświetli po stronie odbiorcy jedną z dwóch grafik. Skopiuj na dysk twardy plik o nazwie scriptDetection.html z katalogu ch41\Detection\scripting znajdującego się na CD-ROM-ie dołączonym do książki. Otwórz ten plik w swoim ulubionym edytorze (SimpleText, Notepad, BBEdit lub dowolnym innym). Przyjrzyj się liniom oznaczonym poniżej numerami od 10 do 15 (znak ¬ oznacza kontynuację fragmentu kodu w następnym wierszu, więc nie powinieneś wstawiać tego znaku do swojego pliku).

10. var plugin = 0;

11. var activeX = 0;

12. var plugin = (navigator.mimeTypes && ¬
navigator.mimeTypes["application/x-shockwave-flash"]) ¬
? navigator.mimeTypes["application/x-shockwave- ¬
flash"].enabledPlugin : 0;

13. if ( plugin ) {

14. plugin = parseInt(plugin.description.substring ¬
(plugin.description.indexOf(".")-1)) >= 5;

15. }

W linii 10. inicjalizowana jest zmienna plugin, której wartość informuje o obecności plug-[Author ID1: at Tue Nov 27 16:52:00 2001 ]inu Flasha 5 w przeglądarce Netscape (lub w Internet Explorerze 5.0 na Mac-[Author ID1: at Tue Nov 27 16:52:00 2001 ]u). Linia 11. inicjalizuje zmienną o nazwie activeX, która z kolei informuje o obecności kontrolki ActiveX Flasha. Początkowo obie zmienne przyjmują wartość 0, czyli stan odpowiadający brakowi plug-[Author ID1: at Tue Nov 27 16:53:00 2001 ]inu oraz kontrolki ActiveX.

Linia 12. została zapożyczona z kodu HTML wygenerowanego na bazie szablonu Ad 5 Banner. Zastosowana tu jest tablica mimeTypes obiektu navigator, która określa, czy jakakolwiek wersja plug-[Author ID1: at Tue Nov 27 16:53:00 2001 ]inu Flasha jest zainstalowana w systemie. Jeśli plug-[Author ID1: at Tue Nov 27 16:53:00 2001 ]in jest zainstalowany, zmienna plugin przyjmuje wartość równą [Object Plugin]. Gdy odpowiada jej wartość true (czyli logiczna jedynka), wykonywany jest kod w liniach 13. i 14. Korzystając z właściwości description obiektu plugin, możemy stwierdzić, czy wersja odtwarzacza Flasha jest odpowiednio wysoka. W tym przykładzie sprawdzamy, czy numer wersji jest równy lub większy niż 5. Zwróć uwagę,[Author ID1: at Tue Nov 27 16:53:00 2001 ] że wykonujemy tu porównanie z wartością zmiennej plugin. Jeśli odtwarzacz Flasha 5 (lub nowszy) zostanie wykryty w systemie, zmienna plugin przyjmie wartość true (czyli 1). Jeśli zainstalowana jest niższa wersja odtwarzacza, zmienna plugin pozostanie na wartości false (czyli 0).

Testowanie obecności kontrolki ActiveX przy użyciu [Author ID1: at Tue Nov 27 16:54:00 2001 ]skryptem[Author ID1: at Tue Nov 27 16:54:00 2001 ]u[Author ID1: at Tue Nov 27 16:54:00 2001 ] VBScript

W tej chwili, jeśli widz używa Netscape'a (pod dowolnym systemem operacyjnym) lub Internet Explorera na Mac-[Author ID1: at Tue Nov 27 16:54:00 2001 ]u, zmienna plugin poinformuje o tym, czy można odtwarzać film Flasha 5 (czy jest zainstalowany plugin w odpowiedniej wersji). Wciąż jednak musimy sprawdzić obecność kontrolki ActiveX, ponieważ odbiorca może korzystać z przeglądarki Internet Explorer dla Windows. W linii 11 zainicjalizowaliśmy już zmienną o nazwie activeX. W liniach o numerach od 16 do 21 sprawdzamy, czy VBScript może utworzyć obiekt Flash Object w dokumencie (znak ¬ oznacza kontynuację fragmentu kodu w następnym wierszu, więc nie powinieneś wstawiać tego znaku we własnym kodzie).

16. else if (navigator.userAgent && ¬
navigator.userAgent.indexOf("MSIE")>=0 && ¬ navigator.userAgent.indexOf("Windows 95")>=0 || ¬
navigator.userAgent.indexOf("Windows 98")>=0 || ¬
navigator.userAgent.indexOf("Windows NT")>=0)) {

17. document.write('<SCRIPT LANGUAGE=VBScript\> \n');

18. document.write('on error resume next \n');

19. document.write('activeX = ( IsObject(CreateObject ¬
("ShockwaveFlash.ShockwaveFlash.5")))\n');

20. document.write('<' + '/SCRIPT>');

21. }

W linii 16. sprawdzane[Author ID1: at Tue Nov 27 16:54:00 2001 ]my[Author ID1: at Tue Nov 27 16:54:00 2001 ] ~~jest~~[Author ID1: at Tue Nov 27 16:54:00 2001 ], czy widz korzysta z przeglądarki Internet Explorer w systemie Windows 95, 98, lub NT. Jeśli jeden z tych systemów zostanie wykryty, wykonane będą linie z numerami od 17 do 21. Linie te tworzą skrypt VBScript, testujący obecność kontrolki ActiveX w systemie. Korzystając z metod IsObject i CreateObject [Author ID1: at Tue Nov 27 16:55:00 2001 ], [Author ID1: at Tue Nov 27 16:55:00 2001 ]skrypt VBScript określa, czy w systemie zainstalowana została odpowiednia kontrolka ActiveX. Gdy wynik testu jest pomyślny, zmienna activeX przyjmuje wartość true (czyli 1). Zauważ, że do tej zmiennej może odnosić się zarówno kod JavaScript, jak i kod VBScript. Ten fragment kodu również pochodzi z szablonu HTML Ad 5 Banner.

Wstawianie grafiki

Po nadaniu wartości zmiennym plugin i activeX możemy wykorzystać te wartości do podjęcia decyzji, czy ma zostać wyświetlony plik .SWF, czy obrazek .GIF. W dokumencie HTML możemy odwołać się do zmiennych plugin oraz activeX w celu wstawienia zarówno pliku Flasha, jak i obrazka .GIF. Linie od --> 31[Author:MMP] [Author ID1: at Tue Nov 27 16:57:00 2001 ]. do 36. w poniższym listingu zawierają znaczniki wyświetlające plik .SWF lub obraz .GIF pod Netscape (na dowolnej platformie sprzętowej) lub w Internet Explorerze na Mac-[Author ID1: at Tue Nov 27 16:57:00 2001 ]u (znak ¬ oznacza kontynuację fragmentu kodu w następnym wierszu, więc nie powinieneś uwzględniać go we własnym kodzie).

31. if ( plugin ) {

32. document.write('<EMBED SRC="trafficLightGreen.swf" ¬
WIDTH="105" HEIGHT="185" SWLIVECONNECT="FALSE" ¬
QUALITY="HIGH"></EMBED><BR><FONT ¬
FACE="Verdana,Arial,Geneva" SIZE=2>Flash 5 ¬
Player<BR>Plug-in detected.</FONT>');

33. } else if (!(navigator.appName && ¬
navigator.appName.indexOf("Netscape")>=0 && ¬
navigator.appVersion.indexOf("2.")>=0)){

34. document.write('<A HREF="http://www.macromedia.com/ ¬
shockwave/download/index.cgi? ¬
P1_Prod_Version=ShockwaveFlash">');

35. document.write('<IMG SRC="trafficLightRed.gif" ¬
WIDTH="105" HEIGHT="185" BORDER="0"></A><BR> ¬
<FONT FACE="Verdana,Arial,Geneva" SIZE=2>Flash ¬
5 Player<BR>Plug-in not installed.</FONT>');

36. }

Jeżeli wartość zmiennej plugin nie jest równa false (linia 31.), wykonana zostanie linia 32. W linii tej użyto znacznika <EMBED> do wstawienia pliku .SWF, przedstawiającego zielone światło na drodze i tekst HTML „Flash 5 Player Plug-in detected”, czyli informację o tym, że plug-[Author ID1: at Tue Nov 27 16:58:00 2001 ]in został wykryty. Jeśli okaże się, że wartością zmiennej plugin jest false, a przeglądarka to Netscape 2.0 lub nowsza, linie 34. i 35. utworzą znaczniki <A HREF> i <IMG>, odwołujące się do statycznego obrazka .GIF, przedstawiającego czerwone światło na drodze i użytkownik będzie mógł kliknąć łącze do strony Macromedii, skąd pobierze odpowiedni plug-[Author ID1: at Tue Nov 27 16:58:00 2001 ]in. Oprócz obrazka z czerwonym światłem skrypt JavaScript wyświetli komunikat „Flash 5 Player Plug-in not installed”, czyli informację o tym, że w systemie brak jest plug-[Author ID1: at Tue Nov 27 16:58:00 2001 ]inu odtwarzającego filmy Flasha.

--> Zamieszczone poniżej linie kodu realizują opisane wcześniej zadania dla przeglądarki Internet Explorer w systemie Windows. Jeśli zmienna activeX przyjmuje wartość true, definiowany jest znacznik <OBJECT> i pojawia się animacja zielonego światła. Jeśli kontrolka activeX nie została zainstalowana, wyświetlony będzie statyczny obrazek .GIF z czerwonym światłem.[Author:PGon]

if (activeX){

document.write('<OBJECT classid="clsid:D27CDB6E-AE6D ¬
-11cf-96B8-444553540000"');
document.write(' ¬
codebase="http://download.macromedia.com/pub/shockwave/ ¬
cabs/flash/swflash.cab#version=5,0,0,0" ');
document.write(' ID=trafficLightRed WIDTH=105 HEIGHT=185>');
document.write('
<PARAM NAME=movie VALUE="trafficLightGreen.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF></OBJECT><BR>');
document.write(' <FONT FACE="Verdana,Arial,Geneva" ¬
SIZE=2>Flash 5 Player ActiveX<BR>Control detected.');}

else {document.write(

'<A HREF="http://www.macromedia.com/shockwave/ ¬
download/index.cgi?P1_Prod_Version=ShockwaveFlash& ¬
P2_Platform=Win32&P3_Browser_Version=MSIE">');
document.write('<IMG SRC="trafficLightRed.gif" ¬
WIDTH="105" HEIGHT="185" BORDER="0"></A><BR> ¬
<FONT FACE="Verdana,Arial,Geneva" SIZE=2> ¬
Flash 5 Player ActiveX<BR>Control not installed.</FONT>');

Na koniec powinniśmy wykonać jeszcze dwie operacje.[Author ID1: at Tue Nov 27 16:59:00 2001 ]:[Author ID1: at Tue Nov 27 16:59:00 2001 ]

1. Poinformować użytkowników Internet Explorera 4.5 (lub starszych wersji) na komputerze Mac o tym, że nie jesteśmy w stanie sprawdzić, czy w systemie zainstalowany jest plug-[Author ID1: at Tue Nov 27 16:59:00 2001 ]in Flasha.

2. Poinformować użytkowników, że mogą udać się na stronę z plug-[Author ID1: at Tue Nov 27 16:59:00 2001 ]inem Flasha lub z odpowiednią kontrolką ActiveX.

Poniższy fragment kodu ma za zadanie poinformować użytkowników Mac-[Author ID1: at Tue Nov 27 16:59:00 2001 ]a o tym, że nie jesteśmy w stanie wykryć obecności plug-[Author ID1: at Tue Nov 27 16:59:00 2001 ]inu. Możemy pozostawić odbiorcom decyzję o tym, czy chcą pobrać z sieci odpowiedni plug-[Author ID1: at Tue Nov 27 16:59:00 2001 ]in, możemy też zdefiniować łącze do pliku typu -->swiffer[Author ID1: at Tue Nov 27 17:03:00 2001 ]--> [Author ID1: at Tue Nov 27 17:03:00 2001 ](omówionego w następnym podrozdziale), który potrafi wykryć obecność plug-[Author ID1: at Tue Nov 27 17:00:00 2001 ]inu Flasha.

if (plugin == 0 && activeX == 0 && ¬
navigator.platform.indexOf("Mac")>=0 && ¬
navigator.userAgent.indexOf("MSIE")>=0){ ¬
document.write('<BR><BR><FONT FACE="Verdana,Arial,Geneva" SIZE=3> ¬
You are using Internet Explorer 4.5 or earlier on the Macintosh. ¬
<BR>');
document.write('<B>The Flash Player plug-in can not ¬
be detected with scripting.</B><BR>');
document.write('Click the left-hand traffic light to download the plug-in.');

W liniach od 63. do --> 65[Author:MMP] [Author ID1: at Tue Nov 27 17:00:00 2001 ]. stwierdzamy ostatecznie, czy w systemie zainstalowany jest plug-[Author ID1: at Tue Nov 27 17:01:00 2001 ]in lub kontrolka ActiveX, dzięki którym możliwe jest odtworzenie filmu Flasha. Pozwalamy użytkownikowi wejść na stronę główną z filmem Flasha.

if (plugin == 1 || activeX == 1){ ¬
document.write('<BR><BR><FONT FACE="Verdana,Arial,Geneva" SIZE=3> ¬
<B>You can view Flash content with your browser.</B><BR>'); document.write('Proceed to the main Flash site.</FONT>');

W poniższym fragmencie definiujemy reakcję systemu na brak plug-[Author ID1: at Tue Nov 27 17:01:00 2001 ]inu lub kontrolki ActiveX, czyli sytuację, w której niemożliwe będzie odtworzenie filmu. Użytkownik ~~ujrzy~~[Author ID1: at Tue Nov 27 17:01:00 2001 ]zobaczy[Author ID1: at Tue Nov 27 17:01:00 2001 ] obrazek z czerwonym światłem, po kliknięciu którego będzie mógł pobrać z sieci plug-[Author ID1: at Tue Nov 27 17:01:00 2001 ]in lub kontrolkę.

if (plugin == 0 && activeX == 0){ ¬ if(navigator.appName.indexOf("Netscape")>=0){ ¬
playerType = "left"; } else { ¬
playerType = "right"; } ¬
document.write('<BR><BR><FONT FACE="Verdana,Arial,Geneva" SIZE=3> ¬
<B>You can not view Flash content with your browser.</B>
</FONT><BR>');
document.write('<FONT FACE="Verdana,Arial,Geneva" SIZE=2> ¬
Please click the ' + playerType + '-hand traffic light to ¬
download the player.</FONT>');

}

Pewnie zechcesz nadać takiej stronie bardziej elegancki i określony według własnego stylu wygląd — sam schemat działania poszczególnych skryptów nie musi się w ogóle zmieniać i możesz go używać w dowolnych zastosowaniach.

Wykorzystanie pliku typu swiffer

Jeśli wolałbyś uniknąć kodowania skryptów JavaScript oraz VBScript, możesz skorzystać z prostych plików .SWF Flasha, które wykryją obecność odtwarzacza. Pliki takie określamy mianem -->swifferów[Author ID1: at Tue Nov 27 17:02:00 2001 ]. Są one niewidoczne dla odbiorcy, a jedyne ich działanie polega na użyciu akcji getURL i bezpośrednim przekierowaniu przeglądarki na stronę HTML, która zawiera właściwy film Flasha. Jeśli odtwarzacz plików Flasha nie został zainstalowany w systemie, plik -->swiffer [Author ID1: at Tue Nov 27 17:02:00 2001 ]nie zostanie uruchomiony i nie będzie mógł przekierować przeglądarki na odpowiednią stronę. W takiej sytuacji specjalny znacznik <META> w nagłówku dokumentu HTML przeniesie widza na stronę zawierającą informację o konieczności pobrania plug-[Author ID1: at Tue Nov 27 17:03:00 2001 ]inu lub kontrolki ActiveX.

Tworzenie pliku typu swiffer

Swiffer to niewielki plik .SWF z kolorem tła identycznym jak kolor dokumentu HTML. Nie musimy w nim zamieszczać żadnej grafiki ani obiektów.

1. Uruchom Flasha 5 i w nowym dokumencie .FLA zmień nazwę warstwy Layer 1 na actions.

2. Dodaj ujęcie kluczowe w klatce 2. na warstwie -->actions[Author ID1: at Tue Nov 27 17:04:00 2001 ]. ~~Podwójnym kliknięciem~~[Author ID1: at Tue Nov 27 17:04:00 2001 ]Dwukrotnie klikając to[Author ID1: at Tue Nov 27 17:04:00 2001 ] ~~tego~~ [Author ID1: at Tue Nov 27 17:04:00 2001 ]ujęcia[Author ID1: at Tue Nov 27 17:04:00 2001 ]e,[Author ID1: at Tue Nov 27 17:04:00 2001 ] wyświetl panel Actions.

3. W panelu Actions utworzymy skrypt sprawdzający obecność odtwarzacza Flasha 3 (lub wcześniejszego), Flasha 4 i Flasha 5. Możemy każdą wersję odtwarzacza skierować pod inny adres URL. Najistotniejsze jest tutaj to, żeby wykorzystać akcje specyficzne dla danej wersji programu do określenia, który odtwarzacz powinien wyświetlić film.

// Tworzenie zmiennej FLasha, ktorej wartosc jest odpowiada

// zmiennej srodowiskowej $version we Flashu 4 lub 5.

// Akcja ta nie zostanie wykonana przez odtwarzacze Flasha 3

// lub starszych wersji

player = eval("$version");

myOutput = player;

// Wartosc zmiennej $version zostanie zapisana w formacie:

// abc 1,2,3,4

// gdzie abc oznacza system operacyjny (np. WIN, MAC)

// a 1 i 2 sa glownymi oznaczeniami wersji systemu

// (np. 4.0, 5.0, itd.) natomiast 3 i 4 sa oznaczeniami podwersji

// systemu (np. r20, r27, etc.)

// W przypadku odtwarzacza Flasha 5 oznaczenie systemu wyglada tak:

// WIN 5,0,30,0 lub MAC 5,0,30,0

// Wystarczy nam tylko glowne oznaczenie wersji systemu, które
// pobierzemy przy uzyciu funkcji substring(). Glowne oznaczenie
// rozpoczyna się na piatym znaku lancucha opisujacego wersje.
// Flash 3 pominie te linie.

player = substring(player, 5, 1);

// numer wersji odtwarzacza to 4 lub 5,

// co oznacza odtwarzacz FLasha 4 lub Flasha 5

if (player eq "") {

// Flash 3 wykona ten kod automatycznie,
// poniewaz musi zinterpretowac akcje if

getURL("flash3.html");

} else if (player eq "4") {

// kod wykonany przez odtwarzacz Flasha 4

getURL ("flash4.html");

} else if (player eq "5") {

// kod wykonany przez odtwarzacz FLasha 5

getURL ("flash5.html");

}

// Zabezpieczmy film przed uruchamianiem w petli:

stop ();

4. W oknie Movie Properties (Modify/Movie) zmniejsz rozmiary filmu do 18 x 18 pikseli. Jest to najmniejszy rozmiar filmu Flasha, jaki można przyjąć. Kolor tła filmu zmień na taki sam, jaki chcesz nadać tłu strony HTML. Kliknij przycisk OK.

5. Zapisz projekt na dysku w pliku swiffer.fla.

6. Otwórz okno Publish Settings (File/Publish Settings). W panelu Formats powinieneś pozostawić włączone opcje Flash i HTML. Wyłącz opcję Use default names i zmień nazwę pliku HTML na swiffer_start.html.

7. W panelu Flash wybierz pozycję Flash 4 z rozwijanej listy -->Versions[Author ID1: at Tue Nov 27 17:06:00 2001 ].

Uwaga
Używamy formatu Flasha 4, ponieważ odtwarzacz Flasha 3 ignoruje wszystkie akcje Flasha 4 lub nowszej wersji, natomiast odtwarzacz Flasha 4 rozpozna sposób zapisu zmiennych oraz struktury ActionScript. Pliki w formacie Flasha 5,[Author ID1: at Tue Nov 27 17:07:00 2001 ] stosują [Author ID1: at Tue Nov 27 17:07:00 2001 ]z kolei,[Author ID1: at Tue Nov 27 17:07:00 2001 ] ~~stosują~~ [Author ID1: at Tue Nov 27 17:07:00 2001 ]nieco inny sposób zapisu zmiennych i dlatego mogą nie działać prawidłowo w odtwarzaczach Flasha 4 (nawet jeśli kod zapiszemy zgodnie ze składnią Flasha 4).

8. W panelu HTML wybierz szablon Flash Only (Default) z listy Template. Kliknij przycisk Publish znajdujący się po prawej stronie okna Publish Settings.

9. Gdy pliki zostaną wygenerowane na dysku, kliknij OK, aby zamknąć okno dialogowe Publish Settings. Ponownie zapisz projekt na dysku.

W katalogu z plikiem projektu (swiffer.fla) znajdują się teraz pliki swiffer.swf i swiffer_start.html. W następnym podrozdziale dodamy do pliku HTML kilka dodatkowych znaczników.

Wstawianie pliku swiffer.swf do dokumentu HTML

Gdy utworzysz już pliki swiffer.swf i swiffer_start.html, możesz zmodyfikować zawartość dokumentu HTML w taki sposób, aby skierować przeglądarkę pod określony adres HTML. ([Author ID1: at Tue Nov 27 17:08:00 2001 ]Pamiętaj, że w poniższym fragmencie kodu znak ¬ oznacza, że dana linia kodu kontynuowana jest w następnym wierszu. Nie wstawiaj tego znaku do własnego dokumentu)[Author ID1: at Tue Nov 27 17:08:00 2001 ].

Otwórz plik swiffer_start.html w dowolnym edytorze plików tekstowych lub HTML. ~~Mo¿e to byæ~~ [Author ID1: at Tue Nov 27 17:08:00 2001 ]Może to być [Author ID1: at Tue Nov 27 17:08:00 2001 ]Macromedia Dreamweaver, Notepad (PC), Simple Text (Mac) lub BBEdit.
Po[Author ID1: at Tue Nov 27 17:08:00 2001 ]M[Author ID1: at Tue Nov 27 17:08:00 2001 ]m[Author ID1: at Tue Nov 27 17:08:00 2001 ]iędzy znacznikami <HEAD> i </HEAD> wstaw następujący znacznik <META>:

Znacznik ten posiada dwa atrybuty, http-equiv i content. Atrybut http-equiv instruuje serwer sieciowy, aby wstawił odpowiednią nazwę w nagłówku MIME dokumentu HTML. Wartość atrybutu content staje się wartością przypisaną tej nazwie. Oto jak przeglądarka zinterpretuje ten znacznik <META>:

Refresh: 5; URL=download.html

Dla przeglądarki jest to instrukcja, że ma odświeżyć zawartość okna po pięciu sekundach, ładując plik download.html. Po testach możesz zdecydować, że lepiej będzie wydłużyć czas czekania na odświeżenie strony i załadowanie nowego dokumentu. Przy wolniejszych połączeniach (lub w godzinach szczytu na magistralach internetowych),[Author ID1: at Tue Nov 27 17:09:00 2001 ] może okazać się, że pięć sekund to za mało, aby uruchomić plik swiffer.swf i u~~ruchomić~~[Author ID1: at Tue Nov 27 17:10:00 2001 ]żyć[Author ID1: at Tue Nov 27 17:10:00 2001 ] w nim akcję[Author ID1: at Tue Nov 27 17:10:00 2001 ]i[Author ID1: at Tue Nov 27 17:10:00 2001 ] getURL.

Ostrzeżenie
Niektóre starsze przeglądarki wymagają podania pełnego adresu HTML w znaczniku <META>. Oznacza to, że musisz jako atrybut wprowadzić pełną internetową ścieżkę dostępu do pliku HTML, na przykład http://www.serwersieciowy.com/download.html.

3. Zapisz plik HTML. Teraz będziesz musiał utworzyć plik download.html (lub inny, którego nazwę wyszczególniłeś w znaczniku <META>.[Author ID1: at Tue Nov 27 17:11:00 2001 ]).[Author ID1: at Tue Nov 27 17:11:00 2001 ] Tymczasowo możesz wykorzystać tutaj plik scriptDetection.html z poprzedniego podrozdziału — wystarczy, że zmienisz jego nazwę. Oprócz tego będą potrzebne pliki flash3.html, flash4.html i flash5.html, które mogą być wywoływane za pomocą [Author ID1: at Tue Nov 27 17:11:00 2001 ]akcją[Author ID1: at Tue Nov 27 17:11:00 2001 ]i[Author ID1: at Tue Nov 27 17:11:00 2001 ] getURL z pliku swiffer.swf.

Na CD-ROM-ie
Przykładowe pliki flash3.html, flash4.html i flash5.html znajdują się na CD-ROM-ie dołączonym do książki (katalog ch41\Detection\swiffer). Każdy z nich wyświetla tylko informację o wersji Flasha wykrytej w systemie.

Kiedy skończysz już przygotowywanie dokumentów HTML, możesz załadować dokument swiffer_start.html do przeglądarki. Jeśli odtwarzacz Flasha nie jest zainstalowany w systemie, znacznik <META> spowoduje wyświetlenie po pięciu sekundach dokumentu download.html. Jeżeli natomiast odtwarzacz Flasha znajduje się na komputerze odbiorcy, skrypt Flasha skieruje przeglądarkę na stronę zawierającą film .SWF w odpowiedniej wersji.

!!!!!!!!!!!!!!!!!!! Początek szarej ramki !!!!!!!!!!!!!!!!!!!!!

Ćwiczenie eksperta

Wykrywanie odtwarzacza filmów Flasha

Autor: Colin Moock

Istnieje co najmniej kilka sposobów wykrywania obecności odtwarzacza filmów Flasha w systemie, żaden jednak nie jest tak efektywny jak strategia proponowana Colina Moocka. Mamy przyjemność zaprezentowania wam jego --> metody[Author:MMP] [Author ID1: at Tue Nov 27 17:12:00 2001 ].

Autorzy filmów Flasha muszą żyć w obliczu niezaprzeczalnej, często frustrującej prawdy: zawartość plików Flasha nie zawsze może być obejrzana przez widzów, do których jest kierowana. Ponieważ odtwarzacz Flasha jest tylko dodatkiem do przeglądarki internetowej, często okazuje się, że po[Author ID1: at Tue Nov 27 17:14:00 2001 ]mimo posiadania stosunkowo nowej wersji przeglądarki odbiorca nie może wyświetlić zawartości filmu ze względu na brak odpowiedniego plug-[Author ID1: at Tue Nov 27 17:15:00 2001 ]inu lub kontrolki.

Pierwszy raz zetknąłem się z tym problemem w 1997.[Author ID1: at Tue Nov 27 17:15:00 2001 ] roku[Author ID1: at Tue Nov 27 17:15:00 2001 ], gdy pracowałem nad swoim pierwszym dużym projektem we Flashu — stroną internetową Levi's Canada. W trakcie powstawania projektu kwestia zapewnienia możliwości wyświetlania filmu na różnych platformach była bardzo ważna, zarówno dla klienta — firmy Levi's — jak i dla agencji ICE (gdzie pracowałem) tworzącej stronę. Pojawiały się pytania: jak powinniśmy potraktować widzów nie [Author ID1: at Tue Nov 27 17:16:00 2001 ]posiadających plug-[Author ID1: at Tue Nov 27 17:16:00 2001 ]inu Flasha? Czy powinno się po prostu poinformować ich o konieczności pobrania odpowiednich plików? Co zrobić,[Author ID1: at Tue Nov 27 17:16:00 2001 ] jeśli widz nigdy wcześniej nie słyszał o Flashu?

Po wielu dyskusjach postanowiono, że najlepszym rozwiązaniem będzie wykorzystanie języka JavaScript do automatycznego wykrywania odtwarzacza Flash w przeglądarce. Jeśli użytkownik posiadał zainstalowany odtwarzacz Flasha, przeglądarka była kierowana pod adres z plikiem Flasha. Jeśli plug-[Author ID1: at Tue Nov 27 17:16:00 2001 ]in Flasha nie został wykryty, odsyłaliśmy widza na stronę przygotowaną bez użycia Flasha. Gdy mechanizm JavaScript nie potrafił określić, czy plug-[Author ID1: at Tue Nov 27 17:16:00 2001 ]in jest zainstalowany, wyświetlana była strona z informacjami na temat odtwarzacza Flasha i instrukcją dotyczącą jego instalacji.

Od czasu projektu strony Levi's pracowałem nad różnymi prezentacjami i wielokrotnie stykałem się z problemem sposobu publikowania plików Flasha i wykrywania odpowiednich odtwarzaczy. Warunki pracy zmieniały się w ciągu tego czasu, jednak podstawowa kwestia pozostała niezmieniona. Po niezliczonych godzinach testów, rozmyślań i rozmów mogę podać tylko jeden wniosek — niezależnie od tego, jaki przyjmiemy model publikacji plików i działania skryptów, w żadnym przypadku nie powinniśmy dopuścić do tego, aby odbiorca nie wiedział,[Author ID1: at Tue Nov 27 17:17:00 2001 ] co się dzieje.

Z tym ~~prostym~~ [Author ID1: at Tue Nov 27 17:17:00 2001 ]filozoficznym podejściem zdecydowałem się na opracowanie prostego standardu wykrywania odtwarzacza Flasha i publikowania plików w sieci. Opracowałem narzędzie, które nazwałem moock fpi (moock fLASH pLAYER iNSPECTOR). Jest to system skryptów wykrywających obecność odtwarzacza Flasha. Mechanizmy w nim zastosowane pozwalają w przeglądarkach z zainstalowanym plug-[Author ID1: at Tue Nov 27 17:18:00 2001 ]inem przejść automatycznie do odtwarzania flashowej prezentacji, natomiast w przeglądarkach nie [Author ID1: at Tue Nov 27 17:18:00 2001 ]obsługujących Flasha w kontrolowany sposób następuje przejście do strony nie [Author ID1: at Tue Nov 27 17:18:00 2001 ]wykorzystującej Flasha.

Działanie narzędzia moock fpi jest proste: plik Flasha jest wyświetlany tym widzom, którzy posiadają odtwarzacz Flasha, natomiast pozostali odbiorcy oglądają stronę utworzoną bez Flasha. Wynikają z tego następujące operacje wykonywane przez skrypty:[Author ID1: at Tue Nov 27 17:18:00 2001 ].[Author ID1: at Tue Nov 27 17:18:00 2001 ]

 Jeśli możemy niezaprzeczalnie stwierdzić, że użytkownik posiada właściwą wersję plug-[Author ID1: at Tue Nov 27 17:18:00 2001 ]inu Flasha, wyświetlamy plik .SWF.

 Jeżeli możemy z całą pewnością stwierdzić, że w systemie użytkownika zainstalowana jest stara wersja plug-[Author ID1: at Tue Nov 27 17:19:00 2001 ]inu, pozwalamy użytkownikowi zdecydować, czy chce ją uaktualnić, czy obejrzeć nie-[Author ID1: at Tue Nov 27 17:19:00 2001 ]flashową wersję strony.

 Jeśli można nieomylnie stwierdzić, że użytkownik nie posiada odtwarzacza Flasha lub nasze próby wykrycia go się nie powiodą, wyświetlamy wersję strony opracowaną bez użycia Flasha.

Postępując zgodnie z tymi trzema regułami,[Author ID1: at Tue Nov 27 17:19:00 2001 ] narzędzie moock fpi powinno, przynajmniej w teorii, nigdy nie pozostawiać odbiorcy samemu sobie i zawsze płynnie przejść do odpowiedniej wersji strony. Dzięki pomocy internautów wykonano wiele testów, które,[Author ID1: at Tue Nov 27 17:19:00 2001 ] jak do tej pory,[Author ID1: at Tue Nov 27 17:20:00 2001 ] potwierdzają tę teorię.

Pliki skryptów moock fpi można pobrać z Internetu spod adresu: http://www.moock.org/webdesign/flash/detection/moockfpi/

Moje uwagi i przemyślenia na temat publikowania plików Flasha i wykrywania odtwarzaczy tych plików znajdziesz pod adresem: http://www.moock.org/webdesign/lectures/ff2knyc/

!!!!!!!!!!!!!!!!!!! Przypis do szarej ramki !!!!!!!!!!!!!!!!!!!!!

Jeśli chciałbyś dowiedzieć się czegoś więcej o Colinie Moock'[Author ID1: at Tue Nov 27 17:20:00 2001 ]u, przeczytaj jego notkę biograficzną w rozdziale 18., „Zarządzanie listwami czasowymi”.

!!!!!!!!!!!!!!!!!!! Koniec szarej ramki !!!!!!!!!!!!!!!!!!!!!

Wykorzystanie języków JavaScript i DHTML z filmami Flasha

Nowe funkcje języka ActionScript we Flashu 5 znacznie podniosły możliwości w zakresie tworzenia dynamicznych i interaktywnych stron sieciowych. W poprzednich wersjach Flasha pliki .SWF mogły wchodzić w interakcję z plikami HTML i skryptami jedynie przy użyciu akcji FSCommand. Oznaczało to, że wszelkie polecenia i zmienne musiały być najpierw przekazywane interpreterowi JavaScript, a dopiero przy jego użyciu tłumaczone na kod DHTML, Java lub CGI (Common Gateway Interface). Obecnie filmy Flasha mogą bezpośrednio wymieniać wszelkie rodzaje danych ze skryptami CGI działającymi po stronie serwera. Jeśli jednak chcesz komunikować się z przeglądarką internetową lub dokumentem HTML, musisz wykorzystać akcje z grupy FSCommand lub akcję getURL z deklaracją javascript:. Ponieważ część przeglądarek nie obsługuje wszystkich metod komunikacji Flasha z językiem JavaScript, ograniczymy się do omówienia akcji FSCommand oraz właściwości filmu Flasha, które można kontrolować z poziomu języka JavaScript.

Małe ostrzeżenie dla projektantów sieciowych

Następny podrozdział opisuje działanie akcji FSCommand, która nie jest obsługiwana przez wszystkie przeglądarki. W chwili pisania tej książki żadna z wersji Internet Explorera dla Mac-[Author ID1: at Tue Nov 27 17:21:00 2001 ]a (włącznie z wersją 5.0) nie potrafiła interpretować akcji FSCommand (zobacz ostrzeżenie na temat znacznika <EMBED> we wcześniejszej części rozdziału). Jedynie przeglądarki Netscape w wersji 3.0 (lub nowszej) obsługują akcje FSCommand na obu platformach sprzętowych — PC i Macintosh. W systemach Windows 95, 98 i NT akcje FSCommand są także obsługiwane przez przeglądarki Internet Explorer 3.0 i nowsze. Zamieszczony tu opis akcji FSCommand zakłada, że posiadasz podstawową wiedzę na temat języków JavaScript i ActionScript. Jeśli nie potrafisz dodawać akcji do ujęć i przycisków, wróć do rozdziału 17., „Akcje i detektory zdarzeń”. Jeżeli nie znasz w ogóle języka JavaScript, możesz po[Author ID1: at Tue Nov 27 17:21:00 2001 ]mimo te[Author ID1: at Tue Nov 27 17:21:00 2001 ]g[Author ID1: at Tue Nov 27 17:22:00 2001 ]o wykonać opisane dalej ćwiczenia i zrealizować mechanizm komunikacji po[Author ID1: at Tue Nov 27 17:22:00 2001 ]między filmem Flasha i skryptami JavaScript. Ponieważ jednak książka ta nie jest poświęcona językowi [Author ID1: at Tue Nov 27 17:22:00 2001 ]JavaScript~~owi~~[Author ID1: at Tue Nov 27 17:22:00 2001 ], nie będziemy objaśniać składni ani funkcji tego języka.

Jak Flash współpracuje z JavaScriptem

Jak wspomniano wcześniej, język ActionScript Flasha oferuje akcję o nazwie fscommand. Służy ona do wysyłania poleceń (lub innych ciągów znaków) z filmu Flasha do otoczenia, w którym film Flasha jest wyświetlany (na przykład do przeglądarki internetowej lub niezależnego odtwarzacza filmów Flasha). Co to może oznaczać dla interaktywności strony? Dzięki temu rozwiązaniu możliwe jest wykonanie określonego kodu JavaScript w oparciu o zdarzenie wykryte we Flashu (na przykład kliknięcie przycisku, akcję onClipEvent lub akcję umieszczoną w ujęciu filmu). Chociaż może nie brzmi to zbyt ekscytująco, możesz skorzystać z akcji FSCommand do uruchomienia dowolnej operacji, którą język JavaScript jest w stanie wykonać, w tym na przykład uaktualnienia tekstowego formularza HTML, wyświetlenia bądź ukrycia elementów strony lub zmiany koloru tła dokumentu HTML. Większość interakcji po[Author ID1: at Tue Nov 27 17:23:00 2001 ]między Flashem a JavaScript najlepiej działa w przeglądarkach obsługujących dynamiczną wersję HTML, czyli język DHTML — na przykład w przeglądarkach Netscape 4 i Internet Explorer 4 (lub nowszych wersjach tych przeglądarek). Efektami tymi zajmiemy się w następnym rozdziale.

Komunikacja Flasha z JavaScriptem nie jest jednokierunkowa. Przy użyciu funkcji JavaScript możesz na przykład śledzić odtwarzanie filmu Flasha [Author ID1: at Tue Nov 27 17:24:00 2001 ]i sterować nim[Author ID1: at Tue Nov 27 17:24:00 2001 ] ~~odtwarzani~~[Author ID1: at Tue Nov 27 17:24:00 2001 ]~~em filmu Flasha~~[Author ID1: at Tue Nov 27 17:24:00 2001 ]. Język JavaScript traktuje dokument HTML jako obiekt, a wszystkie jego elementy jako właściwości tego obiektu — film Flasha jest dla JavaScriptu tylko jednym z wielu różnych elementów zamieszczonych na stronie internetowej. Możesz więc stosować funkcje JavaScript i odsyłacze HTML (znaczniki <A HREF>) do sterowania wyświetlaniem filmu. Pod koniec rozdziału pokażemy c[Author ID1: at Tue Nov 27 17:24:00 2001 ]C[Author ID1: at Tue Nov 27 17:24:00 2001 ]i, jak utworzyć formularz HTML, który pozwala poruszać się po[Author ID1: at Tue Nov 27 17:24:00 2001 ]między różnymi scenami filmu.

Uwaga
Aby skrypt JavaScript mógł odbierać komunikaty wysyłane z filmu Flasha za pomocą [Author ID1: at Tue Nov 27 17:25:00 2001 ]akcją[Author ID1: at Tue Nov 27 17:25:00 2001 ]i[Author ID1: at Tue Nov 27 17:25:00 2001 ] FSCommand, musisz upewnić się, że atrybut swLiveConnect w znaczniku <EMBED> posiada wartość true. Domyślnie większość szablonów HTML Flasha ustawia tę wartość na false.

Zmiana atrybutów HTML

W tym podrozdziale pokażemy Ci,[Author ID1: at Tue Nov 27 17:25:00 2001 ] jak przy użyciu akcji FSCommand można dynamicznie zmieniać atrybut BGCOLOR w znaczniku <BODY> podczas wyświetlania filmu Flasha w oknie przeglądarki. Atrybut ten, określający kolor tła strony, zmienimy kilkakrotnie. Następnie dowiesz się, jak można uaktualniać pola tekstowe formularza (znacznik <FORM>) w celu wyświetlenia informacji o postępie ładowania filmu Flasha.

Na CD-ROM-ie

Skopiuj na dysk twardy plik countdown.fla znajdujący się w katalogu ch41\PercentLoaded na CD-ROM-ie dołączonym do niniejszej książki. Jest to stosunkowo duży plik (ponad 17MB) i zawiera wiele importowanych map bitowych oraz plików dźwiękowych, dzięki którym można zademonstrować powolne ładowanie filmu. Jeśli korzystasz z Flasha 5 w wersji dla Mac-[Author ID1: at Tue Nov 27 17:25:00 2001 ]a, może być konieczne zwiększenie alokacji pamięci dla Flasha do 64MB lub nawet więcej.

Dodawanie akcji FSCommand do filmu Flasha

Otwórz kopię pliku countdown.fla (znajdującego się w katalogu ch41/PercentLoaded na CD-ROM-ie dołączonym do książki) i użyj polecenia Control/Test Movie w celu wyświetlenia filmu w wersji .SWF. Powinieneś zauważyć moment, w którym podczas odliczania zawartość filmu rozjaśnia się i ciemnieje, po czym wraca do pierwotnej szarości. Licznik jest wyświetlany w pętli, tak długo, aż cała zawartość pierwszej sceny pliku .SWF zostanie załadowana do odtwarzacza filmu Flasha. Gdy pierwsza scena jest już pobrana, odtwarzacz przechodzi do klipu filmowego (Movie Clip) z dwoma psami (pokazywanymi „w negatywie”) i sekwencji tytułowej. Przykład ten wystarczy do przetestowania zagadnień, którymi mamy się tutaj zająć.

Naszym celem w tej części rozdziału jest wstawienie akcji FSCommand do odpowiednich ujęć kluczowych w pliku demonstracyjnym countdown.fla. Gdy odtwarzacz Flasha wyświetla ujęcie zawierające akcję FSCommand, do interpretera JavaScript wysyłane jest polecenie oraz ciąg znaków z odpowiadającym poleceniu argumentem. Skrypt JavaScript ma teraz za zadanie wywołać funkcję, która zmieni kolor tła zgodnie z wartością argumentu wysłanego akcją FSCommand (zobacz rysunek 41.2). Mówiąc prościej, dodasz akcję FSCommand do tych ujęć, w których kolor tła ma zmienić się na czarny, biały i z powrotem na szary. W czasie gdy w filmie Flasha następują takie zmiany kolorów, powinny one zajść także w dokumencie HTML.

0x01 graphic

Rysunek 41.2. Ujęcie 16.: Akcja FSCommand zmieniająca kolor tła (polecenie changeBgColor) na wartość #FFFFFF (czyli wyrażony w kodzie szesnastkowym kolor biały)

Oto kolejne kroki, które należy wykonać.[Author ID1: at Tue Nov 27 17:28:00 2001 ]:[Author ID1: at Tue Nov 27 17:28:00 2001 ]

1. W ujęciu 16. sceny Introduction wstaw ujęcie kluczowe do warstwy actions. Zaznacz to ujęcie i otwórz panel Actions. Upewnij się, że panel wyświetlany jest w trybie Normal Mode. Dodaj akcję FSCommand z listy dostępnych akcji po lewej stronie okna (możesz to zrobić albo podwójnym kliknięciem nazwy akcji, albo wybierając tę nazwę i klikając ikonę + w lewym górnym rogu okna). W polu Command wpisz polecenie changeBgColor. W polu Arguments wpisz #FFFFFF. Polecenie changeBgColor jest mapowane na funkcję JavaScript o takiej samej nazwie, którą opiszemy nieco dalej w tym rozdziale. Argument #FFFFFF zostanie przekazany do tej funkcji i na jego podstawie kolor tła strony HTML zmieni się na biały.

2. Po przejściu do ujęcia 20. wstaw kolejne ujęcie kluczowe i akcję FSCommand w warstwie actions. Ponownie wprowadź polecenie changeBgColor w polu Command oraz wartość #333333 w polu Arguments. Argument ten zmieni kolor tła na ciemnoszary.

3. W ujęciu 21. warstwy actions wykonaj te same czynności co w punkcie 2., za[Author ID1: at Tue Nov 27 17:29:00 2001 ] wyjątkiem tego, że w polu Arguments należy wprowadzić wartość #9E9E9E. Zmieni ona kolor tła HTML na zbliżony do tonacji filmu Flasha.

4. Przejdź do ujęcia 66. w warstwie actions i dodaj kolejną akcję FSCommand z poleceniem changeBgColor. Tym razem ustaw argument polecenia na #000000, co odpowiada czarnemu tłu dokumentu HTML.

5. Po dodaniu wszystkich wymienionych wyżej akcji FSCommand należy wyeksportować plik .SWF i związany z nim dokument HTML. Zapisz projekt w pliku countdown.fla na dysku twardym i otwórz okno Publish Settings (więcej informacji na temat korzystania z tego okna znajdziesz w rozdziale 40., „Publikowanie filmów Flasha”)[Author ID1: at Tue Nov 27 17:30:00 2001 ]. W panelu HTML okna Publish Settings wybierz szablon Flash with FSCommand. Kliknij OK, aby zamknąć okno Publish Settings. Wybierz polecenie File/Publish, aby wyeksportować plik .SWF oraz dokument HTML.

Następnym etapem naszej pracy będzie przeanalizowanie kodu wygenerowanego automatycznie przez szablon HTML. Konieczne będzie wprowadzenie w nim pewnych modyfikacji, które sprawią, że akcje FSCommand zaczną współdziałać ze skryptem JavaScript zgodnie z naszymi oczekiwaniami.

Uwaga
Możesz zauważyć, że w filmie countdown.fla zostały już dodane w kilku ujęciach kluczowych akcje FSCommand. Mają one zagwarantować, że kolor tła pozostanie spójny z innymi elementami strony, niezależnie od tego, jak przebiega odtwarzanie filmu.

Uruchamianie skryptu JavaScript w filmie Flasha

Chociaż szablon Flash with FSCommand utworzył większość kodu JavaScript za c[Author ID1: at Tue Nov 27 17:31:00 2001 ]C[Author ID1: at Tue Nov 27 17:31:00 2001 ]iebie, nie wykonał on[Author ID1: at Tue Nov 27 17:31:00 2001 ] automatycznego mapowania poleceń i argumentów na odpowiednie funkcje JavaScript. W tym podrozdziale zmodyfikujemy kod JavaScript w taki sposób, że będzie on [Author ID1: at Tue Nov 27 17:31:00 2001 ]działał w przeglądarce internetowej. Poniżej znajduje się listing kodu wygenerowanego przez Flasha 5 wraz ze[Author ID1: at Tue Nov 27 17:32:00 2001 ] wspomnianymi modyfikacjami.

Uwaga
Linie zawierające znak gwiazdki (*) są liniami nie [Author ID1: at Tue Nov 27 17:32:00 2001 ]wygenerowanymi automatycznie przez Flasha. Pamiętaj też, że znak ¬ oznacza kontynuację danej linii kodu w następnym wierszu i nie należy go wprowadzać do dokumentu HTML.

1. <SCRIPT LANGUAGE=JavaScript>

2. <!--

3. var InternetExplorer = ¬
navigator.appName.indexOf("Microsoft") != -1;

4. * var stringFlash = "";

5. // Handle all the the FSCommand messages in a Flash movie

6. function countdown_DoFSCommand(command, args) {

7. var countdownObj = InternetExplorer ¬
? countdown : document.countdown;

8. * stringFlash = stringFlash + args;

9. * if(command=="changeBgColor"){

changeBgColor();
}

}

10. * function changeBgColor(){

11. * document.bgColor = stringFlash;

12. * stringFlash = "";
}

13. // Hook for Internet Explorer
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 ¬
&& navigator.userAgent.indexOf("Windows") != -1 && ¬
navigator.userAgent.indexOf("Windows 3.1") ¬
== -1) {
document.write('\<SCRIPT LANGUAGE=VBScript\> \n');
document.write('on error resume next \n');
document.write('Sub countdown_FSCommand(ByVal ¬
command, ByVal args)\n');
document.write(' call ¬
countdown_DoFSCommand(command, args)\n');
document.write('end sub\n');
document.write('\<\/SCRIPT\> \n');
}
//-->

14. </SCRIPT>

Poniżej objaśniamy, linia po linii, kod zawarty w skrypcie:[Author ID1: at Tue Nov 27 17:32:00 2001 ].[Author ID1: at Tue Nov 27 17:32:00 2001 ]

1. Ten znacznik HTML inicjalizuje skrypt napisany w języku JavaScript.

2. Ten ciąg znaków oznacza standardowo zapisany komentarz HTML. Wprowadzając go po znaczniku <SCRIPT> [Author ID1: at Tue Nov 27 17:32:00 2001 ], [Author ID1: at Tue Nov 27 17:32:00 2001 ]sprawisz, że przeglądarki nie [Author ID1: at Tue Nov 27 17:32:00 2001 ]obsługujące JavaScript zignorują ten kod. Jeśli nie umieścisz tego ciągu, przeglądarki tekstowe, takie jak na przykład Lynx, wyświetlą kod JavaScript jako zwykły tekst.

3. Zmienna odpowiadająca wykryciu w systemie przeglądarki Internet Explorer — stąd jej nazwa.

4. Dodaliśmy tę linię kodu,[Author ID1: at Tue Nov 27 17:33:00 2001 ] aby zadeklarować zmienną o nazwie stringFlash. Jej wartość jest obecnie pusta, co zostało określone parą cudzysłowów nie [Author ID1: at Tue Nov 27 17:33:00 2001 ]otaczających żadnego tekstu. Zmienna ta jest potrzebna,[Author ID1: at Tue Nov 27 17:33:00 2001 ] aby argumenty akcji FSCommand mogły zostać przekazane funkcjom JavaScript w przeglądarkach Netscape i Internet Explorer.

5. Komentarz, który informuje ~~nas~~ [Author ID1: at Tue Nov 27 17:34:00 2001 ]o tym, że następujący po nim kod JavaScript opracowano w celu pobrania poleceń z akcji FSCommand filmu Flasha.

6. Pierwsza funkcja skryptu — nawiązuje ~~ona~~ [Author ID1: at Tue Nov 27 17:34:00 2001 ]komunikację z filmem Flasha. W nazwie funkcji zawierana jest wartość atrybutu NAME w znaczniku <EMBED> (lub wartość atrybutu ID ze znacznika <OBJECT>), po której następuje znak podkreślenia i ciąg DoFSCommand(command, args) {. W tym przykładzie nazwa filmu (i wartość atrybutu NAME) to countdown. Zwróć uwagę na to, że polecenia i argumenty zdefiniowane we Flashu są przekazywane do tej funkcji zgodnie z deklaracją (command,args), czyli najpierw polecenia, później argumenty.

7. Jest to przydatna, opcjonalna zmienna, którą tworzy szablon Flash with FSCommand. Co ciekawe, nie jest ~~ona~~ [Author ID1: at Tue Nov 27 17:37:00 2001 ]potrzebna,[Author ID1: at Tue Nov 27 17:37:00 2001 ] dopóki nie odwołujesz się do modeli dokumentów różniących się w przeglądarkach Internet Explorer i Netscape. Zamiast testować i jedną, i drugą przeglądarkę, możesz wstawić zmienną countdownObj w kodzie JavaScript. W tym przykładzie nie jest to jednak wymagane.

8. Kod definiujący wartość zmiennej stringFlash, która została zadeklarowana w linii 4. Wartość ta odpowiada argumentom (args) określonym w akcji FSCommand. Ponieważ początkowo ciąg znaków stringFlash był pusty (””), obecnie jest on identyczny jak argument akcji Flasha. W przypadku Internet Explorera kod ten nie jest niezbędny, jednak Netscape nie potrafi pobierać argumentów bezpośrednio z Flasha bez tej linii kodu.

9. Porównanie polecenia (command) z Flasha i ciągu znaków changeBgColor. Jeśli są one identyczne, JavaScript wykona kod zapisany po instrukcji warunkowej if. Ponieważ we Flashu zdefiniowaliśmy tylko jedno polecenie, wystarczy,[Author ID1: at Tue Nov 27 17:38:00 2001 ] że wykonamy teraz mapowanie polecenia changeBgColor z Flasha na funkcję changeBgColor() JavaScriptu.

10. Definicja funkcji changeBgColor(). Pamiętaj, że linia 9. mapuje polecenie changeBgColor z akcji FSCommand Flasha na tę funkcję.

11. Linia przekazująca zmienną stringFlash do właściwości document.bgColor, określającej kolor tła dokumentu HTML. Gdy akcja FSCommand z Flasha wyśle polecenie changeBgColor, wywołana zostanie funkcja JavaScript changeBgColor(), która przekaże wartość argumentu z akcji Flasha do właściwości document.bgColor.

12. W tej linie zmiennej stringFlash przypisywany jest z powrotem pusty ciąg znaków, więc następne wywołanie akcji FSCommand nie użyje już argumentu z poprzedniego wywołania.

13. W tym fragmencie kodu wykrywamy obecność przeglądarki Internet Explorer dla Windows i mapujemy funkcje JavaScript w odpowiednim skrypcie VBScript (język ten używany jest wyłącznie w wersji Internet Explorera dla Windows).

14. Znacznik </SCRIPT> kończący kod skryptu JavaScript.

Ostrzeżenie
Z pewnych powodów akcja FSCommand pomija atrybut NAME w znaczniku <EMBED>. Upewnij się, że wstawiłeś ten atrybut do znacznika. Wartość atrybutu powinna odpowiadać nazwie filmu .SWF, bez rozszerzenia .SWF. W przykładzie omawianym w tym podrozdziale wartością tego atrybutu będzie więc ciąg znaków "countdown".

I to wszystko! Po ręcznym wstawieniu wymienionych linii JavaScript możesz załadować dokument HTML do przeglądarki Internet Explorer lub Netscape (zgodnie z tym, co pisaliśmy na początku tego podrozdziału). Gdy odtwarzacz Flasha dojdzie do ujęć z akcjami FSCommand, tło HTML zmieni kolor razem z tłem filmu. Następnym krokiem będzie wstawienie do dokumentu znacznika <FORM>, który wyświetli postęp ładowania filmu w oknie przeglądarki.

Na CD-ROM-ie

Gotowy plik z omawianym tu przykładem (z uwzględnieniem także poniższego podrozdziału, gdzie do dokumentu HTML wstawiony został licznik postępu ładowania strony) znajdziesz na CD-ROM-ie pod nazwą countdown_complete.fla w katalogu ch41\PercentLoaded. Znajdziesz tam także plik countdown_complete.swf i dokument HTML z kodem JavaScript, w pliku countdown_complete.html. Plik ten odnosi się do filmu countdown_complete.swf. Jeśli napotkasz jakieś trudności w wykonywaniu opisywanych tu przykładów, możesz zajrzeć do odpowiednich plików i przeanalizować ich zawartość.

Wykorzystanie metody PercentLoaded()

JavaScript może sterować różnymi właściwościami filmu Flasha. Poza zakresem tematycznym tej książki byłoby omówienie wszystkich metod JavaScript, które można zastosować w przypadku filmów Flasha — jeśli chcesz poznać pełną listę metod JavaScript stosowanych z filmami Flasha, zajrzyj na stronę firmy Macromedia, do działu pomocy technicznej dla użytkowników Flasha:

http://www.macromedia.com/support/flash/ts/documents/tn4160.html

W tym podrozdziale zajmiemy się wykorzystaniem metody PercentLoaded() do wyświetlenia w polu tekstowym informacji o postępie w ładowaniu filmu Flasha. Pole tekstowe utworzymy przy użyciu znacznika <FORM>, a następnie wprowadzimy odpowiedni kod JavaScript.

1. Otwórz plik countdown.fla, którego używałeś w poprzednim podrozdziale. W warstwie percentLoaded powinieneś ujrzeć puste ujęcie kluczowe w klatce 1. Wstaw do tego ujęcia akcję FSCommand. W polu Command tej akcji (panel Actions) wpisz PercentLoaded. Polecenie to nie wymaga wprowadzania argumentów. Tak samo zdefiniowane akcje FSCommand wstaw do ujęć nr 10, 20, 30, 40, 50, 60 i 67 w warstwie percentLoaded. Wyeksportuj plik .SWF o nazwie countdown.swf za pomocą [Author ID1: at Tue Nov 27 17:45:00 2001 ]poleceniem[Author ID1: at Tue Nov 27 17:45:00 2001 ]a[Author ID1: at Tue Nov 27 17:45:00 2001 ] File/Export Movie. Upewnij się, że umieściłeś ~~ten~~ [Author ID1: at Tue Nov 27 17:45:00 2001 ]plik w tym samym katalogu co dokument HTML, którym zajmowaliśmy się w poprzednim podrozdziale.

2. W edytorze tekstowym (na przykład Notepad albo SimpleText) otwórz wspomniany dokument HTML.

3. Wstaw następujący kod HTML pod znacznikami <OBJECT> i <EMBED>:

</FORM>

Powyższy kod korzysta z dwóch atrybutów NAME, które zostaną rozpoznane przez interpreter JavaScript. Oprócz tego atrybut STYLE języka DHTML przypisuje wartość display:show do znaczników <FORM> i <INPUT>.

Ostrzeżenie
Implementacja modelu obiektu dokumentu (document object model, DOM) w przeglądarce Netscape nie pozwala uaktualniać stylów[Author ID1: at Tue Nov 27 17:46:00 2001 ]i[Author ID1: at Tue Nov 27 17:46:00 2001 ] w dowolnej chwili, a przynajmniej dopóki strona nie zostanie odświeżona (na przykład, [Author ID1: at Tue Nov 27 17:47:00 2001 ] [Author ID1: at Tue Nov 27 17:46:00 2001 ]gdy użytkownik zmieni rozmiar okna). Można napisać kod JavaScript, który nada pożądane style elementom <FORM>, jednak wykracza to poza ramy tej książki.

4. Musimy teraz zamapować polecenie PercentLoaded z akcji FSCommand na odpowiednią funkcję JavaScript. Wprowadź poniższy kod JavaScript w wyrażeniu if funkcji function countdown_DoFSCommand:

if(command=="percentLoaded"){

moviePercentLoaded();

}

5. Dodaj pokazany niżej kod JavaScript po funkcji --> function [Author:MMP] [Author ID1: at Tue Nov 27 17:47:00 2001 ]changeBgColor(). Kod ten ma za zadanie uaktualnić zawartość pola tekstowego <FORM> informacją o tym, jaka część filmu Flasha została już załadowana. Gdy wartość ta będzie równa 99%[Author ID1: at Tue Nov 27 17:48:00 2001 ] ~~procent~~ [Author ID1: at Tue Nov 27 17:48:00 2001 ]lub większa, w polu pojawi się wartość 100, a samo pole zniknie po upływie 2 sekund. Jak wspomniano przed chwilą, Netscape nie potrafi na bieżąco uaktualniać stylu elementów <FORM> (atrybut STYLE). (Znak ¬ oznacza kontynuację danej linii kodu w następnym wierszu. Nie należy go wprowadzać do dokumentu HTML).

function moviePercentLoaded(){

var m = InternetExplorer ? countdown: ¬
document.countdown;

var Percent = m.PercentLoaded();

var temp = 0;

if(Percent >= 99 ){

document.flashPercent.textfield.value="100 %";

if (navigator.appName.indexOf("Microsoft") != -1){

setTimeout("document.flashPercent. ¬
textfield.style.display = 'none'",2000);

setTimeout("document.flashPercent.style. ¬
display = 'none'",2000);

}

else {

temp = Percent;

document.flashPercent.textfield.value = temp ¬
+ " %" ;

}

6. Zapisz dokument HTML na dysku i załaduj go do przeglądarki. Jeśli wystąpią jakieś błędy, sprawdź uważnie składnię JavaScript. Brakujące lub wstawione w złych miejscach znaki ; lub } mogą uniemożliwić działanie całego skryptu. W razie dalszych komplikacji zajrzyj do pliku count_down.html na CD-ROM-ie dołączonym do książki.

Cóż, nie było to najłatwiejsze zadanie i efekt może nie wydawać się tak spektakularny, jakby można było tego oczekiwać. Mimo to zdobyłeś pewien zasób wiedzy na temat współpracy Flasha z językiem JavaScript i możesz dzięki temu podnieść interaktywność swoich prezentacji o jeden poziom do góry.

!!!!!!!!!!!!!!!!!!! Początek szarej ramki !!!!!!!!!!!!!!!!!!!!!

Ćwiczenie eksperta

JavaScript i akcje FSCommand

Autor: Christian Honselaar

Flash zmienił sposób, w jaki postrzegamy i odbieramy treści publikowane w Internecie, a zwiększone możliwości i funkcjonalność Flasha 5 tylko rozwijają jeszcze bardziej ten trend. Jedną z zalet Flasha [Author ID1: at Tue Nov 27 17:49:00 2001 ]nie do końca docenianych ~~zalet Flasha~~ [Author ID1: at Tue Nov 27 17:49:00 2001 ]jest możliwość komunikowania się z językiem HTML w celu określania zawartości strony. Flash może wysyłać dane i instrukcje do dokumentów HTML przy użyciu akcji FSCommand. Podobnie język JavaScript w dokumentach HTML można wykorzystać do ustawiania wartości zmiennych Flasha i określania różnych operacji w filmie. Aby to ułatwić, Macromedia opracowała specjalne metody JavaScript dla obiektów Flasha. W tym ćwiczeniu nauczysz się korzystania z obu ścieżek komunikacji w przykładowej stronie internetowej.

Plik źródłowy .FLA bieżącego projektu znajduje się w katalogu ch41\christian_honselaar na CD-ROM-ie dołączonym do książki. Zanim przejdziesz dalej, otwórz ten plik — Bothways.fla — we Flashu.

Patrząc na główną listwę czasową,[Author ID1: at Tue Nov 27 17:50:00 2001 ] ujrzysz dwa ujęcia kluczowe ze skryptami ActionScript. Oprócz tego w filmie wprowadzono trzeci skrypt, którego w tej chwili nie widzisz.

Pierwszy skrypt zamieszczony został w ujęciu nr 1.:[Author ID1: at Tue Nov 27 17:50:00 2001 ]

var goalNumber=0, i=0;

fscommand("flashloaded","true");

W pierwszej linii kodu inicjalizowane są zmienne goalNumber oraz i, którym nadawana jest wartość 0. Druga linia zawiera akcję fscommand z poleceniem "flashloaded" dla skryptów JavaScript i VBScript w dokumencie HTML.

Drugi skrypt, zamieszczony w ostatnim ujęciu, wygląda następująco:

if ((i==1)&&(goalNumber==0)) fscommand ( "ballGone", "dfgf");

if (i<=goalNumber){

surface.attachMovie( "cBall", "Ball_"+i, i );

surface["Ball_"+i]._yscale = i*10;

surface["Ball_"+i]._xscale = i*10;

i++;

} else goalNumber=0;

gotoAndPlay (2);

Skrypt korzysta z wyrażenia if,[Author ID1: at Tue Nov 27 17:50:00 2001 ] aby sprawdzić, czy nie został jeszcze osiągnięty limit narzucony wartością zmiennej goalNumber. Jeśli nie został on [Author ID1: at Tue Nov 27 17:51:00 2001 ]jeszcze osiągnięty, skrypt skopiuje kolejny klon symbolu Movie Clip (przedstawiającego kulkę) do okna dokumentu. Powinieneś zauważyć, że zmienna goalNumber nie jest definiowana nigdzie w obrębie skryptu. Wynika to z tego, że jej wartość określamy poza filmem — na poziomie dokumentu HTML. Zwróć też uwagę, że wartość zmiennej i zwiększa się aż do limitu określającego liczbę kulek.

Pozostał nam jeszcze jeden skrypt do omówienia:

_root.i--;

if (_root.i==0) fscommand ( "ballGone" );

this.removeMovieClip();

Linia this.removeMovieClip(); usuwa kolejne klony klipu filmowego ballAnim. W pozostałych dwóch liniach skrypt sprawdza, czy pozostały jeszcze jakieś klony do usunięcia. Jeśli nie, do przeglądarki wysyłany jest komunikat z informacją o tym, że nie pozostało więcej kulek.

A oto sposób, w jaki skonstruowana jest akcja fscommand: pierwszy jej parametr zawiera nazwę polecenia, natomiast drugi parametr określa argument tego polecenia. Obydwa parametry wysyłane są w postaci ciągów znakowych, które można pobrać poza filmem. Akcja fscommand wysyła komunikat do przeglądarki internetowej, a ta przekazuje go skryptom JavaScript lub VBScript w dokumencie HTML. W naszym przykładzie chcemy, aby działanie akcji FSCommand było zainicjalizowane odpowiednim poleceniem ze skryptu — przyjrzyjmy się, jak to zostało rozwiązane w kodzie dokumentu.

Otwórz w edytorze tekstowym plik HTML znajdujący się w katalogu ch41\christian_honselaar na CD-ROM-ie dołączonym do książki. Kod JavaScript i VBScript podzielony jest na cztery sekcje.[Author ID1: at Tue Nov 27 17:52:00 2001 ]:[Author ID1: at Tue Nov 27 17:52:00 2001 ]

Sekcja 1-->.[Author ID1: at Tue Nov 27 17:53:00 2001 ] Internet Explorer automatycznie łączy akcję fscommand z procedurą VBScript o odpowiedniej nazwie, która musi zawierać nazwę (ID) nadaną jej w znaczniku <OBJECT> oraz dopisany do niej ciąg _FSCommand. Parametry tej procedury są określane akcją fscommand we Flashu. W tej chwili nie będziemy się nimi specjalnie zajmować — interesuje nas tylko wyświetlenie elementów <DIV> lub <LAYER> zawierających odpowiedni komunikat. Znaczniki te zdefiniujemy w następnej sekcji.

Opisane tu rozwiązanie działa dobrze w przeglądarkach Internet Explorer od wersji 3.0 wzwyż, zarówno na komputerach Mac, jak i PC. Aby działało ono w przeglądarkach Netscape 3.0 (lub nowszych), utworzymy funkcję JavaScript, która odbierze dane wysyłane za pomocą [Author ID1: at Tue Nov 27 17:54:00 2001 ] [Author ID1: at Tue Nov 27 17:54:00 2001 ]akcją[Author ID1: at Tue Nov 27 17:54:00 2001 ]i[Author ID1: at Tue Nov 27 17:54:00 2001 ] FSCommand. Jej nazwa będzie nieco inna — zastąp ciąg _FSCommand ciągiem _DoFSCommand. Oprócz tego musisz dodać dwa atrybuty do znacznika <EMBED>, umieszczonego po[Author ID1: at Tue Nov 27 17:54:00 2001 ]między znacznikami <BODY>:

NAME= flash i SWLIVECONNECT=true

To wszystko — Flash może już sterować zawartością dokumentu HTML!

Sekcja 2-->.[Author ID1: at Tue Nov 27 17:55:00 2001 ] Ponieważ każda przeglądarka wykorzystuje warstwy (-->layers[Author ID1: at Tue Nov 27 17:55:00 2001 ]) języka DHTML w nieco inny sposób, napiszemy kod, który utworzy odpowiednie znaczniki HTML dla każdej przeglądarki. Internet Explorer użyje znacznika <DIV> [Author ID1: at Tue Nov 27 17:55:00 2001 ], [Author ID1: at Tue Nov 27 17:55:00 2001 ]natomiast Netscape wykorzysta znacznik <LAYER>. Element ten wyświetli komunikat pobrany z Flasha o tym, że na ekranie nie ma już żadnych kulek.

Sekcja 3-->.[Author ID1: at Tue Nov 27 17:56:00 2001 ] Funkcja o nazwie hideMessage zostanie wykonana po kliknięciu przez użytkownika przycisku w formularzu HTML. Funkcja ta zmienia atrybut widoczności obiektów <DIV> i <LAYER> na false, czyli czyni je niewidocznymi.

Sekcja 4-->.[Author ID1: at Tue Nov 27 17:56:00 2001 ] Funkcja showMessage wykonywana,[Author ID1: at Tue Nov 27 17:56:00 2001 ] gdy Flash wyśle parametry akcji FSCommands do dokumentu HTML. Następuje to w chwili, kiedy ostatnia kulka (klon symbolu ballAnim) zostanie usunięta z filmu Flasha.

HTML może sterować filmem Flasha po[Author ID1: at Tue Nov 27 17:56:00 2001 ]przez odwoływanie się do metod JavaScript związanych z obiektem Flasha. Dodamy w dokumencie pole tekstowe, do którego użytkownik może wpisać pożądaną liczbę kulek do wyświetlenia na ekranie, a obok pola umieścimy przycisk, który wyśle zawartość pola do filmu Flasha. Oto kod odpowiadający polu tekstowemu:

number of balls:<input name="nBalls" id="nBalls" value=20 type="text"></input>

Pole nBalls zawiera liczbę kulek do wyświetlenia na ekranie. We Flashu ustawiamy wartość zmiennej goalNumber zgodnie z liczbą wpisaną w tym polu. Na początku musimy jednak ukryć komunikat o braku kulek. Poniżej przedstawiony znacznik <INPUT> uruchamia funkcję hideMessage (wspomnianą w sekcji 3), która przekaże wartość pobraną z pola nBalls do zmiennej goalNumber.

Poniższy rysunek przedstawia pole tekstowe wyświetlane w przeglądarce pod filmem Flasha.

0x01 graphic

Od teraz,[Author ID1: at Tue Nov 27 17:57:00 2001 ] po naciśnięciu przycisku wartość zmiennej nBalls jest przekazywana do Flasha i służy do określenia wartości zmiennej goalNumber — na tej podstawie Flash decyduje, czy powinien narysować więcej kulek. Omówiony tu przykład był tylko prostym zastosowaniem akcji FSCommand Flasha we współpracy z dokumentami HTML. W praktycznych sytuacjach akcje i metody opisane powyżej można wykorzystać do rozwiązywania bardziej istotnych problemów — na przykład uaktualniania belek nawigacyjnych. Istnieje wiele różnych metod we [Author ID1: at Tue Nov 27 17:58:00 2001 ]współpracy Flasha z przeglądarkami — ich dokumentację możesz znaleźć pod adresem:

http://www.macromedia.com/support/flash/publishexport/scriptingwithflash/

!!!!!!!!!!!!!!!!!!! Przypis do szarej ramki !!!!!!!!!!!!!!!!!!!!!

Notka biograficzna Christiana znajduje się w innym jego ćwiczeniu (poświęconym językowi XML) w rozdziale 24.

!!!!!!!!!!!!!!!!!!! Koniec szarej ramki !!!!!!!!!!!!!!!!!!!!!

Podsumowanie

 Sposób wyświetlania filmu Flasha w przeglądarce możesz modyfikować,[Author ID1: at Tue Nov 27 17:58:00 2001 ] określając atrybuty znaczników <OBJECT> i <EMBED> w dokumencie HTML. Skalowanie, zmiana rozmiarów, jakości wyświetlania, koloru tła to tylko niektóre z właściwości filmu, ~~mogący~~[Author ID1: at Tue Nov 27 17:58:00 2001 ]~~ch by~~[Author ID1: at Tue Nov 27 17:59:00 2001 ]które mogą by[Author ID1: at Tue Nov 27 17:59:00 2001 ]ć zmienian~~ymi~~[Author ID1: at Tue Nov 27 17:59:00 2001 ]e[Author ID1: at Tue Nov 27 17:59:00 2001 ] bez ingerowania w zawartość pliku .SWF.

 Nawet po[Author ID1: at Tue Nov 27 17:59:00 2001 ]mimo ustawienia rozmiarów filmu (WIDTH i HEIGHT) na 100%[Author ID1: at Tue Nov 27 17:59:00 2001 ] ~~procent~~[Author ID1: at Tue Nov 27 17:59:00 2001 ], w przeglądarce widoczna będzie niewielka szczelina oddzielająca film od krawędzi okna przeglądarki. Aby zminimalizować ten efekt, umieść film Flasha w pojedynczej ramce (-->frame[Author ID1: at Tue Nov 27 17:59:00 2001 ]) przy użyciu znacznika <FRAMESET>.

 Obecność plug-[Author ID1: at Tue Nov 27 17:59:00 2001 ]inu lub kontrolki Actio[Author ID1: at Tue Nov 27 18:00:00 2001 ]veX odtwarzających filmy Flasha można wykrywać na różne sposoby: używając osobno znaczników <OBJECT> i <EMBED>, korzystając z odpowiednich skryptów JavaScript i VBScript,[Author ID1: at Tue Nov 27 18:00:00 2001 ] lub wstawiając plik swiffer wygenerowany we Flashu do dokumentu HTML, używając przy tym specjalnego znacznika <META>.

 Filmy Flasha mogą wchodzić w interakcję z obiektami JavaScript i DHTML na stronie internetowej. Możliwe jest to jednak tylko dla wersji 3.0 lub nowszych przeglądarek Internet Explorer (pod Windows) i Netscape (pod Windows i na Mac-[Author ID1: at Tue Nov 27 18:00:00 2001 ]u).

 Pliki .SWF Flasha mogą wysyłać polecenia do skryptów JavaScript za pomocą [Author ID1: at Tue Nov 27 18:00:00 2001 ]~~dzięki~~ [Author ID1: at Tue Nov 27 18:00:00 2001 ]akcji FSCommand Flasha. Akcja ta przekazuje do przeglądarki zdefiniowane przez użytkownika polecenia i ich argumenty.

 Chociaż szablon HTML Flash with FSCommand generuje skrypt JavaScript obsługujący akcje[Author ID1: at Tue Nov 27 18:01:00 2001 ]ę[Author ID1: at Tue Nov 27 18:01:00 2001 ] FSCommand, nie wykonuje on automatycznego mapowania akcji z Flasha na odpowiednie funkcje JavaScript. Zadanie to musisz wykonywać ręcznie.

 Akcje FSCommand można wykorzystywać do modyfikowania atrybutów i styli w dokumencie HTML.

 Specjalne metody JavaScript mogą być wykorzystywane w komunikacji plug-[Author ID1: at Tue Nov 27 18:01:00 2001 ]inu Flasha z przeglądarką — na przykład możliwe jest wysłanie do filmu zapytania, jak duża jego część została już załadowana.

[Author ID1: at Tue Nov 27 16:28:00 2001 ][Author ID1: at Tue Nov 27 16:28:00 2001 ][Author ID1: at Tue Nov 27 16:28:00 2001 ][Author ID1: at Tue Nov 27 16:28:00 2001 ][Author ID1: at Tue Nov 27 16:28:00 2001 ]czy to s1 tu powinno być?[Author ID1: at Tue Nov 27 16:28:00 2001 ]

[Author ID1: at Tue Nov 27 16:33:00 2001 ][Author ID1: at Tue Nov 27 16:33:00 2001 ][Author ID1: at Tue Nov 27 16:33:00 2001 ][Author ID1: at Tue Nov 27 16:33:00 2001 ][Author ID1: at Tue Nov 27 16:33:00 2001 ]ujednolicić styl czcionki w opisie ćwiczenia[Author ID1: at Tue Nov 27 16:33:00 2001 ]

[Author ID1: at Tue Nov 27 16:57:00 2001 ][Author ID1: at Tue Nov 27 16:57:00 2001 ][Author ID1: at Tue Nov 27 16:57:00 2001 ][Author ID1: at Tue Nov 27 16:57:00 2001 ][Author ID1: at Tue Nov 27 16:57:00 2001 ]wypadła część numerów, czy jest może dalej???[Author ID1: at Tue Nov 27 16:57:00 2001 ]

DO SKŁADU: Uwaga tłumacza — cztery kolejne listingi (aż do początku podrozdziału „Wykorzystanie pliku typu swiffer”) zostały wstawione przeze mnie po uzgodnieniu tego z Markiem Binkowskim. Nie ma ich w tekście książki.

[Author ID1: at Tue Nov 27 17:00:00 2001 ][Author ID1: at Tue Nov 27 17:00:00 2001 ][Author ID1: at Tue Nov 27 17:00:00 2001 ][Author ID1: at Tue Nov 27 17:00:00 2001 ][Author ID1: at Tue Nov 27 17:00:00 2001 ]trudno zorientować się, o które linie chodzi, bo numeracja została gdzieś zgubiona[Author ID1: at Tue Nov 27 17:00:00 2001 ]

[Author ID1: at Tue Nov 27 17:12:00 2001 ][Author ID1: at Tue Nov 27 17:12:00 2001 ][Author ID1: at Tue Nov 27 17:12:00 2001 ][Author ID1: at Tue Nov 27 17:12:00 2001 ][Author ID1: at Tue Nov 27 17:12:00 2001 ]ujednolicić styl zapisu tego akapitu w całej książce, kursywa[Author ID1: at Tue Nov 27 17:12:00 2001 ]

[Author ID1: at Tue Nov 27 17:47:00 2001 ][Author ID1: at Tue Nov 27 17:47:00 2001 ][Author ID1: at Tue Nov 27 17:47:00 2001 ][Author ID1: at Tue Nov 27 17:47:00 2001 ][Author ID1: at Tue Nov 27 17:47:00 2001 ]????[Author ID1: at Tue Nov 27 17:47:00 2001 ]

Wyszukiwarka