Olá Pessoal,

Sou Márcio Silva, e neste tutorial mostrarei os primeiros passos para que você possa começar a desenvolver seus aplicativos, jogos e animações utilizando o Papervision3D Engine.

Pré-requisitos: Conhecimento em Action Script 3.0. Conhecimento em Adobe Flash CS4.

O que é Papervision 3D?

Papervision 3D (P3D) é uma Engine Open Source para criação de Cenas 3D no Adobe Flash. Com esta engine podemos manipular de uma forma simplificada elementos 3D, escondendo detalhes de baixo nível. Esta engine não realiza cálculos físicos, como por exemplo gravidade, atrito, colisão elástica e inelástica, entre outros. Para isto é necessário a utilização de outras engines destinadas apenas a realizar cálculos físicos, isto será tema de outros tutoriais.

Como começar?

Como escrevi nos pré-requisitos, é indispensável o conhecimento de básico ao intermediário no Action Script 3.0. A API do P3D é totalmente orientada a objetos e possui uma documentação de código muito boa. Neste tutorial, utilizo como ferramenta o Adobe Flash CS4 para programar e rodar a aplicação.

Passo 1 – Primeiramente você deve baixar o P3D que está hospedado no Google Code: http://code.google.com/p/papervision3d/.

Passo 2 – Crie um pasta com o nome de sua escolha e descompacte o conteúdo do arquivo .ZIP .

Passo 3 - Abra o Adobe Flash CS4, e crie um novo arquivo .FLA do tipo AS3 com o nome PlaneP3D.fla. Coloque as seguintes configurações:

Passo 4 – Para que o Adobe Flash encontre as definições de classe do Papervision 3D é necessário configurar o Library Path. Vá em Edit->Preferencces->Action Script, clique em ActionScript 3.0 Settings. Informe o diretório onde você descompactou o Papervision 3D. No meu caso ficou como mostrado abaixo:

Passo 5 – Crie um Action Script File (.AS) com o nome de PlaneP3D.as.

Passo 6 – No arquivo PlaneP3D.as coloque o seguinte código.

Alguns comentários sobre o código

O que é Viewport3D?

Para explicar o que é a Viewport3D, só fazer uma analogia à tela de cinema, onde é projetado o filme para que seja possível assistí-lo. Portanto, é uma região retangular onde é projetado a Cena 3D.

O que é uma Camera3D?

A Camera utilizada aqui é a mesma que você já conhece do cinema, ela grava o que acontece no mundo e projeta na tela (View Port).

O que é Scene3D?

A Cena 3D é basicamente o mundo que se deseja ver.

O que é BasicRenderEngine?

Fazendo novamente analogia ao cinema,  o Basic Render Engine é o Diretor, ele grita “Ação” e tudo acontece: A Camera começa a filmar, projetando a Cena na View Port. Por isso nada acontece se ele não “ordenar” através do método renderScene ().

O Construtor da classe Plane dá o pontapé inicial adicionando a View Port ao stage, pois o restante dos objetos serão renderizados dentro dela. Todos os objetos pertencentes à Cena, neste caso o Plano, devem ser adicionados ao objeto scene. Como nesta cena o plano será deslocado para a direita à cada ENTER_FRAME, um listener foi adicionado.

Pronto, se você não pressionou CTRL + ENTER para ver o que acontece, pressione agora e veja o resultado.

Veja o resultado final aqui PlaneP3D.

Baixe os arquivos deste tutorial: http://blog.creativerender.com/wp-content/uploads/2010/03/papervision_beginner.zip

Autor: Márcio Silva – Colunista de Flash & ActionSctipt MXSTUDIO.
Site: www.creativerender.com e www.marciosilva.net

Qualquer dúvida envie um e-mail para contato@creativerender.com ou acesse nosso fórum

Neste tutorial, irei mostrar a vocês como criar uma Galeria de Imagens com XML no Flash utilizando o efeito LightBox presente em algumas páginas HTML. Os requisitos para esse tutorial são:

• Flash 8, Flash CS3 ou Flash CS4
• Conhecimento com interação do Flash com XML
• Componente FlashLightBox

Criando o XML

Vamos começar criando o XML. O arquivo XML irá conter o nome das imagens e a legenda que será exibida. Tanto o arquivo XML quanto as imagens precisam estar no mesmo diretório do arquivo FLA do Flash. Salvem o XML com o nome de imagens.xml.

<?xml version="1.0" encoding="utf-8"?>
<imagens>
   <foto>
      <imagem>imagem.jpg</imagem>
      <texto>Moto Ayrton Senna</texto>
   </foto>
   <foto>
      <imagem>imagem1.jpg</imagem>
      <texto>Mclaren do Senna</texto>
   </foto>
   <foto>
      <imagem>imagem2.jpg</imagem>
      <texto>Capacete Senna</texto>
   </foto>
   <foto>
      <imagem>imagem3.jpg</imagem>
      <texto>Ferrari Shumacher</texto>
   </foto>
   <foto>
      <imagem>imagem4.jpg</imagem>
      <texto>Loro</texto>
   </foto>
   <foto>
      <imagem>imagem5.jpg</imagem>
      <texto>Trator do Sítio</texto>
   </foto>
   <foto>
      <imagem>imagem6.jpg</imagem>
      <texto>Carroça antiga</texto>
   </foto>
</imagens>

Download do Componente FlashLightBox

Para criar o efeito LightBox vamos usar o Componente que eu desenvolvi. O link para baixar o Componente e instruções de como instalar estão em meu Blog.

Componente FlashLightBox

Criando a galeria

Após terem baixado e instalado o Componente, vamos criar um novo arquivo no Flash. Abram o painel de Componentes (Ctrl+F7 ou Window, Components) e joguem para o palco o Componente FlashLightBox, abram o painel Properties e dêem instancia de flb para ele. O Componente pode estar posicionado no local que desejar, ele não irá aparecer quando seu arquivo rodar.

Diferentemente das outras galerias que mostrei como criar aqui no MXStudio, nessa galeria não é preciso criar nenhum MovieClip, campo de texto, nem nada. Tudo será criado a partir do ActionScript. Nós vamos carregar as imagens, adicionar uma borda a cada imagem e adicionar uma sombra usando o Filtro DropShadow, cada imagem será dimensionada para um tamanho randomico, assim como sua posição e rotação. Podemos mover as imagens pela tela e para ver a imagem com o tamanho original clicamos duas vezes sobre a imagem para que ela seja revelada com o efeito LightBox.

Vamos as ações da Galeria, quem estiver usando o ActionScript 2, copiem e colem essas ações no mesmo frame que o Componente está:

