Faltam -1 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

Grande abraço a todo o pessoal que valoriza esse grande portal que é o iMasters. Vou postar aqui pela minha primeira vez um artigo sobre Flash Lite 2, que provavelmente é um dos futuros caminhos para o qual o Flash está seguindo, os dispositíveis móveis.

Pré-Requisitos

Este artigo é um início ao FlashLite, mas seria interessante conhecer um pouco a linguagem ActionScript, é necessário ter uma familiaridade com o Flash.

É necessário instalar o upgrade na Adobe para o Flash 8 Professional, assim como o arquivo .mxp para testar o celular em modelos mais agradáveis, as urls seguem abaixo:

http://www.adobe.com/support/flash/downloads.html
http://www.adobe.com/products/flash/download/device_profiles/

Objetivo

Entender as melhorias do Flash 8 com a versão Flash Lite 2 para dispositivos móveis e iniciar estudos nesta tecnologia.

Conteúdo

Incialmente (como quase sempre), vamos ao Dreamweaver escrever um XML, para quem ainda não utiliza recomendo que leiam muito sobre isso. Muito é facilitado utilizando essa meta-linguagem que é portabilidade entre quaisquer sistemas.

<?xml version="1.0" encoding="utf-8"?>
<mobile>
<topico title="Serviços">Não importa o tamanho do texto.... Welcome to Macromedia Flash Basic 8 and Macromedia Flash Professional 8. Flash provides everything you need to create and deliver rich web content and powerful applications. Whether you're designing motion graphics or building data-driven applications, Flash has the tools to produce great results and deliver the best user experience across multiple platforms and devices.</topico>
<topico title="Clientes">Descrição dos clientes..... Editora Moderna, Wunderman, Natura, Globo...</topico>
<topico title="Contato">Página de contato... telefone (0x11-555-5555) site (www.digitalbug.com.br)</topico>
</mobile>

Salve o como mobile.xml.

No Flash 8, abra um novo documento em branco.

A primeira coisa a se fazer aqui é configurar o palco, vá para a barra de propriedades, publish settings, escolha Flash Lite 2.0 (não esqueça de atualizar seu software), confirme a alteração, na mesma barra de propriedades, selecione Devide, settings (agora habilitado), escolha Nokia 7610, ou outro de sua preferência, adicione a lista e pressione ok.

Configure o tamanho do stage para o mesmo tamanho do dispositível:

Salve o arquivo com o nome de flash_lite_xml.fla

Estamos aptos a desenvolver para o Flash Lite neste momento. Não esqueça que cada celular tem suas particularidades e devem ser testados também fora do Flash, diretamente no dispositível. O Layout vocês podem arrumar como preferirem. Meu layout, no frame 1, se encontra desta maneira:

Sendo que nenhum desses itens tem nome de instância.

Minha timeline no fim do arquivo:

Em bk coloquei minha imagem de fundo que é sempre fixa. Em headers inseri os cabeçalhos que no meu caso incluem as área brancas e os textos "estáticos" Menu e Exit neste primeiro frame. No frame dois mudam para voltar e detalhes, e no último frame, frame 3, mudam para voltar e Menu.

As layers logo, menuItens e detalhes são particulares a cada conteúdo, veremos isso em detalhes mais adiante...

Layer labels contém os nomes: inicio, menu e desc. A layer ~AS é recipiente de todas nossas ações.

Na layer logo inseri o logo da empresa Digital Bug, da qual faço parte, unicamente isso temos nesse frame.

Agora vamos aos códigos do frame um de ~AS.

//Criando uma variável para que eu não perca o escopo dentro de alguma função...
var thisObj:MovieClip = this;
//Criando uma varável que armazenará futuros dados do xml
var detalhesXML:String;
//Arrancando a borda amarela dos botões quando usamos a tabulação ou inserimos foco (focus rectangle)
_focusrect = false;
//AS especiais para nosso dispositível móvel, interessante que diferente do fscommand (Future Splash Command, nosso primeiro Flash =P) tradicional que não retorna nada, esse método específico retorna um valor
//SetSoftKeys remapeia os botões de navegação do celular, no caso aqueles botões especiais (botões direita e esquerda, normalmente ficam no topo das outras teclas
fscommand2("SetSoftKeys", "Menu", "Exit");
fscommand2("SetQuality", "high");
//FullScreen para forçar a área de renderização no display
fscommand2("FullScreen", "true");
//Removo aqui o listener previamente registrado...
Key.removeListener(oListener);
//Crio meu listener para a classe Key
var oListener:Object = new Object();
oListener.onKeyDown = function():Void {
// a classe ExtendedKey fornece códigos que retornam a partir do método Key.getCode()
var keyCode = Key.getCode();
//A propriedade estática SOFT1 da classe ExtendedKey configura o botão esquerdo do celular
if (keyCode == ExtendedKey.SOFT1) {
gotoAndStop("menu");
//A propriedade estática SOFT2 da classe ExtendedKey configura o botão direito do celular
} else if (keyCode == ExtendedKey.SOFT2) {
//Sai do aplicativo, dentro do Flash essa ação não funciona
fscommand2("Quit");
}
};
Key.addListener(oListener);
stop();

