Blog Tecnológico

Banner Rotativo HTML5 + Actions

Melissa Campuzano • 13 mar 2017

Crie um novo documento HTML5 no Animate CC



Configure o tamanho do palco para 680x300px



Crie uma nova camada onde irá importar a primeira imagem e renomeei como Imagem 1



Crie um Quadro Chave para o inicio e termino onde devera aparecer a imagem. Neste caso inicia no Frame 1 e termina no Frame 50, não esqueça que essa imagem deve ser um Clipe de Filme para poder adicionar os efeitos



Agora crie uma nova camada onde irá criar uma máscara de camada. Para isso pegue a Ferramenta retângulo e crie uma figura parecida a essa que esta na imagem, a cor não importa muito, pois essa forma só irá servir como uma máscara que ira mostrar ou esconder partes da imagem segundo você configure a animação.



Converta esse retângulo em um Clipe de Filme e crie um Quadro Chave no Frame 40, nesse quadro você vai modificar o tamanho do retângulo de maneira que cubra todo o palco.







Seguidamente Crie uma Interpolação Clássica na camada de Máscara 1.



Agora no Frame 1 da Imagem, no painel Propriedades>Efeitos de Cor selecione o Efeito Alpha ao 0% e no Frame 50 coloque o no 100% e Crie a Interpolação Clássica





Agora crie a mascara, é só selecionar a camada onde foi criado o retângulo, pressionar o botão direito do mouse e selecionar Máscara.





Na camada Imagem  1 clique no Frame 110 e crie um Quadro, isso para que a imagem permaneça até atingir esse frame.



Crie uma nova camada e coloque a Imagem 2 no Frame 70.



Converta ele em um Clipe de Filme e coloque o mesmo efeito alpha ao 0% no começo e aos 100% no Frame 120 e Crie a Interpolação Clássica.







Numa camada por cima crie o mesmo retângulo para que funcione como uma máscara.



Na camada Imagem 2 clique no Frame 180 e crie um Quadro.



Faça o mesmo procedimento com quantas imagens for preciso. Para a terceira imagem comece no Frame 140.

Logo após crie outra camada para adicionar os botões. Converta cada bolinha num Botão e configure as cores nas opções de Cima, Sobre, Para e Ocorrência.
Neste caso são três botões pelas três imagens.





Crie outra camada para o botão “Saiba Mais” e coloque-o no Frame 190 para ele aparecer assim que a ultima imagem do banner aparecer.



Em outra camada pode criar uma transição da marca de seu banner.



Agora configure os códigos, selecione o primeiro botão e aperte F9.

Vá na opção Snippets de código do painel Actions > HTML5 Canvas>Navegação na Linha do Templo> Clique para ir até o quadro e reproduzir.



Ao ser inserido o código com dois cliques substitua o número 5 no código abaixo pelo número de quadro para o qual você gostaria que o indicador de reprodução se movesse quando se clica na instância do símbolo, no caso do Botão 1 seria 1 e segundo a linha do tempo neste exemplo o Botão 2 > Frame 70 e Botão 3 >Frame 140.



Adicione o ultimo código ao Botão de “Saiba Mais” selecione ele e aperte F9

Vá para Snippets de código do Painel Actions>Ações>Clique para ir para a página da web e no código substitua o site da Adobe pelo site onde deseja direcionar o botão.






Agora publique sua animação em Arquivo>Publicar em Configurações de Publicação selecione a opção Pacote OAM  aperte OK e depois Publicar.



Leve esse arquivo OAM no Dreamweaver e para poder publicar clique em Inserir >HTML>Composição Animada e localize o arquivo OAM que publicou no Animate.



Teste seu banner interativo em seu site !





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