Ondřej Brichta 4.4.2005
V dnešním díle využijeme postupy z předešlých dílů, seznámíme se s objektem tlačítka a porozumíme základním příkazům Action Scriptu, abychom mohli vytvořit jednoduché rozbalovací menu.
Nejdříve si ujasníme, jak bude menu vypadat. Řekněme si, že například budeme chtít mít zobrazený obdélník, který se po kliknutí myší roztáhne směrem dolů a objeví se v něm několik položek menu. Pokud myší opustíme toto menu, chceme aby se opět zmenšilo na původní velikost.
Na první pohled se může postup zdát složitý, ale opak je pravdou. Prakticky se jedná pouze o jeden MC, který bude tvořit pozadí menu, několik tlačítek, zobrazených v menu, a samotný MC menu.
Postup bude následující. Nakreslíme si menší obdélník, představující nerozbalené menu, a uděláme z něj MC. Ten vložíme do MC, představujícího naše menu. Zde vytvoříme animaci roztahování a zmenšování obdélníku, přičemž ve snímku s maximálním rozbalením zobrazíme položky menu. Takto animované menu vložíme na hlavní scénu, přidáme několik základních příkazů pomocí Action Scriptu (AS) a máme hotovo. Komu se to zdá jednoduché, může už klidně začít, my ostatní se pomocí následujícího návodu pokusíme popsané menu vytvořit společně.
Otevřeme nový dokument. Zvolíme nástroj „Rectangle Tool“. Než nakreslíme obdélník, podíváme se na panel „Colors“, který se nachází pod panelem nástrojů. Zde můžeme určit barvu obrysu kresleného objektu, barvu výplně a nebo lze určitou část zakázat. My budeme chtít nakreslit obdélník bez obrysu. Vybereme „Stroke Color“ (obr. 1) a v dolní části klikneme na
Obr. 1
symbol červeně přeškrtnutého čtverce „No Color“ (obr. 2). Tím jsme určili, že objekt nebude mít nakreslený obrys. Pak už jenom vybereme nástroj pro určení barvy výplně „Fill Color“ (obr. 3), zvolíme barvu a nakreslíme na ploše obdélník.
Obr. 2
Obr. 3
Nástrojem „Selection Tool“ obdélník vybereme. V horním menu volbou: „Window - Design Panels - Info“ zobrazíme panel, poskytující základní informace o umístění a velikosti právě vybraném objektu. Všimneme si spodní části tohoto panelu. Zde se v levém sloupci objevuje hodnota barvy (R,G,B) a průhlednost (A) objektu nad kterým se nachází kurzor. V pravém sloupci se zobrazují souřadnice kurzoru.
My se zaměříme na pole udávající šířku „W:“ a výšku „H:“ objektu . Zde změníme hodnotu šířky na 150 a výšky na 20 (obr. 4).
Obr. 4
Kliknutím pravého tlačítka myši na vybraný objekt zobrazíme menu a vybereme „Convert to Symbol“. Objekt bude MC a pojmenujeme jej například „pozadí“ (obr. 5).
Obr. 5
Nový MC „menu“ vytvoříme vložením nového symbolu ( Insert - New Symbol obr.6) a z knihovny objektů (CTRL + L) do klipu přetáhneme vytvořený MC „pozadí“.
Obr. 6
Nástrojem „Selection Tool“ objekt pozadí vybereme. Pomocí panelu „Align“ (Window - Design Panels - Align) jej zarovnáme horizontálně na střed. Vertikálně se bude objekt dotýkat horní hranou středu objektu menu (obr. 7).
Obr. 7
Na panelu „Align“ je v pravé části tačítko „To Stage:“. Pokud je aktivní (obr. 8), zarovnáváme objekt/y vzhledem k aktuální pracovní ploše. Pokud není zvoleno a máte vybráno více objektů najednou, zarovnávají se tyto objekty vůči sobě.
Obr. 8
Pomocí Motion Tween budeme chtít animovat změnu velikosti objektu „pozadi“. Kliknutím pravého tlačítka myši na snímcích 7 a 10 a zvolením „Insert Keyframe“, vytvoříme klíčové snímky (obr. 9).
Obr. 9
Kliknutím na snímek 7 se přesuneme do této části osy a nástrojem „Selection Tool“ vybereme objekt pozadí menu. Snímek bude představovat plně rozbalené menu. Otevřeme si panel „Transform“ (Window - Design Panels - Transform).
Zde lze vybraný objekt zvětšovat a zmenšovat, případně provést otočení či skosení a převrácení. Ujistíme se, že není zaškrtnuto políčko „Constrain“. Pokud je zaškrtnuté, mění se zároveň šířka i výška objektu, my ale chceme měnit pouze výšku. Zvětšíme hodnotu výšky na 300% a opět zarovnáme objekt horním okrajem ke středu.
Zbývá už jen vytvořit animaci pomocí „Motion Tween“. Klikneme pravým tlačítkem myši na první snímek časové osy a zvolíme „Create Motion Tween“. Stejným způsobem změníme i snímek 10 (obr. 10).
Obr. 10
Tímto postupem jsme si připravili animaci celého menu, ve které nám ještě chybí tlačítka voleb.
Postup pro tvorbu tlačítka je podobný vytvoření nového MC.
Zvolíme z hlavního menu „Insert - New Symbol“ a u položky „Behavior“ vybereme „Button“ (obr. 11).
Obr. 11
Objekt tlačítka má odlišnou časovou osu. Skládá se pouze ze 4 snímků (obr. 12). Tyto snímky představují tlačítko v jednotlivých fázích. První snímek „Up“ představuje tlačítko v klidové poloze. Druhý snímek „Over“ označuje tlačítko ve fázi kdy na něj najedeme myší. Snímek „Down“ znamená zobrazení tlačítka v okamžiku kliknutí myší a poslední snímek „Hit“ určuje aktivní oblast tlačítka. Aktivní oblast znamená plochu, na které tlačítko reaguje (v případě textových tlačítek je dobré ve snímku „Hit“ překreslit přes text obdélník, toto vylepšení provedeme v příštím díle).
Obr. 12
Zvolíme nástroj „Text Tool“ (obr. 13), pomocí něhož lze vytvořit text. Textovým polím se budeme věnovat v některém z příštích dílů, proto jen velmi stručně. Nástrojem „Text Tool“ lze nakreslit oblast, do které lze psát.
Obr. 13
Pokud otevřeme ve spodní části panel vlastností „Properties“, můžeme zde měnit parametry právě psaného textu. Nám bude stačit, když v prvním menu panelu vlastností zvolíme „Static Text“, font Arial a velikost písma 13 (obr. 14).
Obr. 14
Text tlačítka napíšeme libovolný, třeba „Tlačítko 1“. Stejným způsobem vytvoříme i druhé tlačítko.
Otevřeme si knihovnu objektů (CTRL+L) a dvojklikem na objekt „menu“ se přesuneme do tohoto objektu. Potřebujeme v animaci zobrazit obě tlačítka při úplném rozbalení pozadí. Protože funkce „Motion Tween“ funguje pouze pokud máme v klíčovém snímku jeden objekt, musíme vytvořit další vrstvu, do které tlačítka umístíme.
V levém dolním rohu panelu časové osy „Timeline“ klikneme na tlačítko „Insert Layer“ (obr. 15).
Obr. 15
Vytvořili jsme tak další vrstvu „Layer 2“. Dvojklikem na název vrstvy lze její jméno změnit, což je výhodná funkce zejména při větším množství vrstev, která umožňuje lepší orientaci. Máme tedy dvě vrstvy. Jak ale teď zajistíme aby se tlačítka objevila v okamžiku plného rozbalení pozadí?
Pokud bychom vložili do prvního snímku druhé vrstvy obě tlačítka, budou vidět celou dobu animace. My chceme aby byli vidět pouze ve snímku číslo 7. Abychom mohli umístit jakýkoliv objekt pouze do určitého snímku, je nutné ze snímku vytvořit nám již známý klíčový snímek. To ale není všechno, protože pokud animace pokračuje v jakékoliv další vrstvě dál, automaticky se nám „viditelnost“ objektu v klíčovém snímku prodlouží až na konec nejdelší animace ze všech vrstev. Proto musíme vytvořit klíčový snímek i ze snímku 8, který zůstane prázdný. Objekt z předchozího snímku pak nebude viditelný.
Pravým tlačítkem myši klikneme postupně na 7. a 8. snímek a z menu zvolíme „Insert Blank Keyframe“. Tato volba znamená, že do aktuálního snímku vložíme prázdný klíčový snímek. Stejný výsledek bude mít i postup, kdy při současném držení klávesy CTRL a klikáním na snímky, vybereme jednotlivé snímky a po kliknutí pravým tlačítkem zvolíme „Convert to Blank Keyframes“. Tato funkce je vhodná při konverzi většího množství snímků najednou.
Máme připravenou druhou vrstvu pro vložení tlačítek:
Obr. 16
Klikneme na snímek 7 ve druhé vrstvě a otevřeme si knihovnu objektů(CTRL+L). Nyní můžeme z knihovny jednoduše přetáhnout obě tlačítka na pozadí menu. Pokud jsme zvolili barvu textu černou, zjišťujeme že jsme neudělali dobře. Proto se můžeme dvojklikem v knihovně na příslušné tlačítko vrátit, nástrojem „Selestion Tool“ vybrat text a na spodním panelu „Properties“ zvolit světlejší barvu. Dvojklikem na objekt „menu“ v knihovně se opět vrátíme k animaci a vidíme, že se změna barvy objevila i na vložených objektech (obr. 17).
Obr. 17
Už jsme skoro na konci. Nyní přijde to nejdůležitější a to ovládání pomocí Action Scriptu (AS). Nebudeme se pouštět do zbatečně složitých funkcí, použije pouze několik základních. Action Script lze psát buď do jednotlivých snímků časové osy a nebo jej lze připsat k objektům na scéně. Pravidla psaní AS budeme probírat později, na začátek zmíním základní povinnost psát na konci řádky středník.
Nejjednodušším příkazem je stop(); který se použije, pokud chceme animaci zastavit. Opakem je příkaz play(); Potřebujeme nyní napsat do snímku 1 a 7 příkaz stop(); Je to z toho důvodu, že pokud celou animaci vyexportujeme, neustále by se nám menu rozbalovalo a sbalovalo a to není funkce, kterou jsme od něho chtěli.
Určím, že se hned na začátku animace zastaví. Následně v AS pro menu určíme, že chceme animaci spustit, ale jen dokud nenarazí na příkaz ve snímku 7 stop(); který zajistí zastavení na pozici maximálního rozbalení. Pokud se animace dál spustí, menu se sbalí a po přehrání posledního snímku se zastaví opět na snímku číslo jedna.
Chceme-li vložit kód AS do jednotlivého snímku, stačí na něj kliknout myší a ve spodní části zvolit panel „Actions - Frame“ (obr. 18) . Funkce celého panelu probereme jindy, nyní nám stačí pouze informace, že se kód píše do pravé části.
Obr. 18
Klikneme tedy na první snímek ve druhé vrstvě, otevřeme panel akcí snímku a napíšeme první příkaz: stop(); (obr. 19).
Obr. 19
Všimneme si že se do prvního snímku časové osy vepsalo malé „a“. Znamená to že je v tomto snímku příkaz AS (obr. 20).
Obr. 20
Obdobně vepíšeme příkaz stop(); i do snímku 7. A máme skoro hotovo. Nyní už zbývá poslední krok.
Vrátíme se na hlavní scénu - v levé horní části nad časovou osou klikneme na „Scene1“. Z knihovny objektů přetáhneme na scénu objekt „menu“. Klikneme na něj a ve spodní části otevřeme panel akcí, který je tentokrát pojmenovám „Actions - Movie Clip“, protože jsme vybrali MC. V panelu akcí napíšeme tyto příkazy:
onClipEvent (mouseDown) {
if
(this.hitTest(_root._xmouse, _root._ymouse, true) && this._currentframe
== 1) {
this.gotoAndPlay(2);
}
}
onClipEvent
(mouseMove) {
if (this.hitTest(_root._xmouse, _root._ymouse,
true)!=true && this._currentframe == 7)
{
this.gotoAndPlay(8);
}
}
Nebudeme se teď zabývat jejich významem. V příštím vydání na to budeme mít více času. Nyní stačí už jenom stisknout CTRL+Enter a můžeme vyzkoušet naše první menu.
Doufám že dnešní, poněkud delší a náročnější téma jsme společně zvládli bez větších potíží. Příště si vysvětlíme použité funkce AS v menu, vyzkoušíme si možnosti exportu vytvořené animace a tlačítka menu „obohatíme“ o jednoduché příkazy, které jej učiní plně funkčním.
Ke stažení: zdrojový soubor ukázky
