O palco deve estar assim agora somente com os contorno e as peças apenas coloridas na parte de fora do palco.

Agora vou posicionar todas as peças sobre os contornos como a imagem abaixo:

Isso será necessário para criarmos uma “rota de colisão”. Como a camada das peças está acima do contorno não será possível mais ver os contornos, isso não será um problema. Em seguida irei selecionar todas as peças e criar uma nova Camada abaixo da Cama Peças, chamando de Peças_invisiveis.

Logo depois crio um novo Keyframe no quadro 2 da camada Peças_invisiveis, pois não é necessário que coloquemos conteúdo no quadro 1. Para inserir um novo quadro, clico sobre o quadro 2 da camada Peças_invisiveis e:

Menu Insert, Timeline Keyframe ou uso o atalho F6.

Na seqüência seleciono todas as peças e copio:
Menu Edit, Copy ou o atalho CTRL + C.

Depois seleciono a layer: Peças_invisiveis (isso é necessário, pois as peças estão em outra layer e ao selecioná-las, ele perde a seleção da layer Peças_invisiveis) e colo as peças no mesmo lugar:

Menu Edit, Paste in Place ou CTRL + SHIFT + V.

Isso será necessário pelo seguinte motivo:

Lógica = Quando a Peça final sobrepuser à peça invisível, o código entenderá que aquela peça foi encaixada sobre a outra.

Bom agora vou transformar todas as peças da camada Peças_invisiveis em Symbol do tipo MovieClip, como também tenho a camada das Peças que são identifica, preciso fazer com que a camada das Peças não me atrapalhe e para isso eu irei torna-a invisível, para fazer isso basta clicar na coluna que tem um Olho da camada Peças. Irá aparecer um X, indicando que a camada Peças está oculta.

E depois vou convertendo peça por peça da camada Peças_invisiveis em Sumbol do tipo MovieClip, para converter(com a peça selecionada):

Menu Modify, Convert to Symbol ou uso o atalho F8.

Vou fazer isso em todas as peças, começando da esquerda para direita e de cima para baixo, com os seguintes nomes:

Name: espaco1, espaco2, espaco3, espaco4 e assim por diante

Registration: Canto superior esquerdo.

Aproveito também para colocar os menos nomes na Instance name(espaco1, espaco2, espaco3, espaco4…) de cada peça e mudar o Alpha para 0% em Color Effect.

Ao terminar as 16 peças do quebra-cabeça, vou agora devolver visibilidade a camada Peças, já que o trabalho foi finalizado em Peças_invisiveis. Para devolver visibilidade, basta clicar no X que apareceu na coluna do olho para devolver visibilidade a camada Peças.

Agora eu vou fazer um trabalho similar com as Peças da camada Peças, com alguns diferenciais, seleciono e irei converter em símbolo do tipo MovieClip, para converter:

Menu Modify, Convert to Symbol ou uso o atalho F8

Name: peca1

Registration: canto superior esquerdo

Também aproveito para colocar o mesmo nome na Instance Name de cada peça.

O diferencial além do nome será colocar a imagem correspondente aquela peça usando mascara.

Para fazer esse trabalho agora, após converter a peça em MovieClip e adicionar a instance name, eu irei editar esse símbolo MovieClip, para editar um símbolo, seleciono a peça já convertida:

Menu Edit, Edit Symbol ou uso o atalho CTRL + E
Essa opção faz com que eu edite o símbolo em uma nova área sem ver as outras peças em volta. Posso editar mais de um símbolo por vez (basta selecionar dois ou mais símbolos).

Menu Edit, Edit Select
O mesmo processo que o Edit Symbol, porém só é possível editar um símbolo por vez.

Menu Edit, Edit in Place
O mesmo processo do Edit Select, porém ele mantém os outros objetos em volta a vista com opacidade.

Essas mesmas opções também se encontram clicando com o botão direito do mouse sobre o símbolo, com um diferencial:
Edit = Edit Select
Edit in Place = Edit in Place do menu Edit
Edit in new Windows = Abre o símbolo em uma nova janela para editar

Para editar um símbolo também posso selecionar ao lado do Zoom(caixa que tem padrão 100% localizado no canto superior direito do palco) tem um botão Edit Symbol(são três figuras, um meio triangulo, um quadrado e um circulo) que tem a mesma propriedade do Edit Symbol do menu Edit. E por último e não menos importante também pode dar um duplo clique sobre o símbolo que ele aciona o: Edit in place.

Ao se editar um símbolo do tipo MovieClip, ele abre uma nova Timeline e também é possível saber que simbolo estou editando vendo na barra de navegação.

Vou criar uma nova layer, ficando com duas layers:

Depois será necessário posicionar a Layer 1 sobre a Layer 2, para fazer isso, basta clicar na Layer 1 e arrastá-la para cima da Layer 2

Agora irei renomear a Layer 1 para Mascara e a Layer 2 para Img_mascarada.

Seleciono a Camada Img_mascarada e pego o gráfico: img_fundo na Library(Biblioteca).

e arrasto até o palco, e encaixo a peça corretamente como abaixo(eu até poderia colocar no eixo x = 0 e eixo y = 0, porém isso só irá funcionar nessa primeira peça, nas demais não irá dar certo):

E para finalizar, irei até a camada Mascara e converto-a em Mask. Para converter em mascara, clico com o botão direito sobre a camada Mascara e escolho Mask.

Feito isso eu consigo o efeito que precisava que essa peça fique com apenas uma parte da imagem.

Bem agora eu volto para a Scene 1 e repito o processo com todas as peças.

Vou repetindo os processos com todas as peças até conseguir esse resultado final:

Para finalizarmos, crio uma nova camada acima da camada de Peças e chamo ela de Informações:

Em seguida adiciono um novo Keyframe no quadro 2 da Layer Informações, para criar um novo Keyframe, clico no quadro 2 da layer Informações:

Menu Insert, Timeline Keyframe ou uso o atalho F6.

Por ultimo, seleciono a ferramenta de texto(no quadro 2 da camada Informações).

Com os seguintes parâmetros:

Static Text

Character
Family: _typewriter
Size: 25.0pt
Cor: Preta (#000000)

Essas são uma sugestão de parâmetros para o texto, pode ser usado quaisquer outros tipos de fonte, cor e tamanho. Escrevo as palavras Tempo: e Pontos: e as posiciono acima das peças.

Ainda com a ferramenta de texto, entretanto dessa vez utilizarei do tipo Dynamic, criarei duas caixas de texto.

Por ultimo adiciono e posiciono uma caixa de texto a frente de Tempo: e a outro a frente de Pontos: e adiciono uma instance name em cada uma das caixas referente aos seus respectivos itens:

Instance name tempo para a caixa de texto que está na frente do texto Tempo:

e Instance name pontos para a caixa de texto que está na frente do texto Pontos:

Assim concluo a parte III do jogo Quebra-Cabeças, no próximo e último post, falarei mais sobre Actionscript e finalizarei o jogo.

Parte I | Parte II