/* Importa a Classe do Filtro DropShadow */
import flash.filters.DropShadowFilter;
/* Alinha o arquivo para o canto superior esquerdo */
Stage.align = "TL";
/* Desabilitamos o dimencionamento do arquivo */
Stage.scaleMode = "noScale";
/* Variável que vai ser usada no setInterval */
var intervalo:Number = new Number();
/* Variável usada no duplo clique do mouse */
var count:Number = 0;
/* Variável que armazena o total de itens do XML */
var total:Number = new Number();
/* Criamos um listener */
var listener:Object = new Object();
/* Criamos uma instancia da Classe XML */
var xml:XML = new XML();
/* Ignoramos os espaços em branco */
xml.ignoreWhite = true;
/* Carregamos o arquivo XML */
xml.load("imagens.xml");
/* Ao carregar o arquivo XML */
xml.onLoad = function(ok) {
	/* Se não deu erro */
	if (ok) {
		/* Identificamos o primeiro nó do XML */
		xmlNode = this.firstChild;
		/* Armazena o total de itens do XML */
		total = xmlNode.childNodes.length;
		/* Chama a função carrega */
		carrega();
	} else {
		/* Mostra a mensagem de erro */
		trace("Erro");
	}
}
/* Função que carrega as imagens */
function carrega() {
	/* Criamos um laço para percorrer todos os itens do XML */
	for (var i=0; i<total; i++) {
		/* Criamos um novo MovieClip */
		var mc:MovieClip = this.createEmptyMovieClip("mc"+i, this.getNextHighestDepth());
		/* Criamos um MovieClip que servirá de alvo para carregar a imagem */
		var holder:MovieClip = mc.createEmptyMovieClip("holder", mc.getNextHighestDepth());
		/* Rotacionamos o MovieClip de forma randomica */
		mc._rotation = Math.round(Math.random()*-30)+10;
		/* Armazena o número do nó do XML */
		mc.id = i;
		/* Ao precionar do Mouse no MovieClip */
		mc.onPress = function() {
			/* Jogamos ele pra cima de tudo */
			this.swapDepths(this._parent.getNextHighestDepth());
			/* Incrementamos a variável do duplo clique */
			count++;
			/* Se ela for igual a 1 */
			if (count == 1) {
				/* Movimenta o MovieClip */
				startDrag(this, false);
				/* Iniciamos um intervalo para saber se o usuário irá clicar novamente */
				/* Fazemos isso para saber se é um clique duplo ou não */
				intervalo = setInterval(verifica, 250);
			/* Se a variável for igual a 2 */
			/* Significa que o duplo clique aconteceu */
			} else if (count == 2) {
				/* Zeramos a variável */
				count = 0;
				/* Encerramos o intervalo */
				clearInterval(intervalo);
				/* Chamamos a função carrega do Componente FlashLightBox */
				/* A função recebe o endereço da imagem e o texto para a legenda */
				flb.carrega(xmlNode.childNodes[this.id].childNodes[0].firstChild.nodeValue, xmlNode.childNodes[this.id].childNodes[1].firstChild.nodeValue);
			}
		};
		/* Ao soltar do Mouse */
		mc.onRelease = mc.onReleaseOutside = function() {
			/* Paramos de movimentar o MovieClip */
			this.stopDrag();
		}
		/* Criamos uma instancia da Classe DropShadowFilter */
		var sombra:DropShadowFilter = new DropShadowFilter();
		/* Modiciamos o angulo */
		sombra.angle = 45;
		/* Modificamos o blurX e blurY */
		sombra.blurX = 5;
		sombra.blurY = 5;
		/* Modificamos a distancia */
		sombra.distance = 3;
		/* Modificamos a intencidade da sombra */
		sombra.strength = 0.75;
		/* Criamos um Array que armazena os filtros usados */
		var filtro:Array = new Array();
		/* Adicionamos ao Array a sombra */
		filtro.push(sombra);
		/* Aplica a sombra ao MovieClip */
		mc.filters = filtro;
		/* Criamos uma instancia da Classe MovieClipLoader */
		var loader:MovieClipLoader = new MovieClipLoader();
		/* Carregamos a imagem */
		loader.loadClip(xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue, holder);
		/* Modificamos o tamanho dela randomicamente */
		holder._xscale = (Math.random()*20)+60;
		holder._yscale = holder._xscale;
		/* Modificamos a posição da imagem */
		holder._x = 10;
		holder._y = 10;
		/* Adicionamos um listener a instancia da Classe MovieClipLoader */
		loader.addListener(listener);
	}
}
/* Função chamada caso o usuário não clique duas vezes sobre a imagem */
function verifica() {
	/* Zera a variavel */
	count = 0;
	/* Encerramos o intervalo */
	clearInterval(intervalo);
}
/* Ao carregar a imagem */
listener.onLoadInit = function(alvo:MovieClip) {
	/* Definimos a cor de fundo da borda */
	alvo._parent.beginFill(0xFFFFFF, 100);
	/* Começamos a desenhar a borda de acordo com o tamanho da imagem */
	alvo._parent.lineTo(0, 0);
	alvo._parent.lineTo(0, alvo._height+20);
	alvo._parent.lineTo(alvo._width+20, alvo._height+20);
	alvo._parent.lineTo(alvo._width+20, 0);
	/* Termina de desenhar */
	alvo._parent.endFill();
	/* Modifica a posição do MovieClip de forma randomica */
	alvo._parent._x = Math.round(Math.random()*(Stage.width-alvo._width));
	alvo._parent._y = Math.round(Math.random()*(Stage.height-alvo._height));
}

Quem estiver usando ActionScript 3 as ações são essas:

/* Alinha o arquivo para o canto superior esquerdo */
stage.align = StageAlign.TOP_LEFT;
/* Desabilitamos o dimencionamento do arquivo */
stage.scaleMode = StageScaleMode.NO_SCALE;
/* Variavel que armazena o MovieClip selecionado */
var alvo:MovieClip;
/* Variável que armazena a quantidade de itens do XML */
var total:Number = new Number();
/* Criamos uma instancia da Classe XML */
var xml:XML = new XML();
/* Criamos uma instancia da Classe URLLoader */
var arquivo:URLLoader = new URLLoader();
/* Carregamos o XML */
arquivo.load(new URLRequest("imagens.xml"));
/* Adicionamos um event listener chamando a função arquivoOk */
arquivo.addEventListener(Event.COMPLETE, arquivoOk);
/* Função chamada assim que o XML é carregado */
function arquivoOk(event:Event):void {
	/* Armazenamos os dados do XML na instancia da Classe XML */
	xml = new XML(event.target.data);
	/* Armazenamos o total de itens */
	total = xml.foto.length();
	/* Chama a função carrega */
	carrega();
}
/* Função que carrega as imagens */
function carrega() {
	/* Criamos um laço para percorrer todos os itens do XML */
	for (var i=0; i<total; i++) {
		/* Criamos um MovieClip */
		var mc:MovieClip = new MovieClip();
		/* Rotacionamos ele randomicamente */
		mc.rotation = Math.round(Math.random()*-30)+10;
		/* Habilitamos o clique duplo do Mouse */
		mc.doubleClickEnabled = true;
		/* Adicionamos um event listener para quando o mouse for clicado no MovieClip */
		mc.addEventListener(MouseEvent.MOUSE_DOWN, mcPress);
		mc.addEventListener(MouseEvent.MOUSE_UP, mcRelease);
		/* Adicionamos um event listener para o clique duplo */
		mc.addEventListener(MouseEvent.DOUBLE_CLICK, mcDoble);
		/* Armazena o número do nó do XML */
		mc.id = i;
		/* Criamos uma instancia da Classe DropShadowFilter */
		var sombra:DropShadowFilter = new DropShadowFilter();
		/* Modificamos o angulo da sombra */
		sombra.angle = 45;
		/* Modificamos o blurX e blurY */
		sombra.blurX = 5;
		sombra.blurY = 5;
		/* Modificamos a distancia */
		sombra.distance = 3;
		/* Modificamos a intencidade da sombra */
		sombra.strength = 0.75;
		/* Criamos um Array para armazenar os filtros utilizados */
		var filtro:Array = new Array();
		/* Adicionamos no Array a sobra criada */
		filtro.push(sombra);
		/* Adiciona os filtros ao MovieClip */
		mc.filters = filtro;
		/* Criamos uma instancia da Classe Loader */
		var loader:Loader = new Loader();
		/* Desabilitamos o mouse */
		loader.mouseEnabled = false;
		/* Carregamos a imagem */
		loader.load(new URLRequest(xml.foto[i].imagem));
		/* Modificamos o tamanho da imagem randomicamente */
		loader.scaleX = (Math.random()*0.2)+0.6;
		loader.scaleY = loader.scaleX;
		/* Modificamos a posição da imagem */
		loader.x = 10;
		loader.y = 10;
		/* Adicionamos um event listener para saber quando terminou de carregar a imagem */
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderOk);
		/* Adiciona a imagem ao MovieClip criado */
		mc.addChild(loader);
		/* Adiciona o MovieClip ao palco */
		addChild(mc);
	}
}
/* Função chamada quando a imagem termina de ser carregada */
function loaderOk(event:Event):void {
	/* Criamos uma referencia para a imagem */
	var loader:Loader = event.target.loader;
	/* Criamos uma referencia ao MovieClip */
	var mc:MovieClip = MovieClip(loader.parent);
	/* Definimos a cor de fundo da borda */
	mc.graphics.beginFill(0xFFFFFF, 1);
	/* Começamos a desenhar a borda no MovieClip de acordo com o tamanho da imagem */
	mc.graphics.lineTo(0, 0);
	mc.graphics.lineTo(0, loader.height+20);
	mc.graphics.lineTo(loader.width+20, loader.height+20);
	mc.graphics.lineTo(loader.width+20, 0);
	/* Termina de desenhar */
	mc.graphics.endFill();
	/* Modifica a posição do MovieClip de forma randomica */
	mc.x = Math.round(Math.random()*(stage.stageWidth-mc.width));
	mc.y = Math.round(Math.random()*(stage.stageHeight-mc.height));
}
/* Função chamada quando clicamos duas vezes sobre a imagem */
function mcDoble(event:MouseEvent):void {
	/* Chamamos a função carrega do Componente FlashLightBox */
	/* A função recebe o endereço da imagem e o texto para a legenda */
	flb.carrega(xml.foto[event.target.id].imagem, xml.foto[event.target.id].texto);
}
/* Função chamada quando clica com o mouse sobre o MovieClip */
function mcPress(event:MouseEvent):void {
	/* Identificamos o alvo */
	alvo = MovieClip(event.target);
	/* Coloca o alvo a frente dos demais MovieClips */
	addChild(alvo);
	/* Movimenta o MovieClip */
	alvo.startDrag();
}
/* Função chamada quando soltamos o botão esquerdo do mouse */
function mcRelease(event:MouseEvent):void {
	/* Paramos de movimentar o MovieClip */
	event.target.stopDrag();
}

Aqui está um exemplo da galeria funcionando:
Exemplo galeria

Conclusões

Chegamos ao fim de mais um tutorial. Um exemplo bem simples de como usar o Componente FlashLightBox e uma oportunidade para aprender a criar uma galeria usando apenas ActionScript.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO
Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Porém essa semana eu tive uma demanda de um site feito em flash que deveria consumir métodos de um CFC (ColdFusion Componente), como eu não fazia isso desde a época que eu trabalhava com AS2 decidi escrever uma nova classe para conexão em AS3 e foi exatamente ai que meus problemas começaram.

Primeiramente eu teria que instalar o ColdFusion 8 na minha maquina e de preferência ele deveria rodar em cima do Apache, para isso eu usei o Tutorial do meu brother Marcio Nakano:
Instalando servidor Apache com Mysql e as linguagens ColdFusion e PHP.

Feito isso (e depois desfeito, pois achei que isso poderia ser a causa do erro que eu descrevo a seguir) agora era a hora de escrever a classe, mas por onde começar, Google é a solução? Não foi bem assim.

O material que fala sobre Flash Remoting + ColdFusion na web é bem fraco e muito confuso sem falar que a grande maioria é em inglês o que dificultou um pouco mais o entendimento já que não sou um expert na língua do “Tio Sam”, abaixo estão listados alguns dos melhores que encontrei:
Delicious Flash Remoting

Foi então que tive a feliz idéia de Twittar essa minha raiva e logo depois recebi uma mensagem do Neto Leal e de Bruno Ribeiro me oferecendo ajuda, na parte do Neto Leal ele me indicou esse link:
Ativando Flash Remoting

Mesmo fazendo o que o link indica o erro ainda persistia foi então que comecei a trocar idéia com o Bruno Ribeiro, depois de algumas dicas e do envio da classe que ele mesmo usa para fazer isso eu consegui conectar e consumir um método do ColdFusion.

Eu sempre digo isso, mas é bom reforçar, na vida uma das melhores coisas é ter amigos e eu agradeço ao Neto Leal e ao Bruno Ribeiro pela ajuda, então nada mais lógico do que eu postar aqui a classe que eu fiz baseada nesse longo caminho percorrido para conseguir conectar o Flash ao ColdFusion e ao AMFPHP, lembrando que essa classe foi baseada na classe do Bruno Ribeiro e não tenho a pretensão de achar que ela é a melhor do mundo, mas pelo menos ela funciona com ColdFusion e AMFPHP, segue o código:

