LEANDRO AMANO (83 pts)

JONAS GALVEZ (521 pts)

ILVA RUDEV (90 pts)

RICARDO FIGUEIRA (33 pts)

ZEBEDIAH (35 pts)

LUIZ HERRERA (117 pts)

RICARDO TAKAHASHI (180 pts)

ZECA BALA (45 pts)

PANDOGO (82 pts)

RÔMULO NUNES (32 pts)

EDUARDO CARREGA (150 pts)

SYDNEY GANHO (60 pts)
Treinamento PontoFlash de Flash e ActionScript

Tenho vários objetos e queria fazê-los aleatoriamente mudar a propriedade alpha.

Como fazer um rastro (mouse trial), mas que as cópias ainda variassem o alpha.

Como mostrar apenas 50 caracteres de um texto que tem 300?

Softwares úteis para desenvolver junto ao flash:

Como posso dessaturar uma foto para seus níveis de preto e branco?

Alguém sabe como evitar o cachê da máquina do usuário para um SWF?

Pra galera que curte Animação Clássica em Flash...

Um filme feito no Flash5 abre em quem só tem o FlashPlayer 4?

Estou tentando fazer uma linha aparecer. Tipo o R do lápisraro (www.lapisraro.com.br). No meu caso é a letra S.

Como fazer um formulário no FlashMX com ASP?

Quero montar um gráfico de barras que ao rodar o filme, fossem crescendo.

Começando a entender o evento onResize do objeto Stage.

Estou com uma dúvida pra setar as coordenadas para o MC.

Preciso de um programa para criar fontes.
RIA, Macromedia Flex e Laszlo Presentation Server

Loop infinito

Botão avançar e recuar.

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

O "X" do MacOS no PhotoShop

Includes.

Code Animation - Parte 2

Sistema de busca utilizando Flash + ASP .

Relógio analógico

Desvendando cookies

3D Wireframe - segunda parte

Animação no Flash
Drawline

Number sorter

Spectrum Sound Analyzer

Marquee

Texturedtriangle

Rotating puzzle

Overscroll

ICQ

Text fx1

Ball & shad

Mapa - Países com E

Céu estrelado
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