Работа с динамическими данными

Создание динамических текстовых полей и вывод информации

Во Flash имеется три типа текстовых полей:

• Статичный текст
• Ввод текста
• Динамический текст

Статичный текст мы помещаем на сцену при помощи инструмента Текст (Text). Однако используются такие поля нечасто, поскольку после того, как SWF файл создан и опубликован, уже нельзя изменить вид и размер шрифта, содержание надписи и прочие параметры статичного текстового поля. На веб-сайте, например, статичный текст годится для заголовков, навигационных кнопок и тому подобного.

Поле для ввода текста – это область, в которую пользователь может вводить текст во время работы приложения. Такие поля обычно используют, когда нужно получить от пользователя какую-либо информацию, которая затем может быть использована в фильме или отправлена на сервер для обработки.

Динамическое текстовое поле – это область на сцене, которую можно заполнить текстом во время выполнения приложения – это означает, что надпись можно изменить, в ходе проигрывания фильма. Также динамические текстовые поля можно настроить для отображения текста с несложным HTML форматированием. Разделы новостей на нашем Flash-сайте – прекрасный пример того, где могут пригодиться динамические текстовые поля. Скажем еще что, при отображении в динамическом поле текста в формате HTML можно динамически устанавливать атрибуты текста – такие, как цвет, шрифт, гиперссылки…

Примечание Все находящиеся в проекте динамические текстовые поля и поля для ввода являются экземплярами объекта TextField. Поэтому ими можно управлять при помощи свойств и методов этого класса объектов.

Настройка текстовых полей делается в инспекторе Параметры (Property). Выбрав инструмент Текст и открыв инспектор Параметры (команда Окно > Свойства (Window > Properties)), вы увидите в его верхнем левом углу раскрывающийся список, в котором вы можете выбрать один из трех типов текстовых полей (Static Text, Dynamic Text и Input Text). Для каждого типа текстовых полей имеются свои опции.

Для статичного текстового поля (Static Text) в инспекторе Параметры имеются следующие опции:

• Использовать шрифты устройства (Use Device Fonts). Если эта опция включена, Flash будет использовать системные шрифты, установленные на компьютере пользователя, вместо шрифтов примененных вами.
• Выбор доступен (Selectable). Если эта опция включена (кнопка нажата), указатель мыши при наведении на текст будет принимать форму "I", позволяя выделять и копировать текст под курсором.
• Жирный стиль (Bold). Текст будет отображаться жирным шрифтом.
• Стиль курсив (Italics). Текст будет отображаться курсивом.
• Выравнивание (Alignment). Текст в поле можно выравнивать по левому краю, по правому краю, по центру или по всей ширине.
• Направление текста (Text Orientation). Позволяет выбрать горизонтальное или вертикальное направление текста в статичном поле.
• Формат (Format). При нажатии этой кнопки открывается диалоговое окно, где можно настроить отступы, поля и междустрочные интервалы.
• Атрибуты отображения символов. Вы можете выбрать шрифт, настроить размер и межсимвольный интервал.
• Атрибуты положения. В левом нижнем углу инспектора Параметры имеется информация о положении текстового поля на экране, его ширине и высоте. Все эти параметры можно изменять.
• Ссылка URL (URL Link). Если указать здесь URL-адрес, текстовое поле будет работать как гиперссылка.

Если из списка выбран тип Input Text (поле для ввода), доступны следующие опции:

• Single Line, Multiline, Multiline no wrap, Пароль (Password). Если вы выберете из этого списка пункт Single Line, то в текстовое поле можно будет ввести лишь одну строку текста. Если выбрано Multiline, то можно будет вводить текст в несколько строк, причем текст, превышающий ширину текстового поля, будет автоматически переноситься на следующую строку. Пункт Multiline no wrap – тоже многострочный, но с запретом автоматического переноса. Текст, выходящий за пределы ширины поля, попросту не отображается. Если выбран пункт Пароль, то вместо всех вводимых символов в поле отображаются звездочки (при этом машина помнит настоящие символы).
• Имя копии (Instance Name). Если динамическому полю или полю для ввода присвоить Имя экземпляра, то можно будет при помощи ActionScript получить доступ к информации в этом поле, а также управлять ею. К примеру, если вы дали текстовому полю имя box, то можете получить текст, находящийся в этом поле, сославшись на box.text.
• Пер. (Var). Вы также можете указать для текстового поля имя переменной. В этом случае будет создана переменная, значение которой будет всегда отображаться в текстовом поле. И наоборот, если изменится текст в поле, то изменится и значение переменной.
• HTML. Хотя поле типа Input Text предназначено в первую очередь для ввода текста пользователем, его можно использовать и для отображения динамически генерируемого текста. Если включить опцию HTML, текстовое поле сможет интерпретировать код HTML 1.0 (теги форматирования шрифта и т.п.), если он встретится в тексте.
• Рамка вокруг текста (Border/Bg). Если эта опция включена, то для текстового поля автоматически устанавливается белый фон и черная рамка – очень полезно, чтобы пользователь мог точно видеть где находится и какие пределы имеет поле, в которое он должен ввести данные.
• Макс. символов (Maximum Characters). Эта опция позволяет ограничить число символов, которое можно ввести в данное поле. Если здесь указать 0, то пользователь сможет ввести неограниченное количество символов.
• Символ (Character). При нажатии этой кнопки открывается диалоговое окно Свойства символа (Character Options). Здесь можно сконфигурировать моменты, касающиеся встраивания шрифтов для этого текстового поля в SWF-файл. Впрочем, если вы оставите (включенную по умолчанию) опцию Нет символов (No Characters), то шрифт вставлен не будет. Если установить опцию Все символы (All Characters), то в фильм будут встроены все символы этого шрифта – в результате файл фильма увеличится на 20 – 30 Кб. Если вы точно знаете, что из этого шрифта вам понадобится лишь определенный набор символов (например, только цифры, или заглавные буквы), то к вашим услугам опция Только (Only) и соответствующие флажки. Встроив не весь шрифт, а только нужные символы, вы сможете уменьшить размер файла. Наконец, вы можете даже взять из шрифта не все буквы или цифры, а только нужные: предположим, ваше текстовое поле будет отображать ход загрузки фильма в процентах; тогда вы ставите флажок "Цифры (0-9)" и указать в поле диалогового окна % загружено.

