Nesses últimos meses meu tempo foi muito curto pois além de estudar eu tenho que trabalhar, YESS! O agravante que me manteve longe do blog e outras coisas foram a conclusão da faculdade. Além de cursar quatro disciplinas participei do estágio obrigatório em que tive que acompanhar 14 aulas de minha colega e lecionar mais 14 aulas de inglês no Colégio de Aplicação da UFSC. O estágio obrigatório de licenciatura não é algo muito tranqüilo pois além de preparar e documentar cada aula dada, você tem que preparar todo o material que será utilizado nas tarefas, avaliar os alunos, estabelecer objetivos lingüísticos para os alunos atingirem em cada aula e a lista prossegue. No final de todo este processo um relatório de toda sua experiência dentro da escola tem que ser preparado.

Read the full story

Uma coisa muito legal no ActionScript 3.0 é a classe Timer (flash.utils.Timer). Esta nova classe substitui os antigos métodos setInterval() e setTimeout() e claro, inclui novas funcionalidades.  Por exemplo no ActionScript 2.0 você teria algo como:

//-- ActionScript 2.0
var segundos : Number = setTimeout(rodaUmaVez, 1000); // 1 segundo

function rodaUmaVez():void
{
trace("rodei uma vez...");
}

No entanto no ActionScript 3.0 com a nova classe Timer a mesma idéia acima
fica:

//-- ActionScript 3.0
var segundos : Timer = new Timer(1000, 1); // 1 segundo

segundos.addEventListener(TimerEvent.TIMER, rodaUmaVez);

segundos.start();

function rodaUmaVez(event:TimerEvent):void
{
 trace("rodei uma vez...");
}

Ao instanciar o novo objeto timer você passa dois parâmetros. O primeiro é a frequência com que será executado, neste caso é 1000 milisegundos que é 1 segundo. E no segundo parâmetro é a quantidade de vezes, se você colocar 1 vai rodar apenas uma vez e pronto. Caso você queira rodar infinito pode informar 0 ou não colocar o segundo parâmetro e pronto. Outra coisa nesta nova classe é que o TimerEvent.TIMER, a cada milisegundo e e a cada número de vezes que foi informado no construtor ele executa a função que você informar no método addEventListener da classe Timer.

Fique umas duas semanas longe das minhas atividades da Internet por causa do final de semestre na faculdade. Vou começar a postar umas dicas e outras coisas aqui no blog que venho aprendendo. Indo ao que interessa vamos ver como gerar números randômicos no ActionScript3. Fazendo meus testes com o Papervision 3D precisei gerar números aleatórios, e que podem repetir. É bem simples o processo confira:

var valorMaximo        : Number = 50;
 var ValorMinimo         : Number = 0;

resultado = Math.floor(Math.random() * (valorMaximo - ValorMinimo)) + ValorMinimo;

trace(String(resultado) );

Favor deixar um comentário se houver dúvidas.

No primeiro post relacionado ao Papervision 3D expliquei como configurar esta excelente ferramenta para o Flash. Agora começarei a colocar exemplos práticos de como utilizar animações em 3D no Flash. Só para dar uma idéia geral o ActionScript faço no Flash Builder 4 em virtude do maior suporte, documentação etc, assim compilo o SWF no Flash CS4. Fico alternando entre um programa e outro, mas vale a pena. Para quem tiver o Flash CS5 fica mais fácil, pois o Flash Builder 4 permite compilar dentro dele.  Outra vantagem legal é que o Flash Builder é construído no Eclipse assim  se você tiver esta IDE instalada só precisa instalar um módulo da adobe. Por exemplo eu já tenho o Zend Studio 7 aqui, assim não precisei  colocar mais uma IDE do Eclipse só instalei o módulo do Flash Builder no Zend e pronto! Veja abaixo o resultado:

Nestes primeiros artigos estou explicando com maiores detalhes todo o processo para pessoas iniciantes assim como eu.  Com isso teremos um material mais completo que abrange do básico ao avançado. Estou gostando muito de aprender mais sobre 3D, realmente é um mundo de possibilidades. Bom vamos ao que interessa…

Preparando o Ambiente

Antes de ir ao código propriamente dito, vou explicar rapidamente como preparar todo o ambiente para desenvolver de maneira mais produtiva. Assim nos próximos códigos manterei mais o foco na programação e quem tiver interesse na preparação do ambiente é só ler este post.

A primeira coisa a se fazer é criar um diretório específico para o novo projeto. Depois disso vamos no Flash Builder, File -> New -> ActionScript Project para criar um novo projeto, fornecemos o nome do projeto que neste caso é “cubo” e em folder apontamos para o diretório que criamos. Confira a imagem abaixo de como ficou:

