Incorporando Adobe AIR ao Flash CS3

 Adobe Integrated Runtime, antes conhecido como Apollo, é uma nova tecnologia desenvolvida pela Adobe para rodar aplicativos em seu Desktop. Isso mesmo, aplicativos que você cria para a Web poderão ser usados para rodar em qualquer computador que tenha o AIR instalado.

O que você precisa

• Flash CS3
• Flex 3
• Dreamweaver CS3 (criação usando AJAX)

Instalando

Antes de ir para o Flash, vocês precisam baixar uma atualização para que o Flash possa criar arquivos em AIR. Para isso, basta ir ao site da Adobe e baixar o último update para o Flash CS3.
http://www.adobe.com/support/flash/downloads.html

Além desse update, vocês precisam baixar a última versão do Adobe AIR para conseguir rodar seus aplicativos.
http://get.adobe.com/air/


Iniciando o AIR no Flash

Após instalarem o update do Flash e o Adobe AIR em sua máquina, vamos para o Flash criar nosso primeiro aplicativo em AIR. Abrindo o Flash, vocês irão notar uma nova opção de arquivo na tela inicial do Flash: 

 

Clique em OK

A primeira vista, não existe nada diferente em relação a um arquivo em Flash normal, a diferença está quando testamos o aplicativo. Em um arquivo em Flash normal quando testamos ele (Ctrl+Enter) ele não roda no Flash Player e sim em uma janela do AIR.

Bom, chegou a hora de criar nossa aplicação. Sintam-se livre para fazer qualquer coisa em seu aplicativo, podemos usar qualquer coisa nele, usar Componentes, usar ActionScript, animação quadro a quadro, motion tween, frames, cenas, tudo, exatamente o que faríamos em uma aplicação voltada para a Web.

Para esse tutorial irei criar algo simples, usarei o logo do MXStudio e um pequeno texto que carregarei de um arquivo de texto. Criem um campo de texto dinâmico com instancia de texto, arrastem o Componente UIScrollBar para cima do campo de texto e de instancia de scrollBar. Com o Componente selecionado, abra o painel Parameters e vejam se o campo scrollTargetName está preenchido com o valor “texto” que é a instancia do se campo de texto dinâmico. Agora, coloquem as seguintes ações no frame que seu campo de texto se encontra:

/* Cria uma nova instancia da Classe URLLoader */
var carrega:URLLoader = new URLLoader();
/* Carregamos o arquivo txt */
carrega.load(new URLRequest("lorem.txt"));
/* Criamos um listener para saber quando terminou de carregar */
carrega.addEventListener(Event.COMPLETE, exibe);
/* Função acionada quando o texto termina de carregar */
function exibe(event:Event):void {
   /* Mostramos o texto */
   texto.text = event.target.data;
   /* Dizemos ao ScrollBar qual campo de texto mover */
   scrollBar.scrollTarget = texto;
}

Com seu aplicativo criado, iremos agora criar o arquivo .air, esse arquivo é o arquivo que vocês poderão enviar a outros usuários para que eles possam instalar o seu aplicativo. Para criar seu aplicativo, vocês precisam primeiro salvar seu arquivo em seu HD.
Com seu arquivo salvo, para criar o aplicativo iremos a opção Comands localizado no menu superior do Flash e selecionaremos a opção “AIR – Application and Installer Settings”. Um novo menu é aberto com um monte de opões para a criação do arquivo AIR:

Legenda:
1- aqui vocês colocam informações a respeito do aplicativo, o nome do arquivo, o nome do aplicativo, um ID para se diferenciar dos demais, a versão do aplicativo, alguma descrição e os direitos sobre ele. Eu recomendo mudar apenas os campos File name, Name, Description e Copyright para não gerar nenhum outro tipo de problema.
1a- Na opção “Window style” vocês podem escolher a forma que o arquivo AIR irá aparecer na tela, existem as opções “System Chrome” que usa a janela no estilo do sistema operacional que o aplicativo for instalado, “Custom Chrome (opaque)” com essa opção nossa janela não terá a aparência de nenhum sistema operacional, com essa opção nós podemos criar as janelas que desejarmos com os botões de minimizar, maximizar e fechar personalizados, e a última opção é “Custom Chrome (transparent)”, que funciona da mesma maneira da anterior, a diferença é que seu palco fica totalmente transparente.
1b- Podemos escolher o ícone para nossa aplicação. O ícone precisa ser no formatao PNG.
1c- Nessas opções avançadas, podemos definir um tamanho inical de nossa aplicação, a posição que o programa deve iniciar quando aberto, se queremos botões se maximizar, minimizar, fechar e podemos ainda definir em qual local o programa será instalado e o local dele no menu iniciar.
2- aqui se escolherem a opção “Use custom application descriptor file” vocês podem usar algum arquivo XML que contém essas informações.
3a- aqui escolhemos o certificado digital que usaremos (explicado mais a frente).
3b- o local onde o arquivo .air será salvo.
3c- arquivos que incluiremos em nosso projeto, os arquivos inclusos nessa opção estarão dentro do pacote AIR, se você criar alguma galeria por exemplo, pode incluir as fotos, os arquivo XMLs entre outros arquivos que façam parte da aplicação.

