reklama

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í

1 komentář

Nejnovější komentáře

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

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

** V Brně byl velký výpadek služeb UPC ** Důvodem je překopnutý páteřní kabel ** V některých lokalitách služby stále nefungují

5.  12.  2016 | Jakub Čížek | 104

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

** Zmizí klasické vyhledávače ** Budeme programovat buňky ** Kvantové počítače překonají šifry

6.  12.  2016 | Jakub Čížek | 36

11 tipů na dobrý stolní počítač: od základu po herní mašiny

11 tipů na dobrý stolní počítač: od základu po herní mašiny

** Postavte si stolní počítač! Máme pro vás 11 vzorových sestav s rozpisem komponent ** Většina tipů cílí na hráče, věnujeme se ale i základnímu PC a počítačům na střih videa ** Nadělte si nový počítač třeba pod stromeček

5.  12.  2016 | Adam Kahánek | 74

Nejlepší notebooky nad 20 tisíc: poradíme, které teď chcete

Nejlepší notebooky nad 20 tisíc: poradíme, které teď chcete

** V notebooku s cenou nad 20 tisíc nesmí chybět kvalitní displej a rychlé úložiště ** Za dalších deset tisíc můžete dostat navíc styl nebo výkonnější komponenty ** Vybírat můžete z různých velikostí i konstrukcí

8.  12.  2016 | Stanislav Janů | 85


reklama