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

This site uses Akismet to reduce spam. Learn how your comment data is processed.