Umíme ve Flashi – 12. díl – kreslicí aplikace, úvod

Dnešním dílem se začneme podrobnější seznamování se s možnostmi kreslení ve Flashi pomocí AS. Pro začátek si vytvoříme jednoduchou aplikaci, která bude umět kreslit barevné linky včetně jejich mazání.

Metoda kreslení čar

Pro kreslení jednoduchých čar dnes využijeme tři metody třídy MovieClip. Jedná se o metodu LineStyle(), moveTo() a lineTo().

Nejdříve, než začneme s kreslením, je nejlepší si vytvořit prázdný MC, do kterého budeme později čáry kreslit. Jakmile máme objekt vytvořen, nic nám nebrání začít pomocí uvedených metod kreslit.

První metoda se používá vždy před započetím kreslení a nastavuje vlastnosti kreslené čáry. Metoda lineStyle() má tyto parametry:

  • thickness – tloušťka kreslené čáry
  • rgb – hexadecimální hodnota barvy kreslené čáry
  • alpha – hodnota průhlednosti kreslené čáry

Další, méně využívané parametry:

  • pixelHinting – nabývá hodnot true/false a pomocí tohoto parametru lze ovlivnit lepší vykreslení čar
  • noScale – může nabývat hodnot „normal“, „none“, „vertical“, „horizontal“ a jedná se o určení, jakým způsobem se bude nakreslená čára roztahovat při změně velikosti okna přehrávače
  • capsStyle – může nabývat hodnot „none“, „round“ a „square“ a pomocí této proměnné lze určit zakončení kreslené čáry
  • jointStyle – pomocí hodnot „miter“, „round“ a „bevel“ určujeme, jestli budou rohy spojení dvou čar ostré, kulaté a nebo šikmé.

Pokud máme určen typ kreslené čáry, musíme určit, od kterého bodu se má začít kreslit. K tomu nám poslouží metoda moveTo(), která má dva možné parametry. Jedná se o x-ovou a y-ovou souřadnici bodu, od kterého se má začít kreslit.

Poslední metoda je moveTo() a jak už asi tušíme, pomocí této metody určíme bod, kam se má čára nakreslit. Tato metoda má opět dva parametry, které určují souřadnice cílového bodu.

Nakreslení jednoduché čáry pak můžeme napsat takto:

cara.lineStyle(1, 0xFF0000, 100);
cara.moveTo(0, 0);
cara.lineTo(100, 100);

Výsledkem bude linka o tloušťce 1px barvy červené a nulové průhlednosti. Linka bude začínat v bodě 0,0 a končit v bodě 100,100

Kreslicí program

Uvedené metody jsou opravdu velmi jednoduché, proto si hned vyzkoušíme, jak by se dala vytvořit taková základní kreslicí aplikace. Popis funkcí je následující: budeme chtít mít na ploše tužku, pomocí které kreslíme různobarevné čáry. Tato tužka bude měnit barvu podle právě zvolené barvy čáry.

Zadání je zřejmé, pustíme se do práce. Nejdříve si nakreslíme MC objekt tužky, do kterého umístíme objekt, reagující na změnu barvy. Může to být například tělo tužky, nebo její hrot. Instanci objektu pojmenujeme „telo“.

MC tužky vložíme na hlavní scénu a pojmenujeme jej „tuzka“. Na panelu akcí napíšeme objektu následující skript:

onClipEvent (load) {
 _level0.createEmptyMovieClip("kresba", 1);
 startDrag(this, true);
 this.swapDepths(2);
 barva = 0x000000;
 Mouse.hide();
}
onClipEvent (mouseDown) {
 pressed = true;
 _level0.kresba.lineStyle(1, barva, 100);
 _level0.kresba.moveTo(_root._xmouse, _root._ymouse);
}
onClipEvent (mouseMove) {
 if (pressed) {
  _level0.kresba.lineTo(_root._xmouse, _root._ymouse);
 }
}
onClipEvent (mouseUp) {
 pressed = false;
}

Zde ihned po načtení symbolu vytvoříme instanci objektu „kresba“ na hlavní scéně, do kterého budeme kreslit čáry. Necháme tužku přetahovat společně s kurzorem myši, který schováme. Nastavíme na základní hodnotu proměnnou „barva“, která nám bude sloužit pro nastavení barvy kreslené čáry.

