Flash w dokumencie HTML

2003-03-10 00:03

W tutorialu tym poruszone zostały zagadnienia związane z osadzaniem "obiektu flashowego" w treści dokumentu html.

Do osadzania obiektów Shockwave Flash na stronie html służą dwa tagi: OBJECT i EMBED. Tag OBJECT obsługiwany jest wyłącznie przez przeglądarkę firmy Microsoft czyli Internet Explorera (IE). Tag EMBED natomiast zarówno przez IE jak i wszystkie pozostałe (nie jest jednak wykluczone, że w kolejnych wersjach IE żeby znacznik EMBED był obsługiwany potrzebny będzie odpowiedni dll, w tej chwili obsługa przekazywana jest kontrolce ActiveX - pliki flash.ocx dla MX i swflash.ocx dla wcześniejszych). Jak więc powinien wyglądać kod html tak aby to co chcemy było wyświetlane przez wszystkie przeglądarki? Najczęściej tag EMBED jest zagnieżdżony wewnątrz tagu OBJECT.

<OBJECT nazwa_atrybutu="wartość" ...>
 	<PARAM name="nazwa_parametru" value="wartość_parametru">
    ...
	<EMBED nazwa_atrybutu="wartość"...></EMBED>
</OBJECT>

Działa to następująco. Przeglądarka IE, napotyka najpierw tag OBJECT i zajmuje się jego obsługą, wewnątrz tego tagu interpretowane są tylko tagi PARAM, natomiast tag EMBED nie jest już obsługiwany. Uruchomiona zostaje odpowiednia kontrolka ActiveX i zostają jej przekazane parametry zawarte w znacznikach PARAM. Zachowanie pozostałych przeglądarek jest odwrotne, ponieważ nie obsługują one tagów OBJECT i PARAM, zajmując się tylko tagiem EMBED (do jego obsługi służy plug-in w postaci pliku bibliotecznego NPSWF32.dll).
Jak widać w przypadku IE część parametrów związanych z obiektem flashowym zawarta jest w atrybutach tagu OBJECT, część w atrybutach tagów PARAM. Można powiedzieć, że w przypadku tagu OBJECT atrybuty są informacjami dla przeglądarki natomiast atrybuty zawarte w tagach PARAM przekazywane są flash playerowi. Dla innych przeglądarek wszystkie te informacje są atrybutami tagu EMBED.

Atrybuty znacznika OBJECT:

• border - liczba w pikselach określająca szerokość obramowania wokół obiektu


• align - działa to podobnie jak valign dla znacznika IMG w html i najlepiej widać jego działanie przy otaczaniu obiektu tekstem. Możliwe wartości dla atrybutu value to: middle - środek obiektu jest wyrównywany do lini tekstu, top - góra, bottom - dół, right - obiekt jest wyrównywany do prawej, left - do lewej


• classid - jest to identyfikator klasy obiektu, każda zarejestrowana kontrolka ActiveX posiada swój własny unikalny identyfikator. Dla flasha może to być łańcuch: "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"


• codebase - adres URL, z którego zostanie pobrany komponent ActiveX w przypadku jego braku w systemie. W przypadku flasha może to być np.: "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0".
  Wersja jest porównywana z aktualną znajdującą się w systemie i jej ściągnięcie następuje tylko wtedy gdy jest wyższa od już zainstalowanej


• width - szerokość okna przeznaczonego dla flasha, w procentach szerokości okna przeglądarki lub w pikselach


• height - wysokość okna przeznaczonego dla flasha, w procentach szerokości okna przeglądarki lub w pikselach


• id - identyfikator powinien być wartością unikalną w dokumencie zaczynać się od litery lub znaku "_"


• name - nazwa, podobnie jak atrybut id

Wartości par atrybutów name i value znacznika PARAM:

• movie - dla atrybutu value podaje się tu adres URL filmu, najczęściej jest to adres względny np.
  <PARAM name="movie" value="swf/movie.swf">


• quality - określa jakość prezentacji, możliwe wartości low - najgorsza wyłączony antyaliasing, autolow - zaczyna od low i jeśli procesor utrzyma prędkość prezentacji następuje przełączanie do high, autohigh - przeciwnie do autolow, medium - średnia, high - wysoka, best - najlepsza. Tu uwaga domyślnie ustawioną jakością przy publikowaniu do html jest high a nie best.


• scale - dopasowanie wielkości prezentacji do wielkości okna, możliwe wartości: exactfit - dopasowanie poprzez zmianę skali, tak aby całe okno było wypełnione, showall - dopasowanie do okna przy zachowaniu proporcji prezentacji (usawienie domyślne), noborder - przy zachowaniu proporcji ale tak żeby całe okno było wypełnione, najczęściej następuje przycięcie fragmentu prezentacji, noscale - bez skalowania


• bgcolor - kolor, tu można przedefiniować kolor tła prezentacji np.
  <PARAM name="bgcolor" value="#FFFFFF">


• wmode - możliwe wartości do przyjęcia: window, opaque, transparent
  
  Flash Player może pracować w dwóch modach window oraz windowless. Mod window jest domyślny, zapewnia również największą wydajność. Niestety przy jego użyciu nie jest możliwe pozycjonowanie obiektu flash na warstwach (z-index). Flash jest umieszczony na najwyższej warstwie i nic nie może być wyżej tzn. nic nie może go przysłonić. Mod windowless umożliwia pozycjonowanie, niestety jego obsługa zależy od przeglądarki, jej wersji i od wersji Flash Playera. Mod ten może występować z przeźroczystym tłem transparent i nieprzeźroczystym opaque. Efekt przeźroczystości można było uzyskać do niedawana tylko dla IE. Od wersji 6.0.65.0 Flash Playera możliwy jest też dla NN 7 i dla innych przeglądarek na silniku Gecko w wersji od 1.0.1. Opera 7.01 nadal go nie obsługuje. Wadą jest większe obciążenie procesora. Dodatkowo dla IE występuje tu pewien bug. Jeśli w prezentacji są jakieś elementy nawigacyjne (wykorzystujące getURL) i dosyć często następuje przeładowywnie lub ładowanie nowej strony z flashem na przeźroczystym tle, IE lubi się wysypywać. Od wersji 6,0,60,48 możliwe jest pozycjonowanie na warstwach dla NN 7 i kompatybilnych. Dla IE na platformie Windows było to możliwe wcześniej.
  
  <PARAM name="wmode" value="transparent">


• play - atrybut value może mieć dwie wartości true lub false. Jeśli jest równy false prezentacja zaczyna być odtwarzana dopiero po wybraniu play z menu lub naciśnięciu przycisku uruchamiającego, jeśli takowy się w niej znajduje. Działa to tak jakby w pierwszej klatce znajdowała się akcja stop.
  <PARAM name="play" value="false">


• loop - jeśli value jest równe true, prezentacja jest odtwarzana w nieskończoność od początku do końca, chyba że na jej końcu znajduje się akcja stop.
  <PARAM name="loop" value="true">


• menu - określa czy w przeglądarce po kliknięciu prawym przyciskiem myszki na prezentacji będzię się pokazywało menu podręczne.
  <PARAM name="menu" value="false">


• devicefont - działa tylko pod Windowsem, jeśli value jest równe true czcionki z playera zostaną podobno podmienione odpowiednimi czcionkami systemowymi z antyaliasingiem
  <PARAM name="devicefont" value="false">


• salign - wyrównanie w oknie playera, możliwe wartości: L lewo, C środek, R prawo, T góra, C środek, B dół zastosowanie gdy wielkość prezentacji jest inna niż wielkość okna
  <PARAM name="salign" value="CC">


• flashvars - atrybut wprowadzony od 6 wersji playera służący do przekazywania zmiennych. Wartości tego atrybutu stanowią pary nazwa_zmiennej=wartość połączone znakiem "&", znaki specjalne powinny być przedstawione sekwencją % i 2 cyfrowy kod heksadecymalny czyli tak jak to jest w adresach URL.
  <PARAM name="flashvars" value="zmienna1=wartosc1&zmienna2=wartosc2">

W znaczniku EMBED można używać wszystkich opisanych atrybutów oprócz classid, codebase, movie. Specyficzne tylko dla EMBED są następujące:

• type - informująca o typie MIME


• pluginpage - zawierająca adres URL strony, z której można pobrać plugina


• src - adres URL filmu, to samo co movie w PARAM


• swLiveConnect - wartość true lub false, określa czy ma być włączona Java, domyślną wartością jest false, true jest wymagane przy komunikacji flasha z JavaScript.

