Olá comunidade.
Nesse meu segundo tutorial sobre o Adobe AIR, irei mostrar como criar um aplicativo usando uma janela personalizada. Nessa janela, poderemos minimizar, maximizar, fechar e mover o aplicativo usando um layout personalizado, diferente das janelas padrões dos Sistemas Operacionais.
Pré-requisitos para esse tutorial:
- Flash CS3 com atualização para o Adobe AIR
- Adobe AIR
Para os que não sabem como instalar o Adobe AIR no seu computador ou atualizar o Flash, nesse tutorial eu mostro como fazer.
http://www.mxstudio.com.br/adobe-air/criando-aplicativos-air-no-flash-cs3
Criando sua janela
A criação da janela é livre, criem o desing que bem preferirem. Para esse tutorial irei usar o visual das janelas dos Mac OS da Apple. Comecei com um palco com dimenções de 540×340, desenhei três retangulos, um servirá como o topo da janela, outro será a área do conteúdo e o terceiro o rodapé da janela (como se fosse a barra de status). Selecionem os três retangulos e os coloquem em um MovieClip com instancia de janela. O MovieClip que criei ficou menor que o tamanho original do palco, pois decidi usar o filtro Glow para dar um efeito mais legal a janela.

No palco, criem seus botões de Fechar, Minimizar e Maximizar, dêem instancia de fechar, minimizar e maximizar respectivamente. Criem um campo de texto para ser usado como título de nossa janela, dêem instancia de campo a esse campo de texto. E por último, criem um MovieClip que será usado para dimencionar a nossa janela, dêem instancia de aumentar.
A minha janela personalizada ficou assim:

Programando sua janela
Com nossa janela criada, vamos ao ActionScript, tirando a parte em que a janela é maximizada ou dimencionada a programação é bem tranquila. Coloquem as seguintes ações no primeiro frame de seu arquivo:
/* Importamos a Classe */ import flash.desktop.NativeApplication; /* Deixamos o conteúdo para ser alinhado no canto esquerdo superior */ stage.align = StageAlign.TOP_LEFT; /* Manteremos a proporção do palco */ stage.scaleMode = StageScaleMode.NO_SCALE; /* Variável para saber se a janela está Maximizada ou não */ var clicado:Boolean = false; /* Posição inical do MovieClip janela */ var espaco:Number = janela.x; /* Variável que armazena tamanho mínimo para o aplicativo */ var tamMin:Point = new Point(stage.stageWidth, stage.stageHeight); /* Determinamos o tamanho mínimo do site */ stage.nativeWindow.minSize = tamMin; /* Criamos um Listener para saber quando a janela será modifica */ stage.nativeWindow.addEventListener(NativeWindowBoundsEvent.RESIZE, modifica); /* Criamos um Listener que será disparado quando clicar sobre a janela */ janela.addEventListener(MouseEvent.MOUSE_DOWN, movimenta); /* Criamos um Listener que será disparado quando clicar no botão aumentar */ aumentar.addEventListener(MouseEvent.MOUSE_DOWN, aumenta); /* Criamos um Listener que será disparado quando clicar no boão fechar */ fechar.addEventListener(MouseEvent.CLICK, fecha); /* Criamos um Listener que será disparado quando clicar no botão minimizar */ minimizar.addEventListener(MouseEvent.CLICK, minimiza); /* Criamos um Listener que será disparado quando clicar no botão maximizar */ maximizar.addEventListener(MouseEvent.CLICK, maximiza); /* Função que será disparada quando clicar na janela */ function movimenta(event:MouseEvent):void { /* Movimentamos nossa janela */ stage.nativeWindow.startMove(); } /* Função que será dispara quando clicar no botão aumentar */ function aumenta(event:MouseEvent):void { /* Modificamos o tamanho de nosso aplicativo */ /* O tamanho será modificado no canto interior direito */ stage.nativeWindow.startResize(NativeWindowResize.BOTTOM_RIGHT); } /* Função que será disparada quando clicar no botão fechar */ function fecha(event:MouseEvent):void { /* Fechamos o aplicativo */ stage.nativeWindow.close(); } /* Função que será disparada quando clicar no botão minimizar */ function minimiza(event:MouseEvent):void { /* Minimizamos o aplicativo */ stage.nativeWindow.minimize(); } /* Função que será disparada quando clicar no botão maximizar */ function maximiza(event:MouseEvent):void { /* Se o aplicativo não está maximizado */ if (clicado == false) { /* Maximizamos ele */ stage.nativeWindow.maximize(); /* Trocamos o valor da variável */ clicado = true; /* Escondemos o MovieClip aumentar */ aumentar.visible = false; /* Se o aplicativo está maximizado */ } else { /* Restauramos ele */ stage.nativeWindow.restore(); /* Trocamos o valor da variável */ clicado = false; /* Exibe o MovieClip aumentar */ aumentar.visible = true; } } /* Função que será disparada quando o aplicativo tiver seu tamanho alterado */ function modifica(event:NativeWindowBoundsEvent):void { /* Modificamos o tamanho do MovieClip janela */ janela.width = stage.stageWidth-(espaco*2); janela.height = stage.stageHeight-(espaco*2); /* Movemos o campo de texto para o centro do palco */ campo.x = (stage.stageWidth-campo.width)/2; /* Movemos o MovieClip aumentar */ /* Provavelmente vocês terão que modificar essa parte conforme o seu layout */ aumentar.x = janela.width-11; aumentar.y = janela.height-11; }
Preparando seu arquivo
Agora falta pouco para terminar de criar nossa janela. Se testarem seus arquivos, vocês irão notar que a janela padrão do Sistema Operacional ainda está visível, precisamos dizer ao nosso arquivo para que ignore essa janela.
Para isso, basta irem ao menu Commands e selecionar a opção “AIR – Application and Installer Settings”. Uma nova janela será aberta, na opção Window style selecionem “Custom Chrome (opaque)” ou “Custom Chrome (transparent)”, a diferença entre o opaque para o transparent é que o opaque o fundo do Flash é preservado e o transparent o fundo é removido (igual ao que ocorre ao se usar o wmode no HTML).

