DevMobile

Muitos celulares hoje já conseguem rodar aplicações em Flash, usando o plugin do Flash para dispositivos móveis, o FlashLite.

Ensinarei neste tutorial a desenvolver passo a passo uma aplicação em Flash Lite. A aplicação se trata de uma calculadora comum, para rodar no SmartPhone Nokia E61, com suporte ao Flash Lite 1.1, ou em qualquer outro SmartPhone com suporte a FlashLite. A aplica’c~ao ser’a exibida melhor se o celular tiver tela de resolução 320 x 240. O resultado final do tutorial pode ser visto na imagem abaixo. Esse tutorial é mais do que um simples Olá Mundo em Flash Lite. Você aprenderá a fazer uma aplicação completa, passo a passo.

Para executar nosso tutorial usaremos a ferramenta Adobe Flash CS3 Professional, que acompanha ferramenta para criação de aplicações para Flash Lite, com emuladores para muitos celulares. Se você não possui esse software, baixe uma verão trial no site da Adobe www.adobe.com.

Importante: Há boa diferença entre o FlashLite 1.1 e os mais novos. Estarei usando a versão 1.1 pois é a versão da maioria dos celulares. Portanto, não estranhe se encontrar um código meio nhonho, pois pode ser a única forma de se fazer nesta versão do FlashLite.

Estágio 1 - Criação do projeto

Abra o Flash CS3 Professional, e clique no menu File, New. A tela abaixo será apresentada. Escolha o tipo Flash File (Mobile) na lista que aparecerá:

Na lista Available Devices escolha o emulador para o SmartPhone Nokia E61. Na opção Player Version, escolha Flash Lite 1.1. Escolha o Content Type como Standalone Player. Clique no botão Create:

Será então criado um novo projeto FlashLite, em branco:

Salve o projeto numa pasta própria para o projeto, com local e nome de sua preferência. Preferencialmente não coloque acentos, nem caracteres especiais no nome. Coloque algo como CalcFlash.

Estágio 2 - Criação das camadas e animação inicial da tela Splash

Criaremos agora as 4 camadas (layers) que conterão os objetos, os scripts, e as animações. Quando criou o projeto, já foi criada uma camada, então você deverá criar mais 3 camadas. Para criar uma camada, vá no menu Insert, Timeline, Layer. Será inserido uma camada com nome padrão. Renomeie as camadas 4 como mostra na figura abaixo. Para renomear uma camada, dê duplo clique no nome dela.

Agora faremos a tela splash, uma animação que aparecerá no início da aplicação. Dessa forma, quando a aplicação iniciar, aparecerá a animação com o nome da aplicação. Ao final da animação será então mostrado a tela principal da calculadora. Criaremos a animação nas camadas tituloSplash e fundoSplash.

Primeiro vamos criar o nome da aplicação, na animação. Para isso, clique com o botão direito no quadro 9, da camada tituloSplash, e escolha Insert Key Frame, como mostra a figura abaixo.

Será criado um quadro chave, no quadro 9 da camada tituloSplash:

Agora criaremos um objeto texto, com o nome da aplicação. Mantenha selecionado o quadro 9 da camada tituloSplash. Na caixa de ferramentas escolha a ferramenta Text Tool. Com a ferramenta selecionada, clique no quadro branco, onde ficará a tela da aplicação, e digite: “X-Calculator”:

Agora troque de ferramenta, selecione a ferramena Selection Tool, na caixa de ferramentas, é a primeira. Clique sobre o objeto de texto criado, para selecioná-lo. Abra o painel Properties abaixo da tela, e altere as propriedades da fonte, de acordo com o seu gosto. Altere a cor, a fonte e deixe o tamanho em torno de 49:

Oculte o painel de propriedades, e mantendo o título ainda selecionado, transformaremos ele em curvas, pois no celular provavelmente não existirá a fonte que você escolheu. Menu Modify, Break Apart. Faça isso 2 vezes, pois a primeira vez ele apenas quebrará a palavra em letras, e na segunda vez ele realmente converterá a fonte em curvas. Certifique-se de que o título está realmente no centro da tela, se não estiver, mova-o para o centro.

O resultado da conversão de fonte para curvas será:

