Desenvolvendo aplicativos para iPhone usando o Flash

Bom, inaugurando a categoria mobile, irei aqui escrever um pouco sobre desenvolvimento de aplicativos para iphone utilizando o Flash. A grande vantagem de se utilizar o flash para desenvolvimento de aplicativos para celulares, é que se pode utilizar exatamente o mesmo código para outras plataformas também, ou seja, com o mesmo código pode-se criar para iPhone, celulares com Android, pc, mac, entre outros dispositivos que aceitem o uso da tecnologia Adobe AIR.

Vantagens:

• Multiplataforma (O mesmo aplicativo na mesma linguagem de programação roda exatamente igual em diversos sistemas operacionais diferentes, ex: PC, Mac, IOS (iphone/ipad), android…
• Design, é possível fugir do padrão e desenvolver seu próprio layout, obviamente para alguns isso é uma grande vantagem, para os sem criatividade isso é uma desvantagem.
• Pode-se desenvolver o aplicativo utilizando um Mac ou um PC, não há a necessidade de comprar um mac só para desenvolver para o IOS.

Desvantagens

• Pouco mais lento que o aplicativo desenvolvido na linguagem padrão, já que o Adobe AIR é uma máquina virtual, assim como o flash player. (A diferença de velocidade é imperceptível)
• Deve-se respeitar algumas limitações, como por exemplo no IOS não é possível utilizar o sistema de notificações Push (Alertas), não é possível fazer o app iniciar automaticamente quando liga o celular, não é possível rodá-lo como serviço.
• Se não respeitado algumas dicas de optimização do código fonte irá consumir muito mais bateria que o normal (ex: Loops desnecessários, enter frame desnecessário).

Sinceramente colocando na balança hoje as vantagens e desvantagens penso da seguinte maneira: Se eu for criar um aplicativo específico para o iPhone, e não tenho planos futuros de abrir o app para outras plataformas, o ideal é utilizar a linguagem padrão do iphone, o objective-c, mas na grande maioria dos casos, que pretendo futuramente abrir meu app para outras plataformas como android ou mesmo para o desktop, sem dúvidas opto pelo adobe AIR for IOS.

Ok, entendi, mas como desenvolvo para o iPhone?

Primeiramente você deve se inscrever no programa de desenvolvedores da Apple. Sim, tem um custo, U$99 dólares por ano, além disto no Brasil não há programa de desenvolvedor da Apple, portante também irá gastar na conta telefônica para enviar um fax para a Apple nos EUA.

Para virar desenvolvedor da Apple acesse o seguinte site: http://developer.apple.com/programs/ios/ e basta seguir as instruções, que se encontram em inglês, lá também irá ensinar a criar um certificado e um provisioning profile, dois arquivos necessários para exportar seu aplicativo mesmo que para teste, ou para exportá-lo para enviar à App Store. Se não entende o que o site diz pq está em inglês tenho duas opções para você: 1. Estude inglês, pois qualquer programador que não entenda inglês é um programador incompleto, ou a segunda opção… Largue esta área e tente se dar bem talvez com moda ou culinária

O que faço após conseguir o certificado e o provisioning profile?

Agora pode começar a desenvolver, como o tema aqui é utilizando o flash para desenvolver para o iPhone/iPad, irei ensinar somente utilizando o Flash.

Será necessário a instalação do Adobe Flash Professional 5.5, o 5.0 também dá, mas terá um rendimento e um processamento muito menor, pois o Flash 5.0 exporta o aplicativo com o Flash Player, enquanto o Flash 5.5 exporta o app com o AIR Runtime, que roda ao menos 4x mais rápido que o iPhone Packager.

Opcional: Poderá também instalar o SDK do AIR 2.7, o Flash CS5.5 vem com o AIR2.6, porém o 2.7 é ainda muito mais rápido que o 2.6, para atualizar a versão do SDK do AIR siga o tutorial fornecido pela própria Adobe no seguinte link http://kb2.adobe.com/cps/908/cpsid_90810.html (Versão atual: 2.7.1).

Tudo instalado

Agora começa a parte do desenvolvimento, primeiramente abra o Flash CS5.5, e crie um novo documento, no tipo de documento escolha AIR for IOS. Atenção ao tamanho do stage, o padrão é 320×480, este é o tamanho para o iphone 3GS e a posição VERTICAL (celular em pé), se o seu aplicativo terá resolução HORIZONTAL altere os valores para 480×320. Caso for criar um aplicativo para o iPhone 4, lembre-se que a resolução é 640×960 (vertical) ou 960×640 (horizontal). Lembrando também que o iPad tem resolução 1024×768. Todas estas resoluções são em Full Screen, se deseja inserir a barra de informações do iPhone/iPad no topo, a barra tem 20px de altura, então por exemplo no iPhone 3GS em posição VERTICAL a resolução do aplicativo será 320×460. Sobre horizontal e vertical será ensinado na próxima etapa.

Configurando os parâmetros do Flash para iPhone

Com o documento aberto, abra as propriedades (window->properties), neste menu note que tem o tipo de player, deve estar Flash for IOS, clique no ícone ao lado (uma ferramenta) para configurarmos. Veja na imagem abaixo.

Nesta tela que se abre, temos as opções do aplicativo, se irá rodar em Full Screen, se é Horizontal ou Vertical… Lembre-se que se o app não for Full Screen, deixa a opção Full Screen desmarcada. Em aspect Ratio você escolhe o tipo da tela, vertical, horizontal ou automático. (Portrait para Vertical, Landscape para Horizontal ou Auto se deseja utilizar o acelerômetro para auto rotacionar a tela. Em Rendering escolhe qual o dispositivo para renderizar os gráficos, curiosamente o CPU é mais rápido que o GPU para renderizar… Device você escolhe para qual dispositivo vai ser o APP, iPhone/iPad ou ambos. e Resolution para definir a resolução da tela.

Na aba Deployment, você irá configurar o certificado que você deve ter criado antes e o provisioning profile que você consegue no site da Apple, através do passo a passo descrito no site do desenvolvedor da Apple. (Para testar sempre marque a poção Quick publishing for device testing), pois ele irá criar um arquivo .ipa que você poderá passar pelo iTunes posteriormente (ou quem tem jailbreak no iphone pode passar pelo iPhone explorer para a pasta do installous e instalar pelo installour normalmente).

Tudo configurado, vamos começar a desenvolver!

Agora que está tudo certo para iniciar de verdade o desenvolvimento, irei passar um tutorial básico de como se trabalhar com os gestos (Zoom, rotação, deslizar o dedo…)

Primeiramente importe uma imagem para o flash, pode ser qualquer imagem, de preferência alguma no tamanho 320×480, que preencha toda a tela do seu aplicativo, apenas para testarmos o tutorial. (considerando que a opção Full Screen está ativada).

Posicione esta imagem no centro a fim de preencher toda a tela, e transforme-a em um MovieClip (Modify -> convert to symbol, MovieClip). * Ponto de registro deve ser no centro.

Instancie este recém criado MovieClip de “foto” (sem aspas claro). E está pronto a parte visual do teste.

Agora clique em qualquer lugar do stage que não seja em cima da foto, e vá em “window -> Properties”, para abrir as propriedades do arquivo. Em Class coloque “Main”, apenas isto.

Agora crie um novo documento actionscript (File -> new -> Actionscript File). Salve este arquivo com o nome de Main.as na mesma pasta onde irá salvar o .fla do seu projeto.

Agora iremos iniciar a programação, neste ponto se testar seu projeto irá perceber que o mesmo irá dar um erro, pois criamos um arquivo chamado Main.as em branco, e configuramos a classe do nosso projeto para Main, resumindo ele irá buscar o arquivo Main.as que estará em BRANCO.

Então primeiramente monte um esqueleto do arquivo .as, como no exemplo abaixo estou usando MovieClip como base (normalmente uso Sprite se não tenho nenhuma animação).

package {
import flash.display.MovieClip;
public class Main extends MovieClip {
public var foto:MovieClip; //Instância da foto que está no palco.
}
}

Pronto, com este esqueleto se testar o projeto irá aparecer a imagem que importou na tela, e mais nada irá fazer o aplicativo. Vamos então adicionar algumas funcionalidades.

Zoom

No iphone, o evento zoom é disparado quando você faz o famoso gesto de colocar dois dedos na tela e distanciar os dois dedos para aumentar o zoom, ou aproximá-los para diminuir o zoom. No flash, já é pré-definido este gesto, faz parte do pacote flash.ui, está na classe Multitouch. Então vamos importar as classes necessárias.

import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.events.TransformGestureEvent;

Agora iremos utilizar a função construtora da nossa classe Main para adicionar eventos e definir o tipo do Multitouth, criamos então a função construtora, definimos o tipo do multitoque e vamos adicionar o evento quando o gesto de zoom for feito:

public function Main():void {
 Multitouch.inputMode = MultitouchInputMode.GESTURE;
 this.addEventListener(TransformGestureEvent.GESTURE_ZOOM, zoom);
}

Ok, agora devemos criar a função zoom, que adicionarmos no evento TransformGestureEvent.GESTURE, observe no código abaixo que o evento nos dá os resultados da escala, mas ele não é relativo à escala da nossa foto, então iremos multiplicar a escala da foto pela escala do evento.

private function zoom(e:TransformGestureEvent):void {
 foto.scaleX *= e.scaleX;
 foto.scaleY *= e.scaleY;
 }

Se testar o aplicativo agora, a foto já irá dar zoom ou remover zoom utilizando o famoso gesto de zoom com os dois dedos. Até agora nosso código está da seguinte maneira:

package {

 import flash.display.MovieClip;
 import flash.ui.Multitouch;
 import flash.ui.MultitouchInputMode;
 import flash.events.TransformGestureEvent;

 public class Main extends MovieClip {

 public var foto:MovieClip;

 public function Main():void {
 Multitouch.inputMode = MultitouchInputMode.GESTURE;
 this.addEventListener(TransformGestureEvent.GESTURE_ZOOM, zoom);
 }

 private function zoom(e:TransformGestureEvent):void {
 foto.scaleX *= e.scaleX;
 foto.scaleY *= e.scaleY;
 //OPCIONAL, caso deseja limitar a escala da foto, descomente as linhas abaixo
 /*
 if(foto.scaleX<0.5) foto.scaleX=0.5; //Limita escala mínima de x em 0.5
 if(foto.scaleX>1.5) foto.scaleX=1.5; //Limita a escala máxima de x em 1.5
 if(foto.scaleY<0.5) foto.scaleY=0.5;
 if(foto.scaleY>1.5) foto.scaleY=1.5;
 */
 }
 }
}

Já podemos exportar e testar o aplicativo, para quem tem o provisioning profile e o certificado de desenvolvedor da Apple, basta jogar o arquivo no itunes e sincronizar, caso contrário somente mesmo com jailbreak, jogando na pasta /var/mobile/documents/installous/downloads pelo iphone explorer e instalando pelo installous.

Rotate

O evento de rotação é um pouco mais simples que o de zoom, requer menos linhas. Para adicionarmos um evento de rotação, adicione a seguinte linha à função construtora:

this.addEventListener(TransformGestureEvent.GESTURE_ROTATE, rotate);

E também iremos adicionar a função “rotate” que o evento de rotação irá chamar, lembrando que o evento não tem como reconhecer a rotação do objeto, então ao invés de apenas atribuir o valor de rotação do evento, iremos somar a rotação do objeto à rotação do evento.

private function rotate(e:TransformGestureEvent):void {
 foto.rotation += e.rotation;
 }

Então nosso código ficou assim:

package {

 import flash.display.MovieClip;
 import flash.ui.Multitouch;
 import flash.ui.MultitouchInputMode;
 import flash.events.TransformGestureEvent;

 public class Main extends MovieClip {

 public var foto:MovieClip;

 public function Main():void {
 Multitouch.inputMode = MultitouchInputMode.GESTURE;
 this.addEventListener(TransformGestureEvent.GESTURE_ZOOM, zoom);
 this.addEventListener(TransformGestureEvent.GESTURE_ROTATE, rotate);
 }

 private function zoom(e:TransformGestureEvent):void {
 foto.scaleX *= e.scaleX;
 foto.scaleY *= e.scaleY;
 if (foto.scaleX < 0.5) foto.scaleX = 0.5;
 if (foto.scaleX > 1.5) foto.scaleX = 1.5;
 if (foto.scaleY < 0.5) foto.scaleY = 0.5;
 if (foto.scaleY > 1.5) foto.scaleY = 1.5;
 }

 private function rotate(e:TransformGestureEvent):void {
 foto.rotation += e.rotation;
 }
 }
}

Então basta publicar novamente e testar.

Obs: Os gestos não são suportados em um monitor comum, mesmo o gesto de deslizar o dedo não é suportado, só é possível testar se possuir um monitor multitoque ou instalando no celular mesmo.

Conclusão

Isto encerra nosso primeiro tutorial de desenvolvimento para iPhone/iPad utilizando o Flash, como já havia dito antes existem vantagens e desvantagens em se criar um app utilizando o adobe AIR como plataforma, mas ao pesar na balança acho que somente a questão de ser multiplataforma já bate qualquer desvantagem.

Para quem já mexe no flash, é praticamente a mesma coisa que mexer em adobe AIR para desktop, as classes e funções que utilizamos para o flash no site, também funcionam no aplicativo para iPhone. Enfim creio que em breve a Adobe irá evoluir ainda mais o adobe AIR, deixá-lo mais rápido e cada vez limitar menos o aplicativo em relação à linguagem nativa, um exemplo disto é o próprio aplicativo no AIR2.7 rodar em background, no iphone packager (Flash CS5.0) isso não era possível, ele fechava o aplicativo, e quando iniciava novamente voltava do zero, o que não acontece mais no AIR, ele roda em background respeitando o Multitask do aparelho.

Bom, espero que tenham gostado. Para o primeiro tutorial no assunto já falei até demais, em breve trarei mais novidades em desenvolvimento para IOS.

Dúvidas por favor… nos comentários. Abraço e até a próxima.