Как известно, поддержка HTML тэгов во Flash весьма ограничена. Однако, уже довольно давно появилась возможность определять "свои" тэги. Вчера срочно была нужен материал на эту тему, и я потратил сутки на его поиск. Если сэкономлю кому-то сутки, будет отлично :-) - черканите пару строк в комменты. Сам материал про кастомные HTML теги, собственно, в продолжении обзора.
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" initialize="init()" xmlns:ns1="visual.gui.*"
xmlns:containers="flexlib.containers.*"
xmlns:battlefield="visual.gui.battlefield.*">
<mx:Script>
<![CDATA[
[geshi lang=Actionscript]
private var h1Style: String = "h1 { font-size: 120; font-weight: bold; text-align: center; letter-spacing: 20px; }\n";
private var blockquoteStyle: String = "blockquote { font-style: italic; margin-left: 20px; }\n";
private function cc(e: Event): void {
textArea.htmlText = "
Заголовок
\n
Цитата ДлиннаяЦитата ОченьДлиннаяЦитата ОченьПреоченьДлиннаяЦитата ОченьПреоченьСверхдлиннаяЦитата ОченьОченьПреоченьСверхдлиннаяЦитата ОченьОченьПреоченьСверхдлиннаяЦитата - это всего лишь Цитата ДлиннаяЦитата ОченьДлиннаяЦитата ОченьПреоченьДлиннаяЦитата ОченьПреоченьСверхдлиннаяЦитата ОченьОченьПреоченьСверхдлиннаяЦитата ОченьОченьПреоченьСверхдлиннаяЦитата
";
}
private function b1click(e: Event): void {
// Создаем новый StyleSheet
var styleSheet: StyleSheet = new StyleSheet();
// Парсим наши стили (можно использовать и загружаемые через URLLoader
// CSS файлы.
styleSheet.parseCSS(h1Style + blockquoteStyle);
// Назначаем stylesheet нашей TextArea
textArea.styleSheet = styleSheet;
}
private function b2click(e: Event): void {
// Создаем новый StyleSheet
var styleSheet: StyleSheet = new StyleSheet();
// Задаем стиль для заголовка H1
var h1StyleObject: Object = { fontSize: 120, fontWeight: "bold", textAlign: "center", letterSpacing: "20px" };
// Задаем стиль для blockquote (синтаксис другой, но смысл тот же)
var blockquoteStyleObject: Object = new Object();
blockquoteStyleObject.fontStyle = FontStyle.ITALIC;
blockquoteStyleObject.marginLeft = '20px';
// Записываем стили в stylesheet
styleSheet.setStyle("h1", h1StyleObject);
styleSheet.setStyle("blockquote", blockquoteStyleObject);
// Назначаем stylesheet нашей TextArea
textArea.styleSheet = styleSheet;
}
[/geshi]
]]>
</mx:Script>
<mx:Panel title="Кнопочки" width="100%" layout="horizontal">
<mx:Button id="b1" click="b1click(event)" label="Button 1" width="50%"/>
<mx:Button id="b2" click="b2click(event)" label="Button 2" width="50%"/>
</mx:Panel>
<mx:TextArea id="textArea" creationComplete="cc(event)" width="100%" height="100%"/>
</mx:Application>
В приведенном выше примере, мы задаем 2 стиля: для тэгов <blockquote> и <h1>. Заголовок пишется жирным шрифтом размера 120%, по центру, с увеличенным межбуквенным интервалом. Цитата пишется с отступом от левого края 20 пикселей наклонным шрифтом обычного размера.
Согласно справке, могут использоваться следующие CSS-атрибуты:
Свойство CSS |
Свойство ActionScript |
Как пользоваться, поддерживаемые значения |
|---|
color |
color |
Поддерживаются только шестнадцатеричные (16-ричные) цвета, невозможно использовать имена цветов, например blue. Используется следующий формат: #FF0000. |
display |
display |
Поддерживаются значения: inline, block, и
none. |
font-family |
fontFamily |
Список шрифтов (через запятую), наиболее подходящие шрифты указывать в самом начале. Можно указывать любые названия шрифтов. Предопределенные замены для шрифтов: mono преобразуется в _typewriter,
sans-serif преобразуется в _sans, а
serif становится _serif. |
font-size |
fontSize |
Используется лишь целое значение. Единица измерения (px, pt, %) игнорируется. |
font-style |
fontStyle |
Поддерживаются значения: normal и italic. |
font-weight |
fontWeight |
Поддерживаются значения: normal или bold. |
kerning |
kerning |
Поддерживаются значения: true и false. Кернинг поддерживается только для встроенных шрифтов. Некоторые шрифты, например Courier New, не поддерживают кернинг. Это свойство поддерживается лишь в SWF файлах, созданных в Windows. Но кернинг в созданном в Windows файле, будет работать и на других системах. |
leading |
leading |
Количество пикселей между строчками текста. Отрицательное значение уменьшает межстрочное расстояние. Используется только целочисленное значение, единица измерения (pt, px, %) игнорируется. |
letter-spacing |
letterSpacing |
Количество пикселей между знаками. Отрицательное значение уменьшает межбуквенный интервал. Используется только целочисленное значение, единица измерения (pt, px, %) игнорируется. |
margin-left |
marginLeft |
Используется только целочисленное значение, единица измерения (pt, px, %) игнорируется. |
margin-right |
marginRight |
Используется только целочисленное значение, единица измерения (pt, px, %) игнорируется. |
text-align |
textAlign |
Поддерживаются значения: left, center,
right, и justify. |
text-decoration |
textDecoration |
Поддерживаются значения: none и
underline. |
text-indent |
textIndent |
Используется только целочисленное значение, единица измерения (pt, px, %) игнорируется. | |
Обратите внимание: Если вы собираетесь использовать встроенный шрифт в CSS, следует использовать имя, присвоенное шрифту Flash'ем.
Ссылки по теме:
использование CSS (flash-mx.ru)
CSS, ActionScript 3.0 и прочий MVC (flasher.ru)
И на английском:
Loading External CSS StyleSheets in Flash9 / AS3 / CS3
htmlText & Embedded Fonts (actionscript.org)