VISUALIZADOR DE IMAGENS – PARTE 2

 

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