Criação de conteúdo do Animate para uso em dispositivos móveis

Para criar conteúdo do Animate para dispositivos móveis, siga alguns princípios básicos. Por exemplo, os desenvolvedores do Animate geralmente evitam arte-final muito complexa ou excesso de transição ou transparência.

Os desenvolvedores do Flash Lite enfrentam outros desafios, pois o desempenho nos dispositivos móveis varia muito. Se o conteúdo precisar ser publicado em muitos dispositivos diferentes, às vezes é necessário que os desenvolvedores façam a autoria pelo menor denominador comum.

A otimização do conteúdo móvel requer que haja trocas. Por exemplo, uma técnica pode fazer o conteúdo ter uma aparência melhor, enquanto o outro resulta em um melhor desempenho. Conforme você avalia essas trocas, você irá para frente e para trás repetidamente entre o teste no emulator e o teste no dispositivo de destino. É preciso ver o conteúdo no dispositivo real para avaliar a veracidade das cores, a legibilidade do texto, as interações físicas, a correspondência da UI e outros aspectos da verdadeira experiência móvel.

Observação:

O conteúdo a respeito do Flash Lite não aplica-se ao Flash CC e em versões superiores. 

Instruções do Flash Lite para animação em dispositivos móveis

Ao criar conteúdo animado para dispositivos móveis, lembre-se de manter as limitações CPU do dispositivo. Seguir essas instruções pode evitar que o conteúdo do Flash Lite seja executado lentamente:

  • Ao criar um novo arquivo Flash Lite, verifique se o documento está configurado corretamente. Embora os arquivos Animate sejam dimensionados suavemente, o desempenho pode ser prejudicado se o arquivo não estiver sendo executado em seu tamanho nativo Estágio e tiver que ser dimensionado no player. Tente definir o tamanho Estágio do documento para corresponder à resolução do dispositivo de destino. Também defina o Flash Player para a versão correta do Flash Lite.

  • O Flash Lite pode renderizar os gráficos do vetor em qualidade baixa, média e alta. Quanto maior a qualidade de renderização, mais suave e precisa será a renderização dos gráficos vetoriais pelo Flash Lite e maior será a demanda na CPU dos dispositivos. Para fornecer animações complexas, experimente alterar as configurações de qualidade do player e, em seguida, faça um teste completo no arquivo SWF. Para controlar a qualidade de renderização de um arquivo SWF, use a propriedade _qualidade ou o comando DefinirQualidade. Os valores válidos para a propriedade _qualidade são BAIXA, MÉDIA e ALTA.

  • Limite o número de transições simultâneas. Reduza o número de transições, ou coloque a animação em uma sequência que permita que uma comece quando a outra termina.

  • Use efeitos de transparência (alfa) em símbolos de forma reduzida porque eles possuem muita CPU. Em específico, evite a transição de símbolos com níveis alfa que não são totalmente opacos (menos de 100%).

  • Evite efeitos visuais de muita CPU, como máscaras grandes, movimentos abrangentes, mesclagens alfa, gradientes abrangentes e vetores complexos.

  • Experimente as combinações de transições, animações do quadro principal e movimentos orientados por ActionScript para produzir os resultados mais eficientes.

  • A renderização de ovais e círculos de vetores usa muito mais memória que a renderização de quadriláteros. O uso de traçados arredondados e ovais também aumenta de maneira significativa o uso de CPU.

  • Teste animações com frequência em dispositivos de destino reais.

  • Quando o Animate desenha uma região animada, ele define uma caixa delimitadora retangular ao redor da área. Otimize o desenho fazendo esse retângulo em um tamanho mínimo. Evite sobrepor as transições, porque o Animate interpreta a área mesclada como um único retângulo, resultando em uma região total maior. Use o recurso Mostrar Região do Redesenho do Animate para otimizar a animação.

  • Evite usar _alfa = 0 e _visível = falso para ocultar clipes de filme na tela. Se você simplesmente desativar a visibilidade de um clipe de filme ou alterar seu valor alfa para zero, ele ainda será incluído em cálculos de renderização da linha, que podem afetar o desempenho.

  • De forma semelhante, não tente ocultar um clipe de filme obscurecendo-o por trás de outra peça de arte. Ele ainda será incluído nos cálculos do player. Como alternativa, mova os clipes de filme completamente para fora do Estágio ou remova-os selecionando removerClipedeFilme.

Gráficos vetoriais e de bitmap do Flash Lite em dispositivos móveis

O Flash Lite pode renderizar gráficos vetoriais e de bitmap. Cada tipo de gráfico tem suas vantagens e desvantagens. A decisão de usar gráficos vetoriais em vez de bitmap nem sempre é clara e, geralmente, depende de vários fatores.

Os gráficos vetoriais são representados de forma compacta em arquivos SWF como equações matemáticas e renderizados em tempo de execução pelo Flash Lite player. Entretanto, os gráficos de bitmap são representados como matrizes de elementos de figura (pixels), que exigem mais bytes de dados. Portanto, o uso de gráficos vetoriais em um arquivo pode ajudar a reduzir o tamanho do arquivo e o uso da memória.

Os gráficos vetoriais também mantêm suas formas suaves quando dimensionados em tamanho. As imagens de bitmap podem adquirir formato retangular ou pixels visíveis quando dimensionadas.

Em comparação aos gráficos de bitmaps, os gráficos vetoriais exigem maior capacidade de processamento para renderizar, especialmente os que possuem várias formas e preenchimentos complexos. Por esse motivo, o uso excessivo de formas vetoriais pode às vezes reduzir o desempenho geral do arquivo. Uma vez que os gráficos de bitmap não exigem tanto tempo de processamento para renderizar, eles são a melhor opção para alguns arquivos, por exemplo, um mapa de estrada complexo com o propósito de ser animado e percorrido em um telefone celular.

Leve em consideração o seguinte:

  • Evite o uso de contornos em formas vetoriais. Os contornos possuem uma borda interna e uma externa (os preenchimentos têm apenas uma) e levam o dobro de tempo para renderizar.

  • Os cantos são mais simples de renderizar do que as curvas. Quando possível, use bordas achatadas, especialmente com formas vetoriais muito pequenas.

  • A otimização é útil principalmente com formas vetoriais pequenas, como ícones. Os ícones complexos podem perder detalhes com a renderização, e o trabalho de renderização dos detalhes será perdido.

  • Como regra geral, use gráficos de bitmaps para imagens pequenas e complexas (como ícones) e vetoriais para imagens maiores e mais simples.

  • Importe os gráficos de bitmap no tamanho correto. Não importe gráficos grandes e dimensione-os no Animate, porque isso desperdiça tamanho do arquivo e memória de tempo de execução.

  • O Flash Lite player não oferece suporte à suavização de bitmap. Se um bitmap for dimensionado ou girado, ele terá uma aparência espessa. Se for necessário dimensionar ou girar um gráfico, considere o uso de um gráfico vetorial.

  • O texto é basicamente uma forma vetorial muito complexa. No entanto, o texto é quase sempre fundamental, portanto raramente pode ser evitado. Quando o texto for necessário, evite animá-lo ou colocá-lo em uma animação. Considere o uso do texto como um bitmap. Em texto de entrada e dinâmico com várias linhas, a quebra de linha da sequência de texto não é colocada em cache. O Animate quebra as linhas no tempo de execução e recalcula as quebras toda vez que o campo de texto precisar ser redesenhado. Os campos de texto estáticos não são problemáticos, pois a quebra de linha é pré-calculada em tempo de compilação. No conteúdo dinâmico, o uso de campos de texto dinâmicos é inevitável mas, quando possível, considere o uso de campos de texto estáticos.

  • Minimize o uso de transparências em arquivos PNG. O Animate deve calcular redesenhos mesmo para as partes transparentes do bitmap. Por exemplo, com um arquivo PNG transparente que represente um elemento de primeiro plano, não exporte o PNG transparente no tamanho total da tela. Como alternativa, exporte-o no tamanho total do elemento de primeiro plano.

  • Tente agrupar as camadas de bitmap e as camadas vetoriais juntas. O Animate precisa implementar renderizadores diferentes para conteúdo vetorial e de bitmap, e alternar entre os renderizadores é demorado.

