MARCELO SIQUEIRA (96 pts)

RICARDO TAKAHASHI (180 pts)

LEANDRO AMANO (83 pts)

LUIZ HERRERA (117 pts)

FLASHGURU (155 pts)

MAURO ROCHA TAVARES (40 pts)

GUILHERME G.G. (137 pts)

STICKMAN (155 pts)

HELEN TRIOLO (444 pts)

MARCOS JOSÉ PINTO (44 pts)

GUILHERME SCHEIBE (49 pts)

GÉRIO (93 pts)
Treinamento PontoFlash de Flash e ActionScript

O que é e como funciona o Math.round?

Qual a diferença entre variável global e variável local?

Gostaria que vocês me dessem uma dica, quando usar e quando não usar o loading.

Eu gostaria de saber como faz o efeito de desfoque nos objetos!!

Como posso fazer uma animação com um alfa aparecendo e sumindo com actions.

Problemas com manter duas instâncias duplicadas na mesma cena.

Quero um relógio somente com as horas.

Preciso do comando javascript, que com o botão direito do mouse surge um window.alert.

Um filme feito no Flash5 abre em quem só tem o FlashPlayer 4?

Como colocar eventos de botão em um movieclip no FlashMX?

Qual exatamente é o retorno de _ymouse e _xmouse?

Pra que serve o comando MovieClip.prototype?

Script PHP para formulário em PHP + Flash.

Como reproduzo aquele efeito de espelho?
Conceitos de Programação e ActionScript.

Includes.

Load Movie into target (movieclip).

Menu infinito

Compartilhando fontes

Spectrum Analizer - Medidores de som

Entendendo como funciona um preloader - Segunda parte

GetMySQLData para Flash5 (primeira parte)

Aprendendo a interagir Flash e ASP

Objeto array - Arrays X Objetos

Macromedia Flex

Como enevoar as bordas de uma imagem no Fireworks.
Objeto loadVars

Experim draw

Efeito Blur

Duas casas decimais

Mapa - Países com B

3d rotation1

Hidden menu

Click determiner

Typing

3d shadow

Texto matrix

3d frame by frame
HOME | TUTORIAIS
Labirinto - Plataforma de jogo em terceira pessoa em flash 5: 1° parte
por Diego Stoliar Indig

Na primeira parte deste tutorial, vamos criar o personagem e uma fase (estágio) de teste, para que ele se mova. Depois adicionaremos a essa fase, uma esteira que carrega o personagem (como aquelas dos jogos antigos de Double Dragon.).


Clique no filme e mova a bola com as setas do teclado.


Serão abordados os códigos:

Funções
HitTest
Key.isDown
if
onClipEvent
movimentos de movieclip por action script (ver tutorial já existente)
e alguns outros...

   Usei o termo "Análise de script" como explicação do código, ou melhor, é a sentença de comandos que será transformada posteriormente em algorítimo (rascunho do código) e finalmente em código. Entenda a leitura do mesmo, como se você fosse o computador lendo o código: "Faça isso, verifique aquilo..."

Vamos lá

Crie um filme novo e coloque 4 camadas (layers). Cada uma com 1 frame, nessa ordem:


monitor
personagem
cenario
areas

   Crie um movieclip vazio e coloque-o no palco. Ele será o monitor de scripts (coloque-o na respectiva camada). Crie um movieclip, chamando-o de personagem no palco. Coloque-o na respectiva camada, desenhe uma bola no centro dele e dê a ele o nome de instância de "bola" (sem as aspas é claro). Na instância que está na cena do movieclip "bola" coloque o código:

onClipEvent (enterFrame) {
   if (Key.isDown(Key.UP) or Key.isDown(Key.DOWN) or Key.isDown(Key.LEFT) or Key.isDown(Key.RIGHT)) {
      mover(velocidade);
   }
   if (_root.parede.hitTest( _root.bola._x,_root.bola._y,1)==false) {
      mover(-velocidade);
   }
}

Análise do script:
No evento de clipe "enterframe", ou melhor, a cada 12 vezes por segundo (em um filme de 12fps) faça o teste para saber se alguma tecla foi pressionada (Key.isdown). A cada vez que uma tecla for pressionada verifique se ela é uma destas:

