Usando a biblioteca de animação Tweener no Flash

Um dos temas dos quais falo muito pouco aqui no Blog é a animação usando Flash e ActionScript, mas pretendo começar mudar isso hoje mesmo, mostrando como é fácil usar uma biblioteca de animação para ActionScript chamada de Tweener para gerar movimento em objetos no Flash. A maioria dos artistas que conheço ainda prefere a técnica tradicional de animação com Flash usando keyframes aplicados em objetos da Timeline. O uso de uma biblioteca de animação ajuda bastante em algumas tarefas específicas e principalmente na criação de interfaces. Esse bibliteca que estou mostrando no tutorial abaixo é chamada de Tweener, e você pode fazer o download dela nesse link.

Como instalar o Tweener no Flash CS5?

Você deve extrair o conteúdo do arquivo ZIP que for copiado da página do Tweener, para uma pasta qualquer no seu computador. Estou usando o arquivo chamado “tweener_1_33_74_as3.zip“. A pasta em que você vai posicionar o diretório chamado de “caurina” deve ser apontado no painel de preferências do Flash, no campo ActionScript 3.0.

Como funciona o Tweener?

O funcionamento do Tweener é bem simples, e garanto que depois de começar a usar a biblioteca de animação, você terá a tendência natural de usar essa mesma técnica em todos os seus projetos de animação. Antes de continuarmos, assista ao vídeo abaixo em que mostro como usar a biblioteca:

Para usar o Tweener é necessário primeiro configurar o Flash para usar os arquivos da bibliteca, e depois disso feito é preciso apenas conseguir adicionar uma instância no palco do Flash que tenha um nome único. Com isso feito, podemos importar o Tweener no ActionScript e depois com a declaração que adiciona um tweener ao código, especificar a maneira como queremos realizar a animação.

O conjunto de parâmetros pode variar bastante, e podemos usar vários modificadores especiais como cores e até mesmo determinar coordenadas para curvas bézier, que fazem o objeto descrever trajetórias curvas de animação.

Um dos pontos positivos do Tweener é que podemos fazer uso de várias animações que são acionadas com base em eventos, coisa que fica complicada e trabalhosa de gerenciar usando apenas keyframes. Quando os projetos começam a assumir tamanhos muito grandes, a coisa acaba assumindo um nível de complexidade que requer mais controle sobre o movimento e sincronia dos elementos na interface.

Tutorial Adobe Flash CS5: Criando aplicativos para iPhone e iPod

O lançamento do pacote CS5 da Adobe está previsto para Abril desse ano, mas muitas das novidades do Photoshop CS5 e do Flash CS5 já foram anunciadas extensivamente pela Adobe em congressos e outros eventos. No caso do Flash CS5 o meu interesse é focado para as minhas atividades acadêmicas, pois ministro aulas de multimídia na web que usam a tecnologia do Flash como base para levar animação 3d para web usando classes personalizadas. Por exemplo, com o uso do Papervision 3D é possível trabalhar com sistemas e interfaces totalmente 3d na web usando o Flash Player como base, o que permite distribuir o seu projeto para uma base de usuários incrível.

Entre as novidades do Flash CS5 está o suporte nativo ao desenvolvimento de aplicativos para o iPhone e iPod, permitindo que os artistas e desenvolvedores passem a distribuir seus projetos usando o iTunes da Apple. Isso é excelente para maximizar o potencial de retorno financeiro para web designers e desenvolvedores que não tinham opção senão procurar clientes e empresas, para desenvolver web sites em Flash.

Como funciona essa integração? Caso você já tenha alguma experiência com classes personalizadas do Flash ou ActionSctipt, encontrei um tutorial que mostra de maneira bem simples como funciona essa integração com o iPhone OS. O tutorial de Flash CS5 mostra como aproveitar o acelerômetro do iPhone para criar aplicativos. É um tutorial em vídeo bem curto e que deve elucidar diversas dúvidas.

tutorial-adobe-flash-cs5-aplicativos-iphone.jpg