Com o texto convertido em curvas, vamos tranformá-lo num objeto, pois a animação usará 2 instâncias desse objeto. Para isso, com o texto da aplicação selecionado, pressione F8. Será aberto uma tela. Defina o nome do objeto e escolha o tipo Graphic.

Com o título convertido para símbolo, faremos então a animação. Na mesma camada tituloSplash, clique com o botão direito no quadro 24, e escolha Insert Frame, e uma faixa cinza será estendida. Depois clique com o botão direito novamente no quadro 24, e escolha Create Motion Tween, e a faixa cinza se tranformará em azul, indicando que agora é uma animação. Depois clique novamente com o botão direito no quadro 24, e escolha Insert Key Frame, e um quadro chave será criado para dar final ao movimento da animação. Sua time line deverá ficar assim:

A animação do título deverá ser apenas uma leve alteração de tamanho. O tamanho inicial da animação já foi definido, no quadro 9, agora definiremos o tamanho final. Com o quadro 24 selecionado, clique com o botão direito no título da aplicação e escolha a opção Free Transform, aumente levemente o objeto, para os lados, e para cima e baixo, tal como mostra na imagem:

Definiremos agora a animação de saída do título da aplicação. Para isso, pegue a ferramenta seleção, na caixa de ferramentas. Clique com o botão direito no quadro 30 e escolha Insert Key Frame. Abra o painel de propriedades, abaixo da tela. Clique novamente sobre o objeto do título, para se certificar de que ele está selecionado. No painel de propriedades, escolha no campo Color a opção Alpha, e no campo de porcentagem ao lado, escolha 5%, de forma que o objeto fique transparente 5%, como mostra a imagem:

Terminamos a animação do título. Clique sobre o cadeado que tem ao lado do nome da camada tituloSplash, para travá-la, evitando que se altere sem querer.

Para ver como ficou a animação, clique no quadro 1, e pressione Enter.

Agora faremos a animação do fundo da tela Splash. Clique sobre o quadro 1 da camada fundoSplash. Pegue a ferramenta Retângulo, na caixa de ferramentas. Desenhe um retângulo no meio da tela, passando um pouco pelas laterais como mostrado da imagem:

Com a ferramenta seleção, selecione o retângulo. Pressione F8 para tranformá-lo num objeto. Na tela que aparecerá, defina o nome “retangulo” e escolha o tipo Graphics. Clique com o botão direito sobre o quadro 9 da camada fundoSplash, e escolha Insert Frame. Clique novamente com o botão direito neste quadro, e escolha Create Motion Tween. Clique com o botão direito novamente sobre este quadro e escolha Insert Key Frame. No final, deverá ter a linha do tempo assim:

Alteraremos o quadro 1, para que o retângulo comece com altura de 2 pixels. Para isso, selecione o quadro 1 da camada fundoSplash. Clique sobre o retângulo. Abra o painel de propriedades e escolha Height 2 (H: 2).

Dando continuidade à animação, clique com o botão direito no quadro 24 da camada fundoSplash, e escolha Insert Key Frame. Depois clique com o botão direito no quadro 30, e escolha Insert Key Frame. Com o quadro 30 selecionado, clique sobre o retângulo, para selecioná-lo. Altere novamente a altura (Height) do retângulo para 2 pixels, usando o painel de propriedades.

Trave a camada fundoSplash, para evitar alterações acidentais.

Para ver como ficou a animação, clique sobre o quadro 1, e pressione Enter.

Estágio 2 - Criação da parte gráfica da tela Sobre

Na camada telas, clique com o botão direito no quadro 32, e escolha Insert Key Frame. Use seu conhecimento adquirido até agora, com retângulos e textos, e crie a tela abaixo. Para deixar com retângulo com efeito gradiente, selecione-o, vá no menu Window, e ative a opção Color, para exibir o painel de cores. No painel, escolha o tipo Linear, e defina as cores que farão parte do gradiente. Caso em um dos textos você usar uma fonte diferente, converta-o para curvas. Use fontes diferentes apenas para textos mais importantes, como o título da janela. Os textos menos importantes, como o conteudo da tela e o botão Voltar, deixe com fonte normal “Verdana“.

Estágio 3 - Criação da parte gráfica da tela Principal

