Guias de movimento

 

Objetivos:

 

Mostrar duas das mais comuns técnicas de animação do Flash, Guias de movimento e máscaras.

 

Autor: Carlos Vitor de Castro

 

Se fizermos uma animação de um círculo se movendo entre dois pontos da tela, este movimento sempre será uma linha reta entre o ponto inicial e o final, se quisermos que este caminho seja uma linha sinuosa, por exemplo, devemos usar o recurso de guias de movimento.

 

Exemplo prático

 

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

 

2. Desenhe um círculo no canto inferior esquerdo de seu palco e converta-o em símbolo gráfico.

 

3. Clique no botão “Add motion guide” da sua paleta de camadas.

 

 

4. Desenhe uma linha em diagonal como mostra a figura abaixo:

 

 

5. Cruze estas linhas com outras duas.

 

 

6. Siga as instruções da imagem abaixo para finalizar a linha sinuosa, depois que terminar de moldar a linha sinuosa, clique a apague as linhas menores que foram usadas somente para podermos desenhar a nova linha.

 

 

7. Resultado

 

 

8. Verifique se a Ferramenta Imã , abaixo da barra de ferramentas está pressionada.

 

9. Dê um clique no círculo para selecioná-lo, quando selecionado, este símbolo mostra um pequeno círculo e uma pequena cruz, dentro dele, devemos clicar neste círculo e arrastar para o início da linha-guia.

 

 

10. Marque agora o quadro 30 das duas camadas e pressione F6.

 

11. Clique em qualquer lugar do símbolo e arraste para longe da guia e solte.

 

12. Selecione o símbolo, clique no seu círculo interno e encaixe no final da linha-guia.

 

13. Aplique uma interpolação de movimento somente na camada do símbolo.

 

14. Teste seu filme com ENTER e CTRL ENTER.

 

Exercício

 

1. Crie um novo arquivo com 500 pixels de largura e 300 de altura.

 

2. Desenhe as linhas abaixo.

 

 

3. Crie uma nova camada e desenhe, nesta camada, um círculo como mostrado abaixo, converta-o em símbolo gráfico.

 

 

4. Clique no botão Add motion guide e nesta nova camada, desenhe uma linha como mostrado abaixo.

 

 

5. Encaixe a bola no início da guia.

 

6. Marque o quadro 30 de todas as camadas e pressione F6.

 

7. Encaixe a bola no final da guia e crie uma interpolação de movimento.

 

Usando Máscaras

 

Para efeitos como refletores e transições, podemos usar uma camada de máscara para criar um orifício através do qual o conteúdo de uma ou mais camadas subjacentes torne-se visível. Você pode agrupar várias camadas sob uma única camada de máscara para criar efeitos sofisticados. Também é possível usar qualquer modalidade de animação, exceto trajetórias de movimento, para instruir a movimentação da máscara. Não é possível mascarar camadas dentro de botões.

 

Exemplo prático

 

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

 

2. Escreva seu nome no palco com uma fonte bem grande.

 

3. Crie uma nova camada, esta camada ficará sobre a primeira.

 

4. Nesta nova camada desenhe um círculo em cima da primeira letra de seu nome e converta esta forma em símbolo gráfico. Este símbolo será a mascara, só vamos ver camada debaixo o que estiver posicionado atrás do círculo.

 

5. Clique com o botão direito do mouse no nome da nova camada e escolha Mask.

 

 

6. Já vemos que o recurso de máscara funciona, do seu nome você só consegue enxergar a parte que estava abaixo do círculo, para continuar trabalhando temos de destravar as camadas.

 

 

7. Depois de destravar as camadas, marque o quadro 30 das duas camadas e pressione F6.

 

8. Mova o círculo para cima da última letra de seu nome.

 

9. Aplique uma interpolação de movimento na camada que contém a máscara.

 

10. Teste seu filme com ENTER e CTRL ENTER.

 

Exercício

 

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

 

2. Escreva seu nome bem grande no centro do palco e modifique sua cor para azul.

 

3. Selecione e texto e pressione CTRL C, para copiar.

 

4. Crie uma nova camada e pressione CTRL SHIFT V para colar no mesmo local.

 

Dê um clique no texto para selecioná-lo e troque a cor do texto para vermelho, você não vê mais o texto azul, porque o vermelho está sobreposto.

 

5. Crie uma nova camada e desenhe um círculo em cima da primeira letra do seu nome, converta este círculo em símbolo gráfico.

 

6. Converta esta nova camada em máscara e destrave os cadeados da camada.

 

7. Marque o quadro 30 das três camadas e pressione F6.

 

8. Mova o círculo para cima da última letra do seu nome.

 

9. Aplique uma interpolação de forma na camada da máscara.

 

Exercício 2

 

Clicando e arrastando uma máscara.

 

Este é um efeito bem interessante usando máscaras, ao invés de criar movimentos pré-fixados na nossa animação vamos permitir que o visitante de nossa página movimente como quiser nossa máscara.

 

Um exemplo interessante desta técnica pode ser verificado no site http://www.sundownbike.com.br fabricante da minha bicicleta, o visitante pode arrastar uma lente de aumento sobre o bicicleta para ver detalhes do modelo

 

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

 

2. Importe uma imagem para o stage (palco) e dimensione-a para o tamanho do stage (550 por 400), posicione-a em X=0 e Y=0. Converta esta imagem em símbolo gráfico.

 

3. Crie uma nova camada acima da primeira e importe outra imagem, dimesione-a e posicione-a da mesma maneira que a imagem anterior.

 

4. Crie uma nova camada acima das outras duas e desenhe um círculo em cima das imagens, converta este círculo em clipe de filme e dê o nome de “alvo” à sua instância.

 

 

5. Clique com o botão direito do mouse na camada que contém o círculo e escolha a opção Mask.

 

 

6. Como fizemos da outra vez devemos desligar os cadeados das camadas.

 

7. Dê um clique no círculo para selecioná-lo, pressione a tecla F9 para exibir a paleta de ações e digite o código abaixo.

 

on (press)

      {

      startDrag("../alvo");

      }

on (release)

      {

      stopDrag();

      }

 

8. Temos aqui dois eventos:

 

a. PRESS – ao clicar o mouse

 

b. RELEASE – ao soltar o mouse

 

Quando pressionarmos o botão do mouse para começar a arrastar, disparamos a função startDrag do Flash que inicia a o arrastar do objeto que foi instanciado como “alvo”.

 

Quando soltamos o botão do mouse disparamos a ação stopDrag que encerra o arrastar anterior.

 

Está pronto, agora use sua imaginação para criar novos exemplos, treine bastante, só experimentando que aprendemos.