Como fazer um botão rollover no Adobe Flash CS5

Escrito por william harrel | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer um botão rollover no Adobe Flash CS5
Crie um botão Rollover no Flash (Photos.com/Photos.com/Getty Images)

Os botões rollover alteram a aparência quando um usuário passa o cursor do mouse por cima deles. Você pode criar uma animação rollover simples no Flash CS5, um conhecido aplicativo, editando os estados do mouse do símbolo "Button" (botão). Crie o botão com as ferramentas de desenho e texto do Flash, converta-o para um símbolo Button, e altere a aparência do mesmo no estado "Over".

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Adobe Flash Professional CS3 ou posterior

Lista completaMinimizar

Instruções

  1. 1

    Abra o clipe do Flash (formato FLA) no qual você quer criar um botão rollover, ou crie um projeto novo clicando no menu "File" (Arquivo) e, depois, em "New" (Novo). Isso abrirá a caixa de diálogo "New Document" (Novo documento). Selecione "ActionScript 3.0" na lista "Type" (Tipo). Digite a largura do novo clipe no campo "Width" e a altura no campo "Height", e clique em OK.

  2. 2

    Selecione a ferramenta "Rectangle" (Retângulo) no painel de ferramentas.

  3. 3

    Na seção "Fill and Stroke" (Recheio e traço) do painel de propriedades, clique no seletor de cores (o ícone de lápis) e selecione a cor da borda do seu botão.

  4. 4

    Na mesma seção, clique no seletor de recheio (o ícone de lata de tinta) e escolha a cor de recheio do seu botão.

  5. 5

    Ajuste o controle deslizante "Stroke" (Traço) para estabelecer o peso, ou grossura, da borda.

  6. 6

    Na seção "Rectangle Options" (Opções do retângulo) do painel de propriedades, ajuste o controle deslizante para determinar a redondeza dos cantos do botão. O valor 25 criará um lindo botão com forma oval.

  7. 7

    Desenhe no cenário um retângulo do tamanho do botão. Use as propriedades "Width" e "Height" da seção "Position and Size" (Posição e tamanho) para estabelecer as dimensões exatas.

  8. 8

    Selecione a ferramenta "Text" (Texto) no painel de ferramentas.

  9. 9

    No painel de propriedades, estabeleça a fonte, cor e tamanho do texto do botão.

  10. 10

    Clique no retângulo no cenário e digite o texto do seu botão. Em seguida, selecione a etiqueta e o botão.

  11. 11

    Clique no retângulo no cenário e digite o texto do seu botão. Em seguida, selecione a etiqueta e o botão. Para fazer isso, clique em um dos elementos, mantenha pressionada a tecla SHIFT e clique no outro.

  12. 12

    Clique no menu "Window" (Janela) e selecione "Align" (Alinhar) para abrir o painel de alinhamento. Clique no botão "Align Horizontal Center" (Centralizar horizontalmente) e depois no botão "Align Vertical Center" (Centralizar verticalmente). Isso alinhará a etiqueta no centro do retângulo.

  13. 13

    Clique com o botão direito nos objetos selecionados e selecione "Convert to Symbol" (Converter a símbolo). Uma caixa de diálogo com o mesmo nome será exibida. Dê ao símbolo um nome no campo "Name", escolha "Button" no menu "Type" e clique em "OK". O Flash combinará os dois objetos e os converterá em um botão.

  14. 14

    Clique com o botão direito no botão e escolha "Edit" (Editar) no menu pop-up. Isso colocará o símbolo no modo de edição.

  15. 15

    No painel Timeline (linha do tempo), clique com o botão direito no frame "Over" e escolha "Insert Keyframe" (inserir quadro-chave). Você poderá editar aqui o seu botão para que a aparência seja alterada no estado Over (ao passar o cursor do mouse). Por exemplo, poderá alterar a cor do retângulo, do texto ou de ambas coisas. Poderá também aumentar ou diminuir o tamanho do botão e movê-lo ligeiramente. Quaisquer alterações que você fizer aqui serão exibidas quando o usuário passar o cursor do mouse por cima do botão.

  16. 16

    Faça as alterações desejadas ao seu botão e clique em "Scene 1" (Cena 1) no canto superior direito da janela de documentos para voltar para o cenário principal.

  17. 17

    Clique no menu "Control" (Controle) e selecione "Enable Simple Buttons" (Habilitar botões simples). Passe o cursor do mouse por cima do botão para ver a animação rollover.

Dicas & Advertências

  • Você pode também adicionar um estado "Down" ao seu botão, para que a aparência mude quando o usuário clicar nele. Adicione um quadro-chave no quadro "Down" (Baixo) da linha do tempo do símbolo e faça as alterações desejadas ao retângulo do botão e à etiqueta.
  • Você pode adicionar um bisel, uma sombra ou outros efeitos especiais na seção "Filters" (Filtros) do painel de propriedades. Selecione o símbolo, clique no botão "Add Filter" (Adicionar filtro) do canto inferior esquerdo da seção "Filters" e escolha o efeito desejado do menu pop-up.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível