Gráfico de barras com ActionScript

Autor:  Leandro Menezes Ferreira (Durang)

“resolvi fazer um tutorial para gerar um gráfico a partir de um arquivo externo .txt, logo pensei em duplicateMovieClip com for. Esse tipo de raciocínio do que usar é adquirido aprendendo o potencial da ferramenta e tendo um pouco de criatividade, não tem segredo. comecei fazendo o seguinte:

valor = [20, 50, 100]

Isso cria uma matriz com os valores 20, 50 e 100, são os valores que serão utilizados pra fazer a barra, como o arquivo seria carregado de um txt, achei melhor fazer assim:

valor = “20 50 100″
valor = valor.split(” “)

Isso faz com que seja necessário puxar apenas uma variável com os valores separados por um espaço, o split separa a string valor a cada espaço (daí que veio o ” ” no parâmetro do split) e cria uma array chamada valor por cima da original com as separações. o resultado de valor, no final das contas, é equivalente ao quando eu criei a array, o próximo passo foi criar o for:

valor = “20 50 100″
valor = valor.split(” “)
for(a=0; a<valor.length;a++) {

}

Com isso criei um loop entre todos os itens da matriz valor. como disse, minha idéia original era usar duplicateMovieClip pra fazer o gráfico, então criei no palco um movieclip com nome de instância “barra” e o gráfico da barra, tendo como centro do movieclip o canto inferior esquerdo:

O próximo passo foi criar o duplicateMovieClip:

valor = “20 50 100″
valor = valor.split(” “)
for(a=0; a<valor.length;a++) {
barra.duplicateMovieClip(”barra”+a, a+1)
}

Com isso criei um movieclip a cada item da matriz valor, com nome de insância barra0, barra1.. e nível 1, 2.. depois de criar os movieclips, a próxima coisa a se fazer é deixá-los na posição certa:

valor = “20 50 100″
valor = valor.split(” “)
for(a=0; a<valor.length;a++) {
barra.duplicateMovieClip(”barra”+a, a+1)
eval(”barra”+a)._x += (barra._width+5)*a
}

O eval serve pra dizer dinamicamente qual o nome de instância do movieclip que quero trabalhar, no caso os movieclips duplicados barra0, barra1.. em cada um deles, defini a posição x como sendo a posição x do movieclip barra mais a largura do movieclip barra mais 5 pixels de distância entre cada barra, tudo isso vezes a variável do for. fazendo as contas, ficaria o 1º movieclip na mesma posição, o 2º à direita com 5 pixels de folga do primeiro, etc. agora falta definir a altura do movieclip de acordo com o valor de porcentagem:

valor = “20 50 100″
valor = valor.split(” “)
for(a=0; a<valor.length;a++) {
barra.duplicateMovieClip(”barra”+a, a+1)
eval(”barra”+a)._x += (barra._width+5)*a
eval(”barra”+a)._yscale = valor[a]
}

Isso define a altura do movieclip em porcentagem (sendo 100% a altura original) do movieclip, cada um de acordo com seu respectivo item da matriz.Por fim, deixo o movieclip barra invisível, já que ele está apenas atrapalhando.

valor = “20 50 100″
valor = valor.split(” “)
for(a=0; a<valor.length;a++) {
barra.duplicateMovieClip(”barra”+a, a+1)
eval(”barra”+a)._x += (barra._width+5)*a
eval(”barra”+a)._yscale = valor[a]
}
barra._visible = false

Assim temos um script simples e dinâmico, com apenas 8 linhas…”

Autor:  Leandro Menezes Ferreira (Durang)