RemotingConexao.as
[coolcode lang="actionscript"]

package lmcosta.remoto.cf
{
import flash.display.MovieClip;

import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.NetStatusEvent;

import flash.net.NetConnection;
import flash.net.ObjectEncoding;
import flash.net.Responder;

/**
* …
* @author lmcosta
* @link www.lucasmarcal.com.br/blog – www.brunoribeiro.net
* @return
* @version 1.0
*/

public class RemotingConexao extends MovieClip
{
public var _servico : NetConnection;
public var _responder : Responder;
public var _fcnRetorno : Function;
public var _cfc : String;
public var _metodo : String;
public var _resultado : Object;

public function RemotingConexao()
{
this._responder = new Responder(resultado, falha);
this._servico = new NetConnection();
this._servico.objectEncoding = ObjectEncoding.AMF0;
this._servico.connect(”http://127.0.0.1:8500/flashservices/gateway”);
trace(”Conectou”);
}
/**
*
* @param $cfc = String que contém o caminho do CFC
* @param $metodo = String com o nome do método do CFC
* @param $fcnRetorno = Metodo de retorno na referencia dessa classe
* @param $args = Argumentos
*/
public function consome($cfc:String = “” , $metodo:String=”" , $fcnRetorno:Function = null , $args:Object = null ):void
{
var refCFCMetodo:String = $cfc + “.” + $metodo;

this._fcnRetorno = $fcnRetorno;
this._cfc = $cfc;
this._metodo = $metodo;

if ($args == null)
{
this._servico.call.apply(null, [refCFCMetodo, this._responder]);
}
else
{
this._servico.call.apply(null, [refCFCMetodo, this._responder].concat($args));
}

}
/**
*
* @param f = Objeto que retorna Erros
*/
private function falha(f:Object):void
{
trace(”fault”+f.details);
trace(”fault”+f.description);
}
/**
*
* @param re = Objeto que retorna os resultados
* @return Retorna o valor que veio do CFC na referencia da classe
*/
private function resultado(re:Object):Object
{
this._resultado = re;

if (re != “”)
{
this._resultado = re;

if (this._resultado.length)
{
return this._fcnRetorno(this._resultado);
}
else
{
return this._fcnRetorno(false);
}
}
else
{
return this._fcnRetorno(false);
}
}

}

}
[/coolcode]

Consumindo a classe
Para utilizar essa classe você deve criar um novo arquivo no Flash do tipo Actionscript 3.0, depois crie uma classe que no meu caso eu chamei de “Teste.as” e escreva o seguinte:

Teste.as
[coolcode lang="actionscript"]

package
{
import flash.display.MovieClip;
import lmcosta.remoto.cf.RemotingConexao;
/**
* …
* @author lmcosta
*/
public class Teste extends MovieClip
{
public var re:RemotingConexao

public function Teste()
{
trace(”Conetando…….”)
this.re = new RemotingConexao();
this.re.consome(”remotoAS3.componente”, “ola”, this.resultadoItem, {msg:”Seja Bem vindo”});
}

public function resultadoItem(obj:Object):void
{
trace(”Tudo certo hora de trampar ” + obj)
}

}

}
[/coolcode]

Arquivos do Tutorial

Para utilizar a mesma classe para conectar ao AMFPHP basta você trocar o caminho do Gateway na classe RemotingConexao.as e indicar a classe e o método na classe Teste.as
Gostaria mais uma vez de agradecer ao Bruno Ribeiro e ao Neto Leal pela ajuda e espero que essa classe possa ajudar a todos.
Até a próxima pessoal e sigam-me pelo Twitter

Mais uma vez imagino que ouvirei uma frase constante de alunos e amigos:

“Mas já vai sair o CS5? Eu mal comecei a usar o CS4!!!”

Em partes.

O CS5 já vem sendo desenvolvimento há um tempo, para quem não sabe o ciclo médio de lançamentos da Adobe é de 18 meses.

Sendo assim como tivemos a CS4 lançada em Outubro passado, temos um prazo para a nova suíte datando em aproximadamente Abril de 2010.

Vou falar aqui de algumas novidades já públicas que eu posso comentar sobre o novo Flash.

Integração com o Builder

Agora desenvolvedores podem usar a IDE como gerenciador de elementos gráficos (o que no final das contas é a proposta mesmo) e ter como base para programação uma IDE voltada para programação e repleta de recursos como é o caso do Flash Builder (antigo Flex).

A outra linha também será possível: Desenvolver majoritariamente no Builder e gerar a exportação por ele apontando para o FLA.
Sem sombra de dúvidas uma novidade muito interessante para o universo do Flash.

Canso de ouvir amigos que depois de migrarem para o Builder têem repulsa do painel Actions, pela sua falta de recursos. Agora a coisa fica bem mais integrada. Flash Pro para design e arquitetura do projeto e codificação na IDE focada para isso que é recém lançado Builder.

Flash CS5 Integração com Flash Builder

Code Samples

Novo painel para agilizar e facilitar a adição de códigos ao projeto. Além de automatizar tarefas comuns existe a possibilidade de criar e armazenar blocos próprios de código para evitar escrever muita coisa repetitiva sempre.
Útil para deixar mais amigável o primeiro contato de iniciantes com a ActionScript 3.0. Pode ser a utopia do uso dos Behaviors.

Teremos itens para adição de interatividade (drag ‘n drop), controle de linha do tempo (nextFrame/Scene), movimentação por teclado (uso de setas), carregamento de arquivos (load de imagens e SWFs) e manipuladores de eventos (nossos essenciais listeners).

Flash CS5 - Novo Painel Code Samples

Painel Actions Melhorado

Para os que migram (e por um tempo ainda migrarão) para a programação em IDEs mais parrudas como o Eclipse/Builder essa novidade era pedida há muito tempo, MESMO.
Entre outros recursos o painel agora tem suporte a code hints de classes customizadas e importadas. Recursos como auto completar com o nome de métodos e propriedades de recursos externos sempre foram muito pedidos no Flash e são com certeza uma das grandes razões de adoção do Builder como plataforma de programação.

A coisa agora estará bem melhor (só não sei se o movimento migratório para o Builder será freado..rs).

Flash CS5 - Melhorias Painel Actions

Ferramenta Deco Melhorada

A ferramenta introduzida na versão CS4 terá novos recursos para aumentar a gama de possibilidades de criação.
Novos brushs customizáveis irão melhorar a adoção da ferramenta que pessoalmente eu só uso em treinamentos.

Novos recursos com o Flash Text Layout Framework

A implementação do novo framework da Adobe irá permitir um controle inédito de textos no Flash.

Novidades  em questões de estilos e alinhamentos, textos da direita para a esquerda, gestão de colunas, blocos de texto.

FLA baseado em XML

Essa novidade era prevista (eu já tinha cantado essa bola quando falei do formato XFL) e será muito bem recebida.

A proposta é poder controlar e modificar recursos e elementos de um projeto sem necessariamente abrir e mexer com o FLA. O controle de edições de XML e arquivos de imagens centralizados irão agilizar e dar muito mais poder para desenvolvimentos entre pessoas. Alterar o topo de um site ou alguns elementos de um banner sem depender da abertura e manipulação direta no FLA são exemplos que falam por si.

Componente de Video para Live Preview

Essa era uma novidade esperada para o Flash CS4 mas só pode ser realmente implementada na CS5.

Agora temos um componente que permite assistir um preview do vídeo dentro do palco do Flash sem necessitar da exportação tradicional (CTRL/CMD+ENTER)

BOMBA: Desenvolvimento para iPhone OS (iPhone e iPod Touch)

Não dá para descrever essa novidade com outra palavra: Bomba!

Depois da Apple ter alfinetado a Adobe dizendo que o player do Flash era pesado e consumia muito de aparelhos portáteis, a Adobe começou uma onda interna de trabalhos para mudar esse quadro.

Aos que não sabiam a empresa se reposicionou com uma nova versão do Flash Player 10 com praticamente todos os recursos da Web voltado para dispositivos móveis.
Fez acordos com 19 das 20 maiores fabricantes do mundo (quem será que ficou de fora?!) e está lançando essa versão do Player 10 em plataformas como o Android com grande afinco (pesquisem sobre o HTC Hero), mas não deixou de ter foco no universo do iPhone.

Lançar o Player dependeria totalmente de parceria (entenda aprovação) com a Apple, mas eis que a Adobe aparece com essa: o Flash CS5 poderá ser usado como plataforma de desenvolvimento e criação para iPhone.

O porque disse ser tão bombástico?

Até hoje o desenvolvimento para iPhone está em um universo controlado inteiramente pela Apple.

Nós temos que usar o Xcode que é sua IDE para desenvolvimento, que só roda no sistema operacional OS X que por sua vez só roda em máquinas Apple. A parte de vídeo roda em quicktime não em FLV.
Vocês podem não saber mas mesmo o youtube do iphone foi ajustado para fazer um encoding em mp4 para o iphone, para nem a parte de vídeo sair do controla da empresa.

Agora a Adobe anuncia que o Flash irá permitir a criação de apps para iPhone usando toda a base do Flash.
Isso quer dizer que nós que já trabalhos e desenvolvemos com ActionScript 3 há anos estaremos aptos a criar ou mesmo migrar nossos sistemas para a plataforma móvel da maçã.

E não fiquem pensando que a coisa é por traz dos panos e com maracutaias (alguém pensou em Palm). Pela proposta, nós iremos desenvolver em Flash/AS3 e iremos exportar aplicativos para o formato nativo do iPhone OS.

Assim eles poderão ser distribuídos e vendidos na App Store como um software criado normalmente em Xcode/Cocoa.

Essa talvez seja a novidade que mais vai impactar a nova versão do Flash, pode ser a porta de entrada de milhares de desenvolvedores para o mundo dos negócios na App Store do iPhone.

Eu já tinha começado a desenvolver para o iPhone há meses atrás, mas aprender o Objective-C do zero me desanimou pelo tempo que demandaria. Agora sabendo que posso desenvolver para o iPhone direto do nosso querido Flash com ActionScript 3, bem o panorama ficou MUITO promissor.

Mais detalhes na página dedicada ao assunto pela Adobe:

http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/

Conclusão

O Flash CS5 terá várias novidades para facilitar a vida dos profissionais que o utilizam.

Sejam as melhorias para designer (Deco, TLF), programadores iniciantes (Code samples) e programadores avançados (integração com Builder e compeling melhorado no painel) todos serão beneficiados com a versão.

Mas com ponto chave coloco essa quebra de paradigma no desenvolvimento para iPhone. Tenham certeza que esse mercado que já é rentável para desenvolvedores Cocoa, pode ser muito mas muito interessante para nós guerreiros do AS3.

É previsto um Beta do Flash CS5 para o final do ano, assim que tiver o meu (e puder falar..rs) eu divulgo mais informações.

Abraço,
Danilo Santana – Administrador do Portal MXSTUDIO

Hoje começo a colaborar com essa comunidade ainda mais e pra mim é um orgulho está escrevendo aqui. Acompanho a mais de 3 anos o MX Studio!

Além do fórum do MX Studio ser um sucesso, todos os tutoriais aqui são de ótima qualidade. Se você é prestativo, tem curiosidade de aprende e nunca desiste daquilo que pretende alcançar, o MX Studio te ajudará!

Bom, vamos parar de blablabla e vamos estudar algo que é de suma importância na programação em AS ou em até outras linguagens, ARRAY!

Pois é, Array. Tem vários tutoriais na internet hoje sobre este assunto, mas o que quero passar aqui com esta primeira etapa são etapas de como trabalhar bem com este tipo de objeto.

Além de trabalhar com Array, vamos trabalhar com outra opção de Matriz indexada que é o Vector.

Requisitos para o estudo:

Flash CS3 ou Flash CS4 usando ActionScript 3
Conhecimentos básicos em ActionScript 3
Recomendo o download do Guia do ActionScript 3 que está em português – http://www.mxstudio.com.br/forum/index.php?showtopic=67677

Nosso estudo sobre estes tipos de Matrizes será dividido nas seguintes etapas:

1. Noções básicas sobre matrizes
2. Matrizes indexadas
3. Matrizes associativas
4. Matrizes multidimensionais
5. Clonagem de matrizes
6. Exemplo: Lista de reprodução

Noções básicas sobre matrizes – Teoria

Imagine uma player de música. Imaginou?

Seria uma variável para cada música?

Quantas músicas você poderá armazenar neste player? 1, 2, 3… 100?

Como vai organizar está informação para ser de fácil acesso para navegar entre as músicas ou trocar uma música, deletar 3 músicas, tocar a primeira, terceira é última música do player?

Será muito mais fácil organizar todos os objetos de músicas em um pacote e trabalhar com eles como se fossem um grupo.

Não pense que matrizes só serviram para armazenar músicas, podemos criar listas de vídeos em um site ou criar listas de banners que iram aparecer durante o mês de Julho, por exemplo.

Uma matriz é um elemento de programação que funciona como contêiner para um conjunto de itens, como uma lista de músicas.

Os itens individuais de uma matriz são conhecidos como elementos da matriz. A matriz pode ser considerada como um arquivador de variáveis. As variáveis podem ser adicionadas como elementos na matriz, como quando você coloca uma pasta em seu arquivador. Você pode trabalhar com a matriz como uma única variável como carregar todo o seu arquivo para um outro local. Você pode trabalhar com as variáveis como um grupo, como analisar as pastas uma a uma para buscar informações. Você também pode acessá-las individualmente, como se estivesse abrindo o arquivo e selecionando uma única pasta.

A matriz indexada é o tipo de matriz mais comum do ActionScript. Em uma matriz indexada, cada item é armazenado em um slot numerado (conhecido como índice). Os itens são acessados por meio de números, como em endereços. As matrizes indexadas atendem a maior parte das exigências de programação. A classe Array é uma das classes mais comuns utilizada para representar uma matriz indexada.

Para criar este exemplo, abra um novo documento na linguagem AS3 (ActionScript 3), clique na primeira camada, logo no primeiro frame desta mesma camada e digite o seguinte código:

var times:Array = new Array("Cruzeiro","Grêmio","São  Paulo","Atlético PR")
for(var  i:uint = 0; i<times.length; i++){
trace("No indice  "+i+" do Array times (times["+i+"]), contém o valor "+  times[i].toString());
}

Salve, e teste o filme (CTRL+ENTER)

Em geral, uma matriz indexada é usada para armazenar vários itens do mesmo tipo (objetos que são ocorrências da mesma classe). A classe Array não tem meios de restringir o tipo de itens que ela contém.

A classe Vector é o tipo de matriz indexada no quais todos os itens de uma única matriz são do mesmo tipo. O uso da ocorrência Vector em vez de Array também pode proporcionar melhorias no desempenho, além de outras vantagens. A classe Vector está disponível a partir do Flash Player 10 e do Adobe AIR 1.5.

Entenderá melhor sobre “ocorrências da mesma classe” e como fazer “restrição”dos tipos de itens com a classe Vector nas próximas etapas.

Tarefas comuns de matrizes

As seguintes atividades comuns para se trabalhar com matrizes são a seguir e serão aplicadas no decorrer de outras etapas:

1. Criação de matrizes indexadas usando as classes Array e Vector
2. Adição e remoção de elementos de matriz
3. Classificação de elementos de matriz
4. Extração de partes de uma matriz
5. Trabalho com matrizes associativas e dicionários
6. Trabalho com matrizes multidimensionais

Conceitos e termos importantes

A lista de referência a seguir contém termos importantes usados neste capítulo:

1. Matriz: é um objeto que serve como contêiner para agrupar vários objetos
   1. var continentes:Array = new Array();
2. Operador de acesso à matriz ([]): é um par de colchetes que circundam um índice ou uma chave e identifica exclusivamente um elemento de matriz. Essa sintaxe é usada após um nome de variável de matriz para especificar um único elemento da matriz, em vez de especificá-la inteira.
   1. Índice: continentes[0]
   2. Chave: continentes[“ocidental”]
3. Matriz associativa: é uma matriz que usa chaves de string para identificar elementos individuais
   1. Chave: continentes[“ocidental”]
4. Tipo base: é o tipo de dados dos objetos que uma ocorrência de Vector pode armazenar
5. Dicionário: é uma matriz cujos itens consistem em pares de objetos, conhecidos como chaves e valores. A chave é usada no lugar de um índice numérico para identificar um único elemento.
6. Elemento: é um item único de uma matriz
7. Índice: é o “endereço” numérico usado para identificar um único elemento em uma matriz indexada
8. Matriz indexada: é o tipo padrão da matriz que armazena cada elemento em uma posição numerada e usa o número (índice) para identificar elementos individuais
   1. Chave: continentes[0] = “América do Sul”;
   2. Chave: continentes[1] = “América do Norte”;
9. Chave: é a string ou o objeto usado para identificar um único elemento em uma matriz associativa ou em um dicionário
10. Matriz multidimensional: é uma matriz que contém itens que são matrizes, em vez de valores únicos.
11. T: é a convenção padrão usado nesta documentação para representar o tipo base de uma ocorrência de Vector, independentemente do tipo base. A convenção T é usada para representar um nome de classe, conforme exibido na descrição do parâmetro Type. (“T” corresponde a “tipo”, como em “tipo de dados”).

Está primeira etapa está com bastante teoria. Nas próximas etapas vamos trabalhar com exemplos das Matrizes Array e Vector.

Sugestões e dúvidas sobre o assunto, fiquem a vontade para comentar…

Usem o fórum para discutir ou até mesmo para perguntar sobre o que foi dito aqui nesta etapa. Eu estarei lá respondendo as perguntas.

Fórum sobre Flash & ActionScript: http://www.mxstudio.com.br/forum/index.php?s=0a96ec4e4feffcee79eccd46a37162a9&showforum=8

Até a próxima.

Nesse artigo, irei mostrar para vocês, como usar a API do Google Maps no Flash. Os requisitos para esse tutorial são:

• Flash CS3 ou Flash CS4 usando ActionScript 3
• Conhecimentos em ActionScript 3

Baixando a API

Antes de ir para o Flash, precisamos primeiro baixar a API que será usada. Tudo o que precisam fazer é acessar o site da API do Google Maps para o Flash no site do Google Code.

http://code.google.com/intl/pt-BR/apis/maps/documentation/flash/

Na página, vocês encontrarão a API através do seguinte link:

http://maps.googleapis.com/maps/flash/release/sdk.zip

No arquivo ZIP da API, contém duas pastar, uma chamada docs, que contém toda a documentação sobre a API, e uma pasta chamada lib, contendo dois arquivos SWC, um para os usuários do Flex (map_flex_1_9a.swc) e outro para os usuários do Flash (map_1_9a.swc).

Como vamos usar a API no Flash, precisamos copiar o arquivo map_1_9a.swc e jogar na pasta aonde estão os Componentes do Flash. O caminho para os usuários do Flash CS3 é:

• (Windows) C:/Arquivos de Programas/Adobe/Adobe Flash CS3/linguagem/Configuration/Components
• (Mac OS X) Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components

• (Windows) C:/Arquivos de Programas/Adobe/Adobe Flash CS4/Common/Configuration/Components
• (Mac OS X) Macintosh HD/Applications/Adobe Flash CS4/Common/Configuration/Components

Antes de colar o arquivo, criem uma pasta com o nome de Google Maps no diretório Components, para manter seu painel de Componentes organizado.

A última coisa que precisaremos fazer antes de ir ao Flash, é gerar uma chave para usar a API. A chave é gerada para os usuários que possuem alguma conta no Google. Para gerar a chave, acessem a página:

http://code.google.com/intl/pt-BR/apis/maps/signup.html

Na página, vocês precisam Ler e concordar com os termos e condições do Google, e digitar o endereço do site no qual irá usar o Google Maps. Após ter digitado o seu site, uma chave será criada. Essa chave será usada no ActionScript.

Indo pro Flash

Chegou a hora de ir para o Flash. Criem um arquivo em ActionScript 3, abram o painel Components e joguem o Componente Google Maps Library para o palco. Se quiserem, podem remover o componente do palco pois não há necessidade de mante-lo já que criaremos o mapa através do ActionScript 3.

Para esse tutorial, criaremos um exemplo básico do Google Maps, exibindo os controles de Zoom e tipos de mapa e iniciando o mapa através de uma localização usando Latitude e Longitude. Copiem e colem as seguintes ações no frame no qual desejam que o mapa apareça.

/* Importa as Classes necessárias */
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.LatLng;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.overlays.Marker;
/* Criamos uma instancia da Classe Map */
var map:Map = new Map();
/* Inserimos nossa chave */
map.key = "SUA CHAVE AQUI";
/* Definimos um tamanho para o Mapa */
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
/* Adiciona o controle de zoom */
map.addControl(new ZoomControl());
/* Adiciona o controle de tipo de mapa */
map.addControl(new MapTypeControl());
/* Adiciona o Mapa ao palco */
this.addChild(map);
/* Adicionamos um eventListener chamando o evento MAP_READY */
/* Esse evento será disparado quando o Mapa estiver pronto para ser exibido */
/* O evento chama a função mapOk */
map.addEventListener(MapEvent.MAP_READY, mapOk);
/* Função chamada pelo evento MAP_READY */
function mapOk(event:MapEvent):void {
	/* Criamos uma instancia da Classe Marker */
	/* Passamos o local no qual queremos que o mapa esteja marcado */
	/* O local é passado usando Latitude e Longitude */
	var marca:Marker = new Marker(new LatLng(-23.5635963, -46.6538854));
	/* Adiciona a marca ao Mapa */
	map.addOverlay(marca);
	/* Centraliza o Mapa de acordo com a posição desejada */
	map.setCenter(new LatLng(-23.5635963, -46.6538854), 16, MapType.NORMAL_MAP_TYPE);
}

Vídeo tutorial

Não se esqueçam de inserir a chave que foi criada na linha número 12 do ActionScript, a chave precisa estar entre aspas para que não aconteça nenhum erro.

Pra quem quiser, pode ver o vídeo desse tutorial. É a primeira vez que faço um vídeo tutorial, e espero poder fazer sempre em todos os meus futuros tutoriais.

Considerações Finais

Com apenas algumas linhas do ActionScript, conseguimos criar usar o mapa de maneira fácil e sem complicação. Existem outros exemplos de como usar a API na própria página do Google Maps para o Flash.

http://code.google.com/intl/pt-BR/apis/maps/documentation/flash/examples/index.html

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Dando continuação ao último tutorial, será mostrado como utilizar o modo de debug do Box2D chamado de DebugDraw. Com esse modo você poderá analisar visualmente como estão ocorrendo as colisões, contatos, onde estão os centros de massa, que objetos estão “dormindo”, entre outras análises.

Para exemplificar esse modo será utilizado o mesmo código do artigo anterior que pode ser visualizado em http://www.mxstudio.com.br/2009/04/box2d-primeira-simulacao/. Um preview do que será feito está logo abaixo:

Algumas adaptações serão necessárias para colocar o DebugDraw no exemplo anteriormente visto. Primeiramente será necessário importar a classe MovieClip e demais modificações que podem ser vistas no código abaixo:

package
{
	import flash.display.Sprite;
        /*novo import*/
	import flash.display.MovieClip;
 
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.utils.Timer;
 
	/*importação da API Box2D*/
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
 
	public class Box2DMX extends Sprite
	{
		/* Construtor da classe	*/
		public function Box2DMX()
		{
			init();
		}
 
		/* Incializa a aplicação*/
		private function init():void
		{
			createWorld();
 
			createListeners();
 
			createGround();
 
			debugDraw();
		}
 
                /*Método que realiza o DebugDraw*/
		private function debugDraw():void
		{
			var m_sprite:Sprite;
			m_sprite = new Sprite();
 
			addChild(m_sprite);
 
			debug = new b2DebugDraw();
 
			debug.m_sprite=m_sprite;
			/*escala padrão do Box2D 30px = 1m*/
			debug.m_drawScale=30;
 
			debug.m_alpha = 1;
 
			debug.m_fillAlpha=0.5;
 
			debug.m_lineThickness=1;
 
			debug.m_drawFlags = b2DebugDraw.e_shapeBit
				|b2DebugDraw.e_jointBit
				|b2DebugDraw.e_coreShapeBit
				|b2DebugDraw.e_aabbBit
				|b2DebugDraw.e_obbBit
				|b2DebugDraw.e_pairBit
				|b2DebugDraw.e_centerOfMassBit;
 
			/*aplica ao mundo o modo debug*/
			world.SetDebugDraw(debug);
		}
		/* Define os listeners da simulação/game*/
		private function createListeners():void
		{
			timer = new Timer(2000);
			timer.addEventListener(TimerEvent.TIMER, createBodies);
			timer.start();
			addEventListener(Event.ENTER_FRAME, Update, false, 0, true);
		}
 
		/* Instancia o mundo onde a simulação ocorrerá*/
		private function createWorld():void
		{
			/* Definição dos limite do mundo*/
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-100.0, -100.0);
			worldAABB.upperBound.Set(100.0, 100.0);
 
			/* Difinição da gravidade atuante em todos os corpos desse mundo*/
			var gravity:b2Vec2=new b2Vec2(0.0,10.0);
 
			/* Indica que os corpos devem permanecerem inativos	*/
			var doSleep:Boolean=true;
 
			/* Construção do mundo*/
			world = new b2World(worldAABB, gravity, doSleep);
 
		}
 
		/* Cria o chão onde os corpos ficarão*/
		private function createGround():void
		{
			var body:b2Body;
			var bodyDef:b2BodyDef;
			var boxDef:b2PolygonDef;
 
			bodyDef = new b2BodyDef();
			bodyDef.position.Set(10, 12);
			bodyDef.angle=0.0;
 
			boxDef = new b2PolygonDef();
			boxDef.SetAsBox(90, 3);
			boxDef.friction = 0.4;
 
			/* para corpos que nunca se moverão o
			* valor da densidade deve ser zero
			*/
			boxDef.density = 0;
			bodyDef.userData = new PhysGround();
			bodyDef.userData.width = physScale * 2 * 30;
			bodyDef.userData.height = physScale * 2 * 3;
 
			addChild(bodyDef.userData);
 
			body=world.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();
		}
		/*cria os atores da simulação*/
		private function createBodies(e:Event):void
		{
			/* representa o corpo rígido*/
			var body:b2Body;
 
			/* será utilizado para representar
			* as características físicas do corpo rígido
			*/
			var bodyDef:b2BodyDef;
 
			/*define um polígono e suas características físicas*/
			var boxDef:b2PolygonDef;
 
			/*define um círculo e suas características físicas*/
			var circleDef:b2CircleDef;
 
			bodyDef = new b2BodyDef();
			bodyDef.position.Set(Math.random() * 15+5, 0);
 
			var rX:Number = Math.random() + 0.1;
			var rY:Number = Math.random() + 0.1;
			//Caixa
			if (Math.random() < 0.5)
			{
				boxDef = new b2PolygonDef();
				boxDef.SetAsBox(rX, rY);
				boxDef.density = 1.0;
				boxDef.friction = 0.5;
				boxDef.restitution = 0.2;
 
				bodyDef.userData = new MovieClip();
				bodyDef.userData.width = rX * 2 * physScale;
				bodyDef.userData.height = rY * 2 * physScale;
 
				body = world.CreateBody(bodyDef);
				body.CreateShape(boxDef);
			}
			else //Círculo
			{
				circleDef = new b2CircleDef();
				circleDef.radius = rX;
				circleDef.density = 1.0;
				circleDef.friction = 0.5;
				circleDef.restitution = 0.2;
 
				bodyDef.userData = new MovieClip();
				bodyDef.userData.width = rX * 2 * physScale;
				bodyDef.userData.height = rX * 2 * physScale;
 
				body = world.CreateBody(bodyDef);
				body.CreateShape(circleDef);
			}
 
			bodyDef.userData.x = body.GetPosition().x *physScale ;
			body.SetMassFromShapes();
			addChild(bodyDef.userData);
		}
 
		/*atualiza o posicionamento dos atores*/
		private function Update(e:Event):void
		{
			world.Step(timeStep, iterations);
 
			// Pare cada corpo no mundo atualiza a sua posição e rotação
			for (var body:b2Body = world.GetBodyList (); body; body = body.GetNext())
			{
				if (body.GetUserData() is Sprite)
				{
					body.GetUserData().x = body.GetPosition().x * physScale;//metros para pixels
					body.GetUserData().y = body.GetPosition().y * physScale;//metros para pixels
					body.GetUserData ().rotation = body.GetAngle() * (180/Math.PI);
				}
			}
		}
 
		private var world:b2World;
		private var iterations:int = 10;
		private var timeStep:Number = 1.0/30.0;
		private var physScale = 30.0;
		private var timer:Timer;
                /*novo atributo para aplicar o DebugDraw*/
		private var debug:b2DebugDraw;
 
	}
}

As modificações começaram com a adição da classe MovieClip que será usada como dado do usuário:

package
{
	import flash.display.Sprite;
        /*novo import*/
	import flash.display.MovieClip;

Aos atributos foi adicionado um novo que serve para realizar o DebugDraw da classe b2DebugDraw:

		private var physScale = 30.0;
		private var timer:Timer;
                /*novo atributo para aplicar o DebugDraw*/
		private var debug:b2DebugDraw;
 
	}
}

