O FlashDevelop ferramenta para desenvolvimento de projetos em AS3 e AS2 opensource, lançou uma nova versão hoje 27 de agosto, com pequenas melhorias de desempenho e nos plugins já existentes. Para baixar a nova versão(3.0.3 RTM) acesse o link abaixo :

http://www.flashdevelop.org/community/viewtopic.php?f=11&t=5339

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 :

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:

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

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 :

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…

Olá pessoal nesse post eu vou falar sobre Papervision 3D(obs. esse post está em rascunho desde o ano passado), ela é uma engine que simula um ambiente 3D dentro do flash com um conjunto de classes que através de cálculos gera um ambiente altura, largura e profundidade.Mas lembrando que a nova versão do flash já tem um suporte nativo para 3D.

Atualmente existem várias engines 3D no mercado, sendo Papervision a mais popular. Com essa engine podemos trabalhar com formas como: planos , cubos , cilindros, cones e objetos complexos, exportados por ferramentas 3D, por exemplo, Blender.

Mais informações no site do projeto no google code: http://code.google.com/p/papervision3d/

Blog oficial: http://blog.papervision3d.org/

Um exemplo no site : http://www.papervision3d.org/

Vamos começar de leve, para esse tutorial será necessário baixar a versão 2.0 do papervision, no site : http://papervision3d.googlecode.com/files/Papervision3D_2.0_beta_1_src.zip

Descompacte o zip, o aqui contém uma pasta chamada src, dentro dessa pasta tem os seguintes arquivos :

Como na imagem a cima a pasta src possui as seguintes pastas nochump e org.

Copie a pasta “org” para o local do seu projeto. (no meu caso criei uma pasta papervision e em seguida criei um projeto com o flash Develop).

Para compilar o código eu vou utilizar flash develop + flex SDK que você pode ver o tutorial como utilizar aqui, se tudo der certo o flash develop irá reconhecer as classes do paperVision, crie uma classe chama Main e 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

package  {
 
	/**
	* ...
	* @author Fellyph Cintra fellyph.com.br/blog/
	*/
 
	import flash.display.Sprite;
 
	//Classes necessárias para trabalhar com 3D
	//em termos de visualização
 
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;
 
	//objeto a ser utilizado
	import org.papervision3d.objects.primitives.Sphere;
 
	// o Material a ser aplicado no objeto 3d
	import org.papervision3d.materials.WireframeMaterial;
 
	public class Main extends Sprite {
		// para criar um ambiente 3D precisamos desses três elementos para
                //visualização de de nosso ambiente, resumindo :
                // Viewport é responsável pela área que irá ser exibida
                // Scene3D é responsável pelos objetos 3d aplicados na tela
                // Camara3D será nossa visão do ambiente 3d
 
		private var _viewport		:Viewport3D;
		private var _cena			:Scene3D;
		private var _camera		:Camera3D;
 
		// BasicRenderEngine cuidará da renderização de nosso ambiente.
		private var _renderizador 	:BasicRenderEngine;
 
                //Sphere é nosso objeto primitivo 3D
		private var esfera 			:Sphere;
 
                // WireframeMaterial é camada do objeto primitivo ou seja nossa Textura
                // WireframeMaterial é um dos materiais mais simples do paperVision são
                // apenas linhas que contornam os vértices do meu objeto.
		private var material		        :WireframeMaterial;
 
		public function Main() {
 
			_viewport = new Viewport3D(450, 300, false, true);
			addChild(_viewport);
 
			_cena 			= new Scene3D();
			_camera 		= new Camera3D();
			_renderizador 	= new BasicRenderEngine();
 
			material = new WireframeMaterial(0x330000);
 
			esfera = new Sphere(material, 80, 6, 6);
 
			_cena.addChild(esfera);
 
			_renderizador.renderScene(_cena, _camera, _viewport);
 
		}
 
	}
 
}

Para que não esta ambientado com POO, vou fazer um resumo bem “Basicão”:

