Posts Tagged ‘movieassetmaterial’

Papervision [ReflectionView]

julho 27, 2009

Imagem

Clique na imagem para testar

Olá pessoal , Hoje falarei sobre uma classe muito interessante e simples, ReflectionView. Uma classe que faz com que o viewport se transforme em um espelho tanto para cima do eixo y:0 quanto para baixo.

A classe ReflectionView é uma classe extendida da classe BasicView que por sua vez é extendido da classe AbstractView, o que eu quero dizer com tudo isso, que ao extender uma classe a RelectionView ele vai possuira atributos instanciados como:

AbstractView:
scene:Scene3D;
viewport:Viewport3D;
renderer:BasicRenderEngine;

startRendering();
stopRendering();
singleRender();

ReflectionView
viewportReflection : Viewport3D;
cameraReflection : CameraObject3D;
singleRender() (override - sobrescrevido)

Quando criávamos nosso BasicView ativávamos a função startRendering() para renderizar nossa aplicação, porem quando criamos um ReflectionView também podemos utilizar esta função para renderizar, porém não irá criar reflexo pois a função responsável pelo reflexo é a singleRender() que esta reescrita nesta classe para poder ativar o reflexo. Esta parecendo complicado mas as coisas são bem simples vamos analisar nosso código. Em resumo para funcionar precisamos apenas colocar dentro de um bloco ENTER_FRAME a função singleRender();

Como de custume trabalharemos com 2 arquivos. ppv_reflection.fla e ppv_reflection.as. Certifique de possuir 2 movieclip em sua biblioteca com os seguintes linkage: “smile” e “face”.

ppv_reflection.as

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import org.papervision3d.core.effects.view.ReflectionView;
    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.materials.MovieAssetMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.objects.primitives.Cube;

    public class ppv_reflection extends ReflectionView
    {
        public var matsmile:MovieAssetMaterial;
        public var matface:MovieAssetMaterial;
        public var cubo:Cube;
        public var lista:MaterialsList;

        public function ppv_reflection() {
            setChildIndex(viewportReflection, 1);
            viewportReflection.alpha = 0.8;
            matsmile  = new MovieAssetMaterial("smile");
            matface  = new MovieAssetMaterial("face");
            lista = new MaterialsList(
                {front: matface,
                  back: matsmile,
                  top: new ColorMaterial(0xF9EAAD),
                  bottom: new ColorMaterial(0x000000),
                  left: matface,
                  right: matface} );
            cubo  = new Cube(lista, 200, 200, 250);
            scene.addChild(cubo);

            cubo.y = 150;
            addEventListener(Event.ENTER_FRAME, onEnterFrame);

        }
        private function onEnterFrame(e:Event):void {
            cubo.rotationY = mouseX - stage.stageWidth / 2;
            cubo.rotationX = mouseY - stage.stageHeight / 2;
            singleRender();
        }

    }

}

Uma classe simples que possui uma imagem de fundo com um cubo personalizado, aonde este cubo se movimenta respondendo os comandos do mouse.Na primeira linha de nosso construtor utilizamos o seguinte código:

    setChildIndex(viewportReflection, 1);

Quando criamos nossa classe extendida de ReflectionView automaticamente nosso viewport refletor é criado no índex 0 porem se eu quiser deixar uma imagem de background desenhado em alguma layer da time line esse background entrará em um índex acima de nosso viewport fazendo com que o viewport refletor fique por trás do background, este é o motive desta linha de comando, estamos trocando o posicionamento índex de nosso viewport.

Nosso viewport refletor ele funciona da seguinte maneira, tudo que esta do eixo y:0 para cima será refletido para baixo o eixo y:0 e vice versa, a imagem a seguir ilustra um cubo desenhado abaixo do eixo y:0.

img_02

Espero que tenham gostado deste tutorial, não precisam se preocupar que teremos mais coisas interessantes no decorrer da semana, até a próxima.

Anúncios

Papervision BasicView

maio 28, 2009

