0 Kč s DPH

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.

Tým inPage
info(zav)inpage.cz

Přidat komentář

Přehled komentářů

  • RE: Restart

    5. 8. 2013 10:35:54 | Vladimír Souš

    Prosím napiššte mi, klidně na soukromý email, o jaou stránku se přesně jedná, abych Vám mohl lépe pomoci. Takto se opravdu nedá odpovědět. Děkuji za pochopení

    Odpovědět

  • Restart

    4. 8. 2013 20:15:04 | Levan

    Dobrý den, potřeboval bych poradit. Vytvořil jsem si banner dle rozměru šablony SIRIUS, banner mi ale při přechodu na jinou stránku webu problikává společně s ikonkami sociálních sítí. Je možné, že to způsobuje flash banner svým neustálým restartem? Pokud ano, existuje nějaký příkaz pro zamezení restartu banneru při přechodu na jinou stránku děkuji.

    Odpovědět

  • Blikání

    12. 3. 2013 1:17:21 | Levan

    Dobrý den,

    Tak jsem zkusil udělat nový Banner s novýma obrazkama na míru 598x180px podle optima šablony, ale bohužel flash banner při přechodu na jinou stranku webu stále bliká. Nevím čím to může být

    Odpovědět

  • RE: blikání

    11. 3. 2013 10:14:35 | Hana Medkova

    Dobrý den, zcela jistě to bude tím, že flash soubor s motivem je příliš velký. Vypadá to jako zkomprimované velké obrázky do malého rozměru, což vzniklo při výrobě toho flash motivu. Doporučujeme vytvořit flash banner z obrázků, které budou na optimální velikost předem zmenšeny. Tj. Váš motiv má velikost 598x184px, tzn. orig. obrázky musí být v této velikosti - aby nedošlo k deformaci či komprimaci obrázku ve flash motivu.

    Odpovědět

  • Blikání

    8. 3. 2013 23:01:54 | Levan

    Dobry den,

    Děkuji za radu pomohla za flash bannerem už není oranžová barva, ale banner stále bliká při přechodu na jinou stránku na webu.

    Odpovědět

  • Flash motiv

    8. 3. 2013 10:54:04 | Hana Medkova

    Dobrý den, to problikávání způsobuje nastavení barvy pozadí u motivu - dá se to zcela odstranit a to tak, že si do sekce VZHLED - VLASTNÍ CSS STYL přidáte následující CSS definici, která ruší barvu podkladu motivu:

    #theme {
    background-color: transparent;
    }

    a nezapomente ten styl nastavit a uložit jako AKTIVNÍ, aby se změna na webu projevila.

    Odpovědět

  • Flash motiv

    7. 3. 2013 16:00:36 | Levan

    Dobrý den,

    chtěl bych se zeptat je možné nějak zamezit problikávání flash banneru pokaždé když přejdu na jinou stránku?

    Děkuji www.richcars.cz

    Odpovědět

  • RE: video

    20. 6. 2011 10:20:10 | Hana Medková

    Dobrý den paní Hadvigová, formáty .avi nebo .mp4 v inPage přehrát nelze. Máte tedy dvě možnosti jak toto řešit, buďto překonvertujete video do formátu .swf (flash formát) nebo nahrajte video na youtube a tam si pak můžete zkopírovat HTML kód videa, který poté jednoduše vložíte do zdrojového kodu stránek.

    Odpovědět

  • video

    15. 6. 2011 13:04:33 | Elena Hadvigová

    Je možné vložiť priamo na stránku video vo formáte avi, či mp4? Ako? Zatiaľ sa mi ho podarilo dostať len do súborov na stiahnutie, alebo vložením odkazu na facebook :o)
    Ďakujem

    Odpovědět