Definição de compactação de bitmaps do Flash Lite para dispositivos móveis

Ao usar bitmaps, é possível definir opções de compactação de imagens (para cada imagem ou para todas as imagens de bitmap) que reduzem o tamanho de arquivo SWF.

Definição de opções de compactação para um arquivo bitmap individual

  1. Inicie o Animate e crie um documento.

  2. Selecione um bitmap na janela Biblioteca.
  3. Clique com o botão direito do mouse (Windows), ou com a tecla Control (Macintosh) pressionada, no ícone de bitmap na janela Biblioteca e selecione Propriedades no menu de contexto para abrir a caixa de diálogo Propriedades de Bitmap.
  4. No menu suspenso Compactação, selecione uma das seguintes opções:
    • Selecione a opção Foto (JPEG) para imagens com variações complexas de tons ou cores, como fotografias ou imagens com preenchimentos dégradé. Essa opção produz um arquivo JPEG. Marque a caixa de seleção Usar Dados JPEG Importados para usar a qualidade de compactação padrão especificada para a imagem importada. Para especificar uma nova configuração de compactação de qualidade, desmarque a seleção de Usar Dados JPEG Importados e digite um valor entre 1 e 100 na caixa de texto Qualidade. Uma configuração maior produz uma imagem de melhor qualidade, mas também um arquivo maior; portanto, ajuste o valor adequadamente.

    • Selecione a opção Sem Perdas (PNG/GIF) para imagens com formas simples e algumas cores. Essa opção compacta a imagem usando a compactação sem perdas, que não descarta nenhum dado.

  5. Clique em Teste para determinar os resultados da compactação do arquivo.

    Compare o tamanho de arquivo original ao tamanho do arquivo compactado para decidir se a configuração de compactação selecionada é aceitável.

Definição da compactação para todas as imagens de bitmap

  1. Selecione Arquivo > Configurações de Publicação e, em seguida, clique na guia Flash para exibir as opções de compactação.
  2. Ajuste o controle deslizante de qualidade do JPEG ou digite um valor. Um valor maior de qualidade do JPEG produz uma imagem de melhor qualidade, mas um arquivo SWF maior. Uma qualidade de imagem menor produz um arquivo SWF menor. Experimente configurações diferentes para determinar qual é a melhor relação entre tamanho e qualidade.

Otimização de quadros do Flash Lite para dispositivos móveis

  • A maioria dos dispositivos oferece suporte ao conteúdo de execução do Flash Lite em aproximadamente 15 a 20 quadros por segundo (qps). A taxa de quadros pode ser bastante lenta, até 6 fps. Durante o desenvolvimento, defina a taxa de quadros do documento para aproximar-se da velocidade de execução do dispositivo de destino. Isso mostra como o conteúdo será executado em um dispositivo com desempenho limitado. Antes de publicar um arquivo SWF final, defina a taxa de quadros do documento para pelo menos 20 fps ou mais, para evitar a limitação de desempenho no caso de o dispositivo suportar uma taxa de quadros maior.

  • Ao usar gotoAndPlay, lembre-se de que todos os quadros entre o atual e o solicitado precisam ser inicializados antes que o Flash reproduza o quadro solicitado. Se muitos desses quadros tiverem conteúdo diferente, talvez seja mais eficiente usar clipes de filme diferentes em vez da Linha do Tempo.

  • Embora o pré-carregamento de todo o conteúdo, colocando-o no início do arquivo, faça sentido na área de trabalho, o pré-carregamento em um dispositivo móvel pode atrasar a inicialização do arquivo. Distribua o conteúdo ao longo do arquivo para que os clipes de filme sejam inicializados conforme forem usados.