Olá pessoal, finalmente consegui um tempinho para criar um novo post. Hoje falaremos sobre uma classe que foi criada no intuito de simplificar a nossa vida com o papervision a classe BasicView

BasicView é uma classe para aplicações simples, criando uma classe extendida de basicview você não precisa ficar instanciando cameras, viewports, renderes, pois a propria classe ja faz isso.

Veja como nosso código fica muito otimizado, Neste exemplo estamos criando apenas uma esfera, utilizando um MovieAssetMaterial para importar um movieclip com o id igual a “smile” de nossa biblioteca e rotacionando um pouco a esfera com o metodo yaw.

ppv

Arquivo: ppv_basic.as

package  {
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.materials.MovieAssetMaterial;
	import org.papervision3d.view.BasicView;
	public class ppv_basic extends BasicView{
		public var sphere:Sphere =  new Sphere(
             new MovieAssetMaterial("smile"), 200,10,10);
		public function ppv_basic() {
			scene.addChild(sphere);
			sphere.yaw(-125);
			startRendering();
		}
	}
}
Lembrando que para este codigo funcionar precisamos criar um arquivo flash, adicionar o pacote de classes do papervision e ter algum movieclip na biblioteca com o linkage “smile”.

Apesar da simplicidade eu não recomendo usar basicview para projetos complexos, mas se você estiver interessado em algum projeto muito simples seu uso é indispensavel. Para complementar a classe BasicView possui os seguintes paramêtros opcionais, seguido de suas propriedades default:

BasicView (viewportWidth:Number = 640, viewportHeight:Number = 480,
 scaleToStage:Boolean = true, interactive:Boolean = false, cameraType:String = "Target")

Espero que tenham gostado deste post, ando meio ocupado estudando diversas coisas ao mesmo tempo, também comecei a estudar a engine Away3d muito utilizada também para construção de projetos 3d no flash, similar ao papervision, podes ter certeza que logo logo estarei compartilhando este novo conhecimento com vocês. Obrigado pela sua visita e até o proximo post

Árvore de Natal + Papervision

dezembro 11, 2008

tree

clique na imagem para visualizar

今日は皆-さん. Olá pessoal o natal está chegando e eu percebi que não tinha montado minha arvore de natal ainda. Achei que seria interessante eu montar uma arvore de natal personalizada e via actionscrtip 3 + papervision3D. Vejam como ela ficou.

Não vou fazer um tutorial explicativo por que eu não sou tão nativo em papervision, esta é a minha segunda aplicação. Mas vou ensinar como baixar os arquivos do papervision usando o controle de versão e postarei o código fonte.

Instalando Papervision:

O papervision não é um programa, na verdade ele é um conjunto de classes prontas, aonde o programador só direciona o flash para importar-las para poder usar. Como não se tem um setup e cada dia que passa os programadores fazem mudanças no código. Então com instalar?
1- faça um downlaod de um cliente SVN. Eu usei o Tortoise Faça o download aqui.
2- crie uma pasta aonde você ira colocar os arquivos do papervision. Após ter instalado o tortoise clique com o botão direito sobre a paste e selecione a opção “SVN checkout” na caixa que abrir coloque o seguinte endereço http://papervision3d.googlecode.com/svn/trunk
3 – Abra o Flash CS3, vá em Edit>Preferences>Actionscript e clique no botão “Actionscript 3.0 settings”. Clique no sinal de “+” para adicionar mais um caminho para classe depois vá em classpath (veja na imagem) vá na pasta que você criou do papervision e siga os diretórios “as3/trunk/src” e clique em ok.

ppv_instal

Pronto as classes do papervision estão importadas. Agora vocês poderão dar uma olhadas nos exemplos prontos que tem na pasta “as3/tags”. Agora vamos a Nossa Arvore.

Criando flash:

propriedades

