Теперь, когда у нас есть вся нужная информация, а также эскизная раскадровка нашего проекта, давайте приступим к его сборке. Откройте Блокнот (Notepad) Windows или Apple Simple Text, создав новый текстовый файл, и введите следующий текст: &electricBill=60.
В первой части нашего упражнения мы создадим источник данных, загружаемых в наш фильм при его воспроизведении. Для нашего проекта этот источник данных содержит значение, представляющее собой сумму счета за электричество. Flash, загрузив этот текстовый файл, интерпретирует строку текста и создаст в фильме ячейку данных (переменную) с именем electricBill и присвоит ей значение 60. Значение этой переменной будет использоваться в нашем проекте для нескольких целей.
Примечание Загрузка данных во Flash из внешних источников подробно обсуждается в Уроке 11 – Ввод и вывод данных во Flash. О переменных подробно рассказано в Уроке 7 – Использование динамических данных. Дайте текстовому файлу имя Electric_Bill.txt и сохраните его в папке, содержащей файлы для этого урока, а затем откройте electricbill1.fla из папки Lesson01/Assets.
Цель данной книги состоит в том, чтобы обучать ActionScript, а не работе во Flash, поэтому вы обнаружите, что практически все элементы нашего проекта, за исключением скриптов, уже на месте.
Основной монтажный стол нашего проекта содержит пять слоев, в каждом из которых по 10 кадров. Слои названы так, чтобы их содержимое было очевидно с первого взгляда. Слой Actions (действия) в данный момент пуст. Откройте инспектор Параметры (Property) и выделите текстовое поле в левом верхнем углу сцены, под надписью "Amount you owe is:". В инспекторе Параметры присвойте текстовому полю имя копии (экземпляра) owed.
Поскольку данное текстовое поле будет отображать сумму счета за электричество (долга), мы назвали его owed.
Примечание Во Flash 5 текстовым полям назначались имена переменных, что было наиболее предпочтительным способом их идентификации при использовании в ActionScript. Во Flash MX же текстовые поля рассматриваются как экземпляры нового объекта Text Field. Поэтому теперь для их идентификации служат имена экземпляров. Хотя вы попрежнему можете назначить для текстового поля имя переменной, при таком способе для вас будут недоступны некоторые новые функциональные возможности, присущие объекту Text Field. Таким образом, для идентификации текстовых полей лучше использовать имена экземпляров. Не закрывая инспектор Параметры, выделите текстовое поле под надписью "Amount you would like to pay is:". Присвойте этому текстовому полю имя paid.
Повнимательнее взглянув на инспектор Параметры, вы увидите, что это текстовое поле относится к типу Input Text, то есть поле для ввода. Оно будет использоваться для получения информации от пользователя, а именно – суммы денег, которую он желает внести в счет оплаты. В это текстовое поле мы ввели ноль (0), эта сумма будет отображаться в нем в начале фильма. По-прежнему не закрывая инспектор Параметры, выделите текстовое поле в нижней части сцены, под кнопкой выключателем. Присвойте этому текстовому полю имя экземпляра message.
Данное текстовое поле будет отображать сообщения для пользователя, в зависимости от того, сколько он решит заплатить. Выделите экземпляр фильма-символа lightbulb и присвойте ему имя light.
Поскольку наш скрипт будет воздействовать на этот экземпляр фильма-символа, мы должны дать экземпляру имя, чтобы можно было указать на него в скрипте. На монтажном столе данного фильма-символа имеется три кадра – с метками Off, On и Hot; они будут определять вид фильма при различных условиях. Изначально на экране появится кадр Off.
В нашем скрипте (который мы вскоре напишем) мы предусмотрим, чтобы фильм-символ оставался на кадре с этой меткой, если пользователь заплатит меньше, чем он должен (не заплатил – сиди без света). Если пользователь заплатит ровно столько, сколько должен, мы переместим воспроизведение монтажного стола этого клипа к кадру с меткой On – чтобы свет включился. Если же пользователь заплатит больше, чем нужно, мы перейдем к кадру с меткой Hot, и лампочка прямо таки раскалится.
Теперь, когда все элементы в нашей сцене поименованы, можно приступить к написанию скрипта, и начнем мы с того, что дадим указание нашему фильму загрузить данные из внешнего текстового файла. Открыв панель Действия (Actions) и установив ее в Экспертный режим(Expert Mode), выделите кадр 1 слоя Actions и введите следующий скрипт: loadVariablesNum ("Electric_Bill.txt", 0);
Примечание Мы советуем оставить панель Действия в экспертном режиме, поскольку так будет проще всего вводить большинство скриптов, описанных в данной книге.
Данная строка скрипта делает единственную вещь: загружает переменные из файла Electric_Bill.txt (который мы создали ранее) в Уровень 0, то есть в фильм, с которым мы сейчас работаем. Файл Electric_Bill.txt содержит единственную переменную с именем electricBill, имеющую значение 60. Таким образом, после выполнения этой строки программного кода в нашем фильме появится переменная electricBill со значением 60. Весь процесс заключается просто в переносе переменных из текстового файла в наш фильм.
loadVariablesNum() – это действие. Мы заставили его работать особым способом, указав в скобках уникальные значения параметров. Данное действие имеет два параметра, разделяемых запятой. Первый указывает на внешний источник, содержащий данные; второй – на монтажный стол, в который должны быть загружены данные. Впоследствии вы увидите, что таким же способом осуществляется указание параметров и для многих других элементов ActionScript.
Мы поместили этот скрипт в кадр 1 нашего фильма, стало быть, он будет выполнен, как только начнется воспроизведение фильма – это важно, поскольку фильм должен заранее получить значение переменной electricBill для скрипта, который будет организовывать работу кнопки-выключателя Light Switch. Добавьте ключевой кадр в кадр 10 слоя Actions. Затем в панели Действия (Actions) введите для этого ключевого кадра следующий скрипт: owed.text = electricBill; stop ();
Итак, кадр 1 содержит действие, загружающее переменные из файла Electric_Bill.txt. Пока происходит загрузка, воспроизведение монтажного стола фильма продолжается, а когда он достигает кадра 10, выполняются действия, добавленные нами только что.
Первое действие устанавливает значение, отображаемое в экземпляре текстового поля owed, равным значению electricBill. Как вы помните, имя owed мы дали экземпляру текстового поля, расположенному в левом верхнем углу нашего фильма, а electricBill – переменная со значением 60, загружаемая из нашего текстового файла. Таким образом, данная строка скрипта приведет к тому, что в текстовом поле owed будет отображено число 60.
Как мы уже упоминали, во Flash MX текстовые поля представляют собой объекты. Являясь таковыми, они имеют многочисленные свойства. Одно из новых свойств текстового поля – это свойство text. Данное свойство используется для указания текста, который должен быть отображен в экземпляре. Приведенный скрипт демонстрирует использование этого свойства на примере отображения текста в экземпляре текстового поля с именем owed. Обратите внимание на точку (.), разделяющую имя объекта и имя его свойства. В ActionScript таким образом вы указываете, что хотите работать с чем-либо, присущим объекту – в данном случае с одним из его свойств.
Кроме того, первая строка демонстрирует использование оператора между двумя элементами – свойством объекта и переменной (ее значением). Здесь это оператор присваивания, обозначаемый знаком равенства (=), с его помощью скрипт присваивает значение переменной electricBill свойству text экземпляра текстового поля owed.
Последнее действие скрипта попросту останавливает воспроизведение монтажного стола. Поскольку это действие не требует каких-либо параметров, скобки остались пустыми.
Совет Как вы можете заметить, между кадром, содержащим действие загрузки переменных из текстового файла, и кадром 10, в котором используется загруженная переменная electricBill, имеется промежуток из нескольких кадров. Это нужно для того, чтобы текстовый файл успел действительно загрузиться. Если бы мы попытались воспользоваться переменной electricBill до того, как завершится загрузка текстового файла, то столкнулись бы с проблемами. Фактически наш фильм вел бы себя так, словно текстовый файл и вовсе не загружался. "Прокладка" из кадров, созданная нами – один из способов предупреждения такой проблемы. О других способах мы поговорим в следующих уроках.
Теперь давайте назначим скрипт для нашей кнопки Light Switch. Выделите кнопку 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. Эти переменные будут использоваться в скрипте в дальнейшем. Добавьте следующие строки в скрипт, созданный на предыдущем шаге. Их следует вставить внутри фигурных скобок ({}), сразу после строки 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 = "You underpaid your bill by " + 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 = "You overpaid your bill by " + difference + " dollars."; }
Первая строка означает: "Иначе, если (else if) пользователь ввел сумму оплаты, большую, чем сумма счета, предпринять действия, перечисленные ниже". Выполняемые здесь действия – почти те же, что и в предыдущей части, лишь с двумя небольшими (но важными) отличиями. Во-первых, экземпляр фильма-символа light переходит к кадру с меткой Hot, который представляет лампочку, раскалившуюся от лишней энергии – ведь пользователь переплатил. Во-вторых, различие имеется в сообщении – вместо слова недоплатили здесь стоит переплатили. Действия в этой секции выполняются лишь в том случае, если пользователь заплатил больше, чем нужно. В противном случае эти действия игнорируются и анализируется третья секция скрипта, которая выглядит так: else { light.gotoAndStop ("On"); message.text = "You have paid your bill in full."; }
Как видите, здесь уже не ставится вопрос, больше ли amountPaid, чем amountOwed или меньше (как было в предыдущих двух секциях). Скрипту уже незачем анализировать ситуацию, когда пользователь ввел сумму, точно соответствующую счету – дело в том, что эта секция кода будет выполнена лишь в том случае, если ни первая, ни вторая "не прошли проверку".
Итак, при нажатии кнопки выполняется только одна из этих трех секций кода. В результате на экране появляется определенный кадр фильма-символа light, а в текстовом поле message отображается соответствующее сообщение.
После того, как кнопка Light Switch будет отпущена, элементы нашей сцены должны вернуться в то состояние, в котором они находились при начале воспроизведения фильма. Давайте запрограммируем это. Не снимая выделения с кнопки Light Switch, введите следующий скрипт после того, который уже имеется в панели Действия: on (release) { light.gotoAndStop ("Off"); message.text = ""; }
Данный скрипт выполняется, как только кнопка отпущена. Он перемещает экземпляр фильма-символа light к кадру с меткой Off и стирает все из текстового поля message, возвращая эти элементы сцены к первоначальному состоянию. Сохраните файл как electricBill2.fla.
Мы используем этот файл в следующем упражнении этого урока.
Тестируем наш первый скрипт
Было бы наивно полагать, что каждый скрипт сразу же заработает так, как планировалось. Ведь, независимо от того, насколько хорошо вы знакомы с ActionScript, так легко пропустить какую-нибудь запятую или сделать ошибку в слове. Если бы это было письмо, получатель мог бы и не заметить такой ошибки, а вот Flash ошибок не прощает. Ошибка в скрипте – это "баг", дефект программы, а это значит, что скрипт либо вообще не заработает, либо будет работать, но не так, как вы планировали. К счастью, во Flash имеются полезные возможности для тестирования скриптов и выявления возможных ошибок. Если файл electricBill2.fla не открыт, откройте его.
Это файл, в который мы внесли изменения в предыдущем упражнении. В этом упражнении мы протестируем проект на функциональность при помощи инструментария Flash. В меню Flash выполните команду Управление > Проверить фильм (Control > Test Movie).
Данная команда создает временную, но полнофункциональную экспортированную версию вашего фильма и воспроизводит ее в среде тестирования Flash. Здесь можно проверить фильм во всех отношениях (определить общий размер файла, возможности потоковой передачи, внешний вид), но нас будут интересовать прежде всего интерактивные возможности – нужно выяснить, не напутали ли мы чего.
Совет Старайтесь привлекать к тестированию проекта как можно больше своих друзей и коллег. Тем самым вы сильно повысите шансы проверить все возможные сценарии взаимодействия пользователя с фильмом и выявить все ошибки. Вводите различные суммы в поле "Amount you would like to pay:", нажимая затем кнопку Light Switch. Введите сумму, меньшую 60. Если вы введете в это текстовое поле число 35, должно появиться сообщение "вы недоплатили 25 долларов", при этом лампочка (экземпляр фильма-символа light) останется выключенной. Введите сумму, большую 60. Если вы введете число 98, должно появиться сообщение "Вы переплатили 38 долларов", а символ light должен "раскалиться" (его состояние в кадре с меткой Hot). как мы сказали, так должно случиться. На самом же деле мы получим сообщение, гласящее, что мы переплатили не 38 долларов, а –38! Что ж, отметим эту ошибку и продолжим тестирование. Введите точную сумму – 60. После ввода числа должно появиться сообщение "Вы оплатили счет полностью", а лампочка – засветиться. Сотрите все, что есть в этом поле. Если вы теперь нажмете кнопку Light Switch, то получите все то же сообщение – "Вы оплатили счет полностью", и экземпляр фильма-символа light перейдет во "включенное" состояние. Несомненная ошибка; отмечаем ее и продолжаем тестирование. Введите какой-либо текст. Введя что-либо, начинающееся с буквы и нажав кнопку Light Switch, вы вновь получите сообщение "Вы оплатили счет полностью", и лампочка зажжется – снова ошибка, отмечаем и ее.
Совет Иногда, найдя при тестировании сложного проекта ошибку, лучше сразу прервать тестирование и исправить ее (а не пытаться выявить все ошибки с тем, чтобы исправить их разом). Ведь пытаясь исправить дефект программы, вы можете сделать новую ошибку. Таким образом, в результате попытки исправления сразу всех ошибок вы можете получить несколько новых. Так лучше уж сконцентрироваться на исправлении одной ошибки, чтоб не пришлось, окончательно запутавшись, возвращаться к сохраненной ранее версии фильма.
Итак, мы выяснили, что наш проект содержит три дефекта: Если пользователь переплачивает по счету, лишняя сумма в сообщении отображается как отрицательное число. Если пользователь вообще ничего не платит (пустое поле), проект реагирует неправильно. Если пользователь вводит вместо числового значения текст, проект реагирует неправильно.
Теперь давайте подумаем, чем вызваны эти дефекты. В первом случае, как нам известно, числовое значение difference, отображаемое в сообщении, вычисляется в скрипте. Кроме того, мы знаем, что проблема возникает лишь тогда, когда пользователь платит больше, чем нужно по счету. Стало быть, проблема заключается в способе вычисления difference, когда пользователь переплачивает по счету. Надо будет пересмотреть эту часть скрипта.
Что касается двух других ошибок, то дело вот в чем. Мы запрограммировали различные действия в зависимости от того, сколько заплатил пользователь. Однако мы забыли предусмотреть возможность, когда пользователь вообще ничего не вводит либо вводит текст – в таких случаях реакция нашего проекта вызывает просто смех. Надо будет внести в скрипт небольшое дополнение на такой случай. Закройте окно тестирования и вернитесь в среду разработки. Выделите кнопку Light Switch и измените в скрипте строку 9, ту, в которой значится: difference = amountOwed - amountPaid;, вместо этого напишите difference = amountPaid –amountOwed;.
Просмотрев секцию скрипта, определяющую поведение фильма в случае, когда amountPaid больше, чем amountOwed, мы обнаруживаем, что difference вычисляется путем вычитания amountPaid из amountOwed. Вот отсюда и проблема. Если пользователь платит 84 доллара, то difference будет вычислена как 60 – 84 (amountOwed минус amountPaid). Вычитание большего числа из меньшего дает отрицательный результат. Для исправления этого дефекта мы просто переставляем местами в этой строке amountOwed и amountPaid. Теперь меньшее число вычитается из большего, и мы получаем положительный результат.
Примечание Такую же строку в другой части скрипта изменять не нужно, поскольку та секция выполняется только в том случае, если пользователь платит меньше, чем нужно, и в этом случае значение difference вычисляется правильно. Не снимая выделения с кнопки Light Switch и не выходя из панели Действия (Actions), внесите дополнение и изменение в оператор if:
Дополнение: if (isNaN (amountPaid)) { message.text = "Следует ввести сумму оплаты в долларах. Попробуйте еще раз."; }
Добавленная секция предусмотрена на случай, если пользователь введет текст или вообще ничего не введет. Скрипт гласит, что если при нажатии кнопки Switch значение amountPaid не является числом (isNaN), то в сцене ничего не менять, но вывести сообщение, требующее, чтобы пользователь ввел правильное, числовое значение. Данная секция скрипта выполняется, если введенное значение не может быть преобразовано в числовое либо поле оставлено пустым. Функция isNan() – специальный инструмент ActionScript, предусмотренный как раз для выявления таких критических случаев. Обратите внимание – внутрь скобок мы поместили ссылку на имя переменной. Таким образом, функция будет анализировать значение, которое содержит эта переменная.
Примечание Далее в книге вы найдете подробное описание функции isNaN().
Это условие мы поставили самым первым, как важнейшее, которое следует проверить прежде всего при выполнении скрипта. Если пользователь введет числовое значение, эта секция скрипта будет проигнорирована, и выполнение программы продолжится так, как было описано ранее. Выполните команду меню Управление > Проверить фильм (Control > Test Movie). Вводите различные значения в текстовое поле "Amount you would like to pay:" и нажимайте кнопку Light Switch.
На сей раз фильм должен работать правильно при всех обстоятельствах. Закройте окно тестирования и вернитесь в среду разработки. Сохраните файл как electricBill3.fla.
