Flash a tvorba formulárov

–        Static Text – text ktorý sa nebude počas behu aplikácie meniť (neumožňuje priradiť Instance Name).

Flash ponúka úžasne možnosti tvorby aplikácií, ktoré v nejakej forme využívajú formuláre.
Či už budeme vytvárať jednoduché kalkulačky, emailové formuláre alebo zložité aplikácie prijímajúce vstupy od uživateľa, princíp bude väčšinou rovnaký ako si ukážeme ďalej.

Cenová kalkulačka

Vytvoríme si jednoduchý formulár, ktorý po zadaní ceny tovaru a počtu kusov prepočíta ostatné hodnoty  a zobrazí ich užívateľovi. Výsledný formulár bude podobný tomuto:

Flash formulár kalkulačka

Najprv na Stage vložíme popisky jednotlivých polí. Vytvoríme ich ako Static Text.
Flash umožnuje pracovať s troma typmi textu (verzia CS5 rozširuje, pri použití ActionScript 3.0,  možnosti práce s textom)

  • Static Text – text ktorý sa nebude počas behu aplikácie meniť (neumožňuje priradiť Instance Name).
  • Dynamic Text – tomuto objektu môžeme priradiť jeho vlastné meno (Instance Name), takže počas behu aplikácie možeme meniť vypisovaný text.
  • Input Text – slúži ako textové pole na vkladanie textu. Pomocou Instance Name tento text môžeme čítať.

Takže si vytvoríme popisky. Každý popisok môžeme vložiť ako samostatný Static Text pripádne ich vložíme všetky v jednom textovom objekte.

Flash formulár - popisky

Následne vložíme dve textové polia typu Inpnut Box, do ktorých uživateľ vpíše cenu tovaru a počet kusov. Prvému dáme Instance Name „cena“, druhému „kusy“.

Ďalšie tri vložené textové polia budu typu Dynamic Text, keďže v nich budeme vypisovať výsledok.
Pomenujme si ich (dajme im Instance Name) napríklad: „spolu“, „dph“ a „vysledok“.

Formular vo Flash - Input a Dynamic text

Vytvoríme si objekt, ktorý bude reprezentovať tlačítko. (čokoľvek nakreslíme, označíme, stlačíme F8 a skonverujeme na typ objektu/symbolu – Symbol Button). Tlačítku tiež dáme Instance Name, napríklad „pocitaj_btn“.

Naša aplikácia teraz môže vyzerať nasledovne: (Môžeme stlačiť Ctrl + Enter na otestovanie aplikácie):

Tlačítko vo Flash formulári

Pridáme ActionScript

Teraz už len potrebujeme našu kalkulačku oživiť.

Vytvoríme si novú vrstvu, do ktorej vložíme príkazy jazyka ActionScript. Najvhodnejšie bude pomenovať si túto vrstvu Actions a umiestniť ju ako prvú.

Označíme prvý Frame (prvé políčko) vo vrstve Actions a stlačíme F9. Týmto otvoríme editor pre ActionScript.

Ako prvé potrebujeme vyprázdniť textové polia, aby boli pred zápisom čísel prázdne:

cena.text = "";
kusy.text = "";

Zápis cena.kusy umožňuje prístup k obsahu textového poľa (či už Dynamic alebo Input text).

Keďže do týchto polí chceme vkladať iba čísla, tak máme niekoľko možnosti ako to ošetriť. Nemôžeme očakávať, že každý uživateľ bude naozaj vkladať čísla a nie ľubovoľné znaky, ošetríme si to pomocou vlastnosti Input Textu (mohli by sme to samozrejme riešiť aj pomocou podmienok).

cena.restrict = "0-9";

Okrem čísel ale chceme vkladať aj desatinnú čiarku. Pri počítaní sa musíme držať amerického/britského štandardu a používať namiesto desatinnej čiarky bodku. Takže zoznam dovolených znakov rozšírime o bodku. Jednotlivé znaky oddeľujeme čiarkou.

cena.restrict = "0-9,.";
kusy.restrict = "0-9,.";

Aby sme predišli tomu, že uživateľ zadá priveľa znakov, môžeme nastaviť maximálny počet povolených znakov.

cena.maxChars = 5;
kusy.maxChars = 5;

Takže textové polia máme vyčistené, a nastavené, tak pokračujeme vytvorením funkcie pre sledovanie stlačenia tlačítka:

btn_pocitaj.onRelease = function() {

}

Medzi zložené zátvorky budeme teraz vpisovať všetko, čo chceme aby táto funkcia vykonala. Čiže všetko čo sa má stať po tom, ako uživateľ stlačí tlačítko „Počítaj“.
Chceme nechať načítať hodnotu z prvého textového poľa (cena) a vynásobiť to obsahom druhého poľa (kusy). Túto hodnotu necháme uložiť do premennej ktorú si vytvoríme a nazveme „medziSucet“.

var medziSucet:Number = cena.text * kusy.text;

Hodnotu vypíšeme do Dynamic Text s Instance Name „spolu“:

spolu.text = medziSucet;

Do poľa s DPH necháme vypočítať DPHčku (zatiaľ je 19% ):

dph.text = medziSucet * 0.19;

DPHčku spolu s medzisúčtom použijeme na zistenie výslednej ceny, ktorú vypíšeme do Dynamic Text u s Instance Name „vysledok“.

vysledok.text = medziSucet + Number(dph.text

Hodnotu z poľa „dph“ sme previedli pomocou funkcie Number() na číslo, inak by sa s touto hodnotou pracovalo ako s textovým reťazcom. V prípade problémov môžeme túto funkciu použiť aj pri načítavaní hodnoty z ostatných polí, v predchádzajúcich riadkoch.
Ak aplikáciu otestujeme (Ctrl + Enter), tak môžeme byť celkom spokojní, ale poďme dotiahnuť ešte niekoľko detailov.

Po vypočítaní výsledkov, chceme vyčistiť textové polia (Input Boxy):

cena.text = "";
kusy.text = ""
;

A tiež chceme aby sa nastavil kurzor do prvého poľa s menom „spolu“, aby uživateľ mohol pokračovať vo výpočtoch. Vo väčšine programovacích jazykov toto dosiahneme pomocou nejakej formy funkcie SetFocus. Podobne to je aj pomocou ActinScriptu a objektu Selection:

Selection.setFocus("_root.cena");

Teraz aplikácia pracuje podľa našich predstáv. Existuje samozrejme množstvo ďalších možnosti a funkcií o ktoré by sme aplikáciu mohli rozšíriť.

Výsledný kód:

var btn_pocitaj:Button;

cena.text = "";
kusy.text = "";

cena.restrict = "0-9,.";
kusy.restrict = "0-9,.";

cena.maxChars = 5;
kusy.maxChars = 5;

btn_pocitaj.onRelease = function() {

var medziSucet:Number = cena.text * kusy.text;
spolu.text = medziSucet;
dph.text = medziSucet * 0.19;
vysledok.text = medziSucet + Number(dph.text);

cena.text = "";
kusy.text = "";
Selection.setFocus("_root.cena");
}

Stiahni súborZdrojový súbor s kalkulačkou – formulárom (Flash CS4)
Zdrojový súbor s kalkulačkou – formulárom (Flash CS3)

Reklamy

Pridaj komentár

Zadajte svoje údaje, alebo kliknite na ikonu pre prihlásenie:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa / Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa / Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa / Zmeniť )

Google+ photo

Na komentovanie používate váš Google+ účet. Odhlásiť sa / Zmeniť )

Connecting to %s

%d bloggers like this: