Tutorial 148 – Flash CC 2014: Usando clipes de filme

A animação 2d é uma arte que exige conhecimentos e técnicas que podemos dizer serem universais em relação ao animador, mas que também apresentam desafios e problemas que são únicos ao seu ambiente bidimensional. Até poucos anos atrás um dos maiores expoentes em relação à animação para web e também 2d era o Flash, que depois do advento dos dispositivos móveis e sua necessidade constante de economizar bateria precisou excluir o Flash da sua lista de tecnologias suportadas. Na época, muitas pessoas acreditavam que essa exclusão do Flash seria o fim da tecnologia, mas a Adobe acabou realocando o Flash como plataforma para animação 2d e o distanciou das animações voltadas para a web.

Hoje é muito comum encontrar artistas e estúdios produzindo animações 2d usando o Flash, pela sua natureza vetorial que ajuda muito ao longo do processo de criação.

Uma das ferramentas mais importantes dentro do contexto da animação usando o Flash são os chamados clipes de filme. Você sabe para que servem os clipes de filme no Flash? Para explicar exatamente o seu funcionamento e função, resolvi produzir um pequeno tutorial explicando como criar e usar clipes de filme uma situação comum de animação, o movimento dos olhos.

Com o uso de clipes de filme, podemos reaproveitar as animações geradas dentro do Flash e adicionar elementos que praticamente funcionam “sozinhos”. Esse é o caso dos olhos, em que podemos gerar o movimento apenas de um olho e replicar essa animação para conseguir otimizar essa animação.

Assista ao vídeo para entender a importância dos clipes de filme dentro do contexto de animação, e de quebra faça a animação para os olhos do seu futuro personagem virtual!

Animação 2D com Flash

Quer desenvolver as suas habilidades na animação 2d? Recomendo conferir os cursos sobre animação com Flash do EAD – Allan Brito, em que você pode ao mesmo tempo conhecer a tecnologia Flash no curso básico gratuito e também desenvolver habilidades próprias para animação 2d no curso específico sobre animação 2d com Flash:

Tutorial de animação com Flash: Motion Tween e Classic Tween

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!

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.

Adobe Edge Preview: Animações com HTML5

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.

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.