Otimização do ActionScript para o conteúdo do Flash Lite em dispositivos móveis

Devido à velocidade de processamento e às limitações de memória na maioria dos dispositivos móveis, siga estas orientações ao desenvolver o conteúdo do ActionScript for Flash Lite usado em dispositivos móveis:

  • Mantenha o arquivo e seu código o mais simples possível. Remova os clipes de filme não utilizados, exclua os loops de código e os quadros desnecessários e evite quadros demais ou quadros irrelevantes.

  • O uso de loops FOR pode ser caro por causa da sobrecarga contraída enquanto a condição é verificada com cada repetição. Quando os custos da repetição e da sobrecarga do loop forem comparáveis, execute várias operações individualmente em vez de usar um loop. O código poderá ser maior, mas o desempenho melhorará.

  • Interrompa o loop com base em quadros quando não for mais necessário.

  • Quando possível, evite o processamento de matriz e de sequência, pois podem exigir um uso intensivo da capacidade da CPU.

  • Sempre tente acessar as propriedades diretamente em vez de usar os métodos getter e setter do ActionScript, que geram mais sobrecarga do que as chamadas com outros métodos.

  • Gerencie os eventos de maneira sensata. Mantenha as matrizes do ouvinte do evento compactas, usando métodos para verificar se o ouvinte existe (não é nulo) antes de ligar. Limpe todos os intervalos ativos selecionando LimparIntervalo, e remova todos os ouvintes ativos selecionando RemoverOuvinte, antes de remover o conteúdo usando DescarregarAplicativo ou RemoverClipedoAplicativo. O Animate não coleta a memória de dados do SWF novamente (por exemplo, de intervalos e ouvintes) se nenhuma função do ActionScript ainda estiver se referindo aos dados do SWF quando um clipe de filme for descarregado.

  • Quando as variáveis não forem mais necessárias, exclua-as ou defina-as como nulo, que representa a marca para a coleta de lixo. A exclusão de variáveis ajuda a otimizar o uso de memória durante o tempo de execução, porque os recursos desnecessários são removidos do arquivo SWF. É melhor excluir as variáveis do que defini-las como nulo.

  • Remova os ouvintes explicitamente dos objetos selecionando RemoverOuvinte antes da coleta do lixo.

  • Se uma função estiver sendo chamada dinamicamente e estiver passando um conjunto fixo de parâmetros, use chamar em vez de aplicar.

  • Torne os espaços de nomes (como demarcadores) mais compactos para reduzir o tempo de inicialização. Cada nível no pacote está compilado a uma instrução IF e gera uma nova chamada Object; portanto, ter menos níveis no demarcador economiza tempo. Por exemplo, um demarcador com níveis com.xxx.yyy.aaa.bbb.ccc.funtionName faz com que um objeto seja concretizado para com.xxx.yyy.aaa.bbb.ccc. Alguns desenvolvedores do Flash usam software pré-processador para reduzir o demarcador a um identificador único, como 58923409876.functionName, antes de compilar o código SWF.

  • Se um arquivo consistir em vários arquivos SWF que usam as mesmas classes ActionScript, exclua essas classes dos arquivos SWF selecionados durante a compilação. Isso pode ajudar a reduzir o tempo de download do arquivo e os requisitos da memória de tempo de execução.

  • Evite usar Object.watch e Object.unwatch, porque qualquer alteração em uma propriedade de objeto requer que o player determine se uma notificação de alteração deve ser enviada.

  • Se o código do ActionScript, executado em um quadro principal na linha do tempo, precisar de mais de um segundo para ser concluído, considere dividir esse código para executá-lo em vários quadros principais.

  • Remova as declarações de traçado do código ao publicar o arquivo SWF. Para isso, marque a caixa de seleção Omitir Ações de Traçado na guia Flash, na caixa de diálogo Configurações de Publicação.

  • A herança aumenta o número de chamadas de método e usa mais memória: uma classe que inclui toda a funcionalidade necessária é mais eficiente em tempo de execução do que uma classe que herda algumas de suas funcionalidades de uma superclasse. Portanto, talvez seja necessário fazer uma troca de design entre a capacidade de extensão das classes e a eficiência do código.

  • Quando um arquivo SWF carrega outro arquivo SWF que contém uma classe ActionScript personalizada (por exemplo, foo.bar.CustomClass) e, em seguida, descarrega o arquivo SWF, a definição de classe permanece na memória. Para salvar a memória, exclua explicitamente todas as classes personalizadas em arquivos SWF descarregados. Use a declaração excluir especifique o nome de classe totalmente qualificado, como: excluir foo.bar.CustomClass.

  • Limite o uso de variáveis globais, porque elas não são marcadas para coleta de lixo se o clipe de filme que as definiram for removido.

  • Evite usar os componentes da interface de usuário padrão (disponível no painel Componentes no Flash). Esses componentes são criados para execução em computadores de mesa e não são otimizados para execução em dispositivos móveis.

  • Sempre que possível, evite funções profundamente aninhadas.

  • Evite fazer referência a variáveis, objetos ou funções inexistentes. Em comparação à versão para desktops do Flash Player, o Flash Lite 2 procura lentamente referências a variáveis inexistentes, podendo afetar de forma significativa o desempenho.

  • Evite definir funções usando sintaxe anônima. Por exemplo, myObj.eventName = function{ ...}. As funções definidas explicitamente são mais eficientes, por exemplo, function myFunc { ...}; my Obj.eventName = myFunc;.

  • Minimize o uso de funções de Matemática e de números de ponto flutuante. O cálculo desses valores torna o desempenho mais lento. Se for preciso usar as rotinas de Matemática, considere realizar o pré-cálculo dos valores e armazená-los em uma matriz de variáveis. A recuperação dos valores de um tabela de dados é muito mais rápida do que o cálculo pelo Flash em tempo de execução.