1. Na primeira linha definimos o pacote que a classe está “package {” nesse caso a classe está na raiz do projeto.
2. Importamos as classes necessárias
3. Iniciamos nossa classe ” public class Main extends Sprite { “
4. Definimos nossos atributos
5. Iniciamos nosso construtor (o construtor é o primeiro método a ser executado em uma classe) “public function Main() {“

Para esse tutorial para ficar simples eu joguei todas as operações dentro do construtor, para entender melhor vamos ver o passo-a-passo de nosso construtor:

• Primeiro criamos um novo Viewport3D, passamos como parâmetro ( largura:Number, altura:Number, autosize:Boolean e interatividade:Boolean ), existem outros parâmetros, mas não serão abordados nesse tutorial.
• Adicionamos o Viewport no palco.
• Instânciamos novos _renderizador, _cena e _camera.
• Criamos um novo material e passamos com parâmetro a cor.
• A instancimos uma nova esfera Objeto do tipo Sphere , para isso são necessário os parâmetros, o material , o raio da esfera, e a quantidade de segmentos horizontais e verticais
• Adicionamos a esfera na _cena
• por fim renderizamos nosso ambiente

Nesse esquema utilizado o nosso ambiente será renderizado apenas uma vez o resultado podemos ver abaixo:

Diferente do modelo acima o legal é dar movimento aos objetos, nesse caso precisamos  renderizar o nosso ambiente varias vezes, para isso utilizamos o Evento ENTER_FRAME, 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

package  {
 
	/**
	* ...
	* @author Fellyph Cintra fellyph.com.br/blog/
	*/
 
	import flash.display.Sprite;
 
	//Classes necessárias para trabalhar com 3D
	//em termos de visualização
 
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;
 
	//objeto a ser utilizado
	import org.papervision3d.objects.primitives.Sphere;
 
	// o Material a ser aplicado no objeto 3d
	import org.papervision3d.materials.WireframeMaterial;
 
	//importamos o Event para utilizar o ENTER_FRAME
	import flash.events.Event;
 
	public class Main extends Sprite {
 
		private var _viewport		:Viewport3D;
		private var _cena			:Scene3D;
		private var _camera		:Camera3D;
 
		private var _renderizador 	:BasicRenderEngine;
 
		private var esfera 			:Sphere;
		private var material		:WireframeMaterial;
 
 
 
		public function Main() {
 
			_viewport = new Viewport3D(450, 300, false, true);
			addChild(_viewport);
 
			_cena 			= new Scene3D();
			_camera 		= new Camera3D();
			_renderizador 	= new BasicRenderEngine();
 
			material = new WireframeMaterial(0x330000);
 
			esfera = new Sphere(material, 80, 7, 7);
 
			_cena.addChild(esfera);
 
			//adicionamos o Evento ENTER_FRAME
			addEventListener(Event.ENTER_FRAME, render);
 
		}
 
		public function render(e:Event):void {
			esfera.rotationY += 2;
			_renderizador.renderScene(_cena, _camera, _viewport);
		}
 
	}
 
}

Vamos lá a diferença para o modelo anterior é que, aumentei o número de segmentos da esfera para ficar visualmente melhor e adicionamos um evento ENTER_FRAME que chama o método “render” que faz duas coisas simples incrementa o rotationY e renderiza nosso ambiente a cada vez que o método é chamado.

O Resultado é o seguinte :

Próximo tutorial vou falar mais um pouco sobre papervision.

Quando comecei a reescrever esse post era dia 30 de março, aniversário do meu amigo André Ponce, Parceiro sempre ajudando quando possível, terminei de escrever 2 horas do dia 31 março, foi mau ai Ponce. Parabéns atrasado.

Até breve…

Meio atrasado mas esse post estava perdido nos meus rascunhos, saiu dia 27 de dezembro o relase 3.0.0 RCI do flash develop para baixa clique aqui. Entre as melhorias do novo release estão : 

• swc externos agora aparecem como classpath.
• a possibilidade de explorar um swc com duplo clique.
• melhor integração com flash player 10.
• erros de sitaxe ao vivo para as3.
• atualizado o MXML completation.

O grupo do Flash Develop sempre aconselha fazer Backup dos seu projetos quando for instalar uma nova versão, eu sinceramente nunca faço isso.

Até a Próxima.

No post Anterior eu mostrei como utilizar o flash develop + o flex SDK agora eu vou mostra como integrar o flash develop com o flash IDE.

Essa integração é bem simples vamos começar :

Abra o Flash Develop

crie um novo projeto, menu superior Project > New Project >

Na janela new project em installed Templates escolha a opção
action Script 3 > Flash IDE Project. Como podemos ver na imagem abaixo:

Escolha o nome do projeto e o local. e clique ok para prosseguir.

Agora vamos informar o local da Falsh IDE, va em tools > Program settings > ASCompletion > Flash IDE > Path to Flash IDE. nesse campo iremos informar a pasta da ide do flash.

Janela de Program settings

Na maioria das maquinas encontrasse em:
C:\Arquivos de programas\Adobe\Adobe Flash CS3\

Vamos escrever uma classe Main.as

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

package {
 
	/**
	* ...
	* @author Fellyph Cintra
	*/
 
        import flash.display.Sprite;
 
	public class Main extends Sprite{
		// cria um sprite
		public var alvo:Sprite;
 
		public function Main() {
                        //inicializa o sprite
			alvo = new Sprite()
                        // iniciamos o preenchimento do do vetor que será aplicado, na linha seguinte
                        // definimos  o estilo da linha e desenhamos um circulo
			alvo.graphics.beginFill(0x009900);
			alvo.graphics.lineStyle(1, 0x990000);
			alvo.graphics.drawCircle(200, 200, 50);
			addChild(alvo);
 
		}
 
	}
 
}

Para esse teste o arquivo flash(.fla) tem que estar na mesma pasta do arquivo Main.as

Então Abrimos o Flash , criamos um novo arquivo e na aba de propriedades do stage no campo de Document class informamos a classe que vai ser carregada nesse caso o “Main” não é necessário informar a extensão da Classe “.as”. Como na figura abaixo :

Se tudo estiver ok toda vez que for pressionado ( ctrl+enter ) o flash develop chamará a flash IDE. Mas para compilar o arquivo será necessário o fla específico esteja aberto.

Se estiver utilizando estrutura de pacotes será necessário informa-los, por exemplo, classes.Main.

Até a proxima pessoal.

Flash Develop é uma ótima ferramenta para desenvolvimento ActionScript que possui características como:

• Auto completar
• Administração de projetos AS2 e AS3
• Suporte a linguagens como PHP, HTML, CSS, XML e JS.
• Code checking
• Integração com FLASH IDE e FLEX SDK
• Totalmente free
• Exploração de símbolos em SWF e SWC.

Esses são alguns dos benefícios que chamam atenção para esta ferramenta, as características completas você confere aqui.

E para começar nosso tutorial será necessário baixar o Flash Develop clique aqui e o flex SDK baixe aqui. Na página do Flash Develop tem todas as versões(Releases), quando publiquei esse post a ultima versão é a 3.0 beta 9.

A instalação é  simples sem complicação, depois de instalada a ferramenta abra o Flash Develop vai aparecer a seguinte tela:

Essa é a startPage do Flash Develop(FD) ele mostra as os projetos recentes, a ultima versão e uma apresentação do FD. Também é possível navegar por paginas web.

Como falei anteriormente o FD pode trabalha integrado com FLAsH IDE ou o SDK do flex. O SDK do flash é free. Nesse tutotial vamos ver a integração do FD com SDK do FLEX.

Para quem não tem o SDK do FLEX baixe aqui.

Vamos seguir os seguintes passos:

• Descompacte de preferencia o arquivo no seguinte local c:\flex_sdk\
• Abra o Flash Develop no menu acesse > Tools > Program Settings  irá abrir a seguinte janela :

• No menu lateral na área de puglins selecione: AS3Context  no lado direito do menu na área de AS3 possui um campo Flex SDK no meu casa está em c:\flex_sdk_3\ em seguida clique em close. As informações serão salvas.
• Agora vamos criar um novo projeto menu superior > project > new project , aparecerá a seguinte tela :

• Será preciso informar os seguintes campos, o tipo do template do projeto nesse exemplo usaremos o ActionScript 3 empty project, informamos o nome do projeto e o local do projeto , o package não precisa ser informado. OK para prosseguir.
• Seu projeto está criado agora vamos estrutura-lo:

• No canto direito irá aparece a aba de projeto, vamos montar nossa estrutura conforme a figura acima,  clique com o botão direito sobre o nome do projeto. add> new folder. Como podemos ver na próxima imagem.

• Coloque o nome da pasta “classes” nessa pasta iremos colocar todas as nossas classes.
• Em seguida vamos adicionar a nossa classe , selecione a pasta classes com o botão direito add > new Class… > coloque o nome da sua classe “Main.as”.
• Agora vamos criar nosso arquivo swf, selecione o projeto com o botão direito add > New Empty File… , coloque o nome do arquivo teste.swf.
• Agora vamos configurar o Flash Develop para exportar para o nosso “.swf” no menu superior > project > properties > abrirá a seguinte janela :

No output file especificamos qual arquivo swf será nossa saída, no nosso caso “teste.swf”, o ultimo passo é falar qual a class que sempre será usada pelo meu swf ou seja a classe principal, no nosso exemplo a Main.

Selecionamos a classe Main com o botão direito, escolha a opção Always Compile. Como na figura a seguir :

A partir desse momento você já pode usar o flash develop com Flex SDK.

Vamos fazer um pequeno teste escreva na classe main :

package classes {
 
/**
* ...
* @author Fellyph Cintra
*/
 
import flash.display.Sprite;
 
public class Main extends Sprite{
 
	public var alvo:Sprite;
 
	public function Main() {
 
		//desenhando um circulo dentro do sprite alvo
		alvo = new Sprite()
		alvo.graphics.beginFill(0x009900);
		alvo.graphics.lineStyle(1, 0x990000);
		alvo.graphics.drawCircle(200, 200, 50);
		addChild(alvo);
 
}
 
}
 
}