Complementando o post anterior, esse post será mais voltado à parte da programação Actionscript 3.0, embora ainda tenha alguns itens de design para terminar o jogo de quebra-cabeças.

A primeira coisa a fazer é criar uma nova Layer e mudar o nome para Actionscript, lembrando que essa layer deve ficar acima de todas as demais Layers, esse processo é necessário, pois o Adobe Flash carrega as layer de baixo para cima, ou seja, para que ele carregue os objetos primeiros e somente depois acione as ações sobre eles.

Após criar a nova layer, seleciono o quadro um da layer actionscript e abro o painel de Actions:
Menu Window, Action (Atalho F9).

Vou criar agora o “Carregando” do jogo. Para isso vou criar duas novas camadas:

Uma irá chamar Mascara e a outra de Img_mascarada, ambas devem ficar acima da img_fundo apenas.

Em seguida vou selecionar a camada Img_mascarada e colar a imagem nas mesmas posições(x e y)da imagem fundo. Para copiá-la nas mesmas posições:
Menu Edit, Paste in Place ou use o atalho CTRL + Shift + V.

A imagem vai parecer que ganhou mais cor, mas na verdade é porque temos duas imagens uma sobrepondo à outra. Agora sim é que vou fazer com que a imagem da Img_mascarada vai ganhar literalmente cor, mudando o Alpha de 40% para 100%.

No painel de Propriedades em Color Effect mudo o alpha de 40% para 100%.

Depois disso vou selecionar a camada Mascara e criar um quadrado de 240×240 (tamanho do nosso quebra-cabeça e consequentemente da nossa imagem) sem contorno (a cor do preenchimento é irrelevante nesse momento, então pode ser selecionado qualquer cor) e irei posicionar exatamente sobre a imagem.

Agora vou selecionar o quadrado que acabei de criar e converte-lo em simbolo do tipo MovieClip, para converter seleciono e:
Menu Modify, Convert to Symbol ou use o atalho F8 (com o quadrado selecionado).

Name: Mascara_quadrado
Type: MovieClip
Registration: Centro inferior
Obs: Para o efeito funcionar corretamente é extremamente importante colocar o registration exatamente igual ao da foto.

Após converter, com o quadrado ainda selecionado, vou no painel de Propriedades(Properties) e dou o nome na Instance Name de barra.

Agora por último converto a Layer (camada) Mascara em Mask (mascara). Para converter em mascara, clico sobre a Layer (camada) Mascara com o botão direito do mouse e seleciono Mask.

Bom, agora é hora de voltar as Actions e fazer o “Carregando” funcionar. Para isso seleciono novamente a Layer Actionscript e abro novamente o painel de Action(Menu Window, Action ou F9) e adiciono as seguintes linhas de código:

addEventListener(Event.ENTER_FRAME, carregando);
function carregando(Obj:Event) {
var total       = stage.loaderInfo.bytesTotal;
var carregado   = stage.loaderInfo.bytesLoaded;
var porcentagem = Math.round(carregado*100/total);
barra.scaleY = porcentagem/100;

if (carregado >= total) {
gotoAndStop(2);
removeEventListener(Event.ENTER_FRAME, carregando);
}
}

Agora vamos entender o código:
A partir do Actionscript 3.0, você deve adicionar toda função em um ouvinte de evento:

addEventListener(Event.ENTER_FRAME, carregando);

Em seguida eu crio a função carregando e adiciono um parâmetro do tipo Event(Obj:Event):

function carregando(Obj:Event) {

Aqui eu cri uma variável  e chamo de total e dentro de total eu gravo as informações da quantidade total de bytes que tem o arquivo final, no caso o SWF.

var total       = stage.loaderInfo.bytesTotal;

Em seguida crio uma outra variável e gravo dentro dele a quantidade de bytes que já foram descarregados ou seja, já baixaram e gravaram nos temporários da máquina do usuário.

var carregado   = stage.loaderInfo.bytesLoaded;

Por último crio uma terceira variável chamada de porcentagem para fazer o calculo em porcentagem da quantidade já descarregada. A função Math.round arredonda o número para que eu não tenha porcentagem fracionada, exemplo: 10,3% passa a ser 10%.

var porcentagem = Math.round(carregado*100/total);

Depois eu pego essa informação e divido por 100 e adiciono a escala Y do quadrado desenhado, fazendo com que ela vá aumentando conforme a quantidade de itens já descarregados, pois a idéia será fazer as peças ganharem cor com a mascara no exemplo.

barra.scaleY = porcentagem/100;

Aqui faço uma condição, onde verifico se a quantidade já descarregada é igual ou maior do que o total, se for, ele irá para o quadro 2 do nosso jogo e irá remover o ouvinte de evento, descarregando assim a função da memória e liberando mais espaço.

if (carregado >= total) {
gotoAndStop(2);
removeEventListener(Event.ENTER_FRAME, carregando);
}
}

Fecho as duas chaves e está pronto o “Carregando” do jogo. Agora vou criar o quadro dois no jogo para eventualmente fazer a tela de jogo, pontuação e colocar as peças com as devidas “partes” do quebra-cabeça. Primeiro fecho a tela de actions(Menu Windows, Action ou atalho F9) e depois clico sobre a layer action e para criar um novo quadro:

Menu Insert, Timeline, Keyframe ou uso o atalho F6.

Depois vou clicar na camada da Action e no quadro 2, abro o painel de action(Menu Window, Action ou F9) e adiciono a seguinte Action:

Para que a cena fique parada no quadro 2.

Como não precisamos das peças no quadro 1, vou selecionar o quadro 1 e arrastá-lo para o quadro 2. Para isso eu seleciono o quadro 1, clico novamente, mantenho o botão do mouse apertado e arrasto para o quadro 2.

As layers: Mascara, Img_mascarada e img_fundo não serão necessárias no quadro 2, então irei selecioná-las e removerei os quadro dois, para selecionar o quadro 2 das 3 layers, seguro o SHIFT e vou clicando nos quadros 2 das três layers.

Depois de selecionado, clico com o botão direito sobre qualquer uma das três layer e escolho Remove Frames (remover quadros).

Assim concluo a parte II do Jogo Quebra-Cabeças, no próximo posto devemos voltar mais a parte de design para estruturar as peças, demarcar as partes onde irão a pontuação, o tempo para montar e os outros itens.

Parte I | Parte III