FLASH 5 - Kalkulačka v 1.0 - Grafika.cz - vše o počítačové grafice

Navigace:  » Úvodní stránka  » Rubriky  » Webdesign  

16. října 2001, 00.00 | V dnešním tutorialu si zavzpomínáme na hodiny matematiky, protože si ukážeme postup tvorby kalkulačky, kterou můžeme po exportování do projectoru použít jako samostatnou aplikaci.

V dnešním tutorialu si zavzpomínáme na hodiny matematiky, protože si ukážeme postup tvorby kalkulačky, kterou můžeme po exportování do projectoru použít jako samostatnou aplikaci.

spam_email('.cz', '@', 'centrum', 'filip.zavadil');>

Pozn.: Tato ukázka nemá ještě omezený displej.

S používanými matematickými funkcemi vám pomůže jeden z mých předchozích článků - Matematické objekty. A rozhodně nebude stačit jen si článek přečíst, ale také prostudovat přiložený zdrojový soubor, hierarchie akcí a podmínek v tomto článku není tak znatelná jako v souboru, mnohé akce jsou v souboru doplněné komentářem a popřípadě praktickou ukázkou.

Nejdříve si připravíme vzhled kalkulačky a tlačítka. Já se tímto moc zabývat nebudu, půjde mi hlavně o účelnost než o design. A pak budeme teprve definovat jednotlivé početní operace. Nastavíme velikost jeviště (CTRL M) např. 200 x 400 px, 12 snímků za sekundu (Frame Rate) a pozadí (Background Color) podle použité barevné kombinace - má bude kombinovat černou barvu, bílou a žlutou, popřípadě další.

Vytvoříme si nejdříve tlačítko, které použijeme v průběhu mnohokrát. Vytvoříme si nový grafický symbol (CTRL F8) s názvem tlacgr, který bude základem pro tlačítko, pak vytvoříme tlačítko (CTRL F8) s názvem 1 a z knihovny přetáhneme symbol tlacgr na první frame. Pro přehlednost přidáme (v tlačítku) další vrstvu, do které umístíme statické textové pole a příslušný symbol - číslo nebo matematický operátor, a necháme po najetí myši změnit jeho barvu, třeba z bílé na žlutou. Pro oživení naimportujeme do Flashe nějaký zvuk a přidáme ho do tlačítka v pozici stlačeno (down). Obdobně si vytvoříme všechna tlačítka - čísla, operátory a další funkce kalkulačky, nebudeme se samozřejmě tvořit znovu, ale využijeme duplikační funkce (duplicate) v knihovně a editace.

Vytvoříme displej, který bude tvořen ze dvou částí (dynamických textových polí) - vrchní část bude pro zobrazení čísel a spodní pro právě zadaný operátor. Začneme pozadím displeje, bude obdobné jako tlačítka, vytvoříme tedy nový grafický symbol s názvem displaybg. Zvolíme nástroj text a zhotovíme dynamické textové pole, čísla zarovnáme vpravo, do variable doplníme displej a umožníme pouze číselné znaky (include outlines for numbers). Druhému textovému poli pro operátory, přiřadíme stejné vlastnosti,  variable bude rozdílné opertxt, a nezadáme include outlines for numbers.

Přidáme do hlavní scény vrstvu pro akce (action), ve které vynulujeme proměnné displej (na displeji bude nula) a pamet. Nadefinujeme zde také funkci pro přidávání čísel na displej včetně desetinné tečky. Cislo je proměnná pro čísla (0-9) a desetinnou tečku. 

Nyní se můžeme pustit do akcí, ze všeho nejdříve přiřadíme akce číselným tlačítkům tak, abychom mohli kalkulačku ovládat myší i numerickou částí klávesnice, pro tlačítko 0 to bude vypadat následovně, pro ostatní to bude obdobné (0 až 9). Pridani("0"); není definováno pomocí setvariable ale akcí evaluate, která se používá pro volání funkce.

Akce pro desetinnou tečku ".":

