Trabalhando com o Teclado em ActionScript 3.0

Olá pessoal mais um post sobre actionScript 3.0, agora vamos trabalhar com o teclado. Em AS3 houve mudanças no tratamento dos eventos com o teclado,mas ficou no padrão no tratamento de eventos. Para disparar funções quando o teclado for pressionado fazemos da seguinte forma:

Na linha 01 adicionamos o evento KeyboardEvent no stage, e passamos como parâmetro que função será chamada no nosso caso ‘fazAlgo’, Na linha 02 temos a assinatura da função ‘fazAlgo’ que recebe a variável ‘e’ do tipo KeyboardEvent. Até agora simples, vamos trabalhar melhor essas funções com o exemplo a seguir:

  • Crie um novo arquivo flash
  • Determine a sua taxa de framerate para 30 fps

  • Crie um movieclip com o nome de instância bola_mc

  • Crie uma layer com nome ações

  • Seleciona a layer ações pressione f9 para inserir o código.

Nas linhas 1, 2, 3 e 4 foram criadas variavéis to tipo Number para a velocidade e aceleração do eixo x e y. Na linha 5 foi adicionado o evento ENTER_FRAME e na 6 e 7 os eventos KEY_DOWN e KEY_UP. A função onEnter incrementa a velocidade dos eixos com a aceleração. A função onKeyDown na linha 14 é disparado quando o usuário pressiona qualquer tecla e através da variável ‘e’ do tipo KeyboardEvent podemos saber qual tecla foi pressionada com o código e.KeyCode que na realidade é o número equivalente a tabela ASCI mas como nem todo mundo tem tempo de sobra para ficar decorando toda a tabela ASCI, a classe keyboard possui variáveis estáticas para facilitar a vida do programador, onde podemos ver nas linhas 15, 17, 20 e 22.

Assim a lógica fica da seguinte forma quando a tecla esquerda for pressionada a aceleração x é decrementada, quando pressionado a direita incrementada, quando a tecla cima(up) for pressionada a aceleração y é decrementada e baixo(down) o oposto. A função onKeyup é disparada no Evento KeyboarEvent.KEY_UP ou seja quando o usuário solta a tecla será chamada a função que zera a aceleração tanto x e y. Vamos ver o resultado :

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2008/09/bola_teclado.swf w=450 h=400]

(use as teclas direcionais)

Notem que a bola foge do palco então vamos dar uma melhorada no código substituindo a função onEnter do código anterior por essa :

O incremento da velocidade permanece da mesma foram a diferença é que quando a bola chegar nas extremidades do palco receber sua velocidade inversa. Notem que não utilizamos a posição zero como limite porque o registration do movieclipe está no centro por isso usamos a metade de suas medidas e para usarmos a largura e altura total do stage utilizamos stage.stageWidth e stage.stageHeight. O resultado que temos é esse :

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2008/09/bola_teclado_2.swf w=450 h=400]

Até a próxima…

Tween Lite

As classes de animações são uma mão na roda para os desenvolvedores flash , um conjunto de classes que permitem com apenas um linha de código, fazer ótimas animações modificando varias propriedades, passei um bom tempo utilizando as classes do caurina Tweener, melhoraram muito minha produtividade, mas a adição dessas classes aumentavam 12kb no swf final. Para um site em flash isso não é muito significativo, mas para um banner para web pode complicar.

Alguns portais tem um limite para o tamanho do swf por exemplo a globo e suas filiadas tem um limite de 20kb por banner, ou seja com a adição do caurina já é usado mais de 50% dos kbytes permitido.

Um dia fazendo uma pesquisa sobre Papervision3D vi uma recomendação de um pacote de classes para animação TweenMax e TweenLite. Fiz meus testes e gostei, depois perguntei a alguns amigos que também fizeram boas recomendações.

No site Greensock grupo responsável pelo desenvolvimento das classes TweenLite e TweenMax. Têm alguns testes de desempenho, documentação completa e exemplos, a seguir vou mostra um simples exemplo utilizando TweenMax.

Seu uso é bastante simples vamos lá :

1 – Primeiro baixe o pacote das classes, se ainda não baixou clique aqui .

2 – Descompacte o zip na mesma pasta que está o seu arquivo .fla como na figura abaixo.

3 – Abra o arquivo .fla que no meu caso é tweenLite.fla , crie um movieClip no palco com o nome de instância bola_mc.

4 – Crie uma nova layer com um nome ações , selecione o primeiro frame e pressione  F9 para inserir o nosso código AS.

Na janela de ações jogamos o seguinte código:

Na linha 1 importamos a Classe TweenMax.

Na linha 2 usamos a classe de animação que funciona da seguinte forma:

TweenMax.to( [ alvo ], [ tempo ], {[propriedades do movie clipe]}); no exemplo a cima as propriedades x e y do movieClip;

Se você quiser adicionar as propriedades de ease fica assim:

A diferença para o primeiro código foi o import do easing na linha dois e a inclusão de mais uma propriedade a de ease na linha 3 neste caso eu estou utilizando o Back e easeOut diz que o efeito vai ser aplicado no fim da animação.

Alguns tipos de easing são:

  • Back
  • Bounce
  • Cubic
  • Elastic
  • Expo

E suas variações : easeIn para aplicar o efeito no início da animação , easeOut no final e easeInOut em ambos.

Por enquanto é só depois vou complementar esse exercício .

Ô brasil

Não sei o que aconteceu com o brasil essas Olimpiadas tirando o ouro de César Cielo na natação. Muitos favoritos caíram alguns destaques para o futebol o masculino que eu já não acreditava, um esquema feio de time pequeno nem parece a seleção , um time com um atacante totalmente isolado time sem ligação, dependendo de apresentações individuais , algumas vezes parece que falta algo no alexandre pato por conta de entrar muito cedo na seleção, Ronaldinho gaúcho depois de um ano em baixa e 4 meses parado não podia fazer nada.

E a seleção feminina mais uma vez não levou o ouro depois do chocolate na alemanha parecia que tudo ia dar certo, mas encontrou um time muito bem postado na defesa, com uma goleira muito bonita e inspirada conseguiu segurar a seleção feminina os 90 minutos, nos acrescimos o brasil visivelmente morto abriu espaço para o gol do adversário ainda tentou uma reação mas sem sucesso, Uma pena prata mais uma vez. Vôlei de Praia só deu EUA vamos ver se na quadra muda e os resto nem vale a pena falar. Mesmo assim parabéns aos medalhistas.