Papervision 3D + TweenLite

Nesse tutorial vamos trabalhar com Tweenlite + Papervision, para trabalhar com esse esquema é bastante simples, basta importar as classe do Tweenlite e + Papervision para o nosso projeto, que ficará da seguinte forma :

esquemapapertweenlite

Papervision a pasta : org
O link para baixar as classes do papervision clique aqui.

Tweenlite a pasta : gs
O link para baixar as classes do Tweenlite clique aqui.

Para mais detalhes sobre papervision veja os posts:

TUTORIAL PAPERVISION 3D 2.0

PAPERVISON 3D – OBJECTS PRIMITIVE

PAPERVISION 3D – MATERIALS(MATERIAIS)

Para mais detalhes sobre Tweenlite veja os posts:

TWEEN LITE

Para desenvolver esse tutorial vou trabalhar com flash IDE(bom e velho cs3) + flash develop, mas você pode utilizar só o flash, jogando direto no fla o código ou criando um arquivo AS3, mas para códificação eu indico o flashdevelop.
Voltando para na nossa ide vou criar três movieClips: letraM, letraA, letraR; para os três vou utilizar o mesmo nome para o linkage: letraM, letraA, letraR, como na imagem abaixo:

tutorialtweenpaper

Vou criar uma class “Interatividade.as” e agora vamos para o código:

Para testar nosso filme temos que atrelar nossa classe ao arquivo fla.
no meu exemplo eles estão na mesma pasta, fla e as então utilizamos como na imagem abaixo

tutorialtweenpaper_2

o código acima já está comentado, a estrutura é a mesma inicializa os objetos, aplica os materiais aos Objetos primitivos, adiciona os objetos a cena e por fim renderiza o filme. O adicional é que no final do construtor utilizamos a Classe TweenLite. E o resultado que temos é o seguinte :

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2009/07/interatividade.swf w=450 h=300]

Lembrando a classe de Tween sem a renderização não funciona.

Esse post é bastante simples, vamos tentar complicar nos próximos posts.
Até breve…

Tutorial PaperVision 3D 2.0

Olá pessoal nesse post eu vou falar sobre Papervision 3D(obs. esse post está em rascunho desde o ano passado), ela é uma engine que simula um ambiente 3D dentro do flash com um conjunto de classes que através de cálculos gera um ambiente altura, largura e profundidade.Mas lembrando que a nova versão do flash já tem um suporte nativo para 3D.

Atualmente existem várias engines 3D no mercado, sendo Papervision a mais popular. Com essa engine podemos trabalhar com formas como: planos , cubos , cilindros, cones e objetos complexos, exportados por ferramentas 3D, por exemplo, Blender.

Mais informações no site do projeto no google code: http://code.google.com/p/papervision3d/

Blog oficial: http://blog.papervision3d.org/

Um exemplo no site : http://www.papervision3d.org/

Vamos começar de leve, para esse tutorial será necessário baixar a versão 2.0 do papervision, no site : http://papervision3d.googlecode.com/files/Papervision3D_2.0_beta_1_src.zip

Descompacte o zip, o aqui contém uma pasta chamada src, dentro dessa pasta tem os seguintes arquivos :

Como na imagem a cima a pasta src possui as seguintes pastas nochump e org.

Copie a pasta “org” para o local do seu projeto. (no meu caso criei uma pasta papervision e em seguida criei um projeto com o flash Develop).

Para compilar o código eu vou utilizar flash develop + flex SDK que você pode ver o tutorial como utilizar aqui, se tudo der certo o flash develop irá reconhecer as classes do paperVision, crie uma classe chama Main e vamos ao código:

