Como movimentar um objeto utilizando as teclas (up,down,left,right) – Parte 02

 

Objetivo:

Olá pessoal, bem como prometido anteriormente vamos incrementar nossa animação, nossa joaninha personagem da nossa animação até o momento está se movimentando perfeitamente em todas as direções através das teclas de direção do teclado, e ainda possui um modo de velocidade (rápido e lento) que você ativa através de um botão comutador (botão com duas funcionalidades), pois bem nos introduziremos um efeito bem legal para dar um realce na velocidade da joaninha quando está estiver no modo velocidade rápida. Feito isso delimitaremos uma área que a nossa joaninha ficará visível.

 

Pré-requisitos: Conhecimento básico em Action Script(programação no flash).

 

1º Passo: Primeiramente com o documento referente à primeira parte do tutorial aberto,  altere as seguintes propriedades pressionando a tecla de atalho CTRL+J:

 

550 Largura(Width) x 400 Altura(Height);

Cor de fundo(background color): Preta;

 

2º Passo: Copie do Word a imagem de fogo abaixo:

 

Fundo Brando	Fundo Preto
Bem eu aconselho, usar a imagem de fundo preto, logicamente porque o nosso fundo é preto.

 

Mas, antes de colar no flash, clique com o lado direito do mouse sobre o clipe de filme da joaninha e escolha a opção edit in place(edite no palco), cole agora no flash a imagem de fogo, pois está será usada no nosso exemplo, após inserir a imagem no flash, selecione a imagem e pressione a tecla de atalho F8 e selecione a opção clipe de filme(movie clipe), indique também o nome que o clipe de filme vai receber na biblioteca, com o nosso clipe de filme(movie clipe) do fogo selecionado aperte a tecla de atalho CTRL+F3 para acessar o painel de propriedades se este não estiver ativo, e insira no local mostrado na figura abaixo o nome fogo que será usado na parte de programação, posicione a imagem para que ela fique como a figura abaixo:  

 

 

Explicação: Bem, vamos lá nos inserimos uma imagem de fogo que será usada para dar a impressão de super velocidade a nossa joaninha, inserimos ela dentro do clipe de filme da joaninha, pois está imagem agora fará parte do clipe de filme da joaninha, ou seja, ao movimentar a joaninha automaticamente o clipe de filme fogo também será movimentado juntamente com o clipe de filme da joaninha. Mas terá as suas propriedades independentes da joaninha como veremos adiante.

 

3º Passo: Após ter feito isso insira o seguinte código no clipe de filme da joaninha que já possui o fogo incorporado a ele, o código abaixo é o código completo da animação, ou seja, já possui o código do primeiro tutorial, mas se desejar inserir somente o código que foi explicado neste tutorial este está em negrito, não se esqueça de que a parte que não está documenta nem explicada neste código já foi explicada no Tutorial sobre movimento – Parte 01.

 

/* ao carregar o clipe de filme seta a variável x responsável por
controlar a velocidade da joaninha com dez, ou seja deixa ela inicialmente no
modo velocidade lenta */

onClipEvent (load) {

// variavel responsável por controlar a velocidade do clipe de filme

x = 10;

}

 

//Fica a todo momento checando se alguma tecla foi pressionada
onClipEvent (enterFrame) {

 

/*  ao pressionar o botão propulsor e este estiver no modo lento, a variável x
receberá 70, deixando a velocidade da joaninha no modo rápido, o contrário
também e verdade */

if (_root.propulsor == 0) {

 

x = 70;

/* deixa o nosso clipe de fogo visível quando o nosso botão comutador é ativado */

fogo._visible = 1;

 

} else {

 

//p/ movimentar de forma lenta

x = 10;

/* deixa o nosso clipe de fogo invisível quando o nosso botão comutador é desativado */

fogo._visible = 0;

}

 

/* se nenhuma das teclas abaixo não forem pressionadas ele seta a propriedade _visible do clipe de filme fogo com 0, ou seja deixa a mesma invisível */

if ((!Key.isDown(Key.RIGHT)) && (!Key.isDown(Key.DOWN)) && (!Key.isDown(Key.LEFT)) && (!Key.isDown(Key.UP))) {

 

/* mesmo com o nosso clipe de filme fogo visível quando o usuário ativar o botão comutado no modo rápido, o fogo só ira aparecer assim que for pressionado uma das teclas de direção(direita(RIGHT), esquerda(LEFT), cima(UP), baixo(DOWN)), do contrário ficará com se estivesse inativo(invisível). */

fogo._visible = 0;

}

 

if (Key.isDown(Key.RIGHT)) {

_x = _x+x;

_rotation = 90;

 

} else if (Key.isDown(Key.DOWN)) {

_y = _y+x;

_rotation = 180;

 

} else if (Key.isDown(Key.LEFT)) {

_x = _x-x;

_rotation = 270;

 

} else if (Key.isDown(Key.UP)) {

_y = _y-x;

_rotation = 0;

}

if ((Key.isDown(Key.LEFT)) && (Key.isDown(Key.UP)) && (!Key.isDown(Key.RIGHT)) && (!Key.isDown(Key.DOWN))) {

_rotation = 315;

_y = _y-x;

}

 

if ((Key.isDown(Key.RIGHT)) && (Key.isDown(Key.UP)) && (!Key.isDown(Key.LEFT)) && (!Key.isDown(Key.DOWN))) {

_rotation = 45;

_y = _y-x;

}

 

if ((Key.isDown(Key.LEFT)) && (Key.isDown(Key.DOWN)) && (!Key.isDown(Key.RIGHT)) && (!Key.isDown(Key.UP))) {

_rotation = 225;

_x = _x-x;

}

 

if ((Key.isDown(Key.RIGHT)) && (Key.isDown(Key.DOWN)) && (!Key.isDown(Key.LEFT)) && (!Key.isDown(Key.UP))) {

_rotation = 135;

_y = _y+x;

}

}

 

Antes de prosseguir pressione a tecla de atalho CTRL+ENTER para testar o filme, e faça os testes pressionando as teclas de direção, após acionar o botão comutador  verifique se o fogo está aparecendo, se tudo estiver ok vamos prosseguir com a nossa animação.

 

4º Passo: Como comentado acima delimitaremos uma área de visibilidade do nosso clipe de filme da joaninha, ou seja, ela ficará visível somente na área correspondente ao tamanho do nosso documento, para isso, crie uma nova camada e lhe de o nome de mascara como indicado na figura abaixo:

 

 

 

Feito isso, crie um quadrado no 1º quadro chave(KeyFrame) da camada mascara, clicando sobre a ferramenta Rectangle Tool() ou pressione a tecla de atalho(R) para ativa-lá, altere as suas propriedades de Largura e Altura para que possuam a mesma altura e largura do documento, ou seja, 550 largura x 400 altura e o posicione na posição x = 0 e y =0, não se esqueça este quadrado deve possuir um fundo, importante o clipe de filme da joaninha deve estar na camada joaninha.

 

Clique com o lado direito do mouse sobre a camada mascara e escolha a opção Mask (mascara). As suas camadas devem ficar como a figura acima.

 

Insira o seguinte código dentro do clipe de filme da joaninha para isso selecione o clipe de filme da joaninha e pressione a tecla de atalho F9 e insira o seguinte código antes da última chave do OnClipEvent(EnterFrame) :

 

/* verifica se a posição atual do clipe de filme da joaninha, ultrapassou a esquerda do quadrado  a posição -127.2 que delimita o nosso quadrado a esquerda, caso tenha o posiciona do outro lado no inicio do quadradro a direita na posição 550.0 */

if (_x<-127.2)

{

_x = 550.0;

}

 

/* verifica se a posição atual do clipe de filme da joaninha ultrapassou a direita do quadrado a posição 550.0 que delimita o nosso quadrado a direita, caso tenha o posiciona do outro lado no inicio do quadradro a esquerda na posição -127.2 */

else if (_x>550)

{

_x = -127.2;

}

 

/* verifica se a posição atual do clipe de filme da joaninha ultrapassou a parte superior do quadrado a posição -143 que delimita o nosso quadrado na parte superior, caso tenha o posiciona do outro lado no inicio do quadro na parte inferior na posição 400 */

else if (_y<-143)

{

_y = 400;

}

 

/* verifica se a posição atual do clipe de filme da joaninha ultrapassou a parte inferior do quadrado a posição 400 que delimita o nosso quadrado na parte inferior, caso tenha o posiciona do outro lado no inicio do quadro na parte superior na posição -143 */

else if (_y>400)

{

_y = -143;

}

 

5º passo: Teste a animação, e crie uma nova camada acima da camada mascara e lhe de o nome de borda e insira um quadrado sem fundo com as mesmas dimensões do documento, ou seja, 550 Largura(Width) x 400 Altura(Height) e o posicione na posição x = 0 e y =0 isto no 1º quadro chave(KeyFrame) desta camada, isto para realçar os limites de movimento da joaninha.

 

Espero que vocês tenham gostado, agora é só usar a imaginação para dar novas funcionalidades a esta animação.

ASP BÁSICO Cálculo de Frete Internacional com ASP e Access Sistema de Login com ASP 3.0 usando três camadas – Parte 1 Sistema de Login com ASP 3.0 usando três camadas – Parte 2 Sistema de Login com ASP 3.0 usando três camadas – Parte 3 Sistema de Login com ASP 3.0 usando três camadas – Parte 4 Sistema de Login com ASP 3.0 usando três camadas – Parte 5 Sistema de Login com ASP 3.0 usando três camadas – Parte 6 Sistema de Login com ASP 3.0 usando três camadas – Parte 7 Sistema de Login com ASP 3.0 usando três camadas – Parte 8 Sistema de Login com ASP 3.0 usando três camadas – Parte 9 Sistema de Login com ASP 3.0 usando três camadas – Parte 10 ASP 3.0 utilizando 3 camadas - Parte 1 ASP 3.0 utilizando 3 camadas - Parte 2 ASP 3.0 utilizando 3 camadas - Parte 3 COLDFUSION Criando um formulário em Flash usando o ColdFusion MX 7 FLASH - ACTIONSCRIPT Movimentar objeto – Parte 01 Movimentar objeto – Parte 02 Jogo – Acerte o Alvo Como Movimentar um Objeto utilizando Botões Exibir frases Aleatórias Ações Básicas do ActionScript Criando Botões com MovieClip no Flash Criando Links em Botões Flash Integrando Flash com Fireworks na Criação de Botões Interpolação Motion (Movimento) Interpolação Shape (Forma) Principais Eventos do Mouse (Flash/ActionScript) Criando Máscaras no Flash (Mask) Parte 1 Criando Máscaras no Flash (Mask) Parte 2 Galeria de Fotos Carregando Arquivos Externos (Flash e ActionScript) PHP BÁSICO Introdução ao PHP Lógica em PHP Trabalhando com Formulários HTML Utilizando Arquivos – Criando um Scrap Book Banco de Dados em Arquivos Texto PHP - Sistema de busca de preços - Parte 1 PHP - Sistema de busca de preços - Parte 2 PHP - Sistema de busca de preços - Parte 3 PHP - Sistema de busca de preços - Parte 4 PHP - Sistema de busca de preços - Parte Final Primeiros Scripts Guardando dados em memória Um pouco mais sobre variáveis Manipulando variáveis Estruturas de controle - Parte 1 Estruturas de controle - Parte 2 Estruturas de controle - Parte 3 Estruturas de controle - Parte 4 Estruturas de controle - Parte 5 Criação de Funções no PHP Funções – Um pouco mais Sobre Parâmetros - Parte 1 Funções – Um pouco mais Sobre Parâmetros - Parte 2 Funções – Alguns Truques Funções – Últimos Truques Arrays – Noções Básicas Arrays – Um pouco Mais Sobre Criação de Arrays

PHP COM BANCO DE DADOS Criando um Sistema Ficha Cadastral Clientes - Parte 1 Criando um Sistema Ficha Cadastral Clientes - Parte 2 Criando um Sistema Ficha Cadastral Clientes - Parte Final Controle Horarios Funcionários - Parte 1 Controle Horarios Funcionários - Parte 2 Controle Horarios Funcionários - Parte 3 Controle Horarios Funcionários - Parte 4 Controle Horarios Funcionários - Parte 5 Controle Horarios Funcionários - Parte 6 Controle Horarios Funcionários - Parte 7 Controle Horarios Funcionários - Parte 8 Controle Horarios Funcionários - Parte 9 Controle Horarios Funcionários - Parte 10 Controle Horarios Funcionários - Parte 11 Controle Horarios Funcionários - Parte 12 Controle Horarios Funcionários - Parte 13 - Conclusão Instalando o PHP no Windows XP Instalando o MySQL no Windows XP Sistema Controle Extintores -Parte 1 Sistema Controle Extintores -Parte 2 Sistema Controle Extintores -Parte 3 Sistema Controle Extintores -Parte 4 Sistema Controle Extintores -Parte 5 Sistema Controle Extintores -Parte - Conclusão PHP - Controle dos Correios - Parte 1 PHP - Controle dos Correios - Parte 2 PHP - Controle dos Correios - Parte 3 PHP - Controle dos Correios - Parte 4 PHP - Controle dos Correios - Parte 5 PHP - Controle dos Correios - Parte 6 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 2 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 3 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 4 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 5 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 6 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 7 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 8 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 9 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 10 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 11 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 12 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 13 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 14 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 15 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 16 JAVASCRIPT BÁSICO JavaScript Básico - Lição 1 JavaScript Básico - Lição 2 JavaScript Básico - Lição 3 JavaScript Básico - Lição 4 JavaScript Básico - Lição 5 JavaScript Básico - Lição 6 JavaScript Básico - Lição 7 JavaScript Básico - Lição 8 - Instruções If e Else JavaScript Básico - Lição 9 - Tópicos Diversos JavaScript Básico - Lição 10 - Objetos Math e Date JavaScript Básico - Lição 11 - Trabalhando com o objeto Browser JavaScript - Criando Seus Próprios Objetos JavaScript - Virtual Earth – Primeiro Passo JavaScript - Virtual Earth – Segundo Passo