Pronto, agora é só testar seu aplicativo com a sua janela personalizada.
Considerações finais
A chance de criar nossas janelas personalizadas sem dúvidas é uma das inúmeras vantagens do Adobe AIR. A única recomendação que faço é para que não abusem muito dessa opção, evitem criar janelas que sejam muito pesadas ou que tenham muitas coisas, a Adobe pede isso pois seu aplicativo poderá usar mais memória e processamento do computador podendo até travar.
No próximo tutorial, irei mostrar como criar um aplicativo Drag and Drop, ou seja, pegar um arquivo do seu computador e jogar no aplicativo e poder interagir com ele.
Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá vocês poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com/
Um abraço a todos e até a próxima.
Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO
Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum










ShareThis
Parabéns cara mais um ótimo tutorial sobre AIR. Natan seguinte cara teria como vc me tirar uma pequena dúvida cara ,seguinte tem como eu bloquear o menu maximizar em uma aplicação do Adobe Air ? tipo igual ao Delphi a gente coloca o valor maximizar “false” e pronto o maximizar não funciona, teria como fazer isso no AIR também ?
muito bom esse tutorial! Parabéns
òtimo tutorial Natan, espero mais em cara..
Felipe: cara vai em COMMANDS>AIR – Application and Installer Settings depois clica no botão SETTINGS… e desmarque o MAXIMIZABLE e pronto
Abraço.
show natan, valeuuuuu
Show!Mas tem uns problemas:
1.Quando eu Maximizo ele os BTNS (eu também coloquei um Incone no canto da tela, com ele aconteceu o mesmo) eles não seguem os BTNs, eles ficam no mesmo lugar, a mesma coisa quando eu minimizo e abro de novo, não sei por que ele muda a windows para outro tamanho e os btns ficam no mesmo lugar.valeu
parabéns pelo tutorial! é show.
espero aprender a programar mais aplicativos no Adobe AIR.
Cara! Sinceramente, pense num post bom neguim!
Obrigado, precisava muito disso!
Love your new banner