Key.UP----------seta p/ cima ou
Key.DOWN--------seta p/ baixo ou
Key.LEFT--------seta p/ esquerda ou
Key.RIGHT-------seta p/ direita


   Se isso for verdadeiro, isto é, se uma das teclas foi pressionada faça a função "mover" substituindo o parâmetro "fator" pela variável "velocidade". Veremos a seguir, superficialmente, o que são funções e seus parâmetros.

   Depois verifique (também a cada 12 vezes por segundo) se a posição _x e _y (da cruz do centro) do movieclip bola, está saindo de contato com o preenchimento do movieclip parede (HitTest == false). Se isso for verdadeiro faça a função "mover", trocando o parâmetro "fator" pelo valor contrário (negativo) da variável "velocidade". Veremos depois porque.

PARA!!! Não entendi nada!

Tudo bem, tenho algumas explicações antes de prosseguir.
O HitTest serve para verificar o contato entre dois movieclips e funciona assim:

Usam-se 3 parametros.

1 - Uma área de contato = "_root.parede.hitTest" (Nesse caso será a área do movieclip "parede")

2 - Um ponto no palco referenciado com as coordenadas _x e _y= "(_root.bola._x,_root.bola._y". Nesse caso será o ponto central do movieclip "bola".

3 - E um número referenciando qual o tipo de HitTest você quer usar:
0 = boulding Box, ou melhor, área quadrada ocupada pelo movieclip.
1 = área de preenchimento daquele movieclip (no caso o movieclip "parede" podendo ser irregular se você quiser.)

4 - Quando ocorrer o evento HitTest, o filme retornará o valor verdadeiro. Então use o código: "== false" para definir o contrário, quer dizer, quando não houver mais HitTest entre os movieclips, retorne verdadeiro.

Uma função serve, entre outras coisas, para não ser preciso escrever um código parecido com um outro duas vezes. Por exemplo:

function mover1( ){
   "ande para a direita";
}
function mover2( ){
   "ande para a esquerda";
}

Essa duas funções são bem parecidas, a não ser pela direção em que eu quero que algo se mova, certo? Isso quer dizer que eu posso escreve-las assim:

function mover(direcao){
   "ande para a" + direcao;
}

e depois chamá-las assim:

mover(direita);
mover(esquerda);

   O que estamos fazendo é colocar o código que se repete em algum frame do filme e depois iremos chamar aquele código substituindo o parâmetro da função "direcao" pelo que queremos. Esse parâmetro pode ser até uma variável ou outra função. Procure mais sobre função em outros tutoriais de flash, pois ela é um conhecimento indispensável para quem quer programar em qualquer linguagem.

   Agora abra a edição do mc bola e no primeiro frame, onde a bola esta desenhada, crie uma nova camada chamada (actions) e coloque nela o código:

velocidade=5;
function mover (fator) {
   if (Key.isDown(Key.UP)) {
      _y-=fator;
   }
   if (Key.isDown(Key.DOWN)) {
      _y+=fator;
   }
   if (Key.isDown(Key.LEFT)) {
     _x-=fator;
   }
   if (Key.isDown(Key.RIGHT)) {
      _x+=fator;
   }
}

Análise do script:
Primeiro é definida a variável "velocidade" e é dada a ela o valor fixo de 5. Essa será a velocidade em pixels no qual o personagem irá se mover. Depois é definida a função "mover" com o parametro "fator". Essa função testa qual tecla foi apertada no momento em que ela foi chamada e, dependendo da tecla, move o movieclip "bola" (que foi de onde a função foi chamada) para a direção indicada. Sabendo que o ponto _x=0 e _y=0 da cena principal esta no canto superior esquerdo do palco, podemos dizer que para mover-mos um movieclip qualquer para esquerda (ver tutorial de movimentação por action script) devemos diminuir o número de pixels da sua posição _x, correto?
Então podemos dizer tambem que:

Mover para esquerda- _x - = fator
Mover para direita- _x + = fator
Mover para cima- _y - = fator
Mover para baixo- _y + = fator

 

Nota: dizer "_x - = fator" é o mesmo que dizer "_x =_x - fator" só que com menos código.

   Sendo que o parâmetro "fator" será substituído pelo valor da variável "velocidade". Então na verdade o código ...

if (Key.isDown(Key.UP)) {
_y-=fator;
}

 ... quer dizer que, se a tecla Key.UP for pressionada (isDown) diminua da posição _y do clipe atual do valor que estiver no parametro "fator". Nesse caso será o valor "5", pois isso é quanto vale a variável "velocidade".

   Agora crie um cenário qualquer para o personagem andar, já pensando aonde ele podera passar (área andável) e aonde serão as paredes (que podem ser irregulares se você quiser) e leve em conta tembém o espaço para a esteira rolante.

   Depois crie um movieclip chamando-o de "parede" na camada "areas". O preenchimento desse movieclip dirá aonde o seu personagem PODE andar, ou melhor, saindo dele o personagem para de se mexer.

