Projeto: Galeria de Imagens
Publicado por andrebanderas em 10 Maio 2008
- Grau: Complexo -
Introduzindo…
Olá, neste artigo iremos desenvolver o projeto de uma galeria de imagens (simplificado) que poderá ser utilizado em muitos sites em flash que envolvam imagens, como sites de fotografia por exemplo.
Porém esse é um projeto simplificado, mais didático para que se possa entender alguns recursos do Actionscript 2.0 e poderá ser adaptado de modo a incluir mais recursos.
Este projeto terá as seguintes característica:
- Um menu para alternar a categoria das fotografias.
- As fotos deverão ser carregadas automaticamente para dentro da galeria bastando para isso acrescentar a miniatura e a foto original em suas respectivas pastas e atualizar um arquivo de texto.
- Ao adicionar uma nova categoria a um arquivo de configuração (também um arquivo de texto) essa categoria deverá aparecer no galeria. As pastas dessa categoria também deverão ser criadas antecipadamente já que o Actionscript 2.0 não cria pastas nem arquivos.
Ingredientes
- Uma pasta que irá acomodar o projeto, sugiro o nome galeria_de_imagens para esta pasta, mas você pode escolher o nome que achar melhor.
- Dentro desta pasta outras duas, uma com o nome de ampliadas e outra com o nome de miniaturas, aqui você pode escolher outro nome, porém neste artigo usarei estes nomes de pasta.
- Tanto a pasta Ampliadas como a pasta miniaturas deverão possuir em seu interior uma pasta para cada categoria, então elas vão possuir a mesma estrutura interna.
- Fotos e miniaturas dessas fotos, cada uma colocada em sua respectiva categoria (recomendo umas 10 de cada categoria), sendo que as fotos deverão ter 400×400 e as miniaturas 120×120. Para a criação das miniaturas e das fotos, recomendo a leitura e até a execução do artigo Criando Miniaturas de Imagens [♂]
- Um arquivo de texto com o nome de categorias.txt.
- Um arquivo de texto para cada uma das categorias.
No meu caso então os arquivos seriam: arquitetura.txt, objetos.txt, pessoas.txt.
Dica do Banderas: Use o Corbis para selecionar as fotos [♂]
A estrutura de pastas ficará semelhante a esta.
Preparo
Arquivos de texto
Você deverá colocar o nome das fotografias dentro de cada arquivo de texto, para cada uma das categorias. Um exemplo:
No arquivo arquitetura.txt, o conteúdo é:
&0=arvore.jpg&
&1=casa.jpg&
&2=cidade.jpg&
&3=corredor.jpg&
&4=igreja.jpg&
&5=luz.jpg&
&6=ponte.jpg&
&7=vidro.jpg&
Cada nome de arquivo é numerado e é adicionado o ‘&’ ao início e ao final de cada linha.
Ahhh Banderas, tenho um monte de arquivos e tenho a maior preguiça de escrever.
Ok, ok… Vamos lá
Dica do Banderas
- Abra o bloco de notas e digite o seguinte código:
<html> <body> <input type="text" name="path" id="path" size="30"> <br> Endereço das Imagens: <button onclick="javascript:listarImagens();">Ok</button></body> </html> <script language="VBScript"> function listarImagens() dim pasta dim arq dim fs
set fs = CreateObject("Scripting.FileSystemObject")
pasta = document.all("path").value
n=0
for each arq in fs.getFolder(pasta).files
document.write("&" & n & "=" & arq.Name & "&<br>")
n = n+1
next
end function
</script>
- Salve o arquivo como “listar.html” (digite o nome do arquivo com as aspas).
- Abra no Internet Explorer o arquivo lista.html, se o navegador perguntar se deseja executar ActiveX você responde que sim (Se houver algum bloqueio de conteúdo, libere também).
- Na janela haverá uma caixa de texto. Dentro desta caixa de texto você digita o endereço do arquivo completo (ex. G:\galeria_de_imagens\ampliadas\arquitetura). Ao apertar ‘Ok’ vai aparecer a listagem dos arquivos já no formato mostrado acima. É só salvar a página como um arquivo de texto (*.txt)
No Flash
Inicie um novo documento no Flash com tamanho de 700×600 pixels e monte a seguinte estrutura de Camadas:
- Actions
- Menu
- Grandes
- Máscara
- Minis
- Textos
_
Criando o menu de categorias.
Selecione a camada Menu e insira um texto dinâmico. Escreva dentro da caixa a palavra categoria.
Em Propriedades (Properties) defina as seguintes propriedades:
Depois de definidas as propriedades, clique no texto categoria_txt (esse que você acabou de criar) e converta em em MovieClip [F8] e chame-o de mcCategoria, não esqueça de colocar o registro no canto superior esquerdo como mostra a figura abaixo.
Depois de converter em MovieClip coloque o nome da instância (Instance Name) de categoria_mc.
Criando o título.
Agora selecione a camada Textos, selecione a Ferramenta Texto [T] (Text Tool ) e escreva a palavra título.
Em Propriedades ( Properties ) use as seguintes configurações:
No nome da instância ( Instance Name ) coloque o nome titulo_txt.
Criando o conteiner das fotos grandes
Selecione a camada Grandes e com a ferramenta Retângulo [R] (Rectangle Tool ), selecione a cor do preenchimento (Fill color) como Preto (#000000) e na cor do contorno ( Stroke color ) escolha a nenhuma cor. Desenhe um retângulo e nas Propriedades acerte sua Largura ( W ) para 400px, a Altura ( H ) para 400px (tamanho das fotos grandes), a posição X deverá ficar com 150px e a posição Y com 60px.
Converta o retângulo em um MovieClip [F8] com o Registro (Registration) no canto superior esquerdo e o atribua o Nome ( Name ) de mcGrande.
Agora em Propriedades (com o retângulo selecionado), coloque o nome da instância (Instance Name) de grande_mc.
Criando o conteiner das fotos pequenas
Selecione a camada Minis e com a ferramenta Retângulo [R] (Rectangle Tool ), selecione a cor do preenchimento (Fill color) como Preto (#000000) e na cor do contorno ( Stroke color ) escolha a nenhuma cor. Desenhe um retângulo e nas Propriedades acerte sua Largura ( W ) para 120px, a Altura ( H ) para 120px (tamanho das miniaturas).
Converta o retângulo em um MovieClip [F8] com o Registro (Registration) no canto superior esquerdo e atribua o Nome ( Name ) de mcMini.
Agora em Propriedades (com o retângulo selecionado), coloque o nome da instância (Instance Name) de mini_mc, acerte a Largura ( W ) para 60px e a Altura ( H ) para 60px (isso porque as miniaturas irão sofrer um zoom quando o mouse estiver sobre elas). Acerte a posição X para 20px e a posição Y para 500px.
Criando a máscara das miniaturas
As miniaturas serão vistas através de uma espécie de janela invisível, de modo que quando o usuário coloca o mouse para esquerda há a rolagem das miniaturas da direita pra esquerda.
Para que isso seja feito é necessário desenhar uma máscara, então com a Ferramenta Retângulo [R] ( Rectangle Tool ) desenhe um retângulo com Largura de 680px, Altura 120px, posição X de 10px, e posição Y de 470px.
Converta este retângulo em um MovieClip [F8], com o registro no canto superior esquerdo e o Nome ( Name ) mcMask.
Em propriedades coloque o nome da instância ( Instance Name ) de mask_mc.
Dica do Banderas
Para facilitar a visualização é melhor que a máscara seja vista apenas como um contorno ( Outlines ). Se você observar ao lado do nome da camada Máscara há um pequeno quadrado com uma cor dentro (no meu caso a cor é amarela). Clique na cor e o quadrado de preenchido ficará apenas o contorno, se você observar aconteceu a mesma coisa com o retângulo mask_mc (será mostrado apenas o contorno de mask_mc).
Se tudo der certo, a sua cena estará semelhante a esta.
O forno (fazendo funcionar…)
Clique na camada Actions e abra a janela de Ações [F9] ( Actions ).
Agora é bom alongar os dedos… Vamos passo à passo.
1- Passo, carregar o arquivo de categorias.
Felipe Martins disse
Pow velho vc não terminou o tutorial das imagens…caro to tentando mas não estou consegunido…..
Aguardo respostas
Obridado
andrebanderas disse
Opa, abandonei um pouco meu blog, mas no início desse ano irei continuá-lo.
Peço perdão pela demora na resposta e pela falta de seriedade com que tratei esse blog.
Wilson disse
olá Banderas… Parabens pelo POST.
Como faço pra criar categorias neste teu exemplo???
andrebanderas disse
Saudações, eu dei uma parada com o blog, mas neste inicio da ano vou dar prosseguimento nele. Estou cuidando do resto da galeria de imagens, já com as categorias também
Um abraço
tiaguinho disse
ae brother… show di bola esse tuto…
pra mim que sou iniciante, caiu do céu…
é uma pena que naum deu pra vc terminar…
mas a hora que puder… fico super agradecido
flw
abraços