[E-BOOK GRÁTIS]: Windows 7 Básico, 476 pgs - QUERO RECEBER!
Você está em: PrincipalArtigosProgweb : Actionscript001
Quer receber novidades e e-books gratuitos?
›››

Conheça o Júlio Battisti

Julio Battisti - Autor de mais de 25 livros de informática Júlio Battisti tem 26 livros publicados, dezenas de e-books e é certificado Microsoft.

Ganhe o e-book a Seguir

e-book grátis Windows 7 Básico

476 páginas



Curta Nossa Fanpage

Loja Virtual do Site

Livros do Julio Battisti

Como movimentar um objeto utilizando as teclas (up,down,left,tight) – Parte 01

 

Olá pessoal, bem vamos fazer as devidas formalidades, pois este é o primeiro tutorial que escrevo no site www.juliobattist.com.br, então qualquer dúvida, critica ou sugestão sobre o tema abordado será bem vindo, favor encaminhar um email ao seguinte endereço:(fabianounipam04@yahoo.com.br).

 

Objetivo:      

Primeiramente vamos fazer com que a nossa joaninha(imagem contida na página), possa se movimentar pelo palco com as setas do teclado. Após isso vamos dar seqüência a nossa animação criando um botão comutador(um botão com duas funções) que será explicado mais adiante, para controlar a velocidade da joaninha.

 

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

 

Bem pessoal é hora de por a mão na massa!!!

 

1º passo: Vamos criar o nosso botão comutador, uma breve explicação: um botão comutador é um botão que tem duas funções alternando entre elas à medida que o usuário clicar nele.

 

Crie um quadrado clicando sobre a ferramenta Rectangle Tool() ou pressione a tecla de atalho(R) para ativa-lá, para criar um quadrado perfeito pressione e segure a tecla SHIFT e acione a ferramenta ()Rectangle Tool e desenhe o seu quadrado. Após criar o seu quadrado selecione o mesmo e aperte a tecla de atalho F8 para converter o quadrado em um símbolo do tipo Button(Botão), indique o name(nome) do mesmo que será usado na sua biblioteca (veremos sobre este assunto em outro artigo).

 

Importante, com o nosso botão selecionado aperte a tecla de atalho CTRL+F3 para acessar o painel de propriedades se este não estiver ativo:

 

 

Insira no local mostrado o nome botprop, como dito anteriormente será o nome do nosso botão que será usado na parte de programação. Feito isto selecione novamente o botão e pressione a tecla de atalho F8 escolha a opção movie clipe(clipe de filme) e insira o nome que será usado na biblioteca, ative novamente o painel de propriedade do clipe de filme pressionando a tecla de atalho CTRL+F3 selecione-o e insira nele o nome clipbotprop que será usado na parte de programação.

 

2º passo: Clique com o lado direito do mouse sobre o clipe de filme que contem o nosso botão e escolha a opção edit in place(edite no palco), após isso insira no 1º quadro chave a palavra iniciar ao lado do botão usando a ferramenta text tool() ou pressione a tecla de atalho (T), após isso insira  na linha de tempo o 2º keyframe(quadro chave) em branco através da opção(Insert Blank Keyframe – inserir quadra chave em branco) e insira nele uma instância do botão contida na biblioteca(tecla de atalho para acessar a biblioteca F11) ou copie e cole o botão, insira agora com a ferramenta text tool() ao lado do botão do 2º quadro chave a palavra parar, importante o botão do 1º quadro chave bem como o do 2º quadro chave devem possuir o mesmo posicionamento bem como as suas indicações de estado(iniciar e parar). Agora clique no 1º quadro chave e pressione a tecla  de atalho F9(Área de programação) e insira a  seguinte ação:

 

stop();

 

Após isso selecione o 1º quadro chave se este não estiver selecionado e após isso selecione o botão e insira o seguinte código:

 

//  /* .... */ -> comentário – Sugestão copie e cole o código com os devidos comentários, pois podem auxiliar no entendimento do código futuramente.

 

on (press) {

//ao clicar no botão seta a variável propulsor com zero indicando que está ativo

_root.propulsor = 0;

//criando instância p/ alterar o cor do botão

c = new Color(_root.clipbotprop);

//cor em hexadecimal

c.setRGB(parseInt("ff22ss", 16));

//vai para o quadro 2º quadro chave e para

gotoAndStop(2);

}

 

Agora selecione o 2º quadro chave e após isso selecione o botão do 2º quadro chave e insira o seguinte código:

 

on (press) {

_root.propulsor = 1;

c = new Color(_root.clipbotprop);

c.setRGB(parseInt("ff2211", 16));

gotoAndStop(1);

}

 

Explicação sobre o botão comutador: Funciona da seguinte maneira, ao clicar inicialmente no botão do 1º quadro chave a variável propulsor é setada com zero, uma instância de cor é criada para ser usada(no nosso clipe de filme que contém o nosso botão), e vai para o 2º quadro chave e para, e somente realiza uma ação quando o usuário clica no botão executando os mesmos passos só que agora setando a variável propulsor com 1 e indo para o 1º quadro chave.

 

A sua tela ao selecionar o botão do 1º quadro chave terá basicamente a seguinte aparência:

 

 

