Creación de contenido en Animate para su uso en dispositivos móviles

Cuando vaya a crear contenido en Animate para dispositivos móviles, considere algunos principios básicos. Por ejemplo, los desarrolladores de Animate a menudo evitan utilizar ilustraciones excesivamente complejas y procuran no abusar de la interpolación o la transparencia.

Los desarrolladores de Flash Lite se enfrentan al problema adicional que supone la gran diferencia de rendimiento de los dispositivos móviles. Si el contenido debe publicarse en muchos dispositivos diferentes, los desarrolladores tienen que encontrar las características mínimas comunes a todos esos dispositivos.

La optimización del contenido móvil exige llegar a un compromiso. Por ejemplo, una técnica puede mejorar la presentación del contenido mientras que otra puede incidir en un mayor rendimiento. Cuando considere las ventajas y los inconvenientes, tendrá que probar el contenido repetidas veces en el emulador y en el dispositivo de destino. Debe examinar el contenido en el dispositivo real para evaluar el realismo de los colores, la legibilidad del texto, las interacciones físicas, la capacidad de respuesta de la interfaz de usuario y otros aspectos de la experiencia real en el dispositivo móvil.

Nota:

El contenido de Flash Lite no es aplicable para Flash CC ni versiones posteriores. 

Pautas de Flash Lite para la animación en dispositivos móviles

Cuando cree contenido animado para un dispositivo móvil, tenga en cuenta las limitaciones de la CPU. Estas pautas le ayudarán a evitar que el contenido en Flash Lite se ejecute lentamente:

  • Cuando cree un nuevo archivo de Flash Lite, compruebe que el documento está configurado correctamente. Aunque los archivos Animate se pueden ampliar o reducir sin problemas, el rendimiento puede resultar afectado si el archivo no se ejecuta con su tamaño de escenario original y tiene que adaptarse en el reproductor. Intente definir el tamaño del escenario del documento con arreglo a la resolución del dispositivo de destino. Asimismo, configure Flash Player en la versión correcta de Flash Lite.

  • Flash Lite puede representar gráficos vectoriales con calidad baja, media o alta. Cuanto mayor sea la calidad de la representación, mayor será la fluidez y exactitud con las que Flash Lite representa los gráficos vectoriales y mayor será también la demanda de la CPU del dispositivo. Para proporcionar animación compleja, pruebe a cambiar la configuración de calidad del reproductor y, a continuación, realice pruebas exhaustivas en el archivo SWF. Para controlar la calidad de representación de un archivo SWF, utilice la propiedad _quality o el comando SetQuality. Los valores válidos para la propiedad _quality son LOW, MEDIUM y HIGH.

  • Limite el número de interpolaciones simultáneas. Reduzca el número de interpolaciones o secuencie la animación para que una empiece cuando otra termine.

  • Utilice efectos de transparencia (alfa) en los símbolos con moderación porque utilizan mucha CPU. En concreto, evite la interpolación en símbolos con niveles alfa que no sean totalmente opacos (menos del 100 %).

  • Procure no utilizar efectos visuales que consuman mucha CPU, como máscaras grandes, movimientos prolongados, superposiciones con transparencia, degradados extensos y vectores complejos.

  • Experimente con combinaciones de interpolaciones, animaciones mediante fotogramas y movimientos controlados por ActionScript para producir resultados óptimos.

  • La representación de óvalos y círculos vectoriales consume mucha más memoria que la representación de cuadriláteros. El empleo de trazos redondos u ovalados aumenta también considerablemente el uso de CPU.

  • Pruebe con frecuencia las animaciones en los dispositivos de destino reales.

  • Cuando Animate dibuja una región animada, define un cuadro rectangular delimitador alrededor del área. Optimice el dibujo reduciendo el tamaño del rectángulo al máximo. Evite que se solapen las interpolaciones, ya que Animate interpreta el área combinada como un único rectángulo y, por tanto, la región total resultante será más grande. Utilice la función Show Redraw Region de Animate para optimizar la animación.

  • Procure no utilizar _alpha = 0 y _visible = false para ocultar los clips de película en pantalla. Si simplemente desactiva la visibilidad de un clip de película o cambia su alfa a cero, se incluirá igualmente en los cálculos de representación de líneas, lo que puede afectar al rendimiento.

  • Tampoco intente ocultar un clip de película colocándolo detrás de otra imagen. Se incluirá igualmente en los cálculos del reproductor. En lugar de ello, saque totalmente los clips de película del escenario o elimínelos con una llamada a removeMovieClip.

Mapas de bits y gráficos vectoriales de Flash Lite en dispositivos móviles

