BÁRBARA TOSTES (64 pts)

LEANDRO AMANO (83 pts)

RICARDO TEIXEIRA (40 pts)

JOÃO NETO (78 pts)

DAAFY (55 pts)

FLASHGURU (155 pts)

EDUARDO CARREGA (150 pts)

DENIS CARAVALHO (85 pts)

JOTA LAGO (40 pts)

RÔMULO NUNES (32 pts)

SASHA GUDEY (235 pts)

NILTON BICALHO (61 pts)
Treinamento PontoFlash de Flash e ActionScript

Preciso de um botão que ao clicar feche um filme que funcione numa página HTML.

Flash 5 ou Flash 4?

Quero que uma animação de fotos seguidas fique em loop infinito.

Problemas com passar variáveis em um menu.

Como que faz para um gif ou uma imagem seguir o mouse?

Como duplicar um movieclip (duplicateMovieclip) e colocá-los abaixo do original?

Como dar um goto para um quadro de um movieclipe usando uma variável.

Existe alguma maneira de atualizar automaticamente um cálculo matemático?

É possível modificar um texto de acordo com a data do computador do usuário?

Qual é a diferença entre maxscroll e scroll? Quando uso um ou outro?

Como passar parâmetros para um arquivo swf por meio de uma página html?

Como faço para simular frames dentro do Flash? Sem HTML.

Quero colocar as propriedades _xmouse e _ymouse em só um campo dinâmico.

Como utilizar uma função para procurar valores dentro de uma variável?
A história do Flash.

Integrando o Flash com Tecnologias Externas.

Linha que segue o mouse.

Primeiros passos - desenhando e animando

Vídeo no FlashMX.

Detecção do FlashPlayer.

Utilizando o ScrollPane no Flash MX.

Imagem Pixel a Pixel no PhotoShop.

Gerando pop up's com conteúdo html dinâmico usando script client-side

Spectrum Analizer - Medidores de som

Gerenciando camadas no CorelDraw

Objeto array.
Caleidoscópio

3d All

Flying letters

Shared Object

Scroll dinâmico

Loop menu

Supermascara

Complex swap

Nudemask1

Drag gravity

Planeta girando

Spinner
HOME | TUTORIAIS
3D Wireframe - segunda parte
por Helen Triolo

Para duplicar a forma

Esta fornece a definição da primeira forma, uma representação duplicada plana da curva do usuário no plano xy (z=0). Então, sete duplicatas devem ser criadas, cada uma girada 45 graus daquela prévia em volta do eixo y (isto é, uma rotação no plano xz). Este é o código que cria a primeira daquelas duplicatas giradas:

// #2: mover 45 graus ao longo do eixo y
wireFrame.setShapeProps(1, {x:p0x*cos45, y:p0y, z:p0x*sin45},
                    [ new Curve( {x:p1x*cos45, y:p1y, z:p1x*sin45},
          {x:c1x*cos45, y:c1y, z:c1x*sin45} ),
                    new Curve( {x:p2x*cos45, y:p2y, z:p2x*sin45},
          {x:c2x*cos45, y:c2y, z:c2x*sin45} ),
                    new Curve( {x:0, y:p3y, z:0},
          {x:c3x*cos45, y:c3y, z:c3x*sin45} ) ],
                    false, 1, 0xffffff, 100, 0, 0);

onde cos45 e sin45 são variáveis pré-calculadas, de tal maneira que os cálculos não precisam ser feitos a cada vez. A melhor maneira que eu posso pensar para descrever de onde os valores acima vieram é imaginar olhar para baixo o objeto do topo. Queremos projetar no plano z um valor que é seno(45) vezes o valor x original, e determinar o valor x para cos(45) do que ele era originalmente. Se você pensar como faria uma rotação 2D no plano xy ao redor do ponto (0,0) e então, ao invés, converter isso para o plano xz (onde o eixo de y representa o ponto 0,0), é isso que está sendo feito no código para produzir uma rotação ao redor do eixo de y.

O que está acima é repetido 6 vezes mais no código (dentro da função makeFrame) para fazer surgir um total de 8 formas, simetricamente dispostas ao redor do eixo y. Note que criamos as formas como elas existirão no atual espaço 3D. Em seguida precisamos convertê-las em suas projeções equivalentes dentro do espaço 2D, e assim elas podem ser mostradas e parecer como objetos 3D. Mas, antes que esta conversão seja feita, precisamos criar círculos horizontais que formam as peças cruzadas do objeto Wireframe.

Para encontrar pontos ao longo da curva bezier

Porque nossa forma vertical inicial consiste de uma série de 3 curvas quadráticas bezier, necessitamos de um modo de achar pontos ao longo dessas curvas para então podermos colocar formas horizontais (círculos) nesses pontos. Isto é feito pela utilização de uma equação matemática que define uma curva bezier como uma série de pontos no tempo, onde o início da curva é definido por t=0 e o fim por t=1. Infelizmente, eqüidistância no tempo ao longo da curva não é equivalente a eqüidistância no espaço (existem mais pontos numa parte fortemente curvada do que numa parte reta), mas, para nossos propósitos de mostrar um quadro do objeto, as linhas não têm que ser exatamente sempre espaçadas. Decidimos dividir cada curva em 3 seções, desenhar círculos no plano z em t=0, t=0.33 e t=0.67. A equação padrão para achar um ponto no tempo t ao longo da curva bezier é:

// p0 is initial point, c1 is control point, p1 is endpoint
// x(t) = p0x * (1-t) * (1-t) + 2 * c1x * t * (1-t) + p1x * t * t
// y(t) = p0y * (1-t) * (1-t) + 2 * c1y * t * (1-t) + p1y * t * t

a qual tem sido otimizada com umas poucas operações de multiplicação pelo "Homem Que Não Pode Deixar Nenhuma Equação Não Otimizada", Robert Penner, dentro dessa forma (aqui convertida em um método que pega e retorna objetos x/y):

Math.pointOnCurve = function (p0, c1, p1, t) {
   return {
      x:p0.x + t*(2*(1-t)*(c1.x-p0.x) + t*(p1.x - p0.x)),
      y:p0.y + t*(2*(1-t)*(c1.y-p0.y) + t*(p1.y - p0.y))
   };
};

Isto é chamado três vezes para cada curva dentro da função makeFrame.

Para projetar no espaço 2D

A projeção da definição 3D para o espaço 2D é onde as matrizes entram (esta é a parte do código que tomei e converti do tutorial do Chad). Começamos por definir a matriz transformadora (aqui definida como uma propriedade do objeto Math) para ser uma matriz identidade (uma estrutura de 3 vetores que, quando usada como um multiplicador com outra matriz, deixa a matriz original intacta). É isso o que o método initTMatrix da classe Math faz.

Toda vez que queremos redesenhar nossos vetores 3D no espaço 2D (uma vez por quadro neste exemplo), chamamos a função redesenhar, que configura a matriz transformadora baseada no montante da rotação em cada direção (x/y/z) especificada pelos botões de rotação, e então, chama o método renderScene do objeto wireFrame. setTMatrix (um método Math), calcula uma nova matriz transformadora pela multiplicação da matriz de transformação corrente por uma nova matriz determinada por xvar/yvar/zvar e a variável, que tenho chamado de spinRate (ajustada para 200 aqui). renderScene (um método do wireFrame) aplica a nova matriz transformadora para cada ponto em cada uma das formas para permitir que seja mostrada no espaço 2D.


Para começar a rotação

Neste filme, o objeto 3D wireframe é ajustado para começar a girar 5 graus em cada direção pela configuração de xvar, yvar e zvar cada, para mais ou menos cinco. A rotação pode ser acelerada ou reduzida em qualquer direção clicando-se várias vezes nos botões de mais ou menos rotação (o efeito é cumulativo porque a matriz de transformação é mudada de seus valores prévios em cada quadro, não de um valor inicial). Como mencionado acima, o código no botão de reinicializar reajusta a matriz transformadora para uma matriz de identidade, desenha o objeto uma vez sem rotação, e interrompe a rotação apagando a propriedade _root onEnterFrame. O código e o fla para este filme pode ser baixado aqui.

Tradução:
Sérgio Ramalho



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
0 comentário