O nome da pasta é importante!

Abra o Flash, vá no menu File, escolha New e finalmente, escolha ActionScript File. O nome do seu arquivo também importa na programação – eu decidi chamar o meu de basicGame.as - e agora, vamos começar a programar!

Primeiro, identifique o pacote de classes com o nome da pasta que você criou e crie a classe com o mesmo nome do seu arquivo “.AS“. Seu arquivo deve ficar mais ou menos assim:

package actionScript {
  public class basicGame {
    // Vamos inserir o código do outro arquivo aqui!
  }
}

Diferente de se programar na timeline, é necessário cuidar da importação de bibliotecas quando se está trabalhando com uma classe. Vou importar 3 bibliotecas básicas - Event, MouseEvent e KeyboardEvent – e mesmo que eu não esteja usando MouseEvent neste momento, eu pretendo usá-la em breve. Então o código fica assim:

package actionScript {
   import flash.events.KeyboardEvent;
   import flash.events.MouseEvent;
   import flash.events.Event;
  public class basicGame {
    // Vamos inserir o código do outro arquivo aqui!
  }
}

Depois, copie o código criado no FLA “movimentospeloteclado.fla” dentro da sua classe. Mas se você tentar rodar agora, vários erros de compilação irão surgir. O código copiado tem algumas ações realizadas em tempo de execução, o que é impossível para uma classe. Devemos passar estes códigos para uma função construtora, que é chamada automaticamente no momento de criação da instância da classe.

Basta nomear uma função com o mesmo nome da classe, para ela ser uma função construtora!

package actionScript {
   import flash.events.KeyboardEvent;
   import flash.events.MouseEvent;
   import flash.events.Event;
  public class basicGame {
    public function basicGame():void {
      // Conteúdo da Função!
    }
  }
}

 Vamos recapitular algumas coisas… O nosso código original adicionava três Listeners ao Stage ( Um para detectar o “pressionar” de um botão do teclado, outro para detectar o “soltar” de um botão do teclado e o outro iria ser executado na velocidade do framerate, com a missão de realizar as ações necessárias ) e controlava um MovieClip chamado bodyMovie, movendo-o de acordo com as setas do teclado. Mas a nossa classe não tem stage, e dentro dela, também não há um MovieClip chamado bodyMovie, pois ele está na timeline do Flash. Como resolver isto…?

Vamos adicionar dois parâmetros na função construtora. O primeiro parâmetro será a referência do MovieClip a ser controlado, e o segundo, a referência do stage. Depois de recebê-los como parâmetro, devemos guardá-los em variáveis privadas que toda a classe possa enxergar, à qualquer momento. O código fica mais ou menos assim:

package actionScript {

 import flash.events.KeyboardEvent;
 import flash.events.MouseEvent;
 import flash.events.Event;  

public class basicGame {

  private var myChar:Object;
  private var myRoot:Object;

  public function basicGame(c:Object,s:Object):void {
   myChar = c;
   myRoot = s;
  }

 }

} 

Na hora de completar a nossa classe com o código original do artigo anterior, você não pode esquecer de trocar toda a referência à bodyMovie pela variável myChar e toda referência ao stage pela variável myRoot. O código completo desta dica fica assim: 

package actionScript {

 import flash.events.KeyboardEvent;
 import flash.events.MouseEvent;
 import flash.events.Event;  

public class basicGame {

  private var myChar:Object;
  private var myRoot:Object;
  private var pressLeft:Boolean = new Boolean(false);
  private var pressUp:Boolean = new Boolean(false);
  private var pressRight:Boolean = new Boolean(false);
  private var pressDown:Boolean = new Boolean(false);

  public function basicGame(c:Object,s:Object):void {
   myChar = c;
   myRoot = s;
   myRoot.addEventListener(KeyboardEvent.KEY_DOWN, pressButtonDown);
   myRoot.addEventListener(KeyboardEvent.KEY_UP, pressButtonUp);
   myRoot.addEventListener(Event.ENTER_FRAME, runIt);
  }

  private function pressButtonDown(event:KeyboardEvent):void {
   switch (event.keyCode) {
    case 37 : //ESQUERDA;
     pressLeft = true;
     break;
    case 38 : //CIMA;
     pressUp = true;
     break;
    case 39 : //DIREITA;
     pressRight = true;
     break;
    case 40 : //BAIXO;
     pressDown = true;
     break;
   }
  }

  private function pressButtonUp(event:KeyboardEvent):void {
   switch (event.keyCode) {
    case 37 : //ESQUERDA;
     pressLeft = false;
     break;
    case 38 : //CIMA;
     pressUp = false;
     break;
    case 39 : //DIREITA;
     pressRight = false;
     break;
    case 40 : //BAIXO;
     pressDown = false;
     break;
   }
  }

  private function runIt(e:Event):void {
   if (pressLeft) {
    if (myChar.x > 0) {
     myChar.x -= 5;
    }
   }
   if (pressRight) {
    if (myChar.x < 400) {
     myChar.x += 5;
    }
   }
   if (pressUp) {
    if (myChar.y > 0) {
     myChar.y -= 5;
    }
   }
   if (pressDown) {
    if (myChar.y < 300) {
     myChar.y += 5;
    }
   }
  }

 }

} 

