×
Namespaces

Variants
Actions

Archived:Controle dinâmico de layout com o Flash Lite

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngAquivado: Este artigo foi arquivado, pois o conteúdo não é mais considerado relevante para se criar soluções comerciais atuais. Se você achar que este artigo ainda é importante, inclua o template {{ForArchiveReview|escreva a sua justificativa}}.

Não recomendamos o desenvolvimento em Flash Lite para aparelhos atuais da Nokia. Todos os artigos relacionados a Flash Lite foram arquivados. A plataforma Nokia Asha e os aparelhos recentes S40 não possuem mais o Flash Lite. O uso de Flash Lite em Symbian é limitado. Por exemplo, informações relativas à plataforma Nokia Belle podem ser encontradas neste link (em Inglês). Informações específicas de Flash Lite para aparelhos S40 ANTIGOS e Symbian podem ser encontradas na Flash Lite Developers Library (em Inglês).

Article Metadata

Exemplo de código
Artigo
Tradução:
Por FINALX
Última alteração feita por hamishwillee em 14 May 2013
DynamicLayout.jpg

Contents

Propósito do artigo

O problema de não saber se o telefone está na orientação retrato ou paisagem é bastante irritante, especialmente quando as escalas do modo paisagem exibem as fontes para baixo. Este artigo explica como eu criei um modelo muito simples para alguns dos meus próprios projetos. Esta é apenas uma maneira de ter certeza que sua aplicação ficará OK em ambas as orientações da tela (vertical e horizontal) em 240 x 320 pixels (QVGA) dos dispositivos. Estou trabalhando em uma solução ainda mais flexível, que deve funcionar com qualquer orientação de tela.

Consulte este artigo para obter mais informações sobre layouts dinâmicos: http://www.actionscript.org/resources/articles/1/1/Dynamic-Layout-Control/Page1.html

Palco principal

Dynamic Layout Design.jpg

Comecei a criar o aplicativo com um palco de 320 pixels x 320. Para se certificar de que tem a mesma aparência em ambas as orientações, eu fiz o fundo abstrato. Esse tipo de imagem (veja a foto à esquerda) é adequado tanto para retrato e paisagem, uma vez que não vai rodar. Você pode, naturalmente, ter uma cor sólida, o que é mais fácil, ou uma imagem que você pode esticar e / ou girar de acordo com o layout atual, mas isso requer um pouco mais de trabalho.

A imagem da esquerda é uma imagem real do Adobe Flash professional. Anexei o exemplo de arquivo FLA no final deste artigo.

No entanto, a chave para esse tipo de projeto de layout dinâmico, não é o fundo, mas a criação de elementos substituíveis.


UI componentes

Dyn landscape.jpg
Dyn portrait.jpg

Seguinte, eu criei MovieClips para o título, área precionável, ea propriedade real da aplicação. Os objetos são coloridos e têm formas para facilitar o manuseio. Se você não gosta das cores, sinta-se livre para alterá-las; o). Eu mantenho as cores do FLA, mas a mudança ou removê-los em tempo de execução com o ActionScript. O título deve aparecer brevemente no modo de paisagem, mas estar sempre visível no modo retrato. A área real é de 240 x 240 para que não seja redimensionada, me dando controle total. A área precionável foi projetada de modo que os textos não sejam redimensionados.


Congelando o palco

Tenha certeza que o palco ficará no modo de tela cheia.

Stage.scaleMode = "noScale"; // Previne o redimensionamento da animação se a janela do navegador for redimensionada.
Stage.align = "LT"; //Fixa o palco para o canto superior esquerdo.
fscommand2("Fullscreen", true); // Define como tela cheia.

Isso significa que eu posso movimentar e fixar meu palco real onde eu quiser. Neste caso, eu queria corrigir o canto superior esquerdo. Para ajuda, veja Adobe Stage.align para mais opções.


Detectando o interruptor de orientação

Seguinte, Eu começo percebendo a mudança com a área precionável setInterval:

setInterval(TurnMe, 100);

Este pode ser um pouco bruto, mas eu realmente não tenho encontrado uma maneira de detectar o interruptor de orientação, pelo menos não na maioria dos dispositivos. O seguinte trecho de código me ajuda a ignorar a função se não houver nenhuma mudança.

if(softKeyLocation != PreviousOrientation){ // fazer somente se for diferente do anterior.

Pode, é claro, ser melhor para definir o intervalo um pouco mais de 100 milissegundos, mas eu não tive grandes problemas ao testar isso.

Para uma versão mais confiável uma extensão para o framework do Flash Lite é necessário, para que o interruptor de orientação possa ser detectada como um evento.

NOTA

O método a seguir, descritas na Ajuda da Adobe não parecem funcionar - pelo menos não em todos os dispositivos:

var stageListener:Object = new Object();
stageListener.onResize = function() {
// Seu código vai aqui.




Sem detecção

Portrait phone.jpg
Landscape phone.jpg













Se você não quiser usar o método acima para detectar a mudança de orientação, você ainda pode se beneficiar dessa abordagem dinâmica e detectar a localização/tamanho da tela da área precionável, apenas no início a posição de seus elementos de layout alocados corretamente. O caminho para descobrir o tamanho da tela é através do objeto stage

Stage.width;  // A largura da tela
Stage.height; // A altura da tela

Outras resoluções

Para uma aplicação global real dinâmico, você deve considerar as outras resoluções também. Mesmo que uma grande maioria dos dispositivos Nokia venha com resolução em QVGA (240x320), há mais opções para jogar, desde que você deseje oferecer um modelo de layout específico para um único dispositivo. Por exemplo, a exposição dentro do Nokia E90 Communicator tem uma resolução de 800x352. Isso significa que você tem mais espaço para brincar e o seu aplicativo pode se beneficiar dele, você pode exibir mais dados do que na resolução QVGA:

Dynamic Layout E90.jpg


No entanto, a tampa do visor do Nokia E90 Communicator ainda tem uma tela QVGA regular, assim, este dispositivo também abrange o layout da sua versão regular QVGA.

O novo Nokia 5800 XpressMusic tem uma resolução de 360x640 e alterna automaticamente entre modo retrato e paisagem, dependendo da maneira como o usuário está segurando. O tamanho físico da tela não é muito grande, então você precisa aumentar o tamanho de seus componentes de qualquer maneira. No entanto, você também precisa considerar que é um dispositivo sensível ao toque e só não tem um teclado. Projetando para o toque significa que você precisa ativar o suporte a mouse no aplicativo já que não há eventos de teclado. Este é um assunto para outro artigo e vou adicionar um link para ele aqui uma vez que o artigo está pronto; o)


Como usar o template

Agora é só colocar o conteúdo dentro do elemento palco real e o título dentro do elemento título, e alterar os rótulos da área precionável para simular a verdadeira funcionalidade e publicar. Isso pode ser feito com ActionScript ou modificando os componentes de interface do usuário clicando sobre eles e editá-los.

O template .fla

File:DynamicLayout.zip

Clique no link acima e faça o download na página que se abre.

This page was last modified on 14 May 2013, at 10:21.
94 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×