ZECA BALA (45 pts)

NILTON BICALHO (61 pts)

DANIELA PIRES (86 pts)

GÉRIO (93 pts)

JOTA LAGO (40 pts)

ZEBEDIAH (35 pts)

JOÃO NETO (78 pts)

SYDNEY GANHO (60 pts)

BÁRBARA TOSTES (64 pts)

MARLOS ALVES CARMO (90 pts)

AUTOR DESCONHECIDO (100 pts)

MUZAK (45 pts)
Treinamento PontoFlash de Flash e ActionScript

Tem algum truque para diminuir o tamanho do meu site?

Como colcar no flash um botão que tenha a função voltar do navegador?

Como faço para abrir uma janela popup referente a resolução do usuário?

Alguém poderia me explicar o funcionamento do comando duplicatemovie?

Como fazer um botão desligar o som com um clique e ligar com outro clique sobre ele mesmo?

Como usar os métodos de desenho do Flash?

Como eu faço para retornar um número inteiro?

Como mostrar apenas 50 caracteres de um texto que tem 300?

Como faço para fazer um drag and drop com um botão fechar.

Existe um modo de fazer tellTarget em vários MCs ao mesmo tempo?

Tem alguma técnica pra eu rodar um imagem em 360º no flash?

Tem como encontrar um determinado texto numa string?

Como bloquear o código fonte HTML de sua página?

Tem como chamar informações de um XML randomicamente no Flash?
A história do Flash.

Motion Blur.

Introdução ao Droptarget

Menu com tooltip usando actionscript.

Criação de letras transparentes - Fireworks

0wn3d Again BY Destution Team

Load Múltiplos.

Scroll Text.

Jogo dos 7 erros.

Detectando funções de browser usando ASP

Interseções com objetos planos

Shared object.
Drag Mask

Rolagem no over

Tabela periodica

Engrenagens 1

Barneys menu

Airos 1

Soundpan_f5

Drag and zoom

F5 loading scene

Criptografia

Easy preloader

Focus
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