Este documento fornece um tutorial passo-a-passo para criar uma galeria de imagens interativa em que as miniaturas ampliam quando clicadas, em três etapas: 1) Adicionar comportamentos de troca de imagem às miniaturas, 2) Configurar os arquivos de imagem ampliadas como alvos, 3) Exportar a galeria como um arquivo HTML.
1. Galeria de ImagensUtilizando Slices<br />Neste tutorial veremos como fazer uma galeria de imagens. A qual se clica em uma miniatura e esta aparece ampliada em outra área.O layout da galeria será este:Primeiramente, vamos entender o layout e suas funções:<br />Miniaturas<br />Área onde aparecerá as miniaturas ampliadas <br />Vamos começar:1º Passo:Em cada miniatura e no retângulo central, insira um Slice.Botão direito na imagem...Deverá ficar assim:2º Passo:Clique com o botão direito na miniatura e em seguida clique em Add Swap Image Behavior.3º Passo:Na janela que se abre, selecione o Slice (pedaço) de destino (onde apararecerá a miniatura ampliada).No caso, o retângulo central.4º Passo:Selecione Image file e busque a imagem ampliada da miniatura ().Recomendo que você redimensione a imagem ampliada do tamanho da área onde aparecerá, pois se colocar alguma com tamanho inferior, o mecanismo a redimensiona automaticamente e perde qualidade.5º Passo:Desative a opção Restore image onMouseOutApós isso, clique em OK.Repita do 2º ao 5º passo com cada miniatura. Alterando somente no 4º passo a imagem a ampliar.Após feito isso, todos selecionados, deverão ficar assim:6º Passo:Vá até o Menu Window > Behaviors7º Passo:Com a Aba Behaviors aberta, selecione uma miniatura de cada vez e altere Events, de onMouseOver para onClick<br />[ HYPERLINK quot;
http://i37.tinypic.com/14wsnkw.jpgquot;
Ver em tamanho real ]<br />Feito os passos descritos acima, sua galeria estará pronta.Só falta exportá-la para poder usar. <br />8º Passo: Exportando:Vá ao Menu File > ExportTalvez aparece esta mensagem:Pode selecionar Don't show again e clicar em OK. Iremos evitar o que ela avisa no próximo passo.9º Passo:Na janela que se abre, escolha o local a ser salva a sua galeria e defina um nome em Nome do:.Altere Salvar como tipo:, de Images Only para HTML and Images.<br />[ HYPERLINK quot;
http://i36.tinypic.com/15frrcm.jpgquot;
Ver em tamanho real ]<br />E altere também Slices, de None para Export Slices (que é o que aquela mensagem anterior alertava para não esquecer).<br />[ HYPERLINK quot;
http://i36.tinypic.com/2u4hlx1.jpgquot;
Ver em tamanho real ]<br />E clique em Salvar.Exportado! Para conferir sua galeria, é só abrir o arquivo .HTML que foi exportado junto com outro monte de imagens (não alterá-las).<br />Espero que tenham gostado e aproveitem! <br />