Jak poprawnie osadzić Flasha w kodzie (X)HTML strony?

Internet źródłem nieprawidłowego rozwiązania…

Pomimo tego, że treści dostępne w kanonach sieci są podatne na „proces edukacji” i powoli zmieniają swoją zawartość na coraz to bardziej prawidłową, to nadal można znaleźć wiele wyników wyszukiwań które są rozwiązaniami błędnymi. Tak jest także z tematyką poruszaną w tym wpisie.

<embed type="application/x-shockwave-flash"
	width="1024"
	height="768"
	src="flash.swf"
	quality="high"
	bgcolor="#ffffff">
	<noembed>
	Przeglądarka nie obsługuje znacznika "embed", animacja Flash nie zostanie wyświetlona!
	</noembed>
</embed>

Oto przykład jednej z nieprawidłowych solucji. Problemem jest tu znacznik embed który nie jest, ani częścią specyfikacji HTML4, ani XHTML1.x, a jedynie naleciałością wprowadzoną kiedyś przez programistów Netscape Navigatora. Ponieważ jednak jest on wspomagany także przez przeglądarki takie jak Opera, Firefox, Safari, czy Internet Explorer przyjęło się pospolicie użytkowanie powyższego, nieprawidłowego rozwiązania (a wszystko za sprawą nieszczęsnego, kapitalistycznego marketingu w postaci bezmyślnego kopiowania danego artykułu ze strony na stronę i czerpania z tego korzyści). Niekiedy można napotkać także poradę w której embed znajduje się w tagu object, które w takim połączeniu jest także błędne.

<embed src="stream.mp3" type="audio/mp3" style="width: 640px; height: 480px;">
	<noembed>
	Tekst dla przeglądarek nie obsługujących "embed".
	</noembed>
</embed>

W wyniku, po wykonaniu walidacji otrzymamy kilka błędów związanych z użyciem właśnie tego, nieprawidłowego tagu.

Osadźmy więc poprawnie…

Jeżeli chcemy kierować się zaleceniami specyfikacji to musimy skupić się jedynie na znacznikach object z zaaplikowanymi wewnątrz sparametryzowanymi tagami param (metoda nazwana Flash Satay). Od tego momentu embed przechodzi w niepamięć, bo tak naprawdę wszystko co dzięki niemu mogliśmy osiągnąć, będziemy mogli stworzyć także poprzez naszą nową formułę.

<!-- próba załadowania pliku MOV typu QuickTime -->
<object data="katalog/film.mov" type="video/quicktime" style="width: 640px; height: 480px;">
	<!-- jeżeli plik MOV nie będzie mógłbyć załadowany zostanie podjęta próba załadowania w jego miejsce grafiki o rozszerzeniu PNG -->
	<object data="katalog/alternatywa.png" type="image/png" style="width: 640px; height: 480px;">
 		<p>
  			Tekst wyświetlany w wypadku nie załadowania jakiegokolwiek z zasobów dwóch powyższych znaczników.
 		</p>
	</object>
</object>

Tak więc, aby wkomponować w naszą stronę obiekt Flash musimy określić co najmniej typ tego obiektu (type), plik źródłowy (data) i ostylować jego wymiary (style). Z podanej listy typów MIME dostrzegamy, że pożądanym przez nas jest application/x-shockwave-flash. Należy zwrócić uwagę na fakt, że nie korzystamy w ostatnim przypadku bezpośrednio z parametrów height oraz width, a idąc z duchem czasu wykorzystujemy po prostu możliwości wewnętrznego arkusza stylów.

<!-- próba załadowania pliku MPG -->
<object data="katalog/film.mpg" type="video/mpeg" style="width: 640px; height: 480px;">
	<param name="autoplay" value="true" />
	<param name="pluginspage" value="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" />
	<!-- jeżeli plik MPG nie będzie mógłbyć załadowany zostanie podjęta próba załadowania w jego miejsce filmu w postaci MOV -->
	<object data="katalog/film.mov" type="video/quicktime" style="width: 640px; height: 480px;" title="Filmik alternatywny!">
		<param name="autoplay" value="true" />
		<param name="pluginspage" value="http://quicktime.apple.com/" />
	 	<p>
  			Tekst wyświetlany w wypadku nie załadowania jakiegokolwiek z zasobów dwóch powyższych znaczników.
	 	</p>
	</object>
</object>

<!-- próba załadowania pliku MPG -->
<object data="katalog/film.mpg" type="video/mpeg" style="width: 640px; height: 480px;">
	<param name="autoplay" value="true">
	<param name="pluginspage" value="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/">
	<!-- jeżeli plik MPG nie będzie mógłbyć załadowany zostanie podjęta próba załadowania w jego miejsce filmu w postaci MOV -->
	<object data="katalog/film.mov" type="video/quicktime" style="width: 640px; height: 480px;" title="Filmik alternatywny!">
		<param name="autoplay" value="true">
		<param name="pluginspage" value="http://quicktime.apple.com/">
	 	<p>
  			Tekst wyświetlany w wypadku nie załadowania jakiegokolwiek z zasobów dwóch powyższych znaczników.
	 	</p>
	</object>
