Animando com o Flash

 

Objetivos:

 

Ambientar o aluno com as técnicas de animação do Flash.

 

Autor: Carlos Vitor de Castro

 

Timeline (Linha de tempo)

 

A Linha de Tempo organiza e controla o conteúdo de um filme em camadas e quadros ao longo do tempo. Os componentes mais importantes da Linha de Tempo são os quadros, as camadas e a reprodução. As camadas em um filme estão listadas em uma coluna, no lado esquerdo da Linha de Tempo. Os quadros contidos em cada camada aparecem em uma linha à direita do nome da camada. O cabeçalho da Linha de Tempo na parte superior dessa linha indica os números dos quadros. A reprodução indica o quadro exibido atualmente no Palco.

 

Configuramos a quantidade de quadros por segundo no inspetor de propriedades, para internet é suficiente a opção de 12 quadros por segundo, usando um valor maior do que este vamos criar uma animação muito pesada que pode ser inviável na web.

 

Tipos de quadro que podem ser inseridos na linha de tempo

 

» Quadro (F5) – Insere um quadro entre outros quadros, normalmente é usado para aumentar o tamanho de uma linha de tempo, quando precisarmos fazer que uma animação seja mais longa.

 

» Quadro-chave (F6) – Quando criamos um quadro-chave estamos repetindo do conteúdo de um quadro no próximo quadro. Isto quer dizer que se temos um retângulo no primeiro quadro de uma animação, clicamos no vigésimo quadro e pressionamos F6, este retângulo vai estar presente também no quadro 20.

 

» Quadro-chave em branco (F7) – Se numa animação quisermos que um determinado objeto apareça somente no quadro 20, não basta clicar no quadro e desenhar o objeto, devemos criar um quadro-chave em branco, porque um quadro chave é como um recipiente para objetos no palco, se não criarmos um quadro não há como desenhar objetos.

 

Usando símbolos

 

Símbolos são objetos reutilizáveis, que permitem deixar o arquivo mais sofisticado sem aumentar seu tamanho. No Flash é possível criar três tipos de símbolo: gráfico (graphic), botão (button) e clipe de filme (movie clip).

 

Gráficos

 

» São usados normalmente para criar interpolações de movimento, e para receberem efeitos brilho, transparência e tonalidade.

 

Clipes de filme

 

» Tem todas as características de um símbolo gráfico com a diferença que este símbolo pode ter um movimento, vamos ver mais sobre clipe de filme nos próximos capítulos.

 

Botões

 

» São símbolos clicáveis e animados que podem ser associados a eventos de mouse na linguagem Action Script.

 

Criando um símbolo

 

Quando desenhamos um objeto com a ferramenta de desenho, este objeto é tratado pelo Flash como uma forma, para transformar esta forma em símbolo devemos selecionar a forma, clicar no menu Modify/Convert to symbol ou pressionar F8.

 

 

Biblioteca de símbolos

 

Qualquer símbolo que criamos vai ficar guardado na biblioteca, para que possa ser reutilizado, podemos criar um símbolo e através da biblioteca inseri-lo várias vezes no palco. Cada vez que inserimos um símbolo no palco, estamos criando uma instância do símbolo.

 

Exemplo prático

 

1. Crie um novo arquivo com 400 pixels de largura e 200 pixels de largura.

 

2. Desenhe um retângulo no palco e converta-o em símbolo.

 

3. Clique no menu Window/Library ou pressione CTRL L ou F11 que era a maneira das antigas versões do Flash e continua valendo.

 

 

4. Clique na visualização do símbolo e arraste para o palco. Repita isto pelo menos cinco vezes.

 

Quando arrastamos um símbolo para o palco dizemos que criamos uma instância deste símbolo no palco, no nosso caso temos seis instâncias do circulo, a primeira criada diretamente no palco e as outras cinco vindo da biblioteca.

 

Criando símbolos com o editor de símbolos

 

Podemos usar um modo de tela chamado editor de símbolos para criá-los e até posteriormente editá-los.

 

Exemplo prático

 

1. Crie um novo arquivo com 400 pixels de largura e 200 pixels de largura.

 

2. Clique no menu Insert/New Symbol e escolha Graphic.

 

 

3. Desenhe uma forma qualquer e clique em Scene 1 para retornar ao palco.

 

4. Você vai notar que o símbolo não aparece no palco, para criar uma instância dele no palco devemos trazê-lo da biblioteca.

 

Editando símbolos depois de prontos

 

Podemos usar a biblioteca para acessar a edição dos símbolos que já foram desenhados.

 

Exemplo prático

 

1. Crie um novo arquivo com 400 pixels de largura por 200 pixels de altura.

 

2. Desenhe um círculo no palco e converta-o em símbolo.

 

3. Abra a biblioteca e crie mais quatro instâncias deste símbolo no palco.

 

4. Clique duas vezes na visualização deste símbolo na biblioteca, fazendo isto você acessa o editor de símbolos, faça uma modificação qualquer no tamanho ou na cor e retorne ao palco. Você vai notar que todas as instâncias deste símbolo foram modificadas.

 

Modificando a aparência de um símbolo

 

Depois que transformamos um objeto em símbolo, este, quando selecionado mostra a opção abaixo no inspetor de propriedades.

 

 

» Brightness (brilho) – Aumenta ou diminui o brilho do simbolo.

 

» Tint – Altera a cor do símbolo.

 

» Alpha – Aplica transparência ao símbolo.

 

Advanced

 

 

Criando Animações

 

A animação é o processo de criação de uma mudança num determinado espaço de tempo. A animação pode ser um objeto que se move de um lugar para outro ou que  muda de um tamanho para outro. Uma alteração de cor ou transparência com o passar do tempo também é uma animação. A alteração pode ser de uma forma para outra.

 

Qualquer alteração de posição ou aparência que ocorre com o passar do tempo é animação.

 

No Flash, obtemos animações alterando o conteúdo de quadros sucessivos por um determinado período. Esse processo pode incluir qualquer uma das alterações em qualquer combinação.

 

O Flash fornece três métodos para criar uma seqüência de animação da linha de tempo:

 

» Quadro-a-quadro

 

» Interpolação de forma

 

» Interpolação de movimento

 

Quadro-a-quadro

 

Exemplo prático

 

1. Crie um novo arquivo com 400 pixels de largura e 200 pixels de altura.

 

2. Desenhe um retângulo no meio do palco.

 

3. Pressione F6 uma vez e observe a linha de tempo, você vai notar que foi acrescentado um novo quadro, este novo quadro que você criou é um quadro-chave isto quer dizer que o retângulo está presente no primeiro quadro e também no segundo quadro.

 

 

4. Posicione o mouse próximo à linha de borda do retângulo, clique e arraste para que ele fique como abaixo:

 

 

5. Pressione F6 novamente para criar mais um quadro-chave.

 

6. Modifique o lado esquerdo do retângulo como acabou de fazer agora.

 

 

7. Repita o processo (criar um novo quadro e alterar a aparência do retângulo) até o quadro 10 de sua linha de tempo.

 

Visualizando sua animação

 

Podemos ver nossa animação direito no palco, pressionando ENTER ou num CTRL ENTER onde o Flash faz uma simulação de como ficará na web. Experimente.

 

Usando shape tween (interpolação de forma)

 

Podemos usar interpolação de forma para modificar a aparência de uma forma ou transformar uma em outra.

 

Exemplo prático 1 – alterando a aparência de uma forma

 

1. Desenhe uma forma qualquer em seu palco.

 

2. Clique no quadro 20 de sua linha de tempo e pressione F6 para criar um quadro-chave.

 

3. Mova a forma de lugar e altere sua aparência.

 

4. Clique no primeiro quadro de sua linha de tempo e selecione, no inspetor de propriedades a opção Tween, escolha Shape.

 

 

5. Você vai notar que a sua linha de tempo mudou de aparência, se ficou como abaixo é porque não houve nenhum problema (fundo verde e uma seta não tracejada).

 

 

Experimente sua animação, primeiro pressionando ENTER depois pressionando CTRL ENTER.

 

Exemplo prático 2 – transformando uma forma em outra

 

1. Crie um novo arquivo com 400 pixels de largura e 200 pixels de altura.

 

2. Desenhe um retângulo no alto à esquerda do palco.

 

3. Clique no quadro 20 da linha de tempo e pressione F6.

 

4. Apague o retângulo do palco.

 

5. Sem mexer na linha de tempo, desenhe um círculo de outra cor no canto inferior direito do palco.

 

6. Clique no primeiro quadro de sua animação e crie uma interpolação de forma como no exemplo anterior.

 

7. Experimente seu filme.

 

Exemplo prático 3 – transformando uma forma em várias outras

 

1. Crie um novo arquivo com 400 pixels de largura e 200 pixels de altura.

 

2. Desenhe um retângulo no alto à esquerda do palco.

 

3. Clique no quadro 20 da linha de tempo e pressione F6.

 

4. Apague o retângulo do palco.

 

5. Sem mexer na linha de tempo, desenhe vários círculos no canto inferior direito do palco.

 

6. Clique no primeiro quadro de sua animação e crie uma interpolação de forma como nos dois exemplos anteriores.

 

7. Experimente seu filme.

 

Usando Motion tween (interpolação de movimento)

 

A interpolação de movimento é útil para animar símbolos. Normalmente é usada para mover um objeto de um ponto para outro. É possível usar interpolação de movimentos para alterar cor e transparência, fazer giros e inclinações. Só podemos ter um objeto por camada inteporlada, portanto se você quer animar mais de um símbolo deve ter mais de uma camada.

 

Exemplo prático

 

1. Crie um novo arquivo com 400 pixels de largura e 200 pixels de altura.

 

2. Desenhe um circulo, e selecione-o clicando duas vezes sobre ele, é importante clicar duas vezes para ter certeza que o contorno também estará selecionado.

 

3. Clique no menu Modify/Convert to symbol

 

4. Selecione Graphic e pressione OK. O círculo ficará com a aparência abaixo:

 

 

5. Clique no quadro 30 de sua linha de tempo e pressione F6 para criar um quadro-chave.

 

6. Mova o círculo de lugar.

 

7. Clique em qualquer quadro entre o 1 e o 30 e na barra de propriedades escolha Motion na opção Tween.

 

 

8. Podemos também criar uma interpolação de movimento clicando com o botão direito do mouse em qualquer lugar entre o quadro 1 e o 30 e escolher no menu rápido a opção Create Motion Tween.

 

9. A linha de tempo de ter a aparência abaixo (fundo lilás e uma seta não tracejada):

 

 

 

Movimentando mais de um objeto

 

Não podemos colocar dois símbolos numa mesma camada para animá-lo, para mover mais de um símbolo pelo palco devemos criar uma camada para cada um, para criar uma camada, como mostra a figura abaixo:

 

 

Cada símbolo terá de ser inserido numa camada, se tivermos uma animação com 10 símbolos que se movimentam, deveremos ter um arquivo com 10 camadas.

 

Rotacionando um símbolo

 

Podemos usar o recurso de rotação do inspetor de propriedades para rotacionar um símbolo com facilidade.

 

 

Onion Skin

 

Geralmente, o Flash exibe no Palco um quadro da seqüência de animação de cada vez. Para ajudá-lo a posicionar e editar uma animação quadro a quadro, você pode exibir dois ou mais quadros no Palco de uma só vez. O quadro posicionado abaixo da reprodução é exibido em quatro cores, enquanto aqueles ao redor aparecem opacos, como se cada quadro estivesse desenhado em uma folha de papel de transparência translúcido e essas folhas estivessem empilhadas umas sobre as outras. Não é possível editar os quadros opacos.

 

 

Exemplo de interpolação de movimento com Onion Skin

 

 

Onion Skin – Editando múltiplos frames

 

Para permitir a edição de todos os quadros entre os marcadores de transparência, clique no botão Editar Vários Quadros. Em geral, o papel de transparência permite editar somente o quadro atual. No entanto, é possível exibir normalmente o conteúdo de cada quadro entre os marcadores de transparência e tornar cada um deles disponível para edição, independentemente de qual seja o quadro atual.

 

Onion Skin – Configuração

 

Clique no botão Modificar Marcadores de Transparência e escolha um item do menu:

 

» A opção Sempre Mostrar Marcadores exibe os marcadores de transparência
no cabeçalho da Linha de Tempo com a transparência ativada ou não.

 

» A opção Ancorar Marcas de Transparência bloqueia os marcadores de transparência na posição atual no cabeçalho da Linha de Tempo. Normalmente, o intervalo de Papel de Transparência é relativo ao ponteiro do quadro atual e aos marcadores de Papel de Transparência . Ao ancorar os marcadores de Papel de transparência, você impede que eles se movam com o ponteiro do quadro atual.

 

» A opção Transparência 2 exibe dois quadros em ambos os lados do quadro atual.

 

» A opção Transparência 5 exibe cinco quadros em ambos os lados do quadro atual.

 

» A opção Transparência para Todos exibe todos os quadros em ambos os lados do quadro atual.

 

Nos próximos tutoriais vamos ver mais sobre linha de tempo.