Проверка и форматирование данных

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

1. Откройте файл flashWriter1.fla из папки Lesson13/Assets.

Этот проект состоит из пяти слоев, которые названы в соответствии с содержимым. Слой Background содержит общее графическое оформление сцены, за исключением кнопок, которые находятся в слое Buttons. Слой Components содержит компонент Checkbox (под именем applyToAll ), расположенный в левом верхнем углу сцены. Слой Box содержит экземпляр фильма-символа под названием box, который находится слева от сцены и выглядит как полупрозрачный квадрат с белой рамкой. Это единственный элемент сцены (помимо скриптов, которые мы будем помещать в кадр 1 слоя Actions), который мы будем использовать в данном упражнении. Кнопками и компонентом Checkbox мы займемся в следующем упражнении.

Итак, в этом упражнении нашей целью будет в ходе воспроизведения фильма динамически создать пару текстовых полей. Одно поле, большое, будет предназначено для ввода текста. Меньшее поле будет отображать текущее количество символов, имеющихся в большом поле. Оба поля будут двигаться слева направо по мере ввода текста в большое поле. Кроме того, экземпляр клипа box будет копировать перемещения и размер большого поля – он будет "работать" фоном этого поля (этот клип-прямоугольник полупрозрачен, а просто сделать прозрачный фон у текстового поля невозможно).

2. Откройте панель Действия, выделите кадр 1 слоя Actions и введите такой скрипт:

_root.createTextField("movingField", 10, 150, 80, 200, 20);
with (movingField){
  autoSize = true;
  html= true;
  multiline = true;
  text = "Enter text here";
  type = "input";
  wordWrap = true;
}

Первая строка этого скрипта создает текстовое поле под именем movingField, шириной 200 и высотой 20, помещая его в начальные координаты x = 150 и y = 80. Это будет большее из текстовых полей в нашем проекте. С помощью оператора with, указывающего на movingField, мы конфигурируем начальные значения свойств этого поля. Это поле – которое будет использоваться для ввода текста – вначале отобразит текст "Enter text here". Затем movingField станет полем для ввода, для него включается опция автоматического переноса.

Совет Как вы видите, оператор with – прекрасный способ сократить запись в случае, когда несколько строк скрипта обращаются к одному и тому же объекту ( TextField, MovieClip и т.п.).

3. После скрипта, введенного на предыдущем шаге, добавьте следующий:

_root.createTextField("statusField", 20, 150, 80, 100, 20);
with (statusField){
  autoSize = true;
  background = true;
  html = true;
  multiline = false;
  selectable = false;
  text = "0";
  type = "dynamic";
  wordWrap = false;
}

Первая строка этого скрипта создает текстовое поле под именем statusField, шириной 100 и высотой 20, помещая его в начальные координаты x = 150 и y = 80. С помощью оператора with, указывающего на statusField, мы устанавливаем начальные значения свойств этого поля. Для этого поля мы включили авторазмер, и вначале оно будет отображать текст "0". Поле statusField будет динамическим, для него запрещается автоматический перенос. Это поле, меньшее из двух в нашем проекте, будет подражать движению большого поля. Сейчас мы напишем функцию, которая это обеспечит.

4. После скрипта, введенного на предыдущем шаге, добавьте описание функции:

function updateStatus(){
  statusField._x = movingField._x;
  statusField._y = (movingField._y + movingField._height) + 10;
  statusField.text = movingField.length;
}

Немного позже мы запрограммируем перемещение поля movingField по мере ввода текста.

Данная функция выполняет две задачи. Во-первых, она сохраняет постоянное расстояние между текстовыми полями statusField и movingField при движении, а во-вторых – обновляет текст в поле statusField.

Первая строка функции устанавливает x координату поля statusField равной координате поля movingField. Вторая строка устанавливает верхнюю границу поля statusField (это его y координата) на 10 пикселей ниже поля movingField: к y-координате поля movingField добавляется его высота (что дает координату нижней границы поля), а затем прибавляется еще 10 пикселей.

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

5. После скрипта, введенного на предыдущем шаге, добавьте еще одно описание функции:

function reshapeBox(){
  with(box){
    _x = movingField._x;
    _y = movingField._y;
    _width = movingField._width;
    _height = movingField._height;
  }
}

Эта функция будет обеспечивать копирование экземпляром фильма-символа box позиции и размера текстового поля movingField, так, чтобы box казался фоном этого текстового поля. Все действия вам знакомы. Эта функция, как и предыдущая, будет вызываться всякий раз при вводе или удалении символа в поле movingField, мы это вскоре запрограммируем.

6. После скрипта, введенного на предыдущем шаге, добавьте вызов двух функций:

updateStatus();
reshapeBox();

Эти две строки вызывают функции, только что описанные нами, конфигурируя текстовое поле statusField и экземпляр фильма-символа box, как только начнется воспроизведение фильма. Впоследствии вызов этих функций будет повторяться.

7. После скрипта, введенного на предыдущем шаге, добавьте следующий скрипт:

movingField.onChanged = function(){
  movingField._x += 4;
  if (movingField._x + movingField._width > 500){
    movingField._x = 150;
  }
  reshapeBox();
  updateStatus();
}

Здесь создается метод – обработчик события onChanged (доступного для экземпляров текстовых полей). Он будет выполнять свой набор действий при всяком изменении текста в поле movingField – добавлении или удалении символа.

Первая строка перемещает movingField на 4 пикселя от текущей позиции – каждый раз при вводе или удалении символа поле вместе с текстом будет смещаться вправо. Оператор if предотвращает выход поля за пределы сцены: он сравнивает координату правой границы поля (которая вычисляется сложением x-координаты поля с его шириной) с числом 500 (координата правого края сцены). Если правая граница поля вышла за пределы сцены, поле возвращается к своей первоначальной x-координате – 150.

Последние две строки вызывают две описанные нами функции, обновляя текстовое поле statusField и экземпляр клипа box сразу после любого изменения текста в поле movingField.

8. Командой Управление > Проверить фильм (Control > Test Movie) запустите тест проекта.

Сразу после запуска фильма будут созданы два текстовых поля с соответствующей конфигурацией свойств. Поле statusField находится под полем movingField, экземпляр фильма-символа box имеет размер и позицию такие же, как поле movingField. При вводе текста в поле movingField оно смещается вправо, поле statusField следует за ним, отображая текущее количество символов в поле movingField. После того, как поле movingField сместится вправо слишком далеко, оно возвращается к начальной позиции.

9. Закройте тестовый фильм и сохраните свою работу под именем flashWriter2.fla.

Мы продолжим работу с этим файлом в следующем упражнении.

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