Začínáme s Flash MX 2004 – 4. díl – menu

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.

Základní postup

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ě.

Vytvoření pozadí menu

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

Klepněte pro větší obrázek

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.

Klepněte pro větší obrázek

Obr. 2

Klepněte pro větší obrázek

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).

Klepněte pro větší obrázek

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).

Klepněte pro větší obrázek

Obr. 5

Movie Clip menu

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í“.

Klepněte pro větší obrázek

Obr. 6

Nástrojem „Selection Tool“ objekt pozadí vybereme. Pomocí panelu „Aling“ (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).

Klepněte pro větší obrázek

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ě.

Klepněte pro větší obrázek

Obr. 8

Animace pozadí

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).

Klepněte pro větší obrázek

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).

Klepněte pro větší obrázek

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.

Vytvoření tlačítek

Zvolíme z hlavního menu „Insert - New Symbol“ a u položky „Behavior“ vybereme „Button“ (obr. 11).

Klepněte pro větší obrázek

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).

Klepněte pro větší obrázek

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.

Klepněte pro větší obrázek

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).

Klepněte pro větší obrázek

Obr. 14

Text tlačítka napíšeme libovolný, třeba „Tlačítko 1“. Stejným způsobem vytvoříme i druhé tlačítko.

Zobrazení tlačítek v animaci

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).

Klepněte pro větší obrázek

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í?

Vytvoření klíčových snímků

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:

Klepněte pro větší obrázek

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).

Klepněte pro větší obrázek

Obr. 17

Ovládání menu

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.

Psaní AS

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.

Klepněte pro větší obrázek

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).

Klepněte pro větší obrázek

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).

Klepněte pro větší obrázek

Obr. 20

Obdobně vepíšeme příkaz stop(); i do snímku 7. A máme skoro hotovo. Nyní už zbývá poslední krok.

Action Script menu

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

Diskuze (39) Další článek: Creative Zen Micro: Hudba z vašich dotyků

Témata článku: Software, Programování, Flash, Klíčová funkce, Menu, Jednotlivý díl, Klíčový snímek, První snímek, Jednotlivý snímek, Timeline, První funkce, Základní nástroj, Stop, Alin, Levý panel, Action, Jednotlivé položky, Známý klíč, Poslední snímek, Pravé tlačítko, Convert, Stage, Časová osa, Chci, Panel


Určitě si přečtěte

Na měsíc jsem opustil Google a potupně se zase vrátil zpět (komentář)

Na měsíc jsem opustil Google a potupně se zase vrátil zpět (komentář)

** Zkusil jsem se zbavit závislosti na vyhledávači od Googlu ** Jako alternativy posloužily Bing, Seznam a DuckDuckGo ** Mají své silné stránky, ale i nepřekonatelná negativa

Lukáš Václavík | 54

Teachable Machine: Umělá inteligence za pět minut i bez doktorátu z ČVUT

Teachable Machine: Umělá inteligence za pět minut i bez doktorátu z ČVUT

** Pochopit techniky a principy A.I. je složité ** Ale nebojte, jde to i bez doktorátu z IT a matematiky ** Vyzkoušíme generátor neuronových sítí od Googlu

Jakub Čížek | 10

Za hranicemi Chromu: 13 nejzajímavějších prohlížečů, které „nikdo“ nepoužívá

Za hranicemi Chromu: 13 nejzajímavějších prohlížečů, které „nikdo“ nepoužívá

** Šesti nejpoužívanějším prohlížečům patří 94 % trhu ** Různé „klony“ Chromu slibují lepší funkce nebo jiný design ** Také Firefox má řadu zajímavých odnoží

Lukáš Václavík | 38

Jak se žije s telefonem bez Googlu: Čerstvé zkušenosti s telefony Honor a Huawei

Jak se žije s telefonem bez Googlu: Čerstvé zkušenosti s telefony Honor a Huawei

** Honor u nás přichází s prvním telefonem bez Google Mobile Services ** Současný stav je lepší než na začátku, ideální ale není ** Zkusili jsme i hack s ručním přidáním služeb Googlu

Tomáš Holčík | 149

Jak vlastně funguje Flightradar24: Posloucháme letadla nad celým Českem

Jak vlastně funguje Flightradar24: Posloucháme letadla nad celým Českem

** Flightradar24 zobrazuje polohu letadel v reálném čase ** Když mu pomůžete sbírat data, dostanete nejvyšší paušál zdarma ** Jak to vlastně celé funguje a co je k tomu potřeba?

Jakub Čížek | 30

Velká datová loupež. Proč mají disky nižší kapacitu, než uvádějí?

Velká datová loupež. Proč mají disky nižší kapacitu, než uvádějí?

** Na disk nikdy neuložíte tolik dat, jak tvrdí výrobce ** Ajťáci si vymysleli vlastní jednotky jako mebibajt ** Zmatky vznikají i kvůli různým výjimkám

Lukáš Václavík | 105

Apple má šanci definitivně se uzamknout. macOS byl na jeho poměry až příliš otevřený

Apple má šanci definitivně se uzamknout. macOS byl na jeho poměry až příliš otevřený

** Apple, vývojáře i uživatele rozhodně nečekají dva roky prázdnin ** macOS se může uzavřít podobně jako iOS a iPadOS ** Přechod na Arm znamená stopku pro hackintoshe

Lukáš Václavík | 102


Aktuální číslo časopisu Computer

Megatest SSD s kapacitou 1 TB

Srovnávací test robotických vysavačů

Vybíráme nejlepší telefony na trhu

Jak zlepšit zvuk televize