Загрузка внешней таблицы стилей в flash-приложение

Продолжаю тему, начатую в предыдущей статье («CSS-стили для текстовых полей flash-приложений»). Сегодня рассмотрим загрузку внешних CSS-стилей.

Первым делом, нам понадобится сама внешняя таблица стилей, то есть файл с расширением .css, в котором описываются css-правила. Например, такой...

Код CSS:



/*
CSS Document
*/
p {
	font-weight:bold;
}
.red {
	color:#ff0000;
	letter-spacing:4px;
}

Нам надо создать текстовый файл, вставить в него приведённый выше код и сохранить как «style.css». Проделать это можно в любом текстовом редакторе. Но сохранять внешнюю таблицу стилей для Flash стоит в кодировке UTF-8.

Обратите внимание на синтаксис внешних таблиц стилей для флеш-приложений. CSS-свойства и их значения пишутся так, как это принято в CSS (!). То есть, составные свойства пишутся через дефис, а для числовых значений указываются единицы измерения (px - измерение в пикселях). Так как сами свойства CSS я уже подробно описывал в предыдущем посте, то повторяться не буду. Но приведу таблицу, в которой показывается, как одни и те же свойства называются и в ActionScript, и в CSS. А различия для некоторых свойств имеются.

Таблица:

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

Код ActionScript 3.0:



/*
импортируем классы
*/
import flash.text.TextField;
import flash.text.StyleSheet;
import flash.net.URLLoader;
/*
загружаем в флеш-проект внешнюю таблицу стилей style.css
*/
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("style.css"));
/*
функция, которая запускается в случае успешного окончания загрузки внешней таблицы стилей (файла style.css)
*/
function onComplete(event:Event):void
{
	/*
	нам больше не надо отслеживать факт загрузки внешней таблицы стилей и мы "убиваем" слушателя событий
	*/
	loader.removeEventListener(Event.COMPLETE, onComplete);
	/*
	создаём таблицу стилей на основе парсинга ранее загруженного файла style.css
	*/
	var css:StyleSheet = new StyleSheet();
	css.parseCSS(loader.data);
	/*
	создаём текстовое поле
	*/
	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>';
}

Результат:

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

Использовать внешние таблицы стилей можно и в ActionScript 2.0 (начиная с Flash Player 7). Приведу простой пример (таблицу стилей буду использовать прежнюю - style.css).

Код ActionScript 2.0:



/*
импортируем класс
*/
import TextField.StyleSheet;
/*
создаём объект класса StyleSheet и загружаем внешнюю таблицу стилей style.css
*/
var css:StyleSheet = new StyleSheet();
css.load("style.css");
/*
функция, которая запускается после попытки загрузить внешнюю таблицу стилей
*/
css.onLoad = function(success)
{
	if (success)
	{
		/*
		создаём текстовое поле и присваиваем ему загруженные css-правила
		*/
		_root.createTextField("tf",0,50,50,450,300);
		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>';
	}else{
		trace("Внешнюю таблицу стилей загрузить не удалось!")
	}
};

Результат:

Скачать исходники к данному уроку можно здесь (под Adobe Flash 5.5).

А у меня пока всё.

Автор: admin

Дата добавления: 2012-03-16

Рейтинг поста: 4