Agora é só importar a sua classe no Flash e criar uma instância dela! Então, na timeline do seu arquivo FLA, faça o seguinte:

import actionScript.basicGame;
var obj:basicGame = new basicGame(this.bodyMovie,stage);

Desta forma, o seu Flash com classe estará fazendo exatamente a mesma coisa do Flash do exemplo anterior. Mas agora, você pode instanciá-lo facilmente, quantas vezes você quiser. Apenas como exemplo, dupliquei o nosso MovieClip, pintei ele de diversas cores com a propriedade Tint e redimensionei aleatoriamente. Agora, é fácil controlar os novos MovieClips, em poucas linhas:

import actionScript.basicGame;

var obj1:basicGame = new basicGame(this.bodyMovie1,stage);
var obj2:basicGame = new basicGame(this.bodyMovie2,stage);
var obj3:basicGame = new basicGame(this.bodyMovie3,stage);
var obj4:basicGame = new basicGame(this.bodyMovie4,stage);

Para experimentar, clique no Flash abaixo ( para o Browser dar foco ao Flash ) e use as setas do teclado para controlar os 4 MovieClips. Note que os MovieClips se mexem juntos, até que eles encontrem o limite nos cantos do Flash.

Se desejar, clique aqui e baixe este exemplo completo, salvo em Flash CS3. E até a próxima dica!

Abertura do Jogo

Foi muito prazeroso montar este jogo, diante da liberdade criativa que tivemos. Nele, Júnior pilota uma nave espacial com lasers “reconstrutores”, que são capazes de reciclar o lixo espacial para em seguida, serem atraídos para uma estação espacial de reciclagem. Então, para o jogo não se tornar repetitivo, criamos não um, mas três dispositivos para serem utilizados pelo jogador: Um escudo protetor, um laser rápido e econômico e um canhão laser poderoso e lento.

Então você deve controlar a nave com as setas do teclado, segurar a tecla Z para acionar o escudo ( Enquanto o escudo estiver ativado, sua nave pode atravessar os obstáculos sem tomar dano ), segurar a tecla X para um laser rápido, econômico e contínuo, ou ainda, segurar a tecla C para carregar o canhão e em seguida soltar a tecla para um tiro muito mais poderoso.

Detalhe para o canhão: A potência do disparo está ligado ao tempo que você segurou a tecla C. Observe a barra de energia de tiro ao segurar a tecla C. Ela vai sendo consumida por uma barra vermelha, indicando o quanto de energia você está reservando para aquele disparo. Quando a barra vermelha começar a piscar, significa que já reservou o mínimo necessário para um disparo de canhão. Mas você pode segurar por mais tempo, se quiser. E caso você solte a tecla C antes dessa barra piscar, o disparo de canhão é cancelado.

Júnior em ação!

Além disso, você tem três barras de energia para administrar. Energia é utilizada pelo sistema básico da nave, então ela vai sendo consumida lentamente durante a viagem ou rapidamente, quando a nave se choca contra algum obstáculo. Escudo é uma barra que controla o uso do escudo protetor e Laser, é consumido no uso do laser ou do canhão. Para encher estas barras, é necessário coletar as latas de Sustain Júnior pelo caminho.

Quanto aos obstáculos, Pneus Velhos e Latas são recolhidos pela estação espacial de reciclagem, então você não corre o risco de chocar a nave contra elas, depois da restauração. Isso já não acontece com os asteróides, já que eles ganham vida sob o efeito do laser “reconstrutor” se transformando em pequenos planetas. Então, após restaurar um asteróide, saia da frente ou atravesse-o usando o escudo protetor!

Como foi o meu primeiro jogo em Action Script 3, o gerenciamento de memória não ficou “ideal” – em computadores mais modestos ele ficou um pouco lento – e um adiantamento da data de lançamento comprometeu a parte sonora. Mas isso não apagou o brilho deste jogo!

Para experimentar Júnior no Espaço, clique aqui!

Desenhe algo – um retângulo por exemplo – e em seguida, selecione-o, e crie um MovieClip ( Use a tecla F8 como atalho ). Dê um nome para o MovieClip ( Eu chamei o meu retângulo de body ) e deixe seu ponto central ( Registration ) no centro do retângulo mesmo.

Selecione seu retângulo e aperte F8 para criar seu MovieClip!

Depois, clique no seu MovieClip e em Properties, dê um nome para a instância ( Eu decidi chamar a instância de bodyMovie ). Lembre-se que Action Script é case sensitive, então letras maiúsculas são diferentes de minúsculas ( bodyMovie é diferente de bodymovie assim como é diferente de BodyMovie ). Se tiver medo de confundir, deixe todos os nomes de variáveis e objetos em letras minúsculas.

Dê um nome para a sua instância!

Agora vamos ao código! Primeiro, vamos criar variáveis para saber se determinadas teclas estão pressionadas ou não. Elas serão do tipo Boolean, que aceitam apenas dois valores: True ou False. Como nosso exemplo fala de movimentos básicos, vou criar quatro variáveis para associá-las às quatro setas de direção do teclado.

var pressLeft:Boolean = new Boolean(false);
var pressUp:Boolean = new Boolean(false);
var pressRight:Boolean = new Boolean(false);
var pressDown:Boolean = new Boolean(false);

Para este exemplo, precisaremos de três funções. Uma será responsável pelo ato de pressionar um botão, outra pelo ato de soltar um botão e finalmente, uma que fará o movimento do MovieClip. Vamos primeiro, “pressionar o botão“!

function pressButtonDown(event:KeyboardEvent):void {
switch (event.keyCode) {
  case 37 : //ESQUERDA;
   pressLeft = true;
   break;
  case 38 : //CIMA;
   pressUp = true;
   break;
  case 39 : //DIREITA;
   pressRight = true;
   break;
  case 40 : //BAIXO;
   pressDown = true;
   break;
 }
}
stage.addEventListener(KeyboardEvent.KEY_DOWN, pressButtonDown);

Vou explicar: Olhe primeiro para a linha 17 acima ( stage.addEventListener(KeyboardEvent.KEY_DOWN, pressButtonDown); ). Nela nós criamos um Listener – que seria um “responsável” por uma determinada ação – que, ao detectar o pressionar de uma tecla qualquer ( KeyboardEvent.KEY_DOWN ) ele vai chamar uma função ( pressButtonDown ). A função também descrita acima, recebe todos os parâmetros do evento e guarda na variável que chamei de event. Em seguida, usando uma estrutura de decisão switch, comparamos se o valor de event.keyCode é igual à algum código relacionado às 4 setas do teclado. Ao encontrar 37 ( Esquerda ), 38 ( Cima ), 39 ( Direita ) ou 40 ( Baixo ), nós mudamos o valor da variável booleana correspondente para true.

Já no momento de soltar a tecla, precisamos detectar novamente qual tecla foi liberada e setar sua variável booleana correspondente como false. Observe que o evento muda de KeyboardEvent.KEY_DOWN para KeyboardEvent.KEY_UP, e a função também muda de nome. O código fica assim:

function pressButtonUp(event:KeyboardEvent):void {
 switch (event.keyCode) {
  case 37 : //ESQUERDA;
   pressLeft = false;
   break;
  case 38 : //CIMA;
   pressUp = false;
   break;
  case 39 : //DIREITA;
   pressRight = false;
   break;
  case 40 : //BAIXO;
   pressDown = false;
   break;
 }
}
stage.addEventListener(KeyboardEvent.KEY_UP, pressButtonUp);

E chegamos finalmente à função que vai realmente fazer nosso MovieClip se mexer. Ela será associada à um Listener de evento do tipo Event.ENTER_FRAME, que é chamada a cada execução do framerate. Ou seja, se seu Flash estiver com 12 frames por segundo, esta função será chamada 12 vezes por segundo. Eu aumentei o framerate do meu Flash para 40 frames por segundo, visando uma maior suavidade nos movimentos. Muito cuidado com o que você programa dentro de um Event.ENTER_FRAME, pois se exagerar, pode deixar seu processamento lento, ok…?

E o que a nossa função vai fazer…? Simples: Ela vai ver se a variável booleana de cada direção está setada como True, e se sim, vamos alterar os valores de x e y do nosso MovieClip.

function runIt(e:Event):void {
 if (pressLeft) {
   this.bodyMovie.x -= 5;
 }
 if (pressRight) {
   this.bodyMovie.x += 5;
 }
 if (pressUp) {
   this.bodyMovie.y -= 5;
 }
 if (pressDown) {
   this.bodyMovie.y += 5;
 }
}
stage.addEventListener(Event.ENTER_FRAME, runIt);

Note que no if, fazer uma condição com variável boleana dispensa a pergunta, pois ele já contém True ou False. Então fazer um (variavelBoleana) e (variavelBoleana == true) é a mesma coisa. Outro detalhe que você deve ter percebido é a forma de somar ou subtrair utilizada acima. Se você quer pegar um número e somar/subtrair com outro número, e guardar o mesmo resultado dentro dele mesmo, então variável = variável + 5; é igual à variável += 5; ok?

Com apenas isto, nosso MovieClip já é capaz de se mover mas… seria bom adicionar limites à este movimento, para que o seu usuário não tire-o da tela e fique perdido. Basta adicionar alguns if’s à função acima. Lembrando que o stage do meu Flash tem 400×300, o resultado é:

function runIt(e:Event):void {
 if (pressLeft) {
  if (this.bodyMovie.x > 0) {
   this.bodyMovie.x -= 5;
  }
 }
 if (pressRight) {
  if (this.bodyMovie.x < 400) {
   this.bodyMovie.x += 5;
  }
 }
 if (pressUp) {
  if (this.bodyMovie.y > 0) {
   this.bodyMovie.y -= 5;
  }
 }
 if (pressDown) {
  if (this.bodyMovie.y < 300) {
   this.bodyMovie.y += 5;
  }
 }
}
stage.addEventListener(Event.ENTER_FRAME, runIt);

Apenas para não se esquecer, o topo esquerdo superior do Flash é o ponto zero. Se você quer deslizar algo para a direita, você aumenta o eixo x. Então, para ir para a esquerda, basta subtrair o eixo x. A mesma coisa com o eixo y: some números para descer, subtraia números para subir.

Para testar o código em ação, clique uma vez sobre o Flash abaixo ( apenas para que o browser dê foco ao Flash, e que repasse os comandos do teclado para ele ) e em seguida, pressione as setas direcionais do seu teclado e veja o retângulo se mexer!

Agora, juntando tudo e organizando um pouco o código, teremos:

//==================================================================//
var pressLeft:Boolean = new Boolean(false);
var pressUp:Boolean = new Boolean(false);
var pressRight:Boolean = new Boolean(false);
var pressDown:Boolean = new Boolean(false);
//==================================================================//
function pressButtonDown(event:KeyboardEvent):void {
 switch (event.keyCode) {
  case 37 : //ESQUERDA;
   pressLeft = true;
   break;
  case 38 : //CIMA;
   pressUp = true;
   break;
  case 39 : //DIREITA;
   pressRight = true;
   break;
  case 40 : //BAIXO;
   pressDown = true;
   break;
 }
}
//==================================================================//
function pressButtonUp(event:KeyboardEvent):void {
 switch (event.keyCode) {
  case 37 : //ESQUERDA;
   pressLeft = false;
   break;
  case 38 : //CIMA;
   pressUp = false;
   break;
  case 39 : //DIREITA;
   pressRight = false;
   break;
  case 40 : //BAIXO;
   pressDown = false;
   break;
 }
}
//==================================================================//
function runIt(e:Event):void {
 if (pressLeft) {
  if (this.bodyMovie.x > 0) {
   this.bodyMovie.x -= 5;
  }
 }
 if (pressRight) {
  if (this.bodyMovie.x < 400) {
   this.bodyMovie.x += 5;
  }
 }
 if (pressUp) {
  if (this.bodyMovie.y > 0) {
   this.bodyMovie.y -= 5;
  }
 }
 if (pressDown) {
  if (this.bodyMovie.y < 300) {
   this.bodyMovie.y += 5;
  }
 }
}
//==================================================================//
stage.addEventListener(KeyboardEvent.KEY_DOWN, pressButtonDown);
stage.addEventListener(KeyboardEvent.KEY_UP, pressButtonUp);
stage.addEventListener(Event.ENTER_FRAME, runIt);
//==================================================================//