3º passo: Copie do Word e cole no flash a imagem da joaninha abaixo, pois está será a imagem 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 objeto selecionado(joaninha) pressione a tecla de atalho F9(Área de Programação) e insira o seguinte código abaixo que será completamente explicado:

 

Fundo Branco Fundo Preto
Bem eu aconselho, usar a imagem de fundo preto, logicamente com um fundo preto no flash.

 

/*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) {

 

// variável 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;

} else {

 

//p/ movimentar de forma lenta

x = 10;

}

 

//ao pressionar a tecla setinha para a direita ele executa os seguintes comandos

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

/* ao pressionar a seta para a direita, pega a posição atual na coordenada x da joaninha e vai acrescentando 10 na coordenada x atual dela, movimentando assim a joaninha */

_x = _x+x;

//rotaciona a joaninha de modo que a mesma fique virada  p/ à direita

_rotation = 90;

 

//ao pressionar a tecla setinha para baixo

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

/* ao pressiona a seta para baixo, pega a posição atual na coordenada y da joaninha e vai acrescentando 10 na coordenada y atual dela, movimentando assim a joaninha */

_y = _y+x;

//p/virar a joaninha p/ baixo

_rotation = 180;

 

//ao pressionar a tecla setinha para a esquerda

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

_x = _x-x;

//p/virar a joaninha p/ à esquerda

_rotation = 270;

 

//ao pressionar a tecla setinha para cima

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

_y = _y-x;

//p/virar a joaninha p/ cima

_rotation = 0;

}

}

 

Após inserir o código pressione as teclas de atalho CTRL+ENTER para executar a animação, teste pressionando todas as teclas para verificar o funcionamento do movimentação da joaninha, bem feito isto e tudo ok vamos ao nosso próximo passo:

 

4º passo : Vamos rever algumas coisas sobre a nossa animação, até agora nossa joaninha pode movimentar-se nas seguintes direções(UP-cima, LEFT-esquerda, DOWN-baixo e RIGHT - direita) e possui para isto duas velocidade de movimentação(rápido e lento), agora faremos com que a mesma movimente-se na diagonal para isto insira na joaninha o código abaixo da mesma forma como indicado nos passos anteriores.

 

/* ao pressionar a tecla para a esquerda e a tecla para cima e somente estas duas teclas a joaninha vai movimentar-se em diagonal partindo da esquerda para cima. O código é semelhante ao código de movimentação para as direções(esquerda, direita, cima, baixo) */

 

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

 

/* importante observe a rotação(_rotation = 315) imposta na joaninha, essa rotação é responsável por alinhar a joaninha na posição correta para movimentar-se em diagonal */

_rotation = 315;

_y = _y-x;

}

 

/* ao pressionar a tecla para a direita e a tecla para cima e somente estas duas teclas a joaninha vai movimentar-se em diagonal partindo da direita para cima */

 

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

_rotation = 45;

_y = _y-x;

}

 

/* ao pressionar a tecla para a esquerda e a tecla para baixo e somente estas duas teclas a joaninha vai movimentar-se em diagonal partindo da esquerda para baixo */

 

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

_rotation = 225;

_x = _x-x;

}

 

/* ao pressionar a tecla para a direita e a tecla para baixo e somente estas duas teclas a joaninha vai movimentar-se em diagonal partindo da direita para baixo */

 

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

_rotation = 135;

_y = _y+x;

}

 

Espero que vocês tenham gostado, e no próximo tutorial vamos dar uma incrementada nesta animação, não percam !!!

Dúvidas?

Utilize a área de comentários a seguir.

Me ajude a divulgar este conteúdo gratuito!

Use a área de comentários a seguir, diga o que achou desta lição, o que está achando do curso.
Compartilhe no Facebook, no Google+, Twitter e Pinterest.

Indique para seus amigos. Quanto mais comentários forem feitos, mais lições serão publicadas.

Quer receber novidades e e-books gratuitos?
›››

Vídeo-Aulas

  • Access
  • Excel
  • Programação
  • Windows/Linux
  • Redes
  • + Todas as categorias
  • E-books

  • Access
  • Excel
  • Programação
  • Windows/Linux
  • Redes
  • + Todas as categorias
  • Livros

  • Administração
  • Excel
  • Programação
  • Windows/Linux
  • Redes
  • + Todas as categorias
  • Cursos Online

  • Banco de Dados
  • Carreira
  • Criação/Web
  • Excel/Projetos
  • Formação
  • + Todas as categorias
  • Conteúdo Gratuito

  • +1500 Artigos e Tutoriais
  • ASP 3.0
  • ASP.NET
  • Access Básico
  • Access Avançado
  • Excel Básico - 120 lições
  • Excel Avançado - 120 lições
  • SQL Server 2005
  • Windows 7
  • Windows XP
  • Windows 2003 Server
  • Windows 2008 Server
  • Novidades e E-books grátis

    Fique por dentro das novidades, lançamento de livros, cursos, e-books e vídeo-aulas, e receba ofertas de e-books e vídeo-aulas gratuitas para download.



     

    Institucional

  • Quem somos
  • Garantia de entrega
  • Contato
  • O Autor

  • Atendimento: (51) 3717-3796 - webmaster@juliobattisti.com.br Todos os direitos reservados, Júlio Battisti 2001-2014 ®