[Tutorial] Como criar um Menu em Flash

Olá,
Você que tem duvidas de como criar um menu em flash para seu site/blog, hoje vamos ensinar a como criar um. Este tutorial é meio longo então preste bem atenção em cada parte. Vamos organizar nosso Tutorial pelas seguintes etapas:

Programas necessário;
Criar as imagem do Menu;
Cortar as imagens no formato do Menu;
Hospedagem das imagem;
Adicionar as imagens ao Dreamweaver;
Gerar Código do menu;
Colocar o menu no blog;

Para começar nossa criação do menu vamos prescisar dos seguintes programas:

Adobe Photoshop
Dreamveaver

Após ter baixado e instalado esses programas, vamos utilizar primeiramente o Adobe Photoshop. Abra ele e faça como está na imagem abaixo:



As indicações em vermelho são as opções que devem ser posto iguais ao da imagem e as indicações em amarelo são as opções em que você pode personalizar a gosto.
No caso da primeira indicação amarela, você pode por um titulo pra sua imagem ou deixar do jeito que esta. A segunda você vai por a largura que sua imagem vai ter em tamanho 'px'. E a terceira indicação você vai por altura que sua imagem deve ter em tamanho 'px'. Depois disso é só clicar em OK.

Caso você já tenha um conhecimento básico desse programa, já pode ir fazendo a sua imagem, caso não tenha observe como fazer uma, lembrando que pelo menos um conhecimento básico do paint.

Iremos precisar de 2 imagem do menu, uma será com os botão de uma cor e a outra com o botão de outra cor, ou seja, a primeira imagem vai ser do menu normal, e a segunda vai ser de quando a pessoa passar o mouse em cima do botão ele mudar a imagem do botão 1 para o botão 2.
O efeito que queremos obter é mais ou menos este:

Imagem 1:

Imagem 2:


Se você ainda não tem muita experiência nesse programa e quiser usar as configurações da personalização que usei observe as imagens abaixo:

Para abrir a imagem abaixo basta dar duplo clique na camada desejada.

1- Personalização do fundo do menu:






Agora vamos desenhar os botão, para isso faça o seguinte:

Selecione a opção Retangulo Arredondado depois basta apenas desenhar ele na imagem.
Para deixar o Botão da quela cor e com uma borda faça o seguintes:

2- Personalização do botão do menu:




Agora vamos escrever o texto no botão, para isso faça:



A fonte utilizada foi a Burbank mais pode ser qualquer outra de sua preferência.

3- Personalização da letra usada no botão do menu:






Continuação em: https://playforumonline.forumeiros.com/t6-tutorial-como-criar-um-menu-em-flash-parte-2

Agora vamos ter que cortar os botões das 2 imagens de modo que o botão que você cortar da primeira imagem seja do mesmo tamanho da outra imagem. Observe um exemplo:

Se o botão 'Inicio' da primeira imagem for cortado com 120px de largura, o botão 'Inicio' da segunda imagem também deverá ter 120px de largura.
Olhe um exemplo em foto:


Agora veja as instruções de como realizar este procedimento:

1- Clique no botão "Corte Demarcado".


2- Clique em Arquivo Abrir.


3- Selecione as 2 imagem do menu e clique em "Abrir".


4- Observe que foi aberto as 2 imagens, uma em cada aba.


5- Vamos ter que colocar estas imagens em uma aba só.


6- Para isto segure e arraste a imagem de uma das abas para a outra.


7- Observe que na área 'Camadas' estão as 2 imagens.


8- Então utilizando a ferramenta de "Corte Demarcado" trace o botão que deseja cortar.


9- Clique em Arquivo Salvar Como Coloque formato PNG E salve sua imagem.


10- Agora desabilite a 1º Imagem clicando no olho que tem ao lado dela.


11- Observe que a outra imagem irá aparecer.


12- Clique em Arquivo Salvar Como Coloque formato PNG E salve sua imagem.


13- Clique no lugar onde esta mostrando a imagem e anote a largura dela em algum lugar para não esquecer.

14- Aperte Ctrl + Alt + Z e veja que a imagem padrão ira voltar.

15- Vá na pasta em que os menu estão salvos e Clique com o botão Direito em cima de uma delas depois vá em Propriedades.


16- Clique em Detalhes e veja a largura da sua imagem.


17- Abra a calculadora e Coloque a largura da imagem que acabamos de ver e subtraia aquela largura que falei para anotarmos, que é a largura do botão.


18- Selecione a ferramenta "Corte Demarcado" e nas ferramenta lá de cima, coloque na largura o resultado que deu na conta, e na altura, coloque a altura do seu menu que é possivel ver quando você clica na mesma área da imagem:




19-


20- Aperte enter para cortar. Após isso só ficara a imagem que você cortou.


21- Clique em apagar nas configuração do corte.


22- Selecione o novo botão que você deseja cortar.


23- Corte-o.


Agora é so você fazer o mesmo procedimento com os outros botões até acabar.
Quando acabar, hospede-os no site da tinypic.com Basta enviar uma imagem de cada vez e copie o Direct Link (Link Direto) de todas as imagem, e anote-os no bloco de notas.

Esse Tutorial continua na parte 3, para ver clique neste link: https://playforumonline.forumeiros.com/t7-tutorial-como-criar-um-menu-em-flash-parte-3#12

Continuação.
Parte 3.

1- Abra o Dreamweaver;
2- Crie um novo Documento HTML.




3- Clique em Criar.


4- Vamos abrir a janela que nos da acesso a criar o menu em flash.


5- Na indicação Vermelha você vai por o nome do botão. Na indicação Azul você vai por o link da primeira imagem do botão, que é a que vai ser exibida quando o mouse NÃO estiver sobre o botão. Na indicação Rosa você vai por o link da imagem que irá aparecer quando o mouse FOR POSTO sobre o botão.

(Na imagem está a seguinte frase: Nome do botão (Aqui no caso Inicio) | Troque a frase do parenteses por "Aqui no caso é Contato". | Isto foi um erro de edição.
6- Agora é só fazer o procedimento 4 & 5 novamente para os outros botões.

7- Quando terminar de fazer isto, clique na aba Design.


8- Agora clique em cima do primeiro botão do menu e lá em baixo vai aparecer as propriedades do botão. Onde há a indicação Vermelha você vai apagar o # e ira por o link do site que a pessoa vai quando clicar em cima da quele botão.

9- Faça isso com o restante dos botão.

10- Clique na aba Code e copie o código que tem lá. Agora basta adicionar no seu blog/site.