3. Используйте метод экземпляра setStyle ( ) класса Stylesheet, чтобы создать одно или несколько правил на основании блоков объявления, созданных на шаге 1.

4. Используйте переменную экземпляра stylesheet класса TextField, чтобы зарегистрировать объект Stylesheet в желаемом объекте TextField.

5. Присвойте желаемое содержимое HTML или XML переменной htmlText объекта TextField.

Всегда регистрируйте объект Stylesheet (шаг 4) до того, как будет присвоено содержимое HTML или XML (шаг 5). В противном случае таблица стилей не будет применена к этому

содержимому

Применим перечисленные шаги на практике. Наша цель — отформатировать весь текст в текстовом поле, используя шрифт Arial размером 20 пунктов полужирного начертания (как мы делали это ранее с помощью класса TextFormat и разметки HTML). Как и раньше, форматируемым текстом является следующий простой фрагмент на языке HTML:

ActionScript is fun!

В нашей таблице стилей мы определяем правило, которое говорит приложению Flash Player отображать содержимое всех тегов с помощью шрифта Arial размером 20 пунктов полужирного начертания. Блок объявления для нашего правила является простым базовым объектом с динамическими переменными экземпляра, имена которых соответствуют свойствам стиля CSS, а значения переменных задаются соответствующими значениями стиля CSS. Вот этот код:

// Создаем объект, который будет служить блоком объявления var pDeclarationBlock:Object = new 0bject( ):

// Присваиваем значения свойствам стиля pDeclarati onBlock. fontFami1 у = «Arial» pDeclarationBl ock. fontSize = «20″: pDeclarationBlock. fontWeight = «bold»;

В приведенном коде обратите внимание на то, что при создании таблиц стилей программным путем формат имен свойств CSS слегка изменяется: дефисы удаляются, а символы, которые следуют за дефисами, записываются в верхнем регистре. Например, свойство font-family превращается в свойство f ontFamily.

Теперь, когда наш блок объявления готов, мы создаем объект Stylesheet. Вот этот код:

var stylesheet:Stylesheet = new StyleSheet( );

Чтобы создать правило для тега, мы используем метод экземпляра se t S t yle ( ) класса Stylesheet. Метод setStyle ( ) создает новое правило стиля на основе

двух параметров: имени селектора (тип String) и блока объявления (тип Ob j ect), как показано в следующем обобщенном коде:

oObeKTStyleSheet. setStyleCселектор», блокОбъявления);

Соответственно, вот код, создающий правило для тега :

stylesheet. setStylе(«р», pDeclarati onBlock);

Наша таблица стилей готова. Теперь мы создадим текстовое поле, к которому будет применено форматирование. Следующий код создает текстовое поле и присваивает наш объект Stylesheet переменной stylesheet этого поля:

var t:TextField = new TextFieldC ):

t. width = 200

t. stylesheet = stylesheet:

Наконец, мы присваиваем текст, который должен быть отформатирован, переменной htmlText:

t. htmlText = »

ActionScript is fun!

«;

В листинге 27.7 представлен весь код целиком для нашего текстового поля, к которому применяется форматирование.

Листинг 27.7. Форматирование текста с помощью таблицы стилей, создаваемой программным путем

// Создаем блок объявления

var pDeclarationBlock:Object = new Object( );

pDeclarationBlock. fontFamily = «Arial»

pDeclarationBlock. fontSize = «20″:

pDeclarationBlock. fontWeight = «bold»;

// Создаем таблицу стилей

var stylesheet:Stylesheet = new Stylesheet( );

// Создаем правило

styleSheet. setStyleCp», pDecl arati onBl ock);

// Создаем текстовое поле

var t:TextField = new TextField( );

t. width = 200

// Присваиваем таблицу стилей t. stylesheet = stylesheet;

// Присваиваем HTML-код, который должен быть отформатирован t. htmlText = »

ActionScript is fun!

«;

Результат выполнения кода из листинга 27.7 идентичен результату, который был проиллюстрирован ранее на рис. 27.10 и 27.11.

Селекторы класса

Чтобы применить стиль не ко всем абзацам сразу, а к одному определенному подмножеству абзацев, мы используем селектор класса CSS. Предположим, что мы

хотим акцентировать внимание пользователя на важных примечаниях в документе. Мы помещаем примечания в теги и присваиваем атрибуту class этих тегов собственное значение specialnote, как показано в следующем коде:

Set stylesheet before html Text!

Затем мы создаем правило для этого класса specialnote, используя селектор класса, как показано в следующем коде:

styl eSheet. setStyl е(«. special note», speci al noteDecl arati onBl ock):

Как и в языке CSS, селектор класса в языке ActionScript состоит из точки, за которой указывается желаемое значение атрибута class (в нашем случае specialnote).

В листинге 27.8 представлен переработанный пример нашей предыдущей таблицы стилей, чтобы продемонстрировать использование селекторов класса CSS в языке ActionScript.

Листинг 27.8. Форматирование, применяемое к определенному классу абзаца

var specialnoteDeclarationBlock:Object = new 0bject( ): specialnoteDecl arationBlock. fontFamily = «Arial» specialnoteDeclarationBlock. fontSize = «20″: specialnoteDeclarationBlock. fontWeight = «bold»:

var stylesheet:Stylesheet = new StyleSheet( );

styleSheet. setStyle(«.speci alnote», speci alnoteDeclarati onBlock):

// Создаем текстовое поле

var t:TextField = new TextField( ):

t. width = 300:

t. wordwrap = true:

t. multiline = true;

