Grafico Flash

[Lility]

Boa noite pessoal

Não tenho nenhuma noçao de Flash, mas preciso criar um grafico com ele pra um topo, sei que não é tão complicado, mas estou com bastante dificuldades.

O que preciso é um grafico simples de linhas que vai movimentando sobre uma imagem.

alguém pode me ajudar.

Obrigada

[Thelon]

O movimento vai ser feito por você ou de acordo com dados recebidos ?

[Lility]

Ola

Não tem necessidade de ter dados, apenas animação mesmo, só pra ilustrar e ficar mais bonito o topo.

Achei uns exemplos, mas esses tem dados, não tem necessidade.

http://www.globfx.com/products/swfchart/gallery/

Obrigada

[Pooh]

Olá Lility ^_^

Bom você ainda não especificou o 'tipo' de gráfico, já que a produção de um gráfico no flash não é generalizada é produzido um de cada vez;

Assim para nós não termos que fazer vários gráficos e saber qual você deseja, seria bom você informar exatamente qual é :)

Se não souber o nome recorra ao Microsoft Excel ou qualquer outro programa que gerencie dados e monte gráficos e procure pelo nome do gráfico escolhido.

Abraços

Pooh

[Lility]

Oie

Ah sim, na verdade pode qualquer tipo de grafico, um que fique legal no fundo que fiz. Um amigo me ajudou a fazer um de linha, mas não ficou muito legal.

Vou postar pra vocês poderem ter uma ideia.

Obrigada pela ajuda...

http://www.bsone.com.br/default.php

[Pooh]

Entendi então a idéia era apenas o gráfico como parte de uma animação :) agora você facilitou as coisas ^^

Devia ter falado q era banner ^_^

Bom fiz o script deles pra você :)

Você faz a introdução que seria a linhazinha crescendo e depois os pontos vão para o seu lugar.

Nesse script que fiz temos 2 arrays que controlam as posições desses pontos.

Ou seja você não precisa ficar sempre no mesmo gráfico ! pode até ser aleatório se quiser, tato o numero de pontos quanto as posições destes;

Tudo o que rpecisamos para funcionar aqui é um objeto que vai servir de ponto, na nossa biblioteca chamado (Ponto) e exportado para actionScript;

Não usei eventos assim esse código pode ser facilmente usado em AS2(mudando os parametros e a definição stage);

Aqui se encontra o código completo

this.stop();

//<TWEEN>
import gs.TweenLite;
import gs.utils.tween.TweenLiteVars;
import fl.motion.easing.*;
import gs.easing.*;
import flash.geom.Point;
//</TWEEN>

var Xpositions:Array = new Array(10,110,220,330,440,550); //AQUI TODAS AS POSIÇÕES X
var Ypositions:Array =new Array(-90,50,-50,50,0,-50); // AQUI TODAS AS POSIÇÕES Y A PARTIR DO MEIO
var Yzero:Number = (stage.stageHeight)/2;

var numPontos:Number = Xpositions.length;
var ponto:Ponto;
var i :uint;
var milite:MovieClip = new MovieClip();

var linhaTemporaria = setInterval(tempLine,50);

for(i=0;i<numPontos;i++){
ponto = new Ponto();
ponto.x = Xpositions[i];
ponto.y = Yzero;
ponto.pos = i;
ponto.name = 'a'+i;
ponto.Yfuturo = Yzero+Ypositions[i];
TweenLite.to(ponto,2,{y:ponto.Yfuturo}); //unica utilização de movimento :)

stage.addChild(ponto);
}


function tempLine(){
    
    
var pos:uint = Xpositions.length;
milite.graphics.clear();
for(var k:uint=1;k<numPontos;k++){
var ptAtual:Point = new Point(stage.getChildByName('a'+(k)).x,stage.getChildByName('a'+(k)).y);
var ptAtras:Point = new Point(stage.getChildByName('a'+(k-1)).x,stage.getChildByName('a'+(k-1)).y);

milite.graphics.lineStyle(1,0x000000,1);
milite.graphics.moveTo(ptAtras.x,ptAtras.y);
milite.graphics.lineTo(ptAtual.x,ptAtual.y);
}
stage.addChild(milite);

}