Все опции полей типа Input Text доступны также и для Dynamic Text, последние, кроме того, имеют дополнительную опцию

• Выбор доступен (Selectable). Опция, разрешающая выделение и копирование текста – такая же, как для Static Text.

В следующем упражнении мы займемся созданием всех необходимых текстовых полей для нашего веб-сайта News Flash. Заметим, что все наши текстовые поля будут динамическими.

1. Откройте файл newsFlash3.fla (если он еще не открыт) и переместите курсор воспроизведения к кадру с меткой refresh.

В этом кадре размещено графическое оформление сайта News Flash. C левой стороны сцены находятся четыре кнопки, соответствующие разделам новостей. Вверху, почти в середине – экземпляр фильма-символа, содержащий несколько значков, символически изображающих погодные условия; имя этого экземпляра – icon. В правом верхнем углу сцены имеются две стрелки, одна направлена вверх, другая – вниз. Здесь будет отображаться температура воздуха – минимальная и максимальная в течение дня. Справа внизу находится фильм-символ, содержащий буквы M T W T F; каждая буква соответствует одному из рабочих дней недели.

2. Выделите слой News Box. На панели инструментов выберите Текст, откройте инспектор Параметры (Property). Из раскрывающегося списка выберите "Dynamic Text".

На протяжении нескольких следующих шагов мы будем создавать в разных местах сцены динамические текстовые поля. Как только поле помещено на сцену, в инспекторе Параметры ему можно присвоить имя экземпляра.

3. Щелкнув на сцене, справа от значка погоды, создайте текстовое поле. Чтобы внедрить шрифт в фильм, нажмите в инспекторе Параметры кнопку Символ (Character) и выберите опцию Все символы (All Characters). Установите ширину текстового поля – примерно 150 пикселей, выберите шрифт _sans и размер шрифта 14.

Это текстовое поле будет отображать информацию о погоде в этот день. Текст, который будет динамически помещаться в это поле, должен отображаться белым цветом, поэтому выберите в инспекторе Параметры белый цвет. Кстати, во всех текстовых полях нашего проекта текст будет либо белым, либо черным. Убедитесь, что установлен режим Single Line (не Multiline!). При создании всех текстовых полей проекта не забывайте внедрить шрифт, нажав в инспекторе Параметры кнопку Символ (Character) и выбрав опцию Все символы (All Characters).

4. Не снимая выделения с текстового поля, введите для него в инспекторе Параметры имя экземпляра weatherBlurb.

Это текстовое поле готово. Как только weatherBlurb.text на основном монтажном столе получит значение, это значение (текст) немедленно отобразится в текстовом поле.

5. По-прежнему работая с инструментом Текст, создайте еще одно текстовое поле – щелкните на сцене и растяните до нужного размера: поле должно занимать всю ширину светло-голубой области, а вниз доходить до имеющейся на сцене черной линии. Выберите шрифт _typewriter, размер 20, включите опцию жирного шрифта. Там же, в инспекторе Параметры, установите выравнивание текста по центру. Присвойте текстовому полю имя экземпляра headline.

Это текстовое поле будет отображать заголовок статьи новостей.

6. Ниже текстового поля headline создайте еще одно – растяните его почти на все свободное место в светло-голубой области, оставив небольшие поля по краям. Установите шрифт _sans с размером 12, цвет – черный. Выберите опцию Multiline. Присвойте текстовому полю имя экземпляра article.

В этом текстовом поле будет отображаться сама статья. Информация в этом поле будет обновляться при изменении значения article.text на основном монтажном столе.

7. В нижней части светло-голубой области, справа от слова Author, создайте еще одно текстовое поле, шириной примерно 130 пикселей. Выберите для него опцию Single Line. Присвойте полю имя author.

Информация, отображаемая в этом текстовом поле, будет зависеть от значения, содержащегося в author.text.

8. Очередное текстовое поле поместите на темно-серой полосе в нижней части сцены, начиная от левого края. Установите для него шрифт _sans, белый, жирный, размером 14. Присвойте имя экземпляра date.

В этом поле будет отображаться календарная дата того дня, к которому относятся просматриваемые новости.

9. Создайте еще два текстовых поля – слева от каждой из стрелок под словом Weather. Размер шрифта измените на 13. Левому текстовому полю присвойте имя экземпляра low, а правому – high.

В этих полях будет отображаться максимальная и минимальная температура.

10. Сохраните свою работу как newsFlash4.fla.

Итак, мы разместили на сцене все, что необходимо для отображения динамических данных. Однако нам нужно еще "достать из хранилищ" информацию и заполнить ею наши текстовые поля.