Na camada telas, clique com o botão direito no quadro 31, e escolha Insert Key Frame. Use seu conhecimento adquirido até agora, com retângulos e textos, e crie a tela abaixo. Para inserir uma imagem, vá em File, Import, Import to Stage, e procure a imagem JPG ou GIF que deseja adicionar. Lembre-se de adicionar uma imagem pequena, com largura máxima de 165 pixels, que é o espaço que temos para a imagem em nossa tela. Caso precise, use o photoshop para reduzir o tamanho da imagem para 165 pixels.

Agora precisamos criar o campo texto onde será exibido os valores. Esse campo ficará em cima do retângulo ciano (azul claro). Pegue a ferramenta Text, e antes de clicar na tela, abra o painel de propriedades e escolha o tipo Dinamic Text na caixa de seleção. Após escolher, clique no retângulo ciano. Será solicitado que digite um valor, digite o valor “0” (zero) no texto.

Após digitar, use a ferramenta seleção para aumentar e mover o campo de texto para que fique em cima do retângulo ciano, cobrindo-o, como mostra na imagem abaixo.

Por último, dê um nome de variável para o campo, para que possamos acessá-lo via programação. Para fazer isso, selecione o campo, abra o painel de propriedades, e digite no campo Var o seguinte, em letras minúsculas: valor

Após termos criado o campo, vamos criar os botões da calculadora. Criaremos um único símbolo para o botão, e depois usaremos instâncias desse símbolo. Para criar o primeiro botão, pegue a ferramenta retângulo e desenhe um pequeno retângulo, como mostra a imagem. Use o painel de Cores, para configurar um efeito gradiente, como na imagem. Use o painel de propriedades para determinar a largura e altura exatas do retângulo, com 25 pixels.

Agora vemos tranformar o retângulo do botão num símbolo gráfico. Selecione o retângulo e pressione F8. Na tela que aparecerá, defina o nome fundoBotao, e o tipo Graphic. Agora vamos tranformar o símbolo gráfico do botão em um botão real. Selecione o retângulo e pressione F8. Na tela que aparecerá informe o nome “btn“, e o tipo Button.

Agora configuraremos o botão com diferentes aparências para cada estado, que são: Normal, em Foco, e Clicado. Dê duplo clique no botão. Será aberta a edição do símbolo do botão. Perceba que nesta tela, a linha de tempo mudou, pois estamos alterando um botão. Veja a linha de tempo com os 4 quadros do botão:

Em cada um dos 3 quadros em branco, clique com o botão direito e escolha Insert Key Frame. Agora você deve alterar a aparência do retângulo dos quadros 2 e 3, para que ele fique com cor diferente. Não mexa nos quadros 1 e 4. Para alterar a cor do retângulo do quadro 2, clique no quadro 2, e selecione o retângulo. Abra o painel de propriedades, e altere a opção Color com o valor Tint, ou outro valor à sua escolha. Faça o mesmo com o retângulo do quadro 3, definindo outra cor.

Para sair da edição do botão, clique na base da linha de tempo, em Scene 1, como mostra na figura abaixo:

Pronto! Terminamos o nosso botão. Agora vamos copiar/colar várias vezes, deixando como mostra a figura abaixo.

Importante: Você deve também criar uma cópia do botão e deixá-lo fora da área da tela, como mostra da figura, este botão ficará oculto, pois está fora da tela, mas servirá para interceptar as teclas digitadas na tela.

Por último, criaremos os textos que devem aparecer sobre os botões. Isso é muito simples! Com a ferramenta Text, clique fora da área da tela, e digite o número “7“. Escolha a fonte, e o tamanho adequado para que caiba dentro do botão. Com a ferramenta seleção, e com o objeto de texto selecionado, pressione Ctrl+B duas vezes, e em seguida pressione Ctrl+G. Isso fará com que o texto seja convertido em curva, e depois com que a curva seja convertida num objeto. Agora mova o texto para cima do botão correspondente. Faça isso com todos os botões, criando um texto para cada botão, como mostra na figura abaixo.

Pronto! Criamos toda a parte gráfica da aplicação. Agora vamos aos códigos!!!

Estágio 3 - Criação dos códigos em ActionScript

Vamos determinar que a aplicação rodará em tela cheia. Para isso, clique sobre o quadro 1 da camada funcoes, e pressione a tecla F9. O editor de script será aberto. Nesta janela do editor, certifique-se de deixar desativado o Script Assist, pois ele atrapalha mais do que ajuda. Tem um botão para desativá-lo nesta janela. Após desativá-lo, digite o código, como mostrado abaixo:

