1 Quebra-Cabeça com Flash e Action Script Sex Abr 22, 2011 5:10 pm
Yoshi
Membro Avançado
- Spoiler:
- 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.
aproveitem ~