Para nosso exemplo precisaremos de 3 movieclips com as propriedades linkage definidas como “tree”(O cone central da arvore), “base1” e “base2” são os respectivos pedaços do vaso. Nas propriedades do nosso flash teremos 300×400, 30 frame rate: 30 Document class: ppv_cone. Noss arquivo fla não terá nenhum código, todos os códigos estarão no arquivo “ppv_cone.as”. Mande criar um actionscrtipfile salve no mesmo diretório do seu arquivo fla com o nome de ppv_cone.

newarquivo

Código ppv_cone:

package {
	// Flash AS3 import
	import flash.display.Sprite;
	import flash.events.Event;
	// Papervision import
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.render.BasicRenderEngine;
	// objeto Papervision import
	import org.papervision3d.objects.primitives.Cone;
	import org.papervision3d.objects.primitives.Cylinder;
	// materiais Papervision import
	import org.papervision3d.materials.MovieAssetMaterial;
	import org.papervision3d.materials.BitmapColorMaterial;

	public class ppv_cone extends Sprite {
		public var cena:Scene3D;
		public var viewport:Viewport3D;
		public var camera:Camera3D;
		public var renderer:BasicRenderEngine;
		//Declarando Objetos 3D
		public var tree:Cone;
		public var treeTrunk:Cylinder;
		public var treeBase1:Cylinder;
		public var treeBase2:Cylinder;
		//Declarando Material
		public var matMov1:MovieAssetMaterial = new MovieAssetMaterial("tree",false,false);
		public var matMov2:MovieAssetMaterial = new MovieAssetMaterial("base1",false,false);
		public var matMov3:MovieAssetMaterial = new MovieAssetMaterial("base2",false,false);
		public var matColor:BitmapColorMaterial=new BitmapColorMaterial(0x000000);

		public function ppv_cone () {
			Set ();
			Objetos ();
			Listeners ();
		}
		public function Set ():void {
			cena = new Scene3D ;
			viewport = new Viewport3D(500,800,true,false,true,true);
			addChild (viewport);

			camera = new Camera3D ;
			renderer = new BasicRenderEngine ;
		}
		public function Objetos ():void {
			treeTrunk = new Cylinder(matColor,20,200,8,6);
			cena.addChild (treeTrunk);

			treeBase1 = new Cylinder(matMov2,50,80,8,6,60);
			treeBase1.y =-80;
			cena.addChild (treeBase1);

			treeBase2 = new Cylinder(matMov3,60,30,8,6,70);
			treeBase2. y=-40;
			cena.addChild (treeBase2);

			tree = new Cone(matMov1,150,400);
			tree.y = 200;
			cena.addChild (tree);

			camera.focus = 15;
			camera.y = 80;
		}
		public function Listeners ():void {
			addEventListener (Event.ENTER_FRAME,Render);
		}
		public function Render (e:Event):void {
                        //Rotacionando o cone
			tree.yaw (3);
			renderer.renderScene (cena,camera,viewport);
		}
	}
}

OBS: O papervision a cada dia que passa está sofrendo mudanças, este codigo foi montado com base na versão: Papervision3D Public Beta 2.0 – Great White (September 9th, 2008)

A lógica do código:

1-Importamos as classes necessárias.
2-Criamos uma cena3d, viewport e câmera
3-Criamos 4 objetos: 1 cone para ser nossa parte principal da arvore, um cilindro para ser o caule e mais 2 cilindros deformados para ser o vaso.
Se vocês reparem criamos variáveis do tipo “MovieAssetMaterial” e “BitmapColorMaterial”. As variáveis materiais determina a textura de nossos objetos 3D.
MovieAssetMaterial: importa um movieclip usando a propriedade linkage.
BitmapColorMaterial: Cria um bitmap com a cor especificada.
BitmapFileMaterial: importa uma imagem de fora do flash.

Bem eu ainda não estou tomando uma coça do papervision, por isso não pude detalhar mais o código. Mas mesmo assim achei que seria interessante colocar o código aqui para vocês darem uma olhada. Assim que eu aprender mais sobre o papervision eu vou postando aqui.vlw pessoal espero que tenham gostado. Até a próxima. また見てね.