Flash-ActionScript - 2. lekce
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

Flash-ActionScript - 2. lekceFlash-ActionScript - 2. lekce

 

Flash-ActionScript - 2. lekce

Google       Google       1. 8. 2005       35 197×

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

Reklama
Reklama

Začínáme

Pokud ještě nemáte otevřený Flash, tak si ho otevřete. Vytvořte si nový soubor stisknutím File -> New (Ctrl + N) -> Flash Document.

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ů:

GraphicGrafika, využívá se hlavně při animacích bez interaktivity, u tohoto lze navíc nastavit kolikrát se bude přehrávat
Button Tlačítko, má v časové ose pouze snímky: Up - výchozí grafika tlačítka, Over - grafika po najetí myši, Down - při stlačení a Hit - toto se nezobrazuje, ale určuje plochu tlačítka, např. pokud je obsahem tlačítka text, tak se nepovažuje za najetí, když se kurzor nachází mezi písmeny, proto stačí do Hit přidat obdelník a vše funguje.
MovieClipTento druh budete nejspíš využívat nejvíce, protože se používá hlavně s kombinací s ActionScriptem. Tak jako ostatní Symboly, má vlastní časovou osu.

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

Editace jednotlivých uzlů objektu.

Čára

Rová čára, tloušťku a styl lze měnit na panelu vlastností (Properties - Ctrl + F3).

Laso

Podobá se nástroji výběr s tím rozdílem, že vybírá plochu libovolného tvaru.

Pero

Kreslení pomocí uzlů

Text

Ve Flashi je možné text nejrůzněji formátovat - zarovnávat, určovat směr apod. Text má tři možnosti zobrazení:
Static Text Flash tento text při exportu vyjádří v křivkách, takže uživatel uvidí i ty fonty, které nemá na svém počítači.
Dynamic Text Tento druh využijete ve spojení s ActionScriptem, protože jeho obsah lze měnit za běhu programu.
Input text Jako předešlý druh se používá s AS, u tohoto navíc obsah vkládá uživatel.

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

Tento nástroj slouží ke kreslení obrysu, má stejné nastavení jako čára. Na panelu nástrojů v položce Options si můžete vybrat ze tří možností, jak Flash upraví čáru, kterou nakreslíte:


Štětec

Kreslení výplně. V options si můžete nastavit:


Transformace

Úprava vybraného objektu - zkosení, otočení a změna velikosti.

Úprava výplně

Editace výplně, která má přechod několika barev - otočení apod.

Kalamář

Po kliknutí aplikuje nastavenou barvu na obrys

Plechovka

Po kliknutí aplikuje nastavenou barvu na výplň

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.

pressStisknutí myši
releasePuštění tlačítka myši
releaseOutsidePuštění tlačítka myši mimo Symbol
rollOutVyjetí myši
rollOverNajetí myši
keyPress("kód klávesy")Stisknutí tlačítka


U MovieClipů můžeme používat další typ události a to onClipEvent:
loadPo načtení MovieClipu
enterFrameKaždý snímek, záleží na fps (např. při 24 fps se kód v následujícím bloku zavolá 24 krát za sekundu)
mouseMoveKdyž se myš hýbe
mouseDownKliknutí myši - ne jenom na MovieClip, kdekoliv v dokumentu
mouseUpUvolnění tlačítka myši
keyDownStisknutí klávesy
keyUpUvolnění klávesy



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)

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
Mezi největší záliby patří programování v Pythonu, PHP či Flashi - ActionScriptu.

Nové články

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

Reklama
Reklama
Obrázek ke článku ICT PRO školení zaměřené nejenom na ICT

ICT PRO školení zaměřené nejenom na ICT

Dovolte, abychom se představili. Jsme zaměstnanci společnosti ICT Pro, profesionálové v oblasti poskytování komplexních ICT služeb. Neboli služeb spojených s informačními a komunikačními technologiemi, které dnes - ve 21. století - tvoří  nedílnou součást běžného provozu všech moderních firem.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý