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í, Nová metoda, Graf, Díl, Výsledné dílo, Elsa, Sloupec

Určitě si přečtěte

Tesla chce změnit nákladní dopravu. Její elektrický náklaďák má ohromující parametry

Tesla chce změnit nákladní dopravu. Její elektrický náklaďák má ohromující parametry

** Tesla představila elektrický kamion ** Má obdivuhodný výkon i dojezd ** Prodávat by se měl už za dva roky

17.  11.  2017 | Vojtěch Malý | 158

30 počítačových brzd, které vám zpomalí Windows

30 počítačových brzd, které vám zpomalí Windows

Na webu najdete hromadu rad, jak zrychlit počítač a Windows. My jsme na to šli opačně a naopak jsme hledali činnosti, které ho nejvíce zpomalují. Toto je třicítka těch základních.

12.  11.  2017 | Jakub Čížek | 90

Elektronika, která nepotřebuje kabel ani baterii. Živí se rádiovým šumem

Elektronika, která nepotřebuje kabel ani baterii. Živí se rádiovým šumem

** Každá elektrická krabička má konektor pro napájení nebo baterii ** Jenže pozor, jednou by to tak nemuselo být ** Drobná elektronika se může živit rádiovými vlnami

14.  11.  2017 | Jakub Čížek | 15

Nejlepší notebooky do 10 tisíc, které si teď můžete koupit

Nejlepší notebooky do 10 tisíc, které si teď můžete koupit

** I pod hranicí desíti tisíc korun existují dobře použitelné notebooky ** Mohou plnit roli pracovního stroje i zařízení pro zábavu ** Nejlevnější použitelný notebook koupíte za pět a půl tisíce

16.  11.  2017 | Stanislav Janů | 52

Do 20 let nebude nikdo vlastnit auta, říká zkušený šéf několika automobilek

Do 20 let nebude nikdo vlastnit auta, říká zkušený šéf několika automobilek

** Bývalý šéf a expert z několika velkých automobilek se vyjádřil k budoucnosti tohoto průmyslu ** Do 20 let „nikdo“ nebude vlastnit auta ** Veškerá doprava bude řešená pomocí velkých logistických platforem

15.  11.  2017 | Karel Javůrek | 74


Aktuální číslo časopisu Computer

Otestovali jsme 5 HDR 4K televizorů

Jak natáčet video zrcadlovkou

Vytvořte si chytrou domácnost

Radíme s koupí počítačového zdroje