E se você quiser estudar e incrementar este código, clique aqui e baixe o código-fonte zipado, num FLA salvo em Flash CS3.

Espero que você tenha apreciado esta dica básica. E até o próximo post! ^^

Jogos em Flash são famosos para jogadores casuais: Basta acessar um link e sair jogando em poucos minutos. Mas não vamos limitar nossos pensamentos desta forma! A Ankama Games construiu seu MMORPG Dofus ( www.dofus.com ) utilizando Flash. Tudo depende do tempo disponível para desenvolvimento e do público alvo!

Curioso…? Assista agora mesmo:

O Olhar Digital passa na RedeTV aos domingos, às 15:30, para a grande SP. Mas é possível também, assistir pela internet, através do site oficial do programa: http://www.olhardigital.com.br

E então…? Vamos colocar a mão na massa no código…?

Você já deve ter o Adobe Flex instalado em seu computador – Caso não, baixe a versão Trial do site da Adobe, através deste link. Agora vá no menu File, opção New e escolha Flex Project.

Não esqueça de dizer que é em Adobe Air!

Dê um nome para o seu projeto (Project Name), escolha a pasta onde você quer salvá-lo (Project Location) e escolha a opção Desktop Application, já que estamos em uma dica de Adobe Air. Em seguida eu reduzi a área para 200×300 – apenas porque eu quis assim – e coloquei um label para o aplicativo não ficar vazio. Cliquei no botão de Debug e o resultado você confere na imagem à seguir…

Legal, mas pode ficar melhor...

Em seguida, eu decidi abrir o arquivo SystrayExample-app.xml ( Atenção: É o nome deste arquivo de configuração é o o nome do projeto + “-app.xml“ ) procurei pela linha 46, onde se fala do system chrome. Ela vem previamente comentada e devido à isso, seu valor padrão é standard. Vamos descomentá-la e aplicar o valor none, da seguinte maneira:

<systemChrome>none</systemChrome>

Depois dessa mudança, salve o seu projeto e rode novamente. Teremos então:

A opção Chrome

O que foi…? Você gostaria de personalizar totalmente o visual da sua janela…? É possível, mas deixaremos isso para uma outra oportunidade. Agora, experimente mover a sua janela, minimizá-la, restaurá-la, redimensioná-la. Veja que ela reage como a janela de um aplicativo comum. Feche-a, e veja o código do seu aplicativo, que deve ser mais ou menos assim:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="300">
<mx:Label y="10" text="Exemplo de aplicação AIR" fontWeight="bold" horizontalCenter="0"/>
</mx:WindowedApplication>

Agora vamos começar a programar de verdade. Primeiro, adicione um applicationComplete no mx:WindowedApplication. Ela serve para chamar a primeira função que o seu aplicativo deverá chamar, assim que ele estiver completo em memória. Eu decidi chamar essa função de AutoExec() em homenagem ao autoexec.bat da época do DOS. Em seguida, crie um bloco <mx:Script></mx:Script> como o exemplo abaixo:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="300" applicationComplete="autoExec()">
<mx:Script>
<![CDATA[
// Vamos inserir código AS3 aqui!
]]>
</mx:Script>
<mx:Label y="10" text="Exemplo de aplicação AIR" fontWeight="bold" horizontalCenter="0"/>
</mx:WindowedApplication>

Agora, entre o <![CDATA[ e o ]]>, vamos inserir diversas funções. Para não ficar confuso, vou explicar aos poucos e depois, juntar tudo! Primeiro, vamos importar classes necessárias e declarar variáveis!

import mx.core.BitmapAsset;
private var dockImage:BitmapAsset;
private var win:NativeWindow;
[Embed(source="systray_icon.png")][Bindable] public var mySysTray:Class;