Vyzkoušíme, zda nám funguje desetinná tečka a zjistíme, že nám nefunguje, proto do vlastností textového pole displej přidáme "." a "-" pro pozdější změnu znaménka +/-, ve vlastnostech také necháme zatrženo Selectable, abychom mohli výsledek zkopírovat a použít jinde.

Pro přehlednost na hlavní scénu přidáme další vrstvu s názvem vypocty, do níž umístíme akce pro početní operace - sčítání, odčítání, násobení a dělení. K početním akcím využijeme function (pro akce bychom mohli využít také samostatného klipu nebo také funkce call, jejíž používání  Flash 5 není doporučeno). Tyto akce budeme volat při stisknutí operátorů a tím zajistíme mezivýpočet po stisknutí operátoru (např. 1 + 2 +  a na displeji se nám objeví mezivýpočet 3, pak stiskneme další číslo a "=", tedy 1 + 2 + 3 =, a objeví se výsledek 6). Myslím že jednotlivé akce není potřeba vysvětlovat, jen věnujte zvýšenou pozornost používaným operátorů. Pro přeměnu řetězce na číslo použijeme parseFloat. Určitě jste si všimli toho, že při převodu fla souboru starší verze (Flash 4) do Flash 5 je používáno Number. Stejného efektu by se dalo dosáhnout použitím Number místo parseFloat, ale to nedělejte, Number je opravdu jen k výše popsanému účelu.
 

ParseFloat
Syntaxe: parseFloat (řetězec)
Argumenty: 
řetězec (angl. string) přemění řetězec na číslo s pohyblivou čárkou
Popis: Funkce; přemění řetězec na číslo s pohyblivou čárkou. Funkce rozebere a vrátí čísla v řetězci, do okamžiku než analyzátor dosáhne charakteru, který není část počátečního čísla. Jestliže řetězec nezačne číslem, které může být rozebrané, parseFloat vrátí Nan nebo 0. Prázdné místo, které předchází platná celá čísla je ignorováno, stejně jako nenumerické výrazy.
Příklad:  
parseFloat ("-2") vrátí -2
parseFloat ("2.5") vrátí 2.5
parseFloat ("3.5e6") vrátí 3.5e6 nebo 3500000

Pro tlačítka s matematickými operátory zadáme rozdílné akce ( + - * /), zde vidíte příklad pro +, pro ostatní je to obdobné:

Tlačítku "=" přidáme obdobnou akci jako ostatním matematickým operátorům a získáme tak konečný výsledek:

Tip:
Pokud chcete zadat vypocty(); a nepoužíváte Expert Mode, můžete využít z action evaluate. V okně Frame Actions můžete využít dvojího módů - Normal Mode určený spíše pro začátečníky nebo Expert Mode pro experty, kdy můžete akce přímo psát, aniž byste museli používat příkazů pro jejich zadávání. Používaný mód můžete také nastavit v menu Edit - Preferences - General - Actions Panel.

RADA6

Pokročíme dále a budeme definovat akce zbylých tlačítek. C pro mazání displeje, zpět (->) pro vrácení o jedno místo, M+ pro přičítání do paměti, MR pro vyvolání z paměti (Pozn.: Jednotlivé řady příbuzných tlačítek jsou umístěny v jedné vrstvě s označením rada1 až rada6).