fscommand2(”FullScreen”, “true”); 

Agora vamos criar as funções de cálculo principais da calculadora, de forma que elas possam ser chamadas por qualquer parte da aplicação. A primeira função servirá para adicionar um determinado número no display da calculadora. Quando o usuário pressionar a tecla 9, por exemplo, o número 9 deverá aparecer no final do número que já estará no display. A segunda servirá para calcular o resultado e mostrá-lo no display, quando se pressiona o botão “=”.

Para criar essas funções, primeiro vamos definir os quadros em que elas ficarão, e nomeá-los com o nome da função. Quando quisermos chamar uma função, usaremos o nome do quadro.

Clique com botão direito no quadro 2 da camada funcoes, e escolha Insert Key Frame. Clique agora com o botão direito no quadro 12 dessa mesma camada, e escolha novamente Insert Key Frame. Clique com o botão direito no quadro 21, e desta vez escolha Insert Frame. Teremos então adicionado 2 quadros chaves.

Agora vamos nomear esses quadros. Abra o painel de propriedades, e clique no quadro 2. Será mostrado um campo Frame, para se informar o nome do quadro. Digite: adiciona. Agora clique no quadro 12, e nomeie-o para: resultado. Os quadros deverão ficar como mostrado na imagem:

Bem, acabamos de definir os nomes das duas funções que precisaremos. Agora vamos escrever os seus códigos. Clique no quadro 2 da camada funcoes, pressione F9 para mostrar o editor de código. Cole o seguinte código, referente à função que adicionar os números pressionados ao display da calculadora:

num = Number(valor);

if (numero eq “+-”) {

 if (limpar == false) {

 	if (substring(num, 1, 1) eq “-”) {

 	 	valor = substring(num, 2, 99);

 	} else {

 		valor = “-” add valor;

 	}

 }

} else if (numero eq “.”) {

 if (limpar) {

 	limpar = false;

 	valor = 0;

 }
	achou = false;

 l = length(num);

 for (i = 1; i <= l; i++) {

 	if (substring(num, i, 1) eq “.”) {

 		achou = true;

 		break;

 	}

 }

 if (achou == false) {

 	valor = valor add “.”;

 }

} else {

 if (limpar) {

 	limpar = false;

 	valor = 0;

 }

 if (valor == 0) {

 	valor = “”;

 }

 if (length(valor) < 10)

 	valor = valor add numero;

}

Agora vamos definir as instruções da função que calcula o resultado. Clique sobre o quadro 12 e pressione F9 para mostrar o editor. Cole o seguinte código:

if (calculo eq “=”) {

 if (operador eq “+”)

 	valor = num1 + valor;

 if (operador eq “-”)

 	valor = num1 - valor;

 if (operador eq “/”)

 	valor = num1 / valor;

 if (operador eq “*”)

 	valor = num1 * valor;

 num1 = valor;

 limpar = true;

} else if (calculo eq “+”) {

 if (limpar == false) {

 	if (operador eq “+”)

 		valor = num1 + valor;

 	if (operador eq “-”)

 		valor = num1 - valor;

 	if (operador eq “/”)

 		valor = num1 / valor;

 	if (operador eq “*”)

 		valor = num1 * valor;

 } else {

 	if (operador eq “+”)

 		valor = num1 + valor;

 }

 operador = “+”;

 num1 = valor;

 limpar = true;

} else if (calculo eq “-”) {

 if (limpar == false) {

 	if (operador eq “+”)

 		valor = num1 + valor;

 	if (operador eq “-”)

 		valor = num1 - valor;

 	if (operador eq “/”)

 		valor = num1 / valor;

 	if (operador eq “*”)

 		valor = num1 * valor;

 } else {

 	if (operador eq “-”)

 		valor = num1 - valor;

 }

 operador = “-”;

 num1 = valor;

 limpar = true;

} else if (calculo eq “/”) {

 if (limpar == false) {

 	if (operador eq “+”)

 		valor = num1 + valor;

 	if (operador eq “-”)

 		valor = num1 - valor;

 	if (operador eq “/”)

 		valor = num1 / valor;

 	if (operador eq “*”)

 		valor = num1 * valor;

 } else {

 	if (operador eq “/”)

 		valor = num1 / valor;

 }

 operador = “/”;

 num1 = valor;

 limpar = true;

} else if (calculo eq “*”) {

 if (limpar == false) {

 	if (operador eq “+”)

 		valor = num1 + valor;

 	if (operador eq “-”)

 		valor = num1 - valor;

 	if (operador eq “/”)

 		valor = num1 / valor;

 	if (operador eq “*”)

 		valor = num1 * valor;

 } else {

 	if (operador eq “*”)

 		valor = num1 * valor;

 }

 operador = “*”;

 num1 = valor;

 limpar = true;

}