Assim depois disso podemos clicar em “finish” direto, a próxima etapa para o nosso caso não é necessária. Com isso já temos quase tudo pronto pra colocar as mãos na massa. Depois do projeto criado temos que importar o Papervision 3D para o nosso projeto assim poderemos tirar a vantagem do code complete, documentação, etc. Para importar é muito tranquilo também, tudo o que precisamos fazer é clicar com o botão direito do mouse no diretório src abaixo de “cubo” que está no Package Explorer do Flash Builder, e depois no menu que surge clicar em Import -> File System  na tela que surge apontamos para o src do Papervision selecionamos os dois principais diretórios “org” e “nochump” e depois “next” ou “finish” para concluir. Com isso todo o papervision é importado para dentro de nosso projeto.

Poderiamos também apontar no Path do Flash Builder o caminho do Papervision que funcionaria. Eu prefiro importar tudo, pois muitas fazes mudamos as classes do Papervision pra dar uma otimizada ou pra deixar de acordo com certa necessidade de algum projeto, assim desta forma o conjunto de classes original do Papervision não são afetadas. Agora o nosso projeto dentro do Flash Builder ficou filé (como certas pessoas dizem).  Só falta ajeitar umas coisinhas no Flash CS4 e pronto. Abaixo uma imagem de como ficou a estrutura de nosso projeto:

Agora vamos abrir o Flash CS4 clicar em File -> New e depois em “Flash File (ActionScript 3.0). Feito isso vamos salvar tudo no diretório “src” do nosso projeto cubo para o arquivo FLA dei o nome de “cubo” também. Atenção para evitar alguns problemas nos paths do projeto, salve o FLA neste diretório “src” para evitar estress  depois. Até aqui nada de supresa só vamos fazer um negócio pois a nossa classe do ActionScript está fora do Flash assim precisamos informar para ele o local desta classe. Para isso vá em File -> Publish Settings -> Flash -> Settings  e na telinha que abre colocamos o nome da classe que o Flash Builder criou “cubo” sem o “.as”, depois é só clicar no botãozinho com um “v” em verde pra ele verifiar a existência deste arquivo e por último “ok”, “ok” e mais um CTRL + S pra salvar . Verifique como ficou na imagem abaixo:

Pela lógica correta teriamos que informar para o Flash buscar o Papervision dentro de nosso projeto. Mas como já tinhamos configurado tudo antes no post anterior e como não será alterado nada no Papervision, podemos pular esta etapa. Com isso o nosso playground está pronto para começar a brincadeira!

Criando um Cubo em 3D

Como primeiro projeto vamos criar um cubo em 3D com uma cor meia em degradê para facilitar o aprendizado, e futuramente poderá ser incrementado. O código segue comentado assim não há muito o que falar só confira o resultado:

Confira o código do arquivo cubo.as

package
{
 import flash.events.Event;
 import flash.display.BitmapData;

 //-- carregando as classes do papervision
 import org.papervision3d.materials.BitmapMaterial;
 import org.papervision3d.materials.ColorMaterial;
 import org.papervision3d.objects.DisplayObject3D;
 import org.papervision3d.objects.primitives.Cube;
 import org.papervision3d.materials.utils.MaterialsList;

 //-- BasicView é uma classe muito interessante, pois provê
 //-- o necessário para nosso projeto em 3D para funcionar
 //-- entre outras coisas fornece viewport, scene, camera, e
 //-- renderer. Como todo projeto do Papervision precisa disso
 //-- já esta ai na mão para usar e com isso não precisamos
 //-- invocar um monte de coisas. Abra esta classe e confira
 //-- o que ela já carrega dentro dela.
 import org.papervision3d.view.BasicView;

 public class cubo extends BasicView
 {

 //-- declarando algumas variáveis
 protected var cubo3D            : Cube;
 protected var cuboBitmapData    : BitmapData;
 protected var cuboMaterial         : BitmapMaterial;
 protected var cuboMaterialList    : MaterialsList;

 //-- para facilitar mais estamos fazendo tudo diretamente no
 //-- construtor da classe.
 public function cubo()
 {
 //-- Criando um novo bitmap para usarmos como textura de nosso
 //-- cubo.
 cuboBitmapData = new BitmapData(256,128,false,0);

 //-- colorindo nossa textura com o perlineNoise
 cuboBitmapData.perlinNoise(256,127,8,1234,true,true,7,true);

 //-- criando um material (pano, casca tenho que ver como é
 //-- em portugues isto =) ) para o nosso cubo.
 cuboMaterial = new BitmapMaterial(cuboBitmapData,false);

 //-- O cubo tem uma diferença de outros objetos primitivos
 //-- para colocar uma cor nele você tem utilizar um materialslist
 //-- um tipo de array onde você define cada face do cubo back, top, etc
 //-- ou "all" para todas as faces, que é o nosso caso.
 cuboMaterialList = new MaterialsList( {all:cuboMaterial} );

 //-- Criando o cubo com a cor em degradê como primeiro
 //-- parâmetro, largura, profundidade e altura de 350
 cubo3D = new Cube(cuboMaterialList,350,350,350);

 //-- Adicionando o cubo3D a cena que já foi instanciado
 //-- pela super classe BasicView
 scene.addChild(cubo3D);

 //-- Invocando a função nativa startRendering para rendereizar
 //-- cada frame.
 startRendering();
 }

 //-- este método é um event listener invocado quando o startRendering()
 //-- é executado.
 override protected function onRenderTick(event:Event=null):void
 {
 //-- O método yaw roda um objeto em torno de seu próprio eixo vertical.
 cubo3D.yaw(1);

 // chama o metodo super.onRenderTick, que renderiza a cena
 super.onRenderTick(event);

 }
 }
}

