Jak správně publikovat Flash pro HTML

17. 12. 2010

Následující tip je pro tvůrce animací Flash, jak se vyvarovat možnému problému při překrývání okolních prvků HTML a animace s pomocí z-indexů.

Pokud se vám stalo, že jste si vytvořili animaci ve Flash a po následném vložení do stránky vám překryla část HTML kódu. Případně se vám nepodařilo vloženou animaci Flash překrývat s okolními HTML prvky s pomocí z-indexů.

Tento problém je s největší pravděpodobností způsoben tím, že jste při publikaci animace Flash ponechali publikování HTML v přednastaveném stavu.

Nastavení publikování

Aby se Flash chovala při vložení do HTML korektně a mohli jste ji překrývat či polohovat ve vrstvách přes z-index, je důležité nastavit toto chování v Nastavení publikování. Následující postup je doslovný pro českou verzi programu Adobe Flash CS3, v jiné verzi či programu by měl být postup stejný nebo podobný.

Flash vám umožňuje nastavit tři možnosti pro Režim okna:

• Okno (Window) - přehraje animaci Přehrávače Flash ve vlastním obdélníkovém okně na webové stránce pro rychlejší animaci.
• Neprůhledné bez okna (Opaque Windowless) - přesune prvky za animaci Flash
  (například s dynamickým HTML), aby bylo zabráněno jejich zobrazení přes animaci.
• Průhledné bez okna (Transparent Windowless) - zobrazí pozadí HTML stránky,
  do které je vložena animace, přes všechny průhledné oblasti animace, ale může animaci zpomalit.

Režimy Neprůhledné bez okna a Průhledné bez okna respektují okolní prvky HTML stránky, zejména jejich z-indexy. Režim Window nikoliv.

Pro překrývání HTML zvolte režim okna Neprůhledné bez okna. Klikněte v menu na Soubor > Nastavení publikování (případně použijte klávesovou zkratku Ctrl+Shift+F12) a následně zvolte záložku HTML. Zde si zvolte Režim okna na Neprůhledné bez okna.

Obr. Flash - Nastavení publikování (Ctrl+Shift+F12)

Nyní když budete Flash publikovat (F12) se vám vygeneruje HTML kód, ve kterém je zaneseno výše zvolené nastavení. Pro řežim Neprůhledné bez okna je to parametr <param name="wmode" value="opaque" /> a kód má přibližnou následující podobu:

 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="400" id="Bez názvu-1" align="middle">
 <param name="allowScriptAccess" value="sameDomain" />
 <param name="allowFullScreen" value="false" />
 <param name="movie" value="Bez názvu-1.swf" />
 <param name="quality" value="high" />
 <param name="wmode" value="opaque" />
 <param name="bgcolor" value="#ffffff" />

 <embed src="Bez názvu-1.swf" quality="high" wmode="opaque" bgcolor="#ffffff" width="550" height="400" name="Bez názvu-1" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
 </object> 

Pokud Flash vkládáte do kódu přes náš WYSIWYG editor, je nutné upravit HTML zdroj a ručně dopsat parametr wmode/opaque dle příkladu kódu výše. Takto si můžete dopsat samozřejmě i jiné parametry, pokud je požadujete.

Takto publikovaná Flash animace již respektuje okolní HTML prvky a jejich z-indexy.