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
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 retangulo preenchendo a tela inteira e o transformem em Movie Clip, marque o registration como superior esquerdo
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 retangulo 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
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
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.
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>40</n>
<n>13</n>
</grafico>
<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>40</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.
4 comentários:
Olá, o seu gráfico fica invertido, mesmo os valores, aparecem de trás paraa frente. Gostaria de saber como faço para aparecer normal.
Obrigado mas já consegui fazer a alteração.
Só que agora gostava de saber como retiro a visibilidade do ponto que aparece fora do palco para que não apareça caso faça maximzar
A idéia do ponto fora na verdade é um pouco ineficiente, creio que haja um melhor jeito de fazer. Porém vc pode alterar o alpha dele para 0, e assim deixalo invisivel
Fiz tudo como segue o tutorial mais o gráfico não funcionou, tentei baixar o arquivo para analisar mais o link está com erro tem como passar outro link? meu e-mail adrianogois@visualneti.com.br
Postar um comentário