Menu Macromedia

Olá Pessoal

Hoje irei fazer um menu igual ao do site da Macromedia.

Primeiro abriremos um arquivo novo no firework de 380px x 61px.

Usarei como fundo a cor #72828B (Modify/Canvas/CanvasColor).

Dentro deste arquivo criaremos um retângulo de 350px x 39px.

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.onplay.com.br/tutoriais/tuto21.gif&key=bbae27fc876f6ccbfc35bb1ab41f9eaae78cb154a3c87a04e32aeaee3748b154" alt="Imagem Postada" />

Com o retângulo selecionado, em propriedades alteraremos em rectangle roudness para 25.

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.onplay.com.br/tutoriais/tuto22.gif&key=4782ebacee3120754aeaa2ec43a266307f6f975c43fafa31cb319c4b490620fc" alt="Imagem Postada" />

Agora iremos criar o gradiente.

Selecione o retângulo e em propriedade escolha em vez de preenchimento sólido, preenchimento gradiente linear:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.onplay.com.br/tutoriais/tuto23.gif&key=e0e64bd9e74bd753507d7608334879f75dc332f1fa595907ca0a341ede1cd8bc" alt="Imagem Postada" />

Sua imagem irá ficar assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.onplay.com.br/tutoriais/tuto24.jpg&key=14c5e3943f11b20fdd35f2db484931f84da6fe4aa55d91f5b8902cabc460ee0d" alt="Imagem Postada" />

Agora controle o gradiente de modo a ficar na vertical:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.onplay.com.br/tutoriais/tuto25.jpg&key=747eb72fa62ac2c3605ed8950bbc9e6ef9b19bab86d973c47a5800f8c4ad8bcb" alt="Imagem Postada" />

Após fazer isto altere as cores do gradiente coloque uma cor no meio e duas outras nas extremidades.

Eu utilizei as seguintes cores:

Em uma das extremidades - #DCDFED

No meio - #ACA3B2

Na outra extremidade - #FFFFFF

A figura final ficou assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.onplay.com.br/tutoriais/tuto26.jpg&key=aa69b66c101d0e7efd05d03788fa75670630948411e21490bfdd42b031a3f4bc" alt="Imagem Postada" />

Agora digitaremos os textos de cada botão do menu. Após digitar os textos colocaremos uma linha entre eles para separa-los.

Para fazer o efeito do botão criei um retângulo da mesma altura do triângulo do menu, coloquei um gradiente linear na vertical e preenchi ele de branco, todas as três cores do gradiente são brancas, porém as cores das extremidades possuem 50 de opacidade:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.onplay.com.br/tutoriais/tuto27.gif&key=f7fc777a0863908a731c4bcf8d610d4207a6bae6ef07a1f11b7cd54839f59f99" alt="Imagem Postada" />

Coloque o texto sobre a imagem. O resultado final será este:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.onplay.com.br/tutoriais/tuto28.jpg&key=1979f7bb386b0021880b65be5dc3444d20c63d6afac5f5c67f1eb052aa94c8fd" alt="Imagem Postada" />

Selecione o texto e a figura e pressione F8 para transforma-lo em botão. Selecione a opção button, nomei o botão e clique em ok.

Após clique duas vez sobre a imagem. Assim você abrirá a área de alteração do botão. Repare que em cima existem 5 abas.

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.onplay.com.br/tutoriais/tuto29.gif&key=bec579e4333f625309559204a6a31c049abf11c60c777f8a8cca29bbb78f9d75" alt="Imagem Postada" />

Cada uma destas abas corresponde a uma das ações do botão. A última área é a área de seleção do botão. Copie o botão da aba up para todas as outras abas. Retorna a aba up e delete a figura, deixando somente o texto.

Repita esta operações para criar todos os outros botões.

Pronto você ja tem um menu como o do site da macromedia.

O meu ficou assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.onplay.com.br/tutoriais/tuto30.jpg&key=dc77752724a71d6fce24086be7f02b3eb70d12979ba3e6d9e4d12c165698e374" alt="Imagem Postada" />

No próximo tutorial estarei voltando ao tema para mostrar como criar o rollover horizontal.

Espero que tenham gostado deste tutorial. Lembrem-se esta área é de todos nós. Vocês tem toda liberdade de colocar tutoriais criados por vocês.

Obrigado