Umíme ve Flashi – 11. díl – čárový graf

Dnešním dílem zakončíme náš miniseriál o tvorbě grafů jednoduchou funkcí, pomocí které snadno vytvoříme dynamický čárový graf, který bude opět čerpat hodnoty z připravené tabulky.

Kreslení pomocí AS

Ačkoliv už máme za sebou třetí desítku dílů, pořád jsme se ještě podrobněji nepodívali na možnosti kreslení pomocí Action Scriptu. Dnešním dílem tak zakončíme dynamické grafy a načneme další, neméně zajímavou kapitolu, která se týká právě kreslení.

S novou verzí Flashe se kromě jiných vylepšení objevila možnost použití přechodové výplně i u obrysových čar. Společně s tímto došlo k doplnění příslušných metod třídy Movie Clip o nové, které kreslení čar s přechodovými barvami umožňují. Dnes ale tyto poněkud složitější operace necháme být a ukážeme si ten nejjednodušší postup nakreslení čáry pomocí AS.

Metoda pro kreslení je velmi jednoduchá:

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

Pomocí těchto řádků se v MC „nazev_mc“ nakreslí červená čára, široká 1px s průhledností 100% a povede od bodu se souřadnicemi x – 0 a y – 0 do bodu x – 10 a y – 10. Pokud chceme kreslit čáru dál, stačí připsat metodu lineTo(x,y). V případě, že chceme čáru přerušit a začít kreslit na jiném místě, použijeme metodu moveTo(x,y), přesuneme se na jiné místo, aniž bychom do nového bodu táhli čáru z předchozího bodu.

Když jsme si už něco nakreslili, také to můžeme potřebovat smazat. Pro mazání všech nakreslených čar v objektu slouží metoda clear(); Praktické využití kreslení si ukážeme nyní.

Čárový graf

Otevřeme si zdrojový soubor z minulého dílu, kdo jej nemá po ruce, může si ho stáhnout zde. Zobrazíme si akce prvního snímku a až na konec přidáme tento kód:

this.createEmptyMovieClip("grafLinka", -1);
grafLinka.onEnterFrame = function() {
 if (linky) {
  grafLinka._visible = true;
 } else {
  grafLinka._visible = false;
 }
 if (hodnoty[0] != undefined) {
  grafLinka.clear();
  grafLinka.lineStyle(2, 0x99CCFF, 50);
  hodnL = hodnoty.length-1;
  grafLinka.moveTo(eval("graf"+hodnL)._x+eval("graf"+hodnL).num._x+eval("graf"+hodnL).num._width/2, eval("graf"+hodnL)._y+eval("graf"+hodnL).num._y+eval("graf"+hodnL).num._height);
  for (var z in hodnoty) {
   grafLinka.lineTo(eval("graf"+z)._x+eval("graf"+z).num._x+eval("graf"+z).num._width/2, eval("graf"+z)._y+eval("graf"+z).num._y+eval("graf"+z).num._height);
  }
  prostorDef(grafLinka);
 }
};
sloupce = true;
linky = true;

Vytvoříme si nový MC, ve kterém budeme kreslit čáry. Nový klip umístíme do vrstvy -1, protože sloupcové grafy začínají na vrstvě 0. Následuje cyklus, který s využitím již známých funkcí překresluje čáry podle aktuální pozice textového pole jednotlivých sloupců.

Na začátku funkce ještě máme podmínku, která testuje proměnnou „linky“, pomocí které budeme zobrazovat a opět skrývat celý čárový graf. Ze stejného důvodu doplníme funkci graf() do této podoby:

graf = function (target) {
 if (sloupce) {
  target.sloupek._alpha = 100;
 } else {
  target.sloupek._alpha = 0;
 }
 for (ax=1; ax<rychlost; ax++) {
  if (target.sloupek._height<=target.hodnota/posuv) {
   target.actHodnota++;
   target.sloupek._height += 0.5;
   target.num.text = target.sloupek._height*posuv-1;
   target.num._y = -1*target.sloupek._height-target.num._height;
   prostorDef(target);
  } else {
   break;
  }
 }
};

Zde jsme na začátek doplnili podobné testování proměnných, které zaručí skrytí, případně znovuobjevení sloupců grafu. Aby bylo skrývání kompletní, vytvoříme si dvě tlačítka, kterým přiřadíme tyto akce:

//akce prvního tlačítka pro skrytí/zobrazení sloupců
on (release) {
 if (sloupce) {
  sloupce = false;
 } else {
  sloupce = true;
 }
}

//akce druhého tlačítka pro skrytí/zobrazení čárového grafu
on (release) {
 if (linky) {
  linky = false;
 } else {
  linky = true;
 }
}

Tímto poslední krokem můžeme dnešní díl ukončit. Jak vypadá výsledná animace, se můžete podívat zde. Zdrojový soubor grafu je k dispozici zde.

Vzhledem k blížícím se svátkům jistě někoho napadne, že by si mohl vytvořit vánoční flashové přáníčko. Velmi jednoduchou ukázku, jak by mohlo vypadat naleznete zde. Pro další animovaná přáníčka si můžete zajít například sem.

Přeji vám hezké Vánoce

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

1 komentář

Nejnovější komentáře

  • gully, gully 19. 12. 2005 12:57:50
    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

23.  4.  2017 | Pavel Tronner | 57

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

24.  4.  2017 | Jakub Čížek | 112

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

23.  4.  2017 | Pavel Tronner | 13

Acer chrlí novinky: levný a tenký Predator, nové Switche a další notebooky

Acer chrlí novinky: levný a tenký Predator, nové Switche a další notebooky

** Acer na konferenci v New Yorku představil velkou spoustu novinek z oblasti počítačů, notebooků i monitorů ** Notebookové novinky se dotkly řad Predator, Swift, Switch i Aspire ** Herní notebooky dostaly nový typ chlazení

Včera | Karel Javůrek | 7

Správný počítač má alespoň dva monitory. Anebo je to jinak?

Správný počítač má alespoň dva monitory. Anebo je to jinak?

** David si nedokáže představit práci bez dvou a více monitorů ** Kubovi naopak stačí jeden a ve více displejích se ztrácí ** Jaký přístup je lepší?

23.  4.  2017 | Jakub Čížek | 59


Aktuální číslo časopisu Computer

Supertéma: moderní cestování

Kdy opravdu přijdou nové baterie?

Velké testy: 6 herních notebooků a 8 volantů

Recenze: AMD Ryzen řady 5