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:

package  {
	import flash.display.Scene;
	import flash.display.Sprite;

	import flash.events.Event;

	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;

	import org.papervision3d.materials.MovieAssetMaterial;

	import org.papervision3d.objects.primitives.Plane;

	import gs.TweenLite;
	import gs.easing.*;

	/**
	* ...
	* @author Fellyph Cintra
	* @link http://fellyph.com.br/blog/
	*
	*/
	public class Interatividade extends Sprite{
		// criar os objetos chave para trabalhar com papervision
		private var _viewport 		:Viewport3D;
		private var _cena 			:Scene3D;
		private var _camera 		:Camera3D;

		// meu renderizador
		private var _renderizador 	:BasicRenderEngine;

		// os planos que eu vou trabalhar
		private var _m				:Plane;
		private var _a				:Plane;
		private var _r				:Plane;

		//os materiais que vão compor meus planos(Plane)
		private var material_m 		:MovieAssetMaterial;
		private var material_a		:MovieAssetMaterial;
		private var material_r 		:MovieAssetMaterial;

		// o construtor da minha classe que executar o código
		public function Interatividade() {

			_viewport = new Viewport3D(450, 300, false, true);
			addChild(_viewport);

			// inicializando os objetos chave;
			_cena 			= new Scene3D();
			_camera 		= new Camera3D();
			_renderizador 	= new BasicRenderEngine();

			// inicializando meus materiais "MovieAssetMaterial" lembrando
			// MovieAsset trabalha com o linkage dos movieclips criados no
			// meu arquivo ".fla"
			material_m = new MovieAssetMaterial("letraM", true, true);
			material_a = new MovieAssetMaterial("letraA", true, true);
			material_r = new MovieAssetMaterial("letraR", true, false);

			//adicionando os materiais a cada respectivo Plane
			_m = new Plane(material_m, 100, 94, 8, 8);
			_a = new Plane(material_a,100, 94, 8, 8);
			_r = new Plane(material_r, 100, 94, 8, 8);

			//Adicionando o Plane a Cena
			_cena.addChild(_m);
			_cena.addChild(_a);
			_cena.addChild(_r);

			//Abaixo vou trabalhar com as propriedades dos meus planos
			//para em seguida executar a animação
			_m.x   = 10;
			_a.x   = 100;
			_r.x   = 200;

			_m.rotationY = 90;
			_a.rotationY = 90;
			_r.rotationY = 90;

			_m.rotationX = 90;
			_a.rotationX = 90;
			_r.rotationX = 90;

			// Adicionando o evento ENTER_FRAME para renderizar meu arquivo
			addEventListener(Event.ENTER_FRAME, onRender);

			// E por fim executamos as animações nos planos
			// Revisando:
			// TweenLite.to( objeto a ser animado, tempo , {propriedades da animação});
			TweenLite.to(_m, 4,  { rotationX:0, rotationY:0,  z:-500,  	ease:Expo.easeOut } );
			TweenLite.to(_a, 4,  { rotationX:0, rotationY:0, z: -400, 	ease:Expo.easeOut , delay:0.3 } );
			TweenLite.to(_r, 4,  { rotationX:0, rotationY:0, z:-300, 	ease:Expo.easeOut , delay:0.6} );

		}

		public function onRender(e:Event):void {
			//renderizando
			_renderizador.renderScene(_cena, _camera, _viewport);
		}

	}

}

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:

package  {

	/**
	* ...
	* @author Fellyph Cintra fellyph.com.br/blog/
	*/

	import flash.display.Sprite;

	//Classes necessárias para trabalhar com 3D
	//em termos de visualização

	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;

	//objeto a ser utilizado
	import org.papervision3d.objects.primitives.Sphere;

	// o Material a ser aplicado no objeto 3d
	import org.papervision3d.materials.WireframeMaterial;

	public class Main extends Sprite {
		// para criar um ambiente 3D precisamos desses três elementos para
                //visualização de de nosso ambiente, resumindo :
                // Viewport é responsável pela área que irá ser exibida
                // Scene3D é responsável pelos objetos 3d aplicados na tela
                // Camara3D será nossa visão do ambiente 3d

		private var _viewport		:Viewport3D;
		private var _cena			:Scene3D;
		private var _camera		:Camera3D;

		// BasicRenderEngine cuidará da renderização de nosso ambiente.
		private var _renderizador 	:BasicRenderEngine;

                //Sphere é nosso objeto primitivo 3D
		private var esfera 			:Sphere;

                // WireframeMaterial é camada do objeto primitivo ou seja nossa Textura
                // WireframeMaterial é um dos materiais mais simples do paperVision são
                // apenas linhas que contornam os vértices do meu objeto.
		private var material		        :WireframeMaterial;

		public function Main() {

			_viewport = new Viewport3D(450, 300, false, true);
			addChild(_viewport);

			_cena 			= new Scene3D();
			_camera 		= new Camera3D();
			_renderizador 	= new BasicRenderEngine();

			material = new WireframeMaterial(0x330000);

			esfera = new Sphere(material, 80, 6, 6);

			_cena.addChild(esfera);

			_renderizador.renderScene(_cena, _camera, _viewport);

		}

	}

}

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 :

package  {
	
	/**
	* ...
	* @author Fellyph Cintra fellyph.com.br/blog/
	*/

	import flash.display.Sprite;
		
	//Classes necessárias para trabalhar com 3D
	//em termos de visualização
	
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;
	
	//objeto a ser utilizado
	import org.papervision3d.objects.primitives.Sphere;
	
	// o Material a ser aplicado no objeto 3d
	import org.papervision3d.materials.WireframeMaterial;
	
	//importamos o Event para utilizar o ENTER_FRAME
	import flash.events.Event;
	
	public class Main extends Sprite {
		
		private var _viewport		:Viewport3D;
		private var _cena			:Scene3D;
		private var _camera		:Camera3D;
		
		private var _renderizador 	:BasicRenderEngine;
		
		private var esfera 			:Sphere;
		private var material		:WireframeMaterial;
		
		
		
		public function Main() {
			
			_viewport = new Viewport3D(450, 300, false, true);
			addChild(_viewport);
			
			_cena 			= new Scene3D();
			_camera 		= new Camera3D();
			_renderizador 	= new BasicRenderEngine();
			
			material = new WireframeMaterial(0x330000);
			
			esfera = new Sphere(material, 80, 7, 7);
			
			_cena.addChild(esfera);
			
			//adicionamos o Evento ENTER_FRAME
			addEventListener(Event.ENTER_FRAME, render);
									
		}
		
		public function render(e:Event):void {
			esfera.rotationY += 2;
			_renderizador.renderScene(_cena, _camera, _viewport);
		}
		
	}
	
}

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

package {

	/**
	* ...
	* @author Fellyph Cintra
	*/

        import flash.display.Sprite;

	public class Main extends Sprite{
		// cria um sprite
		public var alvo:Sprite;

		public function Main() {
                        //inicializa o sprite
			alvo = new Sprite()
                        // iniciamos o preenchimento do do vetor que será aplicado, na linha seguinte
                        // definimos  o estilo da linha e desenhamos um circulo
			alvo.graphics.beginFill(0x009900);
			alvo.graphics.lineStyle(1, 0x990000);
			alvo.graphics.drawCircle(200, 200, 50);
			addChild(alvo);

		}

	}

}

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.