O ponto negativo para quem quiser começar a trabalhar com esse tipo de desenvolvimento é que será necessário ao menos, adquirir um iPod ou iPhone para realizar testes. Caso contrário os aplicativos criados com o Flash CS5 não podem ser avaliados. As diferenças nos projetos envolvendo o iPhone OS são relacionadas com classes especiais e o tamanho da tela que deve seguir o padrão do dispositivo. Já estou planejando e estudando os tutoriais e guias lançados pela Adobe para adicionar esse tipo de conteúdo nas minhas aulas durante esse semestre.

Esse tipo de material deve ajudar as pessoas interessadas em começar a trabalhar com aplicativos nesse modelo. Mais novidades devem ser divulgadas até Abril quando diversos softwares da Adobe devem ser atualizados para a versão CS5.

Adobe Flash Catalyst: Crie interface interativas de arquivos PSD, AI e PNG

Para qualquer artista envolvido com a criação de conteúdos ou apresentações para a internet, um dos maiores desafios é mesclar a sua formação direcionada com as artes visuais e o ambiente técnico e cheio de códigos da web. Sempre que ministro cursos sobre o Flash ou ActionScript percebo isso de maneira bem evidente, pois quando o público do curso é formado por pessoas interessadas na parte visual, o ActionScript fica meio de lado e quando o público é de desenvolvedores, a parte visual dos aplicativos sempre deixa a desejar. A Adobe está tentando minimizar essas diferenças para o lado dos artistas com o lançamento do Adobe Flash Catalyst. Esse é um aplicativo ainda em estágio beta no Adobe Labs que tem como objetivo criar interfaces para internet, sem o uso de nenhum tipo de código.

O processo de criação no Flash Catalyst funciona com base na importação de arquivos produzidos no Photoshop, Illustrator ou Fireworks. Assim que os arquivos são importados é possível converter os mesmos para elementos interativos como botões. O vídeo abaixo mostra uma demonstração do software em ação:

Se você produz material gráfico e gostaria de testar o Catalyst para criar apresentações, o software pode ser copiado de maneira gratuita no web site da Adobe, enquanto ainda estiver em fase beta. O apelo de criar apresentações interativas sem a necessidade de usar uma linha de código é muito interessante para artistas, que não tenham interesse em estudar linguagens de programação. Para promover o uso do software, existe um treinamento gratuito sobre o Adobe Catalyst disponível nesse endereço, ainda que seja básico é uma ótima introdução ao software.

Essa opção não é tecnicamente a melhor escolha, pois softwares que criam esse tipo de comportamento de maneira automática geralmente adicionam muitos blocos de código desnecessários ao aplicativo.

Ainda acredito que a melhor solução, pelo menos para quem precisa apresentar material em 3d é usar engines 3d para o Flash, caso o trabalho seja apresentado na web. Entre as diversas opções de engines 3d a que mais me agrada é o Papervision 3D, que é totalmente gratuito e de pode criar efeitos muito interessantes para apresentar interfaces e modelos 3d direto no navegador. O ponto negativo do Papervision 3D é que você precisa de conhecimentos intermediários em ActionScript para conseguir elaborar alguma interface interativa em 3D.

VizualPV3D: Interface visual para criar Flash 3D com Papervision

Um dos grandes limitadores para a produção de material em 3d para a internet é a falta de uma tecnologia que permita elaborar esse tipo de material. O VRML foi uma opção desde os primórdios da internet, mas nunca deslanchou ou ganhou a simpatia de designers e web desigers. Entre os potenciais candidatos a permitir a criação de conteúdo 3D para internet está a dobradinha entre o Adobe Flash e o Papervision 3D, que é uma Engine 3D que pode ser integrada ao ambiente de desenvolvimento do Flash.

Para quem já conhece o Flash e principalmente o ActionScript 3, os únicos desafios para aprender o Papervision são as classes personalizadas da Engine e a modelagem 3d dos cenários e objetos.

Se você não tem experiência alguma com o Flash ou Papervision, pode fazer uso do recém lançado VizualPV3D, que é nada mais que uma interface gráfica feita no próprio Flash com o Papervision, para permitir que artistas e pessoas sem experiência com programação, possam criar 3D para internet. Não faz a menor idéia do que é isso? Assista ao vídeo abaixo para conhecer o VizualPV3D.

