Использование HTML и CSS в Flash MX 2004

CSS	Использование HTML и CSS в Flash MX 2004
меню

Ссылки Гостевая книга

Статьи > Использование HTML и CSS в Flash MX 2004

Форматирование текста с применением HTML

В текстовых полях текст обычно воспроизводится буквально. Следовательно для того чтобы текст выводился без интерпретации метаданных, достаточно воспользоваться свойством TextField.text. В следующем примере теги HTML не интерпретируются и выводятся как обычный текст:

myText.text = "Enter any HTML forraatted text here”;
 trace(myText.text);
 // Результат: Enter any HTML formatted text here

Чтобы содержимое текстового поля интерпретировалось как HTML код, задайте свойству html значение true и присвоите код HTML свойству htmlText, как показано далее (обратите внимание на жирный шрифт в выходных данных):

myText.html = true;
 myText.htmlText = "Enter any HTHL formatted text here";
 traceCmyText.text);
 // Результат: Enter any HTML formatted text here

Строка, назначаемая свойству myText.htmlText, может содержать следующие теги HTML: <а> (с атрибутами href и target), , , (с атрибутами face, color и size), , <li>, , и .

Также поддерживается атрибут class, позволяющий создавать определения классов CSS; кроме того, как будет показано далее, вы можете создавать определения стилей CSS.

Между реализациями тегов в Flash и HTML существуют некоторые различия.

В частности, если заключить блок текста между тегами <а> и </а> (тег гиперссылки) в Flash, стиль текста не изменяется автоматически в соответствии с внешним видом ссылки (подчеркнутый синий текст). Форматирование текста придется задать явно с использованием других тегов. Например, подчеркивай текста ссылки обеспечивается тегом :

myText.html = true;
myText.htmlText = "This is a <a href='somelink'>link</a>";

На рисунки показано, как будет выглядеть полученный текст; слово «link»; действуют как гиперссылка.

Форматирование с использованием CSS

Каскадные таблицы стилей (CSS, Cascade Style Sheets) позволяют задавать атрибуты форматирования при помощи таблиц, хранящихся во внутреннем или внешнем представлении (файлы .css). Изменение таблицы приводит к изменению текстовых стилей во всей презентации. Flash MX 2004 поддерживает атрибут HTML class для определения таблиц стилей, что позволяет использовать форматирование CSS в тексте. Например, можно определить текстовый стиль, обеспечивающий выделение гиперссылок синим цветом. Также следует учесть, что при определении CSS во внешних текстовых файлах необходимо позаботиться о том, чтобы таблица была полностью загружена перед использованием - при загрузке стилевых таблиц для HTML-страниц браузер берет эту заботу на себя. Следующий фрагмент кода корректно загружает внешнюю стилевую таблицу myExternalCSS.css и использует ее для форматирования HTML-кода в текстовом поле Flash:

//Определение нового объекта StyleSheet
 var myStyle = new TextField.StyleSheet();
 // После того как загрузка таблицы будет завершена.
 // Использовать ее для форматирования текста.
 myStyle.onLoad = function() {
 myText.styleSheet = this;
 myText.html = true;
 myText.htmlText = myHTML;
 };
 myStyle.load("myExternalCSS.css");
 myHTML = "Creating an efficient walk cycle";
 myHTML += " Scribble moves very "+
 "quickly in the final work, far too quickly for the viewer to see "+
 "the lack of frames. He also spends a lot of time in the air, thus "+
 "minimizing the slide walk effect.";
 myHTML += "You can see an example of him moving <a href = "+
 "'someURL'>here</a>. ";
 myHTML += "Of course, when two designers get together, easy options "+
 "always go out of the window...(etc).";

Файл myExternalCSS.css представляет собой простой текстовый файл с определениями классов и стилей.

   body {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 12px;
       font-weight: normal;
       text-decoration: none;
       color:#909090;
   }
   .emphasis {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 12px;
       font-weight: normal;
       text-decoration: none;
       color:#404080;
   }
   .title {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 16px;
       font-weight: bold;
       text-decoration: none;
       color:#8080A0;
   }
   a:link {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 10px;
       font-weight: none;
       text-decoration: underline;
       color:#8080A0;
   }
   a:visited {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 10px;
       font-weight: bold;
       text-decoration: underline;
       color:#333355;
   }
   a:active {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 10px;
       font-weight: bold;
       text-decoration: underline;
       color:#444444;
   }
   a:hover {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 10px;
       font-weight: bold;
       text-decoration: underline;
       color:#C08080;
   }

Стоит обратить внимание на ряд обстоятельств:

Flash не поддерживает теги заголовков HTML (<h1>, <h2> и т. д.), однако это ограничение можно обойти посредством определения собственных классов CSS - таких, как класс .title а нашем примере.
Flash не различает единицы определения размеров шрифта рх (пикселы) и pt (пункты). Следовательно, неважно, какая из этих единиц будет использоваться в таблице стилей.
Поддержка CSS в Flash позволяет определять ссылки HTML. Текст, представляющий ссылку, находится в одном из состояний link, visited, active или hover, атрибуты которых определяются в таблице.
Значения свойства color задаются числовыми литералами - например, #444444. Использование имен цветовых констант, поддерживаемых браузерами, не допускаются.
По аналогии с внешним определением CSS, код HTML также можно разместить в отдельном текстовом файле и загрузить его функцией LoadVars.load(). Тем не менее при загрузке внешнего кода HTML необходимо проследить за тем, чтобы текстовые файлы загружались в правильном порядке: сначала загружается файл CSS, затем файл с кодом HTML, а затем в текстовое поле заносятся текстовые данные. В противном случае определения CSS окажутся недоступными или код HTML может оказаться недоступным при его размещении в текстовом поле.

На рисунки приведен результат выполнения предыдущего кода с файлом CSS. Предполагается, что на сцене создано динамическое текстовое ноле с именем myText.

Форматирование текста в Flash c использованием CSS

Скачать пример [6 КБ]