DANIELA PIRES (86 pts)

ILVA RUDEV (90 pts)

BÁRBARA TOSTES (64 pts)

GABRIEL SPORCH (53 pts)

MAURO ROCHA TAVARES (40 pts)

DAUTON JANOTA (255 pts)

MUZAK (45 pts)

DENIS CARAVALHO (85 pts)

FLASHGURU (155 pts)

IRAPUAN MARTINEZ (45 pts)

JONAS GALVEZ (521 pts)

GUILHERME G.G. (137 pts)
Treinamento PontoFlash de Flash e ActionScript

Como fazer um contador regressivo de data?

Como carrego os vários filmes que utilizarei no meu flash em apenas um preload?

Gostaria de fazer dois olhos 'olhando' para o mouse.

Porque meu texto não aparece dentro de uma máscara?

Como encontro o valor da Hipotenusa de um triângulo com AS?

Como faço pra adicionar uma site a meus favoritos via actionscript?

Como posso fazer uma validação de CPF?

Posso criar um link dentro de uma caixa de texto?

Dicas para seu movie ficar mais enxuto.

Porque um loadVariables não funciona dentro de um movieclip?

Como eu faco pra chamar um movie clip diretamente da Biblioteca?

Tem como colocar numa máscara um moviclip gerado dinamicamnente via attachMovie?

Como simular uma animação de um círculo sendo criado dinamicamente?

Como faço o loading bem simples?
Como arredondar os cantos de uma foto no Fireworks.

Unindo e separando traçados - Fireworks

Desenhando apenas com Actionscript.

Conceitos de Programação e ActionScript.

Efeito lente (máscara e zoom)

Tratamento de um bitmap PNG com o PhotoShop.

Abrir PopUp no Flash com JS e ASP.

Usando XML com Fireworks MX.

Flash e X-Technologies · A Nova Ordem do Mundo?

Degradé com tons metálicos - Fireworks

Introdução ao Droptarget

Busca em Textos no Flash MX
Fakeload

Blur

Loop menu

Calculadora

Spiral menu

Galho

Message Board Flash+ASP

Ir e voltar

Regressivo

Engrenagens 1

Planeta orbita

Duplicate MC
HOME | TUTORIAIS
Gráfico pizza.
por Helen Triolo

Como é que você pode plotar um gráfico com dados que mudam? Leia os dados dentro de arrays e use o método duplicateMovieClip e/ou attachMovieClip para representar a percentagem de cada seção do gráfico, desenhe os símbolos chave correspondentes e os títulos das categorias.



Crie o movieclip da "fatia da pizza" para ser duplicado:

Para desenhar cada uma das seções do gráfico de pizza, ela deve ser dividida em 100 fatias (cada fatia = 1% do total). Quer dizer, cada fatia deve representar 1/100 de um círculo de 360 graus, ou 3.6 graus. Assim, para criar nossa fatia, começamos com um círculo, uma linha horizontal que corta o centro do círculo, e outra linha que é uma cópia da horizontal, porém, girada 3,6 graus no sentido contrário dos ponteiros do relógio (use a caixa Rotate no painel Transform para fazer isso exatamente). Então, apagamos a parte que não queremos, preenchemos a fatia e convertemos as linhas para preenchimentos (Modify, Convert, Lines to Fills). A fatia é convertida para um movieclip (F8), a instância é arrastada para fora do palco, e determinamos para a instância o nome mcPie.

Crie o símbolo chave e os movieclips de categoria:

Para criar uma legenda que vá com o gráfico pizza, crie um símbolo chave que será duplicado nas mesmas cores das fatias de pizza. Desenhe um quadrado com 8x8 pixels, converta-o em um movieclip e o arraste fora do placo. Dê a ele um nome de instância mcKey. Para a categoria movieclip, usamos o attachMovieclip no lugar de duplicateMovieclip, somente para mostrar como é usado (poderá ter sido feito do mesmo modo que o duplicateMovieclip neste caso).

   Para criar o movieclip category, criamos um campo de texto, fazendo-o dinâmico, com apenas uma linha, name=tfCategory (no painel Text Options) e ajuste-o para _sans 8 (no painel Character). Após converter isto para um movieclip "category", o apagamos completamente do palco. Um movieclip que vai ser anexado não precisa estar presente no palco, mas deve estar na biblioteca e exportado corretamente - para fazer isto, clicamos com o botão da direita do mouse sobre categoria na biblioteca e ajustamos o Identifier para mcCategory e o Linkage para exportar este símbolo.

Entre com o código no Frame Actions para o quadro 5:

aCount = new Array(20, 5, 50, 37, 10);
aColor = new Array(0x0000cc, 0x669999, 0xcc66cc, 0x00cccc, 0x9933cc);
aCategory = new Array("blue","green","pink","aqua","fuschia");
nElements = aCount.length;
aPercent = new Array(nElements);
nDepth = 1;
// Calculate total
for (i=0; i < nElements; i++) {
   nTotal += aCount[i];
}
// Calculate percents
for (i=0; i < nElements; i++) {
   aPercent[i] = math.round((aCount[i]/nTotal)*100);
   nTotalPercent += aPercent[i]; // keep for later fix
   if (i < nElements-1) {
      nAllButLast += aPercent[i];
   }
}
// Fix for possible rounding error
if (nTotalPercent != 100) {
   aPercent[nElements-1] = 100 - nAllButLast;
}
nRunningSum = 0;
for (i=0; i < nElements; i++) {
   // duplicate key symbol and set to correct color
   mcKey.duplicateMovieClip ("mcKey"+i, nDepth++);
   _root["mcKey"+i]._x = 110;
   _root["mcKey"+i]._y = i*20+8;
   tempColor = new Color(eval("mcKey" + i));
   tempColor.setRGB(aColor[i]);
   // attach category text movieclip and set to correct category
   _root.attachMovie ("mcCategory", "mcCategory"+i, nDepth++);
   _root["mcCategory"+i].tfCategory = aCategory[i];
   _root["mcCategory"+i]._x = 120;
   _root["mcCategory"+i]._y = i*20+8;
   // duplicate slice until percent is complete, set color
   for (j=0; j < aPercent[i]; j++) {
      mcPie.duplicateMovieClip ("mcPie"+i*nElements+j, nDepth++);
      _root["mcPie"+i*nElements+j]._x = 53;
      _root["mcPie"+i*nElements+j]._y = 53;
      _root["mcPie"+i*nElements+j]._rotation = nRunningSum - 3.6;
      nRunningSum -= 3.6;
      tempColor = new Color(eval("mcPie" + i*nElements+j));
      tempColor.setRGB(aColor[i]);
   }
}
stop ();

Adendo: Como Will Prater apontou em um email, no lugar de uma eval na instrução que cria um novo objeto de cor, podemos, ao invés, usar a função targetPath para obter a mesma coisa:

tempColor = new Color(targetPath(this["mcPie"+i*nElements+j]));

Como um gráfico de pizza pode ser criado da leitura de dados a partir de um arquivo externo .txt.


baixar arquivo

Para ler dados de um arquivo externo, necessitamos adicionar um clipe controlador para ler dados dentro de um filme e convertê-lo, e necessitamos criar um arquivo de texto com três variáveis (contagens, cores e categorias) que serão lidos dentro das arrays.

Este é o conteúdo do nosso arquivo arrayinfo.txt:

countValues=20,5,50,37,10
&colorValues=0000cc,669999,cc66cc,00cccc,9933cc
&categoryValues=blue%20pens,green%20pens,
pink%20pens,aqua%20pens,fuschia%20pens

(mas sem nenhuma quebra de linha no arquivo atual). Também adicionamos um movieclip controlador em branco ao filme e colocamos uma instância dele no quadro 1. Este é o código naquele clipe, que lê os dados de um arquivo externo e o converte para um formato utilizável pelo seu filme original (que começa no quadro 5):

onClipEvent(load) {
   this.loadVariables("arrayinfo.txt");
}
onClipEvent(data) {
   // uma vez lidos os dados, converta-os emarrays
   aCount = countValues.split(",");
   aColor = colorValues.split(",");
   aCategory = categoryValues.split(",");

   // altere aCount para valores numéricos
    for (var i in aCount) {
      aCount[i] = Number(aCount[i]);
   }

    // altere os valores de cor de hexadecimais para numéricos

   for (var i in aColor) {
      aColor[i] = parseInt(aColor[i], 16);
   }

    // Copie todas as variáveis para a timeline principal (assim as
   // actions no frame 5 não precisam ser modificadas)

    for (item in this) {
      _root[item] = this[item];
   }

    // o filme continua
    _root.gotoAndStop("draw");
}

Tente mudar qualquer dos valores de cores ou outros números no arquivo txt, ou mesmo o número total dos valores, para ver as mudanças produzidas quando o swf está rodando.

Tradução:
Alexandre Porto



Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
2 comentários


Comentário de mario
| 21/3/2011 - 16:37 |


link quebrado http://www.pontoflash.com.br/tutoriais_con.php?autor=10&tema=3&post=191



Comentário de nil
| 17/2/2011 - 15:14 |


link quebrado