Agora o frame 2, layer menuItens:

Criem um MovieClip vazio e arrastem para o palco, nome de instância menuItens, {_x:11.6, _y:40.7).

Também criaremos um movieClip com o nome item, mesmo nome de identificador para o objeto (não esquecendo que identificador é o nome que damos ao Linkage, não a instância).

Dentro desse mc, insira um texto dinâmico, nome texto e um botão com nome background, ambos na instância, defina áreas de over e down para ele, é extremamente importante que essas áreas tenham contraste com a área up do botão.

Finalizada nossa missão visual, vamos à layer de actions:

//Reescrevendo minhas softKeys
fscommand2("SetSoftKeys", "Voltar", "Detalhes");
//Leitura padrão de xml
function xmlLoad():Void {
var xml:XML = new XML();
xml.ignoreWhite = true;
//Carregando nosso mobile.xml
xml.load("mobile.xml");
xml.onLoad = function(success:Boolean):Void {
var path:Object = this.firstChild.childNodes;
for (var i:Number = 0; i<path.length; i++) {
//Aqui anexo todos os elementos ao nosso item que agora está sendo anexado ao palco conforme o número de nós (elementos) do xml
t = thisObj.menuItens.attachMovie("item", "item"+i, i);
t.texto.text = path[i].attributes.title;
t.desc = path[i].firstChild.nodeValue;
t._y = i*(t._height+20);
}
//Defino que se ninguém está selecionado, então selecione o primeiro item, já que essa é a primeira vez
(selectedButton == undefined) ? Selection.setFocus(thisObj.menuItens.item0.background) : Selection.setFocus(selectedButton);
var button:Object = thisObj.menuItens;
for (var i:Number = 0; i<path.length; i++) {
button["item"+i].background.onRelease = function() {
//Ao clicar em um dos itens chamo a função getDescription que entende quem é minha descrição e dispara a ação
thisObj.getDescription();
};
button["item"+i].background.onSetFocus = function() {
//Ao setar o focus em um objeto sobrescrevo a variável detalhesXML com minha descrição
thisObj.detalhesXML = this._parent.desc;
//Sobrescrevo a variável selectedButton, já que se clico em um item específico quando voltar da descrição quem deve estar selecionado é o último botão que estava selecionado
selectedButton = this;
};
}
};
}
function getDescription():Void {
//Defino a descrição para os detalhes de cada item, caso seja indefinida ele pega a primeira
(detalhesXML == undefined || detalhesXML == "") ? detalhesXML=menuItens.item0.desc : detalhesXML=detalhesXML;
gotoAndStop("desc");
}
//Sobrescrevendo novamente o listener e altero a função dos cliques das minhas softKeys
Key.removeListener(oListener);
var oListener:Object = new Object();
oListener.onKeyDown = function():Void {
var keyCode = Key.getCode();
if (keyCode == ExtendedKey.SOFT1) {
gotoAndStop("inicio");
} else if (keyCode == ExtendedKey.SOFT2) {
getDescription();
}
};
Key.addListener(oListener);
//Dispara a função pra ler o xml
xmlLoad();

Agora nossa última parte. Na layer detalhes, insira um texto dinâmico com o nome detalhes, selecione multiline e, no menu do topo do Flash, clique em Text e depois selecione Scrollable. Isso vai permitir scroll no texto.

Na layer de actions:

fscommand2("SetSoftKeys", "Voltar", "Menu");
detalhes.text = detalhesXML;
Key.removeListener(oListener);
var oListener:Object = new Object();
oListener.onKeyDown = function():Void {
var keyCode = Key.getCode();
if (keyCode == ExtendedKey.SOFT1) {
gotoAndStop("menu");
} else if (keyCode == ExtendedKey.SOFT2) {
gotoAndStop("inicio");
//Se clicarmos na seta para baixo do celular o texto detalhes sobe uma linha
} else if (keyCode == Key.DOWN) {
detalhes.scroll += 1;
//Se clicarmos na seta para cima do celular o texto detalhes desce uma linha
} else if (keyCode == Key.UP) {
detalhes.scroll -= 1;
}
};
Key.addListener(oListener);

É só testar agora! Minhas telas ficaram dessa forma:

Continuarei publicando artigos nesta área. N ão esqueçam que isso é apenas o início. Espero que tenham gostado, dúvidas ou sugestões são bem vindas em meu e-mail.

Abraços e até a próxima!

Download dos arquivos