reklama

Umíme ve Flashi – 9. díl – generování sloupcových grafů

Pokud potřebujeme graficky zobrazit určité hodnoty, grafy jsou k tomu ideální. A protože už toho hodně umíme, dnešní generátor dynamických sloupcových grafů pro nás bude hračkou.

Popis

Pro tvorbu animovaných grafů samozřejmě existují i speciální nástroje. Jako zajímavého představitele zde můžeme vzpomenout Swiff Chart. Pokud se ale chceme vydat vlastní cestou a připravit si své originální grafy, budeme muset sednout ke klávesnici a napsat pár řádků kódu.

Jak se to možná zpočátku zdá složité, brzo zjistíme, že se jedná opravdu jenom o pár řádků kódu, které provádějí samotné vygenerování sloupcového grafu a jeho animaci. V našem případě pro vygenerování samotného grafu postačí pouze 11 řádek kódu. Ale jak to již bývá, nejvíce práce je s grafickým rozhraním, takže zbylých zhruba 60 řádků kódu se stará o větší atraktivnost grafu.

Schéma funkčnosti

Struktura grafu bude vcelku jednoduchá. Jak jsme si řekli, budeme tvořit graf sloupcový. Pro tento účel si vytvoříme objekt základního sloupce, který bude na výšku maximálně do 1px. Nakreslený „obdélník“ vložíme do MC, kterému na své ose přiřadíme funkci do enterFrame události. MC necháme v knihovně a pouze jej necháme exportovat.

Tvorba grafu probíhá tak, že budeme na scénu pomocí AS vkládat MC s obdélníkem. Pomocí funkce, kterou jsme do MC vložili, zajistíme plynulou změnu výšky obdélníku. Bylo by samozřejmě možné vytvořit graf bez přípravy MC a pomocí AS si jej nakreslit, ale náš postup je jednodušší a srozumitelnější.

Abychom si nemuseli čísla vymýšlet, vytvoříme si generátor náhodných čísel, který vytvoří v určitém rozmezí náhodné hodnoty, které vložíme do komponenty komboboxu. Volbou v této komponentě se zobrazí příslušné animované hodnoty.

Vytvoření grafu

Ale konec dlouhých úvodů, půjdeme do práce, čeká nás velmi zajímavý výsledek. Na začátku ještě upozorním, že řešení je v prostředí Flash 8, stejně jako zdrojový kód dnešní ukázky. Ovšem pokud kód použijeme ve starších verzí, bude bezproblémově fungovat, pouze přijdeme o některé prostorové efekty, které vytvoříme pomocí filtrů ve Flashi 8.

Objekt sloupce

Vytvoříme si nový symbol MC „graf1“, ve kterém nakreslíme malý obdélníček o výšce maximálně 1px a šířce zhruba 30px. Obdélníček převedeme na MC a pojmenujeme jeho instanci „sloupek“. Nad obdélníček vložíme dynamické textové pole, které pojmenujeme „num“. Bude nám sloužit pro zobrazení hodnoty sloupce.

Klepněte pro větší obrázek

Prvnímu snímku tohoto MC dáme následující akce:

this.onEnterFrame = function() {
 _level0.graf(this);
};
num.autoSize = "center";

Jak jsme si řekli, do události enterFrame dáme funkci, která se bude starat o dynamický nájezd sloupce grafu. Ještě jsme připsali kód pro textové pole, které se bude zarovnávat na střed a v případě delšího textu se bude plynule rozšiřovat na obě strany.

Nyní si v knihovně klikneme pravým tlačítkem na symbol „graf1“ a z menu zvolíme „Linkage“. Zaškrtneme „Export for Action Script„ a jako název napíšeme „graf“.

Vrátíme se na hlavní scénu, kam do levého horního rohu přetáhneme komponentu ComboBox. Na panelu vlastností ji pojmenujeme „kombo“. Nyní už můžeme přistoupit k vlastnímu kódu. Skočíme do toho rovnýma nohama a do prvního snímku hlavní osy napíšeme celý skript:

import flash.filters.DropShadowFilter;
import flash.filters.BevelFilter;
prostorDef = function (cil) {
 var distance:Number = 3;
 var angleInDegrees:Number = 45;
 var highlightColor:Number = 0xFFFFFF;
 var highlightAlpha:Number = .8;
 var shadowColor:Number = 0x000000;
 var shadowAlpha:Number = .8;
 var blurX:Number = 5;
 var blurY:Number = 5;
 var strength:Number = 1;
 var quality:Number = 3;
 var type:String = "inner";
 var knockout:Boolean = false;
 var filterb:BevelFilter = new BevelFilter(distance, angleInDegrees, highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX, blurY, strength, quality, type, knockout);
 var filterArrayb:Array = new Array();
 filterArrayb.push(filterb);
 cil.filters = filterArrayb;
 vzdalenost = 5;
 uhel = 45;
 barva = 0x000000;
 pruhlednost = 0.8;
 rozmazX = 5;
 rozmazY = 5;
 sila = 1;
 kvalita = 2;
 var filter:DropShadowFilter = new DropShadowFilter(vzdalenost, uhel, barva, pruhlednost, rozmazX, rozmazY, sila, kvalita);
 var filterArrayc:Array = new Array();
 filterArrayc.push(cil.filters[0]);
 filterArrayc.push(filter);
 cil.filters = filterArrayc;
};
maxH = 300;
maxVal = 500;
posuv = maxVal/maxH;
graf = function (target) {
 if (target.sloupek._height<target.hodnota/posuv) {
  target.sloupek._height += posuv;
  target.num.text = Math.round(target.sloupek._height*posuv);
  target.num._y = -1*target.sloupek._height-target.num._height;
  prostorDef(target);
 }
};
xpozice = 150;
ypozice = 350;
sloupcu = 0;
createGraf = function (poleHodnot) {
 for (i=0; i<sloupcu; i++) {
  eval("graf"+i).removeMovieClip();
 }
 hodnoty = new Array();
 hodnoty = poleHodnot;
 for (i=0; i<hodnoty.length; i++) {
  this.attachMovie("graf", "graf"+i, i);
  eval("graf"+i)._x = xpozice+2*i*eval("graf"+i)._width;
  eval("graf"+i)._y = ypozice;
  eval("graf"+i).hodnota = hodnoty[i];
 }
 sloupcu = hodnoty.length;
};
kombo.setStyle("themeColor", "haloOrange");
for (x=1; x<10; x++) {
 poleHodn = new Array();
 for (p=1; p<6; p++) {
  poleHodn.push(Math.random()*maxVal);
 }
 kombo.addItem("Graf"+x, poleHodn);
}

Nejdříve si připravíme filtry a funkci, která objektu přiřadí stín a filtr vyvýšení. Následuje nejdůležitější funkce, která se stará o animaci slupku grafu. Na tuto funkci se odkazujeme v MC „graf1“ který jsme si vytvořili. Ještě než funkci použijeme, vymezíme si maximální výšku „maxH“, které graf může dosáhnout a určíme maximální hodnotu, které může sloupec nabývat „naxVal“.

Následná funkce se stará o plynulý nájezd sloupce a stejně plynulý posuv textového pole, které ukazuje narůstající hodnotu sloupce.

Funkce „createGraf“ bude umístěná na komboBoxu a bude podle pole vložených hodnot generovat instance MC „graf1“.

Poslední funkcí naplníme komponentu jednotlivými položkami a jejich hodnotami. Nyní už jen vybereme komboBox a jemu na panelu akcí přiřadíme tento skript:

on (change) {
 _level0.createGraf(this.selectedItem.data);
}

Výsledek si můžete prohlédnout zde. Zdrojové soubory (F8+MX2004 verze) dnešní ukázky ke stažení zde.

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

2 komentáře

Nejnovější komentáře

  • Grifin 19. 1. 2006 16:32:18
    Chybi mi tam vlozeni AS na funkci grafu v MC graf1. Chvilku mi to trvalo...
  • gully, gully 5. 12. 2005 13:43:25
    http://diskuse-zaciname-s-flash-mx-2004.wz.cz
reklama
Určitě si přečtěte

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

** Herní hardware se od toho běžného často liší jen vzhledem ** Při výběru stále nezapomínejte na základní parametry ** Poradíme jak vybrat herní hardware i periferie

20.  2.  2017 | Stanislav Janů | 36

10 nejhorších produktů v historii Microsoftu

10 nejhorších produktů v historii Microsoftu

20.  2.  2017 | Karel Javůrek | 141

AMD oficiálně představilo procesory Ryzen. Známe i jejich české ceny

AMD oficiálně představilo procesory Ryzen. Známe i jejich české ceny

** AMD uvedlo první tři procesory Ryzen 7 ** Všechny budou pracovat s osmi jádry a šestnácti vlákny ** Na pulty obchodů se dostanou už za týden

22.  2.  2017 | Stanislav Janů | 132

Pojďme programovat elektroniku: Žádný bastlíř se neobejde bez armády švábů

Pojďme programovat elektroniku: Žádný bastlíř se neobejde bez armády švábů

** Každý bastlíř se po čase neobjede bez armády švábů ** Dnes si některé z nich vyzkoušíme ** Třeba zázračný posuvný registr

19.  2.  2017 | Jakub Čížek | 40

EU se děsí Windows 10. Prý o nás vědí až příliš. Microsoft chystá změny

EU se děsí Windows 10. Prý o nás vědí až příliš. Microsoft chystá změny

** Evropští úředníci chtějí, aby byly Desítky transparentnější ** Microsoft od jara skutečně chystá změny ** Ochráncům soukromí to ale nestačí

21.  2.  2017 | Jakub Čížek | 218

Remix Singularity: Microsoft si na tom vylámal zuby. Jak dopadne Android?

Remix Singularity: Microsoft si na tom vylámal zuby. Jak dopadne Android?

** Microsoft do svých telefonů integroval desktopové prostředí ** Moc to ale nevyšlo, chyběl pořádný výkon ** Teď to zkoušejí ex-googleři s Remix Singularity

23.  2.  2017 | Jakub Čížek | 74


Aktuální číslo časopisu Computer

Supertéma o počítačové bezpečnosti

AMD Ryzen přichází

Velké testy kinoprojektorů a levných špuntových sluchátek

Příslušenství do USB-C

reklama
reklama