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

Microsoft: Zbavte se už konečně zastaralých a děravých Windows 7

Microsoft: Zbavte se už konečně zastaralých a děravých Windows 7

** Microsoft pomalu začíná kritizovat svůj nejpopulárnější OS ** Chce konečně dostat podniky na Desítky ** Bezpečnostní podpora Sedmiček vydrží ještě necelé tři roky

17.  1.  2017 | Jakub Čížek | 406

Vyzkoušeli jsme FM štěnici: Když si vtipálci hrají na pirátské rozhlasové vysílání

Vyzkoušeli jsme FM štěnici: Když si vtipálci hrají na pirátské rozhlasové vysílání

** Dnes žádnou elektroniku programovat nebudeme ** Štěnice totiž funguje sama o sobě ** Stačí připojit baterii a naladit frekvenci

Včera | Jakub Čížek | 14

8 produktů, o kterých byste neřekli, že nesou značku Apple

8 produktů, o kterých byste neřekli, že nesou značku Apple

** Věděli jste, že Apple vyvinul celkem 45 modelů tiskáren? ** ** Monitor na výšku, plotter nebo herní konzole - to vše měl Apple ve své nabídce ** Většinu z těchto produktů pohřbil Steve Jobs

19.  1.  2017 | Stanislav Janů | 42

Umělá inteligence dokáže ze snímků srdce předpovědět, kdy zemřete

Umělá inteligence dokáže ze snímků srdce předpovědět, kdy zemřete

** Strojové učení lze skvěle použít pro vylepšení modelů pro předpověď srdečních komplikací ** Nová technologie umožňuje přesněji určit rizikové pacienty ** Dřívější diagnostika může díky včasně léčbě do budoucna zachránit životy

21.  1.  2017 | Karel Javůrek | 7


Aktuální číslo časopisu Computer

99 nejlepších programů pro váš počítač

Zvykejte si na umělou inteligenci

Velké testy PC zdrojů a gamepadů

Alternativní zdroje energie

reklama
reklama