DevSecOps

25 mai, 2009

Motion Tween no Adobe Flash CS4

Publicidade

Olá!

No novo Adobe Flash CS4, vamos apresentar a forma de se fazer uma animação pela linha de tempo, pelo Motion Tween. Vamos usar o perfil Animator, que é um novo recurso que o Flash CS4 tem para configurar o layout das ferramentas.

Nas versões anteriores do Flash era necessário selecionar o objeto e criar quadros-chave em cada ponto em que a animação era alterada. No Flash CS4, vamos especificar o tempo da animação e, em seguida, definimos os pontos de referência.

No exemplo abaixo, vamos colocar os elementos em cada layer. O Fundo é estático, o “Logo” (que será a animação) foi transformado em Movie Clip e, na linha do tempo, habilitamos o Create Motion Tween.

Você poderá fazer esses pontos de referência pressionando a tecla F6 ou simplesmente fazendo qualquer alteração, como arrastar ou aplicar um filtro sobre o objeto.

Como queremos que o “Logo” apareça, vamos marcar na linha de tempo o tempo para sua exibição. Para o exemplo, no primeiro frame deixaremos Alpha 0% e no décimo frame deixaremos Alpha 100%.

Então, o logo irá surgir!

Agora que você habilitou o Motion Tween na linha de tempo, selecione o objeto ou um frame qualquer da linha de tempo e dê uma olhada na palheta “MOTION EDITOR”. Várias barras quadriculadas divididas em grupos aparecerão e será por elas que você poderá fazer com precisão todas as suas animações. É claro que as animações ainda podem ser feitas do modo tradicional, mas não com a precisão que o MOTION EDITOR oferece!

Vamos começar identificando os cinco grupos, que são “Basic motion”, “Transformation”, “Color Effect”, “Filters” e “Eases”.

Basic motion: Como o próprio nome já diz, esta lista se refere a recursos básicos, como posição “x”, “y” e girar no eixo “z”. Não se assuste!!! Girar em “z” nada mais é que o rotation a que já estamos acostumados das outras versões do Flash.

É chamado assim porque agora podemos girar o eixo em “x”, “y” e “z”, ou seja, não temos apenas “x” para mover para esquerda e direita e “y” para cima e para baixo, também temos “z” para mover para trás e para frente – em outras palavras, agora temos profundidade.

Isso não significa que o Flash já seja 3D. Os elementos continuam sendo achatados, mas agora podem girar 360º para qualquer direção!!! Por hora, só temos posição em “x”, “y” e giro em “z” e mais para frente iremos habilitar a profundidade em “z” e o giro em “x” e “y”.

De qualquer forma, esse grupo não muda em momento algum o tamanho ou a inclinação do objeto por mais que isso pareça estar acontecendo no caso do “quase 3D”, mas muda a nossa perspectiva, pois agora podemos ver o objeto de diversos ângulos.

Tranformation: Este não tem novidade; estão reunidos aqui os elementos da palheta Transform, o skew X, skew Y, scale X e scale Y, com exceção do rotation, que até continua na palheta Transform, mas, no caso do MOTION EDITOR, está no grupo Basic motion.

Color Effect: Aqui estão reunidos os efeitos de cor para um objeto igual à palheta de propriedades, onde temos uma lista de efeitos de cor. Mas só podemos usar um efeito para aplicar a cada objeto em um ponto de referência da animação.

Filters: Aqui temos todos os filtros contidos na palheta convencional e, assim como ele, podemos aplicar qualquer filtro, quantas vezes quisermos.

Eases: Antes, no Flash, usávamos o Eases para definir a velocidade da animação, se iria ser constante, se começaria rápido para terminar devagar ou se começaria devagar para terminar rápido. Além disso, podíamos, no modo avançado, através de um gráfico, variar ainda mais esta velocidade.

Agora, ainda podemos fazer com a opção “custom” e temos também diversas opções já pré-configuradas para facilitar ainda mais a nossa vida. Essas opções já existiam, mas podíamos acessá-las apenas por programação, o que quer dizer que ficou mais fácil usá-las sem conhecimento de programação!

Você pode notar que todos os outros grupos acima têm caixas de seleção e um “combobox”, onde podemos aplicar esses recursos em todos os meios, seja ele de movimento, forma, cor ou filtro.

Por fim, aqueles que já estão familiarizados com o modo avançado do Eases vão se sentir mais à vontade neste ambiente, já que segue o mesmo principio para todos os outros recursos de animação em que, através de pontos de referências em um gráfico, podem manipular livremente suas animações.

Agora, vamos dar um movimento para ele! Em Ferramentas (Tools), usaremos o 3D Rotation Tool para dar a impressão de movimento em 3D. Observe o gráfico no Motion Editor!

Essa é a maneira mais fácil de aplicar a impressão de 3D ao objeto, e note que agora no Motion Editor, no grupo Basic motion, aparecem as opções que faltavam para manipular o objeto em 3D. Essa é só uma das maneiras de habilitar esses parâmetros; você pode também, a qualquer momento, ir à linha de tempo da animação (em que o novo Motion Tween esteja habilitado) e, com um clique no botão direito, poderá habilitar ou desabilitar o 3D Tween.

A qualquer momento selecione um quadro na animação e aplique o efeito que você quiser (pode ser na palheta do Motion Editor também). Neste momento o Adobe Flash CS4 irá criar um ponto de referência para a mudança que você fez na animação.

Vamos inserir mais uma layer “Nome”. Não se esqueça de que ela tem de ser um Movie Clip, pois terá uma animação também!

Enquanto fazemos a animação, os pontos de referência são criados e tudo pode ser acompanhado e alterado (para aqueles que gostam de precisão e de gráficos) no Motion Editor.

O resultado ficará muito legal e você poderá usar sua imaginação para as animações!!!