Ondřej Brichta 11.4.2005
Tento díl nás provede možnostmi exportu našich animací. Ukážeme si jak se vkládá flashová animace do HTML kódu webové stránky a nezapomeneme na menu z předchozího dílu, které vylepšíme, abychom jej mohli použít pro webovou stránku.
Po dokončení flashové animace jí určitě budeme chtít začlenit do HTML stránky. Pro testování použijeme soubor z minulého dílu. Stáhnout si jej můžete zde.
Export do HTML provedeme volbou v hlavním menu: File - Publish Settings.
Obr. 1
Otevře se okno, ve kterém lze nastavit typ výstupního formátu.
Obr. 2
V záložce „Formats“ máme možnost zaškrtnutí požadovaného typu souboru. Všimneme si, že podle zaškrtnutého výstupu se postupně objevují další záložky, ve kterých jsou možnosti nastavení parametrů příslušného formátu. My chceme publikovat naše menu v HTML stránce, ve které se zobrazí SWF soubor. Proto v záložce formátů zaškrtneme položku „Flash“ a „HTML“.
Obr. 3
Klikneme na záložku „Flash“. Zde můžeme nastavit tyto parametry:
| Version | Určení verze SWF souboru. |
| Load order | Určení pořadí načítání SWF souboru. Pokud máme v dokumentu více vrstev, volba „Top Down“ znamená načítání shora dolů, zvolením „Bottom up“ se budou vrstvy načítat zdola nahoru. |
| ActioScript version | Verze ActionScriptu |
| Generate size report | Po zaškrtnutí této volby se společně s vygenerovaným SWF souborem vytvoří i textový soubor s informacemi o vytvořeném dokumentu. |
| Protect from import | Funkce zajišťující určitý stupeň ochrany vytvořených SWF souborů pomocí hesla. Existuje mnoho programů, umožňujících nahlédnout do vygenerovaného SWF souboru a zobrazit prakticky všechno. Heslo těmto pokusům většinou zabrání. Existují ale i programy, kde |
| Omit trace actions | Znemožnění funkce trace ( používá se pro výpis proměnných v Output okně). |
| Debugging permitted | Možnost ladění scriptu. Lze nastavit heslo, umožňující ladění. |
| Compress movie | Pokud je v dokumentu velké množství textu nebo ActionScriptu, pomocí této volby lze zmenšit výslednou velikost SWF souboru. |
| Password | Pole pro případné heslo. |
| JPEG quality | Nastavení komprese použitých rastrových obrázků. Větší stupeň komprese umožní zmenšení výsledného souboru za cenu horší kvality obrázků. |
| Audio stream | Nastavení typu a stupně komprese použitých streamovaných zvuků. |
| Audio event | Nastavení typu a stupně komprese použitých zvuků. |
| Override sound settings | Zvolením této položky nastavíme všem použitým zvukům dokumentu stejné vlastnosti určené v Audio stream a Audio event. |
Pro zobrazení flashové animace na webové stránce musíme vložit SWF soubor jako objekt do HTML kódu příslušné stránky. Následujícími parametry lze upřesnit zobrazení SWF souboru v HTML dokumentu:
| Template | Způsoby zobrazení flashového souboru v HTML stránce. Tlačítko „Info...“ obsahuje stručný popis vybraného typu. Nejčastěji použijeme „Flash Only“. |
| Detect Flash Version | Tato užitečná volba nám umožňuje provést detekci správného flashového pluginu prohlížeče. Kliknutím na tlačítko „Settings...“ , zobrazíme podrobnější nastavení (obr. 4). Pole „Detection file“ obsahuje název souboru, který provádí detekci pluginu. Pokud je |
| Dimensions | Nastavení rozměru zobrazovaného SWF souboru. „Match Movie“ zobrazí animaci v původní velikosti. Volby „Pixels“ a „Percent“ změní velikost výsledné animace podle hodnot, uvedených v poli „Width“ a „Height“. |
| Playback | Pokud zaškrtneme „Paused At Start“, bude animace na začátku zastavena a přehrávání začne až po provedení akce AS, která zajistí přehrání animace. Druhou možností začátku přehrávání animace je zvolení položky „Play“ v kontextovém menu animace. Při zaškrtnu |
| Quality | Nastavení kvality přehrávané animace. |
| Window Mode | Zde je dobré mít zvolenou první možnost „Window“. Druhé dvě možnosti zobrazují animaci s průhledným pozadím. Tyto volby mohou být lákavé, ale raději je nepoužívejte, protože zbytečně zatěžují procesor. |
| HTML alignment | Zarovnání flashové animace v HTML stránce. |
| Scale | Určení chování flashové animace při změně velikosti HTML stránky. Při zvolení „No Border“ se animace zmenšuje a zvětšuje při zachování původního poměru stran. „Exact Fit“ dovluje flashové animaci měnit velikost bez ohledu na původní poměr stran a volba „N |
| Flash Alignment | Nastavení zarovnání animace při změně rozměrů ve volbě „Dimensions“. |
Obr. 4
Možností pro experimentování s nastavením je mnoho, my se pro naše účely spokojíme s defaultními hodnotami. Pro vytvoření HTML a SWF souboru, klikneme ve spodní části okna na tlačítko „Publish“. Příslušné soubory se vytvořily ve stejném adresáři, jako máme zdrojový fla soubor.
Opustíme na chvíli prostředí Flashe a podíváme se na začlenění flashové animace v HTML. Podívejme se do HTML kódu stránky. Část, týkající se SWF souboru najdeme mezi tagy
<object ...
...
</object>
Nastavení exportu ve Flashi se projevilo v hodnotách příslušných parametrů umístěných mezi těmito tagy. Pokud chceme umístit animaci na určité místo HTML stránky, stačí zkopírovat příslušnou část kódu mezi tagy <object> (včetně těchto tagů) na požadovanou pozici.
Vraťme se ale k našemu menu. Jak jsem v minulém díle slíbil, provedeme pár drobných úprav. První se hned nabízí. Asi jste si všimli, že se kurzor myši změní na ruku jenom při najetí na samotný text. My bychom ale chtěli, aby byla aktivní oblast tlačítka větší. Otevřeme si knihovnu symbolů a dvojklikem na objekt „tlacitko1“ jej zobrazíme. Pro nastavení aktivní oblasti tlačítka slouží snímek časové osy tlačítka, označený „Hit“. Klikneme pravým tlačítkem myši na tento snímek a zvolíme „Insert Keyframe“.
Obr. 5
Nyní zvolíme nástroj pro kreslení čtyřúhelníků „Rectangle Tool“ a přes text tlačítka nakreslíme obdélník. Jakýkoliv objekt, umístěný ve snímku „Hit“, určuje aktivní oblast příslušného tlačítka, proto i tento obdélník bude tvořit oblast, kde bude myš reagovat na objekt tlačítka. Stejný postup provedeme i u druhého tlačítka.
Po upravení druhého tlačítka se dvojklikem v knihovně objektů přesuneme na objekt „menu“. Zde zvolíme snímek 7, časové osy a pomocí nástroje „Selection tool“ klikneme na první tlačítko. Zjistíme, že na spodním panelu akcí se změnil nápis na „Actions - Button“.
Obr. 6
Máme vybrán objekt tlačítka a můžeme mu tak přiřadit akci pomocí AS. Nabízí se odkaz na na HTML stránku že? V panelu akcí napíšeme tento příkaz:
on (press) {
getURL("/default.asp", _blank);
}
Stejně postupujeme i u druhého tlačítka.
Poslední věc, kterou si dnes objasníme, je použitý AS. Překlad kódu použitého pro tlačítko by zněl asi následovně: „Při stisknutí (press) tohoto tlačítka, se provede příkaz, který říká, že se má načíst daná URL a otevřít v novém okně prohlížeče (_blank).
Pokud se přesuneme na hlavní scénu, klikneme na objekt menu a otevřeme panel akcí, lze přečíst uvedený kód takto: „Při každém stisknutí (mouseDown) tlačítka myši, se testuje podmínka(if). Tato podmínka je splněna, když je kurzor myši v kontaktu s objektem menu a zároveň je přehrávání objektu menu na snímku číslo 1. Je-li podmínka splněna (myš je na objektu menu a provedli jsme kliknutí), začneme přehrávat animaci v objektu menu od snímku číslo 2.„
Druhá část kódu říká následující: „Při každém pohybu (mouseMove) myši, se testuje podmínka(if). Tato podmínka je splněna, když kurzor myši není v kontaktu s objektem menu a zároveň je přehrávání objektu menu na snímku číslo 7. Je-li splněna (myš opustila objekt menu), začneme přehrávat animaci v objektu menu od snímku číslo 8.„
Na podrobnější výklad a pravidla psaní AS máme zatím ještě dost času. Nejdříve se musíme dobře naučit základy v kreslení a jednoduchých animacích. Poslední dvě lekce je nutné brát jako praktickou ukázku již získaných znalostí, ke kterým jsme museli přidat několik, zatím nepříjemných, řádků AS.
Budete-li mít jakékoliv problémy s prostředím a programováním ve Flashi, nebojte se na cokoliv zeptat, buď přímo zde, nebo na diskuzi, jejíž adresu najdete v minulých příspěvcích a nebo přímo na můj mail.
V příštím díle se můžete těšit na další animační postup, který je velice zajímavý a efektní.
Ke stažení: zdrojový soubor ukázky