Przykład:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="550" HEIGHT="400" id="prezentacja" ALIGN="left">
 <PARAM NAME=movie VALUE="prezentacja.swf"> <PARAM NAME=quality VALUE=high>
 <PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="prezentacja.swf" quality=high bgcolor=#FFFFFF  WIDTH="550" HEIGHT="400" NAME="prezentacja" ALIGN="left"
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>

Większość z opisanych wyżej atrybutów można ustawić tak żeby były uwzględniane automatycznie przy każdej publikacji. W opcjach publikowania File->Publish Settings.. i zakładka HTML.

Z listy Template możemy wybrać odpowiedni szablon, w którym będzie umieszczona prezentacja, np. taki wykrywający właściwą wersję flasha.
Dimensions umożliwia wybranie wielkości okna przeznaczonego dla flasha. Match Movie będzie odpowiadało wymiarowi prezentacji. Wybierając Pixels lub Percent można ustalić inne wymiary.
Reszta opcji dokładnie odpowiada atrybutom opisanym wcześniej. Przy czym HTML Alignment odnosi się do atrybutu align, a Flash Alignment do atrybutu salign.

Do tutorialu dołączyłem kilka pliczków. W plikach "window.htm", "opaque.htm" i "transparent.htm" umieszczono obiekty flash na różnych warstwach tak aby przetestować działanie parametru wmode. W każdym z nich za pomocą etykiety DIV i odpowiadającej jej stylowi pozycjonowane są dwa obiekty flash. Flash pierwszy nazwany "flashek1" przedstawia poruszające się kółko koloru czerwonego. Znajduje się na on warstwie o numerze 1 (z-index:1); "flashek2" z niebieskim kółkiem, znajduje się na warstwie o numerze 2 i jest przesunięty w stosunku do pierwszego 20px w lewo. Powinien więc zakrywać "flashka1". Na warstwie trzeciej najwyższej znajduje się tekst "ten napis znajduje się najwyżej". Poniżej prezentuje screeny jak to wygląda w Netscape 7.01 z Flash Playerem 6.0.65.0:

Jak widać najwyżej jest flash, który powinien być najniżej. Dodatkowo występuje dziwne zjawisko jakby flaszki przez siebie przenikały.

Tutaj wszystko jest w porządku i odpowiada położeniu warstw.

Jak w przykładzie poprzednim, dodatkowo widać, że przy tej wersji Netscape i Flash Playera obsługiwane jest już przeźroczyste tło :)

Plik "noscale.htm" zawiera przykład, w którym wielkość prezentacji jest różna od wielkości okna. Kolor tła dokumentu html jest biały, tło okna flasha jest żółte, a cała prezentacja zawarta jest na tle w postaci kwadratu w zielonym kolorze. Wartości poszczególnych atrybutów wynoszą:
 width=200px, height=200px (wielkość prezentacji 100px na 100px)
 scale=noscale
 salign=cb
We Flashu MX został wprowadzony obiekt Stage dzięki, któremu możliwy jest odczyt wysokości oraz szerokości okna z flashem (Stage.width i Stage.height). Możliwa jest także zmiana pewnych własności ustalonych przez atrybuty scale (Stage.scaleMode), salign (Stage.align) i menu (Stage.showMenu).
W przykładzie wykorzystano przełączanie między Stage.scaleMode="noScale", a Stage="exactFit" wystarczy kliknąć na prezentację by zobaczyć efekt :)

Plik "prosta_reklama.htm" to uproszczony znacznie przykład reklamy ;) z jaką możemy się zetknąć ostatnimi czasy na różnych witrynach. Wykorzystano tu JavaScript do włączania, wyłączania widoczności bloku z flashem, a także do jego pozycjonowania. Przykład działa na IE i na przeglądarkach z enginem Gecko. W tutorialu poświęconym komunikacji flasha w przeglądarce znajdzie się min. przykład z reklamą, którą można będzie zamknąć kliknięciem ale we flashu.

Ostatni przykład "zmienna.htm" pokazuje dwa sposoby dzięki, którym przy osadzaniu flasha można przekazać mu zmienne. Pierwszy z tych sposobów stosuje w tym celu atrybut flashvars drugi łańcuch zapytania po nazwie pliku w atrybucie movie (etykieta OBJECT) lub src (etykieta EMBED).

krzepa