Cabanoblog

O site mais recente que colocamos no ar, a Ilha do Urso, tem como base de todo o seu conteúdo o Vimeo. Esta foi a primeira vez que utilizamos a API do Vimeo em um projeto cabanudo. Encontramos algumas dificuldades no início, principalmente por ser uma API relativamente nova, mas depois de algumas dores de cabeça conseguimos colocar tudo nos eixos. No final deste post, você pode fazer o download do exemplo abaixo, que puxa os filmes do álbum “Home” da Ilha do Urso, com arquivos fonte suficientes para desenvolver seus próprios projetos (sem a dor de cabeça que passamos aqui! :).

Nota: A Ilha do Urso é um usuário “plus” no Vimeo, portanto, ela pode controlar qual é a aparência de seus vídeos. É por isso que os vídeos abaixo tem os botões em branco, a logo do Vimeo não aparece, etc, etc. Tudo isso é controlado pelo Vimeo e NÃO através do Flash.

Algumas etapas antes de começar:

1 – Você precisa gerar um chave no Vimeo para fazer sua aplicação. É fácil e gratuito clicando aqui. Você vai substituir sua chave no código onde você encontra “public var VIMEO_KEY:String = “SUA_CHAVE_AQUI”;”

2 – A classe com.vimeo.api.VimeoPlayer é a classe fornecida pelo Vimeo com pequenas melhorias minhas. Uma delas é a utilização de um evento simples para saber quando os botões do player desaparecem, para controlar o botão “Fechar”.

3 – Outra melhoria na classe é a possibilidade de colocar o botão FullScreen no player. Lembrando que você precisará controlar o tamanho do player manualmente, pois o fullscreen é para todo o objeto flash e não só o player. Fique tranquilo que no exemplo já está tudo mastigado para você. Outra observação importante quanto ao fullscreen é que você precisa colocar “allowfullscreen: “true”" nas flash vars do seu html.

4 – A principal dor de cabeça de utilizar a Vimeo API é o problema do cross-domain. Não vou entrar em detalhes, mas você só precisa saber que tudo funcionará perfeitamente com o script que você baixa aqui. :)

5 – Para retirar o vídeo, há o método “destroy”, que também mastiguei para você. Então não precisa se preocupar com problemas de consumo de memória!

6 – Utilizo neste exemplo as incríveis bibliotecas TweenMax e AS3Signals.

7 – Não é meu objetivo construir uma “biblioteca”, um “projeto open source” ou algo do gênero. Só estou compartilhando minha experiência. Vou responder às dúvidas nos comentários na medida do possível.

8  - IMPORTANTE: Não estou interessado em escrever “códigos elegantes”, mas sim em fazer a bagaça funcionar. Portanto, não espere classes otimizadas até o último fio de cabelo. Eu coloquei todas as variáveis para “public” e fui me divertir. Tenho mais o que fazer!

Baixe os arquivos fonte aqui.

Siga-me no Twitter.

Pablo Cabana

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

Tags: aumentada, FLARToolKit, Papervision3D, realidade, revista, tutorial, w

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.

<object width="200" height="220"><param name="movie" value="http://www.cabanacriacao.com/cubobacana/cubo_bacana_1.swf?link_feed=http://www.cabanacriacao.com/blog/feed"></param><param name="allowFullScreen" value="false"></param><embed src="http://www.cabanacriacao.com/cubobacana/cubo_bacana_1.swf?link_feed=http://www.cabanacriacao.com/blog/feed" type="application/x-shockwave-flash" allowfullscreen="false" width="200" height="220" bgcolor="#FFFFFF"></embed></object>

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

Acabei de ler no blog do Papervision3D sobre a ferramenta FotoViewr. Poucas coisas na web são, ao mesmo tempo, tão simples e tão visualmente ricas. Você entra no FotoViewr, escolhe o tipo de galeria, escreve o seu nome do Flickr (ou de algum amigo seu. Eu, que não tenho Flickr, fiz a galeria com as fotos da minha cônjuge Tárin e da minha amiga Julia), escolhe as tags das fotos para filtrar (uma pena não ser possível mesclar várias tags) e voalá! O FotoViewr cria uma galeria 3D alucinante pra nenhum iPhone botar defeito.

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

Estamos no ar há menos de um ano, mas já estamos conquistando algum espaço entre os trilhões de blogs na web. O Antonio Beux, responsável técnico do website e aluno do curso de design da Faculdade da Serra Gaúcha indicou o Cabanoblog no seu “Blog de Blogs“. Valeu Antonio!

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.

//Primeiro definimos as funções que
//queremos executar, que eu chamei
//aqui de "pegarArquivos" e "gotoCabana".

function pegarArquivos () {
getURL("http://www.cabanacriacao.com/tutoriais/customizar_menu.fla", "_blank");
}

function gotoCabana () {
getURL("http://www.cabanacriacao.com", "_blank");
}

//Agora criamos um menu novo e desativamos os itens que já vem acoplados, como "zoom in", "zoom out", etc.
//Lembrando que não há como desativar "About Flash Player 9" e "settings".
//Criamos a variável "meuMenu" e dizemos que é um novo "ContextMenu"
//Depois dizemos para os itens acoplados desaparecerem: "hideBuiltInItems".
var meuMenu:ContextMenu = new ContextMenu();
meuMenu.hideBuiltInItems();

//Criamos as variáveis que serão lançadas dentro do novo menu
//e fazemos referências às funções que queremos puxar: "pegarArquivos" e "gotoCabana"
//O que vai entre aspas é a frase exposta no Menu ao usuário final.
var vaiArquivos:ContextMenuItem = new ContextMenuItem("Baixar os arquivos fonte.", pegarArquivos);
var vaicabana:ContextMenuItem = new ContextMenuItem("Quem fez este tutorial bacana?", gotoCabana);

//Mandamos um "push" para literalmente "empurrar" as variáveis dentro da lista
//de variáveis que o menu já tem
meuMenu.customItems.push(vaiArquivos, vaicabana);

//Pra finalizar, lançamos o "meuMenu" no lugar do "menu" original.
_root.menu = meuMenu;

//pronto!

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