Ir para conteúdo
  • Cadastre-se

[Tutorial] Botões Flash com sons


JC -

Posts recomendados

Tutorial o passo a passo de como criar um botão simples com sombra e com dois sons. Você também vai aprender:

 

1º Como desenhar um botão,

2º Como usar o painel Color Mixer,

3º Como aplicar o efeito de sombra sobre o botão,

4º Como importar um som em flash e muito mais.

5º Como colocar link em botão em Flash

 

Etapa 1:

 

 

Inicie o flash. Defina a largura do filme, a 250 e a altura do filme de 150. Selecione branco como cor de fundo e clique em OK.

 

 

Etapa 2:

 

Selcione a Rectangle Tool ® (você terá que criar um botão com os cantos arredondados)... Depois disso, de selecionar o retângulo um configurações do painel serão exibidos. Nas configurações do Painel, na Opção "Rectangle Settings / Corner radius", coloque o valor de 4 pontos. Veja a imagem abaixo.

 

 

HWjJ5.gif

MRlop.gif

 

 

Etapa 3:

 

 

Na parte Cores do painel Ferramentas, bloqueie a cor da borda, clicando no ícone do lápis com a linha vermelha na diagonal. Escolha a cor de preenchimento "#7EBFD1" cor e desenhe um "retângulo" no tamanho de 120 x 40px. Veja a imagem abaixo.

 

 

YZxC5.gif

 

 

Etapa 4:

 

Com o retângulo ainda selecionado, vá para o Painel Align (Ctrl + K) e faça o seguinte no painel align:

 

1. Certifique-se que a Align / Distribute botão para estágio (palco) esteja selecionado,

2. Clique no botão Alinhar ao centro horizontal e

3. Clique no botão Alinhar ao centro vertical.

 

 

Nlcls.gif

Agora você tem um botão alinhado com o fundo.

 

 

Etapa 5:

 

 

Depois disso, enquanto o retângulo ainda selecionado, vá para o Color Mixer Panel (Wiindow> Color Mixer - tecla de atalho: Shift + F9). Em seguida, escolha as seguintes opções:

 

1. Clique no ícone do balde de tinta com a cor de preenchimento selecionada.

2. No menu Tipo, escolha a opção Linear.

3. Clique sobre a cor interna do preenchimento radial (o quadrado do lado esquerdo da barra de gradiente).

4. Digite seu código de cor hexadecimal no campo apropriado: #7EBFD1.

5. Set # 9EC8D4 cor AS para o quadrado certo,

6. Defina a propriedade Alpha para esta cor para 75%.

 

KfJdu.gif

 

Agora, você tem isso:

 

aDx7z.gif

 

 

Etapa 6:

 

 

Pegue a ferramenta de texto (A) e vá para o Painel de Propriedades abaixo do palco. Em seguida, escolha as seguintes opções:

 

1. Selecione um campo de texto estático.

2. Selecione uma fonte Cooper Black

3. Escolher 20 como tamanho da fonte.

4. Selecione a cor branca.

5. Como a opção de renderização, selecione Anti-alias para facilitar a leitura.

 

bY3m0.gif

 

 

Etapa 7:

 

 

Digite "submit " no botão e repita o passo 4. Agora você tem isso:

 

pOcv8.gif

 

 

Etapa 8:

 

 

Pegue a ferramenta de seleção (V), clique uma vez sobre o texto e sobre o retângulo para selecioná-los e pressione a tecla F8 (Converter em símbolo) para converter este texto e retângulo em um botão. Veja a imagem abaixo.

 

kLt4o.gif

 

 

Etapa 9:

 

 

Com o novo botão ainda selecionado, vá para o Painel de Propriedades (Ctrl + F3) abaixo do palco. E faça o seguinte no painel Propriedades:

 

1. Selecione Filtros (Filters), clique no ícone Adicionar filtrar e selecionar o filtro Sombra do menu (Drop Shadow filter).

2. Coloque ambos os Blur X e Y para 15 opções.

3. Força Ponha (Strength) a 74%.

4. Selecione de baixa qualidade (Low Quality).

5. Escolha a cor para preto (black color).

