SÉRIE EFEITOS – PARTE 46

 

Olá galera!

 

Vamos finalizar, nesta parte, nosso menu interativo. Com o layout do menu criado, configuraremos as interações deste.

 

Acompanhe os passos abaixo.

 

1) A figura abaixo mostra nosso ponto de partida:

 

Figura 01: ponto de partida.

 

2) Selecione a janela Frames and History, através do atalho do teclado Shift+F2. No botão Options, localizado na parte superior a direita da janela, clique em Duplicate Frame....

 

Figura 02: duplicação da frame (camada).

 

3) Ao clicar na opção Duplicate Frame... surgirá a janela Duplicate Frame. Configure como segue e clique no botão OK.

 

Figura 03: propriedades para duplicação da frame.

 

4) Acesse o Frame 2 e altere o posicionamento das descrições nos botões para que dê a sensação de movimento.

 

Figura 04: seleção do Frame 2.

 

Figura 05: modificação do posicionamento das descrições dos botões.

 

5) Volte ao Frame 1 e agrupe (Ctrl+G) todas descrições com seus respectivos botões. Ao final teremos 03 (três) botões. Clique com o botão direito do mouse sobre o primeiro botão e acesse a opção Insert Rectangular Slice.

 

Figura 06: opção Insert Rectangular Slice.

 

6) Repita este passo para os demais retângulos.

 

Figura 07: aplicação de slices (fatias) em todos os retângulos.

 

7) Clique sobre cada fatia criada e na barra de propriedades, renomeia-as para um nome sugestivo.

 

Figura 08: alteração do nome da fatia.

 

8) Selecione a primeira fatia e acesse a janela Behaviors pelo atalho do teclado Shift+F3. Clique no botão Add behaviors (sinal de positivo +) e escolha a opção Simple Rollover.

 

Figura 09: aplicação do behaviors (comportamento) Simple Rollover.

 

09) Aplique esta mesma configuração para os demais retângulos.

 

Figura 10: aplicação do comportamento.

 

10) Nosso menu interativo está criado. Agora basta exportá-lo e conferir os resultados. Acesse o menu File, Export... ou atalho do teclado Ctrl+Shift+R. Configure como segue e clique no botão Export.

 

Figura 11: configurações para exportação.

 

11) Para conferir o resultado, acesse a pasta onde exportou o menu e abra o arquivo com extensão .HTML.

 

Figura 12: arquivo HTML.

 

12) Para você editar os botões criados, abra o arquivo com extensão .HTML no Dreamweaver ou outro de sua preferência.

 

Finalizamos mais um tutorial da série Fireworks. Espero que tenham gostado! Enviem suas sugestões e críticas para o e-mail webdesigner.pro@pop.com.br.

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 

Para desenvolvimento de Sites, Layout, Apresentações, Flyes, Banners, Identidade Visual, Diagramação, Vetorização e Serviços Gráficos em geral, enviem e-mail para: webdesigner.pro@pop.com.br e solicite seu orçamento. Profissionalismo sempre!

 

Pessoal, trago uma boa notícia a todos os que acompanham os tutoriais da série Fireworks, aqui no site do Júlio Battisti. Já estão à venda os cursos Fireworks Básico – Passo a Passo e Fireworks – Aprenda na Prática, ambos de minha autoria. É uma maneira fácil e didática de se aprender esta maravilhosa ferramenta de design. São inúmeros exemplos práticos que irão te levar a um mundo totalmente real em se tratando de design. Clique Aqui para saber mais sobre o curso Fireworks Básico – Passo a Passo ou Clique Aqui para saber mais sobre o curso Fireworks – Aprenda na Prática.

 

Até a próxima!

 

Um cordial abraço a todos,

 

Fábio Almeida

 

webdesigner.pro@pop.com.br