Výuka Flash (6.)

Co je to ActionScript

ActionScript je skriptovací jazyk Flashe, pomocí kterého můžeme dynamicky měnit obsah scén, umístění objektů, spouštět hudbu, reagovat na nové události a mnohé další. ActionScript také umožňuje spolupráci s XML. ActionScript se svou syntaxí velice podobá klientskému jazyku JavaScript, proto pokud již znáte tento jazyk, nebude přechod k ActionScriptu tak složitý. ActionScriptu se nemusí bát ani záčátečníci, protože si vše podrobně ukážeme.

Jak na ActionScript

Akce přiřazujeme jednotlivým objektům (tlačítka, atd.) pomocí panelu Actions. Tento panel se skládá ze tří základních částí:

Klikněte pro zvětšení

A - jedná se o knihovnu, ve které jsou uvedeny všechny akce, operátory, funkce, vlastnosti, které můžeme přiřadit jednotlivým objektům. Na konci jsou všechny akce, operátory, atd. seřazeny podle abecedy.

B - v této části panelu Actions se zobrazují jednotlivé možnosti a vlastnosti, které můžeme u vybrané akce či funkce dosadit. Tento panel je však zobrazen jen v případě, že máte vybrán tzv. Normal Mode - o těchto módech si povíme za chvíli. Napravo se nachází obrázek knížky, na který když kliknete se zobrazí nápověda k právě vybrané části zdrojového kódu. Tlačítko vedle knihy umožňuje skrytí či zobrazení jednoduché nápovědy, která se nachází ve vrchní části panelu. Ve spodní části se nachází několik tlačítek. Jedná se o:

1. '+' - Add new item to the script - zobrazí kontextové menu, které je další verzí knihovny akcí, funkcí, vlastností, atd. Pomocí tohoto menu si můžeme jednoduše vybrat požadovanou akci a následně ji vložit do okna se zdrojovým kódem (C).
2. '-' - Delete the selected action(s) - tato volba umožňuje odstranit právě vybraný blok zdrojového kódu.
3. Find - umožňuje vyhledávání ve zdrojovém kódu. Volba Match case umožňuje vyhledávání s přesnou velikostí písmen, jaké jsme zadali.
4. Replace - umožňuje najítí a následné nahrazení části zdrojového kódu jiným.
5. Insert a target path - v případě, že budeme pracovat s nějakým objektem, můžeme využít tuto volbu, pomocí které můžeme jednoduše vybrat zvolený objekt.
6. Debug options - tato volba je užitečná při testování aplikací, o kterém si povíme později.
7. View Options - zde si můžeme vybrat, v jakém režimu budeme pracovat. Naleznete zde také volbu View Line Numbers, která zobrazí číslování řádků v části se zdrojovým kódem.
8. Move the selected action(s) down - umožňuje vybraný blok kódu přesunout dolů.
9. Move the selected action(s) up - umožňuje vybraný blok kódu přesunout nahoru.

C - zde se nachází zdrojový kód právě vybraného snímku či objektu.

Ve vrchní části panelu Actions se nachází select menu, ve kterém si můžeme vybrat objekt, s jehož zdrojovým kódem budeme pracovat. Vedle tohoto select menu se nachází také ikona špendlíku, která umožňuje zamknutí zdrojového kódu na vybraný objekt. Nad touto ikonou špendlíku nalezneme ikonu seznamu, na kterou když klikneme se zobrazí kontextové menu:

Normal Mode - jedná se o tzv. normální mód, který je určen především začátečníkům. V tomto módu se zobrazí část panelu Actions (B). Expert Mode - nezobrazí část panelu Actions, který slouží pro snadnější editace zdrojového kódu. Go to line... - umožňuje přejítí na zvolený řádek zdrojového kódu. Find... - umožňuje najítí části zdrojového kódu. Find Again - umožňuje další vyhledání části zdrojového kódu. Replace... - umožňuje vyhledání a následné nahrazení části zdrojového kódu. Check syntax - zkontroluje syntaxy zdrojového kódu. Show Code Hint - tato volba funguje pouze v Expert módu a zobrazí kontextové menu (zobrazí možnou část kódu) u vybrané části kódu. Auto Format - zformátuje zdrojový kód v případě, že pracujete v Expert módu. Auto Format Options - zobrazí dialogové okno, ve kterém si můžeme nastavit způsob automatického formátování zdrojového kódu. Import From File... - umožňuje vložení zdrojového kódu z externího souboru s koncovkou .as. Export As File... - umožňuje uložení (exportování) zdrojového kódu do souboru. Print... - umožňuje vytisknutí zdrojového kódu. View Line Numbers - zobrazení řádek v okně zdrojového kódu. View Esc Shortcut Keys - zobrazení únikové klávesové zkratky u akcí, funkcí, atd. Preferences... - zobrazí dialogové okno, ve kterém si můžeme upravit část zdrojového kódu podle vlastního uvážení. Help - zobrazí hlavní nápovědu k Flashi. Maximize Panel - maximalizuje panel. Close Panel - Zavře panel Actions.

Začínáme s ActionScriptem

Pro začátek bude nejlepší, když začneme s jednodušší (základní) částí ActionScriptu a později přejdeme ke složitější. Nyní začneme s popisem a ukázkami akcí.

Go To

Umístění v knihovně: Actions -> Movie Control.

Tato akce umožňuje okamžité přesunutí na zvolený snímek časové osy. Otevřte si nový dokument a do prvního snímku časové osy nakreslete pomocí nástroje Rectangle Tool (R) červený čtverec. Přesuňte se do snímku 10 časové osy a vložte nový klíčový snímek (F6). Následně změňte barvu tohoto čtverce (10 snímek) na zelenou. Nyní se přesuňte zpět do prvního snímku hlavní časové osy, klikněte pravým tlačítkem a z kontextového menu vyberte volbu Actions - otevře se panel Actions pro právě vybraný snímek. Zde rozbalte nebo vyberte z kontextového menu tlačítka + akci Actions -> Movie Control -> goto.

Na výběr máme následující možnosti:

• Go to and Play - přejde na zvolený snímek a bude pokračovat v přehrávání.
• Go to and Stop - přejde na zvolený snímek a nebude pokračovat v přehrávání.
• Scene - výběr scény.
• Type - výběr typu přesunutí.
• Frame - číslo snímku, na který se má animace přesunout.

Vše by mělo vypadat následovně:

Nyní si již můžete tento skript přehrát (CTRL + ENTER). Tento příklad je poněkud jednoduchý, ale myslím, že pro začátek bude užitečný. Celý příklad si můžete stáhnout zde.

On

Umístění v knihovně: Actions -> Movie Control.

Následující akci využijete při použití tlačítek (symbol Button) a Movie Clipů, když bude chtít reagovat na události vzniklé jednou z následujících událostí:

• Press - stisknutí levého tlačítka myši nad zvoleným objektem.
• Release - stiknutí a následné uvolnění levého tlačítka myši nad zvoleným objektem.
• Release Outside - stiknutí a následné uvolnění levého tlačítka myši mimo zvolený objekt.
• Key Press - stisknutí zvolené klávesy.
• Roll Over - při přesunu kurzoru myši přes objekt.
• Roll Out - při přesunu kurzoru myši mimo objekt.
• Drag Over - při stisknutí levého tlačítka myši, přesunu mimo objekt (při stálém držení levého tlačítka) a navrácení nad objekt.
• Drag Out - při stisknutí levého tlačítka myši, přesunu mimo objekt (při stálém držení levého tlačítka).

Opět si ukážeme příklad v tomto případě se po kliknutí na tlačítko přesuneme do snímku 10 časové osy. Otevřete si nový dokument a přesuňte se do 10 snímku. Zde vložte nový klíčový snímek (F6). Do tohoto snímku nakreslete pomocí nástroje Rectangle Tool (R) libovolný čtverec, který bude sloužit k orientaci v klipu. Nyní vytvořte tlačítko libovolné barvy a velikosti (CTRL + F8). Vytvořte instanci tohoto tlačítka do snímku 1 časové osy, klikněte na něj pravým tlačítkem myši a zvolte Actions. Přidejte akci Actions -> Movie Control -> On. Zde odeberte událost Release a přidejte událost Press. Opět vyberte Actions -> Movie Control -> goto (Go to and Stop) a nastavte snímek na hodnotu 10 jako v předchozím příkladě. Do prvního snímku časové osy ještě umístíme akci stop (o níž si povíme následně) a která zamezí přehrávání animace.

Nyní můžete tento klip přehrát. Celý klip si můžete stáhnout zde.

Play a Stop

Umístění v knihovně: Actions -> Movie Control.

Tyto akce umožňují zastavení a pokračování přehrávání animace. Přehrávání se pozastaví na vybraném snímku a při použití akce play bude pokračovat od tohoto snímku.

Použití je totožné jako v předchozím příkladě.

Shrnutí

V dnešním díle jsme si ukázali, co je to ActionScript, práci s panelem Actions a ukázali jsme si základní výčet akcí, ve kterém budeme příště pokračovat.

Pro tento díl to bude vše. V příštím díle budeme pokračovat v ActionScriptu.

Petr Rympler