Ondřej Brichta 13.6.2005
Protože už známe několik zajímavých postupů programování ve Flashi, připravíme si jednoduchou prezentační stránku, kterou budeme v dalších dílech postupně vylepšovat již známými postupy.
Nebudeme zde rozvíjet dlouhé debaty tom, jestli je lepší používat místo Flashe čisté HTML stránky, berme tedy jako výchozí předpoklad, že jsme se rozhodli udělat web kompletně ve Flashi.
Co nám to přinese? Máme zde jedinečnou možnost, jak zajímavým způsobem upoutat návštěvníka, připravit mu více akce, díky které se bude na naše stránky vracet. To že pohyb upoutá mnohem více než statika, je asi jasné. Pro představu, jak můžou vypadat zdařilé flashové weby, uvádím několik odkazů:
Abychom ale zpřístupnili naše stránky i těm, kteří mají z jakýchsi důvodů zakázané flashové animace, budeme muset vytvořit i jednoduchou čistou HTML verzi, na kterou návštěvníka přesměrujeme, v případě, že mu nelze flashové animace nabídnout.
Dnes si připravíme prostředí, do kterého v příštím díle vložíme nejrůznější efekty. Kdo nebude chtít čekat do příštího dílu, pustí se určitě sám do experimentování.
Dejme tomu, že chceme vytvořit klasickou stránku, která má v horní části menu a ve spodní části se nachází oblast pro zobrazování zvolených informací. Struktura bude jednoduchá, v horní části bude MC pojmenovaný „menu“, ve kterém budou vložena tlačítka. Pomocí tlačítek se budeme odkazovat na jednotlivé snímky v MC „obsah“, který bude ve spodní části pod menu.
Otevřeme si nový dokument a ještě než začneme vytvářet klipy, otevřeme panel vlastností „Properties“ a nastavíme v něm hodnoty určující šířku na 800px, výšku na 550px a barvu pozadí zvolíme tmavě šedou. Sice jsou poslední dobou v oblibě spíše pastelové barvy, ale my uděláme web na tmavém pozadí.
Obr. 1
Zvolíme nástroj pro kreslení čtyřúhelníků „Rectangle Tool“ a na paletce „Colors“ pod kreslicími nástroji, klikneme nejdříve na symbol tužky a poté na bílý přeškrtnutý čtverec. Tímto jsme určili, že obdélník bude bez okraje.
Obr. 2
Na scéně nakreslíme obdélník, zvolíme nástroj „Selection Tool“ a kliknutím na obdélník jej vybereme. Otevřeme panel vlastností, v levé dolní části odemkneme symbol zámku a změníme rozměr obdélníku na 800px šířka a 90px výška.
Obr. 3
Nyní otevřeme panel pro zarovnání objektů „Align“ a obdélník zarovnáme do horního levého rohu scény.
Obr. 4
Při stále vybraném objektu obdélníka otevřeme panel barev „Color Mixer“. Klikneme na symbol, kyblíku a jako typ barevného přechodu zvolíme „Linear“. Levou barvu nastavíme na R:23,G:49,B:72 a pravou barvu na R:50,G:100,B:50. Zvolíme nástroj pro změnu vlastností výplně „Fill Trasform Tool“
Obr. 5
a pomocí něho otočíme výplň tak, že tmavší část je nahoře, světlejší je dole.
Obr. 6
Klikneme pravým tlačítkem myši na objekt obdélníku a zvolíme „Convert to Symbol“. Nový MC pojmenujeme „menu“.
Dvojklikem na MC „menu“ klip otevřeme. Opět zvolíme obdélník a pomocí CTRL+C jej zkopírujeme do schránky. Na ose vytvoříme další vrstvu, klikneme na první snímek nové vrstvy a pomocí CTRL+SHIFT+V vložíme na stejné místo zkopírovaný obdélník.
Na paletce „Colors“ pod panelem nástrojů kreslení zvolíme barvu výplně na tmavě šedou.
Obr. 7
Pomocí šipky na klávesnici posuneme nový obdélník lehce dolů - stačí jedno stisknutí klávesy. V hlavním menu zvolíme „Modify - Shape - Soften Fill Edges“. Tento příkaz umožní vytvořit přechod krajů objektu do ztracena. Zobrazené okno nastavíme takto:
Obr. 8
a potvrdíme. Vytvořili jsme tak plynulý přechod, který bude symbolizovat stín pozadí horního menu. Aby ale stín byl opravdu stínem, tažením přesuneme vrstvu se stínem pod vrstvu původního pozadí. Vrstvy pojmenujeme a uzamkneme (kliknutím na tečku pod symbolem zámku) proti další editaci.
Obr. 9
V MC „menu“ vytvoříme další vrstvu, do které budeme vkládat tlačítka. Klikneme na první snímek nové vrstvy a zvolíme nástroj pro psaní textu „Text Tool“.
Pomocí něho vytvoříme textové pole, do kterého napíšeme text „úvod“. Otevřeme panel vlastností, ve kterém nastavíme následující hodnoty textového pole: jako typ určíme „Static“, font zvolíme „Verdana“ tučný , velikost nastavíme na 16 a barvu na bílou.
Obr. 10
klikneme pravým tlačítkem myši na textové pole a zvolíme „Convert to Symbol“. Vytvoříme z pole objekt tlačítka.
Obr. 11
Stejným způsobem ještě vytvoříme několik dalších tlačítek, kolik, to ponechám na vás. Já jsem zvolil ještě dvě další tlačítka s texty „Volba1“ a „Volba2“.
Vrátíme se na hlavní scénu, pojmenujeme vrstvu s menu a uzamkneme ji. Vytvoříme si další vrstvu, ve které bude umístěn MC obsahující pozadí pro texty.
Opět zopakuje postup z kreslení obdélníku k menu, s tím rozdílem, že bude tentokrát beze stínu a barvy nastavíme takto: Levou barvu nastavíme na R:193,G:205,B:219 a pravou barvu na R:105,G:136,B:167. Šířku nastavíme na 800px a výšku tak, aby lehce přesahovala horní menu. Obdélník zarovnáme k levému dolnímu rohu a celou vrstvu přesuneme pod vrstvu s menu.
Převedeme obdélník na MC a nazveme jej „pozadi“ (kliknutím pravého tlačítka myši na objekt a zvolením „Convert to Symbol“). Opět pojmenujeme vrstvu, ve které je pozadí umístěno a uzamkneme ji.
Nyní vytvoříme další vrstvu, ve které budeme mít MC pro zobrazování textu. Klikneme na první snímek nové vrstvy a pomocí nástroje „Text Tool“ vytvoříme textové pole. Do pole vložíme nějaký úvodní text. Velikost textu nastavíme na 15, font Arial a barvu nastavíme černou.
Klikneme pravým tlačítkem na text a zvolíme „Convert to Symbol“. Z pole uděláme MC, který pojmenujeme „obsah“. Nezapomeneme pojmenovat instanci tohoto objektu, otevřeme tedy panel vlastností „Properties“ a v poli „Instance Name“ pojmenujeme instanci „obsah“.
Obr. 12
Dvojklikem na objekt „obsah“ jej otevřeme. Tento objekt nám bude sloužit pro zobrazování textů, podle toho, co zvolíme v horním menu. Na každý snímek tohoto objektu proto umístíme jiný text, který bude reprezentovat jednotlivé volby horního menu.
Pravým tlačítkem klikneme na druhý snímek časové osy objektu a zvolíme „Insert Keyframe“. Dvojklikem na textové pole jej otevřeme a napíšeme text, který se zobrazí při druhé volbě horního menu. Stejně postupujeme u třetího snímku osy.
Pokud bychom nyní otestovali celou animaci, budou se nám texty neustále měnit, protože v MC „obsah“ není na snímcích žádná stopka. Proto do každého snímku v MC „obsah“ vložíme následující příkaz: stop();
Obr. 13
Ale ještě nemáme provázané horní menu s objektem obsahu. Otevřeme si tedy objekt „menu“ a k tlačítkům přiřadíme následující akci:
on (release) {
this._parent.obsah.gotoAndStop(1);
}
který říká, že při uvolnění tlačítka myši, kterou jsme klikli na toto tlačítko dojde k tomu, že se v MC „obsah“ přesuneme na snímek číslo 1. Další tlačítka budou mít číslo jiné, podle toho, na kterém snímku MC „obsah“ je požadovaný text.
Poslední jednoduchá úprava se týká tlačítek. Když si otevřeme jednotlivá tlačítka, zvolíme 4. snímek osy(HIT), klikneme pravým tlačítkem myši na tento snímek a zvolíme „Insert Keyframe“. V tomto snímku překreslíme text obdélníkem. Tímto jsme určili oblast, na které je tlačítko aktivní, zabránili jsme tak tomu, že tlačítko reaguje jen na textu a někdy je pak složité se do tlačítka vůbec strefit.
Připravili jsme si prostředí, které budeme v dalších dílech vylepšovat. Dnes jsme moc akce nevytvořili, ale bylo nutné si vytvořit základ, který už budeme jen obohacovat.
Zdrojový soubor ukázky ke stažení zde, výsledek si můžete prohlédnout zde.
