JOTA LAGO (40 pts)

EDUARDO WALMOTT (226 pts)

JONAS GALVEZ (521 pts)

MAURO ROCHA TAVARES (40 pts)

DAUTON JANOTA (255 pts)

AMAURY BENTES (123 pts)

RICARDO TEIXEIRA (40 pts)

FÁBIO DUARTE (79 pts)

RICARDO TAKAHASHI (180 pts)

GABRIEL SPORCH (53 pts)

RÔMULO NUNES (32 pts)

STICKMAN (155 pts)
Treinamento PontoFlash de Flash e ActionScript

Como fazer com que a rotação de um ponteiro demore 10 segundos?

Eu estou usando para toolTip um código simples usando o método createTextField.

Como faço para parar cada cena da minha animação, esperando a pessoa teclar ENTER ou qualquer tecla?

Preciso integrar uma animação do Flash numa index criada no Fireworks.

Como pegar os valores de vários registros de um banco de dados e grava-las num Array no Flash?

Como eu faço para checar quantas pessoas estão online no meu site?

Quero uma seqüência de fotos passando continuamente sem intervalos.

Algumas dicas sobre Fontes.

Como fazer um objeto se movimentar pelo teclado (UP, DOWN, Left e Rigth)?

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

Como vestir um modelo com objetos (roupas) arrastáveis?

Contagem regressiva de data

Como importar um texto de um TXT rolando no palco e parando no mouseOver e evitando o cache?

Problemas com executáveis em MAC.
Configurando o FTP do Dreamweaver MX

Funções de actionscripts

Botão Radio.

Objeto XML - introdução.

Quando usar vetor ou bitmap?

Macromedia Flex

Shapes arredondados no PhotoShop.

Desenhando um avião no Flash

Flash Communication Server MX - Primeira Parte

Executar funções de JavaScript (Flash+JavaScript).

Line Draw.

Desenhando uma linha entre dois pontos no Flash 5.
Click determiner

Giros color

Gettimer

Logos caindo

Strolling menu

Menu popop de pastas

Outlines

Frameload

Farois

Mouse Position

Vela

Old film countdown
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