Как известно, поддержка 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)