Download do material: AbrirArq_by_fernandobritofl.zip

Segundo passo

Agora dê um clique no “keyframe” do “Layer 1″, e digite a seguinte Action:

Terceiro  passo

Pronto, agora é so pressionar “ctrl+enter”, clicar no Botão “Abrir…”,  então abrirá hà caixa de seleção de arquivos, após selecionar um arquivo, o “Painel Output” mostrará as informações do arquivo selecionado.

Bom, é isso. Qualquer dúvida ou ideia para tutorial comenta aí embaixo.

MultiTouch – Rotation by fernandobritofl from Fernando Brito on Vimeo.

1. Abaixo segue o arquivo ‘.fla’ para download, vamos precisar estar com ele aberto no Adobe Flash CS5.

janela1_clean.zip

2. Veja que nós temos dois Layer, um chamado “Action” aonde ficará as ações e outro chamado “Obj” nele se encontra dois components um Button e TextInput.

3. No Layer “Action”,  digite a seguinte Action: (Clique para ampliar)

4. Agora teste o seu aquivo (Control > Test Movie > Test). Veja que após digitar qualquer texto e clicar no botão, o texto vira titulo da janela do aplicativo.

Bom pessoa, é isso, na proxíma aula vamos apender a movimentar a janela por meio de botões.

Abs

1- Vamos abrir o Flash e no menu “Create new” selecionar “Adobe AIR 2?.

2- Vamos Criar um Rectangle de qualquer cor,  e converte em MovieClip e vamos dar o Instance name de winmc. Agora vamos criar dois MovieClips um tera o Instance namede fechamc e o outro de minimc.

3-Agora vamos colocar as seguintes ações:

Para testar use o atalho (ctrl+enter).

4- Agora clique no menu File e selecione a opção Publish, em Window Styleselecione Custom Chrome (Transparent), e clique em OK.

Para testar use o atalho (ctrl+enter), até a próxima pessoal.

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

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:

Ao criar o arquivo o Flash irá mostrar um pequeno aviso sobre o 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.

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

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