Criando um Cubo no Flash com o Papervision 3D

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: [kml_flashembed publishmethod="static" fversion="8.0.0" movie="https://blog.tetranet.com.br/wp-content/uploads/2010/06/cubo.swf" width="400" height="300" targetclass="flashmovie"]Get Adobe Flash player [/kml_flashembed] Confira o código do arquivo cubo.as [as3] 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); } } } [/as3] Bom este é nosso primeiro exemplo, maiores dúvidas deixe seu comentário neste post.