Como criar botões com o Adobe Animate

Pesquisar

Última atualização em 07/05/2021

Os botões no Animate (anteriormente Flash Professional) são símbolos que contêm quatro quadros. Cada quadro de um símbolo de botão representa um estado diferente para o botão: Acima, Sobre, Abaixo e Ocorrência. Esses estados determinam como um botão se comporta visualmente quando o mouse for passado sobre ele ou quando o usuário clica no botão. Este documento explica como criar botões básicos e avançados.

Criar um botão básico

Selecione Inserir > Novo símbolo ou pressione Control+F8 (Windows) ou Command+F8 (Macintosh).
Nota: No Flash 3 e anteriores, cancela a seleção de tudo no Placo e escolha Inserir > Criar símbolo.
Na caixa de diálogo Propriedades do símbolo, insira um nome para o novo símbolo de botão e escolha Botão como a Opção de comportamento. Clique em OK.

O Flash alterna para o modo de edição de símbolo. O cabeçalho Linha do tempo é alterado para exibir quatro quadros consecutivos rotulados Acima, Sobre, Abaixo e Ocorrência. O primeiro quadro, Para cima, é um quadro-chave em branco.
Para criar a imagem do botão do estado Acima, use as ferramentas de desenho, importe um gráfico ou coloque uma instância de outro símbolo no Palco. Você pode usar um clipe de filme ou símbolo gráfico em um botão. No entanto, você não pode usar outro botão em um botão. Use símbolos de clipe de filme se desejar criar um botão animado.
Selecione o segundo quadro rotulado Sobre e escolha Inserir > Quadro-chave. A imagem do botão do primeiro quadro aparece no Palco.
Altere a imagem do botão para o estado Sobre. Repita as etapas 4 e 5 para os quadros Abaixo e Ocorrência.

Nota:
O quadro Ocorrência não é visível em Estágio na reprodução, mas define a área do botão que responde quando clicado. Certifique-se de que o gráfico para o quadro Ocorrência seja uma área sólida grande o suficiente para abranger todos os elementos gráficos dos quadros Acima, Abaixo e Sobre. Ele também pode ser maior do que o botão visível. Se você não especificar um quadro Ocorrência, os objetos no estado Acima serão usados como quadro Ocorrência.
Depois de definir as imagens dos quatro estados de botão, escolha Editar > Editar filme para sair do modo de Edição de símbolo.
Abra a janela Biblioteca escolhendo Janela > Biblioteca. Localize o botão na janela Biblioteca e então arraste o símbolo de botão para fora da biblioteca para o Palco. Esta etapa cria uma instância do botão no filme.

Para obter informações sobre como atribuir ações à instância do botão, consulte a documentação que se aplica à versão do Animate que você estiver usando. A documentação segue abaixo:

Atribuir uma ação simples à um botão (Flash 5)

No modo Editar filme, selecione a instância do botão criada na Etapa 7 acima.
Escolha Janela > Ações para exibir o painel Ações.
Na lista Caixa de ferramentas no lado esquerdo do painel, clique na categoria Ações básicas para exibir as ações básicas.
Para atribuir uma imagem execute uma das ações a seguir:
- Clique duas vezes em uma ação na categoria Ações básicas.
- Arraste uma ação da categoria Ações básicas na esquerda para a lista Ações no lado direito do painel.
- Clique no botão Adicionar (+) e escolha uma ação no menu suspenso.
- Use o atalho de teclado.
Se a ação escolhida tiver quaisquer parâmetros associados, esses parâmetros são exibidos no painel Parâmetros na parte inferior do painel Ações. (Se o painel Parâmetros não estiver visível, clique no triângulo pequeno no canto inferior do painel). Escolha ou digite os parâmetros adequados para aquela ação. Por exemplo, a ação gotoAndPlay abaixo mostrada contém três parâmetros: Cena, Tipo, Quadro, e uma opção para Ir para reproduzir.

Atribuir uma ação simples à um botão (Flash 4 e anterior)

No modo Editar filme, selecione a instância do botão criada na Etapa 7 acima.
Certifique-se de que Ativar botões no menu Controle esteja desmarcado.
Clique duas vezes no botão para abrir a caixa de diálogo Propriedades da instância.
Nota: No Flash 2, essa caixa de diálogo Propriedades do link: caixa de diálogo Botão.
Atribua as ações selecionando a guia Ação na caixa de diálogo Propriedades de instância. A seguir, clique no botão de adição (+) e clique duas vezes na ação apropriada.

Nota:
No Flash 2 atribua a ação usando o menu suspenso Ação em Propriedades do link: caixa de diálogo Botão. Somente uma ação pode ser atribuída ao botão.
Certifique-se de que os botões Ativar estejam novamente ativados (uma marca de seleção está lado deles) no menu Controle.
Se a ação selecionada tiver quaisquer parâmetros associados, esses parâmetros são exibidos no painel Parâmetros no lado direito do painel Ações. Escolha ou digite os parâmetros adequados para aquela ação.

Criar botões avançados

Depois que você dominou um botão simples, tente criar botões mais complexos do Animate. Você pode criar botões invisíveis, botões com estados animados e botões com efeitos de sobreposição.

Os estados da ocorrência são importantes para compreender a criação de um botão complexo. A forma e a área do botão representam a área ativa do botão.Para experimentar com o estado Ocorrência, faça o seguinte:

Insira um botão das Bibliotecas comuns no Palco. Edite o botão.
Realce o quadro no estado Ocorrência do botão e insira um quadro-chave. Teste este comportamento em um filme.
Redimensione o objeto no estado Ocorrência drasticamente e faça um teste.
Exclua o quadro-chave no estado Ocorrência e teste o botão.
Observe o efeito em seu cursor de botão, e os estados Acima, Sobre e Abaixo que você vê quando o botão estiver ativado.

Botões invisíveis

Você pode manter os estados Acima, Sobre e Abaixo de um botão vazios. Se estes estados estiverem vazios, defina o estado Ocorrência para que ele contenha conteúdo.

Quando o estado Acima do botão estiver vazio ou invisível, o botão é representado no Palco por uma forma azul. A forma é equivalente ao conteúdo no próximo quadro-chave dentro do botão. Esta forma azul não é visível em seu filme final.

Botões com estados animados

Para criar botões animados no Animate, coloque um clipe de filme no estado do botão que você estiver animando.

Crie um clipe de filme para cada estado do botão que você desejar que esteja animado.
Crie o botão.
Coloque os clipes de filme nos estados de botão para animar.
Coloque o botão no Palco.
Nota: Os clipes de filme não podem ser testados no editor do Animate. Selecione Controle > Testar o filme ou exporte como um arquivo SWF para testá-lo.

Uma sobreposição em uma área do filme afeta outra área do filme

Para criar esse efeito, mova os elementos do estado Ocorrência de uma área diferente do Palco invés dos elementos no estado Sobre do botão. Esse método funciona para efeitos de sobreposição simples. A área ativa do botão está localizada em uma área diferente no Palco do que o efeito de sobreposição.

Informações adicionais

Uma boa maneira de saber mais sobre botões e sua criação é a de estudar os botões incluídos como amostras com o Animate. Na versão 5, esses botões de amostra estão disponíveis em Windows > Bibliotecas comuns > menu Botões. Se você usar a versão 4, poderá acessar esses botões escolhendo Bibliotecas > Botões. Na versão 2, as bibliotecas dos botões de amostra estão acessíveis no menu de Extras.

Uma descrição de sobre como criar um botão também está disponível nas Lições que vêm com a versão 5. Escolha Ajuda > Lições > 06 botões de dentro do Flash para acessar esta lição.