Criando aplicativos AIR no Flash CS3

Olá comunidade.

Inaugurando a nova seção de tutoriais do MXStudio, irei mostrar a vocês sobre uma nova tecnologia lançada pela Adobe a um certo tempo, o Adobe AIR.

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 para criar aplicativos em AIR:

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

Hoje, irei mostrar como criar um aplicativo em AIR usando o Flash CS3.

Preparando-se para o AIR

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 Adobe 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:

Nova opção de arquivo

Ao criar o arquivo o Flash irá mostrar um pequeno aviso sobre o AIR.

Aviso AIR

Caso essa tela inicial do Flash não é exibida para vocês não se preocupem, para criar um arquivo AIR basta criar um novo arquivo no Flash, pode ser em ActionScript 2 ou ActionScript 3, abrir o painel Publish Settings (Ctrl+Shift+F12), clicando na aba Flash, na opção “Version” selecionem Adobe AIR 1.0. Se reparar, o campo “ActionScript version” é desabilitado porque aplicativos em AIR só rodam usando o ActionScript 3, por isso o AIR só funciona para os usuários do Flash CS3 e Flex 3.

Criando arquivo AIR

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:

Opções aplicativo 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”:

Digital signature

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.

Criando arquivo Certificado Digital

Criando arquivo Certificado Digital

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

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.

Gerando arquivo AIR

Arquivo AIR gerado 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:

Preparando-se para instalar

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.

Opções instalação

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

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Escrito por Natan D. Alves on junho 30, 2008. Arquivado em Adobe AIR. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

26 respostas a Criando aplicativos AIR no Flash CS3

  1. eu tenho uma dúvida.
    Os applicativos .AIR so intalam nas máquinas q tem o adobe AIR?

  2. Sim Kakash, para que o arquivo .air seja instalado na máquina precisa do Adobe AIR instalado.

    []s

  3. ae quebra as nossas pernas.., vc sabe de algum jeito de criar um intalador q instale o adobe AIR e o aplicativo juntos?

  4. Pingback: Blog Natan Alves » Adobe AIR - Tutorial no MXStudio

  5. Realmente a necessidade de o cliente instalar o AIR antes é um pouco complexa, mas acredito que se for bem explicado as vantagens que ele terá, ele será convencido. Será como Acrobat Reader e plug-in swf, no começa era mais complicado do usuario aceitar, mas hoje ja se tornaram padrão.

  6. ótima iniciativa, parabens..

    esperamos mais tutos sobre AIR anciosamente…

  7. Apos a leitura dessa pagina, me veio a pergunta.

    Qual a diferença entre AIR e o tradicional projector do flash, o famoso .EXE?

    Existe alguma seção de programacao especial para o AIR? Tipo comandos especiais pra ele? Interacoes online com php, xml, mas que sejam exclusivos do AIR?

    Valeu galera!!!

  8. Eugenio, a diferença entre um aplicativo AIR e um EXE, é que o AIR é um aplicativo, um programa e um arquivo EXE é apenas uma aplicação.

    No AIR o usuário precisa do AIR instalado para conseguir fazer rodar o programa que você criou, o EXE só precisa do FlashPlayer.

    O AIR pode fazer interação como arquivos PHP, XML da mesma forma da interação do Flash com essas linguagens. O AIR possui classe e funções que só funcionam para o AIR.

    []s

  9. Natam eu baixei os aqrquivos todos certos mas não apareceu a opção no flash de criar arquivo em AIR DA UMA FORÇA AI BROTHER..

    felipeh5n2@globo.com

  10. Felipe, você baixou o update do Flash CS3 e instalou ele sem que nada de errado tenha acontecido durante a instalação?

    Você pode tentar criar um arquivo em ActionScript e no painel Publish Settings escolher a versão do FlashPlayer do Adobe AIR 1.0, como mostro no tutorial.

    []s

  11. Natan deu certo aqui cara deve ser o windows vista não sei, vc deve usar o vitsa sabe como é , bom eu desistalei o flash e ao invés de baixar do site fui no menu “updates” ai sim funcionou direito. Mas agora eu tenho outra questão eu consigo criar o arquivo .AIR corretamente mas não consigo abri-lo nem mesmo com o Adobe Air instalado ele abre como se fosse um SWF oq eu devo fazer?

  12. Felipe, quando você testa seu aplicativo usando Ctrl+Enter o Flash vai gerar um swf que vai ser usado pelo AIR. Para que você possa instalar essa aplicação, você precisa gerar o arquivo .air e usar ele para instalar seu aplicativo.

    []s

  13. Natan vlw ai por ta me ajudando cara. Seguinte eu consigo criar a aplicação .AIR ela até aparace na minha aréa de trabalho o negócio e na hora de abrir, ela abre como SWF do flash sei la será que tem alguma configuração pra fazer a mais?

  14. Felipe, se o arquivo .air é criado ele tem que ser aberto pelo Adobe AIR para que possa instalar o aplicativo e não pelo FlashPlayer. Eu não sei se tem como fazer isso, mas clique com o botão direito do mouse sobre o arquivo, vá em abrir com e veja se aparece na tela de opções o Adobe AIR e abra por ele.

    []s

  15. Não cara disso eu sei que tem que ser aberto pelo AIR por isso eu to perguntando se tem mais alguma configuração por exemplo vc sabe onde fica o diretório do AIR ou o executavél dele? eu não to achando ele..

  16. Ha Natan seguinte cara eu acho que o problema ta no meu pc eu testei no meu outro computador e funcionou blz, sabe oq é aqui ta dando uns confiltos cara eu to usando o “Windows Vista Ultimate 32Bits” e vem acontencendo mesmo esses conflitos de um a programa querer abrir outro por exemplo os arquivos .FLA só abrem pelo Flash Player ou seja o problema deve ser o Flash Player ele quer abrir tudo relacionado a adobe. Então eu vou desestalar e instalar pra ver, mas no mais ta tudo blz a instalação funcionou tranquilamente o que éra o mais importante. Vlw ai pela ajuda e desculpa ai qualquer coisa.

  17. Ola, Natan!
    Muito show seu tutorial.
    Eu to tendo problemas apenas na hora de instalar o arquivo ‘.air’ que gerei.
    Segui seus passos e apareceram todas as mensagens de sucesso, mas qdo clico no arquivos duas vezes para executar aparece uma msg de erro: “nãofoi possível instalar o aplicativo porque o arquivo AIR está danificado”.

    Ja apaguei os arquivos, fiz tudo de novo, e nd.
    Sabe o que pode ser?

    Vlw.

  18. E ae, Natan!
    Bom, esse primeiro problema eu consegui resolver.

    Agora tem mais: sabe como conectar uma aplicação do AdobeAir instalada no pc com um flash no browser? Estou tentando utilizar o LocalConnection mas não funciona.

    Aguardo uma ajuda sua.
    Abraços!

  19. Bruno Salgado.. como vc conseguiu resolver aquele primeiro problema?? posta ae pra galera pq no meu deu o mesmo problema…

  20. Perfeito, agora vou tentar fazer outras ações.

  21. Eu uso o CS4, e não to achando o AIR – Application and Installer Settings no painel Commands, de qual que forma, fui vendo os comentarios e inventei um jeito de contorna o problema da máquina não ter AIR:
    Pode criar no baço um fla que tem o nome do aplicativo e dois BTNs:
    Um escrito “Install Adobe AIR” com um link pro lugar onde estalar o AIR e outro BTN escrito “Load Aplication Installer” que ao clique rode o AIR criado.

  22. MaykBrito, eu tô com o mesmo problema.

    Pena que o Bruno Salgado não disse como resolveu.

    Já tentei de tudo, várias versões de SDKs, várias alterações em xmls de configs. e várias versões de players e nada, consigo compilar tudo mas sempre dá a mesma msg no instalador: ““não foi possível instalar o aplicativo porque o arquivo AIR está danificado”.

  23. e aí Natan,estou precisando de uns materias relacionados a Adobe air,será que vc poderia me passar algo???

  24. GALERA O PROBLEMA ““não foi possível instalar o aplicativo porque o arquivo AIR está danificado” É SIMPLES DE RESOLVER, É SO ATUALIZAR A DATA E HORA DO WINDOWS. VCS USAM O WINDOWS 7 ?

  25. Natan…eu gostaria de saber uma coisa.
    no adobe air, tem como fazer conexão com banco de dados??

    Por que arquivos de flash, nao fazem conexão e nao acessam banco de dados.

  26. Pingback: Criando janelas personalizadas | MXStudio

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>