Bom este é nosso primeiro exemplo, maiores dúvidas deixe seu comentário neste post.

Sempre procuro aprender novos assuntos no mundo da Internet para ampliar meu conhecimento na minha profissão além é claro de maximizar oportunidades. Uma das coisas que sempre soube pouco é relacionado ao Adobe Flash. O Flash há um tempo era visto somente como uma ferramenta para designers principalmente quando comecei a conhecer na versão 3. O tempo foi passando e atualmente com o Flash CS4 e ActionScript 3 muita coisa mudou. Por exemplo, antes tudo era meio bagunçado, pois você podia colocar os códigos em vários lugares como timelines, movieclips, botões, arquivos de ActionScript externo etc. No entanto com o Actionscript 3.0 as coisas ficaram mais organizadas pois agora os códigos são baseados em classes.

Isso colocou o Flash não somente como uma ferramenta para designers, mas também para programadores. Neste meio tempo também foi lançado a plataforma de desenvolvimento FLEX que atualmente é chamada de Flash Builder 4 com um foco totalmente na programação. Com tudo isso é possível criar projetos incríveis com o Flash utilizando apenas código. Algo que me chamou atenção também, é que no Flash CS5 que está para ser lançado oficialmente poderá exportar para HTML5. Estes assuntos despertaram o meu interesse para estudar mais a fundo esta ferramenta, não do ponto de vista de um designer, mas do ponto de vista de um programador.

Agora com meu objetivo geral definido que é o Flash parti para os conteúdos específicos pois o Flash é um mundo imenso de possibilidades. Como não quero fazer design o meu leque de opções já deu uma enxugada, depois pensei em fazer sistemas com a tecnologia FLEX, mas já trabalho bastante com sistemas no PHP e Delphi e com isso eu queria algo divertido para aprender nas minhas horas vagas. Nesta processo cognitivo intenso veio a idéia de fazer games com o Flash e gostei muito disso pois além de colocar muita lógica em prática eu faria algo divertido. Com isso em mente comecei a fazer meus primeiros testes mas tudo andava meio sem graça. Foi neste momento que um colega me indicou uma ferramenta para o Flash chamada Papervision 3D. Com o Papervision 3D é possível criar animações em 3D para Flash de uma forma muito fácil e tudo através do ActionScript 3.0. Assim atualmente este tem sido o meu foco no Flash.

Pretendo colocar aqui no Blog muitas dicas que venho aprendendo sobre o Papervision3D desde animações simples com objetos primitivos (esferas, cubos, cones, etc) a interatividade com o mouse e teclado, componentes de física  e outras coisas que eu for digerindo. Também pretendo explicar como é possível exportar do 3D Studio MAX para o Flash. Neste artigo inicial irei explicar como deixar a IDE do Flash pronta para começar os trabalhos.

Instalação do Papervision 3D no Flash

O Papervision em linhas gerais é um conjunto de classes para renderização 3D e a instalação no Flash é bem tranquila. A instalação é necessária pois no momento que você der um Ctrl+Enter para rodar o movieclip o Flash irá procurar pelas classes do Papervision. Vou listar aqui os passos para instalação no Flash CS4:

1. Baixe o Papervision3D no repositório oficial em code.google.com/p/papervision3d (muita gente fala para baixar tudo com o tortoiseSVN mas você pode baixar o pacotinho zip direto também).
2. Faça a extração dos arquivos no lugar que você achar melhor.
3. Abra o Flash e vá em Edit -> Preferences…
4. Na tela que abriu procure na lista ao lado por ActionScript e clique, surge as opções ao lado.
5. Nas opções que sugiram clique em ActionScript 3.0 Settings…
6. Na telinha que abriu na primeira seção chamada Source path clique na pastinha e aponte para o src do Papervision que você extraiu.
7. Dê um OK, OK e pronto! Está instalado.
8. Confira as imagens abaixo:

Feito os procedimentos acima o Flash já estará apto para rodar conteúdo em 3D. Existe muitos exemplos de projetos em Papervision3D no entanto para quem começa a melhor opção é no website do projeto do Papervision. Aqui no Blog mais para frente irei colocar mais artigos sobre o uso desta ferramenta também. Assim todos os que quiserem iniciar terão uma fonte de conteúdo bem legal. Como última dica sugiro instalar o Flash Builder 4 pois é melhor para desenvolver com ActionScript 3.0 e para rodar os movieclips utilizar o próprio Flash CS4. Assim que estou fazendo, desenvolvo no Flash Builder e rodo/compilo no Flash CS4. Para quem tiver o Flash CS5 já poderá criar um “Flash Project” direto no Flash Builder sem a necessidade de ficar alternando entre as duas plataformas. Bom basicamente é isso, maiores dúvidas deixam comentários.