buëno

Bem-vindo(a) ao meu mundo.

October 14th, 2009

Assunto:

Metódo para criar gráficos dinâmicos utilizando dados obtidos de um XML.

ActionScript:

Versão 2.0

Código AS:

#include "mc_tween2.as"
import mx.effects.Tween;
 
corpo0._alpha = 0;
 
System.useCodepage = true;
var graf_xml:XML = new XML();
graf_xml.ignoreWhite = true;
graf_xml.onLoad = function(ok:Boolean) {
 if (ok) {
  trace("Arquivo XML encontrado.");
  gerarGrafico(this.firstChild.childNodes);
 } else {
  trace("Arquivo XML não encontrado.");
 }
};
graf_xml.load("grafico.xml");
 
function gerarGrafico(xmlNode) {
 var len:Number = xmlNode.length;
 var total:Number = 0;
 var perc:Number = 0;
 for (i=1; i<len; i++) {
  this.corpo0.duplicateMovieClip("corpo"+i,getNextHighestDepth());
  this.texto0.duplicateMovieClip("texto"+i,getNextHighestDepth());
 }
 for (a=0; a<len; a++) {
  total += parseInt(xmlNode[a].childNodes[0].childNodes);
  this["corpo"+a].valor = parseInt(xmlNode[a].childNodes[0].childNodes);
  this["corpo"+a]._x = (this.corpo0._x)+(a*(this["corpo"+a]._width+20));
  this["corpo"+a]._alpha = 0;
  this["corpo"+a]._yscale = 0;
  this["corpo"+a].id = a;
  this["texto"+a]._x = this["corpo"+a]._x+(this["corpo"+a]._width/2)-(this["texto"+a]._width/2);
 }
 for (j=0; j<len; j++) {
  perc = Math.round((this["corpo"+j].valor*100)/total);
  this["corpo"+j].perc = perc;
  this["corpo"+j].alphaTo(100,0.3);
  this["corpo"+j].tween = new Tween(this["corpo"+j], 100, perc, 1500);
  this["corpo"+j].enabled = false;
  this["corpo"+j].onTweenUpdate = function(p) {
   _root["texto"+this.id].s_txt.text = this.perc+"%";
   if (this.perc<0) {
    _root["texto"+this.id]._y = this._y+this._height+_root["texto"+this.id]._height;
   } else {
    _root["texto"+this.id]._y = this._y-this._height;
   }
   this._yscale = p;
  };
  this["corpo"+j].onTweenEnd = function(p) {
   this.onTweenUpdate(p);
   this.enabled = true;
  };
 
  this["corpo"+j]._color = new Color(this["corpo"+j]);
 
  this["corpo"+j].onRollOver = function() {
   this._color.setTransform({rb:204, gb:0, bb:0});
   this.onRelease = function() {
    titulo_txt.text = xmlNode[this.id].childNodes[1].childNodes;
    valor_txt.text = "QTDE: "+xmlNode[this.id].childNodes[0].childNodes+" - PORCENTAGEM: "+this._yscale+"%";
    desc_txt.text = xmlNode[this.id].childNodes[2].childNodes;
   };
  };
  this["corpo"+j].onRollOut = this["corpo"+j].onReleaseOutside=function () {
   this._color.setTransform({rb:0, gb:0, bb:0});
   info_txt.removeTextField();
  };
  this["corpo"+j].tween.easingEquation = mx.transitions.easing.Elastic.easeOut;
 }
}

Código XML:

<?xml version="1.0" encoding="utf-8"?>
<grafico>
 <dado>
  <valor>235</valor>
  <titulo>TITULO1</titulo>
  <desc>DESCRICAO1</desc>
 </dado>
 <dado>
  <valor>150</valor>
  <titulo>TITULO2</titulo>
  <desc>DESCRICAO2</desc>
 </dado>
 <dado>
  <valor>183</valor>
  <titulo>TITULO3</titulo>
  <desc>DESCRICAO3</desc>
 </dado>
</grafico>

DOWNLOAD:

Arquivo fonte (121)

Leave a Reply