RICARDO FIGUEIRA (33 pts)

RICARDO TEIXEIRA (40 pts)

DAUTON JANOTA (255 pts)

NILTON BICALHO (61 pts)

DAAFY (55 pts)

MANGOOST (80 pts)

SASHA GUDEY (235 pts)

JOTA LAGO (40 pts)

JOÃO NETO (78 pts)

STICKMAN (155 pts)

LEANDRO AMANO (83 pts)

GÉRIO (93 pts)
Treinamento PontoFlash de Flash e ActionScript

Como armazenar dados em uma base de dados para só depois serem importadas para o Access?

Com load movie into target, tem como carregar um SWF dentro de outro SWF?

Como posso arrastar um movieclip de forma que ele mude a sua instância conforme a área de target em que cair?

Quero um cursor customizado apenas numa área específica.

Como eu simulo frames no Flash?

Como tirar o menu do FlasPlayer que se abre quando se clica com o botão direito do mouse?

Quero que o usuário determine o tempo que um arquivo de som fique tocando.

Exemplo de digitação de texto, com simulação de backspace.

Como enviar comandos para uma variável aberta com loadVariables?

Eu gostaria de saber como faz o efeito de desfoque nos objetos!!

Como rolar umas imagens na horizontal, de maneira que elas se repitam continuadamente?

Quero que um movieclip filho cheque a colisão (hitTest) com um terceiro colocado na timeline principal.

Como fazer um formulário no flash usando ASP?

Como faço para inserir um contador em uma cena do flash?
Transparência no Flash.

Labirinto - Plataforma de jogo em terceira pessoa em flash 5: 1° parte

Compartilhando fontes

Texto difuso

Jogo da Forca

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

Uso da tecla tab num formulário Flash.

Como criar um site totalmente dinâmico em Flash MX

Um contador Flash + PHP

Variáveis de arquivos de texto.

Jogo da Forca (terceira parte)

Shake - navegador tremendo.
Frame navegação

Load tween

Menu aberto

Slide menu fotos

Book of pages

Focus

Rotação

Load dinâmico de fotos

Double cube

Menu Flash e XML

Menu móvel

Fogos de artificio
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