Primeiro nós importamos a classe BitmapAsset, para em seguida declarar uma variável – dockImage – usando o tipo importado. Depois criei uma variável win para servir apenas de atalho para se referir à janela principal do aplicativo. Para finalizar, incorporei o ícone systray_icon.jpg ao SWF, já jogando ele na declaração do mySystray. Lembre-se, é um aplicativo AIR, então não dá pra confiar se uma determinada imagem vai estar no mesmo diretório da aplicação. É melhor deixá-la dentro do SWF ou acessá-la, remotamente.

private function autoExec():void {
win = stage.nativeWindow;
dockImage = new mySysTray() as BitmapAsset;
if (NativeApplication.supportsSystemTrayIcon){
SystemTrayIcon(NativeApplication.nativeApplication.icon).tooltip = "Nome do meu aplicativo!";
SystemTrayIcon(NativeApplication.nativeApplication.icon).addEventListener(MouseEvent.CLICK, undock);
SystemTrayIcon(NativeApplication.nativeApplication.icon).menu = createSystrayRootMenu();
win.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING,interceptMinimize);
}
}

Como mencionei antes, a função autoExec() está sendo chamada no applicationComplete, então ela é quem dará início à tudo. Primeiro, eu setei o meu “atalho-variável” win para a janela nativa da aplicação. Depois preparamos o dockImage e verificamos se o ambiente onde nossa aplicação está rodando suporta Systray. Se sim, ótimo: Vamos preparar o SystemTrayIcon. Em tooltip, podemos escrever o nome do nosso aplicativo. O addEventListener detecta o click do mouse para restaurar a janela, através da função undock que será discutida adiante. Depois associamos um menu ao botão direito ( createSystrayRootMenu ) e finalmente, iremos fazer um addEventListener para interceptar o ato tradicional de minimizar a janela.

private function interceptMinimize(e:NativeWindowDisplayStateEvent):void {
if (e.afterDisplayState == "minimized") {
e.preventDefault();
win.visible = false;
NativeApplication.nativeApplication.icon.bitmaps = [dockImage];
}
}

A função interceptMinimize roda toda vez que há mudança no status da janela. Então, no if nós iremos verificar se ele está tentando ser minimizado. Se sim, nós iremos CANCELAR através da função preventDefault(). Em seguida, iremos tornar a janela invisível e ativar o ícone na bandeja do relógio. Simples até aqui, não…?

private function undock(e:Event):void {
win.visible = true;
win.orderToFront();
NativeApplication.nativeApplication.icon.bitmaps = [];
}

Para realizar o undock e restaurar a janela, também é simples. Primeiro deixamos ela visível e por segurança, trazemos ela pra frente com a função orderToFront(). Em seguida, tire o ícone do Systray. Pronto! Com apenas isto você já consegue minimizar seu aplicativo Air no Systray. Agora vamos à um bônus: Colocando um menu no botão direito do mouse, quando o aplicativo estiver minimizado do lado do relógio:

private function createSystrayRootMenu():NativeMenu{
var menu:NativeMenu = new NativeMenu();
var openNativeMenuItem:NativeMenuItem = new NativeMenuItem("Mostrar o Aplicativo!");
var siteNativeMenuItem:NativeMenuItem = new NativeMenuItem("Acessar o meu Blog!");
var exitNativeMenuItem:NativeMenuItem = new NativeMenuItem("Fechar o Aplicativo...");
openNativeMenuItem.addEventListener(Event.SELECT, undock);
siteNativeMenuItem.addEventListener(Event.SELECT, openSite);
exitNativeMenuItem.addEventListener(Event.SELECT, closeWindowByEvent);
menu.addItem(openNativeMenuItem);
menu.addItem(siteNativeMenuItem);
menu.addItem(new NativeMenuItem("",true));
menu.addItem(exitNativeMenuItem);
return menu;
}

A função createSystrayRootMenu cria o menu inteiro. Neste exemplo, vamos criar um menu com três itens! O primeiro vai ser uma opção extra para restaurar o aplicativo minimizado. Veja que basta associar a função undock já desenvolvida à esta opção. O segundo item, chama uma função openSite, que irá abrir o browser padrão que irá carregar um link específico. A última opção, é para fechar o aplicativo sem ter a necessidade de maximizá-lo antes. Bom, como a undock já foi explicada, veja como ficou a função openSite:

