Na época em que o Flash CS4 foi lançado pela Adobe, muitos artistas experientes encontraram duas maneiras nativas de criar animações por Tween que até o CS3 estava agrupado em apenas uma opção chamada de Motion Tween. Essas opções permanecem até hoje nas versões mais recentes do Flash, e mesmo com a tecnologia Flash estando em declínio para uso em material para web, o software ainda é uma das maneiras mais simples e acessíveis para começar a criar animações em 2D. Por isso, sempre acabo usando a ferramenta nas minhas aulas sobre animação tradicional 2D, pois é muito fácil trabalhar movimento com vetores no Flash. Mas, afinal quais são esses métodos de animação existentes no Flash?

Motion Tween e Classic Tween no Flash para animação

Os métodos estão divididos em Motion Tween e Classic Tween para criar movimento no palco do Flash. O mais simples de usar é o Classic Tween que como o próprio nome mesmo já identifica, é o método que foi herdado de versões anteriores do software, e consiste na criação de keyframes em pontos chave da linha do tempo, e caso exista diferença entre os keyframes o Flash faz a interpolação das propriedades para criar a animação.

No caso do Motion Tween o processo é diferente, pois podemos utilizar os menus do Flash para alterar propriedades do objeto selecionado, e nem existe a necessidade de adicionar keyframes formalmente para gerar movimento.

Para mostrar melhor as diferenças entre o Motion Tween e o Classic Tween em animação no Flash, gravei um pequeno tutorial em vídeo que explica na prática as diferenças:

A demanda por material em Flash para ambientes como o a internet está em declínio, mas é importante lembrar que esse era apenas um dos segmentos que permitiam trabalhar com a tecnologia Flash. E a ferramenta como plataforma para animação 2D ainda é muito usada por ser acessível e possuir muito material de consulta na própria internet. Por isso, existem diversos estúdios de animação pequenos e médios que ainda utilizam o Flash para montar as suas animações baseadas em vetores.

As minhas primeiras experiências com animação foram no Flash, ainda na época do já distante Flash 4! Isso já faz um bom tempo! Foi no final dos anos 90, para ser mais preciso em 99!

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.

A Adobe já teve algum tempo atrás uma ferramenta que era praticamente sinônimo de multimídia e animação para a Web, que é o Flash. Hoje ele ainda é reconhecido como uma das melhores opções para produzir material com animação baseada em vetores, pois o seu plugin está instalado em um grande número de computadores e também é fácil encontrar profissionais e artistas, para trabalhar em projetos com o Flash. Mas, desde que o mundo está adotando tecnologias móveis, principalmente as baseadas no sistema iOS, que representam um grande problema para os artistas e produtoras focadas em Flash. O iOS não suporta o Flash Player, impedindo que donos de iPhones, iPods e iPads consigam visualizar esse tipo de conteúdo no Safari Mobile.

A solução seria adotar tecnologias mais abertas e que são largamente suportadas pelos navegadores atuais. Esse é o caso do HTML5 que com a sua tag <canvas> permite trabalhar com a criação de elementos vetoriais e também animação direto no navegador. Mas, a solução envolvia o aprendizado da linguagem HTML5 e também JavaScript para criar animações, o que deixada muitos artistas desanimados para aprender essas novas tecnologias.

É para atender o público que gostaria de algo como um Flash que cria material multimídia em HTML5 que a Adobe anunciou o preview aberto do software chamado Edge.

Sim, o Adobe Edge está sendo chamado de Flash otimizado para o HTML5. Como ele está em fase de testes, você pode fazer o download gratuito do Adobe Edge nesse endereço, o mesmo funcionara por alguns meses até o fim do período de testes.

O vídeo abaixo mostra uma introdução ao Adobe Edge, mostrando como é possível criar animações com foco no HTML5 de maneira parecida com o que fazemos no Flash. O processo é mais parecido com a animação realizada no After Effects ou Adobe Premire, mas os conceitos de interpolação e keyframes são os mesmos do Flash.

A sua interface lembra muito um Flash resumido, e com os recursos necessários para criar animações simples com texto, imagens e figuras geométricas. Lembre que ainda é um preview e muita coisa deve mudar até que o Edge ganhe uma versão estável. Por exemplo, coisas das quais senti falta versão são a possibilidade de adicionar loop na animação, e também de trabalhar com coisas simples do tipo links no texto.

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.

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.

Os projetos que envolvem o uso de animações 3d na web sempre foram um grande desafio para a maioria dos artistas, pois envolvia o uso de tecnologias especializadas em mostrar apenas vídeos ou vetores 2d. Esse problema era resolvido com o uso de vídeos incorporados em web sites criados em Flash, que acabavam mostrando o 3d, mas por outro lado carregavam significativamente o tamanho dos arquivos usados no web site. Desde que o Flash passou a usar o ActionScript 3, o número de módulos e classes personalizadas cresceu significativamente e possibilitou o surgimento de projetos como o Papervision 3d.

Só o uso do Papervision 3d com o Flash já permite a criação de web sites vetoriais de maneira muito semelhante ao que fazemos em softwares como o Blender 3D e 3ds Max. Ainda é possível adicionar um pouco mais de complexidade ao Flash com classes especializadas em física, como é o caso do JiglibFlash. Para termos uma idéia mais clara do que é possível fazer com a união dessas duas classes, os objetos 3d criados no Papervision podem participar de simulações como Rigid Bodies!

Se você quiser aprender os procedimentos necessários para criar uma animação usando Papervision 3d e JiglibFlash, simulando Rigid Bodies, visite o endereçoi indicado.

No web site é possível encontrar as instruções para criar uma cena com diversos cubos que sofrem ação da gravidade, como qualquer outra simulação de Rigid Body. Assim que os cubos colidem uns com os outros, as reações baseadas em massa entram em ação criando uma animação totalmente automática. O melhor de tudo é que o processo inteiro está armazenado em um arquivo vetorial bem pequeno.

Esse é um assunto interessante para artistas que gostariam de expandir seus projetos para a internet, pois o processo é muito semelhante a um jogo. É necessário aprender um pouco de programação e se adaptar as nuances do Flash e do próprio Papervision, mas garanto que o resultado dessas animações aplicadas em qualquer portfólio faz o profissional ter portas abertas na maioria das agências envolvidas com web.

Sempre que posso abordo o uso do Papervision 3D nas minhas aulas de desenvolvimento multimídia para web, mas infelizmente a carga horária acaba sendo curta para avançar na criação de aplicativos 3d para web.