A Revista Www.com.br, ou apenas “W”, me convocou pra escrever um tutorial sobre Realidade Aumentada e eu aproveitei o convite para finalmente mostrar como utilizar modelos 3D animados com o Flartoolkit, que eu já havia prometido e muitos me cobravam faz tempo, como você pode ver aqui.

O download do PDF do tutorial você faz clicando aqui.

Os arquivos fonte você baixa aqui.

___________________________________________

Foreign visitors: A lot of people asked me to write a english version of a Tutorial about Flartoolkit (Augmented Reality + Papervision3D). So, here is it. Big thanks to Bryan Lennon, from Framestore, for his revision on my poor english. Dowload the files and tell me if it is understandable.

Download the PDF tutorial here.

Download the source files here.

___________________________________________

Neste artigo você aprenderá como montar um aplicativo igual à homenagem póstuma que fizemos a Michael Jackson (clique e veja). Quem modelou e animou o Michael Cabanudo foi nosso amigo Felipe Acioli. A classe para controlar o DAE foi escrita por Pablo Bandin (classe que não é mais necessária na versão atual do Papervision3D) e o método de detecção melhorado foi escrito por Seb Lee. E o Flartoolkit, obviamente, foi portado para o Flash pelo genial japa Saqoosha.

Olha a fotinho fanfa que lancei:

Pablo Cabana

Atualização: Um novo tutorial sobre realidade aumentada foi publicado. Clique e veja.

Update: If you are looking for a Flartoolkit (Augmented Reality + Papervision3d) Tutorial written in english, you can click here to find it.

Acabei de concluir um experimento com o Augmented Reality que um japonês chamado Saqoosha migrou do Java para ActionScript 3.0, criando o FLARToolkit (a página é em Japonês e eu, que não entendo bulhufas disso, usei o Google Tradutor). Trata-se de um detector de movimento que reconhece uma determinada “marca” e cria um cenário 3D com o Papervision3D e movimenta os objetos de acordo com os movimentos reais desta “marca”.

No vídeo aí de cima você confere como funciona e no Flash abaixo (aguarde carregar. só funciona se você tiver uma webcam instalada) você pode tentar por si mesmo. Mas antes você deve imprimir a “marca” que está neste pdf aqui (imprima utilizando somente tinta preta em um papel cartão de preferência). Se quiser inverter a camera, clique na imagem.

Se quiser fazer seus próprios experimentos, deve seguir os seguintes passos:

1 – Instalar o Papervision3D. Eu ensino como aqui.

2 – Instalar o FLARToolKit. Que se faz de um modo bem parecido com o Papervision3D. Basta utilizar outra pasta com o SVN: http://www.libspark.org/svn/as3/FLARToolKit/trunk

3 – Ir na pasta onde você instalou o Papervision3D e seguir: as3\trunk\src\org\papervision3d\cameras e abrir o arquivo “Camera3D.as”. Vá na linha 528 e mude “private var _projection” para “public var _projection”. Isto permitirá que o FlarToolKit acesse essa instância da Câmera3D e faça os ajustes necessários.

4 – Baixe os arquivos fonte de meu experimento aqui.

5 – Descompacte os arquivos, vá na pasta “FLARToolKit Cabanudo\samples” e abra o arquivo “hirocaos.fla” no Flash. Prontinho. Divirta-se.

Se quiser criar sua própria “marca”, pode fazer o download do ARToolKit Marker Generator aqui. As instruções você encontra aqui.

A tecnologia ainda está bem no início (FrameRate de 100 cai pra 20) mas dá pra ver que é bastante promissora! O pessoal do Digital Pictures Interactive também fez um experimento bem interessante.

A esfera do Caos foi modelada por aqui também. Use com cautela. ;)

Pablo Cabana

Baixe os arquivos fonte do aquário 3d aqui.

Uma das minhas maiores diversões ultimamente tem sido explorar as possibilidades do Papervision3D (como essa brincadeira com o aquário da Cabana aí de cima). Já está no forno até o primeiro site cabanudo que explorará um pouco da ferramenta. Por hora, quero compartilhar com vocês importantes fontes de informação que estão facilitando muito a minha vida. Vale o clique!

Blog Oficial do Papervision3D
A referência das referências. Tudo começa aqui.

Como instalar
Post do Cabanoblog. Muito bem explicadinho e em português!

Tartiflop
Passo-a-passo pra ficar por dentro.

Mad Vertices
Excelentes Tutoriais

Zupko.info
Blog de um dos desenvolvedores com muitos arquivos fonte.

Barcinski-JeanJean
Dois programadores que explanam.

PV3D.org Arquive
Mais um blog de desenvolvedor da ferramenta. Lá você encontra outros muitos links interessantes.

EveryDay Flash
Muitos exemplos de como usar a criatividade com Papervision3D.

Ramdom Lucubrations
Entenda como dimensionar e posicionar em 3D.

PV3D Zone
Mais bons exemplos.

Dehash
Muitos arquivos fonte. Excelente.

Se tiver alguma outra sugestão de link, deixe um comentário.

Pablo Cabana

Ok. À primeira vista o Papervision3D pode parecer apenas algo meio WoW, que só serve pras coisas na web ficarem bonitinhas e com um visual 3D a lá iPhone. Mas isso é um engano. As engines 3D, como o próprio Papervision3D, o Away3D e até mesmo o Astro (o novo Flash Player) aos poucos vão modificar o modo como acessamos a informação digitalmente, pois ganharemos novas dinâmicas de disposição de conteúdo, permitindo que tudo fique, além de extremamente amigável aos olhos, interativo a um nível antes impossível. Sem lenga-lenga pra carregar sites pesadíssimos, sem exigir muito das máquinas, essas engines conseguem usar programação para gerar dinâmicas surpreendentes através de códigos.

Tendo esta crença como base dos meus atuais estudos, estou namorando o Papervison3D para conquistá-lo como ferramenta de trabalho (por enquanto não posso me dar ao luxo de ganhar dinheiro com isso pois não domino perfeitamente a engine e não quero oferecer gambiarras aos meus clientes) e ao mesmo tempo finalmente migrar para ActionScript 3.0. Obviamente, uma das minhas principais referências é o magnífico gotoAndLearn, mantido pelo profeta da interatividade Lee Brimelow.

Foi lá que eu estudei dois tutoriais. O primeiro me fez entender como construir um cubo 3D interativo através do Papervision3D e o segundo me mostrou como é incrivelmente mais simples lidar com arquivos XML usando AS3 ao invés de AS2. Então me inspirei pra tentar meu primeiro projeto Open-Source, o Cubo Bacana.

O Cubo Bacana nada mais é do que um cubo 3d que mostra as últimas 6 notícias de qualquer blog, flickr ou qualquer site que gere RSS através de xml com a estrutura “channel-item-title”, que é a usada pela grande maioria dos provedores RSS.

Existem algumas maneiras de usá-lo, dependendo do seu perfil. Se você é um nerd como eu e entende um pouco de Flash, pode baixar os arquivos fonte na página do Cubo Bacana e começar a fuçar tudo (é preciso ter o Papervision 3D instalado, veja como faze-lo aqui) para fazer uma customização completa. Só peço que em algum lugar haja um link pra página do Cubo Bacana.

Se você é um usuário comum que apenas quer ter o Cubo Bacana no seu site ou blog, basta recortar o código abaixo e colar no código do seu site ou blog com pequenas configurações. Onde aparece http://www.cabanacriacao.com/blog/feed, (aparece 2 vezes) você deve substituir pelo endereço de RSS das notícias que vai disponibilizar, e onde aparece #FFFFFF você deve substituir pela cor de fundo que desejar.

Outros códigos mais amigáveis são possíveis. Dê uma olhada na página do Cubo Bacana.

Veja os exemplos:

As últimas fotos do Flickr da minha amiga Julia Pina.

As últimas notícias do Brainsorm9

Pablo Cabana

As galerias são construídas utilizando os RSSs gerado pelo Flickr mais as maravilhas 3D do Papervision 3D, do qual eu já falei aqui.

Além do problema com as tags, o outro defeito que eu encontrei foi eles não fornecerem um código “embed” pra permitir que se publique a galeria em outros sites ou blogs (assim como eu coloco os vídeos do YouTube aqui). Sem este tipo de ferramenta, a viralidade da marca FotoViewr perde trocentos por cento. Portanto, para ver a galeria da Tárin e da Julia, vocês vão ter que clicar nos links abaixo. Eles melhoraram isso, agora fornecem o código. Olha a galeria nova da Julia:

Galeria da Tárin

Galeria da Julia

Pablo Cabana

Este é um detalhe que muita gente esquece na hora de construir um website. Quando clicamos com o botão direito em qualquer arquivo swf, normalmente nos surge um menu com opções do tipo “zoom in”, “zoom out”, etc. Este menu, que na maioria das vezes é inofensivo, pode, entretanto, arruinar a navegação e a experiência de alguns websites. Principalmente quando são em janela cheia, como é o caso que usei no site da Brazucah e do Bruno Latini. Além disso, é muito mais bacana um menu personalizado do que um monte de frase em inglês sem nenhuma ligação com o usuário. Em tempos de WEB 2.0, adequação nos mínimos detalhes é fundamental.

Eis abaixo o script. Já está com todos os comentários explicadinhos. Basta recortar o código abaixo e colar no painel de action script do primeiro frame do seu arquivo .fla.

Ah! Utilizei o excelente plugin Highlight Source Pro pra mostrar o código como aparece no Flash. Demorei pra achar um plugin WordPress que funcionasse bem e fosse simples de usar.

Pablo Cabana

Conheci, através do excelente blog do Erick Souza a ferramenta Papervision 3D e descobri como ela é genial. Trata-se de um software open-source que, junto ao Flash CS3, gera interatividade 3D do mais alto nível, tudo através de código Action Script. Dá uma olhada nestes sites pra você entender do que eu estou falando:

In an ABSOLUT World

Whitevoid

O site do Papervision 3D traz um monte de exemplos e também mostra todo o desenvolvimento da ferramenta, inclusive um Wiki para ajudar o pessoal a usá-la. Contudo, a explicação da instalação é meio confusa. Tive que quebrar a cabeça um pouquinho até conseguir. Segue abaixo o caminho das pedras:

1 – Faça o download e instale um cliente SVN. Este é um programinha pra baixar os diversos arquivos do software e mantê-los atualizados. Eles recomendam o Tortoise. Faça o download aqui.

2 – Crie uma pasta onde você vai colocar os arquivos do Papervision3D, clique com o botão direito nesta pasta e clique de novo em “SVN checkout”. No box que abriu, cole este endereço: http://papervision3d.googlecode.com/svn/trunk/

3 – Aguarde o Tortoise fazer o download dos arquivos. São muitos, inclusive com vários exemplos bacanas.

4 – Abra o Flash CS3, vá em Edit>Preferences>Actionscript e clique no botão “Actionscript 3.0 settings”.

5 – No box chamado “class path”, clique no sinal de “+” e depois no alvo para escolher o diretório.

6 – Vá no diretório que você criou para fazer o download do Papervision3D e escolha a pasta “as3\trunk\src”  (atualizado para a versão 2.0 Great White Final)

7 – Está pronto e instalado. Abra um dos exemplos (na pasta “\as3\trunk\examples” há alguns) e tente publicá-lo. Se der tudo certo, é porque a instalação está OK.

Abaixo, o primeiro resultado dos meus iniciais estudos com a ferramenta. Cabanudos 3D.

Adendo 02-07-2008: Já saiu segundo resultado: aqui e aqui.

Pablo Cabana

Baixe o arquivo fonte aqui.

Existem várias formas de alterar o cursor do mouse no Flash. A maioria delas usa “onEnterFrame”, o que significa que a cada frame o swf atualiza a posição do cursor. Daí já dá pra perceber a falha desse método porque se precisarmos usar um frame rate baixo, como 12, por exemplo, o cursor novo não fica totalmente fiel ao cursor normal. Pode-se argumentar que o uso do comando “updateAfterEvent” resolve isto, mas eu encarei um problema quando estava construindo o site da Brazucah. Ao utilizarmos gráficos complexos, que exigem grande processamento do CPU, a tendência é que o mouse fique tremido e pouco fiel. Saí estudando todas as possibilidades e finalmente encontrei a resposta, e ela se chama “setInterval”. Com este comando, dizemos ao swf para executar uma tarefa de tempo em tempo, mas medindo este tempo em segundos, ao invés de utilizar os frames. O que eu fiz foi programar este tempo para 0.1 milesegundos (milesegundo é a medida de tempo utilizada pelo Flash, cada milesegundo é 1 segundo dividido por 1000) e mandar o swf atualizar a posição do cursor sempre que se completasse esse período. Ou seja, a todo instante.

