Vložení efektu z Flashe do HTML

11. ledna 2002

•

Na jednoduchém příkladu vám ukáži, jak můžete pomocí Flashe zakomponovat do webu zimní náladu v podobě padajících vloček.

Pro přípravu scény jsem zvolil rozměr 400 x 300 px a přehrávací rychlost jsem nastavil na 30 fr/s. Barva pozadí a ostatní hodnoty mohou zůstat nezměněny, neboť v konečné fázi dojde k exportu ukázky bez pozadí. Jelikož budete pracovat s bílou barvou sněhu, zvolil jsem modré pozadí.

frame

Připravte si jednotlivé sněhové vločky. K dispozici máte dvě možnosti. Buď zvolíte přímo textový font nebo si můžete vločku nakreslit. Pomocí kláves Ctrl+F8 si vytvořte nový Movie clip „snih“. Nastavte si bílou barvu písma, velikost 36 a vyberte font ZapfDingbats BT. Kurzor umístěte na plochu a stiskněte klávesu D. Na ploše by se vám měla objevit sněhová vločka.

Výběr fontu

Vzniklou vločku si pomocí panelu Align (Ctrl+K) vycentrujte na střed plochy (Stage).

Zarovnání

Vraťte se do hlavní plochy. Otevřete knihovnu (Ctrl+L) a MC „snih“ přemístěte mimo hlavní plochu. V panelu Instance pojmenujte tento MC „vlocka“ a stiskněte tlačítko pro editaci Action scriptu.

Instance

Do políčka vložte následující akce:

onClipEvent (enterFrame) {
setProperty (this, _y, getProperty (this,_y)+2);
if (getProperty(this,_y)>=300) {
setProperty (this, _x, random(400));
setProperty (this, _y, 0);
}
}

Výše uvedené akce testují, zda-li vločka opustila hlavní scénu. Pokud ano, je jí zadána nová x (náhodná) a y (nulová) souřadnice pro tuto instanci.

Pomocí tlačítka Insert Layer vložte novou vrstvu, do které umístíte akce. V prvním políčku Layeru 2 si pomocí poklepání otevřete panel Actions a vložte sem následující akce:

for (j=1; j<25; j++) {
duplicateMovieClip („_root.vlocka“, „vlocka“+j, j);
setProperty („vlocka“+j, _x, 400*Math.random());
setProperty („vlocka“+j, _y, random(300));
}
stop ();

Tento script vám náhodně rozmístí 25 vloček po ploše a nastaví jejich x a y souřadnice. Doporučuji počet vloček příliš nepřehánět, docházelo by pak ke zpomalování animace. Pro hloubavé se zde nabízí další prostor, vločky nemusí mít jenom svislý přímý pohyb. Nakonec si můžete celou ukázku přehrát pomocí Ctrl+Enter.

Vložení na webovou stránku

Otevřete panel (Ctrl+Shift+F12), ve kterém si připravíte publikování jednotlivých částí. Klepněte na záložku HTML a ve Window Mode si vyberte Transparent Windowless.

Publikování souboru

Tento příkaz zajistí export vloček bez pozadí. Jednotlivé prvky si můžete vypublikovat stlačením patřičné klávesy.

Pomocí např. jednoduchého zápisníku (Notepadu) editujte vypublikovaný HTML soubor. Proveďte v něm následující úpravy:

< HTML >
< HEAD >
< TITLE >snih< /TITLE >
< /HEAD >
< BODY >
< !-- URL's used in the movie-- > // tyto řádky můžete odstranit
< !-- text used in the movie-- > // Flash je přidává zbytečně…
< div id="flash" style="position:absolute; left:3px; top:0px; width:400; height:300; z-index:99" >
< OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=5,0,0,0″ WIDTH=400 HEIGHT=300 >
< PARAM NAME=movie VALUE="snih.swf" >
< PARAM NAME=quality VALUE=high >
< PARAM NAME=wmode VALUE=transparent >
< PARAM NAME=bgcolor VALUE=#6600CC >
< EMBED src="snih.swf" quality=high wmode=transparent bgcolor=#6600CC WIDTH=400 HEIGHT=300 TYPE="application/x-shockwave-flash"
PLUGINSPAGE=“http://www.macromedia.com/shockwave/download/
index.cgi?P1_Prod_Version=ShockwaveFlash“> < /EMBED >
< /OBJECT >
< /div>
//… a zde už je váš další zdrojový HTML kód …
< /BODY>
< /HTML>

Vložený HTML příkaz DIV je párovou značkou, proto nezapomeňte za uzavírající příkaz OBJECT vložit uzavírající párovou značku DIV. Další nastavení, které musíte provést je velikost okna (výška, šířka) a jeho pozice.

Soubor uložte, uzavřete a spuštěním HTML souboru si můžete vyzkoušet dnešní ukázku. Jenom nezapomeňte, že HTML a SWF soubor se musí nacházet ve stejném adresáři. Zdrojové soubory k vlastnímu prostudování si můžete stáhnout zde.