Tanto para criar o círculo quanto para criar os poligonos a classe de dado de usuários é a classe MovieClip, com ela fica mais fácil visualizar o comportamento dos corpos quanto ao seu estado de atividade que veremos mais à frente no texto:

bodyDef.userData = new MovieClip();

A mudança mais importante foi a criação de um novo método chamado debugDraw():

private function debugDraw():void
{
	var m_sprite:Sprite;
	m_sprite = new Sprite();
	addChild(m_sprite);
	debug = new b2DebugDraw();
 
	debug.m_sprite=m_sprite;
	/*escala padrão do Box2D 30px = 1m*/
	debug.m_drawScale=30;
	debug.m_alpha = 1;
 
	debug.m_fillAlpha=0.5;
 
	debug.m_lineThickness=1;
 
	debug.m_drawFlags = b2DebugDraw.e_shapeBit
		|b2DebugDraw.e_jointBit /*mostra todos os Joints da Cena*/
		|b2DebugDraw.e_coreShapeBit /*utilizaado para observar colisões contínuas*/
		|b2DebugDraw.e_aabbBit /*mostra o eixo de coordenados dos corpos*/
		|b2DebugDraw.e_obbBit /*mostra os bouding boxes*/
		|b2DebugDraw.e_pairBit /*mostra um vetor que parte do centro dos corpos para os outros que estão em contado*/
		|b2DebugDraw.e_centerOfMassBit ;/*mostra o centro de massa dos Corpos*/
	/*aplica ao mundo o modo debug*/
	world.SetDebugDraw(debug);
}

