Flash-ActionScript - 2. lekce

Pokračuji po delší pauze, protože vůbec nebyl čas, další díl bude doufám dřív. V dnešním díle se podíváme na kreslení, práci v uživatelském prostředí Flashe a na konci trochu ActionScriptu. Původně jsem chtěl dělat jenom ActionScript, ale aspoň trochu kreslení budeme potřebovat...

Začínáme

Praconí plocha

Na pracovní plochu se kreslí grafika a určuje velikost okna ve FlashPlayeru. Potřebné nastavení se provedou v nabídce Modify>Document (Ctrl + J). První dva udáje jsou šířka (width) a výška (height) v pixelech, můžete používat i jiné jednotky, vyberete si je z nabídky Ruler units. Barva pozadí (Background color) - k tomu myslím není co dodávat, po kliknutí se otevře nabídka. FPS (snímky za sekundu), je to číslo, které udává, kolikrát se změní obrazovka za každou sekundu - to vytváří dojem pohybu při animacích, defaultně je tam 12, ale to je dost málo, já obvykle používám 24 fps. Tlačítko Contents nastaví hodnoty podle obsahu dokumentu, Default pak výchozí.

Časová osa

Časová osa se nachází v horní části obrazovky, skládá se z jednotlivých snímků. Hned při startu je vytvořen jeden prázdný snímek. Časovou osu si můžete rozdělit do vrstev Insert -> Timeline -> Layer. Grafika vrstvy, která je výše, než jiná, se zobrazuje nad všemi nižšími vrstvami. Tak jako symboly (dozvíte se níže), může snímek časové osy nést kód ActionScriptu, je dobré si vytvořit vrstvu pouze pro AS a tam psát všechny hlavní funkce. Nové snímky vložíte buď pravým kliknutím a vybráním z nabídky, nebo zkratkami:
F5 - nový snímek
F6 - nový klíčový snímek
F7 - nový prázdný klíčový snímek
Animace se spustí Enterem. Pokud byste chtěli otestovat celou animaci i s ActionScriptem, tak stiskněte Control -> Test Movie (Ctrl + Eneter)

Symboly

Aby se animaci dodala interaktivita, je nutné rozdělit si jednotlivé objekty do symbolů, jak dále uvidíme, je to velmi užitečné. Každý Symbol je vlastně předloha, podle které se zobrazují její instance, z toho vyplývá, že když změníme Symbol, změní se i její instance. Pomocí Selection Tool si vyberte nakreslený objekt a přes nabídku Modify>Conver To Symbol z něho vytvořte symbol. Je možné si vybrat ze 3 druhů:

Když poklepáte na Symbol, dostanete se na jeho vlastní časovou osu, která je nezávislá na té hlavní, může obsahovat vlastní animaci.

Panely

Uživatelské prostředí je podobné všem MX programům od Macromedie. Panely si můžete nastavit k pohodlí podle sebe. Defaultní nastavení panelu zobrazíte Windows -> Panel Sets -> Default Layout.

Nástrojový panel

Výběr

Tímto se označují objekty, jenom bych k tomu řekl, že na rozdíl od některých jiných grafických editorů existuje obrys nezávisle, takže si můžete označit obrys a pohybovat s ním, to taky platí o výplni, u které lze bez problému si označit třeba jen polovinu nakresleného kruhu a tím si rozdělíte objekt na dva. Taky jde tímto nástrojem tažním měnit tvar čáry.

Podvýběr

Čára

Laso

Pero

Text

Poslední dvě možnosti mají volbu Var - tam se píše název proměné (variable), přes kterou budete v AS přistupovat k textu.

Tužka

Štětec

Transformace

Úprava výplně

Kalamář

Plechovka

Takže teď jsem tady zběžně popsal nástrojový panel, dále jsou tam např. panely Color Mixer (Windows -> Design Panels -> Color Mixer Shift + F9) k míchání barev, Transform (Widnows -> Design Panels -> Transform Ctrl + T), který využijete při přesné rotaci nebo zkosení. Ovládání je celkem snadné, takže už to nebudu zbytečně rozepisovat.

ActionScript

O ActionScriptu už jsem něco řekl minule, takže se vrhneme přímo na praktickou stránku věci. Každý kus ActionScriptu se musí vztahovat k určitému objektu, například k snímku časové osy. Takže si otevřete okno AS (Windows -> Development Panels -> Actions F9) a klikněte na nějaký Button. V defaultním rozvržení je nastaveno dole, ale do toho se dost špatně píše, takže je dobré si ho dát přes celou obrazovku a jenom klávesovou zkratkou si ho zobrazovat. Pokud nemáte verzi Professional, tak si v pravém horním rohu okna nastavte expert mode.

Události

Aby Flash věděl, kdy má náš kód vykonat, musíme definovat událost a to tímto příkazem:

on(x){
... další příkazy
}

Prostor mezi tímto { a tímto } se nazývá blok kódu, příkaz on nám říká, že jakmile dojde k události x, vykoná se následující blok kódu. Tento příkaz se používá jenom v MovieClipu a Buttonu. Kód na snímku časové osy se spustí, když je přehráván při animaci.

onClipEvent(enterFrame){
	trace("Tohle se bude zobrazovat několikrát za sekundu");
}

Trace

Funkce trace tiskne text do speciální okna Output (Windows -> Development Panels -> Output F2) a slouží pouze k ladění programu. Pokud je text v uvozovkách, bere se jako text, jméno proměnné (viz Text) se píše bez uvozovek - to jenom nastínění kvůli úkolu. Více si povíme v příštích dílech.

on(release){
    trace("Hello world!!!!");
    trace(nejaky_text);
}
 

Tento kód nejprve vytiskne do Outputu text Hello World!!!! a pak hodnotu z dynamického textu, které ma v políčku Var napsané nejaky_text. Jenom dodám, že středník na konci každého příkazu je libovolný.

Stop

Příkaz stop zastaví přehrávanou animaci. Obvykle ji použijete při vícesnímkovém programu k zastavení hned na začátku animace.

stop();

gotoAndStop, gotoAndPlay

Příkaz gotoAndStop provede přesun na určitý snímek podle čísla, nebo názvu, který si definujete na panelu Properties, když máte označený snímek. GotoAndPlay je to samé, pouze se na cílovém snímku nezastaví ale pokračuje v animaci.

gotoAndPlay(2);
gotoAndStop("muj_snimek5");

Úkol:

Udělejte zajímavou prezentaci/něco v čem budou události, Input Text a trace. Odevzdávejte ve formátu .fla - Flash Document (File>Save as)