6. Ângulo deve ser ajustado para 45 (Angle).

7. Defina a distância para 5 (Distance).

 

bmuQr.gif

 

 

Agora, você tem isso:

 

K1Kq6.gif

 

 

Etapa 10:

 

 

Pesquisar na Internet ou em algum lugar, dois arquivos de som para ser usado neste tutorial.

 

 

Etapa 11:

 

 

Volte no Flash, escolha Arquivo (File)> Importar (Import)> Importar para biblioteca (Impor to Library). Na janela do explorador de arquivos que aparece, encontre os dois sons e aperte e segure em Shift e clique nos dois sons para selecioná-los. Em seguida, clique em Abrir. Agora, se você abrir o seu (tecla de atalho: Ctrl + L), Biblioteca, você vai ver seus arquivos de som que você acabou de importado. Veja a imagem abaixo.

 

WHxTS.gif

 

 

Etapa 12:

 

 

Dê um duplo clique no movieclip no palco com a ferramenta Selection (V). Agora você deve estar dentro do botão.

 

oelwR.gif

 

 

Etapa 13:

 

 

Botão direito do mouse sobre o quadro "Over" e selecione Inserir quadro-chave no menu de contexto. Veja a imagem abaixo.

 

cv6en.gif

 

 

Depois disso, enquanto o botão for selecionado ainda, vá para o Painel Color Mixer (tecla de atalho: Shift + F9) e faça o seguinte:

 

1. Clique sobre a cor interna do preenchimento radial (o quadrado do lado esquerdo da barra de gradiente).

2. Defina a propriedade Alpha para esta cor para 45%.

 

 

Etapa 14:

 

 

Botão direito do mouse sobre o frame "Down" e selecione Inserir quadro-chave no menu de contexto. Então, vá novamente para o painel Color Mixer (tecla de atalho: Shift + F9) e faça o seguinte:

 

1. Selecione o quadrado da direita e defina a propriedade Alpha para 30%.

 

 

Etapa 15:

 

 

Crie uma nova camada acima da camada 1 e nomeá-la de som.

 

sj22m.gif

 

 

Etapa 16:

 

 

Botão direito do mouse sobre o frame "Over" da camada de som e selecione Insert Keyframe no menu de contexto.

 

QHp1Z.gif

 

 

Etapa 17:

 

 

Enquanto você ainda estiver no frame "Over", usando a técnica de "arrastar e soltar", mova o primeiro som da biblioteca para o palco.

 

 

Etapa 18:

 

 

Botão direito do mouse sobre o frame "Over" da camada de som e selecione Insert Keyframe no menu de contexto.

 

XIl4G.gif

 

 

Etapa 19:

 

 

Enquanto você ainda estiver no frame "Down", utilizando a técnica de "arrastar e soltar" novamente, mova o segundo som da biblioteca para o palco.

 

Frqv7.gif

 

 

Etapa 20:

 

Volte à cena principal (scene1) e aperte F9, ira abrir uma janela:

 

vpORC.png

 

 

Nela você ira colocar o Codigo abaixo para "linkar" colocar um link no botão.

 

O conteúdo está oculto, favor efetuar login ou se cadastrar!

 

onde tem LINK_AKI você deve alterar e colocar o link onde você quer que o botão te leve ao clicar nele!

Ex:

O conteúdo está oculto, favor efetuar login ou se cadastrar!

ou

O conteúdo está oculto, favor efetuar login ou se cadastrar!

 

Obs: se você quiser que o botão abra o link em outra pagina modifique o codigo desse jeito abaixo:

O conteúdo está oculto, favor efetuar login ou se cadastrar!

 

Creditos:flashfridge

Edição e tradução eu IIJCII :D

Link para o comentário
Compartilhar em outros sites


Muito bom mesmo, eu quebrava a cabeça para fazer esses botões, agora você mostrou um jeito bem mais facil, obrigado mano ! (:

Caso tenha alguma sugestão para aplicativos, por favor envie por MP.

 WhatsApp: 22 98156-2591 

L2JDREAM PROJECT

Link para o comentário
Compartilhar em outros sites





×
×
  • Criar Novo...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.