Организация ввода и вывода данных во Flash

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

1. Откройте файл journal1.fla из папки Lesson11/Assets на CD-ROM.

Как видите, здесь лишь один кадр и четыре слоя, которые называются в соответствии с их содержимым. На сцене имеется два текстовых поля для отображения информации. Большое поле в центре, journalBody, будет содержать саму запись. Меньшее поле в нижней части экрана, entryNumber, будет отображать номер текущей записи по журналу. Слой Buttons содержит кнопки навигации – Prev, Next, New и Save.

Это приложение будет позволять вводить новую запись, сохранять ее, просматривать уже имеющиеся записи.

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

myJournal = SharedObject.getLocal("JournalObject");

Эта строка создает ссылку на общий объект JournalObject. Теперь во всех скриптах этого фильма, обращаясь к myJournal, мы будем на самом деле иметь дело с общим объектом под названием JournalObject.

3. Добавьте в скрипт, после предыдущей строки, условный оператор:

if (myJournal.data.journal == undefined) {
  myJournal.data.journal = [];
}

Этот оператор проверяет, имеется ли в общем объекте массив с именем journal. Если такого массива нет ( undefined ), выполняется действие, создающее его.

Примечание Как только массив создан, он, после выхода из фильма или сохранения общего объекта, автоматически становится частью общего объекта.

Массив journal будет иметь значение undefined лишь при самом первом воспроизведении фильма. При последующих запусках фильма массив уже будет существовать, и это действие будет игнорироваться.

Совет. Хорошая идея – проверять данные в общем объекте на значение undefined. Это позволит присвоить им начальные стандартные значения, если фильм воспроизводится пользователем впервые.

4. В конец скрипта поместите описание функции:

function displayEntry(num) {
  _root.entryNumber.text = num;
  _root.journalBody.text = myJournal.data.journal[num - 1];
}

Эта функция устанавливает значения двух текстовых полей – entryNumber и journalBody – на основе значения num. Например, если при вызове функции num имеет значение 1, в текстовом поле entryNumber отобразится "1" (номер текущей записи журнала). Во второй строке значение num используется для определения элемента массива journal (из общего объекта), который должен быть отображен в текстовом поле journalBody. Если num имеет значение 1, то эта строка скрипта расшифруется так:

_root.journalBody.text = myJournal.data.journal[1 - 1];

или

_root.journalBody.text = myJournal.data.journal[0];

Почему здесь из num вычитается единица? Дело в том, что первая запись журнала ("1" в поле entryNumber ) – это нулевой элемент массива journal. Конечно, можно было бы показать для первой записи номер "0", но это было бы как-то не совсем привычно. Поэтому запомните этот принцип сопоставления номеров записей и индексов элементов массива (запись с номером "3" – это элемент массива с индексом 2, и так далее).

5. В конец текущего скрипта добавьте вызов функции:

displayEntry(myJournal.data.journal.length);

Этот вызов функции находится в кадре 1, и значит, будет выполнен, как только начнется воспроизведение фильма. Вызывается функция displayEntry() (которую мы описали на предыдущем шаге) с передачей ей в качестве параметра значения свойства length массива journal из общего объекта. В результате на экране будет отображена последняя запись, сделанная пользователем в предыдущем сеансе фильма. Если, к примеру, в массиве journal имеется три записи, функции displayEntry() будет передано значение 3, и на экране будет показана третья запись журнала. Если же массив journal создан только что (как описано а шаге 3), он будет содержать единственную, пустую, запись – длина массива будет равна 1, и это значение станет аргументом функции.

6. Добавьте к скрипту следующее описание функции, сохраняющей данные:

function save() {
  var num = Number(_root.entryNumber.text) - 1;
  myJournal.data.journal[num] = _root.journalBody.text;
  myJournal.data.flush();
}

Мы уже упоминали, что при выходе из фильма данные сохраняются в общий объект автоматически. А с помощью метода flush() можно сохранить данные в любое время в ходе воспроизведения фильма. Эта функция будет у нас вызываться при нажатии кнопки Save (см. шаг 11). Давайте разберемся, как она работает.

Первая строка функции создает локальную переменную num. Значение этой переменной определяется так: значение, отображенное в текстовом поле entryNumber, минус один. Для уверенности в том, что num получит числовое, а не текстовое, значение, использована функция Number(). Значение num используется в следующей строке – в качестве индекса элемента массива, соответствующего текущей записи журнала. Как мы упоминали на шаге 4, число, отображенное в поле entryNumber (номер записи), на единицу больше, чем индекс соответствующего элемента массива; поэтому и вычитается единица в первой строке.

Итак, вторая строка тела функции помещает в элемент с индексом num массива journal текст, отображенный в поле journalBody. Как всегда, возьмем для иллюстрации пример. Допустим, что номер текущей записи (показанный в поле entryNumber ) – 9. При вызове данной функции num получит значение 8 (девять минус один). Вторая строка тогда получится такой:

myJournal.data.journal[8] = _root.journalBody.text;

Тем самым текст из поля journalBody будет записан в элемент с индексом 8 массива journal. Еще раз повторим, что текущий номер записи – 9, а индекс соответствующего элемента массива – 8. Таким образом, если 8-й элемент массива был до этого пустым ( undefined ), в него будет записан текст; если этот элемент уже содержал текст, этот текст будет перезаписан (измененным или тем же самым текстом).

Последнее действие в функции с помощью метода flush() принудительно сохраняет на жестком диске пользователя общий объект вместе с данными – в нашем случае это все записи, имеющиеся в массиве journal.

7. Добавьте описание функции, создающей новую запись журнала:

function newEntry() {
  _root.entryNumber.text = myJournal.data.journal.length + 1;
  _root.journalBody.text = undefined;
  Selection.setFocus("_root.journalBody");
}

Первое действие в этой функции устанавливает номер текущей записи журнала (текст в поле entryNumber ) – длина массива journal плюс один. Так, например, если в массиве journal две записи, он имеет длину 2. В результате добавления единицы в текстовом поле entryNumber будет отображено "3". Таким образом, все новые записи будут добавляться в конец массива. Два последних действия этой функции очищают текстовое поле journalBody и устанавливают в него фокус, так что пользователь может сразу начать вводить свою новую запись. Чтобы все стало понятнее, давайте рассмотрим работу данной функции во взаимодействии с функцией save(), которую мы создали на предыдущем шаге.

Предположим, в массиве journal имеется две записи. Эти записи хранятся в элементах массива с индексами 0 и 1, длина массива ( length ) равна 2. При выполнении данной функции в текстовом поле entryNumber отобразится "3" (свойство length массива journal плюс один), текстовое поле journalBody пусто. Теперь пользователь вводит в это поле текст и нажимает кнопку Save – происходит вызов функции save(). Эта функция вычитает единицу из числа, отображенного в поле entryNumber, и в итоге помещает текст из поля journalBody в элемент с индексом 2 массива journal. Теперь массив содержит три записи – в элементах с индексами 0, 1 и 2, и его длина ( length ) равна 3. Если теперь вновь вызвать функцию newEntry(), процесс повторится.

8. Добавьте описание новой функции, которая будет выводить на экран следующую запись журнала:

function nextEntry () {
  var num = Number(_root.entryNumber.text) + 1;
  if (num > myJournal.data.journal.length) {
    num = myJournal.data.journal.length;
  }
  displayEntry(num);
}

Эта функция отображает на экране следующую запись из имеющихся в массиве. Первым делом присваивается значение переменной num – число, отображенное в поле entryNumber плюс один. Далее, чтобы не случилось попытки отображения несуществующей записи, значение num сравнивается с общим числом записей, имеющихся в массиве journal (свойство length массива). Если значение num оказалось больше, выполняется действие в операторе if, присваивающее переменной num значение свойства length массива journal – это приведет к тому, что на экране будет отображена последняя запись из массива. Последнее действие – вызов функции displayEntry() с передачей ей значения num. В результате на экран будет выведена нужная запись (следующая либо последняя).

9. Создайте еще одну функцию, которая будет выводить предыдущую запись журнала:

function previousEntry() {
  var num = Number(_root.entryNumber.text) - 1;
  if (num < 1) {
    num = 1;
  }
  displayEntry(num);
}

Эта функция похожа на предыдущую. Первым делом num получает значение, равное номеру текущей записи минус один. Оператор if проверяет, чтобы не произошло попытки вывести на экран запись с номером меньше 1. Рассмотрим на примере, как это работает.

Предположим, в данный момент на экране отображена запись номер 6. При вызове данной функции num получает значение 5 (шесть минус один); затем оператор if проверяет, чтобы значение num было не меньше 1. В данном случае это не так, поэтому действие внутри оператора if игнорируется и вызывается функция displayEntry() с передачей ей в качестве аргумента значения 5 – на экран выводится пятая запись журнала.

Теперь допустим, что на экране – запись номер 1. Переменная num получает значение 0. Это меньше 1, поэтому оператор if присваивает num значение 1. Первая запись и так уже была выведена на экран, поэтому внешне не происходит никаких изменений. Как уже было сказано, этот механизм предотвращает попытки вывода на экран записей с номерами меньше 1, поскольку таковых попросту не может быть.

10. Выделите кнопку New и введите в панели Действия следующий скрипт:

on (release) {
  newEntry();
}

Когда пользователь нажмет эту кнопку, будет вызвана функция newEntry(), которая на единицу увеличит номер текущей записи и очистит поле journalBody, подготовив его для ввода текста новой записи.

11. Выделите кнопку Save и введите в панели Действия следующий скрипт:

on (release) {
  save();
}

Когда пользователь нажмет эту кнопку, будет вызвана функция save(), в результате либо текст из поля journalBody либо заменит существующую запись, либо будет создана новая запись в массиве journal (как описано на шаге 6).

12. Выделите кнопку Prev и введите следующий скрипт:

on (release) {
  previousEntry();
}

Вызов функции previousEntry() приведет к выводу на экран записи, номер которой на единицу меньше номера текущей записи.

13. Наконец, выделите кнопку Next и введите такой скрипт:

on (release) {
  nextEntry();
}

Скрипт просто вызывает функцию nextEntry() при нажатии данной кнопки. На экран будет выведена следующая "по списку" запись журнала.

14. Командой Управление > Проверить фильм (Control > Test Movie) запустите тест проекта. Введите какой-нибудь текст – запись в журнале. Нажатием кнопки Save сохраните запись, затем, нажав кнопку New, создайте новую запись. Вновь введите текст и нажмите кнопку Save, и после этого перезапустите фильм.

После перезапуска фильма общий объект будет загружен с вашего жесткого диска (как описано в шагах 2 и 3), и вы сможете просматривать сохраненные данные, пользуясь кнопками Prev и Next.

15. Закройте тестовый фильм и сохраните свою работу как journal2.fla.

В этом уроке вы изучили основы использования общих объектов – их создание, сохранение в них данных и получение этих данных.

Общие объекты хороши для сохранения таких данных:

• Имя пользователя
• Последний "посещенный" кадр
• Дата последнего визита пользователя
• Пользовательские настройки музыки
• Другие пользовательские установки
• Счет игры
• Заметки, адреса, списки
• Значения свойств ( x, y, alpha, поворот) элементов фильма
• И тому подобное…