Gerenciamento da memória de arquivos do Flash Lite para dispositivos móveis

O Flash Lite costuma limpar da memória quaisquer objetos e variáveis não mais associados a arquivos. Isso é chamado de coleta do lixo. O Flash Lite executa seu processo de coleta de lixo uma vez a cada 60 segundos ou sempre que o uso da memória do arquivo aumentar repentinamente em 20% ou mais.

Embora não seja possível controlar como nem quando o Flash Lite realiza a coleta de lixo, ainda é possível liberar memória desnecessária deliberadamente. Em variáveis globais ou de linha do tempo, use a declaração excluir para liberar a memória que os objetos do ActionScript usam. Em variáveis locais — por exemplo, uma variável definida em uma definição de função — não é possível usar a declaração excluir para liberar a memória de um objeto, mas você pode definir a variável que faz referência ao objeto como nulo. Isso libera a memória que o objeto usa, uma vez que não há outras referências àquele objeto.

Os exemplos de dois códigos a seguir mostram como liberar memória que os objetos usam excluindo a variável que faz referência a esses objetos. Os exemplos são idênticos, exceto que o primeiro exemplo cria uma variável de linha do tempo e o segundo cria uma variável global.

// First case: variable attached to a movie or 
// movie clip timeline 
// 
// Create the Date object. 
var mcDateObject = new Date(); 
// Returns the current date as a string. 
trace(mcDateObject); 
// Delete the object. 
delete mcDateObject; 
// Returns undefined. 
trace(mcDateObject); 
// 
// Second case: global variable attached to a movie or 
// movie clip timeline 
// 
// Create the Date object. 
_global.gDateObject = new Date(); 
// Returns the current date as a string. 
trace(_global.gDateObject); 
// Delete the object. 
delete _global.gDateObject; 
// Returns undefined. 
trace(_global.gDateObject);

