Знакомство с ActionScript

Теперь давайте назначим скрипт для нашей кнопки Light Switch.

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

on (press) {
  amountPaid = Number(paid.text);
  amountOwed = Number(owed.text);
}

Первое, на что следует обратить внимание – этот скрипт будет выполняться при нажатии кнопки, к которой он присоединен. Следом за указанием этого события идет открывающая фигурная скобка ({), две строки скрипта, затем закрывающая фигурная скобка (}). Эти фигурные скобки как бы говорят: "Эти два действия выполнить в результате нажатия кнопки". Скрипт выполняет две вещи: во-первых, создается переменная с именем amountPaid и ей присваивается значение, равное тому, что отображено в экземпляре текстового поля paid – только с помощью одного трюка. На самом деле все, что введено в текстовое поле, рассматривается как текст. Поэтому, хотя значение 100 выглядит в текстовом поле как число, оно считается текстом (состоящим из символов 1, 0 и 0, или "100" в кавычках), а не как число 100 (без кавычек).

Примечание Flash всегда считает все, что введено в текстовое поле, текстом. Хотя пользователь, вводя текст в поле, не ставит никаких кавычек, Flash сам "незаметно" добавляет их, чтобы фильм знал, что это значение есть текстовая строка.

Наверное, вы уже поняли, что функция Number() – это специальный инструмент, позволяющий преобразовать текстовое значение в числовое. Текст, который вы хотите преобразовать, следует поместить в скобки в качестве параметра этой функции. Например:

myNumber = Number("945");

Такая команда преобразует текст "945" в число 945 (без кавычек) и присвоит это числовое значение переменной myNumber. В нашем скрипте мы применили функцию Number() и поместили в скобки ссылку на текстовое значение, которое нужно преобразовать. Таким образом, если пользователь введет в поле paid "54" (это будет текст), то, благодаря функции Number, переменной amountPaid будет присвоено значение 54 – числовое.

Примечание Функция Number() имеет свои ограничения: с ее помощью можно преобразовать только такой текст, где на первом месте стоит цифра. Например, Number("dog") в результате выдаст NaN (not a number – не число), поскольку преобразование невозможно.

Следующая строка нашего скрипта выполняет точно такую же операцию, только здесь переменной amountOwed присваивается преобразованное в число значение, отображенное в экземпляре текстового поля owed. Вы помните, что это текстовое поле показывает сумму счета за электричество, то есть "60". Так что, после преобразования, amountOwed получит значение 60.

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

Подведем итог. При нажатии кнопки текстовые значения, отображенные в текстовых полях paid и owed, преобразовываются в числа. Эти числовые значения присваиваются, соответственно, переменным amountPaid и amountOwed. Эти переменные будут использоваться в скрипте в дальнейшем.

10. Добавьте следующие строки в скрипт, созданный на предыдущем шаге. Их следует вставить внутри фигурных скобок ({}), сразу после строки amountOwed = Number(owed.text);:

if (amountPaid < amountOwed) {
  difference = amountOwed - amountPaid;
  light.gotoAndStop ("Off");
  message.text = "Вы недоплатили " + difference + " долларов.";
} else if (amountPaid > amountOwed) {
  difference = amountOwed - amountPaid;
  light.gotoAndStop ("Hot");
  message.text = "Вы переплатили " + difference + " долларов.";
} else {
  light.gotoAndStop ("On");
  message.text = "Вы оплатили счет полностью.";
}

Поскольку мы поместили эти строки внутри фигурных скобок события on(press), они также будут выполняться при нажатии кнопки.

Эта порция скрипта делится точно на три части, обозначенные такими строками:

if (amountPaid < amountOwed)
else if (amountPaid > amountOwed)
else

Эти три строки представляют собой серию условий, которые скрипт при выполнении должен проанализировать. Сами условия, подлежащие анализу, указаны в скобках. Под каждой из этих строк (в фигурных скобках) имеется по несколько строк с отступом; они представляют действия, которые должны быть выполнены, если то или иное условие соответствует истине. Вот как это работает:

Когда кнопка нажата, наш скрипт должен определить, какую сумму оплаты ввел пользователь – меньшую, большую, или равную сумме счета. Это и есть три условия в нашем скрипте. Давайте рассмотрим первое, которое выглядит так:

if (amountPaid < amountOwed) {
  difference = amountOwed - amountPaid;
  light.gotoAndStop ("Off");
  message.text = "Вы не оплатили " + difference + " dollars.";
}

В первой строке для сравнения значений двух переменных использован оператор "меньше, чем" (<). Первая строка переводится на человеческий язык так: "Если (If) сумма оплаты, введенная пользователем ( amountPaid ) меньше, чем сумма счета ( amountOwed ), предпринять действия, перечисленные ниже". Действия эти будут выполнены лишь в том случае, если условие соответствует истине. Поэтому этот набор действий заключен в фигурные скобки. Первое действие создает переменную с именем difference и присваивает ей значение amountOwed минус amountPaid. Если, например, пользователь ввел сумму 40, difference получит значение 20 ( amountOwed - amountPaid, или 60 – 40). Важно отметить, что все вычисления в правой части выражения (правее знака =) выполняются до того, как полученный результат будет присвоен элементу в левой части. Следующая строка указывает экземпляру фильма-символа light перейти к кадру с меткой Off и остановиться – поскольку пользователь недоплатил по счету, свет остается выключенным. Последняя строка генерирует сообщение, отображаемое в текстовом поле message.

Сообщение конструируется прямо в скрипте. Обратите внимание, что в этой строке использована переменная difference: Значение difference вставлено в середину данного сообщения, между двумя секциями текста, заключенного в кавычки и знаками "плюс". Если, например, difference имеет значение 20, получится такое сообщение:

"Вы недоплатили 20 долларов."

Как вы помните, все, что заключено в кавычки, считается обычным текстом. Поскольку слово difference в кавычки не заключено, ActionScript понимает, что это ссылка на имя переменной, и вставляет в это место значение этой переменной. Знак плюс (+) здесь использован для конкатенации (объединения) всего этого в единую строку – сообщение. Оператор присваивания (знак равенства) присваивает окончательное, объединенное значение свойству text текстового поля message.

Если введенная пользователем сумма не меньше, чем сумма счета, то вся эта часть скрипта игнорируется, и начинается анализ следующей части. А она выглядит так:

else if (amountPaid > amountOwed) {
  difference = amountOwed - amountPaid;
  light.gotoAndStop ("Hot");
  message.text = "Вы переплатили " + difference + " dollars.";
}

Первая строка означает: "Иначе, если ( else if ) пользователь ввел сумму оплаты, большую, чем сумма счета, предпринять действия, перечисленные ниже". Выполняемые здесь действия – почти те же, что и в предыдущей части, лишь с двумя небольшими (но важными) отличиями. Во-первых, экземпляр фильма-символа light переходит к кадру с меткой Hot, который представляет лампочку, раскалившуюся от лишней энергии – ведь пользователь переплатил. Во-вторых, различие имеется в сообщении – вместо слова недоплатили здесь стоит переплатили. Действия в этой секции выполняются лишь в том случае, если пользователь заплатил больше, чем нужно. В противном случае эти действия игнорируются и анализируется третья секция скрипта, которая выглядит так:

else {
light.gotoAndStop ("On");
message.text = "Вы оплатили счет полностью.";
}

Как видите, здесь уже не ставится вопрос, больше ли amountPaid, чем amountOwed или меньше (как было в предыдущих двух секциях). Скрипту уже незачем анализировать ситуацию, когда пользователь ввел сумму, точно соответствующую счету – дело в том, что эта секция кода будет выполнена лишь в том случае, если ни первая, ни вторая "не прошли проверку".

Итак, при нажатии кнопки выполняется только одна из этих трех секций кода. В результате на экране появляется определенный кадр фильма-символа light, а в текстовом поле message отображается соответствующее сообщение.

После того, как кнопка Light Switch будет отпущена, элементы нашей сцены должны вернуться в то состояние, в котором они находились при начале воспроизведения фильма. Давайте запрограммируем это.

11. Не снимая выделения с кнопки Light Switch, введите следующий скрипт после того, который уже имеется в панели Действия:

on (release) {
  light.gotoAndStop ("Off");
  message.text = "";
}

увеличить изображение

Данный скрипт выполняется, как только кнопка отпущена. Он перемещает экземпляр фильма-символа light к кадру с меткой Off и стирает все из текстового поля message, возвращая эти элементы сцены к первоначальному состоянию.

12. Сохраните файл как electricBill2.fla.

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