Criando Gráfico Dinâmico no FLASH com XML

[Adriano Moura 0]

ENSINAREMOS AQUI COMO CRIAR UM GRÁFICO DINÂMICO NO FLASH USANDO DADOS VIA XML, E VOCÊ AINDA PODE VINCULAR UM BANCO DE DADOS USANDO ASP OU PHP

 

 

Essa aqui é muito legal, alguém aqui já deve ter entrado no Google Analitycs, o sistema de analises da Google, se não conhece procure saber, é uma ferramenta muito util.

 

 

Quem conhece deve ter percebido nele uma gráfico dinâmico logo no Dashboard, que indica o número de acessos por dia.

 

 

o gráfico de linha no topo

 

 

 

Começando

 

 

Minhas ovelhas, deixemos de preguiça e mão na massa, é o seguinte primeiro iremos criar um novo arquivo Flash ActionScript 2.0, com as medidas de 800x150.

 

 

Tracem um retângulo preenchendo a tela inteira e o transformem em Movie Clip, marque o registration como superior esquerdo

 

Antes de editar o Movie Clip iremos fazer uma coisinha que será muito necessária para o funcionamento perfeito do gráfico, selecionem o Movie Clip e depois clique em Modify>Transform>Flip Vertical, nós precisamos inverter o Movie Clip Verticalmente, agora o ponto de Registration deve estar na parte inferior esquerda do Movie Clip, OK.

 

Irei explicar o porque de nós termos invertido daqui a pouco.

 

Estancie ele como Graf e de um clique duplo, apague o retângulo (ele só servia para demarcar espaço) e desenhe uma linha ocupando toda a área horizontal do Stage, defina a sua posição Y como 140,0 (nesse ela irá para o topo pois nos invertemos o MovieClip, lembra?) e trace outra linha igual com Y 10.

 

Perfeito essas duas linhas serviram como base e topo do nosso gráfico. Criem também um texto dinâmico com instância de top e alinhem com a linha de cima no lado direito, e um texto estatico escrito 0 alinhado a linha de baixo também no lado direito.

 

 

Vejam como deve estar seu Stage

 

no meu caso eu fiz a linha pontilhada mas é opção sua e no texto dinâmico eu escrevi 30, porém isso não fará a diferença

 

Agora criem um circulo com 10x10 ele será o ponto do nosso Gráfico, transforme ele em Movie Clip (não esqueça de colocar o registration no centro novamente).

 

Istancie ele como pt e deixe a posição Y dele como 10 e X pode ser qualquer valor negativo ou maior que 800, pois o mesmo terá que esta fora do Stage.

 

 

 

Agora iremos ao XML.

 

Abra o bloco de notas e cole o seguinte

 

<?xml version="1.0" encoding="utf-8"?>
<grafico>
<n>3</n>
<n>4</n>
<n>5</n>
<n>1</n>
<n>10</n>
<n>3</n>
<n>5</n>
<n>6</n>
<n>13</n>
<n>2</n>
<n>13</n>
<n>3</n>
<n>4</n>
<n>5</n>
<n>1</n>
<n>10</n>
<n>3</n>
<n>5</n>
<n>6</n>
<n>13</n>
<n>40</n>
<n>13</n>
<n>5</n>
<n>6</n>
<n>13</n>
<n>25</n>
<n>13</n>
<n>5</n>
<n>7</n>
<n>13</n>
<n>4</n>
<n>13</n>
</grafico>

 

Salve como dados.xml

 

 

Os nós <n> indicam os valores do gráfico começando do valor mais atual para o mais velho, como deve ser o Gráfico, e já que estamos trabalhando com Flash e XML você está livre para trabalhar com alguma linguagem dinâmica como ASP ou PHP, nós temos tutoriais aqui sobre isso aqui.

 

 

Agora vamos a programação

 

 

System.useCodepage = true; //usamos codificação para receber o XML

var MeuXML:XML = new XML(); //criamos o objeto XML

// Ignoramos todas as quebras de linhas e espaços entre os nós para não atrapalhar na interpretação do XML.
MeuXML.ignoreWhite = true;