Crie um novo arquivo no Flash, coloque o Movie Clip que você deseja que substitua o mouse no palco, clique nele e nomeie sua instância (no canto inferior direito, em baixo de “Movie Clip”) como “rato” (sem aspas).

Depois, no primeiro frame do filme principal, cole este código:

stop();
//De início, escondemos o mouse.
Mouse.hide();

//É preciso dar um nome para o “setInterval” e definí-lo como número
var Mudando:Number;

//Aqui você escolhe o período de tempo que “setInterval” executará
var tempo:Number = 0.1;

//Esta é a função executada a cada 0,1 milesegundo
function mudaMouse():Void {
//vc está dizendo para o seu movie clip acompanhar o x e o y do mouse
rato._x = _root._xmouse;
rato._y = _root._ymouse;
//Este comando auxilia na independência deste evente em relação ao que acontece no resto do seu filme
updateAfterEvent();

}
//Aqui está o setInterval. O “this” se refere a ele mesmo, “mudaMouse” é o nome da função a ser repetida e “tempo” é o período escolhido acima.
Mudando = setInterval(this, “mudaMouse”, tempo);

//Eu criei um outro Movie Clip chamado “imagem” e o coloquei como fundo do swf para brincarmos

_root.imagem.onPress = function() {
//ao clicar no fundo, o mouse muda de Cabana é Bacana para Bacana é Cabana
rato.gotoAndStop(2);
}

_root.imagem.onRelease = _root.imagem.onReleaseOutside = function() {
//ao soltar, dentro ou fora do MC “imagem” o mouse volta ao frame anterior
rato.gotoAndStop(1);

}
_root.imagem.onRollOut = function() {
/*mandamos o mouse ficar escondido de novo, pois se apertarmos o botão direito
o menu do Flash puxa o mouse normal novamente*/
Mouse.hide();
}
_root.imagem.onRollOver = function() {
/*mandamos o mouse ficar escondido de novo, pois se apertarmos o botão direito
o menu do Flash puxa o mouse normal novamente*/
Mouse.hide();
}

Fácil né? Se tiver dificuldade, deixa um comentário.

Pablo Cabana

Clique aqui para baixar o arquivo fonte.

Existem várias maneiras de mover objetos via Action Script, mas a que eu mais costumo usar, pela facilidade de adaptações, é com “onClipEvent (enterFrame)”. Usei isso pra mover as barrinhas do site do Bruno Latini. Esta função significa que a cada frame, de acordo com seu frame rate, seu filme irá executar as funções que você determinar. Você pode, por exemplo, dizer que a cada frame seu objeto ganha 10 pixels em x, e isso o fará andar para direita.

Já fez o download do arquivo fonte? Com ele aberto, clique no Cabana é Bacana e veja o Action Script (F9).

onClipEvent (enterFrame) {
var tempo:Number = 12;

/* Esta sentença “x += y” é uma abreviação que o Action Script usa para dizer:
“x passa a ser o x antigo mais y”. O “tempo” é que dá o efeito de easing.
Quanto maior, mais lento será o movimento. E cada botão modificará a variável
“final”. */

//Este para posição
this._x += (finalX-this._x)/tempo;
this._y += (finalY-this._y)/tempo;

//Este para tamanho
this._xscale += (finalXscale-this._xscale)/tempo;
this._yscale += (finalYscale-this._yscale)/tempo;

/*Este para rotação. Eu usei “tempo/3″ para que a rotação aconteça mais rápido do que a posição. Sem isso, pode acontecer do objeto tremer no finalzinho do movimento. */
this._rotation += (finalRotation-this._rotation)/(tempo/3);

//Este para transparência
this._alpha += (finalAlpha-this._alpha)/tempo; }

Este movie clip ganhou o nome de instância de “cabanabacana” para que suas variáveis possam ser referenciadas nos botões. Agora clique no botão “Tudo” (no quadrado preto atrás do texto) e veja a action nele.

on(release){
cabanabacana.finalXscale = 100;
cabanabacana.finalYscale = 100;
cabanabacana.finalX = 240;
cabanabacana.finalY = 125;
cabanabacana.finalRotation = 0;
cabanabacana.finalAlpha = 100;
}

Assim nós estamos dizendo para o movie clip se mover nestes parâmetros. Basta mudar os valores para colocar o Cabana é Bacana onde, com o tamanho, rotação e transparência que você quiser. Não falei que é simples?

Clique aqui para baixar o arquivo fonte.

Pablo Cabana