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:

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
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 :

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

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…

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

Uma resposta a Papervision 3D + TweenLite

  1. Ramon Fritsch disse:

    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

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="" highlight="">