function limpaTemp(){
    clearInterval(linhaTemporaria);
    }

Agora vamos as entrelinhas do que é necessario entender ai dentro

import gs.TweenLite;
import gs.utils.tween.TweenLiteVars;
import fl.motion.easing.*;
import gs.easing.*;
import flash.geom.Point;

Esses imports se referem à classe de movimento que eu uso para o AS3 a TWEEN, tanto da adobe quanto externa 'TweenLite' e o Pontos q eu gosto de usar(uma unica variavel guarda 2 valores (x,y))

var Xpositions:Array = new Array(10,110,220,330,440,550); //AQUI TODAS AS POSIÇÕES X
var Ypositions:Array =new Array(-90,50,-50,50,0,-50); // AQUI TODAS AS POSIÇÕES Y A PARTIR DO MEIO
var Yzero:Number = (stage.stageHeight)/2;

Ai temos as declarações dos nossos pontos, se aqui estiver errado o programa já para aqui :P Xposisitons determina a posição X de cada ponto; Yposisitions determina a posição y de cada ponto a parti da linha central ou seja do meio do stage. Yzero é o centro de stage usado como referencia para Ypositions;

for(i=0;i<numPontos;i++){
ponto = new Ponto();
ponto.x = Xpositions[i];
ponto.y = Yzero;
ponto.pos = i;
ponto.name = 'a'+i;
ponto.Yfuturo = Yzero+Ypositions[i];
TweenLite.to(ponto,2,{y:ponto.Yfuturo}); //unica utilização de movimento :)

stage.addChild(ponto);
}

Esse laço cria todos os nosso botões e manda cada um para o seu lugar(Yfuturo)

var linhaTemporaria = setInterval(tempLine,50);

Cá está a nossa mágica ^_^ de acordo com a minha preguiça em procurar como se usar linhas no flash resolvi fazer um sistema de varredura, então assim a cada 50 milissegundos ele limpa todo mundo e recria as linhas, assim dando a impressão de que as linhas são ajustáveis pode diminuir esse tempo mas a performance não vai mudar muita coisa;

function tempLine(){
    
    
var pos:uint = Xpositions.length;
milite.graphics.clear();
for(var k:uint=1;k<numPontos;k++){
var ptAtual:Point = new Point(stage.getChildByName('a'+(k)).x,stage.getChildByName('a'+(k)).y);
var ptAtras:Point = new Point(stage.getChildByName('a'+(k-1)).x,stage.getChildByName('a'+(k-1)).y);

milite.graphics.lineStyle(1,0x000000,1);
milite.graphics.moveTo(ptAtras.x,ptAtras.y);
milite.graphics.lineTo(ptAtual.x,ptAtual.y);
}
stage.addChild(milite);

Aqui é onde limpamos nossas linhas e criamos novas :) Imagino que o código se explique, comecei a contagem a aprtir do 1 pois faço a linha do ponto anterior para o ponto atual, se usássemos o 0 qual seria o pnto anterior ? -1 não existe :P

function limpaTemp(){
    clearInterval(linhaTemporaria);
    }

Após tudo terminado elimino o Intervalo de 50 milissegundos de criação de linhas para não sobrecarregar seu banner;

Tcharam ! tens ai em mão um gráfico ajustável, imagino que não bem o que você gostaria de ter xD mas fazê-lo bonito ow não depende de você;

Para alterar o jeito da linha basta mexer em 'milite.graphics.lineStyle(1,0x000000,1);' (milite = Minha Linha Temporaria ^_^)

Aonde 1,0x000000,1:

1= espessura

0x000000 = cor

1 = alpha(transparencia)

Aqui vai também o código fonte, se precisar de outro tipo de gráfico poste aqui que tentaremos lhe ajudar novamente

Fonte:Teste Gráfico

Abraços

Pooh

Editado Junho 8, 2009 por Pooh