Para esse aplicativo que estamos criando, devemos incluir o arquivo de texto usado para que o programa possa funcionar corretamente. Portanto, basta clicar no botão com o símbolo de + e adicionar o arquivo de texto que estiverem usando. Se não fizermos isso, quando o usuário instalar o aplicativo nada será exibido porque ele não tem o arquivo de texto.

Digital signature

Nós teremos que criar um certificado digital que usaremos em todos os nossos aplicativos feitos para o AIR. Mas porque isso? Simples, um aplicativo em AIR é como um programa rodando em nosso sistema operacional, e como todo programa tem acesso a dados e outras informações em nosso HD. Um Certificado digital nos dá uma pequena garantia de que esse programa não irá interferir em nada em nosso sistema operacional.
Podemos comprar um certificado digital ou criar o nosso próprio arquivo digital pelo Flash. Criando um certificado digital pelo Flash é uma boa para os que querem aprender mais sobre o AIR, aos que desejam comercializar esses aplicativos é uma boa comprar um certificado.
Para criar seu certificado digital, iremos de novo a tela de opções ”AIR – Application and Installer Settings” no menu Commands do Flash. Com a janela aberta clicaremos na opção “Change”:

Uma nova janela é aberta, nela selecionaremos a opção ”Sign the AIR file with a digital certificate” e depois a opção Create. Mais um menu será exibido, nele vocês irão preencher com as suas informações como nome, organização, país e criar uma senha para esse arquivo, essa senha será usada em todos os arquivos AIR que desejar criar com esse certificado digital. Escolham o local no qual esse certificado será salvo e clique em Ok.

Se tudo estiver certo uma mensagem de sucesso será exibida pelo Flash dizendo que o certificado digital foi criado com sucesso.

Agora selecionem o seu certificado criado, coloquem a senha que criaram para ele, vocês podem selecionar a opção “Remember password for this sesssion”, com ela selecionada vocês não precisam ter que digitar a senha do certificado sempre que criar o arquivo AIR.
Agora basta clicar na opção Publish AIR File, e se tudo estiver correto, aparecerá uma mensagem de que o arquivo AIR foi criado com sucesso.

Com nosso arquivo gerado, vamos instalar ele em nossa máquina e ver se tudo está funcionando corretamente. Basta dar um duplo clique sobre o arquivo AIR e uma nova janela será aberta:

Selecionamos aonde desejamos instalar o aplicativo, se desejamos que ele tenha um atalho em nossa área de trabalho e se queremos que ele seja iniciado quando terminar a instalação. Com a instalação terminada, nosso aplicativo é exibido da mesma maneira quando testamos ele no Flash.

Uma coisa bem legal de aplicativos em AIR é que eles realmente parecem ser um programa, se vocês estiverem usando Windows poderão acessar ele pelo Menu Iniciar. E como é um aplicativo, para remover ele de seu computador vocês precisam desinstalar ele, usando a opção Adicionar/Remover programa do Windows.

Considerações finais

Adobe AIR é mais uma nova tecnologia desenvolvida pela Adobe que promete revolucionar o modo como os aplicativos voltados para Desktop são criados. Não tem como não ficar animado com essa nova tecnologia, que está apenas começando mas já promete muito.
Nos próximos tutoriais que irei escrever sobre essa nova tecnologia irei mostrar como criar aplicativos usando janelas personalizadas, interação com arquivos no computador do usuário usando “Drag and Drop” entre outras novidades que irei descobrir e compartilhar com vocês.
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