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…

Uma resposta para “Papervision 3D + TweenLite”

  1. Bom tutorial 🙂 É incrivel o que pode ser feito com a pv3d mesmo.. muito bala.

    Notei que tu usa o flashdevelop, bom programa 🙂

    olha só, ta afim de fazer uma parceria? podemos trocar um banner. também tenho um blog sobre flash, as3, etc..

    abração

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *