| Autor: | Fábio Caetano de Almeida |
| Data: | 05-09-2005 |
| Categoria: | Design |
| Assunto: | FIREWORKS - BÁSICO |
| Visitas: |
Fala galera, tudo bem com vocês?!
Neste tutorial daremos continuidade a criação de nosso visualizador de imagens. Como se trata da parte final do projeto, preste bastante atenção para obter êxito nos resultados.
Nesta etapa final vamos aprender a trabalhar com Comportamentos, como dito no tutorial anterior (Visualizador de Imagens – Parte 1).
Como o conceito do que vem a ser um visualizador de imagens já foi visto, me reterei a explicar os procedimentos finais. Caso ainda tenha dúvidas volte ao tutorial anterior.
Mãos ao mouse!
1) Abra o arquivo criado no tutorial anterior. No exemplo que está sendo aplicado, o arquivo foi salvo como Visualizador de Imagens.png.

2) Com nosso arquivo aberto, selecione a Ferramenta Fatia.
3) Faça 04 (quatro) quadrados para as formas pequenas (botões com a moldura). Veja:

4) Agora para criarmos o quadrado maior, ainda utilizando a Ferramenta Fatia, temos que obedecer a uma regra simples. Crie o quadrado com as mesmas medidas utilizadas na criação da forma maior (quadrado maior onde os botões serão apresentados em seu tamanho real). Em nosso exemplo o quadrado maior possui as seguintes medidas:
Altura: 250 pixels.
Largura: 250 pixels.

Obs. : Para centralizar com precisão o quadrado criado (fatia) com a forma maior (quadrado maior onde serão apresentadas as imagens em seu tamanho original) utilize a Barra de Propriedades para ajustar o tamanho e os ponteiros do teclado para ajustar sua localização no palco.
5) Depois de concluído o processo de criação das fatias (quadrados), clique no primeiro quadrado com o botão direito do mouse e selecione a opção Adicionar comportamento trocar imagem....

6) Surgirá a janela Trocar imagem. Nesta janela temos que escolher a opção que corresponde a quadrado maior. Para localizar tal opção, acesse as opções disponíveis e observe a janela de visualização à direita.

7) O próximo passo é atribuir ao quadrado selecionado a imagem que será apresentada em seu tamanho original, correspondente ao primeiro quadrado. Para isso, marque a opção Arquivo de imagem e localize em seu computador o arquivo (imagem) correspondente ao primeiro botão.

8) Ao indicar o arquivo, clique no botão Ok. Após tal processo, seu visualizador admitirá tal aparência:

Observe que foi criada uma linha de cor azul ligando o quadrado menor com o quadrado maior.
9) Repita os passos 5, 6 e 7 para os demais quadrados. Ao final seu visualizador deverá ter uma aparência semelhante a seguinte:

10) O nosso visualizador está pronto. Para visualizar o efeito criado basta apertar a tecla F12 de seu teclado. Veja o exemplo concluído:



É isso aí galera, finalizamos assim nosso Visualizador de Imagens com a aplicação do novo conceito – Comportamentos. Se tiver dúvida(s), entre em contato comigo através do 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, acesse: http://www.fabio.trampos.net/ e solicite seu orçamento. Profissionalismo sempre!
Até a próxima!
Um cordial abraço a todos,
Fábio Almeida
LISTA DE TODOS OS TUTORIAIS DISPONÍVEIS