t. styleSheet = stylesheet;

t. htmlText = »

Always remember…

«

+ »

Set styleSheet before html Text!

«

+ »

Otherwise, the stylesheet will not be applied.

«;

Результат выполнения кода из листинга 27.8 продемонстрирован на рис. 27.12. Always remember…

Set stylesheet before html Text!

Otherwise, the stylesheet will not be applied. Рис. 27.12. Форматирование, примененное к определенному классу абзаца

Форматирование тегов XML с помощью стилей CSS

Чтобы применить стиль к определенному фрагменту содержимого, мы можем создать для этого фрагмента собственный XML-тег. Например, вместо того, чтобы описывать особое примечание в виде класса абзаца (как это было сделано в предыдущем разделе), мы могли бы создать совершенно новый XML-тег, как показано в следующем коде:

Set stylesheet before htmlText!

Чтобы применить правило стиля к тегу, мы используем обычный селектор типа (без точки в начале), как показано в следующем коде:

styleSheet. setStylе(«specialnote», specialnoteDeclarationBlock);

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

Листинг 27.9. Форматирование содержимого XML с помощью таблицы стилей

var specialnoteDeclarationBlock:Object = new Object( ); specialnoteDeclarationBlock. fontFamily = «Arial» specialnoteDeclarationBlock. fontSize = «20″: specialnoteDeclarationBlock. fontWeight = «bold»: specialnoteDeclarationBlock. display = «block»:

var styleSheet:StyleSheet = new StyleSheet( ):

styleSheet. setStyle(«speci alnote», speci alnoteDecla rati onBlock);

var t:TextField = new TextField( ):

t. width = 300:

t. wordwrap = true:

t. multiline = true:

t. styleSheet = styleSheet:

t. htmlText = »

Always remember…

«

+ «Set stylesheet before htmlText!»

+ »

Otherwise, the stylesheet will not be applied.

«:

Результат выполнения кода из листинга 27.9 идентичен результату, который был проиллюстрирован на рис. 27.12.

Форматирование текста с помощью загружаемой извне таблицы стилей

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

1. Создайте таблицу стилей во внешнем CSS-файле.

2. Используйте класс URLLoader, чтобы загрузить этот CSS-файл.

3. После завершения загрузки CSS-файла создайте объект Stylesheet.

4. Используйте метод экземпляра parseCSS ( ) класса Stylesheet, чтобы импортировать правила из CSS-файла в объект Stylesheet.

5. Используйте переменную экземпляра stylesheet класса TextField, чтобы зарегистрировать объект Stylesheet в желаемом объекте TextField.

6. Присвойте требуемое содержимое HTML или XML переменной htmlText объекта TextField.

Применим перечисленные шаги на примере. Наша цель, как и раньше, — создать приложение, которое форматирует весь текст в поле, используя шрифт Arial разме-

ром 20 пунктов полужирного начертания. Как и раньше, форматируемым текстом является следующий простой фрагмент на языке HTML:

ActionScript is fun!

Сначала мы добавляем следующее CSS-правило в текстовый файл с именем styles. ess:

Р {

font-family: Arial; font-size: 20px; font-weight: bold:

}

Далее мы создаем основной класс нашего приложения StyleSheetLoadingDemo. Он использует объект URLLoader для загрузки файла styles. ess, как показано в следующем коде:

package { import flash. display.*: import flash. text.*; import flash. events.*; import flash. net.*;

public class StyleSheetLoadingDemo extends Sprite { public function StyleSheetLoadingDemo ( ) { // Загружаем файл styles. ess var urlLoader:URLLoader = new URLLoader( ); urlLoader. addEventListener(Event. COMPLETE, completeListener); urlLoader.1oad(new URLRequest(«styles. ess»));

}

private function completeListener (e:Event):void { // Код этого метода выполняется после заверения загрузки // файла styles. css

}

}

}

Когда загрузка файла styles. ess будет завершена, произойдет вызов метода completeListener ( ). Внутри этого метода мы создаем новый объект Stylesheet и импортируем в него правила из файла styles. ess, как показано в следующем коде:

private function completeListener (e:Event):void { var styleSheet:StyleSheet = new StyleSheet( ); styleSheet. pa rseCSS(e. ta rget. data);

}

Как только правила будут импортированы в объект Stylesheet, мы создаем наш объект TextField, регистрируем таблицу стилей и затем присваиваем форматируемый текст, как показано в следующем коде:

t. stylesheet = stylesheet;

t. htmlText = »

ActionScript is fun!

«;

В листинге 27.10 показан весь код целиком для класса StyleSheetLoadingDemo.

Листинг 27.10. Форматирование текста с помощью внешней таблицы стилей

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

public class StyleSheetLoadingDemo extends Sprite { public function StyleSheetLoadingDemo ( ) { var urlLoader:URLLoader = new URLLoader( ); urlLoader. addEventLi stener(Event. COMPLETE, completeLi stener); url Loader. 1 oad(new URLRequest(«styles. ess»));

}

private function completeListener (e:Event):void { var stylesheet. Stylesheet = new StyleSheet( ); styleSheet. pa rseCSS(e. ta rget. data);

var t. TextField = new TextField( );

t. width = 200;

t. stylesheet = stylesheet;

t. htmlText = »

ActionScript is fun!

«;

addChild(t);

}

}

}

Результат выполнения кода из листинга 27.10 идентичен результату, который был проиллюстрирован ранее на рис. 27.10 и 27.11.

Мы рассмотрели методики форматирования текста в языке 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 (Растровый текст) и затем укажите размер шрифта.