// Este método será executado ao fim do carregamento dos dados ou em caso de erro.
MeuXML.onLoad = function($sucesso){

if($sucesso){

//maior representa o máximo valor do nosso gráfico, assim sabemos onde ele termina
maior = 0

//cria um array que guardará os valores do XML
pontos = new Array();

//loop de 0 a 30 para criarmos um grafico com 31 pontos, o valor pode mudar mas lembre-se também de corrigir os espaços abaix
for(i=0;i<30;i++) {

pontos[i] = MeuXML.firstChild.childNodes[i].childNodes[0].nodeValue //pegamos o valor do nó e colocamos no array

//se por acaso o valor do nó atual for maior que a variável maior nos guardamos ele na variável maior, e assim fazemos essa comparação a cada loop
if (int(pontos[i]) > maior) {
maior = pontos[i]
}
}

//c será usado para indicar o index do array
c=0

//mais um for porém agora de trás pra frente, pois o gráfico preenche do ultimo para o primeiro valor e assim também aparecera no gráfico
for(j=30;j>0;j--) {

//duplicamos o MovieClip pt (a bolinha criada no começo)
pt.duplicateMovieClip("pt"+j,j);

//pegamos a cópia do pt e posicionamos horizontalmente com 26 pixels de diferença (são 800 pixels totais / 30 itens do XML)
_root.graf["pt"+j]._x = 26 * (j-1)

//criamos um fator que definira a posição vertical do ponto com base no valor dele, esse fator faz com que independente do valor maximo do gráfico, os pontos sempre estejam em uma determinada escala e nunca saiam do gráfico
posY = (120/maior)*pontos[c]

//definimos a posição no pt criado com 20pixels a mais para que ele não fique grudado no rodape do flash
_root.graf["pt"+j]._y = posY+20

//passamos para o proximo registro.
c++

}

//agora criaremos a linha que ligará todos os pontos
createEmptyMovieClip("line_mc", 1);

//fazemos um loop para que ela passe por todos os pontos
for (t=2;t<30;t++) {

//T representa o ponto do qual partira a linha e o E para onde ela irá, no caso T+1
e = t+1

//criamos a linha
with(line_mc){

//definimos o estilo da linha
lineStyle(3, 0x333333, 100, true, "normal", "square", "bevel", 1);

//a linha começa no ponto X e Y do primeiro pt por exemplo pt1
moveTo(_root.graf["pt"+t]._x, _root.graf["pt"+t]._y);

//e vai até o ponto X e Y do segundo pt, por exemplo pt2
lineTo(_root.graf["pt"+e]._x, _root.graf["pt"+e]._y);

//damos loop para que repita-se com o pt3, pt4, ...
}
}


// escrevemos no texto dinamico top o valor do maior ponto
top.text = maior

}else{ // Em caso de erro

trace($sucesso);
trace("Ocorreu algum erro ao carregar os dados.");
}
}


// Carregar dados do XML.
MeuXML.load("dados.xml");

 

 

Uau, incrível, rodem e vejam que legal. Consigo ouvir vocês dizendo "Sinistro".

 

 

 

É isso, aqui existe o exemplo criado por mim, porém com um bônus especial, o valor aparece sobre ou abaixo da bolinha quando o mouse passa sobre ela. DOWNLOAD

 

 

Agora porque eu inverti o Movie Clip no começo?

 

Porque no Flash como em qualquer outro software que trabalhe com design a regua dele conta os pixels de cima para baixo, da esquerda para direita, e em um gráfico o ponto inicial vem da baixo para cima, e por isso eu inverti, pois senão a programação entenderia que as bolinhas começariam do topo para baixo.

 

 

Espero que vocês gostem e entendam, porque as vezes eu não explico assim tão bem, rsrsr

 

Coloquem suas dúvidas estou prontificado a ajudar

[Adriano Moura 0]

No meu Blog vocês encontram um novo tutorial com o gráfico acima interagindo com banco de dados, usando o ASP.

 

http://blogadrianomoura.blogspot.com/2010/04/criando-graficos-flash-xml-com.html

 

 

Mais tarde eu coloco esse tutorial para vocês aqui no iMasters