Movie clips arrastáveis

 

Vamos ver neste tutorial como criar objetos que podem ser arrastados na tela pelo usuário, um recurso bastante comum, principalmente em páginas infantis, com seus joguinhos do tipo “vista sua Barbie”.

 

 

Aparência inicial

 

O usuário clica no botão “Começar” e arrasta as peças até montar o Batatoso, depois de pronto, pode clicar no botão “Recomeçar” que as peças voltam a posição original.

 

1. Crie um novo arquivo no Flash com 650 pixels de largura e 400 pixels de largura.

 

 

2. Desenhe os olhos.

 

 

3. Selecione-os, pressione F8 e converta em Movie Clip, dê o nome de “olhos”.

 

 

4. Com os olhos selecionados, dê o nome de “olhos” a instância.

 

 

5. Repita este processo para desenhar todos os outros objetos (desenhar, converter em Movie Clip e dar o nome à instância). Não se preocupe em caprichar muito nos desenhos, porque o objetivo primeiro deste tutorial não é este, depois que você entender crie uma segunda versão mais bacana.

 

6. Clique no menu Insert/New Symbol, marque a opção botão, dê o nome de “começar” e clique em OK.

 

 

7. Desenhe, no centro da página, um retângulo com 120 pixels de largura, e 20 pixels de largura.

 

 

8. Escreva em cima deste botão a palavra “Começar” centralizada.

 

 

9. Pressione a tecla F6 (criar quadro-chave) três vezes, até a área HIT da linha de tempo do botão.

 

10. Altere as cores do retângulo, nas áreas OVER e DOWN.

 

11. Retorne a Scene 1.

 

 

12. Arraste o botão “Começar” da biblioteca para o palco e posicione-o em X=4 e Y=375.

 

 

13. Selecione o botão, pressione F9 para mostrar a paleta Actions e insira a action abaixo.

 

on (release)

      {

      gotoAndStop(2);

      }

 

14. Escreva a action stop(); no primeiro quadro da linha de tempo.

 

15. Selecione o movie clip “boca” e insira a action abaixo.

 

on (press)

{

startDrag("_root.boca");

}

on (release)

{

stopDrag();

}

 

16. Selecione o movie clip “olhos” e insira a action abaixo.

 

on (press)

{

startDrag("_root.olhos");

}

on (release)

{

stopDrag();

}

 

17. Selecione o movie clip “cabelo” e insira a action abaixo.

 

on (press)

{

startDrag("_root.cabelo");

}

on (release)

{

stopDrag();

}

 

18. Selecione o movie clip “orelhas” e insira a action abaixo.

 

on (press)

{

startDrag("_root.orelhas");

}

on (release)

{

stopDrag();

}

 

19. Selecione o movie clip “bigode” e insira a action abaixo.

 

on (press)

{

startDrag("_root.bigode");

}

on (release)

{

stopDrag();

}

 

20. Selecione o movie clip “nariz” e insira a action abaixo.

 

on (press)

{

startDrag("_root.nariz");

}

on (release)

{

stopDrag();

}

 

21. Selecione o movie clip “sobrancelha” e insira a action abaixo.

 

on (press)

{

startDrag("_root. sobrancelha");

}

on (release)

{

stopDrag();

}

 

O evento press é acionado quando apertamos o botão do mouse, e o evento release é acionado quando soltamos o botão do mouse.

 

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

 

23. Clique neste segundo quadro que você acabou de criar e insira a action stop();

 

24. No palco, clique no botão “Começar” e apague-o.

 

25. Vamos duplicar o botão para poder criar o “Recomeçar”.

 

26. Pressione F11 para mostrar a Library.

 

27. Clique com o botão direito do mouse sobre o botão “Começar”, na Library e escolha “Duplicate” como demonstrado abaixo.

 

 

28. Dê o nome da cópia de “Recomeçar”

 

 

29. Clique duas vezes na visualização do botão duplicado para acessar seu modo de edição.

 

 

30. Altere o texto do botão para “Recomeçar” nas 4 fases da linha de tempo (UP, OVER, DOWN e HIT).

 

31. Retorne e Scene 1.

 

32. Apague do palco o botão “Começar” e insira o botão “Recomeçar” na mesma posição.

 

 

33. Selecione este botão e insira a action abaixo.

 

on (release)

      {

      gotoAndStop(1);

      }