Módulo 5: Criando Animação no Flash® CS3: 5.2 - Usando Máscaras

Imprimir
PDF

 

MÁSCARA ANIMADA

Você pode usar camada de máscara para revelar porções de uma imagem ou gráfico na camada abaixo. Para criar uma máscara você deve especificar que essa camada é uma camada de máscara clicando com o botão direito do mouse sobre a camada e selecionando Mask. Podemos desenhar formas gráficas sobre essa camada; na verdade podemos usar qualquer forma preenchida, textos e símbolos como uma máscara. A camada de máscara revela a área das camadas abaixo.

Clique no logo do Flash para visualizar o arquivo pronto.

AprendoFacil :: Treinamento Online.

CRIANDO UMA MÁSCARA ANIMADA: OS PASSOS BÁSICOS

  1. Começamos criando uma camada acima da imagem que desejamos mascarar. Essa será a camada de máscara. Criamos ou importamos um gráfico na camada de máscara e a convertemos em um símbolo.
  2. Criamos uma animação na camada de máscara
  3. Clicamos com o botão direito do mouse na camada de máscara e selecionamos Mask no menu contextual.
  4. Bloqueamos as camadas para ver o efeito de máscara ainda no ambiente de criação.
  5. Selecionamos Control -> Test Movie para visualizar a animação (opcionalmente podemos clicar Ctrl + Enter).

 

EXERCÍCIO PRÁTICO: CRIANDO UMA MÁSCARA ANIMADA

  1. Inicie um novo arquivo Flash, altere o palco para 400 x 400 pixels, importe uma imagem para o palco da pasta Amostras de Imagens do Windows, no exercício usamos a imagem Por do Sol, altere o tamanho dessa imagem no palco para 400 x 400 pixels de forma a coincidir com o tamanho do palco. Dê a essa camada o nome de “Imagem”;
  2. Crie uma segunda camada, certifique-se de ela estar acima da camada “Imagem” e atribua a essa nova camada o nome de “Camada de máscara”. Clique com o botão direito do mouse e escolha a opção “Mask”, conforme figura 5.4 abaixo.

    3.  

    inserindo camada de máscara
    FIGURA 5. 4: INSERINDO MÁSCARA

     

  3. Desbloqueie as camadas clicando uma vez em cada ícone de cadeado e crie um quadro de 50x50 pixels na cor verde claro (mais a frente você verá que a cor não importa).
  4. Ainda na camada de máscara, clique no frame 20 e pressione F6 para inserir um quadro-chave nessa posição. Clique na camada chamada “Imagem” e clique no frame 20 e pressione F5 para inserir quadros até essa posição (Observe a imagem 5.5).
    5. inserindo camada de máscaras FIGURA 5. 5: INSERINDO QUADROS-CHAVE: FRAME 20
  5. Entre o frame 1 e 20 da “Camada de máscara”, clique com o botão direito do mouse e selecione Create Motion Tween. No painel de Propriedades na caixa Rotate, escolha CW e mantenha as demais configurações como estão.
  6. Clique no Frame 20. Selecione o quadrado e modifique seu tamanho para 400x400 pixels e posicione-o sobre a imagem de forma que toda a imagem fique oculta (Figura 5.6).

    7. Inserindo camadas de máscara:frame 20
     FIGURA 5. 6: COMO DEVE FICAR O QUADRADO  NO QUADRO-CHAVE 20
  7. Clique no Frame 30 da camada de máscara e insira um novo quadro-chave clicando em F6. Repita a operação na camada Imagem com a diferença de que nela você inserirá quadros (frames) comuns até o frame 30.
  8. Clique na camada de mascara, em seguida no frame 30, clique no quadrado verde e usando o painel de propriedades altere sua largura (width) para 1, mantenha a altura em 400 pixels, de forma que ele se torne uma linha como a da figura 5.7.

    9. Inserindo camadas de máscaras: frame 30
    FIGURA 5. 7: COMO DEVE FICAR O QUADRO NO KEYFRAME 30
  9. Entre o frame 20 e 30 da “Camada de máscara”, clique com o botão direito do mouse e selecione Create Motion Tween
  10. Clique na camada de mascara, clique no frame 60 e insira um novo quadro-chave, aproveite insira quadros normais na camada imagem também. Clique na linha verde e usando o painel de propriedades altere sua largura (width) para 400 pixels novamente de forma que ele volte a ocultar a imagem.
  11. Entre o frame 30 e 60 da “Camada de máscara”, clique com o botão direito do mouse e selecione Create Motion Tween. No painel de propriedades clique na opção Ease selecione o botão Edit...e arraste a linha até as coordenadas da figura abaixo 5.8.
    12. Customizando a interpolação
    FIGURA 8: CUSTOMIZANDO A INTERPOLAÇÃO
  12. Finalmente clique em Control > Test Movie para ver à animação.

 

Sugestão de exercício de fixação!

Crie outras animações usando os conceitos vistos nessa aula.

 

Quem ficou com dúvidas, não conseguiu reproduzir algum procedimento demonstrado nos tópicos que compreende este módulo 5 ou não entendeu algum conceito, por favor poste a dúvida ou comentário logo abaixo.