Eventos de Mouse com Papervision

paper-vision

No post Anterior vimos como trabalhar como TWeenLite + PaperVision , nesse tutorial vamos trabalhar eventos de clique, over e out, com objetos 3D. Para agilizar vamos utilizar o mesmo código do post anterior PAPERVISION 3D + TWEENLITE e fazer as modificações necessárias.

Para esse tutorial vamos utilizar a ide Flash cs3 + Flash Develop.

Se você ainda não tem o Flash Develop(ele é Free) baixe aqui.

Em termos de biblioteca vou utilizar Papervision e Tweenlite :

Na IDE do Flash vamos criar 3 movieclips, como os nomes e os linkages letraM, letraA, letraR como na imagem abaixo :

tutorialtweenpaper

Esses três movieclips não vão ficar no palco, apenas na biblioteca, eles vão ser carregados no código para serem usados no como materiais. Por último vamos criar um movieclip para ser usado como botão com o nome de instância “bt_voltar”, ele vai servir para “resetar” a posição da câmera.

No Flash Develop vou criar a classe Interatividade2.as no mesmo local que se encontra o FLA que contém com as letras  que vamos trabalhar, voltando para a classe era terá o seguinte código :

package  {
import flash.display.Scene;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;

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;

// importamos as classe > InteractiveScene3DEvent
// ela é cuida da interatividade dos nossos objetos
import org.papervision3d.events.InteractiveScene3DEvent;

//Tweenlite para fazer a animação dos objetos
import gs.TweenLite;
import gs.easing.*;

/**
* ...
* @author Fellyph Cintra
* @link http://fellyph.com.br/blog/
*
*/
	public class Interatividade2 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 Interatividade2() {

				_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);

				// setamos a propriedade interactive de nossos materiais
				// para true, para avisar que nossos materiais vao	interagir
				// com o usuário
				material_m.interactive = true;
				material_a.interactive = true;
				material_r.interactive = true;

				//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   = -50;
				_a.x   = 50;
				_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:-750,  	ease:Expo.easeOut } );
				TweenLite.to(_a, 4,  { rotationX:0, rotationY:0, z:	-500, 	ease:Expo.easeOut , delay:0.3 } );
				TweenLite.to(_r, 4,  { rotationX:0, rotationY:0, z:-250,	ease:Expo.easeOut , delay:0.6} );

				// vou criar uma função para adicionar os listener nos	objetos
				addListenerObj(_m);
				addListenerObj(_a);
				addListenerObj(_r);

				//adicionando um evento no bt_voltar para voltar a câmera para visão geral
				bt_voltar.addEventListener(MouseEvent.CLICK, voltarCamera);
				bt_voltar.buttonMode = true;
			}

			public function addListenerObj(obj:Plane):void {

                                //Diferente dos eventos de botões de um movieclip ou um sprite
                                // InteractiveScene3DEvent cuida de toda a interatividade dos objetdos 3d
                                //OBJECT_RELEASE, OBJECT_OVER e OBJECT_OUT

				//listener para função release(clique)
				obj.addEventListener(InteractiveScene3DEvent.OBJECT_RELEASE, onClickPlane);

				// listener para evento over
				obj.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, overPlane);

				// listener para evento out
				obj.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, outPlane);
			}

			public function onClickPlane(e:InteractiveScene3DEvent):void {
				TweenLite.to( _camera, 1.3, { x:e.target.x, z:e.target.z - 200, ease:Expo.easeIn } );
			}

			public function overPlane(e:InteractiveScene3DEvent):void {
				TweenLite.to(e.target, 1,  { rotationY:45,  ease:Bounce.easeOut } );
			}

			public function outPlane(e:InteractiveScene3DEvent):void {
				TweenLite.to(e.target, 1,  { rotationY:0, ease:Expo.easeIn } );
			}

			//voltando com a câmera para a posição inicial
			public function voltarCamera(e:MouseEvent):void {
				TweenLite.to( _camera, 2, { x:0, z:-1000, ease:Back.easeOut } );
			}

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

}

Tentei fazer o código todo comentado o ponto importante nesse caso é a Classe InteractiveScene3DEvent.

Para incluir a classe Interatividade2 no FLA:
1 – No Flash selecione o stage.
2 – Na aba de propriedades.
3 – Inclua o nome da classe Interatividade2 no campo “Document class”

E o resultado vai ser o seguinte :

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

Deixe um comentário

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