ActionScript · Dicas & Tutoriais · Flash

Detectando quais teclas estão pressionadas em ActionScript 3

É simples você saber qual tecla foi pressionada em ActionScript. Um pouco mais complicado é saber qual conjunto de teclas estão sendo pressionadas simultaneamente. Isto pode ser necessário em caso de games, como num de corrida, em que o usuário pressionará várias teclas ao mesmo tempo, como um botão para acelerar, outro para direcionar o carro, e assim vai.

Algumas bibliotecas oferecem esse recurso, como o CASALib. No entanto basta um código simples para isso. A seguir, segue um exemplo em que são mostradas num campo de texto as teclas que estão sendo pressionadas num momento. No campo de texto será exibido os valores keyCode (a representação da tecla em número da tabela ASCII) das teclas.

[as3]
// campo de texto informativo
var output:TextField = new TextField();

// as teclas pressionadas
var arr_teclas:Array = new Array();

// listeners que detectarão o pressionamento de teclas
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUp);

// tamanho do texto e adicionando ao stage
output.text = “Teclas pressionadas: “;
output.scaleY = output.scaleX = 2;
output.width = 300;
addChild(output);

function keyDown(evt:KeyboardEvent):void {
/* se não houver nenhuma tecla na array que
* corresponda à tecla pressionada,
* adiciona a atual à array */

if (arr_teclas.indexOf(evt.keyCode) < 0) { arr_teclas.push(evt.keyCode); } // exibe as teclas pressionadas atualmente output.text = "Teclas pressionadas: " + arr_teclas.join(); }function keyUp(evt:KeyboardEvent):void { /* Se a tecla deixou de ser pressionada, * busca ela na array e a remove */ if (arr_teclas.indexOf(evt.keyCode) >= 0) {
arr_teclas = arr_teclas.splice(0, arr_teclas.indexOf(evt.keyCode));
}

// exibe as teclas pressionadas atualmente
output.text = “Teclas pressionadas: ” + arr_teclas.join();
}
[/as3]

Veja o resultado a seguir, pressionando teclas (dê foco ao SWF clicando no quadro abaixo):

Opinião

Meu ambiente de trabalho em 7 itens

Recebi do Goncin (@g0nc1n) a pendência de criar uma postagem acerca de sete itens que uso no meu ambiente de trabalho (voltado ao desenvolvimento Web).

A ideia é fazer um meme a respeito disso. Neste post do blog do Goncin você vê alguns que já entraram na brincadeira e outros que ainda foram indicados (como eu) para entrar no meme.

Como não quero quebrar a corrente, e não quero usar muitas palavras, tentarei ser o mais breve possível. Aí vai:

1- FlashDevelop

 É o que mais uso para programar os meus sites no Flash. Seu auto-complete é extremamente ágil, é possível editar arquivos AS3, AS2, XML, HTML e PHP, e compilar facilmente projetos simples em conjunto com o Flex SDK – dispensando, assim, precisar abrir o Adobe Flash. Recomendo para quem precisa programar ActionScript.

2- PSPad

Este conheci por indicação. Quando precisava lidar com várias coisas, como HTML, XML, CSS, JavaScript, jQuery e PHP (ufa), recorria ao versátil, porém pesadão, Aptana Studio. Substitui pelo PSPad, que é um editor “coringa”: leve, rápido e freeware, permite editar nessas linguagens e em várias outras. Uso ele com bastante frequência. Vale conhecer.

4- Adobe Flash CS5

Claro, se eu disse que trabalho com Flash era óbvio que este programa estaria na lista. Apesar de o pessoal descer a lenha no programa (inclusive eu) o uso de Flash na Web ainda será necessário por um bom tempo. Apesar de tudo, ele tem várias vantagens: é relativamente fácil desenhar os sites e animar os objetos. Uso ele em conjunto com o framework Gaia.

3- Wampserver

 O Wampserver é um WAMP bem prático de se usar. Conheço o XAMPP (uso ele no Ubuntu), sei que há várias vantagens nele e tudo mais, mas gosto do Wampserver por ser bem simples. É instalar e usar. Pronto.

4- Windows 7

Os programas anteriores estão disponíveis apenas para Windows (ou, em alguns casos, para Mac também). Sou praticamente “obrigado” a usar esse sistema por trabalhar com Flash. Felizmente, trabalho com a versão mais recente, o Windows Seven, do qual gosto muito.

5- Firefox

Para navegar na Web prefiro o Google Chrome, mas admito que o Firefox tem complementos que quebram (e muito) o galho. Como lido com o Flash, e preciso testar o site em várias resoluções, uma extensão que ajuda bastante é a Web Developer. Outra mão na roda é o Firefox Throttle, que permite que você simule vários tipos de velocidade de conexão para testar os preloaders do seu site.

6- FileZilla

Cliente FTP gratuito. É o que uso. Se você souber de outro melhor, poste aí nos comentários. 🙂

7- Café

Yes, sir. Não há nada melhor que parar um pouco, se levantar, sair do computador e tomar um bom gole de café. Tomo quatro xícaras de café preto toda manhã. Religiosamente. Não sei se ajuda muito, mas como gosto de um café bem leve e doce, acaba se tornando indispensável. 😛

Fim!

Pois bem, amigos. Fim da postagem! Espero que tenham gostado. 🙂

Agora indico o Jonnas Fonini (@fonini) e o Vinícius Lourenço (@ViLourenco) para passarem a brincadeira adiante. 😀

ActionScript · Dicas & Tutoriais

Criando um sistema de partículas simples com ActionScript 3.0

Há várias maneiras de como se criar partículas em Flash. Há desde bibliotecas que facilitam o trabalho e permitem criar efeitos excelentes (é o caso da Tweensy e a sua parte – ainda em beta – FX) até os tutoriais dificílimos disponíveis na Web, que geralmente envolvem muita matemática – e que são muito bons -, de sites como o Flash & Math.

No entanto, até que não é muito complicado criar efeitos simples usando bibliotecas como a TweenMax. Com uma quantidade enxuta de linhas é possível fazer efeitos interessantes.

A seguir, posto um exemplo bem simples, mas que serve para ilustrar que usar métodos e métodos para controle de tempo e criação de efeitos são desnecessários usando TweenMax:

[as3]
package
{
import flash.display.*;
import flash.events.*;
import com.greensock.*;

/**
* …
* @author Francisco Prado
*/
public class Main extends MovieClip
{
private var volume:int = 0;
private var particulas:Array = new Array();

public function Main():void
{
// inicia (ou desenha mais) “partículas”
desenharParticula();
}

private function desenharParticula():void {
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(Math.round(Math.random()*0x6666ff));
mc.graphics.drawCircle(0, 0, 5);
mc.graphics.endFill();

mc.x = 200;
mc.y = 300;

addChild(mc);

// fazendo as “partículas” subirem e desaparecerem
TweenMax.to(mc, Math.random() + 1,
{ bezier: [
{ x: mc.x, y: mc.y },
{ x: (Math.random() * 50) + mc.x, y: 250 },
{ x: (Math.random() * -50) + mc.x, y: 180 },
{ x: mc.x, y: 80 }],
orientToBezier:true, blurFilter: { blurX: 10, blurY: 10 }, alpha: 0, motionBlur:true,
onComplete: function removendo():void {
removeChild(mc);
mc = null;
}
});

// chama o método para adicionar novas partículas à cena
TweenMax.to(this, 0, { delay: 0.05, onComplete: desenharParticula } );
}
}
}
[/as3]

O código fará o efeito seguinte:

A ideia aqui não é mostrar necessariamente como fazer um sistema bonitinho de particulas, mas sim demonstrar que com uma linha do TweenMax é possível fazer um método para tempo e efeitos de cores e luz.

Usando ActionScript “puro” seria necessário apelar para uma variável Timer, uma outra linha para iniciar a contagem e uma função para manipular eventos no AS (TimerEvent).

Já com uma linha (no caso, a 48 do exemplo anterior) do TweenMax é possível fazer uma contagem (usando a propriedade de atraso delay) é possível fazer todas as coisas: o tempo e a chamada da função (no atributo onComplete é chamado o método que adicionará mais partículas).

A mesma situação na linha que fazem as partículas subirem e sumirem. Com o parâmetro bezier da TweenMax é possível fazer animações em curvas. Você pode conhecer mais efeitos testando nesta página, na seção Plugins.

Enfim, com um punhado de linhas é possível fazer efeitos bem interessantes, dispensando assim volumosos códigos chatos para caramba.

Acredito que, em se trantando de Flash – largamente utilizado na publicidade -, quanto menos linhas de código melhor, pois os prazos nem sempre são generosos (geralmente tudo é “pra ontem” 🙂 ) e eficiência é sempre fundamental.

Flash

Onde encontrar componentes para Flash grátis

Para tirar um pouco do mofo do blog, segue alguns links para quem deseja encontrar componentes para usar com Adobe Flash:

  • Flashmo.com – meu favorito. Encontrei uma infinidade de componentes excelentes e personalizáveis, tanto para AS 3 como AS 2. O número de componentes para galerias de imagens impressiona: há desde simples até com efeitos 3D.
  • Flash Components (seção Free) – este site, que oferece componentes pagos, também tem uma seção com componentes que podem ser baixados gratuitamente. Há várias galerias, entre outros.
  • Free Flash Resources – há poucos neste site, mas há alguns que podem valer a pena, como o componente Scrollbar.
  • Flash Sources – achei este site muito fraco. Há pouco material, e a maior parte é em AS 2. No entanto, fica aqui a dica.
ActionScript · Flash

Componente Scrollbar para Flash – grátis

Neste post deixo para download um componente simples, mas que é usado em 10 de cada 10 sites em Flash que contém texto: um scroller com movimento animado.

Ele foi criado originalmente pelo pessoal do Free Flash Resources, mas a versão deles é separada em várias classes. A versão que posto aqui foi modificada por mim, e contém os códigos ActionScript direto nas timelines dos clipes de filme. Em outras palavras, basta copiar e colar os clipes; nada de mover as classes AS dele para lá e para cá. Isso evita bagunça e que você tenha que reeditar códigos cada vez que for usar o componente.

O componente tem a parte gráfica e códigos customizáveis.

Download.

Veja o exemplo abaixo do funcionamento.