Para que não esta ambientado com POO, vou fazer um resumo bem “Basicão”:

  1. Na primeira linha definimos o pacote que a classe está “package {” nesse caso a classe está na raiz do projeto.
  2. Importamos as classes necessárias
  3. Iniciamos nossa classe ” public class Main extends Sprite { “
  4. Definimos nossos atributos
  5. Iniciamos nosso construtor (o construtor é o primeiro método a ser executado em uma classe) “public function Main() {“

Para esse tutorial para ficar simples eu joguei todas as operações dentro do construtor, para entender melhor vamos ver o passo-a-passo de nosso construtor:

  • Primeiro criamos um novo Viewport3D, passamos como parâmetro ( largura:Number, altura:Number, autosize:Boolean e interatividade:Boolean ), existem outros parâmetros, mas não serão abordados nesse tutorial.
  • Adicionamos o Viewport no palco.
  • Instânciamos novos _renderizador, _cena e _camera.
  • Criamos um novo material e passamos com parâmetro a cor.
  • A instancimos uma nova esfera Objeto do tipo Sphere , para isso são necessário os parâmetros, o material , o raio da esfera, e a quantidade de segmentos horizontais e verticais
  • Adicionamos a esfera na _cena
  • por fim renderizamos nosso ambiente

Nesse esquema utilizado o nosso ambiente será renderizado apenas uma vez o resultado podemos ver abaixo:

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2009/03/teste22.swf w=450 h=300]

Diferente do modelo acima o legal é dar movimento aos objetos, nesse caso precisamos  renderizar o nosso ambiente varias vezes, para isso utilizamos o Evento ENTER_FRAME, então, vamos ao código :

Vamos lá a diferença para o modelo anterior é que, aumentei o número de segmentos da esfera para ficar visualmente melhor e adicionamos um evento ENTER_FRAME que chama o método “render” que faz duas coisas simples incrementa o rotationY e renderiza nosso ambiente a cada vez que o método é chamado.

O Resultado é o seguinte :

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2009/03/teste2.swf w=450 h=300]

Próximo tutorial vou falar mais um pouco sobre papervision.

Quando comecei a reescrever esse post era dia 30 de março, aniversário do meu amigo André Ponce, Parceiro sempre ajudando quando possível, terminei de escrever 2 horas do dia 31 março, foi mau ai Ponce. Parabéns atrasado.

Até breve…

Saiu o release 3.0.0 RCI do Flash Develop (atrasado)

Meio atrasado mas esse post estava perdido nos meus rascunhos, saiu dia 27 de dezembro o relase 3.0.0 RCI do flash develop para baixa clique aqui. Entre as melhorias do novo release estão : 

  • swc externos agora aparecem como classpath.
  • a possibilidade de explorar um swc com duplo clique.
  • melhor integração com flash player 10.
  • erros de sitaxe ao vivo para as3.
  • atualizado o MXML completation.

O grupo do Flash Develop sempre aconselha fazer Backup dos seu projetos quando for instalar uma nova versão, eu sinceramente nunca faço isso.

Até a Próxima.

Integração Flash Develop com Flash IDE

No post Anterior eu mostrei como utilizar o flash develop + o flex SDK agora eu vou mostra como integrar o flash develop com o flash IDE.

Essa integração é bem simples vamos começar :

Abra o Flash Develop

crie um novo projeto, menu superior Project > New Project >

Na janela new project em installed Templates escolha a opção
action Script 3 > Flash IDE Project. Como podemos ver na imagem abaixo:

Escolha o nome do projeto e o local. e clique ok para prosseguir.

Agora vamos informar o local da Falsh IDE, va em tools > Program settings > ASCompletion > Flash IDE > Path to Flash IDE. nesse campo iremos informar a pasta da ide do flash.

Janela de Program settings
Janela de Program settings

Na maioria das maquinas encontrasse em:
C:\Arquivos de programas\Adobe\Adobe Flash CS3\

Vamos escrever uma classe Main.as

Para esse teste o arquivo flash(.fla) tem que estar na mesma pasta do arquivo Main.as

Então Abrimos o Flash , criamos um novo arquivo e na aba de propriedades do stage no campo de Document class informamos a classe que vai ser carregada nesse caso o “Main” não é necessário informar a extensão da Classe “.as”. Como na figura abaixo :

Se tudo estiver ok toda vez que for pressionado ( ctrl+enter ) o flash develop chamará a flash IDE. Mas para compilar o arquivo será necessário o fla específico esteja aberto.

Se estiver utilizando estrutura de pacotes será necessário informa-los, por exemplo, classes.Main.

Até a proxima pessoal.

Flash Develop + Flex SDK

Flash Develop é uma ótima ferramenta para desenvolvimento ActionScript que possui características como:

  • Auto completar
  • Administração de projetos AS2 e AS3
  • Suporte a linguagens como PHP, HTML, CSS, XML e JS.
  • Code checking
  • Integração com FLASH IDE e FLEX SDK
  • Totalmente free
  • Exploração de símbolos em SWF e SWC.

Esses são alguns dos benefícios que chamam atenção para esta ferramenta, as características completas você confere aqui.

E para começar nosso tutorial será necessário baixar o Flash Develop clique aqui e o flex SDK baixe aqui. Na página do Flash Develop tem todas as versões(Releases), quando publiquei esse post a ultima versão é a 3.0 beta 9.

A instalação é  simples sem complicação, depois de instalada a ferramenta abra o Flash Develop vai aparecer a seguinte tela:

Essa é a startPage do Flash Develop(FD) ele mostra as os projetos recentes, a ultima versão e uma apresentação do FD. Também é possível navegar por paginas web.

Como falei anteriormente o FD pode trabalha integrado com FLAsH IDE ou o SDK do flex. O SDK do flash é free. Nesse tutotial vamos ver a integração do FD com SDK do FLEX.

Para quem não tem o SDK do FLEX baixe aqui.

Vamos seguir os seguintes passos:

  • Descompacte de preferencia o arquivo no seguinte local c:\flex_sdk\
  • Abra o Flash Develop no menu acesse > Tools > Program Settings  irá abrir a seguinte janela :

  • No menu lateral na área de puglins selecione: AS3Context  no lado direito do menu na área de AS3 possui um campo Flex SDK no meu casa está em c:\flex_sdk_3\ em seguida clique em close. As informações serão salvas.
  • Agora vamos criar um novo projeto menu superior > project > new project , aparecerá a seguinte tela :

  • Será preciso informar os seguintes campos, o tipo do template do projeto nesse exemplo usaremos o ActionScript 3 empty project, informamos o nome do projeto e o local do projeto , o package não precisa ser informado. OK para prosseguir.
  • Seu projeto está criado agora vamos estrutura-lo:

  • No canto direito irá aparece a aba de projeto, vamos montar nossa estrutura conforme a figura acima,  clique com o botão direito sobre o nome do projeto. add> new folder. Como podemos ver na próxima imagem.

  • Coloque o nome da pasta “classes” nessa pasta iremos colocar todas as nossas classes.
  • Em seguida vamos adicionar a nossa classe , selecione a pasta classes com o botão direito add > new Class… > coloque o nome da sua classe “Main.as”.
  • Agora vamos criar nosso arquivo swf, selecione o projeto com o botão direito add > New Empty File… , coloque o nome do arquivo teste.swf.
  • Agora vamos configurar o Flash Develop para exportar para o nosso “.swf” no menu superior > project > properties > abrirá a seguinte janela :

No output file especificamos qual arquivo swf será nossa saída, no nosso caso “teste.swf”, o ultimo passo é falar qual a class que sempre será usada pelo meu swf ou seja a classe principal, no nosso exemplo a Main.

Selecionamos a classe Main com o botão direito, escolha a opção Always Compile. Como na figura a seguir :

A partir desse momento você já pode usar o flash develop com Flex SDK.

Vamos fazer um pequeno teste escreva na classe main :