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

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.

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.