Následuje událost mouseDown(), která určí začátek kreslené čáry. Událost mouseMove() detekuje pohyb myši a pokud je tento pohyb proveden, kreslíme pomocí metody lineTo() čáru.

Pokud tlačítko myši uvolníme, dojde k zastavení kreslení čáry.

Nyní se vrátíme na hlavní scénu a nakreslíme zde čtyři různě barevné objekty, které budou sloužit pro přepínání jednotlivých barev tužky. Objekty pojmenujeme „b1“ až „b4“ a do prvního snímku scény napíšeme následující kód:

var barva:Color = new Color(tuzka.telo);
b1.onPress = function() {
 tuzka.barva = 0x000000;
 barva.setRGB(0x000000);
};
b2.onPress = function() {
 tuzka.barva = 0x009900;
 barva.setRGB(0x009900);
};
b3.onPress = function() {
 tuzka.barva = 0xFF9900;
 barva.setRGB(0xFF9900);
};
b4.onPress = function() {
 tuzka.barva = 0x003366;
 barva.setRGB(0x003366);
};

Zde si vytvoříme nový objekt třídy „Color“, pomocí kterého budeme obarvovat objekt „telo“ v tužce. Následuje přiřazení akcí jednotlivým objektům na ploše, které po kliknutí změní barvu tužky a proměnnou „barva“, určující, jak bude kreslená čára vypadat.

Nakonec ještě na scénu přidáme jedno tlačítko, kterému přiřadíme tuto akci:

on (release) {
  kresba.clear();
}

Ze které je zřejmé, že tlačítko slouží pro vymazání nakreslených čar.

Výslednou aplikaci si můžeme prohlédnout zde. Zdrojový soubor je k dispozici zde.

Témata článku: Software, Programování

1 komentář

Nejnovější komentáře

  • gully, gully 27. 12. 2005 9:31:27
    http://diskuse-zaciname-s-flash-mx-2004.wz.cz
Určitě si přečtěte

Operační systém běžným počítačům nedal Bill Gates, ale Gary Kildall

Operační systém běžným počítačům nedal Bill Gates, ale Gary Kildall

** Gary Kildall pochopil, že levné výpočetní čipy mohou posloužit jako univerzální počítače pro všechny ** Připravil pro ně proto první operační systém ** Později mu systém vyfoukl Microsoft a nazval ho MS DOS

Včera | Pavel Tronner | 45

Původní Starcraft: Brood War je nyní zdarma. Konec práce! Jde se pařit

Původní Starcraft: Brood War je nyní zdarma. Konec práce! Jde se pařit

** Legendární hra Starcraft je nyní k dispozici zdarma ** Chystá se i nová remasterovaná verze s hezčí grafikou

19.  4.  2017 | Jakub Čížek | 25

Brno otevřelo největší českou dílnu pro bastlíře. Kladívka, vrtačky, 3D tiskárny, laserové řezačky. Je tu vše

Brno otevřelo největší českou dílnu pro bastlíře. Kladívka, vrtačky, 3D tiskárny, laserové řezačky. Je tu vše

** Máte nápad, ale chybí vám stroje a pořádná dílna? ** Chcete postavit ptačí budku, nebo krabičku pro Arduino? ** Brno otevřelo svůj FabLab – laboratoř pro bastlíře

19.  4.  2017 | Jakub Čížek | 31

Před 35 lety měl premiéru legendární počítač ZX Spectrum. Připomeňte si „Gumáka“

Před 35 lety měl premiéru legendární počítač ZX Spectrum. Připomeňte si „Gumáka“

** Slavný osmibitový počítač Sinclair ZX Spectrum byl uveden právě před 35 lety ** Připomeňte si tento průkopnický počítač v tematických článcích ** Podívejte se, jak funguje dnes

Včera | Pavel Tronner | 12

Umělá inteligence je sice v plenkách, už teď ale přestáváme rozumět, jak vlastně funguje. To je problém

Umělá inteligence je sice v plenkách, už teď ale přestáváme rozumět, jak vlastně funguje. To je problém

** Už je to tady, lidé přestávají chápat počítače ** Systémy neuronových sítí začínají pracovat tak, že ani jejich tvůrci přesně neví, co se uvnitř děje ** Do budoucna to může být závažný problém

Dnes | Jakub Čížek | 82


Aktuální číslo časopisu Computer

První test AMD Ryzen

Velké testy: 22 powerbank a 8 bezdrátových setů

Radíme s koupí Wi-Fi routeru

Co dokáží inteligentní domy?