Quebra-Cabeça com Flash e Action Script

1º Passo – Criando e salvando o documento

Crie um documento no Flash com as seguintes medidas: 700 x 500 pixels e salve com o nome quebra_cabeça.fla.

Obs: Se você utiliza o Flash CS3, crie um documento onde a versão do Actions Script seja 2.0.

2º Passo – Importando a imagem

Depois de criado o documento, você precisará importar uma imagem para dentro da área de trabalho do Flash, para poder usar na montagem do quebra-cabeça.
Essa imagem poderá já estar cortada, no formato das peças ou inteira, para ser cortada dentro do próprio Flash.

Para importar a imagem vá em File > Import > Import to Stage ou dê um Ctrl+R. A imagem importada deverá ter um tamanho consideravelmente grande, de forma que não seja necessário redimensioná-la dentro do Flash, ajustando-se ao tamanho de aproximadamente 1/3 do palco.

Caso você queira recortar a imagem em algum programa de edição de imagens, como Photoshop ou Fireworks, sinta-se à vontade. Lembre-se que se fizer assim vai ter que importar uma peça de cada vez.

3º Passo – Recortando a imagem

Após ter importado a imagem, vamos recortá-la dentro do Flash.
Para isso, clique com o botão direito sobre a imagem e vá na opção Break Apart.
Após fazer esse procedimento, sua imagem ficará assim:



Para recortá-la, basta você ir selecionando as partes e arrastando as mesmas para uma área branca do palco.

Dica: Conforme você for cortando as partes da imagem, vá posicionando as partes com um pouco de distância entre si, como se você estivesse remontando a imagem. Isso vai facilitar o processo de criação dos Actions Scripts mais a frente.



4º Passo – Criando Movie Clip

A partir daqui é preciso muita atenção, pois começaremos a preparar as peças para a parte final do quebra-cabeça.

Cada peça do seu quebra-cabeça deverá ser transformada em um Movie Clip. Selecione cada peça e pressione a tecla F8, uma tela se abrirá conforme a apresentada abaixo.



Nomeie as peças como “peca+nº da peça”.

Repita este procedimento para todas as peças do quebra-cabeças.

5º Passo – Instance Names

Depois te ter transformado as peças em Movie Clip, agora você precisará nomear as peças para identificá-las no Action Script.
Para isso vá ao painel Properties que se encontra na parte inferior do palco e em Instance Name coloque “p+nº da peça”.



Repita este procedimento para todas as peças.

6º Passo – Inserindo os Actions Scripts

A partir de agora iremos inserir os script para criar os movimentos das peças, possibilitando ao usuário arrastar a peça para poder montar o quebra-cabeça.

Selecione cada peça do quebra-cabeça, uma de cada vez, e clique sobre ele com o botão direito do mouse e vá em Actions.
Abrirá uma tela como a mostrada abaixo:



É nessa tela que você irá inserir os Actions Scripts do seu quebra-cabeça.
Para facilitar o trabalho, vamos utilizar o Script Assist, que o assistente de script do Flash.

Primeiro vá em Global Functions > Movie Clip Control e dê um duplo clique na opção On. Sua tela ficará assim:



Desmarque a opção Release e marque a opção Press.
Agora vá em Global Functions > Movie Clip Control e dê um duplo clique em startDrag, sua tela ficará assim:



Em Target coloque: _root.p01 , onde p01 deverá ser substituído pelo nome dado à peça em Instance Name.

Agora você deverá novamente dar um duplo clique na opção On, só que desta vez marque a opção Release.
Feito isto, dê um duplo clique em stopDrag.

Seu script deverá ficar assim:



Repita este procedimento para todas as peças do quebra-cabeça.