Визуализация текстовых объектов

Используйте функцию кэширования растрового изображения и свойство opaqueBackground для повышения производительности визуализации текста.

Механизм визуализации текста Flash Text Engine предоставляет отличные возможности для визуализации. Однако для многих классов требуется показывать одну строку текста. По этой причине для создания редактируемого текстового поля с использованием класса TextLine требуется значительный объем памяти и множество строк кода ActionScript. Класс TextLine лучше всего использовать для статического и нередактируемого текста, для которого визуализация выполняется быстрее и требуется меньше памяти.

Функция кэширования растрового изображения позволяет кэшировать векторное содержимое в качестве растровых изображений для повышения производительности визуализации. Эта функция полезна для сложного векторного содержимого, а также при использовании с текстовым содержимым, для которого требуется визуализация обработки.

В следующем примере показано, как можно использовать функцию кэширования растрового изображения и свойство opaqueBackground для повышения производительности визуализации. На следующем рисунке показан стандартный экран приветствия, который может отображаться, когда пользователь ожидает загрузки содержимого.

Полноразмерное изображение
Экран приветствия

На следующем рисунке показано замедление, которое применяется к объекту TextField программным способом. Текст замедляется от верха к центру монтажного кадра.

Полноразмерное изображение
Замедление текста

Следующий код позволяет создать замедление. Переменная preloader сохраняет текущий целевой объект, снижая количество операций по поиску свойств, которые снижают производительность. 

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

Функция Math.abs() может быть встроена для минимизации вызовов функции и повышения производительности. Лучшим приемом является использование типа int для свойств destX и destY для получения значений с фиксированной точкой. Использование типа int обеспечивает точную привязку к пикселам без необходимости округления значений вручную с помощью медленных методов, таких как Math.ceil() или Math.round() . Этот код не округляет значения координат до целых, потому что при постоянном округлении значений объект не будет двигаться плавно. Если значения координат округляются до ближайших целых, движения объекта будут неровными. Однако этот метод удобен для задания финального положения экранного объекта. Не используйте следующий код. 

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

Следующий код выполняется гораздо быстрее. 

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

Предыдущий код был еще больше оптимизирован за счет использования операторов побитового смещения для деления значений. 

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

Функция кэширования растрового изображения упрощает визуализацию объектов в среде выполнения за счет использования динамических растровых изображений. В текущем примере кэшируется фрагмент ролика, содержащий объект TextField. 

wait_mc.cacheAsBitmap = true;

Одним из дополнительных способов повышения производительности является удаление альфа-прозрачности. Альфа-прозрачность повышает загрузку среды выполнения при рисовании прозрачных растровых изображений, как показано в предыдущем примере кода. В качестве обходного приема можно использовать свойство opaqueBackground путем указания цвета фона.

При использовании свойства opaqueBackground поверхность растрового изображения, создаваемая в памяти, по-прежнему занимает 32 бита. Однако для сдвига альфа задано значение 255 и прозрачность не применяется. В результате использование свойства opaqueBackground не приводит к уменьшению объема занимаемой памяти, но позволяет повысить производительность визуализации при применении функции кэширования растрового изображения. В следующем примере кода используются все приемы по оптимизации. 

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

Теперь анимация оптимизирована, а кэширование растрового изображения оптимизировано за счет удаления прозрачности. На мобильных устройствах при использовании функции кэширования растрового изображения рассмотрите возможность задания для качества рабочей области значений LOW и HIGH в различных состояниях анимации. 

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

Однако в этом случае при изменении качества рабочей области среды выполнения повторно создает поверхность растрового изображения объекта TextField в соответствии с текущим качеством рабочей области. По этой причине лучше не изменять качество рабочей области при использовании функции кэширования растрового изображения.

Здесь можно использовать подход, включающий кэширование растрового изображения вручную. Для имитации применения свойства opaqueBackground фрагмент ролика можно нарисовать в непрозрачном объекте BitmapData, при использовании которого среде выполнения не требуется повторно создавать поверхность растрового изображения.

Этот прием хорошо работает с содержимым, которое не изменяется со временем. Однако, если содержимое текстового поля может изменяться, рассмотрите возможность использования другой стратегии. Например, представьте текстовое поле, в котором показано постоянно обновляющееся значение в процентах, обозначающее ход загрузки приложения. Если текстовое поле или содержащий его экранный объект кэшируется как растровое изображение, его поверхность должна создаваться каждый раз при изменении содержимого. Кэширование растрового изображения вручную невозможно, поскольку содержимое экранного объекта постоянно изменяется. Изменение этой константы заставляет вручную вызывать метод BitmapData.draw() для обновления кэшированного растрового изображения.

Помните, что после выхода версии Flash Player 8 (и AIR 1.0) вне зависимости от значения качества рабочей области текстовое поле остается превосходно сглаженным, если для визуализации задан параметр «Сглаживание для читаемости». Этот подход позволяет уменьшить объем используемой памяти, однако приводит к увеличению загрузки ЦП и небольшому замедлению визуализации по сравнению с использованием функции кэширования растрового изображения.

В следующем примере кода используется этот подход. 

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

Не рекомендуется использовать этот параметр (Сглаживание для читаемости) для движущегося текста. При масштабировании текста с этим параметром предпринимается попытка сохранить выравнивание текста, что создает эффект смещения. Однако, если содержимое экранного объекта постоянно изменяется и необходимо масштабировать текст, производительность на мобильных устройствах можно повысить путем задания для качества значения LOW . По завершении движения восстановите для качества значение HIGH .