Como movimentar um objeto usando Botões

 

Olá pessoal, recebi um e-mail solicitando que eu fizesse um exemplo semelhante aos tutoriais sobre movimento que já escrevi, só que com uma diferença ao invés de movimentar o objeto através das teclas do teclado usaremos botões contidos na nossa animação para movimentar o objeto.

 

Objetivo:

Como dito anteriormente movimentaremos um objeto, usando botões contidos na nossa animação e para finalizar alteraremos a velocidade do objeto através de um campo contido na nossa animação.

 

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

 

1º Passo: Crie um novo documento pressionando as teclas de atalho CTRL+N e altere as suas propriedades pressionando as teclas de atalhos CTRL+J:

 

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

Cor de fundo(background color): Preta;

 

2º Passo: Salve está imagem no seu computador, pois está imagem será usada no nosso exemplo:

 

 

Após inserir a imagem da joaninha no documento selecione a imagem e pressione a tecla de atalho F8 e escolha a opção movie clip(clipe de filme) para converter a imagem em um clipe de filme, insira o nome joaninha no campo name(nome), pois este será o nome usado na biblioteca. Altere as propriedades do movie clip(clipe de filme) da joaninha como mostra a figura abaixo, para isso pressione as teclas de atalho CTRL+F3 para ativar o painel de propriedades caso ele esteja desativado.

 

 

3º Passo: Vamos inserir os botões que serão usados para movimentar o clipe de filme da joaninha pelo nosso documento, bem eu optei por usar os botões prontos da biblioteca do próprio flash localizados:

 

Flash Mx Professional 2004: Window -> Other Panels ->Common Libraries->Buttons;

Flash MX: Janela -> Bibliotecas Comuns -> Botões

 

Se alguém quiser criar os próprios botões fica ao gosto do usuário. Alinhe os botões para que eles fiquem como a figura abaixo:

 

 

Pois bem vamos a parte interessante, vamos inserir os nossos códigos.

 

4º Passo: Selecione o botão que indica a direção para cima e pressione a tecla de atalho F9 para ativar a área de programação e insira o seguinte código:

 

//ao pressionar o botão

on(press){

            /*seta a variável para cima com true(verdadeiro),está variável está

            localizada dentro do código do clipe de filme da joaninha como será

            visto adiante*/

            _root.joaninha.cima = true;

}

//ao soltar o botão ou rolar o mouse fora do botão

on(release, releaseOutside){

            // seta a variável para cima com false(falso)

            _root.joaninha.cima = false;

}

 

Os próximos códigos não foram documentados(explicados), pois o código é similar ao código citado acima, selecione o botão que indica a direção para baixo e insira o seguinte código:

 

on(press){

            _root.joaninha.baixo = true;

}

on(release, releaseOutside){

            _root.joaninha.baixo = false;

}

 

Selecione o botão que indica a direção para a esquerda e insira o seguinte código:

 

on(press)

{

            _root.joaninha.esquerda = true;

}

on(release, releaseOutside)

{

            _root.joaninha.esquerda = false;

}

 

Selecione o botão que indica a direção para a direita e insira o seguinte código:

 

on(press)

{

            _root.joaninha.direita = true;

}

on(release, releaseOutside)

{

            _root.joaninha.direita = false;

}

 

4º Passo: Selecione o clipe de filme da joaninha e insira o seguinte código nele:

 

//ao carregar o clipe de filme

onClipEvent (load) {

            //seta a variável responsável por controlar a velocidade inicialmente

            com 15

            _root.veloc = 15;

}

 

//Fica a todo o momento checando as condições neste trecho de código

onClipEvent (enterFrame) {

            //movimenta a joaninha para cima se a condição ver verdadeira

            if (cima) {

                        /*pega a posição atual na coordenada y da joaninha e vai

                        diminuindo na coordenada y atual dela, movimentando assim a

                        joaninha*/

                        _y -= _root.veloc;

                        // rotaciona a joaninha para que ela vire para cima

                        _rotation = 360;

            }

            //movimenta a joaninha para baixo

            else if (baixo) {

                        _y += _root.veloc;

                        _rotation = 180;

            }

            //movimenta a joaninha para a esquerda

            else if (esquerda) {

                        _x -= _root.veloc;

                        _rotation = 270;

            }

            //movimenta a joaninha para a direira

            else if (direita) {

                        _x += _root.veloc;

                        _rotation = 90;

            }

}

 

Explicação: Quando o usuário clica no botão para cima por exemplo este botão seta a variável para cima com true(verdadeiro), quando a variável assume o valor verdadeiro ela executa o código contido dentro do clipe de filme da joaninha responsável por movimentar a joaninha.

 

O código _y -= root.veloc; é igual a  linha de código: _y = _y - root.veloc, teste a animação pressionando as teclas de atalho CTRL+ENTER, pressione todos os botões e observe se o clipe de filme da joaninha está se movimentando em todas as direções.

 

5º Passo: Testada a animação e tudo ok vamos a próxima etapa da nossa animação, vamos alterar a velocidade da animação através de um campo(uma variável) contido na nossa animação, considerações: a velocidade mínima será 1 e máxima 100, caso o usuário digite algum valor fora deste intervalo uma mensagem é exibida informando ao usuário do intervalo válido.                                  

 

Para criar está variável selecione a ferramenta text tool() ou pressione a tecla de atalho (T) para ativa-lá, feito isso desenhe no documento o comprimento de visibilidade do conteúdo de sua variável, não se esqueça de alterar a cor da variável e as suas propriedades como indicado na figura abaixo:

 

 

Feito, isso vamos inserir um botão localizado no painel componentes do flash, para isso pressione as teclas de atalho CTRL+F7 para ativar o painel se este não estiver ativo e arraste o botão para o palco e altera a sua propriedade label para ok, alinhe o botão para que ele fique ao lado da variável. Insira o seguinte código no botão:

 

//ao clicar no botão

on(click){

            //ele verifica se o número digitado na variável é menor ou maior que 100

            if(parseInt(_root.altveloc) <= 0 || parseInt(_root.altveloc)>100)

            {

                        /*emiti uma mensagem ao usuário informando que ele informou

                        um valor errado*/

                        trace("Você deve digitar um valor positivo maior que 0 e menor que 100");

                        //limpa a variável

                        _root.altveloc = "";

            }

            //caso a condição acima seja falsa é executado o seguinte código

            else

            /*altera a velocidade da joaninha com a velocidade digitada

            pelo usuário na variável*/

            _root.veloc =parseInt(_root.altveloc);

}

 

É isso ai agora é só usar a criatividade para incrementar está animação, eu sugiro delimitar uma área de visibilidade para o movimento da joaninha no palco isto já foi explicado no seguinte tutorial: Como movimentar um objeto parte 02.

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