Atendimento via WhatsApp Atendimento via WhatsApp

Blog Tecnológico

Animações Interativas

Melissa Campuzano • 31 dez 2016 • Adobe Animate

Animações Interativas

Para criar uma animação interativa eu recomendo criar sua ilustração no Illustrator e depois importar ele no palco do Animate.

No Animate CC crie um novo documento HTML5 CANVAS e numa nova camada arraste o fundo da animação

Numa segunda camada coloque o primeiro plano da paisagem, isso para que os elementos que depois você continue adicionando fiquem em meio das duas camadas e de um aspecto mais realista a animação

Crie uma nova camada no meio das duas anteriormente criadas e coloque as nuvens da paisagem

Vá para Modificar>Converter em símbolo e aperte Ok. Não esqueça  sempre de nomear os clipe de filme novos que criar e o nome de instancia

Faça dois cliques no clipe de filme nuvens e crie um novo clipe de filme com o nome de nuvens_int

Vá no frame 100 e insira um quadro, seguidamente crie uma interpolação de movimento para que as nuvens se movimentem de um lado para outro

Você pode observar que numa nova camada foi adicionada uma ação para deter o movimento assim que as nuvens cheguem ao frame 100

Para criar a movimentação do sol siga os mesmo passos das nuvens, não esqueça criar um clipe de filme e dentro dele criar outro clipe de filme com o nome sol_int para adicionar a interpolação de movimento.

Você pode adicionar mais efeitos de movimento ao sol tais como os raios do sol e outros efeitos no céu

Crie um botão e coloque uma ação para que sua animação fique interativa!

Gostou deste conteúdo?




 

 

Melissa Campuzano

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.

ENG DTP & Multimídia - Logo

 

 

ENVIE SEU CONTATO e SEUS COMENTÁRIOS


LinkedIn da ENG DTP Multimídia
     Facebook da ENG DTP Multimídia     Instagram da ENG DTP Multimídia

 Jornad Graphic Design