Atendimento via WhatsApp Atendimento via WhatsApp

Blog Tecnológico

Interatividade no Animate

Melissa Campuzano • 21 mar 2017 • Adobe Animate

Interatividade no Animate

Um dos desafios maiores na criação de um jogo é o interativo. Para os criadores de scripts e tudo aquilo que não se vê no jogo, o maior desafio é criar animações interativas e associar uma ação com um botão e ainda fazer que ela funcione corretamente e não precise ser explicada ao usuario, para isso é logico você vai precisar aprender noções basicas de interatividade e outros conceitos associados à parte técnica do software.

Mas hoje trouxe o básico para você entender como funcionam os clipes de filme no Animate CC e as ações associadas a botões e como você pode fazer algo acontecer adicionando um código à Linha do Tempo e inserir os códigos nos mesmos quadros que os botões.

Veja como a continuação:

Crie um novo arquivo do Animate CC

Crie camadas para o personagem e outra para a parte interativa.

Na camada do personagem crie um clipe de filme e dentro dele adicione movimento.

Na Cena 1 coloque uma Ação (STOP  no Frame 60) para que a animação seja aleatória somente nesse espaço de frame que você determinou que funcione.

Na camada de interatividade adicione a linha por onde  passara o rato ou o movimento que deseja adicionar, onde existira a interatividade do jogo, esta é a parte mais importante da animação.

Inclua os elementos e crie um clipe de filme, dentro desse clipe de filme você tem que criar varias camadas, a criatividade agora é com você. Neste exemplo existem quatro camadas. A primeira que vai por baixo das outras é o controle que ao mesmo tempo é um botão, ao entrar nele ele tem som ao momento que usuário clicar nele.

Seguidamente existe outro botão que é o espaço onde o usuário deve clicar para pegar o rato ou a comida do animal, este botão só fica ativo quando o rato (que é um clipe de filme) que se movimenta ao longo do controle passa pelo espaço do botão. Portanto esse botão deve ter uma ação. A ação dele é (gotoAndStop).  

Dito botão tem um som e quando o usuário clica nele a animação do rato se detem.

Agora na Cena 1 iremos adicionar um botão para que ele indique ir ao seguinte nível ou fase da animação.

Dentro do botão é possível mudar as cores quando se clica nele ou apenas se encosta no botão, numa nova camada do botão você pode adicionar um som.

Na Cena 1 determine o tempo pelo qual o botão ira a aparecer no palco, e selecionando o botão adicione uma ação ao botão (gotoAndPlay) e mude para 61 para que a animação continue correndo .

Você pode adicionar novas camadas com personagens ou até uma tela que indique que o usuário passou com êxito o primeiro nível e vai para o próximo.

Veja que dentro dele existe outro clipe de filme onde o personagem fica em movimento

Numa nova camada na Cena 1 adicione o segundo personagem e crie outro clipe de filme e dentro dele adicione movimento.

Na camada da interatividade crie um clipe de filme com os elementos dentro

Coloque um stop no final desse clipe de filme na Cena 1

Adicione um botão com a seguinte ação

Crie novas camadas com o respectivo clipe de filme com movimento dentro.

Na Cena 1 crie as camadas do seguinte nível com o mesmos passos das outras duas, cada uma sendo um clipe de filme e com os respectivos Stop neste caso no Frame 230.

No frame 220 do botão adicione a ação seguinte

E a animação irá a passar ao seguinte nível com o respectivo clipe de filme

Para fechar com broche de ouro o ultimo clipe de filme com som. Não esqueça o stop no final !

Pode adicionar um botão para reiniciar o jogo com a seguinte ação.

Agora teste a animação com os respectivos botões e ações, veja que cada botão tem um som. A ideia do jogo é pegar a comidinha quando ela passa no meio para que ela se detenha.

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