В этом уроке я расскажу о шагах, необходимых для установки и использования компонента TextArea в качестве альтернативы родному классу FlashField в Flash, и покажу, как обнаруживать события переворачивания / выведения мыши по гиперссылкам. Я также расскажу о том, как вы можете вызывать пользовательские функции и передавать различные типы данных в качестве аргументов.
Фон
Родной класс TextField был первым, кто поддерживал текстовые сценарии в проектах Flash. С TextField вы можете поддерживать динамический и статический текст, а также тип ввода для обеспечения интерактивности пользователя. Он также поддерживал (очень ограниченный) выбор HTML-тегов для стилизации ваших сценариев, но при сравнении этой узкой доступности поддержки HTML в TextField с тем, что возможно при использовании обычных файлов HTML в браузерах, разработчики Flash чувствовали крайнюю нехватку гибкости, когда иметь дело с текстом.
В 2009 году, когда был представлен TLFTextField, разработчики надеялись увидеть некоторые решения — но они не появились. Сегодня с классом TextArea вы можете делать то, что вы всегда хотели с вашими текстовыми блоками. Функциональные возможности, такие как обнаружение переворачивания / разворота ссылок href, вызов пользовательских функций из текстовых блоков, создание ссылок привязки, загрузка пользовательских созданных тегов, таких как видеоплееры, слайд-шоу и кнопки: все это теперь возможно с TextArea.
Окончательный результат предварительного просмотра
Следующая простая демонстрация без излишеств представит, как пользовательские функции вызываются по гиперссылкам. Вот что вы построите в следующие 30 минут:
Шаг 1: настройка среды
TextArea может использоваться в любой среде IDE, которая компилирует AS3 — например, Flash Builder, версии CS pro и FlashDevelop — что означает, что он будет работать на платформе Flash (в веб-проектах только с Flex, AIR и AS3). У разных IDE свой похожий, но уникальный подход к компиляции проекта, и из-за этого разнообразия иногда сложно, особенно для начинающих, работать с учебниками AS3, потому что автор может предпочесть Flash Builder, в то время как ученик привык работать с CS IDE.
Чтобы решить эту проблему, я попытаюсь объяснить использование TextArea независимо от IDE. Итак, первый шаг — настроить вашу среду. Независимо от того, какую IDE вы используете, просто откройте его и создайте новый проект AS3, а затем сохраните его где-нибудь на своем компьютере.
Создайте класс документа , назовите его Main.as и добавьте вызов трассировки для вывода Hello World .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
package
{
import flash.display.MovieClip
public class Main extends MovieClip
{
public function Main():void
{
trace(«Hello World»)
}
}
}
|
Шаг 2: Загрузите TextArea
TextArea можно загрузить и использовать бесплатно, но обязательно ознакомьтесь с лицензионными соглашениями здесь . Зайдите на doitflash.com и найдите кнопку загрузки в нижней части домашней страницы, чтобы загрузить классы TextArea.
Извлеките загруженный zip-файл TextArea.zip на свой компьютер, перейдите в папку TextArea / Src и скопируйте папку com, затем в тот же каталог, что и класс документа Main.as.
Скопировав папку com в ту папку, где находится ваш класс документа проекта, вы позволяете IDE находить классы TextArea только в этом конкретном проекте. В качестве альтернативы вы можете скопировать классы в глобальный путь к классу, чтобы он всегда был доступен для всех ваших проектов — чтобы узнать больше, прочитайте раздел Как использовать внешнюю библиотеку в ваших проектах Flash .
Шаг 3: Инициализация TextArea
После загрузки и установки TextArea пришло время его инициализировать. Сначала вам нужно импортировать необходимые классы в класс Main.
|
1
|
import com.doitflash.text.TextArea;
|
Затем удалите функцию трассировки hello world и введите следующее.
|
1
2
3
4
5
|
var _textArea:TextArea = new TextArea();
_textArea.wordWrap= true;
_textArea.multiline = true;
_textArea.htmlText = «Initialize TextArea just like you used to initialize TextField.»;
this.addChild(_textArea);
|
Протестируйте свой фильм, и на этот раз вместо вывода hello world вы увидите текстовое поле (но не TextField !), Созданное для вас:
Как видите, TextArea работает точно так же, как и собственный класс TextField. Все различные настройки, которые вы можете применить к TextField, также применимы к TextArea; в основном это расширение для TextField, поэтому оно будет делать все, что делает TextField, и даже больше. Я расскажу об этих дополнительных функциях в следующих разделах.
Шаг 4: подача TextArea с помощью файла XML
Чтобы сделать это руководство максимально информативным и сделать его пригодным для использования в реальных условиях, давайте попробуем снабдить экземпляр TextArea данными из внешнего XML-файла.
Этот процесс снова будет похож на загрузку данных XML в TextField. Сначала создайте свой XML-файл и поместите его туда, где у вас есть опубликованный SWF-файл из предыдущих шагов. Сделайте так, чтобы XML выглядел, как показано ниже, и сохраните его как «data.xml»:
|
1
2
3
4
5
6
7
8
9
|
<?xml version=»1.0″ encoding=»UTF-8″?>
<data>
<![CDATA[
<p align=»left»><font face=»Tahoma» size=»13″ color=»#333333″>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.
</font></p>
]]>
</data>
|
(Так что XML содержит HTML в разделе CDATA.)
Теперь вернитесь к вашему Main.as , который должен выглядеть следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
package
{
import flash.display.MovieClip
import com.doitflash.text.TextArea;
public class Main extends MovieClip
{
public function Main():void
{
var _textArea:TextArea = new TextArea();
_textArea.wordWrap = true;
_textArea.multiline = true;
_textArea.htmlText = «Initialize TextArea just like you used to initialize TextField.»;
this.addChild(_textArea);
}
}
}
|
Добавьте необходимый импорт для процесса загрузки XML.
|
1
2
3
|
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
|
Затем замените всю функцию Main () этим.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
public function Main():void
{
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onXmlLoaded);
loader.load(new URLRequest(«data.xml»));
function onXmlLoaded(e:Event):void
{
var xml:XML = new XML(e.currentTarget.data);
var _textArea:TextArea = new TextArea();
_textArea.wordWrap = true;
_textArea.multiline = true;
_textArea.width = 400;
_textArea.height = 200;
_textArea.condenseWhite = true;
_textArea.htmlText = xml.text();
addChild(_textArea);
}
}
|
Приведенный выше код загружает data.xml — нет никакой разницы с тем, как вы бы сделали это с TextField.
Шаг 5: Обнаружение ролловера / развертывания мыши
Чтобы использовать определенные функции TextArea, вам нужно указать несколько дополнительных настроек при его инициализации.
Первое и самое важное, что следует помнить при использовании TextArea, это то, что вы должны использовать метод fmlText для отправки текстовых скриптов в экземпляр, а не использовать классический htmlText . Метод fmlText будет анализировать сценарии с использованием подхода, htmlText от htmlText ; это расшифровывается как Flash Markup Language Text .
Итак, в вашем тестовом проекте замените htmlText на fmlText как fmlText ниже.
|
1
|
_textArea.fmlText = xml.text();
|
Следующее, что нужно сделать, — это создать две пользовательские функции в вашем классе документов, Main.as , которые будут вызываться при переходе или развертывании гиперссылки (которую мы создадим позже в data.xml). Ради этого руководства эти две функции будут просто отслеживать некоторые результаты, но в реальном мире вы можете делать с этими функциями все, что захотите, например, открыть окно всплывающей подсказки.
|
1
2
3
4
5
6
7
8
|
public function funcOnOver():void
{
trace(«rollOver»);
}
public function funcOnOut():void
{
trace(«rollOut»);
}
|
Вы также должны установить некоторые параметры при инициализации экземпляра TextArea. Добавьте эти строки сразу после инициализации TextArea.
|
1
2
3
4
5
|
_textArea.holder = refToThis;
_textArea.client = refToThis;
_textArea.mouseRollOverEnabled = true;
_textArea.funcSecurity = true;
_textArea.allowedFunctions(funcOnOver, funcOnOut);
|
Также добавьте следующую строку в начало функции Main ().
|
1
|
var refToThis:Object = this;
|
Чтобы убедиться, что вы правильно написали код в Main.as , ниже показано, как должен выглядеть ваш файл.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
package
{
import flash.display.MovieClip
import com.doitflash.text.TextArea;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
public class Main extends MovieClip
{
public function Main():void
{
var refToThis:Object = this;
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onXmlLoaded);
loader.load(new URLRequest(«data.xml»));
function onXmlLoaded(e:Event):void
{
var xml:XML = new XML(e.currentTarget.data);
var _textArea:TextArea = new TextArea();
_textArea.holder = refToThis;
_textArea.client = refToThis;
_textArea.mouseRollOverEnabled = true;
_textArea.funcSecurity = true;
_textArea.allowedFunctions(funcOnOver, funcOnOut);
_textArea.wordWrap = true;
_textArea.multiline = true;
_textArea.width = 400;
_textArea.height = 200;
_textArea.condenseWhite = true;
_textArea.fmlText = xml.text();
addChild(_textArea);
}
}
public function funcOnOver():void
{
trace(«rollOver»);
}
public function funcOnOut():void
{
trace(«rollOut»);
}
}
}
|
Это почти все, что вам нужно сделать в вашем файле .as; а остальное будет сделано в XML, но прежде чем перейти к XML и создать гиперссылку, давайте немного поговорим о вышеупомянутых настройках.
Во-первых, у нас есть свойство holder, которое вы не будете использовать в этой статье, но когда вы углубитесь в TextArea для создания пользовательских HTML-тегов, вам это понадобится очень часто; для этого урока достаточно знать, что это свойство сохраняет местоположение, в которое вы добавляете экземпляр TextArea на сцену.
Тогда у нас есть свойство клиента . Это местоположение — или, точнее сказать, это ссылка на класс, в котором вы сохраняете все разрешенные функции. В этом примере мы используем Main.as в качестве клиента, но если у вас есть длинный список функций, которые хотят дать им разрешение на вызов из ваших текстовых скриптов, вы можете предпочесть создание отдельного класса для этой цели.
У нас также есть свойство mouseRollOverEnabled, которое по умолчанию имеет значение false по соображениям производительности. Если вы хотите обнаружить переворачивание / вылет мыши в ваших гиперссылках, убедитесь, что вы включили это свойство.
Тогда у нас есть два свойства безопасности: allowFunctions и funcSecurity . Эти свойства позволят вам ограничить вызываемые функции конкретными функциями, упомянутыми в методе allowFunctions .
Хорошо, чтобы увидеть магию, вернитесь к data.xml и добавьте следующую строку где-нибудь внутри раздела CDATA:
|
1
|
Here’s a <u><a href=’onMouseOver:funcOnOver();onMouseOut:funcOnOut()’>SAMPLE LINK</a></u>.
|
Как вы видите, вы создали два вызова функций (один при наведении курсора мыши, другой при развертывании мыши), и вы можете делать с этими функциями все, что угодно, в своем проекте AS3.
Но это не все! В следующем разделе я расскажу о том, как вы можете вызывать пользовательские функции и передавать различные типы данных в качестве аргументов.
Шаг 6: Передайте аргументы функциям
До настоящего момента вы узнали, как настроить экземпляр TextArea для приема вызовов функций из содержимого HTML, которое можно размещать во внешних источниках, таких как XML. Теперь мы собираемся отправлять различные типы аргументов вместе с вызовами.
Мы можем отправить массив, объект и простые строковые типы. Попробуйте добавить следующую гиперссылку где-нибудь внутри тега CDATA в вашем XML-файле:
|
1
2
3
4
5
|
<u><a href=’event:func1()’>SIMPLE CALL</a></u>.<br />
<u><a href=’event:func2(some string)’>SEND STRING</a></u>.<br />
<u><a href=’event:func3([0,1,2,3,4])’>SEND ARRAY</a></u>.<br />
<u><a href=’event:func4({var1:val1;var2:val2})’>SEND OBJECT</a></u>.<br />
<u><a href=’event:func5(string,[0,1,2],{var1:val1;var2:val2})’>SEND MIXED ARGUMENTS</a></u>.<br />
|
Это создаст пять вызовов функций в вашем проекте AS3; каждая функция демонстрирует, как вы можете отправлять различные типы аргументов. Но помните, что это не будет работать, пока вы на самом деле не создадите эти функции внутри своего проекта AS3. Для этого просто добавьте эти функции вместе с funcOnOver() и funcOnOut() которые у вас были ранее:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
public function func1():void
{
trace(«no arguments sent»);
}
public function func2($str:String):void
{
trace(«arguments >> » + $str);
}
public function func3($arr:Array):void
{
trace(«arguments >> » + $arr);
}
public function func4($obj:Object):void
{
trace(«arguments >> » + $obj);
}
public function func5($str:String, $arr:Array, $obj:Object):void
{
trace(«arguments >> » + $str);
trace(«arguments >> » + $arr);
trace(«arguments >> » + $obj);
}
|
Теперь у вас есть вызовы в XML, и функции также доступны в проекте AS3; осталось только дать разрешение на использование экземпляру TextArea. Измените метод allowFunctions объекта TextArea следующим образом:
|
1
|
_textArea.allowedFunctions(funcOnOver, funcOnOut, func1, func2, func3, func4, func5);
|
Теперь опубликуйте и протестируйте свой проект и попробуйте щелкнуть созданные вами гиперссылки.
Поздравляем, теперь вы узнали, как включить прокрутку и развертывание мыши в текстовых полях, и вы знаете, как создавать собственные функции и вызывать их из текстовых блоков.
Вывод
TextArea расширяет TextField, добавляет в ваш проект только 6 КБ и может использоваться в качестве альтернативы TextField. В этом руководстве вы узнали, как инициализировать TextArea для создания простых гиперссылок, которые могут вызывать пользовательские функции внутри вашего проекта AS3, а также узнали, как включить опрокидывание мыши и обнаружение развертывания для гиперссылок, которые могут вызывать пользовательские функции.
С этими функциями можно многое сделать, например, открыть подсказку при наведении на определенную гиперссылку или создать ссылки, которые вызывают пользовательскую функцию в вашем проекте, чтобы легче перемещаться по страницам приложения.
Надеюсь, вы найдете этот урок (и сам TextArea) полезным!