PaperVision Materials – Parte 2

Publicado em 18 de maio de 2009 por Fellyph

No Post anterior começamos a falar sobre materiais em papervision, paramos em materiais que trabalham com bitmap, neste post iremos continuar a abordagem sobre o assunto começando por materiais que utilizam MovieClip. Grande vantagem de se trabalhar com a textura em movieclip, é que podemos aproveitar toda a interatividade do do movieClip, animação e transparência podem ser aplicados na textura. Existem dois tipos de materiais que trabalham com movieclip o MovieAssetMaterial e o MovieMaterial.

MovieAssetMaterial
Carrega o movieClip através do linkageID do movieClip na biblioteca esse recurso é utilizado com o Flash CS3 ou superior, por já ter mostrado no post anterior sobre materiais como incluir o linkageID então não vou repetir o passo-a-passo, link para o post anterior. As principais propriedades que o MovieAssetMaterial trabalha são :

  • linkageID:String, o nome no linkage do movieclip
  • transparent:Boolean, define se o material vai ter transparência ou não (true ou false)
  • animated:Boolean, define se o material vai ser animado (true ou false)

Então vamos ao código :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

package  {
 
	/**
	* ...
	* @author Fellyph Cintra
	*/
 
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import org.papervision3d.materials.MovieAssetMaterial;
 
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;
 
	import org.papervision3d.objects.primitives.Plane;
	import flash.events.Event;
 
	import flash.events.Event;
 
	public class MainMateriaisMovieAsset extends Sprite{
 
		private var _viewport 		:Viewport3D;
		private var _cena 			:Scene3D;
		private var _camera 		:Camera3D;
 
		private var _renderizador 	:BasicRenderEngine;
		private var plano			:Plane;
		private var plano2			:Plane;
		private var material  		:MovieAssetMaterial;
 
		public function MainMateriaisMovieAsset() {
 
			//criamos nosso Viewport3D
			_viewport = new Viewport3D(450 , 300 , false, true);
			addChild(_viewport);
 
			_cena = new Scene3D();
			_camera = new Camera3D();
			_renderizador = new BasicRenderEngine();
 
			// com o movie material trabalhamos com as seguintes propriedades
			//(linkageId, transparência um valor Booleano , se a textura vai ser animada um valor também Booleano)
			material = new MovieAssetMaterial("face",true,true);
 
			//nesse exemplo eu vou trabalhar com dois planos
			// para dar a impressão de um plano com dupla face
			plano = new Plane(material, 300,300, 8, 8);
			plano2 = new Plane(material, 300, 300, 8, 8);
 
			//no segundo plano um rotação de 180 para fica no sentido oposta ao primeiro plano
			plano2.rotationY -= 180;
 
			//adicionamos nossos 2 planos na Scene3D _cena
			_cena.addChild(plano);
			_cena.addChild(plano2);
 
			//aplicamos um onEnterFrame para rotacionar os objetos
			addEventListener(Event.ENTER_FRAME, onRender);
 
		}
 
		public function onRender(e:Event):void {
			plano.rotationY += 3;
			plano2.rotationY += 3;
			_renderizador.renderScene(_cena, _camera, _viewport);
 
		}
	}
 
}

Como podemos ver para burlar a falta de planos de dupla face nessa versão do papervision criamos dois planos em sentidos contrários. então temos o seguinte resultado :

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

MovieMaterial

Este tipo de material trabalha com Objetos do tipo DisplayObject criados em tempo de execução, ou seja podemos trabalhar com MovieClips e Sprites, é bem parecido com o material anterior , mas o objeto primitivo que vamos trabalhar dessa vez é o cubo(Cube), vamos ao código :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

