LUIZ AVANCI (51 pts)

LUIZ HERRERA (117 pts)

RICARDO TEIXEIRA (40 pts)

PEDRO CLAUDIO (50 pts)

ÉMERSON ROCHA (85 pts)

JOÃO NETO (78 pts)

RÔMULO NUNES (32 pts)

BÁRBARA TOSTES (64 pts)

MARLOS ALVES CARMO (90 pts)

AMAURY BENTES (123 pts)

ALEXANDRE PORTO (1281 pts)

IRAPUAN MARTINEZ (45 pts)
Treinamento PontoFlash de Flash e ActionScript

Tem como fazer um loading do loadVariables?

Porque o meu AVI no Flash só mostra o primeiro frame?

Como, num tweeningMotion, fazer o filme parar num frame com uma label?

Preciso mudar a direção de um movimento via actionscript.

Preciso fazer um movieclip rodar ao contrário (retroceder).

Como otimizar um filme no Flash?

Como inserir um flash numa pagina html de sem background ou transparente?

Como dar um efeito alpha gradativamente, como se fosse um motion?

Você define uma variável para cada Movie Clip ou ela é Global? Posso acessar minha variável de qualquer lugar do meu timeline principal?

Como faço um sistema de banners aleatórios?

FlashDecompiler

Como faço para que um objeto fique com efeito de elástico?

Como aumentar e diminuir um objeto usando o teclado? Dicas de Listeners (ouvintes)

Como saber se uma variável externa foi carregada?
Line Draw

Degradé com tons metálicos - Fireworks

Roof e Marciowebmaster - Avaliação de sites

Preloader real no Flash5.

Integrando o Flash com Tecnologias Externas.

Context Menu - usando o botão direito do mouse

Duplicate Movieclip.

Plugins variados para seu trabalho em design

Trace Bitmap.

Animação no Flash

Fireworks, o patinho feio da Macromedia.

Elasticidade com ActionScript.
Texto html

Menu rotativo

Abrir fundo

Triangulos2

ComboBox duplo

Mouse Hide

Preloader marquee

Menu folder

Lineas

Tweeneng com alpha

Alfabetar com colunas

Efeito MTV
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