</object>

Aby mieć pewność, że każda nowoczesna przeglądarka będzie poprawnie egzekwować tą metodą powinniśmy użyć dodatkowo kilku nazw parametrów. W naszym przypadku będą to kolejno ścieżka wraz z nazwą pliku animacji Flash (movie), a także jakość (quality). Nie są to oczywiście wszystkie dostępne własności. Przede wszystkim wśród nich możemy wyróżnić:

• play przyjmujące wartość true (domyślne) / false określające, czy animacja ma być odtwarzana wraz z załadowaniem strony.
• loop przyjmujące także wartość true (domyślne) / false określające, czy animacja ma być wyświetlana ponownie w pętli po zakończeniu poprzedniego odtwarzania.
• bgcolor przyjmujące wartość #rrggbb i określające (szesnastkowo) kolor tła.
• menu przyjmujące wartości true (menu z dodatkowymi funkcjami) / false.
• quality przyjmujące wartości best (najlepsza jakość wraz z Anti-Aliasingiem dla wszystkich elementów), high (występuje Anti-Aliasing, ale wygładzanie jest tylko w przypadku statyczności elementów), autohigh (w przypadku spadku wydajności usuwa Anti-Aliasing w celu zachowania poziomu szybkości animacji), medium (podobnie jak w poprzednim przypadku, ale bez wygładzania), low (najsłabsza jakość bez A-A) i autolow (Anti-Aliasing włączany jest dopiero w przypadku kiedy pozwalają na to zasoby w takim stopniu, aby nie pojawił się znaczy spadek poziomu prędkości działania animacji).
• scale przyjmujące wartości exactfit (klip dopasowany jest do podanych wymiarów), noborder (dopasowuje proporcjonalnie skalując animację do obszaru) i showall (wyświetla w podanym obszarze bez zmian w proporcjach).
• allowscriptaccess nadaje prawa do wykonywania skryptów od szóstej wersji Flasha. Mianowicie: always zezwala na wykonywanie wszystkich skryptów, never nie zezwala, a samedomain pozwala tylko na te dostępne w obrębie poruszanej się domeny.

Ponieważ, jak już pewnie zauważyliście wewnątrz najbardziej zagnieżdżonego znacznika object można (lecz oczywiście nie trzeba!) umieścić po jego parametrach alternatywnie wyświetlany kod to w naszym przykładzie wyświetlimy w takim wypadku grafikę o takich samych rozmiarach.

<object type="application/x-shockwave-flash"
	data="skompilowany_flash.swf"
	style="width: 1024px; height: 768px;">
	<param name="movie"
		value="skompilowany_flash.swf" />
	<param name="quality"
		value="best" />
	<img src="zastepcza_grafika.png"
		style="width: 1024px; height: 768px;"
		alt="Brak pluginu Flash" />
</object>

Powyższy przykład będzie poprawny dla kodu XHTML. Dla czystego HTML-a należy formę zminimalizowaną parametrów oraz opcjonalnej grafiki ( />) zamienić na tradycyjną, bądź w ogóle tych znaczników nie zamykać.

Zapraszam do przejrzenia przykładu implementacji metody.

Rozwiązanie problemów z ładowaniem dużych plików

W wypadku klipów o sporej wadze powyższa metoda ma jeden mankament. Dopóki plik nie zostanie w całości załadowany animacja nie zostanie odtworzona.

Można temu zapobiec tworząc prosty loader, także korzystając z Flasha. Tworząc nowy dokument (rozmiary mogą być minimalne, np. 10x10px) wystarczy w jego pierwszej klatce dodać następujący kod ActionScript:
[as]var fileName = _root.path;
if ( -1 == fileName.indexOf(„%25″) && fileName != „” )
{
_root.loadMovie(fileName + „.swf”, 0);
}[/as]
Przy eksporcie do pliku wymagane jest, aby dokonywać go korzystając z ActionScript 1.0 (AS), a w opcji Local playback security: należy wybrać Access local files only. Archiwum z plikiem źródłowym i wynikowym znajduje się tutaj.

Dla nowszych AS, na przykład trójki powyższy przykład nie zadziała. Należy posłużyć się za to klasą Loader.
[as]var path:String = new String();
path = ( root.loaderInfo.parameters.path ? root.loaderInfo.parameters.path : „” );
if ( -1 == path.indexOf(„%25″) && path != „” )
{
var loader:Loader = new Loader();
loader.load(new URLRequest(path + „.swf”));
addChild(loader);
}[/as]

