Ao final deste tutorial teremos construído um jogo de tiro ao alvo como o mostrado a seguir, onde temos que acertar os logotipos voadores com cliques do mousee suas estatísticas são atualizadas em tempo real:
1.
Para facilitar nosso trabalho, preparei um arquivo fla inicial com os elementos artísticos já inseridos na Library. Assim focamos nosso tempo no que é essencial.
2. Após ter feito o download, descompactado o arquivo e aberto o TiroAoAlvo_Inicial.fla renomeie-o para Tiro ao Alvo.fla.
3. Crie mais duas layers e renomeie as três que tem agora como segue: AS, bg, bg_mc.
4. Clique no frame 1 da layer bg_mc e arraste uma instância do MC fundo_mc da Library para o Stage.
5.
Siga o procedimento análogo para a layer bg, arrastando uma instância do Bitmap chamado “fundo”.
6. Clique no frame 1 da layer AS e digite o seguinte código:
/*
Animação Programada
Este exemplo mostra como criar, posicionar, animar, testar acerto da figura com o mouse e deletar MCs
*/
/*
Definição das variáveis que serão usadas para estatísticas
*/
_global.acertos = 0; //Armazena a quantidade de logos atingidos
_global.erros = 0; // Armazena a quantidade de logos que “fugiram”
_global.cliques = 0; // Armazena a quantidad e cliques (acertos e erros)
_global.cProfundidade = 100;
_global.nivel = 1;
/*
Definição das variáveis (tempo de execução) que serão usadas nos cálculos
*/
var xVelocidade:Number = 3;
var larguraStage:Number = 550; //Definição da área dos cliques
var alturaStage:Number = 580; // Definição da área dos cliques
/*
Inclusão a instância do MC alvo_mc da Library no Stage.
Este clip será usado como um cursor personalizado
*/
this.attachMovie(”alvo_mc”, “alvo_mc”, 5001);
/*
Oculta o cursor do mouse
*/
Mouse.hide();
/*
Cria Listener para o Mouse
*/
var mouseListener:Object = new Object();
/*
Sempre que o cursor do mouse mover-se para fora do arquivo SWF, a posição será atualizada na instância do alvo_mc no Stage.
*/
mouseListener.onMouseMove = function() {
alvo_mc._x = _xmouse;
alvo_mc._y = _ymouse;
};
/*
Quando o botão do mouse é clicado, verificar se o cursor está fora dos limites do Stage.
Em caso positivo, incrementa o número de cliques dados
*/
mouseListener.onMouseDown = function() {
_global.cliques++;
if (fundo_mc.hitTest(_xmouse, _ymouse, false)) {
_global.acertos++;
}
};
Mouse.addListener(mouseListener);
/*
Define um TextFormat que é usado para formatar o campo estatisticas_txt.
*/
var meu_textoFormatado:TextFormat = new TextFormat();
meu_textoFormatado.bold = true;
meu_textoFormatado.font = “Arial”;
meu_textoFormatado.size = 12;
meu_textoFormatado.color = 0×000000;
/*
Cria um campo texto para mostrar as estatísticas do jogador.
*/
this.createTextField(”estatisticas_txt”, 5000, 10, 0, 530, 22);
/*
Aplica o TextFormat no campo texto.
*/
estatisticas_txt.setNewTextFormat(meu_textoFormatado);
estatisticas_txt.selectable = false;
updateStats();
/*
Inclui um evento onEnterFrame na timeline principal para que um novo logo seja constantemente gerado no jogo.
*/
this.onEnterFrame = function() {
/*
Inclui aleatoriamente um novo logo
*/
if (randRange(0, 20) == 0) {
/*
anexa uma nova instância do logo da Library no Stage e define uma profundidade única
*/
var randomLogo:Number = randRange(1, 3);
/*
Observe que o nome do MC a seguir é obtido pelo Flash através do Identifier do Linkage (clique com o botão direito
do mouse sobre o objeto na Library e escolha Linkage…)
*/
var thisMC:MovieClip = this.attachMovie(”logo”+randomLogo+”_mc”, “logoAlvo”+_global.cProfundidade+”_mc”, _global.cProfundidade);
_global.cProfundidade++;
/*
Configura a posição inicial do logoAlvo_mc à esquerda do Stage
*/
thisMC._x = -thisMC._width;
/*
Cria um número aleatório entre 80 e 100.
Será usado para o tamanho (escala) do MC atual, alpha e velocidade
que se moverá pelo Stage.
*/
var escala = randRange(80, 100);
/*
Configura as propriedades do _xescala e _yescala no MC atual.*/
*/
thisMC._xescala = escala;
thisMC._yescala = escala;
thisMC._alpha = escala;
thisMC.speed = xVelocidade+randRange(0, 3)+_global.nivel;
/*
Configura um valor aleatório para _y.
Agora, ao invés de todos os logos voarem sobre o mesmo caminho,
eles variam sua posição vertical levemente. */
*/
thisMC._y = Math.round(Math.random()*350)+65;
/*
Cria um manipulador onEnterFrame que executam algumas dúzias de vezes por segundo */
*/
thisMC.onEnterFrame = function() {
/*
Move o logo horizontalmente ao longo do Stage.
No momento todos os logos movem-se da esquerda para a direita
*/
this._x += this.speed;
/*
Decrementa levemente a posição do _y no MC atual.
Isto faz com que pareça que os logos estejam voando
levemente mais alto do que movem-se no Stage.
*/
this._y -= .4;
/*
Se a posição atual do logo é maior do que o Stage,
conta o logo como “perdido” e apaga sua instância.
*/
if (this._x>larguraStage) {
_global.erros++;
updateStats();
this.removeMovieClip();
}
};
/*
Quando o logo é pressionado, contar como um “acerto”
*/
thisMC.onPress = function() {
/*
Atualizar as estatísticas do jogador
*/
_global.acertos++;
if ((_global.acertos%40) == 0) {
_global.nivel++; // Mudança de nível
}
updateStats();
/*
Vai para o rótulo do MC chamado “hit”
(que permite você mostrar uma animação engenhosa quando a
instância é atingida.)
*/
this.gotoAndPlay(”hit”);
/*
Configura algumas variáveis locais que você usará para
animar o logo caindo pelo Stage.
*/
var ymov = this._y;
var gravity = 20;
/*
Cria um evento onEnterFrame para a instância do MC atual.
*/
this.onEnterFrame = function() {
ymov += gravity;
xmov *= 0.5;
/*
Incrementa a rotação do MC atual no sentido horário em 5 graus.
*/
this._rotation += 5;
/*
Configura as propriedades _x e _y do MC no Stage,
isto permite-nos fazer com que a queda
seja mais realista
*/
this._x += xVelocidade;
this._y = ymov;
/*
Após anular a posição _y position no Stage,
remova o MC para que suas coordenadas não sejam
continuamente calculadas */
if (this._y>alturaStage) {
this.removeMovieClip();
}
};
/*
Apagar o manipulador de evento onPress.
Isto faz com que o logo não possa ser continuamente clicado
enquanto ele está caindo pelo Stage.
*/
delete this.onPress;
};
}
};
/*
Função que atualiza as estatísticas no Stage
*/
function updateStats() {
var precisao:Number = Math.round((_global.acertos/_global.cliques)*100);
if (isNaN(precisao)) {
precisao = 0;
}
estatisticas_txt.text = “Cliques: “+_global.cliques+” “+”Acertos: “+_global.acertos+” “+”Erros: “+_global.erros+” “+”Precisão: “+precisao+”%”+” “+”Nível: “+_global.nivel;
}
/*
Função que retorna um inteiro aleatório entre dois números especificados. Isto permite que você inclua algumas diferenças sutis de tamanho e
velocidade para o MC no Stage.
*/
function randRange(minNum:Number, maxNum:Number):Number {
return (Math.floor(Math.random()*(maxNum-minNum+1))+minNum);
}
A explicação está inserida nos comentários do código.
10. Tecle Ctrl+Enter para ver a execução do que acabamos de desenvolver.
rafael lima disse, Enviado em 22-08-2008 às 3:43 pm
Ola Francisco…
mto interessante esse game que você desenvolveu…
estava querendo saber como faço para fazer que o numero de acerto seje 100 e ele mude para outro MC ???
teria como você me dar uma forcinha nesta parte ???
abrass
michael disse, Enviado em 02-09-2008 às 3:37 pm
o meu apareço um erro na formatação de texto de cor!!
como faço para arrumar esse problema?
Rodrigo disse, Enviado em 07-09-2008 às 1:26 pm
a função this.attachMovie pode ser usada para imagens?
Rodrigo disse, Enviado em 07-09-2008 às 1:28 pm
como eu mudo a imagem? por exemplo em vez daquele ‘xadrezinho andante’ colocar uma pomba?
Ana disse, Enviado em 24-06-2009 às 3:25 pm
Olá…Adorei este tutorial.
No entanto, tenho uma dúvida…
Não entendo para q serve o sublinhado atrás da palavra “global”.
“_global” porquê?
Obrigada e continue com o bom trabalho.
Monique disse, Enviado em 14-08-2009 às 11:34 am
oi n ententi como e que usa esses codigos pode me ensina.obrigado