Flash Lite puede representan gráficos vectoriales y de mapa de bits. Cada tipo de gráfico presenta ventajas e inconvenientes. La decisión de utilizar gráficos vectoriales en lugar de gráficos de mapa de bits no siempre está clara y a menudo depende de varios factores.

Los gráficos vectoriales se representan de forma compacta en archivos SWF como ecuaciones matemáticas y el reproductor de Flash Lite los representa en tiempo de ejecución. Por el contrario, los gráficos de mapa de bits se representan como matrices de elementos de imagen (píxeles) que requieren más bytes de datos. Por tanto, el empleo de gráficos vectoriales en un archivo puede ayudar a reducir el tamaño de los archivos y el uso de la memoria.

Los gráficos vectoriales conservan además sus formas suaves cuando se amplían o reducen. Las imágenes de mapa de bits pueden representarse con ángulos o pixeladas cuando se amplían.

Comparados con los mapas de bits, los gráficos vectoriales requieren más capacidad de procesamiento para su representación, especialmente los que contienen muchas formas y rellenos complejos. Por consiguiente, el uso excesivo de formas vectoriales puede reducir en algunas ocasiones el rendimiento general de los archivos. Como los gráficos de mapa de bits no requieren tanto tiempo de procesamiento para su representación como los gráficos vectoriales, constituyen la mejor opción para algunos archivos, como un mapa de carreteras complejo con animaciones y capacidad de desplazamiento diseñado para un teléfono móvil.

Tenga en cuenta estas consideraciones:

  • Evite utilizar contornos en formas vectoriales. Los contornos tienen bordes interiores y exteriores (los rellenos solo tienen uno) y duplican el esfuerzo de representación.

  • Las esquinas son más fáciles de representar que las curvas. Cuando sea posible, utilice bordes rectos, especialmente con formas vectoriales muy pequeñas.

  • La optimización es especialmente útil con formas vectoriales pequeñas como los iconos. Los iconos complejos pueden perder sus detalles al representarse y el trabajo de representar los detalles es en vano.

  • Por regla general, utilice mapas de bits para imágenes pequeñas complejas (como iconos) y gráficos vectoriales para imágenes más grandes y más simples.

  • Importe los gráficos de mapa de bits con el tamaño correcto; no importe gráficos grandes y luego los reduzca en Animate, ya que desperdiciará memoria en tiempo de ejecución y capacidad de almacenamiento.

  • El reproductor de Flash Lite no admite el suavizado de mapas de bits. Si se ajusta el tamaño de un mapa de bits o se gira, se mostrará como si estuviera fragmentado. Si es necesario ajustar el tamaño de un gráfico o girarlo, considere la posibilidad de utilizar en su lugar un gráfico vectorial.

  • El texto es básicamente una forma vectorial muy compleja. Evidentemente, el texto suele ser fundamental y, por tanto, rara vez puede excluirse en su totalidad. Cuando necesite incluir texto, procure no aplicarle efectos de animación o colocarlo sobre una animación. Considere la posibilidad de usar el texto como mapa de bits. En el caso del texto dinámico y de entrada formado por varias líneas, el salto de línea de la cadena de texto no se almacena en caché. Animate divide las líneas en tiempo de ejecución y calcula los saltos de línea cada vez que hay que redibujar el campo de texto. Los campos de texto estáticos no presentan problemas, porque los saltos de línea se calculan previamente durante la compilación. Para el contenido dinámico, es inevitable utilizar campos de texto dinámicos, pero cuando sea posible considere utilizar en su lugar campos de texto estáticos.

  • Reduzca el uso de la transparencia en los archivos PNG; Animate debe calcular cada nuevo dibujo, incluso para las partes transparentes del mapa de bits. Por ejemplo, en el caso de un archivo PNG transparente que representa un elemento en segundo plano, no exporte el PNG transparente con el tamaño completo de la pantalla. En lugar de ello, expórtelo con el tamaño real del elemento en segundo plano.

  • Intente agrupar por un lado las capas del mapa de bits y por otro, las capas vectoriales. Animate necesita implementar diferentes representaciones para el contenido de mapa de bits y el contenido vectorial, y cambiar de una a otra requiere tiempo.

Definición de opciones de compresión para mapas de bits de Flash Lite para dispositivos móviles

Cuando utiliza mapas de bits, puede definir opciones de compresión de imágenes (para cada imagen o, en general, para todas las imágenes de mapa de bits) y reducir así el tamaño de los archivos SWF.

Definición de opciones de compresión para un archivo de mapa de bits individual

  1. Inicie Animate y cree un documento.

  2. Seleccione un mapa de bits en la ventana Biblioteca.
  3. Haga clic con el botón derecho (Windows) o haga clic manteniendo pulsada la tecla Control (Macintosh) en el icono de mapa de bits y seleccione Propiedades en el menú contextual para abrir el cuadro de diálogo Propiedades de mapa de bits.
  4. En el menú emergente Compresión, seleccione alguna de las opciones siguientes:
    • Utilice la opción Photo (JPEG) para las imágenes con variaciones de color o tono complejas, como fotografías o imágenes con relleno degradado. Esta opción produce un archivo JPEG. Seleccione la casilla de verificación Utilizar datos JPEG importados para utilizar la calidad de compresión predeterminada especificada para la imagen importada. Para especificar una nueva configuración de compresión de calidad, anule la selección de Utilizar datos JPEG importados e introduzca un valor entre 1 y 100 en el cuadro de texto Calidad. Un valor alto producirá una imagen de mayor calidad, pero también un archivo de mayor tamaño, por lo que debe ajustar el valor correctamente.

    • Seleccione la opción Sin pérdida (PNG/GIF) para las imágenes con formas simples y pocos colores. Esta opción comprime la imagen mediante la compresión sin pérdidas, que no descarta ningún dato.

  5. Haga clic en Probar para determinar el resultado de la compresión del archivo.

    Compare el tamaño del archivo original con el tamaño del archivo comprimido para determinar si la configuración de compresión seleccionada es aceptable.

Definición de opciones de compresión para todas las imágenes de mapa de bits

  1. Seleccione Archivo > Configuración de publicación y, a continuación, haga clic en la ficha Flash para mostrar las opciones de compresión.
  2. Ajuste el regulador de calidad JPEG o introduzca un valor. Un valor de calidad JPEG más alto producirá una imagen de mayor calidad, pero un archivo SWF de mayor tamaño. Una calidad de imagen inferior producirá un archivo SWF más pequeño. Pruebe distintos valores para determinar cuál es la mejor relación entre tamaño y calidad.

Optimización de los fotogramas de Flash Lite para dispositivos móviles

  • La mayoría de los dispositivos compatibles con Flash Lite reproducen el contenido con una velocidad de 15 a 20 fotogramas por segundo (fps). La velocidad de los fotogramas puede ser de 6 fps como mínimo. Durante el desarrollo, defina la velocidad de los fotogramas a un valor aproximado a la velocidad de reproducción del dispositivo de destino. De esta forma, podrá ver cómo se ejecutará el contenido en un dispositivo con un rendimiento limitado. Antes de publicar el archivo SWF final, defina la velocidad de fotogramas del documento en al menos 20 fps o un valor superior para evitar que se limite el rendimiento en caso de que el dispositivo permita una velocidad de fotogramas mayor.

  • Cuando utilice gotoAndPlay, recuerde que cada fotograma incluido entre el fotograma actual y el solicitado debe inicializarse antes de que se reproduzca el fotograma solicitado. Si muchos de estos fotogramas incluyen contenido diferente, puede resultar más eficaz utilizar clips de película distintos en lugar de usar la línea de tiempo.

  • Aunque es lógico cargar previamente todo el contenido colocándolo al principio del archivo en un equipo de sobremesa, hacer lo mismo en un dispositivo móvil puede ralentizar el arranque del archivo. Distribuya el contenido por todo el archivo para que los clips de película se inicien conforme se utilizan.

Optimización de ActionScript para el contenido de Flash Lite en dispositivos móviles