Vizual PV3D from Juxt Interactive on Vimeo.

Agora que você já assistiu ao vídeo, posso explicar que esse aplicativo apresentado no vídeo consegue substituir em muito, a necessidade de trabalhar com o Flash e ActionScript para elaborar 3D para internet. Como é possível perceber pelo vídeo, o software se comporta como se fosse um aplicativo 3d qualquer, mas na verdade ele está sendo executado com o Flash Player 10 standalone, que permite executar arquivos com extensão SWF fora do navegador.

Tudo isso que está sendo configurado usando menus e janelas de opções, precisaria ser configurado usando códigos, classes e outros atributos próprios de uma linguagem de programação. Isso não é muito atrativo para a maioria dos designers, o que faz do VizualPV3D um ótimo aliado para as pessoas interessadas em criar 3D para web sem precisar programar. O software ainda está em versão alpha, mas é muito promissor!

Caso você queira testar o software, basta visitar a página do VizualPV3D e fazer o download do aplicativo. Só lembre que é necessário usar o Flash Player 10 stand alone para abrir o software. Os modelos 3d precisam estar em formato XML para que seja possível abrir arquivos no aplicativo.

Tutorial de animação interativa com o 3ds Max e Papervision 3D

No final do último ano comentei aqui no Blog que havia aceitado um grande desafio para esse semestre, que era ministrar uma disciplina que envolvesse multimídia para web com a introdução de conteúdos em 3d. O meu plano é usar o Blender 3D junto com o Adobe Flash para criar animações em 3d interativas para a web, com intermédio de uma engine 3d de código aberto para o Flash chamada de Papervision 3d. O uso dessas ferramentas requer conhecimentos intermediários em todos os níveis do projeto, desde a modelagem 3d até a programação em ActionScript no Flash, usando os módulos e códigos próprios do Papervision 3D. Mas, o resultado para uma animação 3d integrada em web sites e simplesmente fantástico, o que faz valer o esforço empregado no projeto.

Como parte dos preparativos para ministrar da melhor maneira possível a disciplina, estou fazendo muitas pesquisas e anotações na documentação oficial do Papervision 3d e também nos tutoriais que encontro pela web. Um desses tutoriais pode ajudar a explicar melhor o processo de criação com essas ferramentas, ele mostra como é possível integrar o 3ds max com o Papervision 3d na animação de um avião em lowpoly.

Esse tutorial é composto por vários vídeos e apresenta um tempo considerável, portanto recomendo que você assista quando tiver um tempo razoável de sobra, algo em torno de uma hora e meia.

A primeira parte é totalmente dedicada a modelagem 3d por subdivisão no 3ds Max de um avisão simples, para que depois de terminado o processo o modelo seja exportado no formato COLLADA, para o Flash. No final do tutorial o autor mostra o processo de configuração de animação no Flash, com o uso de ActionScript.

Esse é apenas um dos vídeos do tutorial, para que você tenha uma idéia do produto final.

Mesmo que você não esteja interessado na parte de interação de objetos 3d com o Flash e Papervision 3D, recomendo que assista apenas a primeira parte, em que o autor dá ótimas dicas de modelagem por subdivisão, usando as ferramentas do 3ds Max.

No meu caso o tutorial será muito útil até como forma de exercício, mas claro que a parte de modelagem 3d será substituída pelo uso do Blender 3D. Depois que a disciplina estiver terminada, posso reunir material suficiente para ministrar essas disciplina com mais facilidade em outros semestres, pois a demanda por uso de 3d na web com o Flash deve crescer muito ainda, pois isso abre novas possibilidades de integração com as interfaces criadas para web sites.

Esse tema é um dos que está na minha lista de interesses, para um provável título de livro no futuro. Mas, o desafio será muito grande, pois o mesmo irá abordar três tecnologias diferentes em um único título. O desafio será fazer algo voltado para pessoas com conhecimentos básicos em cada uma das áreas, e conseguir ensinar tudo sem usar muitas páginas e imagens.

Se der certo, no final do ano aviso aqui no Blog!