Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Web-дизайн 1 часть / Литература / ActionScript 2.0. Программирование во Flash MX 2004.pdf
Скачиваний:
354
Добавлен:
26.03.2015
Размер:
8.81 Mб
Скачать

щим» CSS. Именно поэтому в данном обзоре мы изучили элементы каскадных таблиц, которые пока не могут распознаваться анализатором Flash-плейера.

13.12.2. Создание объекта таблиц стиля

В ActionScript за CSS-разметку отвечает класс StyleSheet. С учетом тесной связи данного класса и текстовых полей разработчики поместили конструктор StyleSheets() в свойство конструктора TextField. Поэтому синтаксис создания объекта таблиц стиля довольно необычен:

var styles:TextField.StyleSheet=new TextField.StyieSheet();

Формально TextField — это пакет, к которому относится класс StyleSheet. Кстати, данный класс — это единственный предопределенный класс в ActionScript, вложенный в пакет.

После того как объект класса StyleSheet будет создан, ему необходимо передать набор CSSправил, которые он должен хранить. Сделать это можно 3 способами.

Первый способ — создание таблицы стилей непосредственно в коде ActionScript в виде строки. Например, напишем правило, которое будет делать гиперссылки красными, курсивными и подчеркнутыми:

var css_rules:String="A {color:#FF0000; text-size:12px; font-style:italic; text-decoration:underline}";

Затем строка, содержащая таблицу стилей, должна быть передана методу parseCSS() заполняемого объекта класса StyleSheet. Данный метод проводит синтаксический разбор кода CSS. Если правила, хранящиеся в строке, не содержат синтаксических ошибок или не поддерживаемых плейером элементов, то метод parseCSS() возвращает true. Если же по какой-то причине анализ кода CSS осуществить не получилось, будет возвращено false. Посмотрим, удастся ли плейеру «понять» созданный нами стиль для гиперссылок:

trace(styles.parseCSS(css_rulesM)); // Выводит: true

Синтаксический разбор текста с CSS-кодом прошел успешно. Значит, ошибок мы не сделали.

Для того чтобы понять, во что превращаются таблицы стилей после их разбора методом parseCSS(), исследуем внутреннюю структуру объекта styles. Для этого снимем с его свойств защиту от перечисления и просмотрим их при помощи цикла for—in:

ASSetPropFlags(styles, null, null, 1); for (var i in styles) {

trace(i);

// Выводит: _styles _css __proto__ __constructor__

}

 

Итак, у объекта таблиц стиля имеются 2 недокументированных свойства: _styles и _css. Несложно проверить, что данным свойствам соответствуют объекты класса Object. Перечисляя их свойства, обнаруживаем, что они содержат объекты с одинаковым именем — А. Очевидно, что в данных объектах должно храниться описание стиля для текста, помешенного в тег <А>. Проверим это предположение. Для начала исследуем структуру объекта А объекта _css:

ASSetPropFlags(styles["_css"]["А"], null, null, 1}; for (var i in styles["_css"]["A"]) {

trace(i); // Выводит: color textSize fontStyle textDecoration

}

Оказывается, объект стиля свойства _css хранит такие же свойства, какие были прописаны в соответствующем CSS-правиле. Правда, с учетом правил задания идентификаторов ActionScript, из составных имен свойств удаляется тире (например, font-style дает fontStyle), Если же теперь прове-

// Выводит: А В

рить, что представляет собой объект А объекта styles, то окажется, что это банальный объект класса TextFormat, свойства которого установлены исходя из указанных в CSS-правиле характеристик. У класса StyleSheet имеются инструменты, позволяющие взаимодействовать с внутренней структурой объекта таблиц стиля. Проверить, для каких тегов были созданы стили, можно, использовав метод getStyleNames(). Данный метод возвращает массив, содержащий имена всех стилей, хранимых данным объектом класса StyleSheet. Например:

var styles:TextField.StyleSheet = new TextField.StyleSheet(); var css_rules:String = "A {color;#0000FF} В {color:#00FF00)"; styles.parseCSS(css_rules);

trace(styles.getStyleNames());

