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.
Umíme ve Flashi – 11. díl – čárový graf

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í, Sloupec, 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

Pojďme programovat elektroniku: Postavíme si titěrnou Wi-Fi meteostanici s lepším teploměrem než Netatmo

Pojďme programovat elektroniku: Postavíme si titěrnou Wi-Fi meteostanici s lepším teploměrem než Netatmo

** Dnes se podíváme na maličkou Wi-Fi destičku Wemos D1 mini ** A připojíme k ní barometrický a teplotní shield ** Poběží na ní web a nabídne i JSON API

18.  6.  2017 | Jakub Čížek | 28

Jak vybrat monitor k počítači: nenechte se zlákat nepodstatnými parametry

Jak vybrat monitor k počítači: nenechte se zlákat nepodstatnými parametry

** Na jaké parametry se zaměřit a kde vás výrobci chtějí nachytat ** Monitory se stále více specifikují pro konkrétní určení ** Náročný hráč nebo profesionální grafik mají různé požadavky

20.  6.  2017 | Tomáš Holčík | 31

Dlouhodobý test HTC Vive: co vám recenze o virtuální realitě neřeknou

Dlouhodobý test HTC Vive: co vám recenze o virtuální realitě neřeknou

** Ani hry se sebelepší grafikou vás nevtáhnou tolik, jako ve virtuální realitě ** Pro sledování filmů není VR ani zdaleka ideální ** I první generace je skvělá, stále však působí jako prototyp

20.  6.  2017 | Stanislav Janů | 22

Jak unikají informace o nových iPhonech? Třeba podprsenkami čínských pracovnic

Jak unikají informace o nových iPhonech? Třeba podprsenkami čínských pracovnic

** Na černém trhu mohou zaměstnanci továren za kradené součástky inkasovat částku ve výši ročního platu ** Velké množství informací je vyneseno i z centrály Applu ** Díly jsou pašovány v botách, podprsenkách i odpadem

21.  6.  2017 | Stanislav Janů | 22


Aktuální číslo časopisu Computer

Bojujeme proti Fake News

Dva velké testy: fotoaparáty a NASy

Co musíte vědět o změně evropského roamingu

Radíme s výběrem základní desky