Embora o design do site é uma prerrogativa dos profissionais, ainda há muita coisa que qualquer um poderia fazer se ele sabia como. Fazendo um menu para um site em flash é uma dessas coisas. Para fazer um, você precisa ter uma ferramenta e conhecer o procedimento. Sua ferramenta é Photoshop (o meu é a versão CS3), eo procedimento é descrito em todos os detalhes no tutorial abaixo. Eu tentei fazer o simples, de modo que mesmo que é a sua primeira vez usando o Photoshop, você não se assustou. Cada etapa tem screenshots para torná-lo ainda mais claro. Basta ter em mente que, se você tiver uma versão do Photoshop, a interface pode ser ligeiramente diferente.
Se você seguir cada uma das etapas listadas cuidadosamente, como resultado, você vai ter um menu flash assim:
Passo 1 : criar uma forma
Abra o Photoshop e crie um novo documento (Ctrl + N) com o tamanho de 600 × 300 pixels. Defina uma cor para o fundo: preto dá um bom contraste, para que você possa usá-lo, a menos que sua cor do menu vai ser preto.
Crie uma nova camada (Ctrl + Shift + N) e selecione a ferramenta retângulo arredondado (U) .
Abra o Photoshop e crie um novo documento (Ctrl + N) com o tamanho de 600 × 300 pixels. Defina uma cor para o fundo: preto dá um bom contraste, para que você possa usá-lo, a menos que sua cor do menu vai ser preto.
Crie uma nova camada (Ctrl + Shift + N) e selecione a ferramenta retângulo arredondado (U) .
Em arredondados configurações ferramenta Retângulo ativar Shape Layers botão e defina Radius: 8px .
Você pode definir um valor de raio diferente de acordo com seu gosto, basta levar algum tempo para experimentar.
Você pode definir um valor de raio diferente de acordo com seu gosto, basta levar algum tempo para experimentar.
Depois que você terminar com as configurações da ferramenta, desenhe um retângulo do tamanho necessário (o meu é 120x45px). Defina a cor. Minas é color: # 25b6b1 . Para alterar a cor clique duas vezes sobre a camada de sua forma de retângulo e escolher a cor que você precisa de paleta.
Passo 2 : adicionando gradiente
Select Camada > Layer Style > Blending Option s e definir todos os valores como mostrado na imagem. Selecione Gradient Overlay e coloque uma marca na caixa ao lado dele.
Select Camada > Layer Style > Blending Option s e definir todos os valores como mostrado na imagem. Selecione Gradient Overlay e coloque uma marca na caixa ao lado dele.
Para alterar a cor clique duas vezes sobre o Gradiente paleta e você verá uma ferramenta de mudança de cor com quatro controles deslizantes (dois na parte superior e dois na inferior). Para definir a cor de cada uma das barras, é preciso clicar duas vezes sobre ela. Por duas barras na parte inferior set color: # 00fff6.
Os controles deslizantes na mudança top Opacidade valor. Faça o cursor ativo e situado opacidade: 0.
Quando você é feito com isso, pressione OK e seu botão ficará mais ou menos assim
Passo 3 : sombra interna
Vá para Camada > Layer Style > Blending Options e selecione curso . Definir Tamanho: 1px , Posição: Outside , Cor: # 02fbf2.
seguida, selecione Inner Shadow e defina a cor: # 003e39 , Opacidade: 84% , Tamanho: 9px .
Vá para Camada > Layer Style > Blending Options e selecione curso . Definir Tamanho: 1px , Posição: Outside , Cor: # 02fbf2.
seguida, selecione Inner Shadow e defina a cor: # 003e39 , Opacidade: 84% , Tamanho: 9px .
O resultado será algo como:
Passo 4 : escova
Crie uma nova camada (Ctrl + Shift + N) e selecione a ferramenta Pincel (B) . Use um Airbrush padrão. Definir color: # 006965 , Diâmetro: 200px.
Crie uma nova camada (Ctrl + Shift + N) e selecione a ferramenta Pincel (B) . Use um Airbrush padrão. Definir color: # 006965 , Diâmetro: 200px.
- Clique em 2 ou 3 vezes na parte superior do seu botão. Quanto mais vezes você clicar a sombra mais intensa que você vai conseguir, então você precisa prestar atenção para o melhor resultado.
- Em seguida, fazer um Ctrl + clique sobre a camada de botão no Layers painel no lado direito da tela para destacar essa camada.
- Após isso, você precisa inverter o destaque clicando Ctrl + Shift + I. Agora pressione Delete.
Passo 5 : transparência
Crie uma nova camada (Ctrl + Shift + N) . Selecione a ferramenta retângulo arredondado (U) com as mesmas configurações como o tempo anterior.Desenhe um objeto retângulo (aproximadamente Tamanho: 115x25px , Cor: # 79fffa ).
seguida, clique em Add Layer Mask no seu Layers painel.
Crie uma nova camada (Ctrl + Shift + N) . Selecione a ferramenta retângulo arredondado (U) com as mesmas configurações como o tempo anterior.Desenhe um objeto retângulo (aproximadamente Tamanho: 115x25px , Cor: # 79fffa ).
seguida, clique em Add Layer Mask no seu Layers painel.
Adicionar Transparência para a camada usando Gradient Tool (G) . Segure a tecla Shift e desenhe uma linha vertical do gradiente do fundo do topo (gradiente de cores: branco + volta ).
Passo 6 : reflexão
Selecione as camadas com deslocamento botão e colocá-los em uma pasta ( Ctrl + L )
Selecione as camadas com deslocamento botão e colocá-los em uma pasta ( Ctrl + L )
Então duplicar este grupo clicando com o botão direito se o seu mouse sobre ele e selecione Grupo Duplicate.
Então você precisa unir todas as camadas em uma única camada. Para fazer isso você precisa para destacar esta pasta e pressione Ctrl + E.
Então você precisa unir todas as camadas em uma única camada. Para fazer isso você precisa para destacar esta pasta e pressione Ctrl + E.
Para olhar melhor o botão precisa ter uma reflexão. Para fazer uma reflexão que você precisa para rodar sua camada duplicada ( Ctrl + T ). Faça um botão direito do mouse no objeto e selecione Girar 180 '
. Coloque a camada como mostrado na imagem
e, como antes, Add Layer Mask e use o Gradient Tool ( Cor: transparente e preto ). Faça a sua sombra parece um pouco como na imagem brincando com opacidade.
Passo 7 : texto
Seu botão está pronto, tudo que você precisa fazer é colocar um texto do seu nome . Selecione Horizontal Type Tool (T), clique sobre o local onde o texto deve ser e digitar seu nome de botão. Prima Ctrl + Enter.
Seu botão está pronto, tudo que você precisa fazer é colocar um texto do seu nome . Selecione Horizontal Type Tool (T), clique sobre o local onde o texto deve ser e digitar seu nome de botão. Prima Ctrl + Enter.
Você também pode adicionar um efeito de sombra para o texto seguinte Camada > Layer Style > Blending Options e selecione Drop Shadow . Definir parâmetros sobre Opacidade: 33% , Tamanho: 5px , color: # 019b95.
Para terminar o seu menu flash que você precisa para fazer cópias de seu botão e colocá-los ao lado do outro. Está feito!
Passo 8 : corte de peças de animação em Flash
Recriar este menu puro in Flash vai exigir dois elementos do botão: o próprio botão e da sombra . Vamos cultura e salvá-los.
Nos Layers seção esconder todos os grupos de botão e deixar apenas um botão. Esconder sua sombra e seu texto. Em seguida, use a ferramenta Croppara cortar o botão. Meu tamanho safra foi de cerca de 132 * 49. E não se esqueça de esconder a camada de fundo preto. Salve a imagem resultante botão usando Arquivo> Salvar para Web e Dispositivos> predefinido: PNG-24> Salvar Tenho guardado como bg_button2.png
Então você precisa para realizar exatamente os mesmos passos para a reflexão do botão. Então, basicamente você precisa ter dois png. arquivos antes de passarmos para o Flash animação: bg_button.png e reflexão.Png
Passo 9 : primeiros passos para o Flash (importação de arquivos e inserção de camadas)
Abra o Adobe Flash CS3 e crie um novo arquivo Flash (ActionScript 2) documento. Você vai precisar de importar dois arquivos de imagem para a biblioteca: bg_button.png e reflexão.Png . Isso pode ser feito usando Arquivo> Importar> Importar para biblioteca ou você pode simplesmente drag'n'drop arquivos na janela da biblioteca.
Drag-n-drop bg_button.png para a área de trabalho e converter este objeto para um clipe de filme . Isso pode ser feito por Rightclick > Converter em Símbolo> Clipe de filme ou você pode simplesmente realçá-la com ferramenta de seleção (seta preta) e pressione F8 . Vamos citar este clip "filme botão inteiro ".
Após o clipe de filme é criado doubleclick a imagem do botão para entrar lo. Você vai ver que na barra de endereços "botão todo" clipe de filme apareceu logo após o " Cena 1 ". Agora teremos de criar clipes de filme para cada um dos objetos do botão "todo" , há três deles: próprio botão , reflexão e texto . Cada clipe de filme deve ter sua própria camada e vamos precisar criar mais duas camadas denominadas "ação" e "área de botão" . Assim eu criei 5 camadas totais com os nomes: botão, reflexão, texto, ação, área de botão.
Passo 10 : a criação de clipes de filme
Por favor, preste atenção que a " Layer 1 " foi renomeado para " botão " e ainda contém a imagem de um botão. Vamos selecionar esta imagem e convertê-la em um filme pressionando F8 . Eu chamei ele " mc_button_back "e está sob o "botão" da camada. Agora você terá que selecionar " reflexão layer ", drag-n-drop Reflection.png da biblioteca de direito sob o botão (você pode usar as teclas de seta para movê-lo mais precisamente). Depois de feito isso pressione F8 e convertê-lo em filme também. Eu chamei ele " mc_reflection ". O próximo passo é adicionar algum texto a um botão. Escolha a opção " texto "camada, selecione ferramenta de texto e inserir algum texto no botão. Você pode facilmente editar o estilo do texto, referindo-se menu Propriedades .
Após essa configuração converter o texto em clipe de filme pressionando F8 . Eu chamei ele "mc_text." Desta forma, temos todas as nossas peças de botão em lugares e sua biblioteca deve ser semelhante a este:
Passo 11 : usando Timeline e definir uma amplitude
O próximo passo será fazer com que o botão de salto e voltar ao pendurar um cursor do mouse sobre ele. Para isso, será necessário usar a Timeline . Vamos ter 10 quadros para o botão para saltar para cima e outro de 10 quadros para voltar para baixo . Destaque os primeiros quadros de texto , reflexão e botão camadas. Pressione o Alt e segurando-o arrastar -los para o 10 quadro da Timeline e solte o botão do mouse. Isso irá copiar os quadros. Repita o procedimento e copiar esses três quadros novos para a 20 quadros.
O próximo passo será definir a amplitude atribuída ao botão de ação jumping. Realce o 10o quadro no âmbito do " botão "da camada. Tenha certeza que você está usando a ferramenta de seleção e definir a posição de um botão no seu ponto mais alto. Em seguida, vá para " reflexão "camada e mova a reflexão um pouco para baixo, usando a seta para baixo ou para movê-lo com a ferramenta de seleção . E absolutamente da mesma forma ajustar o texto a um botão que saltou para cima. Agora, devemos ter um bom botão que está voando acima do solo ea reflexão ligeiramente movido para baixo.
Passo 12 : ações que definem
Destacar a " ação layer ". Clique no primeiro quadro e inserir um quadro-chave . Isso pode ser feito pressionando F6 , ou rightclick> Inserir quadro-chave,ou no manu acima go Inserir > Linha do tempo> Quadro-chave . Em seguida, destacar o 10 quadro e pressione F6. Faça o mesmo para 20 quadros. Em seguida, insira keyframes para os 2 e 11 frames. Você terá algo como isto:
Agora teremos que definir algumas palavras-chave para o nosso script de ação para consulta. Vamos inserir uma ação para o primeiro e 10 do quadro-chave " ação layer ". Isso pode ser feito por destacar um quadro-chave e pressionando F9 , ou você pode usar o botão direito do mouse e escolher a ação a partir do menu drop-down. O que você precisa digitar na janela apareceu é só: stop ();
Não se esqueça de fazer o mesmo para o 10 keyframe! Ok. Estamos quase terminando com a "ação" da camada. Vamos definir os nomes quadro do segundo e 11 frames. Isso é feito por destacar um quadro e olhando para o menu Propriedades . Nomeie o segundo frame " sobre "e 11 " para fora ". Passo 13 : a criação de um botão
Agora vamos acabar com automação. Destacar a " área do botão "camada e escolher a ferramenta Retângulo . Vamos precisar criar um retangular que irá cobrir o nosso botão. (Se ele não deixá-lo, certifique-se de que você tem pelo menos um quadro no " botão "layer) Então converter o retangular para um Button. tenho chamado de " ação do botão "
Agora dê um duplo clique nele e você vai para dentro o botão. Sob Layer 1 segure o primeiro quadro com o botão esquerdo do mouse e arraste-o até o Hitcoluna.
Para sair da edição esta ação você pode clicar em algum lugar fora do retângulo cinza ou clique no " botão inteiro "na barra de navegação. Passo 14 : Configurar animação
Agora, quando você pode ver que o botão é turva . É ok. Em seguida, será necessário inserir um código para essa área botão para tê-lo funcionando. Prima F9ao ter a nossa turva retangular escolhido e insira o seguinte na janela de ação:
on (rollOver)
{
gotoAndPlay ("over");
}
em (rollOut)
{
gotoAndPlay ("fora");
}
Agora nós wiil precisa definir a ação em si. Destacar alguma parte do calendário de três dos nossos objetos de modo que 10 quadro estava no centro da seleção. Vá até Propriedades e escolha o Movimento configuração de Tween.
Passo 15 : Configurar o framerate e espalhando a área do botão
Passo 15 : Configurar o framerate e espalhando a área do botão
O próximo passo será a criação framerate de ter ou botão de salto mais rápido. Isso é feito por um duplo clique no número do quadro atual. Use 31 quadros por segundo. ea última coisa que precisa ser feito para o botão para o trabalho - devemos espalhar a " área do botão "camada de 1 a 20 quadros. Você pode apenas clicar em 20 quadro e pressione F5 para que possa ser feito.
Nosso " botão inteiro "já está pronto! Parabéns! Você pode sair do botão clicando duas vezes fora dela, ou pressionando Cena 1 . Você pode pressionar Ctrl+ Enter para ver o quão bem ele salta!
Passo 16 : mais algumas dicas
Ainda assim, há alguns truques que podemos fazer sobre isso. Eu vou te mostrar alguns deles:
Ao destacar a área de quadros para três objetos que você pode definir a facilidade de parâmetro para o botão para ir mais suave. Configurá-lo para 100 e veja o resultado!
E para ter a nossa animação botão ainda mais sofisticado, podemos fazer o texto mudar a sua cor. Para este efeito, você vai precisar para se referir ao 10quadros do " texto layer ". Selecione o texto com a ferramenta de seleção e vá até o Propriedades seção. Na Cor caixa drop-down escolher Tint e atribuir cor preta para o texto.
Passo 17 : compilar o menu flash todo
Finalmente temos o nosso botão pronto! Agora precisamos clonar ele e compilar todo o menu! Vamos duplicar o nosso botão home clipe de filme para fazer um clipe de filme separado para cada botão.
Em seguida, garantir que o seu lugar atual é Scene 1 , e não o " botão todo " e drag-n-drop botões recém-criada para ter o menu flash completo. Após isso, será necessário ter um filme de texto separado para cada botão. Você já sabe como fazer isso. Basta apagar o original de cada botão, e criar o seu próprio clipe de filme para cada botão.
Seu Flash Menu é agora completa . Agora você pode adicionar outra camada de Cena 1 e desenhe um grande retângulo preto para o fundo e nosso menu é feito!
Aqui você pode conferir a demonstração ao vivo de nosso menu em flash:
