Blog Tecnológico

Transições com o Animate

Melissa Campuzano • 01 fev 2017

O uso da máscara no Animate é uma ferramenta muito útil para dar aqueles efeitos e transições legais às animações. Trabalhar com máscaras é fácil, apenas é preciso ter um ponto em consideração, o planejamento.

Agora que você já tem escrito suas ideias e reunido os recursos,  esta pronto para abrir o Animate CC.

Crie um novo arquivo HTML5 e configure o tamanho do palco.



Em seguida, importe o fundo da sua animação para uma camada nova no Frame 1.



Numa camada diferente adicione o texto no qual você ira colocar uma transição fazendo o uso de uma máscara a qual você ira criara numa camada por cima, mas antes de criar a máscara primeiro crie um Key Frame no Frame 80 de maneira que o texto se mantenha visível por um tempo ate atingir o Frame 80.


Crie uma camada por cima da camada do texto e crie um retângulo, converta ele em um Clipe de Filme e crie uma Interpolação Clássica entre o Frame 0 e o Frame 40, de maneira que o retângulo se movimente de esquerda para a direita. O retângulo é criado para ser usado  como uma máscara isso significa que tudo o que estiver na camada embaixo do retângulo será tudo o que ira aparecer na animação, o que não estiver no espaço do retângulo será escondido.



Insira um quadro no Frame 80, isso para que uma vez que o texto da primeira linha apareça por inteiro, este se mantenha visível até atingir o Quadro 80.



Agora para aplicar a máscara é só dar clique direito sobre a camada do retângulo e selecionar a palavra Máscara.



Lembre sempre que a máscara sempre deve estar na camada de cima porque ela é aplicada na camada de baixo.

Aplique os mesmos passos em novas camadas e crie mascaras de maneira que o texto da segunda linha tenha a mesma transição que o texto da linha de cima. Veja que a segunda transição do texto comece no Frame 40 e termine no Frame 80 como segue a continuação.



Para fazer uma transição simples de uma imagem a outra simplesmente converta a imagem a um Clipe de Filme e crie uma Interpolação Clássica, no ultimo frame desse Clipe de Filme selecione em Propriedades do Clipe de Filme e vá à Opção Efeitos de Cor>Estilo>Alfa>2% . Isso para que a imagem que estiver por baixo apareça gradualmente na animação.



A transição que segue a continuação é uma mascara de um circulo aplicado no fundo da Iggy Azalea.
Veja que o circulo é um Clipe de Filme com uma Interpolação Clássica que aumenta no tamanho ate atingir todo o palco ou fundo da animação.





Para a seguinte transição aplique uma Interpolação Clássica na imagem. A imagem primeiramente deve ser convertida em um Clipe de Filme e no ultimo frame da Interpolação é só aumentar o tamanho da imagem.





Na próxima transição aplique uma máscara com formato de estrela de 15 pontas a qual deve girar e crescer ate atingir todo o palco. Para isso insira o fundo numa camada e em outra diferente crie a estrela como um clipe de filme que gire e cresça. Depois de ter criado a estrela com seu próprio movimento aplique a Máscara.





Nas próximas transições use o canal Alfa e a Interpolação Clássica rotacional numa imagem.



Para as transições dos personagens use máscaras diferentes numa mesma imagem com um fundo por baixo com um efeito de cor Alfa.

Aplique novamente uma Máscara com formato de circulo que vai aumentando em tamanho ate atingir todo o palco.



Para finalizar e fechar com os créditos de sua animação aplique uma transição simples de máscara.
Siga os seguintes passos:
Numa camada leve o texto e em outra diferente e por cima crie um retângulo como Clipe de Filme, o mesmo que deve aumentar de tamanho ate atingir todo o texto. Aplique a Máscara dando um clique direito sobre a camada do retângulo

Para poder adicionar som numa animação selecione no menu File>Import>Import to Library



Selecione o arquivo mp3



Ele ira aparecer no Painel Library. Ele é indicado por um ícone único e a janela de visualização mostra uma onda de som.
Clique no botão Play para ouvir o som



Clique duas vezes para abrir a janela de Propriedades onde você poderá visualizar as informações do arquivo de som.




É possível colocar vários sons em uma camada ou em camadas contendo outros objetos. No entanto, é recomendável que cada som seja colocado em uma camada separada. Cada camada age como um canal de som separado. Os sons de todas as camadas são combinados quando você executa o arquivo SWF.
É possível importar os seguintes formatos de arquivo de som no Animate:

  • Adobe Sound (.asnd). Este é o formato de som nativo do Adobe® Soundbooth™.
  • Wave (.wav)
  • AIFF (.aif, .aifc)
  • mp3

É possível importar esses formatos de arquivos de som adicionais:

  • Sound Designer® II (.sd2)
  • Sun AU (.au, .snd)
  • FLAC (.flac)
  • Ogg Vorbis (.ogg, .oga)

Uma vez importado o som na sua biblioteca, arraste ele no palco numa camada separada.

Veja como ficou a animação !

Melissa Campuzano

Melissa Campuzano, graduada em Design Gráfico pela UCATEC, com grau de Record Acadêmico.

Trabalha na área de Design, desenvolvendo projetos variados de design, imagem corporativa e eventos no exterior.
Com suas peças gráficas conseguiu mudar a percepção do público sobre o que significa estudar numa universidade de empreendedores.
É instrutora e consultora das tecnologias Adobe, atuando na ENG DTP & Multimídia.

CONTATO