FÁBIO DUARTE (79 pts)

DAAFY (55 pts)

AUTOR DESCONHECIDO (100 pts)

ÉMERSON ROCHA (85 pts)

RODRIGO AMARAL (56 pts)

RÔMULO NUNES (32 pts)

LUI FERNANDO (151 pts)

DAUTON JANOTA (255 pts)

PANDOGO (82 pts)

BÁRBARA TOSTES (64 pts)

GUILHERME G.G. (137 pts)

DENIS CARAVALHO (85 pts)
Treinamento PontoFlash de Flash e ActionScript

Alguém poderia me dar uma explicação sobre instâncias de movieclip?

É possível fazer um upload de um arquivo através do flash?

Como justificar um texto e criar uma barra colorida?

Como faço para parar cada cena da minha animação, esperando a pessoa teclar ENTER ou qualquer tecla?

Como verificar atravéz do flashMX a resolução do monitor do usuário?

É possível referenciar um botão sem ser dentro de um movieclip?

Como faço para fazer um autorun?

Gostaria de arrastar um objeto em apenas uma área determinada da página.

Quicktime no Flash.

Como fazer um link para fechar uma animação?

Como poderia pegar as coordenadas de _x e _y do mouse?

Eu quero que uma imagem (bitmap) abra uma janela POPUP.

Preciso formatar valores numéricos em moedas, com dois caracteres depois da vírgula.

O que uso para movimentar e dar um efeito zoom num objeto?
Formulário usando Flash e PHP

Flash Communication Server MX - Primeira Parte

Criação de letras transparentes - Fireworks

Adicionar ao favoritos

Limitar por IP? Porque não utilizar o Shared Object do Flash?

Colisão (hitTest)

Movimento por meio de actionscript

Como fatiar um site modelo portal no Fireworks

Níveis dentro do Flash - Load Movie e Load Variables (segunda parte)

Relógio analógico

Rayoflight.

Tween Class
Bounce gravity glow

Ligth Balls

Menu cortina

Loader Total

Sashacircle 4

Catavento2

Barneys menu

DuplicateMC

shared Objects

Hexadecimal

Rayoflight

XML menu
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