Daniel Walendowski - Moje wirtualne podwórko

Animacja Flash i Lightbox

Bardzo częstym problemem jest użycie narzędzia “Lightbox” do wyświetlania zdjęć na stronie www w połączeniu z animacjami flash. Działanie Lightbox’a po kliknięciu na miniaturkę zdjęcia powoduje przykrycie strony półprzezroczystą czarną warstwą i dopiero na tym tle pokazywane jest powiększenie zdjęcia. W typowych stronach nie zawierających animacji flash, wszystko przebiega bezproblemowo, problem pojawia się dopiero gdy np. na stronie wyświetlimy obiekt flash. W tym przypadku, gdy klikniemy na miniaturkę zdjęcia, lightbox przykrywa półprzezroczystą czarną warstwą wszystkie elementy za wyjątkiem obiektów flash.

Na zdjęciu powyżej po kliknięciu w miniaturkę zdjęcia widzimy jak warstwa przykryła stronę za wyjątkiem animacji stanowiącej element graficzny strony. W tym przypadku zdjęcie, schowało sie za obiektem flash i uniemożliwia obejrzenie powiększonego obrazka.

Rozwiązanie tego problemu jest dość proste, wystarczy ustawić przezroczystość obiektu flash w parametrach tagu object (dla przeglądarki IE) i embed (dla przeglądarki FF i Opera), dodajemy dodatkowy parametr wmode=”transparent”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<object
	classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
	id="top" width="736" height="198"><param name="movie" value="templates/img/top.swf">
	<param name="bgcolor" value="#FFFFFF">
	<param name="quality" value="high">
	<param name="allowscriptaccess" value="samedomain">
	<param name="wmode" value="transparent" />
	<embed
		type="application/x-shockwave-flash"
		pluginspage="http://www.macromedia.com/go/getflashplayer"
		width="736" height="198"
		name="top" src="templates/img/top.swf"
		bgcolor="#FFFFFF" quality="high"
		swLiveConnect="true" allowScriptAccess="samedomain"
		wmode="transparent" >
	</embed>
</object>

Po dodaniu parametru wmode lightbox przykrywa już całą stronę półprzezroczystą czarną warstwą łącznie z elementami flash.

Musimy jeszcze pamiętać, że po dodaniu parametru wmode=”transparent” ustawiliśmy przeźroczystość objektu flash i jeżeli tło za tym obiektem jest innego koloru niż tło w animacji flash, to będzie nam przebijać, więc trzeba albo w animacji dodać dodatkową warstwę lub po prostu zmienić kolor tła za obiektem.