RICARDO TAKAHASHI (180 pts)

ILVA RUDEV (90 pts)

SÁVIO PONTE (39 pts)

RODRIGO AMARAL (56 pts)

ZECA BALA (45 pts)

FLASHGURU (155 pts)

JOÃO NETO (78 pts)

MARLOS ALVES CARMO (90 pts)

GUILHERME SCHEIBE (49 pts)

MUZAK (45 pts)

GUILHERME G.G. (137 pts)

DENIS CARAVALHO (85 pts)
Treinamento PontoFlash de Flash e ActionScript

Como arrastar um swf com uma foto, aberto com load movie?

Projetores, barra de ferramentas e molduras.

Quero alterar a ordem de movimentação da tecla tab num formulário.

Detector de FlashPlayer.

Quero que a hora, minutos e segundos de meu relógio tenham sempre duas casas decimais

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

Como abrir um filme por load movie em uma determinada posição?

Como faço para alternar movieclips invisíveis e na mesma hora começar a rodar.

É possível carregar um filme (loadmovie) numa cena determinada?

Qual o significado de um Array para a programação no Flash?

Mais dicas para otimizar seu Flash Movie.

Como fazer os botões desse site? http://themmgroup.com

O que fazer para que um objeto se afaste do mouse.

Como eu faço para configurar uma pausa (delay)dinamicamente no filme?
Animação com TextFields Dinâmicos

Desenhando no Flash.

Mascara animada no Flash MX

Bookmak (Adicionar a favoritos).

A história do Flash.

Atenuação (easing).

Shapes arredondados no PhotoShop.

Objeto Movieclip - Propriedades

Spectrum Analizer - Medidores de som

Flash e Banco de Dados.

Variáveis de arquivos de texto.

Criando um objeto para sua paleta personalizada (NINJA)
Scrollbar easy

Calculadora

3dbuilderv

Luz

Pintar2

Raysoflight 2

Menu aberto

Receber XML

Colorpicker

Cubos vivos

Tension

Rater1
HOME | TUTORIAIS
Controlando MovieClip pelas teclas direcionais.
por Ricardo Teixeira

Nessa matéria vamos ver como controlar um MovieClip com as setas do teclado. Mas além das posições x e y controlaremos também o ângulo de rotação do MovieClip.

O Primeiro passo é criar o MovieClip. Ao criar o MovieClip, temos que prestar atenção no local que será a "frente", a face principal que usaremos de referência ao mover o MovieClip. A face principal do MovieClip, em relação a propriedade angular, é aquela que esta virada para o lado direito do palco quando o MovieClip é criado. Para nosso exemplo também deve-se prestar atenção no Registration do MovieClip pois ele é o eixo de rotação. Use o Registration centralizado no MovieClip. Usarei como exemplo um triângulo como mostra a figura abaixo:

Nosso MovieClip terá nome de instância movel_mc. Inicialmente criaremos o evento onEnterFrame para que seja capturada a movimentação na velocidade (fps) do filme. Para criar o onEnterFrame use, no frame 1:

movel_mc.onEnterFrame = function () {

};

Será dentro das chaves onde o bloco de ações referentes ao controle do MovieClip será criado. Agora vamos definir a rotação do MovieClip em seu proprio eixo:

movel_mc.onEnterFrame = function () {
   if (Key.isDown(Key.RIGHT)) {
      this._rotation += 5;
   } else if (Key.isDown(Key.LEFT)) {
      this._rotation -= 5;
   }
}

A tecla "seta para direita" rotaciona o MovieClip no sentido horário e a tecla "seta para esquerda" rotaciona o MovieClip no sentido ante-horário incrementando (+=) ou decrementando (-=) seu ângulo, em relação ao seu eixo, de 5 unidades. Faremos, então, a movimentação do nosso MovieClip para frente e para trás. Para isso devemos utilizar o cosseno (para o eixo x) e o seno (para o eixo y) do angulo do nosso MovieClip. Para mover no eixo x, a propriedade x (_x) do MovieClip será ela mesma mais o cosseno do angulo do MovieClip. Então seria:

this._x += Math.cos(angulo do MovieClip);

Então poderíamos simplesmente fazer:

this._x += Math.cos(this._rotation);

