RODRIGO AMARAL (56 pts)

AUTOR DESCONHECIDO (100 pts)

ZECA BALA (45 pts)

GABRIEL SPORCH (53 pts)

NETO LEAL (116 pts)

SYDNEY GANHO (60 pts)

RICARDO TEIXEIRA (40 pts)

JONAS GALVEZ (521 pts)

RICARDO TAKAHASHI (180 pts)

FÁBIO DUARTE (79 pts)

MUZAK (45 pts)

KEN AWAMURA (130 pts)
Treinamento PontoFlash de Flash e ActionScript

Como tornar palavras inseridas em um scroll em links clicáveis?

Tem como eu fazer um scroll de texto com imagem junto?

Como tornar um objeto com alpha zero quando eu clicar em um dos outros itens?

Como checar o preenchimento de um campo de texto?

Como eu faço para configurar uma pausa (delay)dinamicamente no filme?

Um preload (carregador) para carregar swf, jpg, mp3, txt, asp, php e xml.

Um movie que está no _level0 pode ler uma variável que está no _level1 repetidamente?

Como faço para concatenar uma variável e uma String? Com eval?

Como fazer que num movie tenha três músicas, onde eu posso parar e continuar de onde ela parou?

Como fazer com que objetos se movimentem repicando nos limites do palco?

Quero colocar um som de fundo sem interrupções ou cortes.

Como trazer do SQL uma imagem independente de sua extensão?

Qual a maneira de colocarmos uma figura (gif) como plano de fundo em um fla?

Como bloquear o código fonte HTML de sua página?
Criando uma nova categoria (paleta) na Barra Insert do seu Dreamweaver.

Load Movie no FlashMX (swf, jpg e mp3).

Event Handlers (identificadores de eventos).

Formulário usando Flash e PHP

Como fazer uma panorâmica 360º com Flash e CorelDraw

Simulando 3D.

RIA, Macromedia Flex e Laszlo Presentation Server

Alternando janelas no Flash.

Degradé com tons metálicos - Fireworks

Integrando o Flash com Tecnologias Externas.

Como usar o Flash com o FrontPage?

Introdução ao Droptarget
3d bounce

Clip Over e Out

Combobox

Preloader avançado

Tabela periodica

Soundpan_f5

Barco no hit

Typing

Preload com ampulheta

Pista de corrida

Mapa do brasil

Loop FOR declarando variáveis
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