package  {
 
	/**
	* ...
	* @author Fellyph Cintra
	*/
 
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
 
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;
 
	import org.papervision3d.objects.primitives.Cube;
	import flash.events.Event;
	import Formas;
	import flash.events.Event;
 
	public class MainMateriaisMovie extends Sprite{
 
		private var _viewport 		:Viewport3D;
		private var _cena 			:Scene3D;
		private var _camera 		:Camera3D;
 
		private var _renderizador 	:BasicRenderEngine;
 
		//Nesse Exemplo vou trabalhar com um objeto cubo
		private var cubo			:Cube;
		private var material  		:MovieMaterial;
 
		// Para trabalhar com o MovieMaterial eu vou criar
		//uma classe que extends de Sprite que eu criei em um tutorial anterior
		private var movieForma		:Formas;
		private var materialList 	:MaterialsList;
 
		// Criamos mais dois materiais para diversificar mais os materiais
		//na montagem do cubo
		private var corAmarela		:ColorMaterial;
		private var corAzul			:ColorMaterial;
 
		public function MainMateriaisMovie() {
 
			//Criamos nosso Viewport3D
			_viewport = new Viewport3D(450 , 300 , false, true);
			addChild(_viewport);
 
			_cena = new Scene3D();
			_camera = new Camera3D();
			_renderizador = new BasicRenderEngine();
 
			// Estou inicializando meu objeto movieForma
			movieForma = new Formas();
 
			// Com o movie material trabalhamos com as seguintes propriedades
			//(o nosso movie que é um displayObject ou seja pode ser um movieclip, Sprite ou shape,
			//transparência um valor Booleano , se a textura vai ser animada um valor também Booleano)
			material = new MovieMaterial(movieForma,false,false);
			corAzul = new ColorMaterial(0x00027F);
			corAmarela = new ColorMaterial(0xFCFF00);
 
			// criamos um materialList para montar nosso cubo
			materialList = new MaterialsList( { front:material,back:material,left:corAmarela,right:corAmarela,top:corAzul,bottom:corAzul } )
 
			cubo = new Cube(materialList,330,50,240, 6,6,6);
 
			//adicionamos nosso cubo na Scene3D _cena
			_cena.addChild(cubo);
 
			addEventListener(Event.ENTER_FRAME, onRender);
 
		}
 
		public function onRender(e:Event):void {
			cubo.rotationY += 1;
			cubo.rotationZ += 1;
			_renderizador.renderScene(_cena, _camera, _viewport);
 
		}
	}
 
}

Nesse exemplo trabalhamos com a classe Formas que extends de Sprite, essa classe foi criada em um tutorial anterior link para o tutorial, ela possui o seguinte código :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

package {
 
	import flash.display.Shape;
	import flash.display.Sprite;
 
	/**
	* ...
	* @author Fellyph Cintra
	*/
	public class Formas extends Sprite {
		public var bola		:Shape;
		public var rect 	:Shape;
		public var rect2 	:Shape;
 
		public function Formas() {
 
			criaRect();
			criaLosango();
			criaBola();
 
		}
 
		public function criaRect():void {
			rect = new Shape();
			rect.graphics.beginFill(0x008300);
			rect.graphics.lineStyle(1, 0x008300);
			rect.graphics.drawRect(0,0,330,240);
			addChild(rect);
		}
 
		public function criaLosango():void {
 
			rect2 = new Shape();
			rect2.graphics.beginFill(0xFCFF00);
			rect2.graphics.lineStyle(1, 0xFCFF00);
			rect2.graphics.moveTo( 165, 10);
			rect2.graphics.lineTo( 310, 120);
			rect2.graphics.lineTo( 165, 230);
			rect2.graphics.lineTo( 20, 120);
			rect2.graphics.lineTo( 165, 10);
			rect2.graphics.endFill();
			addChild(rect2);
 
		}
 
		public function criaBola():void {
 
			bola = new Shape();
			bola.graphics.beginFill(0x00027F);
			bola.graphics.lineStyle(1, 0x00027F);
			bola.graphics.drawCircle(165, 120, 70);
			bola.graphics.endFill();
			addChild(bola);
		}
 
	}
 
}

O resultado que temos é o seguinte :

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Anteriormente tinha previsto o post sobre materiais dividido em dois, mas será necessário um terceiro post sobre o assunto, então pessoal até o próximo post sobre materiais.

Esta entrada foi publicada em Flash, POO, Tutoriais e marcada com a tag , , , , , , . Adicione o link permanenteaos seus favoritos.

Uma resposta a PaperVision Materials – Parte 2

  1. Mauricio Ribeiro disse:
    18 de novembro de 2009 às 9:26

    Muito bom seu tutos parabens, mas gostaria de saber como se importa objetos 3d para o flash cs3…!

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">