Для форматирования текстовых полей в флеш-приложениях можно использовать CSS-стили. Правда, набор доступных в ActionScript свойств CSS очень скромен, а их синтаксис имеет свои особенности.
Так, в Flash имена свойств CSS не содержат символа дефис ("-"). Вместо "-" используется так называемая «верблюжья нотация».
CamelCase (рус. верблюжий регистр, горбатый регистр, стиль верблюда) - это стиль написания составных слов, при котором несколько слов пишутся слитно без пробелов, при этом каждое слово пишется с заглавной буквы. Стиль получил название CamelCase, поскольку заглавные буквы внутри слова напоминают горбы верблюда (англ. Camel)... [Википедия]
Например, css-свойство font-family в ActionScript 3.0 записывается как fontFamily.
Кроме этого, есть отличия и в доступных значениях css-свойств. Во-первых, этих значений, как правило, в ActionScript доступно меньше, чем при форматировании HTML-страниц. Во-вторых, может отличаться и синтаксис этих значений. Поэтому надо быть внимательными при их написании.
Итак, перечислим CSS-свойства и их значения, которые мы может использовать для форматирования текстовых полей flash-проектов:
1.) color - определяет цвет текста. В качестве значения принимает шестнадцатеричный код цвета. Но этот шестнадцатеричный код цвета надо записывать не через привычный префикс "0x", а так, как это принято именно в CSS (через префикс "#"). То есть правильной записью чёрного цвета будет не "0x000000", а "#000000".
2.) display - отвечает за работу со строчными и блочными html-элементами. Может принимать три значения:
- inline - превращает блочный элемент в строчный;
- block - превращает строчный элемент в блочный;
- none - делает элемент невидимым.
3.) fontFamily - с помощью этого свойства можно задать шрифт или семейство шрифтов.
4.) fontSize - данное свойство задаёт размер шрифта в пикселях (!). Указывать единицы измерения размера шрифта (как это делается в CSS) не надо, так как значение может быть только в пикселях.
Пример:
5.) fontStyle - отвечает за стиль шрифта и может принимать одно из двух значений:
- normal - обычный шрифт;
- italic - курсивный шрифт.
6.) fontWeight - ещё одно свойство для изменения стиля шрифта. Может принимать одно из следующих значений:
- normal - обычный шрифт;
- bold - полужирный шрифт.
Пример:
7.) kerning - включает/отключает межбуквенный интервал и, соответственно, может принимать значения true или false. Может использоваться только для встроенных шрифтов и имеет другие ограничения.
8.) leading - определяет межстрочный интервал в пикселях. В качестве значения указывается целое число (можно и отрицательное, но тогда строчки будут "наезжать" друг на дружку).
Пример:
9.) letterSpacing - задаёт интервал между словами. В качестве значения принимает целые числа. Если значение положительное, то слова отдаляются друг от друга, а если отрицательное - "наезжают" друг на дружку. Наглядно это показано в следующем примере...
Пример:
10 - 11.) marginLeft и marginRight - задают ширину в пикселях (естественно, что ширина является положительным числом) для левого и правого полей элемента.
Пример:
12.) textAlign - отвечает за выравнивание текста и может принимать следующие значения:
- left - выравнивание текста по левому краю (стоит по умолчанию);
- center - выравнивание по центру;
- right - выравнивание по правому краю;
- justify - выравнивание по всей ширине текстового поля.
Пример:
13.) textDecoration - позволяет сделать текст подчёркнутым или убрать подчёркивание. Соответственно, принимает одно из двух значений: "underline" или "none".
Пример:
14.) textIndent - устанавливает отступ в пикселях от левого поля до первого символа в абзаце ("красная строка").
Пример:
Вот и всё, что нам доступно. Прямо скажем, не очень и много.
В ActionScript существует два способа подключения стилей:
I.) Загрузка внешней таблицы стилей.
Это особый случай и пока рассматриваться не будет.
II.) Создание внутренних таблиц стилей.
То есть мы один раз создаём в нашем проекте таблицу css-стилей, а затем эту таблицу подключаем к нашим текстовым полям. Для всего вышеперечисленного нам потребуется класс StyleSheet. Получается весьма удобно, особенно если у вас много текстовых полей.
Код ActionScript 3.0:
/*
импортируем классы
*/
import flash.text.TextField;
import flash.text.StyleSheet;
/*
создаём таблицу стилей
*/
var css:StyleSheet = new StyleSheet();
css.setStyle("p",{fontWeight:"bold"});
css.setStyle(".red",{color:"#ff0000",letterSpacing:4});
/*
создаём текстовое поле
*/
var tf:TextField = new TextField();
addChild(tf);
tf.width = 450;
tf.height = 300;
tf.x = 50;
tf.y = 50;
tf.multiline = true;
tf.wordWrap = true;
/*
применяем таблицу стилей к данному текстовому полю
*/
tf.styleSheet = css;
/*
присваиваем нашему текстовому полю некоторый текст, который и надо отформатировать
*/
tf.htmlText = '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';
tf.htmlText += '<p class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';
Результат:
В данном примере мы для всех параграфов (тег "p") установили полужирный текст. А для элементов с классом "red" мы установили красный цвет текста и увеличили промежуток между словами. Но учтите, что далеко не все html-теги в AS 3.0 имеют атрибут class (данный атрибут присутствует у тегов "p" и "span").
То же самое, но уже на языке ActionScript 2.0 будет выглядеть примерно следующим образом...
Код ActionScript 2.0:
/*
импортируем класс
*/
import TextField.StyleSheet;
/*
создаём таблицу стилей
*/
var css:StyleSheet = new StyleSheet();
css.setStyle("p",{fontWeight:"bold"});
css.setStyle(".red",{color:"#ff0000",letterSpacing:4});
/*
создаём текстовое поле
*/
this.createTextField("tf",0,50,50,450,300);
tf.multiline = true;
tf.wordWrap = true;
tf.html = true;
/*
применяем таблицу стилей к данному текстовому полю
*/
tf.styleSheet = css;
/*
присваиваем нашему текстовому полю некоторый текст, который и надо отформатировать
*/
tf.htmlText = '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';
tf.htmlText += '<p class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';
Как видите, всё довольно просто. А у меня на этом всё :-)
Рейтинг поста: 
