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.

Para os que gostaram do vídeo mostrando algumas das novidades do Photoshop CS5, mais um vídeo publicado na web no final do mês passado, mostra algumas das novidades do que virá a ser o Flash CS5. O vídeo foi gravado por um usuário do Flash que visitou a conferência Flash on the Beach 2009, realizada no final de setembro. Mesmo tendo sido gravado usando um celular, podemos acompanhar várias das novidades para a próxima versão do Flash no curto período em que uma pessoa da Adobe faz a demonstração.

O Flash é uma aplicação extremamente importanta para quem está interessado em trabalhar com 3d para web, usando classes personalizadas como o Papervision 3d. Ele funciona muito bem com o Blender 3D, produzindo modelos 3d no formato COLLADA e criando interfaces 3d com o Papervision no Flash. Bem, vamos aos vídeos:

Logo no início do vídeo o apresentador mostra algumas das novidades do Flash em termos de interface, com um enorme painel de opções para formatação de texto no stage. Para as pessoas que precisam trabalhar com grandes documentos de texto na web, isso será uma excelente adição. Mas, o principal fica para depois que é a interação e desenvolvimento usando ActionScript.

Apesar de ser conhecida como uma ferramenta para designers, ficando o Flex voltado para programadores, muitas pessoas acabam escolhendo o Flash para criar aplicativos multimídia, pois a interface gráfica para ilustração e desenho, deixa o processo criativo mais interativo. Um dos problemas disso é que a ferramenta se torna mais voltada para design do que desenvolvimento. A conseqüência disso é a ausência das facilidades de um framework para criar aplicativos mais complexos no Flash de maneira rápida.

A primeira ferramenta demonstrada no vídeo é uma espécie de template que pode ser criado e adicionado em aplicativos, para acelerar o desenvolvimento de jogos e outros elementos. Logo depois, podemos visualizar algo realmente útil, que é a declaração de classes personalizadas com a opção de autocompletar.

Outra coisa interessante no Flash CS5 é a integração com o Flash Builder, que é a versão atualizada do que antigamente se chamada Flex Builder. Isso é demonstrado próximo do final no primeiro vídeo, em que um bloco inteiro de código é enviado para o Flash Builder. Assim podemos usar um aplicativo especializado em códigos para o ActionScript e o Flash apenas para o design.

Os vídeos ainda mostram apenas alguns dos novos recursos do Flash CS5, mas já podemos ter uma boa idéia do que está por vir em abril de 2010, quando a suíte CS5 deve ser lançada.