Porém o método Math.cos() não aceita grau como parâmetro mas sim radiano. Então converteremos _rotation para radiano da seguinte forma:

rad = Math.PI / 180 * this._rotation;

Agora sim podemos utilizar o cosseno. Sendo assim ficaria;

this._x += Math.cos(rad);

No nosso código devemos colocar o incremento de _x para acontecer quando pressionarmos a tecla "seta para cima". Ficaria da seguinte forma:

movel_mc.onEnterFrame = function () {
   if (Key.isDown(Key.RIGHT)) {
      this._rotation += 5;
   } else if (Key.isDown(Key.LEFT)) {
      this._rotation -= 5;
   }
   rad = Math.PI / 180 * this._rotation;
   if (Key.isDown(Key.UP)) {
      this._x += Math.cos(rad);
   }
}

Para a propriedade y (_y) o raciocínio é o mesmo só que usaríamos o seno ficando da seguinte forma:

movel_mc.onEnterFrame = function () {
   if (Key.isDown(Key.RIGHT)) {
      this._rotation += 5;
   } else if (Key.isDown(Key.LEFT)) {
      this._rotation -= 5;
   }
   rad = Math.PI / 180 * this._rotation;
   if (Key.isDown(Key.UP)) {
      this._x += Math.cos(rad);
      this._y += Math.sin(rad);
   }
}

Se você fizer o teste perceberá que a movimentação do MovieClip será bastante lenta. Isso porque os valores seno e cosseno são bastante pequenos. Para resolver isto basta multiplicar cada valor (seno e cosseno) por um mesmo valor. Usarei 5 que é bastante razoavél.

movel_mc.onEnterFrame = function () {
   if (Key.isDown(Key.RIGHT)) {
      this._rotation += 5;
   } else if (Key.isDown(Key.LEFT)) {
      this._rotation -= 5;
   }
   rad = Math.PI / 180 * this._rotation;
   if (Key.isDown(Key.UP)) {
      this._x += Math.cos(rad) * 5;
      this._y += Math.sin(rad) * 5;
   }
}

Não podemos esquecer que nosso MovieClip pode precisar "dar ré". Então adicionamos esta condição para a tecla "seta para baixo" da mesma forma que foi para a movimentação para frente só que dessa vez vamos decrementar os valores de _x e _y:

movel_mc.onEnterFrame = function () {
   if (Key.isDown(Key.RIGHT)) {
      this._rotation += 5;
   } else if (Key.isDown(Key.LEFT)) {
      this._rotation -= 5;
   }
   rad = Math.PI / 180 * this._rotation;
   if (Key.isDown(Key.UP)) {
      this._x += Math.cos(rad) * 5;
      this._y += Math.sin(rad) * 5;
   } else if (Key.isDown(Key.DOWN)) {
      this._x -= Math.cos(rad) * 5;
      this._y -= Math.sin(rad) * 5;
   }
}

Pronto! Agora nosso MovieClip pode se movimentar na direção que nós quisermos.

Recaptulando:

//Cria o evento para a ação de acordo com a //velocidade do filme
movel_mc.onEnterFrame = function () {
//Gira o MovieClip em seu próprio eixo
   if (Key.isDown(Key.RIGHT)) {
      this._rotation += 5;
   } else if (Key.isDown(Key.LEFT)) {
      this._rotation -= 5;
   }
   //Guarda o ângulo do MovieClip
   rad = Math.PI / 180 * this._rotation;
   //Incrementa e decrementa as propriedades
   // x e y do MovieClip
   if (Key.isDown(Key.UP)) {
      this._x += Math.cos(rad) * 5;
      this._y += Math.sin(rad) * 5;
   } else if (Key.isDown(Key.DOWN)) {
      this._x -= Math.cos(rad) * 5;
      this._y -= Math.sin(rad) * 5;
   }
}

abraços!



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
1 comentário


Comentário de Rodrigo
| 17/11/2012 - 19:45 |


Olá Ricardo. Muito legal a movimentação do movieclip e a explicação. Agora como eu faço para o movieclipe se movimentar em quanto mantenho a tecla pressionada e parar quando soltar.É que estou fazendo um jogo de luta em que o boneco é um movie clipe e quando ele anda para frente através da tecla pressionada e quando solta ele para. Como será que faz isso? Beleza obrigado