O macete

Se você colocar o preenchimento (do movieclip parede) do mesmo tamanho que o espaço que você definiu como "andável" quando desenhou o cenário, vai parecer que seu personagem está com metade do corpo dentro da parede porque o "HitTest" reconhece apenas o centro (a cruz) do movieclip. Então para que o personagem só encoste na parede (sem vazar), desenhe o preenchimento um pouco menor deixando um espaço entre ele e as paredes que você desenhou no cenário (esse espaço deve ser do tamanho da metade do personagem se a cruz estiver no meio dele, mas não se preocupe muito com isso, teste até você achar que ficou bom).

Revisando o código:
Se juntarmos os códigos que estão na instância do movieclip bola e no primeiro frame deste mesmo movieclip (que é o código da função que está acima) e fizermos uma sequência de prováveis eventos (o nome dessa técnica é "O Chines") teríamos:

1 - O jogador aciona a tecla "Para cima" (por exemplo) do teclado.

2 - O próprio movieclip que está sendo responsável por se monitorar (12 vezes por segundo), verifica a ação e aciona a função ("mover(velocidade)") que o move para cima ("_y-=fator") a 5 pixels (valor da variável "velocidade") em cada 12 vezes por segundo ("enterframe").

3 - O personagem então se move por cima do preenchimento do movieclip parede.

4 - Quando o personagem ameaça sair de cima do movieclip parede, o segundo código do movieclip bola ("if (_root.parede.hitTest( _root.bola._x...") empurra-o na direção contrária e na mesma velocidade anulando o movimento ("mover(-velocidade)").

Exemplo: se ele estivesse se movendo a 5 pixels para direita e saísse de cima do movieclip parede, seria acionada a função "mover(-velocidade)" movendo-o "-5" (menos cinco) pixels para a direita (5 pixels a cada 12 vezes por segundo é claro), ou se você preferir 5 pixels para esquerda tornando na verdade o movimento que ele esta fazendo nulo (+5-5=0). Dessa maneira o movieclip pára de se mover naquela direção.

5 - Se o jogador tentar se mover em outra direção ele conseguirá, porque o movimento só foi anulado nas direções das teclas que estavam sendo precionadas no momento em que a função com o parametro negativo ("mover(-velocidade)") foi chamada.

   Se você testar o filme, seu jogo já deve estar funcionando. Vamos então criar a esteira fazendo um movieclip dela se mexendo (a esteira animada) e que não precisa ter mais do que dois frames para dar a sensação de movimento sem comprometer o tamanho do jogo.
Coloque-a na camada "cenario" em cima do que você já desenhou é claro! Modify>Arrange>Bring to Front.

   Na camada "areas", coloque um movieclip, com nome de instância "esteira", em cima do movieclip "parede" (Modify>Arrange>Bring to Front). Agora volte para cena e no movieclip monitor coloque o código:

onClipEvent (enterFrame) {
   if (_root.esteira.hitTest( _root.bola._x, _root.bola._y,1)) {
      _root.bola.mover(velocidade+5);
      _root.bola._y+=5;
   }
}

Analise do script:
A cada 12 vezes por segundo, faça o teste para verificar se o centro do movieclip bola está em cima do preenchimento (HitTest com parâmetro=1) do mopvieclip "esteira". Se isso for verdadeiro, faça com que o o movieclip se mova com o dobro da velocidade (velocidade+5). Isso fará com que o jogador escorregue se tentar se mover sobre a esteira, como se ele perdesse o equilíbrio ou como se ela fosse de gelo, e some 5 pixels a posição _y desse movieclip. Isso fará com que o movieclip seja carregado para baixo, mesmo que o jogador não pressione as teclas de direção.

   Pronto, uma fase de teste, um personagem e uma esteira rolante. Agora é só estudar mais sobre como movimentar o personagem fazendo teste, como por exemplo, usar memos velocidade na esteira "_root.bola.mover(velocidade-3);". Isso fará com que pareça que ele se move mais devagar.

   Os códigos em azul podem ser recortados e colados caso você queira usá-los.
È possível diminuir o filme não utilizando movieclip "monitor" e nem sua camada e algumas outras partes do tutorial, mas precisaremos deles na continuação desse jogo.

Plataforma de jogo em terceira pessoa em flash 5: 2° parte-Aguardem!!!

Espero que este tutorial tenha sido útil. Até á próxima! Baixe aqui o arquivo exemplo desse tutorial.



Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
0 comentário