DANIELA PIRES (86 pts)

PANDOGO (82 pts)

RICARDO FIGUEIRA (33 pts)

RÔMULO NUNES (32 pts)

KEN AWAMURA (130 pts)

BÁRBARA TOSTES (64 pts)

FLASHGURU (155 pts)

GABRIEL SPORCH (53 pts)

MARCOS JOSÉ PINTO (44 pts)

DENIS CARAVALHO (85 pts)

MAURO ROCHA TAVARES (40 pts)

GUILHERME SCHEIBE (49 pts)
Treinamento PontoFlash de Flash e ActionScript

Como alterar a cor de um texto dinâmico dependendo do foco?

Dica sobre o uso de cenas.

Preciso de um exemplo de um efeito de vibração?

Como criar uma seqüência para a tecla TAB num formulário?

Dá para fazer animações 3D no Flash?

Exempo de formulário de email interagindo Flash e ASP.

Quero fazer uma animação quando o mouse passa por cima do botão.

Tenho alguns arquivos em flash que gostaria de imprimir.

Quero estabelecer as coordenadas para onde um movieclip irá entrar na tela.

Como esconder o cursor (a mãozinha) quando ele passar por cima do botão?

Como alterar a velocidade de um movieclip sem alterar a taxa de quadros por segundo (frame rate)?

É possível usar campos dinâmicos em uma máscara?

Criar SWF em tempo de execução, ou seja, criar SWF a partir de PHP.

Como abrir uma janela pop-up tamanho fullscreen?
Programando objetos 3D em Plataformas 2D como a do Flash

Includes.

Interseções com objetos planos

Grade sonora.

Alterar a parência dos componentes do FlashMX.

Sistema de busca utilizando Flash + ASP.

Envio de um arquivo SWF por e-mail

Classe TransitionAnime e Painel TransitionAnimeEffect

Login e senha

Detectando funções de browser usando ASP

Site da banda os Titãs - Avaliação de sites

Funções SetInterval e clearInterval no FlashMX.
Loader Total

Arion 3

Ponto e inércia

Mouse recorder

3d bounce

DragVariable

Set focus

Random

3d Flash

Transportes

Load image

Dots2a
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