| ANIMOVANY GRAF as3 |
|
Tento tutoriál vám ukáže ako vytvoriť jednoduchý animovaný graf za použitia iba actionscript 3.0. Tento príklad pracuje s piatimi grafmi
ale môžete pridávať alebo odoberať ďalšie ako uznáte za vhodné. Na konci by ste mali dostať niečo podobné tomuto:
Všetko čo potrebujeme je actionscript 3.0 dokument. Všetko ostatné je vytvorené len za pomoci actionscriptu. Označte prvý frame a otvorte actions okno ( zmačknite F9 ). Teraz vložte nasledujúci actionscript kód:
var startX:Number=10;
var startY:Number=220;
var sirka:Number=25;
var vyska:Number=0;
var n:Number=0;
var grafData:Array=[{val:120,col:0xFF0000},{val:200,col:0x00FF00},
{val:55,col:0x0000FF},{val:171,col:0xFFFF00},
{val:23,col:0x9900FF},{val:91,col:0xF0F0F0}];
stage.addEventListener(Event.ENTER_FRAME,KRESLI);
var mojGraf:Shape = new Shape();
function KRESLI(e:Event) {
mojGraf.graphics.beginFill(grafData[0].col);
mojGraf.graphics.drawRect(startX+(0*35),startY,sirka,(vyska/100)*grafData[0].val);
mojGraf.graphics.endFill();
mojGraf.graphics;
addChild(mojGraf);
mojGraf.graphics.beginFill(grafData[1].col);
mojGraf.graphics.drawRect(startX+(1*35),startY,sirka,(vyska/100)*grafData[1].val);
mojGraf.graphics.endFill();
mojGraf.graphics;
addChild(mojGraf);
mojGraf.graphics.beginFill(grafData[2].col);
mojGraf.graphics.drawRect(startX+(2*35),startY,sirka,(vyska/100)*grafData[2].val);
mojGraf.graphics.endFill();
mojGraf.graphics;
addChild(mojGraf);
mojGraf.graphics.beginFill(grafData[3].col);
mojGraf.graphics.drawRect(startX+(3*35),startY,sirka,(vyska/100)*grafData[3].val);
mojGraf.graphics.endFill();
mojGraf.graphics;
addChild(mojGraf);
mojGraf.graphics.beginFill(grafData[4].col);
mojGraf.graphics.drawRect(startX+(4*35),startY,sirka,(vyska/100)*grafData[4].val);
mojGraf.graphics.endFill();
mojGraf.graphics;
addChild(mojGraf);
vyska-=2;
if (vyska<-100) {
stage.removeEventListener(Event.ENTER_FRAME,KRESLI);
}
}
var grafHodnota0:TextField = new TextField();
var grafHodnota1:TextField = new TextField();
var grafHodnota2:TextField = new TextField();
var grafHodnota3:TextField = new TextField();
var grafHodnota4:TextField = new TextField();
while(n<5){
this["grafHodnota"+n].width=25;
this["grafHodnota"+n].textColor=0x000000;
this["grafHodnota"+n].y=startY;
this["grafHodnota"+n].text=grafData[n].val;
this["grafHodnota"+n].x=startX+(n*35);
addChild(this["grafHodnota"+n]);
n++;
}
Prvých päť riadkov sú premenné použité v scripte ako začiatočná poloha prvého grafu (X,Y), šírka jednotlivých grafov a vzdialenosť medzi nimi. Riadok 7 je pole ktoré obsahuje všetky vstupné informácie.
V tomto prípade je to hodnota a farba každého z grafov. Môžete tieto hodnoty vkladať manuálne, alebo ich načítať z externého zdroja, to je len na vás. Riadok 11 vytvorí event listener ktorý spúšťa KRESLI funkciu vždy keď sa načíta frame.
Riadok 12 je definícia nového shape objektu, v tomto prípade sú to obdľžniky ktoré budeme vykresľovať v nasledujúcej funkcii. Riadky 16-20 vytvoria jeden obdĺžnik (z piatich v tomto prípade). BeginFill nastaví farbu tohto grafu, drawRect nakreslí
obdĺžnik s týmito parametrami (pozícia X, pozícia Y, šírka, výška). EndFill ukončí vyplňovanie obdĺžnika a posledné dva riadky tejto sekcie potom vložia tento obdĺžnik na scénu. Duplikovaním tejto sekcie
päť krát vytvoríme päť grafov. Zmenou hodnôt v grafData[x] bude mať každý graf hodnotu a farbu zodpovedajúcu dátam v grafData poli. Táto funkcia beží až kým výška nedosiahne 100 (záporné hodnoty zabezpečia to že graf bude narastať zdola nahor a nie naopak)
Riadky 58-66 vytvoria popisky k jednotlivým grafom s ich hodnotami.
|