Zastavíme se u tlačítka zpět (->). Jestliže číslo na displeji nebude nabývat hodnoty nebo bude na displeji znaménko minus, pak nebude mít displej hodnotu (v našem případě máme ale nastaveno na displeji 0). Jinak bude provedena následující akce: if (displej.length == 1) ... Jestliže bude na displeji jeden znak (nebo postupným zmáčknutím tlačítka zpět se dostaneme na jeden znak), stisknutím tlačítka zpět bude na displeji "0", kdybychom nezahrnuli tuto podmínku, pak by po stisknutí zpět byl displej úplně prázdný a my chceme, aby tam byla "0". Další akce: else if (opertxt == "+/-") ... Jinak jestliže bude textové pole pro operátory nabývat hodnoty "+/-", pak v tomto textovém poli nebude nic. Podmínka vychází z toho, že uživatel bude chtít změnit znaménko u čísla a když to udělá u napsaného čísla, pak stisknutím zpět zmizí a dalším stisknutím se budou vracet čísla, stejně tak, kdyby klikl jen na "+/-". Další akce: else { displej = substring ... Nadefinujeme samotné vracení o jedno číslo (nebo desetinnou tečku).

Funkce Length (řetězec) vytváří číselnou hodnotu založenou na počtu znaků v řetězci, má jediný parametr (např. text se ohodnotí na číselnou hodnotu 4, protože slovo text má 4 znaky). Pokud proměnná obsahuje znakovou hodnotu, můžeme použít k vyjádření řetězce jméno proměnné, jak je tomu v našem případě displej. Funkci můžeme použít také pro kontrolu délky řetězců při vkládání dat, která musí obsahovat daný počet znaků (např. rok, PSC, ICO, ...).

Ovšem v tomto případě používám funkci displej.length, jejíž použití je správnější a použití obdobné.
Funkce String.length
Syntaxe: string.length
Argument: žádný
Popis: vlastnost, vrací číslo ve specifikovaném řetězcovém objektu. Index posledního charakteru pro nějaký řetězec (string) x je x.length-1.

Funkce Substring
Syntaxe: Substring (String, Index, Count)
String (řetězec) - určuje řetězec, který má být ohodnocen
Index - udává počet znaků z levé strany řetězce, které mají být použity
Count (počet) - udává počet znaků, které budou zahrnuty od Indexu dále

V našem případě substring(displej, index, (displej.length-1)) je ohodnoceno textové pole displej, nezadáme počet znaků z levé strany řetězce, které mají být použity, protože přesný počet ani neznáme, proto necháme neurčitý index. Funkce length (displej.length) je vysvětlena výše, budeme chtít, aby se po stisknutí tlačítka zpět vrátilo číslo a jeden znak.

Stejně jako tak jako displej.length bychom mohli místo substring použít displej.substring, ale já ji v tomto případě nepoužiji.

Decimal ="0"; zadáme, aby nám správně fungovaly desetinná čísla. Opertxt = ""; slouží pro odstranění operátorů z tohoto textového pole po stisknutí zpět. Předpokládáme, že budeme počítat a stiskneme "=", které zůstane na displeji až do okamžiku další akce. I v tomto případě bude fungovat zpět a operátor zmizí.

M+ slouží pro přičítání čísla z displeje k číslu, co je už v paměti, z paměti výsledek vyvoláme MR, a po dalším stisknutí MR bude paměť vymazána. Mohli bychom kalkulačce přidat mnoho dalších pamětí, ale s tím si určitě poradíte.

RADA1

p  (PI) zavoláme na displej matematickým objektem Math.PI.

U procent (%) se zase zastavíme, funkce bude obdobná jako u "=" a početní operace, umístíme ji pro přehlednost do další vrstvy hlavní scény s názvem proc. Funkci zavoláme po kliknutí na tlačítko "%" proc();.
 

Možná vás napadnete, že na normální kalkulačce je to nadefinováno trochu jinak (hlavně pro * / ), ale pro naše účely to stačí (kdyžtak si procenta můžete předefinovat podle svého).

1/x pokud bude na displeji 0, pak tuto operaci nelze provést a objeví se chybová hláška nelze, v ostatních případech bude provedena.

RADA2

e	ln10
on (release, keyPress "e") { displej = Math.E; opertxt = "e"; }	on (release, keyPress "l") { displej = Math.LN10; opertxt = "ln10"; }
ex	log
on (release, keyPress "w") { if (parseFloat(displej)>"708") { // ex Flash nezvladne u cisel vetsich nez 708 displej = 0; opertxt = "ex"; opertxt2 = "nelze"; } else { // ostatni pripady displej = Math.exp (displej); opertxt = "ex"; } }	on (release, keyPress "g") { displej = Math.log (displej); opertxt = "log"; }

Math.exp
Syntaxe: Math.exp(x);
Argument: x je číslo nebo výraz
Popis: Metoda; vypočítá hodnotu exponenciální funkce, kde základem je e (Eulerovo číslo) a exponentem x (e^x)
Flash ovšem dokáže spočítat hodnotu (e^x) maximálně s exponentem 708 (e⁷⁰⁸), proto pro číslo větší než 708 zajistíme, aby na displeji byla "0" a zobrazila se chybová hláška "nelze", pro jejíž zobrazení použijeme další textové pole opertxt2. To bude mít stejné vlastnosti jako opertxt a bude také sloužit k dodatečným chybovým hláškám, které se neobjevují v akcích definovaných ve vrstvě vypocty, protože opertxt je již obsazeno rovnítkem "=" - doplníme tedy opertxt2="nelze";. Opertxt2 umístíme tak, aby překrývalo opertxt a aby byly viditelné hodnoty obou polí. Do akce vypocty všude tam, kde jsou chybové hlášky, tedy displej = 0; doplníme opertxt2 = "nelze";. Pro tlačítko C (mazání) doplníme akci opertxt2 = ""; stejně tak pro tlačítko zpět ( - >).

Math.log
Syntaxe: Math.log(x);
Argument: x je číslo nebo výraz větší než 0
Popis: Metoda; vypočítá přirozený logaritmus argumentu x

RADA3

U x2 nesmíme zapomenout, že nejde umocnit "0", a také musíme brát v úvahu umocnění záporných čísel, proto přidáme absolutní hodnotu (Math.abs).

Operátor %
Syntaxe: výraz1 % výraz2
Argument: výraz1 a výraz2 mohou být čísla, celá čísla, čísla s plovoucí čárkou, řetězce, co se přemění na numerickou hodnotu
Popis: Vypočítá zbytek výrazu1 děleného výrazem2
Příklad: 12 % 5 vrátí 2; 4.3 % 2.1 vrátí 0.1  

Math.abs
Syntaxe: Math.abs(x);
Argument: x je nějaké číslo
Popis: Metoda; vypočítá absolutní hodnotu pro x

Math.pow
Syntaxe: Math.pow(x, y);
Argument: x (základ) je číslo nebo výraz; y (exponent) je číslo nebo výraz
Popis: Metoda; vypočítá y-tou mocninu čísla x
Příklad: Math.pow(2,3); tedy 2³ a výsledkem je 8
Pozn.: Math.pow si neporadí s math.pow(-2,3) = -8 a math.pow(-2,4) = 16, proto to obcházím vynásobením (-1) nebo math.abs.

Pro od x můžeme použít buďto Math.pow s exponentem 1/2, což vychází z matematiky, nebo zvláštní funkci pro druhou odmocninu Math.sqrt. Když jsme si už poradili s "xy", tak "y od x" bude pro nás hračkou, avšak budeme vycházet z matematických omezení. Akce na tlačítku bude jasná, ale do funkce vypocty přidáme zase další operátor a další podmínky:

RADA4

Pro přepočet radiánů je používán tento vztah, radian = Math.PI / 180 * úhel ve stupních, např. pro sin 45 stupňů: Math.sin ((Math.PI / 180) * 45) je stejný jako Math.sin (0.7854). Při výpočtu hodnot goniometrických funkcí převádí Flash radiány na stupně pomocí Math.PI, které je uvedeno pouze na 14 desetinných míst a dochází tedy ke zkreslení výsledku, nejvíce se to projeví u sin 180 °, sin 360 °, cos 90 °, cos 270 °, ... tedy vždy, když má být výsledná hodnota 0. Proto přidáme podmínku, pokud je hodnota menší než 10e-15 (if (Math.abs(displej) < 0.000000000000001) {displej = 0;), což je hodnota nejvíce se blížící nule a Math.abs vyjadřuje vlastně interval od -0.000000000000001 do 0.000000000000001. Obdobně postupujeme u cosinu. Pro tangens musíme určit 2 podmínky, které vycházejí ze samotné definice funkce tg 0 ° = 0, tg 90 ° = nelze, tg 180 ° = 0, tg 270 ° = nelze. Číslo 5729577951 je hodnota tg 89.99999999, tedy nejvíce se blížící tg 90 °, který není definován, dále zahrneme  tg 0 ° = 0 a  tg 180 ° = 0 obdobně jako u sinu nebo cosinu. Mnohem lepší by bylo, kdyby měl Flash zvlášť funkci pro výpočet radiánů a stupňů, aby se hodnoty nemusely obcházet. Abs vypočítá absolutní hodnotu - pro 2 = 2, pro -2 = 2, stejného efektu dosáhneme změnou znaménka "+/-".

sin	cos
on (release, keyPress "<Delete>") { displej = Math.sin ((Math.Pi/180) * displej); if (Math.abs(displej) < 0.000000000000001) { displej = 0; } opertxt = "sin"; }	on (release, keyPress "<End>") { displej = Math.cos ((Math.Pi/180) * displej); if (Math.abs(displej) < 0.000000000000001) { displej = 0; } opertxt = "cos"; }
tan	abs
on (release, keyPress "<PageDown>") { displej = Math.tan ((Math.Pi/180) * displej); if (Math.abs(displej) >5729577951) { displej = 0; opertxt = "nelze"; } else if (Math.abs(displej) < 0.000000000000001) { displej = 0; opertxt = "tan"; } else { opertxt = "tan"; } }	on (release, keyPress "a") { displej = Math.abs (displej); opertxt = "abs"; }

RADA5

sin -1	cos -1
on (release, keyPress "u") { if (displej >= "-1" || displej <= "1") { // vypliva z definicniho oboru funkce  displej = "0"; opertxt = "nelze"; } else { displej = (Math.asin (displej))*(180/Math.Pi); opertxt = "sin -1"; } }	on (release, keyPress "i") { if (displej >= "-1" || displej <= "1") { // vypliva z definicniho oboru funkce  displej = "0"; opertxt = "nelze"; } else { displej = (Math.acos (displej))*(180/Math.Pi); opertxt = "cos -1"; } }
tan -1
on (release, keyPress "o") { displej = (Math.atan (displej))*(180/Math.Pi); opertxt = "tan -1"; }

x!

on (release, keyPress "f") { if parseFloat(displej) < "0" || parseFloat(displej) > "170") { // x! nelze u zapornych cisel; 170 je horni hranice pro x! displej = 0; opertxt = "nelze"; } else if (displej != int (displej)) { // x! nelze u desetinnych cisel (pouze celych kladnych) displej = 0; opertxt = "nelze"; } else if (displej == "0") { // 0 x! = 1 displej = 1; opertxt = "x!"; } else { // x! v ostatnich pripadech - cela kladna cisla mimo 0 fact = 1; i = 1; while (parseFloat (i) <= displej) { // cyklus ktery vychazi z 4 x! = 1 * 2 * 3 * 4 = 24 nebo muzeme definovat tak, jak je v matematice zvykem 4 ! = 4 * 3 * 2 * 1 = 24 fact = fact*i; i = i+1; } displej = fact; opertxt = "x!"; } }

x! zvládne maximálně 170!, vyšší nezvládne a ani tak obrovské číslo nebudeme potřebovat, má kalkulačka (nikoliv flashová) zvládne maximálně 69! = přibližně 1.7112245e+98, proto přidáme další podmínku: parseFloat(displej) > "170" ..., že číslo nesmí být větší než 170 a tím zajistíme, že bude na displeji "0" (a nebude zde prázdné místo) a napíše se chybové slovo "nelze".

Kalkulačka v této fázi má ještě jeden podstatný nedostatek a tím je velikost displeje, který vyřešíme až příště, určitě se najdou ještě další, které by bylo třeba odstranit nebo by šly některé operace nadefinovat jiným způsobem. Doufám, že jsem postihl všechny možnosti a definiční obory zvláště goniometrických funkcí správně tak, aby se tato aplikace alespoň přiblížila běžně používaným kalkulačkám.