Álbum de fotos usando loadMovie

 

Vamos usar o método loadMovie para criar um álbum de fotos com miniaturas.

 

Criando os arquivos das fotos

 

1. Crie uma pasta e copie oito imagens horizontais para esta pasta. Vai facilitar bastante o nosso trabalho se trocarmos os nomes destas imagens para foto1.jpg, foto2.jpg, foto3.jpg, foto4.jpg, foto5.jpg, foto6.jpg, foto7.jpg e foto8.jpg.

 

2. Eu usei o Photoshop para dimensioná-las para 507 pixels de largura por 380 pixels de altura.

 

3. Abra o seu Flash e crie um novo arquivo com 507 pixels de largura por 380 pixels de altura.

 

4. Clique em Fil/Import/Import to Stage para trazer a primeira imagem para o palco. Importante: por se tratar de nomes de arquivos numerados o Flash pensa que queremos montar uma seqüência de imagens, responda NÃO na caixa de diálogo que irá aparecer perguntando se quer fazer a tal seqüência.

 

 

5. Estas imagens terão um efeito de Fade quando carregadas, elas inicialmente vão estar invisíveis e aparecerão gradativamente.

 

6. Posicione esta foto em X=0 e Y=0.

 

 

7. Selecione esta imagem, clicando sobre ela e pressione F8 para converte-la em símbolo gráfico.

 

 

8. Modifique o Alpha desta imagem para ZERO.

 

 

9. Clique no quadro 25 da linha de tempo e pressione F6 para criar um quadro-chave.

 

10. Dê um clique na imagem que está invisível e modifique seu Alpha para 100%.

 

 

11. Insira um Motion Twen entre o quadro 1 e o quadro 25 da linha de tempo.

 

12. Insira uma Action stop(); no quadro 25 da linha de tempo.

 

13. Teste com CTRL+ENTER, a imagem apagada vai aparecendo devagar e para quando chega ao quadro 25.

 

14. Salve o arquivo como foto1.fla.

 

15. Exporte o movie como foto1.swf.

 

Não há como fugir, você tem de repetir todos estes passos para criar os outros 7 arquivos com imagens, salvando e exportando, até que você tenha 8 arquivos com extensão FLA e oito arquivos com extensão SWF.

 

16. Depois de criar os oito arquivos das imagens vamos criar um arquivo que aparecerá assim que o nosso site for carregado.

 

17. Crie mais um arquivo com 507 pixels de largura por 380 pixels de altura.

 

18. Importe 3 imagens e faça uma composição como mostrado abaixo.

 

 

19. Salve o arquivo como principal.fla e exporte o movie como principal.swf.

 

Criando a página de navegação

 

1. Criando um novo arquivo no Flash com 760 pixels de largura e 420 pixels de altura.

 

2. Salve este arquivo como index.fla.

 

3. Desenhe um retângulo de qualquer cor, com 507 pixels de largura e 380 pixels de altura, e posicione-o em X=240 e Y=24.

 

 

4. Selecione a imagem e pressione F8 para converter em movie clip.

 

 

5. Dê o nome de “alvo” à Instância.

 

 

6. Escreva “Álbum de Imagens” no alto a esquerda com fonte verdana e tamanho 20.

 

 

7. Perceba que o texto deve estar alinhado com o topo do retângulo.

 

8. Importe a imagem foto1.jpg para o stage. Lembre-se de responder que NÃO quer uma seqüência de imagens.

 

9. Modifique seu tamanho para 80 pixels de largura e 60 pixels de largura.

 

10. Dê um clique na imagem, pressione F6 e converta-a em botão.

 

 

11. Importe as outras 7 imagens, dimensione-as para o mesmo tamanho citado acima e converta-as também para botão, da mesma maneira que fizemos com a primeira.

 

12. Arrume como mostrado abaixo.

 

 

13. Agora vamos para a finalização, que é a aplicação da Action loadMovie para fazer o site funcionar.

 

14. Clique no primeiro quadro da linha de tempo, pressione F9 para abrir a paleta Acions e digite a action abaixo.

 

loadMovie(“principal.swf”,”alvo”)

 

Lembrete: actions em quadros não são associadas a eventos.

 

15. Este comando vai fazer com que o arquivo principal.swf seja carregado em cima do alvo quando a página for aberta. Você já pode testar, vai notar que na posição do retângulo azul aparecerá o arquivo principal.swf.

 

 

16. Dê um clique no primeiro botão e insira a action abaixo:

 

on (rollOver)

      {

      loadMovie("foto1.swf","alvo")

      }

 

17. Dê um clique no segundo botão e digite a action abaixo:

 

on (rollOver)

      {

      loadMovie("foto2.swf","alvo")

      }

 

18. Dê um clique no terceiro botão e digite a action abaixo:

 

on (rollOver)

      {

      loadMovie("foto3.swf","alvo")

      }

 

19. Dê um clique no quarto botão e digite a action abaixo:

 

on (rollOver)

      {

      loadMovie("foto4.swf","alvo")

      }

 

20. Dê um clique no quinto botão e digite a action abaixo:

 

on (rollOver)

      {

      loadMovie("foto5.swf","alvo")

      }

 

21. Dê um clique no sexto botão e digite a action abaixo:

 

on (rollOver)

      {

      loadMovie("foto6.swf","alvo")

      }

 

22. Dê um clique no sétimo botão e digite a action abaixo:

 

on (rollOver)

      {

      loadMovie("foto7.swf","alvo")

      }

 

23. Dê um clique no oitavo botão e digite a action abaixo:

 

on (rollOver)

      {

      loadMovie("foto8.swf","alvo")

      }

 

24. Já podemos testar a aplicação, você vai notar que por usarmos o evento rollOver, as fotos aparecem quando o mouse passa por cima das miniaturas, se quisermos clicar em cima das miniaturas ao invés de passar o mouse por elas devemos trocar o evento para release ou press.

 

Ex.:

 

on (release)

      {

      loadMovie("foto2.swf","alvo")

      }

 

25. Salve o arquivo, e exporte-o com o nome index.swf.

 

Até a próxima.