debug.m_drawFlags é um inteiro sem sinal com 7 bits que podem estar ligados ou não dependendo do OR (OU) resultante da combinação de uma mais flags unidos pelo OR bit a bit representado pelo ‘|’, comumente chamado de Pipe.

No debugdraw você também observa que alguns corpos possuem cores diferentes de outros. A cor vermelha indica que o corpo está dormindo, ou seja, o existem cálculos matemáticos/físicos sendo realizados para ele, esse fato é muito é muito importante para que haja uma maior performance reduzindo o consumo de processamento desnecessarimante. Os corpos cinzas estão em movimento, e os verdes são corpos estáticos, como por exemplo paredes e obstáculos.

Estados

Os arquivos deste tutorial podem ser baixados aqui:
http://www.mxstudio.com.br/wp-content/uploads/2009/06/box2d.zip

Faça diversas combinações dessas flags para você verificar visualmente como os corpos se comportam. Até a próxima.

Website: www.marciosilva.net

Depois de ver muitas perguntas de assuntos que já foram muito discutidos no fórum, resolvi criar esse tópico com conteúdo sobre as principais dúvidas sobre Flash.

São tópicos importantes, dúvidas quentes e resoluções de problemas comuns da comunidade.
Esse tópico tem um bom tempo já, mas como tem uma acervo legal e estará sendo continuamente atualizado pela nossa equipe, vale a visita ANTES de postar novas dúvidas.

http://www.mxstudio.com.br/forum/index.php?showtopic=10554

Aproveitem e com o tempo postem links bacanas também.

Abraco,
Danilo Santana – Administrador do Portal MXSTUDIO