Новые HTML тэги во Flash / Flex при помощи стилей CSS

· На чтение уйдёт 3 минут · (579 слов)

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

Полезное