SYDNEY GANHO (60 pts)

MAURO ROCHA TAVARES (40 pts)

DEMIS BUCCI (50 pts)

ZECA BALA (45 pts)

MANGOOST (80 pts)

JOÃO NETO (78 pts)

AMAURY BENTES (123 pts)

GABRIEL SPORCH (53 pts)

ÉMERSON ROCHA (85 pts)

EDUARDO WALMOTT (226 pts)

ALEXANDRE PORTO (1281 pts)

DAUTON JANOTA (255 pts)
Treinamento PontoFlash de Flash e ActionScript

Método sendAndLoad do objeto LoadVars mais fácil.

Como importar um texto de um TXT rolando no palco e parando no mouseOver e evitando o cache?

Tenho duas músicas no site, como crio um botão para mudar de música?

Que relação tem o tamanho do FLA e do SWF?

O que é um Path Absoluto e um Path Relativo?

Como mudar a cor de campos de texto no HTML?

Como configurar um fadeIn e um fadeOut em um arquivo de som?

Como substituir uma letra de uma string?

O que é e para que serve o método getBounds()?

Como é que faz para aparecer aquela animação de Carregando e a porcentagem?

Perguntas com quatro alternativas.

Como fazer um formulário no flash usando ASP?

Alguém poderia me dizer o que é streaming?

Como determinar um tempo de pausa numa animação?
Criando um verificador de campos de um formulário.

Flash MX 2004 - semelhanças com o modelo NET?

Aplicação simultânea de Fio e Sombra a bitmaps - Fireworks

Bolhas flutuantes.

Criando um Editor HTML com o MM Flash

Menu com tooltip usando actionscript.

ListBox no FlashMX.

Relógio analógico

Botões estilo Apple.com feito no PhotoShop

Fontes no Flash - campos de texto e HTML

Logo com aparência 3D - Fireworks

Janelas com abas.
Click Duplo

Sombras

Nudemask1

Rotação

Spiral show

Shot me

Pintar2

Mapa - Países com A 2

Cronômetro

Tornado

Mouse 3d

Slide desk
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