- 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.