Исследовать, какие характеристики присущи определенному стилю, позволяет метод getStyle(«name»), где «name» — строка с именем стиля. Этот метод возвращает соответствующий стилю объект из тех, которые хранит свойство _css объекта класса StyleSheet. Например:

var styles:TextField.StyleSheet = new TextField.StyleSheet();

var css rules:String = "A {color:#0000FF; text-size:12px; font-style:italic}"; styles.parseCSS(css_rules);

var st_obj:Object = styles.getStyle{"A"); for (var i in st_obj) {

trace(i+" = "+st_obj[i]); // Выводит: fontStyle = italic

// textSize = 12px color = #0000FF

}

На практике метод getStyle() применяется, если нужно передать стиль от одного объекта класса StyleSheet другому. Как это делается, мы покажем немного ниже.

Зачем мы так основательно исследуем, каким образом объекты класса StyleSheet хранят стили? Очень просто. Информация про особенности работы анализатора CSS Flash-плейера в фирменной документации не приводится. Поэтому не ясно, в каком случае интерпретация кола CSS пройдет гладко, а в каком возникнет сбой. Зная же, как сохраняются результаты работы анализатора, мы можем экспериментально выяснить все интересующие нас особенности. Так, несложно убедиться в том, что:

сбой возникает лишь при самом грубом нарушении синтаксиса (например, если для задания описания в CSS-правиле применяются не фигурные, а квадратные скобки). Если же ошибка небольшая, то CSS-код интерпретируется до того фрагмента, в котором она допущена. Объект стиля при этом будет содержать свойства, описанные до фрагмента с ошибкой;

свойства, прописанные в CSS-правиле, не анализируются на предмет того, поддерживаются ли они плейером. Они просто копируются в объект стиля. Единственная операция, которая над ними проводится, — это удаление из составных имен тире;

значения свойств объекта стиля всегда имеют строковое представление. Следовательно, они представляют собой просто подстроки, вырезанные из строки с CSS-правилом;

селектор в CSS-правиле может быть любым. Это означает, что должна существовать возможность разметки XML-документов.

Как видите, анализатор CSS Flash-плейера довольно примитивен. Можно предполагать, что большинство возможностей CSS, которые мы рассмотрели в первой части данного раздела, им не поддерживаются. Впрочем, это мы проверим немного ниже.

Вторым способом сохранить в объекте StyleSheet стили является использование метода setStyle(). Его синтаксис:

setStyle ("name", style_obj).

Здесь:

name — имя стиля в форме строки. Соответствует селектору при задании CSS-правила в традиционном виде;

style_obj — объект с парами свойство — значение, описывающими характеристики стиля. Свойства имеют такие же имена, как и при создании обычного CSS-правила. Единственное (так как в идентификаторы свойств не может входить тире), оно из составных имен удаляется, а первая буква второго корня в них переводится в верхний регистр (например, text-decоration и textDecoration). Значения свойств задаются по тем же принципам, что и в «настоящем» CSS, но только в форме строк (строго). Иначе было бы невозможно присвоить свойству значение вроде

12рх.

Алгоритм метода setStyle() довольно примитивен. Он просто создает для объекта _css новое свойство с именем «name» и присваивает ему копию объекта, переданного программистом в качестве второго параметра, Это означает, что никакой проверки на корректность заполнения объекта style_obj не проводится.

Метод setStyle() позволяет одновременно создать только один стиль. Поэтому, если стилей нужно инициализировать несколько, лучше это сделать одним из альтернативных методов.

Пример использования метода setStyle():

// Создаем стиль, который будет задаваться тегом <new_style> var styles:TextField.StyleSheet = new TextField.StyleSheet();

var st_obj:Object={textSize:'12px', textDecoration:"underline", color:'#FF0000', 'marginLeft:45'};

styles.setStyle("new_style", st_obj); delete_styles;

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

Чтобы подгрузить таблицу стилей, нужно использовать метод load(url), где url — строка с абсолютным или относительным путем к ess-файлу. По умолчанию файл с таблицей стилей должен располагаться на том же домене, что и swf-фильм. Данное ограничение вытекает из новой модели сетевой безопасности Flash. Как его обойти, мы обсудим в главе 18.