Pronto! Criamos nossas 2 funções. Agora criaremos as ações da tela principal, e os eventos dos botões da calculadora. Clique no quadro 31 da camada telas, para mostrar nossa tela principal. Pressione F9 para mostrar o editor, e cole o seguinte código. Essas instruções serão executadas sempre que a linha de tempo entrar no quadro, ou seja, sempre que entrar na tela principal.

stop();

_focusrect = false;

operador = “”;

limpar = true;

fscommand2(”SetSoftKeys”, “Left”, “Right”); 

Agora escreveremos as ações dos botões da calculadora. Para cada botão, você deverá escrever seu evento. Você deverá clicar em cada um dos botões, pressionar F9, e colar os códigos referente àquele botão. Tome cuidado para não selecionar o texto do botão em vez de selecionar o botão. Vou mostrar como fazer com o primeiro botão, e você poderá fazer com todos os outros.

Botão 0 (zero):

Clique no botão que tem o texto 0 (zero), e pressione F9. No editor de código digite o evento referente ao botão:

on (release) {

 numero = 0;

 call(”adiciona”);

} 

Isso indica que ao ser clicado, esse botão jogará para a variável global “numero” o valor referente a esse botão, no caso, o número 0 (zero). Depois ele chamará a função criada adiciona, que adicionará o número que estiver na variável global numero ao display da calculadora.

Escreva agora os eventos para todos os botões abaixo:

Botão 1:

on (release) {

    numero = 1;

    call(”adiciona”);

} 

Botão 2:

on (release) {

    numero = 2;

    call(”adiciona”);

} 

Botão 3:

on (release) {

    numero = 3;

    call(”adiciona”);

} 

Botão 4:

on (release) {

    numero = 4;

    call(”adiciona”);

} 

Botão 5:

on (release) {

    numero = 5;

    call(”adiciona”);

} 

Botão 6:

on (release) {

    numero = 6;

    call(”adiciona”);

} 

Botão 7:

on (release) {

    numero = 7;

    call(”adiciona”);

} 

Botão 8:

on (release) {

    numero = 8;

    call(”adiciona”);

} 

Botão 9:

on (release) {

    numero = 9;

    call(”adiciona”);

} 

Botão “.”:

on (release) {

    numero = “.”;

    call(”adiciona”);

} 

Botão “+/-”:

on (release) {

    numero = “+-”;

    call(”adiciona”);

} 

Botão “-”:

on (release) {

    calculo = “-”;

    call(”resultado”);

} 

Botão “+”:

on (release) {

    calculo = “+”;

    call(”resultado”);

}

Botão “*”:

on (release) {

    calculo = “*”;

    call(”resultado”);

}

Botão “/”:

on (release) {

    calculo = “/”;

    call(”resultado”);

}

Botão “=”:

on (release) {

    calculo = “=”;

    call(”resultado”);

}

Botão “C”:

on (release) {

 valor = 0;

 limpar = false;

 operador = “”;

 num1 = 0;

}

Pronto! Definimos os eventos de todos os botões da calculadora. Agora precisamos interceptar as teclas, pois quando o usuário digitar o número 9, por exemplo, deve ocorrer o mesmo que ocorre quando ele clica no botão 9. Para isso, precisamos definir o evento naquele botão que ficou fora da janela, e que ficará oculto na aplicação. Ele servirá como interceptador de teclas. Clique sobre ele, pressione F9, e digite o seguinte código:

//SoftKeyLeft

on(keyPress “<PageUp>”) {

 fscommand2(”Quit”);

}

//SoftKeyRight

