Designer de games Prof Alexandre P Silva

1

Vamos usar o mtodo 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 seqncia de
imagens, responda NO na caixa de dilogo que ir aparecer perguntando se quer fazer a tal
seqncia.



5. Estas imagens tero um efeito de Fade quando carregadas, elas inicialmente vo estar invisveis e
aparecero 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 smbolo grfico.



8. Modifique o Alpha desta imagem para ZERO.

Designer de games Prof Alexandre P Silva

2


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

No 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 extenso FLA e oito arquivos com
extenso 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 faa uma composio como mostrado abaixo.

Designer de games Prof Alexandre P Silva

3


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

Criando a pgina de navegao

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


Designer de games Prof Alexandre P Silva

4

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

8. Importe a imagem foto1.jpg para o stage. Lembre-se de responder que NO quer uma seqncia
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 boto.



11. Importe as outras 7 imagens, dimensione-as para o mesmo tamanho citado acima e converta-as
tambm para boto, da mesma maneira que fizemos com a primeira.

12. Arrume como mostrado abaixo.



13. Agora vamos para a finalizao, que a aplicao da Action loadMovie para fazer o site funcionar.
Designer de games Prof Alexandre P Silva

5

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 no so associadas a eventos.

15. Este comando vai fazer com que o arquivo principal.swf seja carregado em cima do alvo quando a
pgina for aberta. Voc j pode testar, vai notar que na posio do retngulo azul aparecer o arquivo
principal.swf.



16. D um clique no primeiro boto e insira a action abaixo:

on (rollOver)
{
loadMovie("foto1.swf","alvo")
}

17. D um clique no segundo boto e digite a action abaixo:

on (rollOver)
{
loadMovie("foto2.swf","alvo")
}

18. D um clique no terceiro boto e digite a action abaixo:

on (rollOver)
{
loadMovie("foto3.swf","alvo")
}

19. D um clique no quarto boto e digite a action abaixo:

on (rollOver)
{
loadMovie("foto4.swf","alvo")
}

20. D um clique no quinto boto e digite a action abaixo:

on (rollOver)
{
loadMovie("foto5.swf","alvo")
}
Designer de games Prof Alexandre P Silva

6

21. D um clique no sexto boto e digite a action abaixo:

on (rollOver)
{
loadMovie("foto6.swf","alvo")
}

22. D um clique no stimo boto e digite a action abaixo:

on (rollOver)
{
loadMovie("foto7.swf","alvo")
}

23. D um clique no oitavo boto e digite a action abaixo:

on (rollOver)
{
loadMovie("foto8.swf","alvo")
}

24. J podemos testar a aplicao, 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 invs 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.