Procesamiento de objetos de texto

Utilice la función de almacenamiento en caché de mapas de bits y la propiedad opaqueBackground para mejorar el rendimiento de la representación de texto.

Flash Text Engine proporciona optimizaciones realmente buenas. No obstante, se requieren numerosas clases para mostrar una sola línea de texto. Por este motivo, la creación de un campo de texto editable con la clase TextLine requiere una gran cantidad de memoria y muchas líneas de código ActionScript. La clase TextLine es más adecuada para el texto estático y no editable, con el que la representación es más rápida y se requiere menos memoria.

La función de almacenamiento en caché de mapas de bits permite almacenar en caché el contenido vectorial como mapas de bits para mejorar el rendimiento de la representación. Esta función resulta útil para el contenido vectorial complejo y también cuando se utiliza con contenido de texto que requiere que el procesamiento se represente.

El siguiente ejemplo muestra el modo en que la función de almacenamiento en caché de mapas de bits y la propiedad opaqueBackground se pueden utilizar para mejorar el rendimiento de la representación. La siguiente figura ilustra una típica pantalla de bienvenida que se puede mostrar cuando un usuario está esperando que se cargue algún elemento:

Ver gráfico a tamaño completo
Pantalla de bienvenida

La siguiente figura ilustra el suavizado que se aplica al objeto TextField mediante programación. El texto se suaviza lentamente desde la parte superior de la escena hasta el centro:

El siguiente código crea el suavizado. La variable preloader almacena el objeto de destino actual para reducir las búsquedas de propiedades, lo cual puede dañar el rendimiento:

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
  
var destX:Number=stage.stageWidth/2; 
var destY:Number=stage.stageHeight/2; 
var preloader:DisplayObject; 
  
function movePosition( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if (Math.abs(preloader.y-destY)<1) 
        preloader.removeEventListener( Event.ENTER_FRAME, movePosition ); 
}

La función Math.abs() se puede mover en línea aquí para reducir el número de llamadas a funciones y lograr más mejoras de rendimiento. Se recomienda el uso del tipo int para las propiedades destX y destY , de modo que se disponga de valores de punto fijo. El uso del tipo int permite obtener un ajuste de píxeles perfecto sin tener que redondear valores manualmente a través de métodos lentos, como Math.ceil() o Math.round() . Este código no redondea las coordenadas a int, ya que al redondear los valores constantemente, el objeto no se mueve con suavidad. El objeto puede tener movimientos de temblor, ya que las coordenadas se ajustan a los enteros redondeados más cercanos en cada fotograma. Sin embargo, esta técnica puede resultar útil al establecer una posición final para un objeto de visualización. No utilice el siguiente código:

// Do not use this code 
var destX:Number = Math.round ( stage.stageWidth / 2 );  
var destY:Number = Math.round ( stage.stageHeight / 2); 

El siguiente código es mucho más rápido:

var destX:int = stage.stageWidth / 2;  
var destY:int = stage.stageHeight / 2; 

El código anterior puede optimizarse aún más, utilizando operadores de desplazamiento en modo bit para dividir los valores:

var destX:int = stage.stageWidth >> 1;  
var destY:int = stage.stageHeight >> 1;

La función de almacenamiento en caché de mapas de bits facilita al motor de ejecución la representación de objetos mediante el uso de mapas de bits dinámicos. En el ejemplo actual, el clip de película que contiene el objeto TextField se almacena en caché:

wait_mc.cacheAsBitmap = true;

Una forma adicional de mejorar el rendimiento consiste en eliminar la transparencia alfa. La transparencia alfa supone una carga adicional para el motor de ejecución al dibujar imágenes de mapas de bits transparentes, tal y como se muestra en el código anterior. La propiedad opaqueBackground se puede utilizar para omitir este punto, especificando un color como fondo.

Al utilizar la propiedad opaqueBackground , la superficie del mapa de bits creada en memoria aún utiliza 32 bits. Sin embargo, el desplazamiento alfa se establece en 255 y no se utiliza la transparencia. Como resultado, la propiedad opaqueBackground no reduce el uso de memoria, pero mejora el rendimiento de representación al utilizar la función de almacenamiento en caché de mapas de bits. El siguiente código contiene todas las optimizaciones:

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
wait_mc.cacheAsBitmap = true; 
  
// Set the background to the color of the scene background 
wait_mc.opaqueBackground = 0x8AD6FD; 
var destX:int = stage.stageWidth >> 1; 
var destY:int = stage.stageHeight >> 1; 
var preloader:DisplayObject; 
  
function movePosition ( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if ( Math.abs ( preloader.y - destY ) < 1 ) 
        e.currentTarget.removeEventListener ( Event.ENTER_FRAME, movePosition ); 
}

La animación se optimiza y el almacenamiento en caché de mapas de bits se ha optimizado eliminando la transparencia. En dispositivos móviles, considere el cambio de la calidad del escenario a LOW y HIGH durante los diferentes estados de la animación mientras se utiliza la función de almacenamiento en caché de mapas de bits:

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
wait_mc.cacheAsBitmap = true; 
wait_mc.opaqueBackground = 0x8AD6FD; 
  
// Switch to low quality 
stage.quality = StageQuality.LOW; 
var destX:int = stage.stageWidth>>1; 
var destY:int = stage.stageHeight>>1; 
var preloader:DisplayObject; 
  
function movePosition( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if (Math.abs(e.currentTarget.y-destY)<1) 
    { 
        // Switch back to high quality 
        stage.quality = StageQuality.HIGH; 
        preloader.removeEventListener( Event.ENTER_FRAME, movePosition ); 
    } 
}

No obstante, en este caso, el cambio de la calidad del escenario provoca que el motor de ejecución vuelva a generar la superficie del mapa de bits del objeto TextField para coincidir con la calidad del escenario actual. Por este motivo, es mejor no modificar la calidad del escenario al utilizar la función de almacenamiento en caché de mapas de bits.

Aquí podría haberse empleado un enfoque de almacenamiento en caché de mapas de bits manual. Para simular la propiedad opaqueBackground , el clip de película se puede dibujar en un objeto BitmapData transparente, que no provoque que el motor de ejecución vuelva a generar la superficie del mapa de bits.

Esta técnica funciona bien para el contenido que no cambia con el tiempo. Sin embargo, si el campo de texto puede cambiar, considere el uso de una estrategia distinta. Por ejemplo, imagine un campo de texto que se actualiza continuamente con un porcentaje que representa la parte de la aplicación que se ha cargado. Si el campo de texto, o su objeto de visualización, se ha almacenado en caché como mapa de bits, su superficie se debe generar cada vez que cambia el contenido. Aquí no se puede utilizar el almacenamiento en caché de mapas de bits manual, ya que el contenido del objeto de visualización cambia constantemente. Este cambio constante puede forzar la llamada manual al método BitmapData.draw() para actualizar el mapa de bits en caché.

Recuerde que desde Flash Player 8 (y AIR 1.0), independientemente del valor de la calidad del escenario, un campo de texto con la representación establecida en Suavizado para legibilidad permanece perfectamente suavizado. Con este enfoque se utiliza menos memoria, pero se requiere más procesamiento de CPU y la representación es algo más lenta que la función de almacenamiento en caché de mapas de bits.

El siguiente código utiliza este enfoque:

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
  
// Switch to low quality 
stage.quality = StageQuality.LOW; 
var destX:int = stage.stageWidth >> 1; 
var destY:int = stage.stageHeight >> 1; 
var preloader:DisplayObject; 
function movePosition ( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if ( Math.abs ( preloader.y - destY ) < 1 ) 
    { 
        // Switch back to high quality 
        stage.quality = StageQuality.HIGH; 
        preloader.removeEventListener ( Event.ENTER_FRAME, movePosition ); 
    } 
}

No se recomienda el uso de esta opción (Suavizado para legibilidad) para texto en movimiento. Al escalar el texto, esta opción hace que el texto intente permanecer alineado, lo que produce un efecto de desplazamiento. Sin embargo, si el contenido del objeto de visualización cambia constantemente y se necesita texto escalado, el rendimiento de las aplicaciones móviles puede mejorar estableciendo la calidad en LOW . Cuando finalice el movimiento, vuelva a cambiar la calidad a HIGH .