private function openSite(e:Event):void {
var url:String = new String("http://www.armandoschiavondias.com.br/");
var urlReq:URLRequest = new URLRequest(url);
navigateToURL(urlReq);
}

Como você viu acima, é bem simples. Basta criar uma string com a URL do site, depois criar um URLRequest para finalmente chamar o navigateToURL. Agora vamos ver a última função do nosso exemplo:

private function closeWindowByEvent(e:Event):void {
var closing:Event = new Event(Event.CLOSING,true,true);
dispatchEvent(closing);
if(!closing.isDefaultPrevented()){
win.close();
}
}

Nesta função, nós simulamos a ação “tradicional” de fechar a janela, nativa do Flex. Ou seja, nós criamos um evento que na verdade não aconteceu – e guarda este evento fictício na variável closing – envia ele para o sistema ( através do dispatchEvent ) e se ela não for cancelada, finalmente fechamos a aplicação!

O código inteiro fica assim:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="300" applicationComplete="autoExec()">
<mx:Script>
<![CDATA[
import mx.core.BitmapAsset;
private var dockImage:BitmapAsset;
private var win:NativeWindow;
[Embed(source="systray_icon.png")][Bindable] public var mySysTray:Class;

private function autoExec():void {
win = stage.nativeWindow;
dockImage = new mySysTray() as BitmapAsset;
if (NativeApplication.supportsSystemTrayIcon){
SystemTrayIcon(NativeApplication.nativeApplication.icon).tooltip = "Nome do meu aplicativo!";
SystemTrayIcon(NativeApplication.nativeApplication.icon).addEventListener(MouseEvent.CLICK, undock);
SystemTrayIcon(NativeApplication.nativeApplication.icon).menu = createSystrayRootMenu();
win.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING,interceptMinimize);
}
}

private function interceptMinimize(e:NativeWindowDisplayStateEvent):void {
if (e.afterDisplayState == "minimized") {
e.preventDefault();
win.visible = false;
NativeApplication.nativeApplication.icon.bitmaps = [dockImage];
}
}
private function undock(e:Event):void {
win.visible = true;
win.orderToFront();
NativeApplication.nativeApplication.icon.bitmaps = [];
}

private function createSystrayRootMenu():NativeMenu{
var menu:NativeMenu = new NativeMenu();
var openNativeMenuItem:NativeMenuItem = new NativeMenuItem("Mostrar o Aplicativo!");
var siteNativeMenuItem:NativeMenuItem = new NativeMenuItem("Acessar o meu Blog!");
var exitNativeMenuItem:NativeMenuItem = new NativeMenuItem("Fechar o Aplicativo...");
openNativeMenuItem.addEventListener(Event.SELECT, undock);
siteNativeMenuItem.addEventListener(Event.SELECT, openSite);
exitNativeMenuItem.addEventListener(Event.SELECT, closeWindowByEvent);
menu.addItem(openNativeMenuItem);
menu.addItem(siteNativeMenuItem);
menu.addItem(new NativeMenuItem("",true));
menu.addItem(exitNativeMenuItem);
return menu;
}

private function openSite(e:Event):void {
var url:String = new String("http://www.armandoschiavondias.com.br/");
var urlReq:URLRequest = new URLRequest(url);
navigateToURL(urlReq);
}

private function closeWindowByEvent(e:Event):void {
var closing:Event = new Event(Event.CLOSING,true,true);
dispatchEvent(closing);
if(!closing.isDefaultPrevented()){
win.close();
}
}

]]>
</mx:Script>
<mx:Label y="10" text="Exemplo de aplicação AIR" fontWeight="bold" horizontalCenter="0"/>
</mx:WindowedApplication>

Atualização (26/06/2009): Graças à observação do Lucas Monteverde, a função undock que era declarada como private function undock(m:MouseEvent):void { passou a ser declada como private function undock(e:Event):void {, pois deixando o parâmetro “mais genérico” conseguimos acioná-la tanto pelo click do mouse quanto pela opção do menu do botão direito do mouse, sem problemas! Atualizei o código e o exemplo em Zip!

E se você preferir, faça o download de um zip, contendo este exemplo inteiro, prontinho para você estudar e aprender!