Conforme mencionado anteriormente, você não pode usar a declaração excluir para liberar memória que uma variável de função local usa. Em vez disso, defina a referência da variável como nulo, obtendo o mesmo efeito do uso de excluir.

function func() 
{ 
    // Create the Date object. 
    var funcDateObject = new Date(); 
    // Returns the current date as a string. 
    trace(funcDateObject); 
    // Delete has no effect. 
    delete funcDateObject; 
    // Still returns the current date. 
    trace(funcDateObject); 
    // Set the object reference to null. 
    funcDateObject = null; 
    // Returns null. 
    trace(funcDateObject); 
} 
// Call func() function. 
func();

Carregamento de dados para dispositivos móveis no Flash Lite

Ao desenvolver arquivos para dispositivos móveis, minimize a quantidade de dados que você tenta carregar de uma vez. Se você estiver carregando dados externos em um arquivo Flash Lite (por exemplo, usando XML.load), o sistema operacional do dispositivo poderá gerar um erro de “falha de memória”, se não for alocada memória suficiente para os dados recebidos. Essa situação pode ocorrer mesmo se a quantidade total da memória restante for suficiente.

Por exemplo, suponha que um arquivo tente carregar um arquivo XML de 100 KB, mas o sistema operacional do dispositivo tenha alocado somente 30 KB para controlar esse fluxo de dados recebidos. Nesse caso, o Flash Lite exibe uma mensagem de erro ao usuário indicando que não há memória suficiente disponível.

Para carregar grandes quantidades de dados, agrupe os dados em partes menores, por exemplo, em vários arquivos XML, e faça várias chamadas de carregamento de dados para cada parte. O tamanho de cada parte de dados e, consequentemente, do número de chamadas de carregamento de dados que precisam ser feitas, varia de acordo com o dispositivo e arquivo. Para determinar um equilíbrio apropriado entre o número de solicitações de dados e a probabilidade de uma falha de memória, teste os arquivos em diversos dispositivos de destino.

Para um desempenho ideal, evite carregar e analisar os arquivos XML, se possível. Em vez disso, armazene os dados em pares de nome/valor simples e carregue os dados de um arquivo de texto usando CarregarVars ou de arquivos SWF pré-compilados.

Exclusão de classes da compilação para Flash Lite

Para reduzir o tamanho de um arquivo SWF, considere a exclusão de classes da compilação, porém mantendo a capacidade de acessar e usá-las para a verificação de texto. Por exemplo, tente isso se estiver desenvolvendo um arquivo que usa vários arquivos SWF ou bibliotecas compartilhadas, especialmente aquelas que acessam muitas das mesmas classes. A exclusão de classes ajuda a evitar a duplicação de classes nesses arquivos.

  1. Crie um novo arquivo XML.
  2. Nomeie o arquivo XML FLA_filename_exclude.xml, em que FLA_filename é o nome do arquivo FLA sem a extensão .fla. Por exemplo, se o arquivo FLA for sellStocks.fla, o nome de arquivo XML deverá ser sellStocks_exclude.xml.
  3. Salve o arquivo no mesmo diretório do arquivo FLA.
  4. Coloque as seguintes marcas no arquivo XML:
    <excludeAssets> 
        <asset name=”className1” /> 
        <asset name=”className2” /> 
    </excludeAssets>

    Os valores especificados para os atributos de nome nas marcas <asset> são os nomes de classes que devem ser excluídos do arquivo SWF. Adicione quantos forem necessários para o arquivo. Por exemplo, o arquivo XML a seguir exclui as classes mx.core.UIObject e mx.screens.Slide do arquivo SWF:

    <excludeAssets> 
        <asset name=”mx.core.UIObject” /> 
        <asset name=”mx.screens.Slide” /> 
    </excludeAssets>

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online