Debido a las limitaciones de velocidad de procesamiento y memoria de la mayoría de los dispositivos móviles, tenga en cuenta estas pautas cuando desarrolle ActionScript para contenido de Flash Lite utilizado en dispositivos móviles:

  • Simplifique el archivo y su código todo lo que sea posible. Elimine clips de película no utilizados, suprima fotogramas y bucles de código innecesarios y procure no incluir demasiados fotogramas o fotogramas superfluos.

  • El uso de bucles FOR puede tener un alto coste por la sobrecarga que implica la comprobación de la condición en cada iteración. Cuando los costes de la iteración y la sobrecarga de los bucles son equiparables, ejecute varias operaciones por separado en lugar de usar un bucle. Es posible que el código aumente, pero mejorará el rendimiento.

  • Detenga los bucles basados en fotogramas en cuanto dejen de ser necesarios.

  • Cuando sea posible, evite el procesamiento de cadenas y matrices, porque puede consumir mucha CPU.

  • Intente siempre acceder directamente a las propiedades en lugar de usar métodos get y set de ActionScript, que implican una carga de trabajo mayor que otras llamadas a métodos.

  • Gestione los eventos juiciosamente. Aligere las matrices de escucha de eventos mediante condiciones que comprueben si existe una escucha (no es null) antes de llamarla. Borre los intervalos activos mediante una llamada a clearInterval y elimine todas las escuchas activas mediante una llamada a removeListener antes de quitar el contenido con unloadapplication o removeapplicationClip. Animate no recupera la memoria de datos SWF (por ejemplo, de los intervalos y las escuchas) si las funciones de ActionScript siguen haciendo referencia a los datos SWF cuando se descarga un clip de película.

  • Cuando las variables ya no sean necesarias, bórrelas o establézcalas en null, con lo que se marcarán para la recolección de elementos no utilizados. Elimine las variables para optimizar el uso de la memoria en tiempo de ejecución, porque los activos no necesarios se eliminan del archivo SWF. Es mejor eliminar variables que establecerlas en null.

  • Elimine explícitamente las escuchas de los objetos mediante una llamada a removeListener antes de la recolección de elementos no utilizados.

  • Si la llamada a una función se realiza dinámicamente y la función pasa un conjunto fijo de parámetros, utilice call en lugar de apply.

  • Compacte los espacios de nombres (como las rutas) para reducir el tiempo de arranque. Cada nivel del paquete se compila en una instrucción IF y genera una nueva llamada Object , por lo que ahorrará tiempo si incluye menos niveles en la ruta. Por ejemplo, una ruta con los niveles com.xxx.yyy.aaa.bbb.ccc.nombreFunción hará que se cree una instancia de un objeto para com.xxx.yyy.aaa.bbb.ccc. Algunos desarrolladores de Flash utilizan software de preprocesamiento para reducir la ruta a un identificador único, como 58923409876.nombreFunción, antes de compilar el código SWF.

  • Si un archivo consta de varios archivos SWF que utilizan las mismas clases de ActionScript, no permita que esas clases seleccionen archivos SWF durante la compilación. De esta forma, podrá reducir el tiempo de descarga de los archivos y los requisitos de memoria en tiempo de ejecución.

  • Evite utilizar Object.watch y Object.unwatch porque cada cambio realizado en la propiedad de un objeto requiere que el reproductor determine si debe enviar una notificación del cambio.

  • Si el código de ActionScript que se ejecuta en un fotograma en la línea del tiempo requiere más de un segundo para su ejecución, considere la posibilidad de fragmentar ese código y ejecutarlo en varios fotogramas.

  • Elimine las instrucciones trace del código cuando publique el archivo SWF. Para ello, seleccione la casilla de verificación Omitir acciones de trazado en la ficha Flash del cuadro de diálogo Configuración de publicación.

  • La herencia aumenta el número de llamadas a métodos y emplea más memoria: una clase que incluya toda la funcionalidad debe ser más eficaz en tiempo de ejecución que una clase que herede algunas de las funciones de una superclase. Por tanto, puede ser necesario encontrar la mejor relación entre la extensibilidad de las clases y la eficacia del código durante el diseño.

  • Cuando un archivo SWF carga otro archivo del mismo tipo que contiene una clase de ActionScript personalizada (por ejemplo, foo.bar.CustomClass) y, a continuación, descarga el archivo SWF, la definición de clase permanece en memoria. Para ahorrar memoria, borre explícitamente todas las clases personalizadas en los archivos SWF descargados. Utilice la instrucción delete y especifique el nombre de clase completo, como: delete foo.bar.CustomClass.

  • Limite el uso de variables globales, ya que no se marcan para la recolección de elementos no utilizados si se elimina el clip de película que las define.

  • Procure no utilizar los componentes estándar de la interfaz de usuario (disponibles en el panel Componentes de Flash). Estos componentes están diseñados para su ejecución en equipos de sobremesa y no están optimizados para su uso en dispositivos móviles.

  • Siempre que sea posible, evite las funciones con grandes niveles de anidación.

  • Evite las referencias a variables, objetos o funciones inexistentes. En comparación con la versión para escritorio de Flash Player, Flash Lite 2 tarda bastante en buscar las referencias a variables no existentes, lo que puede reducir considerablemente el rendimiento.

  • Evite definir funciones mediante sintaxis anónima. Por ejemplo, miObj.nombreEvento = función{ ...}. Las funciones definidas explícitamente, como función miFunc { ...}; mi Obj.nombreEvento = miFunc; son más eficaces.

  • Reduzca el uso de funciones matemáticas y números de coma flotante. El cálculo de estos valores reduce el rendimiento. Si tiene que utilizar rutinas matemáticas, siempre puede calcular previamente los valores y almacenarlos en una matriz de variables. Recuperar los valores de una tabla de datos es mucho más rápido que dejar que Flash los calcule en tiempo de ejecución.

Gestión de la memoria de archivos de Flash Lite para dispositivos móviles

Flash Lite borra periódicamente de la memoria los objetos y variables a los que ya no hace referencia un archivo. Esta operación se denomina recolección de elementos no utilizados. Flash Lite ejecuta su proceso de recolección de elementos no utilizados una vez cada 60 segundos, o siempre que el uso de la memoria de archivos asciende bruscamente al 20 % o más.

Aunque no es posible controlar cómo y cuándo realiza Flash Lite la recolección de elementos no utilizados, sí que puede liberar deliberadamente la memoria innecesaria. En el caso de las variables globales o de la línea del tiempo, utilice la instrucción delete para liberar la memoria utilizada por los objetos de ActionScript. En el caso de las variables locales (como una variable establecida en la definición de una función), no puede utilizar la instrucción delete para liberar la memoria de un objeto, pero puede establecer en null la variable que hace referencia al objeto. De esta forma, liberará la memoria utilizada por el objeto, siempre que no existan otras referencias a ese objeto.

En los dos ejemplos de código siguientes se muestra cómo liberar la memoria utilizada por los objetos eliminando la variable que hace referencia a esos objetos. Los ejemplos son idénticos con la salvedad de que en el primer ejemplo se crea una variable de la línea de tiempo y en el segundo se crea una variable 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);

Como se mencionó anteriormente, no puede utilizar la instrucción delete para liberar la memoria utilizada por la variable de una función local. En lugar de ello, establezca la referencia de la variable en null, lo que es lo mismo que utilizar delete.

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();

Carga de datos para dispositivos móviles en Flash Lite

Cuando cree archivos para dispositivos móviles, reduzca la cantidad de datos que intenta cargar al mismo tiempo. Si carga datos externos en un archivo de Flash Lite (por ejemplo, mediante XML.load), el sistema operativo del dispositivo puede generar un error “fallo de memoria” si se asigna memoria insuficiente a los datos entrantes. Esta situación se puede producir incluso si la cantidad total de memoria restante es suficiente.

Suponga, por ejemplo, que un archivo intenta cargar otro archivo XML de 100 KB y el sistema operativo del dispositivo tiene asignado solo 30 KB para gestionar el flujo de datos entrantes. En este caso, Flash Lite muestra un mensaje de error al usuario en el que se indica que no hay memoria suficiente.

Para cargar grandes cantidades de datos, agrupe los datos en fragmentos más pequeños (por ejemplo, en varios archivos XML) y realice varias llamadas de carga de datos para cada fragmento. El tamaño de cada fragmento de datos y, por tanto, el número de llamadas de carga de datos que debe realizar, varía en función del dispositivo y del archivo. Para encontrar un equilibrio adecuado entre el número de solicitudes de datos y la probabilidad de que se produzca un error de memoria, pruebe los archivos en varios dispositivos de destino.

Para un rendimiento óptimo, evite cargar y analizar archivos XML si es posible. En lugar de ello, almacene los datos en pares simples de nombre y valor, y cargue los datos de un archivo de texto mediante loadVars o de archivos SWF precompilados.

Exclusión de clases de la compilación en Flash Lite

Para reducir el tamaño de un archivo SWF, considere la posibilidad de quitar clases de la compilación manteniendo la capacidad de acceder y utilizar esas clases para la comprobación de tipos. Aplique este enfoque, por ejemplo, si va a desarrollar un archivo que utiliza varios archivos SWF o bibliotecas compartidas, especialmente si estos archivos o bibliotecas acceden a muchas de las mismas clases. La exclusión de clases ayuda a evitar la duplicación de clases en dichos archivos.

  1. Cree un nuevo archivo XML.
  2. Asigne al archivo XML el nombre FLA_nombrearchivo_exclude.xml, donde FLA_nombrearchivo es el nombre del archivo FLA sin la extensión .fla. Por ejemplo, si el archivo FLA se llama ventaAcciones.fla, el nombre del archivo XML deberá ser ventaAcciones_exclude.xml.
  3. Guarde el archivo en el mismo directorio que el archivo FLA.
  4. Inserte las siguientes etiquetas en el archivo XML:
    <excludeAssets> 
        <asset name=”className1” /> 
        <asset name=”className2” /> 
    </excludeAssets>

    Los valores especificados para los atributos de nombre en las etiquetas <asset> son los nombres de las clases que deben excluirse del archivo SWF. Añada al archivo tantas etiquetas como sea necesario. Por ejemplo, el siguiente archivo XML excluye las clases mx.core.UIObject y mx.screens.Slide del archivo SWF:

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

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea