Serão 7 passos que lhe dará o gostinho de falar para todo mundo: “Olha o aplicativo que eu mesmo programei, pega ai o instalador dele, pode usar!”.
Vamos lá, uma pequena introdução ao que na verdade é Air. Baseada na mesma linguagem do flash, ela serve para criar aplicativos híbridos que usam informações direto da web e são naturalmente compatíveis com Windows, Mac, Linux. Resumidamente, você cria aplicativos extremamente leves, úteis e que não dão trabalho absolutamente nenhum tanto para o programador quanto para o usuário ao instalar em quais quer que seja a plataforma usada.
Abaixo descreverei em 7 passos como criar um widget para visualizar imagens usando o Flash CS4. Ele permitirá colocar no desktop uma galeria de imagens com controles básicos.
Alguns exemplos de peso que são desenvolvidos com a tecnologia Air é o TweetDeck e o Desktube, será que já ouviu falar de algum deles???? rsrsrs
Para começarmos será necessário o Flash CS4 que colocarei o link ai embaixo da versão Trial, e também o link com os arquivos* contendo os códigos fontes para que não precisem ficar digitando tudo.
(*contem também um exemplo de como o aplicativo deverá ficar.)
- Clique aqui para fazer o download do Flash CS4 Trial. (válido por 30 dias)
- Clique aqui para fazer o download do Zip dos arquivos.*
Bom, chega de introdução, acho que já deu para entender um pouco. Vamos colocar a mão na massa!!!!
1 – Criação do Projeto:
Na tela de abertura do Flash CS4, escolha Flash File (Adobe Air). Acesse File –> Save e escolha uma pasta na qual será gravado o seu projeto. Note que serão gerados 3 arquivos, um XML, com a descrição do projeto, e outros dois com extensões .FLA e . SWF para o aplicativo Flash.
2 – Área para a Imagem:
Crie um retângulo cobrindo toda a área do aplicativo, pitando com a cor cinza. Depois, clique na ferramenta de texto, escolha a cor branca na seção Character. Crie ima seção de texto indicando: ‘Clique nos botões para carregar as imagens”. Selecione o retângulo e o texto, e tecle F8. Pressione o botão Advanced. Digite o nome AreaImagem para o novo objeto e escolha em Type, a opção Movie Clip. Marque a opção Export For ActionScript e digite, em Class, o texto Areaimagem. Clique em OK para confirmar a criação do objeto. Clique no retângulo e, na guia Proprieties, tecle Areaimagem1 no primeiro campo (com texto Instance Name). Por fim, clique duas vezes em Layer 1 e mude seu nome para Fundo.
3 – Botões:
Acesse Insert –> Timeline –> Layers. Clique duas vezes em Layer 2 e mude o texto para Botoes. Será preciso criar dois botões, apontando para esquerda e para a direita. Faça isso usando a ferramente PolyStar, desenhando dois triângulos. Para cada botão, tecle F8 e digite um nome, selecionando a opção Button em Type. Marque o item Export for ActionScript e clique em OK. Clique no botão para a esquerda e, na guia Proprieties, digite bntEsquerda1. Repita a operação para o botão para a direita.
4 – Tratamento de Eventos:
Acesse Insert –> Timeline –> Layer. De a nova camada o nome de Acoes. Tecle F9 para acessar a área de códigos. Para começar é preciso definir eventos para os cliques nos botões. Cada botão tem um código semelhante ao descrito abaixo:
bntEsquerda1.
addEventListener(MouseEvent.
CLICK, contaImagem);
Note que o evento do clique é tratado por uma função que definiremos posteriormante, denominada voltaimagem. analogamente devemos criar um objeto para carregar imagens, que chamaremos de imagensLoader, além de definir os eventos de carga de imagens para ele:
AreaImagem1.
addChild(ImagensLoader);
ImagensLoader.
contentLoaderInfo.
addEventListener(Event.
COMPLETE, ajustaImagem);
5 – Comandos:
Quando o programa é executado, ainda não foi definida uma pasta com imagens. Assim, deve ser mostrada uma janela para escolha do diretório com as fotos. Para isso, criaremos as funções voltaImagem e proximaImagem, que são quase idênticas e, ao detectar que não há pasta escolhida, rodam o comando abaixo para permitir a escolha de um diretório:
pastaImagens.
browseForDirectory(“Escolha a pasta com as imagens”);
A variável pastaImagens trará o diretório escolhido pelo usuário e gerará um evento denominado Event.SELECT. Trataremos ele com a função carretaPasta, que lista os arquivos com os nomes na variável listaImagens:
listaImagens=pastaImagens.
getDirectoryListing();
Também é definida uma variável que marcará qual imagem o programa está mostrando, denominada ListaImagemPos, com valor zero.
6 – Abertura dos Arquivos:
Com a lista de arquivos pronta, mostrar a imagem é bem fácil. Basta rodar o comando abaixo:
imagensLoader.load(new
URLRequest
(listaImagens[ListaImagensPos].
url));
As funções que tratam dos botões devem ser modificadas para aumentas e diminuir o valor de ListaImagensPos, observando o tamanho da lista de imagens (que é indicado por listaImagens.lenght). Para completar o visualizador de imagens é preciso redimensionar a imagem. Para isso, devemos definir um novo evento, que é acionado após a carga de uma imagem:
imagensLoader.
contentLoaderInfo.
addEventListener(Event.
COMPLETE, ajustaImagem);
Na função ajustaImagem, calculamos a proporção entre as dimensões da janela e o tamanho da imagem, armazenando o valor na variável escala. O redimensionamento é feito com os comandos abaixo:
imagensLoader.scaleX=escala;
imagensLoader.scaley=escala;
7 – Teste e Instalação:
Para testar o visualizador de imagens, tecle Crtl+Shift+Enter. Na janela do programa, clique em um dos botões e escolha a pasta com as imagens. Para completar, precisamos gerar um arquivo Air, que pode ser distribuído com facilidade. Para isso acesse File –> Air Settings. Clique em Publish Air File. Na tela que surge, pressione o botão Create, para criar um certificado. Na janela seguinte, digite as informações do desenvolvedor da aplicação (nesse caso você.), além de atribuir uma senha para proteção do arquivo. Pessione o botão Browse e grave o certificado, que pode ser usada para autenticar outros programas desenvolvidos por você.
Espero que tenham gostado do tutorial, aconselho fazer o procedimento pelo menos uma vez de maneira simplificado com a intenção de estudar o procedimento e entende-lo. depois coloque sua criatividade para voar e crie a sua própria interfaces, seus próprios botões, etc.
Leia Mais…