Na koniec zostaje jeszcze jedna zmiana do wykonania. W znaczniku object oraz w jego parametrach należy zmienić ścieżki do pliku na loader.swf?path=skompilowany_flash (bez rozszerzenia). Oczywiście w tym wypadku obydwa pliki muszą znajdować się w jednym i tym samym katalogu.

<object type="application/x-shockwave-flash"
	data="loader.swf?path=skompilowany_flash"
	style="width: 1024px; height: 768px;">
	<param name="movie"
		value="loader.swf?path=skompilowany_flash" />
	<param name="quality"
		value="best" />
	<img src="zastepcza_grafika.png"
		style="width: 1024px; height: 768px;"
		alt="Brak pluginu Flash" />
</object>

Zastępcze sposoby oparte na JavaScriptcie i komentarzach warunkowych…

Jeżeli Twoim audytorium mają być osoby korzystające z czytników ekranowych (JAWS) to cały mój wywód poszedł na marne, bo po prostu nie zadziała. Nie zostawię Was jednak na lodzie. Wystarczy skorzystać z jednego z poniższych rozwiązań.

Pierwsze, SWFObject 2.1 ogranicza się do pobrania pliku klasy, wprowadzenia opcjonalnych zmiennych i wywołania metody wraz z argumentami która przypisze wynik do elementu o odpowiednim ID. Niestety wymaga włączonej obsługi JavaScript w przeglądarce użytkownika. Pełnej dokumentacji można zasięgnąć tutaj.

<head>
[...]
<script type="text/javascript" src="swfobject.js"></script>
<!-- parametry swfobject.embedSWF: plik, ID_bloku, szerokosc, wysokosc, minimalna_wersja_flasha [, odnośnik_do_ekspresowej_instalacji, zmienne_flasha, parametry, atrybuty ]; -->
<script type="text/javascript">
	var flashvars = false;
	var attributes = {
		id: "flashContent"
	}
	var params = {
		menu: "false",
		quality: "medium"
	};
	swfobject.embedSWF("skompilowany_flash.swf", "zawartosc", "640", "480", "8.0.0.0", false, flashvars, params, attributes);
</script>
[...]
</head>
<body>
<div id="zawartosc">
	Alternatywny tekst.
</div>
</body>

Na podobnej zasadzie działa Unobtrusive Flash Objects. Została ona jednak oficjalnie uznana za przestarzałą na rzecz wcześniej opisanego rozwiązania.

Drugi sposób zagnieżdżania oparty jest na ukrytych komentarzach warunkowych. Nested Objects, bo o nim mowa pozwala na określenie jakie przeglądarki nie powinny korzystać z kluczowego w tym wpisie sposobu. W przykładzie przeglądarki IE nie będą mogły używać rozwiązania opartego na Flash Satay.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
	style="width: 1024px; height: 768px;">
	<param name="movie" value="skompilowany_flash.swf" />
	<param name="quality" value="high" />
	<!-- poczatek: kod z tego bloku nie zostanie wykonany w przegladarkach IE -->
	<!--[if !IE]><!-->
	<object data="skompilowany_flash.swf"
		type="application/x-shockwave-flash"
		style="width: 1024px; height: 768px;">
	<param name="quality" value="high" />
	<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
	<!--<![endif]-->
	<!-- koniec -->
	<img src="zastepcza_grafika.png"
		style="width: 1024px; height: 768px;"
		alt="Brak pluginu Flash" />
	<!-- poczatek: kod z tego bloku nie zostanie wykonany w przegladarkach IE -->
	<!--[if !IE]><!-->
    	</object>
    	<!--<![endif]-->
    	<!-- koniec -->
</object>

Oczywiście odpowiednio modyfikując ujęte w kodzie komentarze warunkowe możemy manipulować tym która przeglądarka, które rozwiązanie będzie mogła stosować.

Podsumowując…

Na pewno buszując po otchłaniach Internetu spotkalibyście jeszcze kilka innych, mniej lub bardziej profesjonalnych rozwiązań. Pomimo, że te które tym razem zaprezentowałem działały bez większego zająknięcia na Operze 9.62, Firefoksie 3.0.4, Safari 3.2, a nawet na diabelnie niepokornym Internet Explorerze 7 to chociażby dla pogłębienia swojej wiedzy warto się zainteresować pozostałymi metodami.

Oczywiście wykorzystanie object i param nie musi tylko i wyłącznie służyć do obsługi Flasha. Operowanie na filmach, muzyce, czy grafice to tylko przykłady możliwości tych znaczników. Wystarczy poeksperymentować i zapamiętać jedną rzecz… embed od dziś odchodzi w niepamięć…