Árvore de Natal + Papervision

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. また見てね.

Anúncios

Tags: , , , , , ,

2 Respostas to “Árvore de Natal + Papervision”

  1. Garu | 29 Anos | Duque de Caxias Says:

    Antes de qualquer coisa, um ótimo natal! Gostei de ver que você continua empenhado no blog!

    Um abração a todos e ótimas festas!

  2. Papervision [Objetos Primitivos] « Says:

    […] Criaremos 2 arquivos, ambos ficarão na mesma pasta um deles será o main.as e o outro será o arquivo .fla que você pode nomealo da maneira que quiser. Após criar os arquivos no arquivo .fla você deve escrever na propriedade Document Class = “main”. Você também terá que definir o pacote do papervision. (post relacionado a como baixar e definir pacote do papervision aqui) […]

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s


%d blogueiros gostam disto: