Март 2011

Мы рассмотрели методики форматирования текста в языке ActionScript. В следующем разделе будут освещены несколько вопросов, касающихся визуализации и использования шрифтов в SWF-файле.

Шрифты и отображение текста

По умолчанию приложение Flash Player отображает текст с помощью шрифтов устройства. Это шрифты, установленные в системе конечного пользователя. Когда приложение Flash Player отображает текст с помощью шрифта устройства, оно полностью делегирует процесс визуализации текста локальной среде (то есть операционной системе). Например, рассмотрим следующее простое приложение HelloWorld, создающее текстовое поле, для форматирования которого применяется шрифт Arial:

package { import flash. display.*; import flash. text.*;

public class HelloWorld extends Sprite { public function HelloWorld ( ) { var fontFormat:TextFormat = new TextFormat( ); fontFormat. font = «Arial»;

var t:TextField = new TextField( );

t. text = «Hello world»;

t. setTextFormat(fontFormat);

addChild(t);

}

При выполнении этого кода приложение Flash Player добавляет объект t в список отображения и готовится к обновлению экрана. Чтобы отобразить символы «Hello world», приложение Flash Player передает строку «Hello world» визуализатору текста операционной системы и просит его отобразить эти символы с помощью системного шрифта Arial. Операционная система визуализирует эти символы непосредственно в буфере кадра приложения Flash Player. Например, в операционной системе Windows ХР строка «Hello world» будет отображена с использованием визуализатора ClearType корпорации Microsoft.

Если бы предыдущее приложение HelloWorld выполнялось на двух различных компьютерах под управлением двух различных операционных систем, эти компьютеры могли бы иметь два различных встроенных визуализатора текста и, возможно, даже две различные версии шрифта Arial. Таким образом, даже если требуемый шрифт будет доступен, символ, отображаемый на экране, на разных компьютерах может выглядеть по-разному. Кроме того, незначительное влияние на поведение визуализатора текста могут оказать переменная cacheAsBitmap или фильтры. Например, если объект TextField помещается в объект Sprite, переменной cacheAsBitmap которого присвоено значение true, операционная система Windows ХР будет использовать обычное сглаживание вместо визуализатора ClearType.

Если шрифт, указанный для некоторого символа, не установлен в операционной системе конечного пользователя, то приложение Flash Player автоматически попросит операционную систему отобразить данный символ с помощью подходящего замещающего шрифта. Например, если для некоторого символа указан шрифт Verdana и этот символ отображается в стандартной версии операционной системы Mac OS X (не включающей шрифт Verdana), он будет визуализирован с помощью рубленого шрифта Helvetica, используемого по умолчанию. Таким образом, в зависимости от доступности шрифтов в операционной системе конечного пользователя, текст, визуализируемый с помощью шрифтов устройства на двух различных компьютерах под управлением двух различных операционных систем, может выглядеть совершенно по-разному.

1 При использовании шрифтов устройства отображение текста зависит от операционной

*v j „ системы и — для версии приложения Flash Player, реализованной в виде модуля расши-ц»У рения, — от браузера.

Если для некоторого символа шрифт не указан вообще, то локальный визуализа-тор отображает этот символ с использованием произвольного шрифта по умолчанию, выбираемого приложением Flash Player. Например, в операционной системе Windows ХР шрифтом по умолчанию является Times New Roman.

Чтобы исключить различия в отображении текста на разных компьютерах и устройствах, приложение Flash Player позволяет разработчикам встраивать начертания шрифтов в SWF-файл. Текст, отображаемый с помощью встроенных начертаний шрифтов, гарантированно будет иметь очень похожий внешний вид на различных компьютерах, операционных системах и устройствах. Однако за такую согласованность необходимо платить; встраивание начертания для шрифта Roman целиком обычно увеличивает размер SWF-файла на 20-30 Кбайт (шрифты для азиатских языков могут занимать гораздо больше места). В отличие от этого, шрифты устройств совершенно не увеличивают размер SWF-файл. Таким образом, шрифты устройств обычно используются в тех случаях, когда небольшой размер файла гораздо важнее визуальной целостности, а встраиваемые начертания шрифтов обычно применяются, когда визуальная целостность гораздо важнее небольшого размера файла.

Чтобы использовать встроенный шрифт, мы должны сначала встроить начертания этого шрифта, а затем на этапе выполнения связать встроенные шрифты с желаемым текстовым полем (-ями). Когда встроенные шрифты связываются с текстовым полем, оно отображается либо с помощью стандартного визуализатора векторной графики приложения Flash Player, либо с помощью специализированного визуализатора FlashType, но не с помощью визуализатора текста локальной среды. Обратите внимание, что каждая вариация стиля шрифта должна быть встроена по отдельности. Если текстовое поле использует встраиваемые версии шрифта Courier New полужирного начертания, курсива и полужирного курсива, мы должны встроить все три вариации шрифта, иначе текст будет отображаться неправильно. Подчеркивание не считается ни вариацией шрифта, ни его размером или цветом.

Методика встраивания начертаний шрифтов на этапе компиляции зависит от различных инструментов разработки. В двух следующих разделах рассматривается, как встраивать шрифты в среде разработки Flash и в приложении Flex Builder или консольном компиляторе mxmlc. Для примера в каждом разделе описывается процедура встраивания шрифта Verdana. Как только начертания шрифта будут встроены в SWF-файл, они могут быть использованы для форматирования текста, как описывается в подразд. «Форматирование текста с помощью встраиваемого шрифта» этого раздела.

Встраивание начертаний шрифта в среде разработки Flash

Чтобы встроить начертания шрифта Verdana в среде разработки Flash, выполняйте следующие шаги.

1. Выберите команду меню Window > Library (Окно > Библиотека).

2. В меню Options (Параметры), значок которого расположен в правом верхнем углу панели Library (Библиотека), выберите команду New Font (Новый шрифт). На экране появится окно Font Symbol Properties (Свойства символа шрифта).

3. В раскрывающемся списке Font (Шрифт) выберите значение Verdana.

4. В поле Name (Имя) введите значение Verdana (это имя выполняет косметическую функцию и используется только на палитре Library (Библиотека)).

5. Нажмите кнопку ОК.

6. На палитре Library (Библиотека) выберите символ шрифта Verdana.

7. В меню Options (Параметры) выберите команду Linkage (Связывание).

8. В области Linkage (Связывание) окна Linkage Properties (Свойства связывания) установите флажок Export For ActionScript (Экспорт для ActionScript).

9. В поле Class (Класс) должно автоматически появиться значение Verdana. Если этого не произошло, введите значение Verdana в поле ввода Class (Класс). Указанное имя класса используется при загрузке шрифтов на этапе выполнения (этот процесс рассматривается далее, в подразд. «Загрузка шрифтов на этапе выполнения»).

10. Нажмите кнопку ОК.

I Среда разработки Flash позволяет встраивать начертания для любого шрифта, кото-*#: 4 А рый отображается в раскрывающемся списке Font (Шрифт) окна Font Symbol Properties —_-м?’ (Свойства символа шрифта).

Чтобы экспортировать шрифт без сглаживания, добавьте следующий шаг между шагами 2 и 3 описанной процедуры: в окне Font Symbol Properties (Свойства символа шрифта) (шаг 2) установите флажок Bitmap text (Растровый текст) и затем укажите размер шрифта.

Когда установлен флажок Bitmap text (Растровый текст), при вычислении начертаний символов компилятор связывает фигуры с целыми пикселами. В результате для каждого символа указанного размера образуется четкая векторная фигура без сглаживания. Чтобы добиться наилучших результатов при использовании параметра Bitmap text (Растровый текст), размер шрифта, устанавливаемый для текста, который форматируется с помощью встраиваемого шрифта, должен всегда равняться размеру шрифта, указываемому в окне Font Symbols Properties (Свойства символа шрифта). Кроме того, избегайте масштабирования текста, к которому применяется форматирование с использованием встраиваемого шрифта.

В приложении Flex Builder 2 и компиляторе mxmlc параметр Bitmap text (Растровый текст) отсутствует.

Встраивание начертаний шрифта в приложении Flex Builder 2 и компиляторе mxmlc

Для встраивания начертаний шрифта в проект ActionScript приложения Flex Builder 2 или с помощью консольного компилятора mxmlc мы используем тег метаданных [Embed]. Чтобы использовать его, мы должны предоставить компилятору доступ к библиотеке flex. s wc, поддерживающей компилятор Flex. По умолчанию все проекты приложения Flex Builder 2 автоматически включают местоположение файла flex. swc в список путей к библиотекам языка ActionScript, поэтому

в приложении Flex Builder 2 все методики, описываемые в данном разделе, будут работать без специальной настройки компилятора.

Элементы, встраиваемые с помощью тега метаданных [Embed], включая шрифты, могут быть встроены как на уровне переменной, так и на уровне класса. Тем не менее встраивание шрифта на уровне переменной более удобно, чем встраивание шрифта на уровне класса, поэтому шрифты редко встраиваются на уровне класса.

^ I Дополнительную информацию о теге метаданных [Embed] можно найти в гл. 28.

Обобщенный код, необходимый для встраивания шрифта на уровне переменной в проекте ActionScript приложения Flex Builder 2 или с помощью компилятора mxmlc, выглядит следующим образом:

[Embed(source=" путьКШрифту",

fontFami^y="имяШpифтa")] private var имяКласса:Class:

В приведенном коде, который должен размещаться в теле класса, путьКШрифту обозначает путь к файлу шрифта в локальной файловой системе, имяШрифта — произвольное имя, по которому можно будет обращаться к шрифту из приложения, а имяКласса — имя переменной, которая будет ссылаться на класс, представляющий встроенный шрифт. Этот класс применяется только при загрузке шрифтов на этапе выполнения, как станет известно далее из подразд. «Загрузка шрифтов на этапе выполнения».

Например, следующий код демонстрирует, как встроить начертания шрифта Verdana в операционную систему Windows ХР. Обратите внимание, что в значении путьКШрифту должны использоваться прямые слэши, но при этом оно не чувствительно к регистру символов.

[Embed(source="c:/wi ndows/fonts/verdana. ttf",

fontFamily="Verdana")] private var verdana:Class;

При выполнении предыдущего кода среда Flash автоматически генерирует класс, представляющий элемент встроенного шрифта, и присваивает этот класс переменной verdana.

Тег метаданных [Embed] может применяться только для шрифтов TrueType.

В простых случаях код, который встраивает шрифт, находится в том же классе, который использует этот шрифт для форматирования текста. Это демонстрирует листинг 27.11, в котором представлен простой класс HelloWorldVerdana, отображающий текст «Hello world», отформатированный с помощью встроенного шрифта (более подробно о форматировании текста с помощью встраиваемых шрифтов мы узнаем в следующем разделе).

Листинг 27.11. Отображение Hello World с использованием шрифта Verdana

package { import flash. display.*; import flash. text.*;

public class HelloWorldVerdana extends Sprite { // Встраиваем шрифт Verdana [Embed(source="c:/windows/fonts/verdana. ttf",

fontFami1y^"Verdana")] private var verdana:Class;

public function HelloWorldVerdana ( ) { var t:TextField = new TextField( ); t. embedFonts = true;

// Форматируем текст с помощью шрифта Verdana

t. htmlText = «Hellо world»;

addChild(t);

}

}

}

В более сложных приложениях, использующих множество встраиваемых шрифтов, за встраивание всех шрифтов обычно отвечает один центральный класс — благодаря этому происходит отделение кода, отвечающего за встраивание шрифта, от кода, осуществляющего форматирование текста. Это демонстрирует листинг 27.12, в котором представлено два класса: FontEmbedder, отвечающий за встраивание шрифта, и HelloWord — основной класс, форматирующий текст с помощью шрифта, встроенного через класс FontEmbedder. Обратите внимание, что класс HelloWorld по необходимости создает ссылку на класс FontEmbedder, заставляя класс FontEmbedder и все его шрифты скомпилироваться в SWF-файл.

Листинг 27.12. Централизованное встраивание шрифтов

// Класс FontEmbedder package {

// Встраивает шрифты для данного приложения public class FontEmbedder {

[Embed(source="c:/windows/fonts/verdana. ttf", fontFamily="Verdana")]

private var verdana:Class;

}

}

// Класс HelloWorld package {

import flash. display.*;

import flash. text.*;

public class HelloWorld extends Sprite { // Создаем ссылку на класс, который встраивает шрифты для данного // приложения. Эта ссылка заставляет скомпилировать класс // и, соответственно, его шрифты в SWF-файл. FontEmbedder;

public function HelloWorld ( ) { var t:TextField = new TextField( ); t. embedFonts = true;

t. html Text = «Hellо world»; addChild(t);

}

}

}

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

Листинг 27.13. Встраивание шрифта на уровне класса // Класс, встраивающий шрифт

package { import flash. display.*; import mx. core. FontAsset;

[Embed(source="c:/windows/fonts/verdana. ttf", fontFamily="Verdana")]

public class Verdana extends FontAsset {

}

}

// Класс, использующий встроенные шрифты

package { import flash. display.*; import flash. text.*;

public class HelloWorld extends Sprite { // Создаем ссылку на класс, который встраивает шрифты для данного // приложения. Эта ссылка заставляет скомпилировать класс // и, соответственно, ‘его шрифты в SWF-файл. Verdana;

// Конструктор

public function HelloWorld ( ) { var t;TextField = new TextField( ); t. embedFonts = true;

t. html Text = «Hellо world»; addChild(t);

}

Стоит отметить, что из-за ошибки в приложении Flex Builder 2 и компиляторе mxmlc для шрифтов, встраиваемых с помощью синтаксиса тега [Embed], нельзя использовать кернинг. Тем не менее он может быть использован для шрифтов, встраиваемых с помощью среды разработки Flash. Если кернинг необходимо применять в приложении, скомпилированном с помощью приложения Flex Builder 2 или компилятора mxmlc, встройте желаемый шрифт в SWF-файл с помощью среды разработки Flash, а затем загрузите этот шрифт динамически (дополнительные сведения можно получить в подразд. «Загрузка шрифтов на этапе выполнения»).

Теперь, когда мы узнали, как встраивать шрифты с помощью среды разработки Flash и тега метаданных [Embed], рассмотрим вопросы форматирования текста с использованием встраиваемых шрифтов.

Форматирование текста с помощью встраиваемого шрифта

Чтобы отформатировать некоторый объект TextField с помощью встраиваемых шрифтов, мы должны сначала присвоить переменной embedFont s данного объекта значение true. Когда это сделано, приложение Flash Player знает, что при отображении содержимого данного текстового поля необходимо использовать встраиваемые шрифты. Это демонстрирует следующий код:

// Создаем объект TextField

var t:TextField = new TextField( );

// Говорим приложению Flash Player использовать встраиваемые шрифты // при отображении содержимого объекта t t. embedFonts = true;

^ I Само по себе присваивание переменной embedFonts значения true не вызывает добавив л п ления никаких шрифтов в SWF-файл. Эта операция просто означает, что текстовое поле ц# должно отображаться с помощью встраиваемых шрифтов, если они доступны.

Переменная embedFonts должна устанавливаться по отдельности для каждого текстового поля, использующего конкретный шрифт, даже если один и тот же шрифт применяется для нескольких полей. Тем не менее, когда несколько полей используют один и тот же встраиваемый шрифт, размер файла не увеличивается — вместе с SWF-файлом загружается всего одна копия шрифта.

Присвоив переменной embedFonts объекта TextField значение true, мы устанавливаем шрифт для текстового поля, используя переменную экземпляра font класса TextFormat, атрибут face тега или свойство fontFamily языка CSS, как было рассмотрено ранее в разд. «Форматирование текстовых полей». Например:

// Устанавливаем шрифт с помощью объекта TextFormat

var format:TextFormat = new TextFormat( );

format. font = «названиеШрифта»;

var t:TextField = new TextField( );

t. embedFonts = true;

t. defaultTextFormat = format;

t. text = «hello world»;

// Устанавливаем шрифт с помощью разметки HTML var t:TextField = new TextField( ); t. embedFonts = true;

t. htmlText = «Hel1 о world»;

// Устанавливаем шрифт с помощью языка CSS var styleSheet:StyleSheet = new StyleSheet( ); var pStyle:Object = new Object( ); pStyle. fontFamily = «названиеШрифта»;

styleSheet. setStylе(«р», pStyle); var t:TextField = new TextField( ); t. embedFonts = true;

t. styleSheet = stylesheet; // Присваиваем значение переменной stylesheet

// до того, как будет присвоено значение // переменной htmlText!

t. htmlText = »

Hello world

«;

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

Для шрифтов, встраиваемых с помощью тега метаданных [Embed], названиеШрифта должно соответствовать строковому значению, указываемому для параметра fontFamily тега [Embed], который применяется для встраивания шрифта.

Для шрифтов, встраиваемых с помощью среды разработки Flash, названиеШрифта должно соответствовать названию, выбранному в списке Font (Шрифт) окна Font Symbol Properties (Свойства символа шрифта), которое используется для встраивания шрифта (см. описание шага 3 в подразд. «Встраивание начертаний шрифта в среде разработки Flash»). Для шрифтов, которые встраиваются при установленном флажке Bitmap text (Растровый текст), названиеШрифта должно соответствовать следующему шаблону:

названиеВСпискеШрифт_размерШрифтар1_кодВариации

В этом шаблоне названиеВСпискеШрифт — название, выбранное в списке Font (Шрифт) окна Font Symbol Properties (Свойства символа шрифта), размерШрифта — размер шрифта, установленный в окне Font Symbol Properties (Свойства символа шрифта), а код-Вариации — одно из значений st (обычный), b (полужирный), i (курсив) или bi (полужирный курсив), соответствующее выбранной вариации шрифта в окне Font Symbol Properties (Свойства символа шрифта).

Описанный шаблон применяется в приложениях Flash CS3 и Flash Player 9, но в будущем он может измениться. С другой стороны, чтобы обеспечить обратную совместимость, гипотетические будущие версии приложения Flash Player будут продолжать поддерживать этот шаблон.

В табл. 27.8 приведено несколько примеров предыдущего шаблона названиеШрифтау который должен применяться при установленном флажке Bitmap text (Растровый текст).

Таблица 27.8. Примеры шаблона, применяемого при установленном флажке Bitmap text (Растровый текст)

Название в списке Font (Шрифт) Вариация шрифта Размер шрифта Пример значения названиеШрифта

Verdana Обычный 12 Verdana_12pt_st

Verdana Полужирный 12 Verdana_12pt_b

Verdana Курсив 12 Verdana_12pt_i

Verdana Полужирный курсив 12 Verdana_12pt_bi

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

Использование полужирного начертания и курсива со встраиваемыми шрифтами. Чтобы использовать вариации шрифта полужирного начертания, курсива или полужирного курсива в объекте TextField, переменной embedFonts которого присвоено значение true, мы должны встроить эти вариации по отдельности. Например, если мы используем вариации шрифта Arial полужирного начертания, курсива и полужирного курсива в объекте TextField, переменной embedFonts которого присвоено значение true, мы должны встроить все три вариации шрифта Arial.

Каждой вариации шрифта, встраиваемой с помощью среды разработки Flash, должно быть присвоено уникальное имя класса в окне Font Symbol Properties (Свойства символа шрифта). Подобным образом, название каждой вариации шрифта, встраиваемой с помощью тега метаданных [Embed], должно соответствовать имени ее собственной переменной (для шрифтов, встраиваемых на уровне переменной) или класса (для шрифтов, встраиваемых на уровне класса). Более того, каждая вариация некоторого шрифта должна указывать одно и то же значение для параметра fontFamily тега [Embed] и использовать соответствующий параметр вариации шрифта (либо fontWeight, либо fontStyle), чтобы определить встраиваемую вариацию.

Например, следующий код встраивает вариации шрифта Verdana полужирного начертания и курсива. Для вариации шрифта полужирного начертания переменной fontFamily присваивается значение «Verdana», а переменной fontStyle — значение » italic». Обратите внимание, что параметр источник для каждой инструкции встраивания обозначает местоположение файла шрифта, содержащего подходящую вариацию шрифта (verdanab. tt f и verdanai. tt f соответственно).

[Embed(source="c:/windows/fonts/verdanab. ttf",

fontFamily="Verdana",

fontWeight="bold")] private var verdanaBold:Class;

[Embed(source="c:/windows/fonts/verdanai. ttf",

fontFamily="Verdana",

fontStyle="italic")] private var verdanaItalic:Class;

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

Листинг 27.14. Встраивание нескольких вариаций шрифта

// Класс, встраивающий шрифт

package { public class FontEmbedder {

// Встраиваем вариацию обычного начертания [Embed(source="c:/wi ndows/fonts/verdana. ttf",

fontFamily="Verdana")] private var verdana:Class;

// Встраиваем вариацию полужирного начертания [Embed(source="c:/windows/fonts/verdanab. ttf",

fontFamily="Verdana",

fontWeight="bold")] private var verdanaboldiClass;

}

// Класс, использующий встроенные шрифты

package { import flash. display.*; import flash. text.*;

public class HelloWorld extends Sprite { // Заставляет скомпилировать класс FontEmbedder и, соответственно, // его шрифты в SWF-файл. FontEmbedder;

public function HelloWorld ( ) { var t:TextField = new TextField( ); t. embedFonts = true;

// Используем две вариации шрифта Verdana (обычного и полужирного // начертания)

t. htmlText = «Hellо World«; addChild(t);

}

}

}

Загрузка шрифтов на этапе выполнения

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