Если таблицы стилей будут успешно импортированы, они автоматически обработаются и результат будет занесен в объект класса StyleSheet, вызвавший метод load.

Действие загрузки не завершается моментально. Более того, заранее неизвестно, когда закончится закачка ess-файла. А это означает, что код, каким-то образом использующий импортируемые стили, не может размещаться непосредственно после строчки метода load(). Его нужно поместить в обработчик события onLoad класса StyleSheet. Данное событие происходит по завершении загрузки css-файла, а также если файл импортирован быть не может (указан неверный путь к нему или сервер не ответил). Об успешности закачки можно судить по значению передаваемого обработчику onLoad параметра: true — стили загрузились, false — попытка импорта оказалась безуспешной.

Пример использования внешней таблицы стилей:

//Наберите в текстовом редакторе следующий код и сохраните файл,

//как hyperlink.css в той же директории, в которой располагается

//использующий его фильм

A:link {text-decoration:underline; color:#0000FF; font-style:italic-text-size:12}

A:hover {text-decoration:underline; color:#AA5500; font-style:italic; text-size:14} A:active {text-decoration:underline; color:#FF0000; font-weight:bold; text-size:12} // Код самого фильма будет следующим:

var hyp_st:TextField.StyleSheet = new TextField.StyleSheet(); hyp_st.load("hyperlink.ess"); // Подгружаем таблицу стилей

//Если стили успешно загрузятся, создаем текстовое поле с гиперссылкой и

//применяем их по отношению к нему. Иначе выводим сообщение об ошибке. hyp_st.onLoad = function(result:Boolean):Void {

if (result) {

this.createTextField("pole", 0, 200, 200, 0, 0);

pole.border = pole.autoSize=true;

pole.stylesheet = hyp_st; // Связываем поле и объект стилей pole.text = "<A HREF='http://www.piter.com' TARGET='_blank'> Посетите наш

сайт </А>"; } else {

trace("Таблица стилей не может быть загружена");

}

};

Внешние стили подгружаются в конкретный объект класса StyleSheet. Зачастую же их должны использовать несколько объектов StyleSheet. Скопировать один или несколько стилей из одного объекта StyleSheet в другой можно, используя метод getStyle(). Дело в том, что возвращаемый данным методом объект полностью соответствует тому, который нужно передать методу setStyle(), чтобы записать данный стиль в новый объект. Для примера приведем функцию, создающую копию существующего объекта класса StyleSheet:

function copyStyleSheet(st_obj:TextField.StyleSheet):TextField.StyleSheet { var new_st_obj:TextField.StyleSheet = new TextField.StyleSheet();

var st_arr:Array = st_obj.getStyleNames(); for (var i = 0; i<st_arr.length; i++) {

new_st_obj.setStyle(st_arr[i], st_obj.getStyle(st_arr[i]));

}

return new_st_obj;

}

Очистить объект таблиц стиля от старого содержимого можно, используя метод clear():

hyp_st.clear();

//

Пробуем зачистить объект класса StyleSheet

trace(hyp_st.getStyleNames());

//

В Output ничего не отображается

Если снять защиту с прототипа конструктора StyleSheet(), можно обнаружить, что помимо описанных данный класс имеет довольно значительное количество недокументированных возможностей. А это означает, что вполне можно рассчитывать на расширение возможностей по работе с CSS при очередном обновлении Flash.

13.12.3. Применение объекта стиля к текстовому полю

Чтобы применить стили, сохраненные в объекте класса StyleSheet, к тексту поля, его нужно присвоить специальному свойству styleSheet класса TextField. По умолчанию данное свойство не определено. Например:

// Создаем стиль, который будет делать текст зеленым this.createTextField("pole", 0, 200, 200, 100, 30);

var styie:TextField.Stylesheet = new TextField.StyleSheet(); style.parseCSS("GREEN {color:#00FF00}");

pole.styleSheet = style;

pole.text = "<GREEN>Зеленый текст</GREEN>";

Если полю ставится в соответствие объект класса StyleSheet, появляется ряд особенностей, обусловленных специфичностью CSS-разметки. Перечислим их:

Стирается всякое различие между свойством htmlText и свойством text. Хотя форматирование

Соседние файлы в папке Литература