on(keyPress “<PageDown>”) {

    gotoAndStop(32);

}

on(keyPress “1″) {

 numero = “1″;

    call(”adiciona”);

}

on(keyPress “2″) {

 numero = “2″;

    call(”adiciona”);

}

on(keyPress “3″) {

 numero = “3″;

    call(”adiciona”);

}

on(keyPress “4″) {

 numero = “4″;

    call(”adiciona”);

}

on(keyPress “5″) {

 numero = “5″;

    call(”adiciona”);

}

on(keyPress “6″) {

 numero = “6″;

    call(”adiciona”);

}

on(keyPress “7″) {

 numero = “7″;

    call(”adiciona”);

}

on(keyPress “8″) {

 numero = “8″;

    call(”adiciona”);

}

on(keyPress “9″) {

 numero = “9″;

    call(”adiciona”);

}

on(keyPress “0″) {

 numero = “0″;

    call(”adiciona”);

}

//Agora definiremos as teclas alternativas, 

//que representam números e sinais

on(keyPress “.”) {

 numero = “.”;

    call(”adiciona”);

}

on(keyPress “:”) {

 numero = “.”;

    call(”adiciona”);

}

on(keyPress “;”) {

 numero = “.”;

    call(”adiciona”);

}

on(keyPress “,”) {

 numero = “.”;

    call(”adiciona”);

}

on(keyPress “K”) {

 calculo = “+”;

    call(”resultado”);

}

on(keyPress “k”) {

 calculo = “+”;

    call(”resultado”);

}

on(keyPress “+”) {

 calculo = “+”;

    call(”resultado”);

}

on(keyPress “L”) {

 calculo = “-”;

    call(”resultado”);

}

on(keyPress “l”) {

 calculo = “-”;

    call(”resultado”);

}

on(keyPress “-”) {

 calculo = “-”;

    call(”resultado”);

}

on(keyPress “I”) {

 calculo = “/”;

    call(”resultado”);

}

on(keyPress “i”) {

 calculo = “/”;

    call(”resultado”);

}

on(keyPress “/”) {

 calculo = “/”;

    call(”resultado”);

}

on(keyPress “U”) {

 calculo = “*”;

    call(”resultado”);

}

on(keyPress “u”) {

 calculo = “*”;

    call(”resultado”);

}

on(keyPress “*”) {

 calculo = “*”;

    call(”resultado”);

}

on(keyPress “O”) {

 calculo = “=”;

    call(”resultado”);

}

on(keyPress “o”) {

 calculo = “=”;

    call(”resultado”);

}

on(keyPress “=”) {

 calculo = “=”;

    call(”resultado”);

}

Ufa! Tivemos que interceptar cada tecla e dizer o que deve acontecer quando cada uma for pressionada.

Agora definiremos o evento para voltar, quando o usuário estiver na tela Sobre. Para fazer isso, precisaremos copiar esse botão que ficou na parte de fora da tela e colar também na parte de fora da tela Sobre. Então, clique sobre o botão, e dê Ctrl+C, para copiar o botão. Agora clique no quadro 32, da camada telas, para mostrar a tela Sobre. Clique na parte externa da tela, e pressione Ctrl+V, para colocar o botão copiado.

Agora basta definirmos o evento desse botão. Clique sobre o botão para selecioná-lo, e pressione F9. Cole o seguinte código:

//SoftKeyLeft

on(keyPress “<PageUp>”) {

    gotoAndStop(31);

}

Por último, definiremos o que ocorrerá quando entrar na tela Sobre. Clique no quadro 32 da camada telas, e pressione F9. Se houver algum codigo, apague. Digite apenas o seguinte código:

 fscommand2(”SetSoftKeys”, “Left”, “Right”);

Pronto!! Terminamos nossa calculadora em FlashLite 1.1!

Para rodar a aplicação no emulador do Nokia E61, pressione Ctrl+Enter. Se você fez tudo corretamente, verá a aplicação rodando como mostra a imagem:

Agora basta enviar calculadora para o seu celular!

Se quiser baixar o fonte do projeto original: xcalc.fla

Se quiser baixar projeto gerado, pronto para rodar no celular: xcalc.swf

Espero tê-lo ajudado a aprender um pouco mais sobre FlashLite.

Forte abraço.

Sobre o Autor