Criando Animações simples com Actionscript - Parte 01

Nessa nova série de artigos, irei mostrar como fazer animações com uso de Actionscript. São animações simples, mas que, com sua criatividade, poderão se transformar em ótimos efeitos.

Por | @biel_pinheiro Softwares
Olá. Tudo bem?

Nessa nova série de artigos, irei mostrar como fazer animações com uso de Actionscript. São animações simples, mas que, com sua criatividade, poderão se transformar em ótimos efeitos.

Para começar, irei apresentar o primeiro efeito: MOTION TWEEN

1º Passo) Crie um novo documento do Flash, de preferência no Actionscript 2.0. Desenhe uma bola, e salve-a como MOVIECLIP.

Criando Animações simples com Actionscript - Parte 01


2º Passo) Clique na bola, vá no painel Proprieties, e em Instancie o movieclip com o nome de "bola". Esse tutorial só funcionará se o objeto estiver instanciado.

Criando Animações simples com Actionscript - Parte 01

3º Passo) Crie também quatro botões, chamados respectivamente: "Tween Ida" , "Tween Volta", "Tween UP" e "Tween Down". Esses botões ficarão responsáveis por fazer o controle da animação.

Criando Animações simples com Actionscript - Parte 01

4º Passo) Clique sobre a Bola, e no painel Actions, coloque o seguinte código:


onClipEvent(enterFrame){
//

//defino a velocidade da animação
    var tempo:Number = 10;

       // _x é o eixo horizontal e _y é o eixo vertical
this._x += (xFinal + this._x)/tempo;
this._y += (yFinal + this._y)/tempo;

}


Para quem não entendeu nada, vou citar um trecho que encontrei num fórum de internet, explicando o que é esse onClipEvent


o onClipEvent (enterFrame) { } é chamado de event. Os comandos dentro dos events, ou eventos, são disparados quando acontece aquilo que o event determina. Por exemplo, esta event é pra quando os quadros estiverem rolando. Então podemos escrever desta maneira pra entendermos:

onClipEvent (enterFrame) { } é como se estivesse escrevendo:
quando (os quadros estiverem rolando, ou as frames 'entrando',) { realizar estes comandos }

o onClipEvent é um evento pra MC, então é referente à uma ação do MC, no caso do enterFrame é pra quandos as frames estiverem passando. Existe tb o load (onClipEvent (load) { }) que é pra só quando o MC for carregado, executar os comandos dentro das chaves.


5º Passo) Prestando atenção na posição do objeto.

No painel Proprieties, você encontra 4 quadrados, muito importantes. H, W, X, Y. H e W são Height e Width, respectivamente, e são responsáveis pelo redimensionamento do objeto. já X e Y representam a posição do objeto no palco do Flash. Utilizaremos esses dois em nossa animação via script.

6º Passo) Inserindo Ações nos botões

Com o botão direito do mouse, sobre cada botão, coloque as respectivas ações:

Botão Tween Ida

on (release){
bola.xFinal = 421;
}


Botão Tween Volta
on (release){
bola.xFinal = 220;
}

Botão Tween UP

on (release){
bola.yFinal = -16;
}


Botão Tween Down

on (release){
bola.yFinal = 82.1;
}


Explicando: bola.xFinal e bola.yFinal fazem referência as variáveis criadas no Action do movieclip. o "bola." faz referência à instância criada.

Os botões "Tween Volta" e "Tween Down" contém os valores de X e Y que determinam o ponto onde o objeto está no palco. Ja os botões "Tween Ida" e "Tween Up" contém os valores para onde o objeto irá se movimentar. Para controlar esse tipo de animação, você deve sempre anotar os eixos X e Y do objeto, e definir onde, nos eixos, seu objeto deverá ficar.

Na próxima, iremos testar o a ampliação dos objetos, pelo Actionscript.

Vou disponibilizar o FLA para vocês testarem.  

Forte Abraço

Até lá!

Mais sobre: flash, action script, animações
Share Tweet
DESTAQUESMais compartilhados
Comentários
  • ASSINE NOSSA NEWSLETTER

    As melhores publicações no
    seu e-mail

  • Preencha para confirmar