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

Внимание! Для работы с этим уроком необходимы учебные файлы, которые Вы можете загрузить  здесь.

Что будет изучаться

Мы с вами спланируем, создадим и протестируем интерактивную систему оплаты счетов за электричество

Для чего нужен Actionscript?

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

Сегодня не вызывает сомнений такой факт: для Flash-разработчика недостаточно умения создавать анимации, сколь бы феноменальны они ни были. Необходимо уверенное владение ActionScript, поскольку без него возможна лишь простейшая, элементарная интерактивность. Приобретя же глубокие познания в ActionScript, вы получите возможность:

• Персонализировать события для каждого пользователя
• Добиться более полного контроля над фильмами и их параметрами
• Анимировать элементы фильма программным способом – то есть без использования монтажного стола
• Выводить данные из Flash и получать их из внешних источников, создавая заполняемые бланки, программы чатов и многое другое
• Создавать динамические проекты, соотносящиеся с текущим временем и датой
• Динамически управлять громкостью звука и балансом
• И еще много чего

Вдобавок ко всем этим преимуществам нельзя не отметить тот факт, что Flash способен создавать отнюдь не только веб-материалы для просмотра и взаимодействия с пользователем. Flash умеет создавать самостоятельные приложения или минипрограммы, оперирующие независимо от браузера – а это дает возможность создавать игры, программы для демонстрации приложений и обучения пользователей и многое другое. И для этого вам тоже понадобится владеть по меньшей мере основами ActionScript.

Элементы Actionscript

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

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

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

Примечание Существуют еще и другие элементы скриптов (например, объекты, функции, циклы, свойства и методы), которые мы также подробно рассмотрим в этой книге.

События

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

Действия

Они формируют сердце скрипта; обычно под "действием" подразумевается всякая строка, содержащая команду, инструкцию для Flash – что-либо сделать, назначить, создать, изменить, загрузить или удалить.

Вот пара примеров действий из приведенного выше примера скрипта:

Вообще говоря, действия – это основная масса строк, составляющих скрипт; часто они заключены в фигурные скобки ({ }) и почти всегда завершаются точкой с запятой (; – см. далее).

Операторы

Они обозначаются различными символами (=, <, >, +, -, *, && и т.д.) и означают различные способы взаимодействия двух элементов скрипта между собой. Взгляните на следующие примеры:

taxPercent = .06; присваивает значение .06 переменной с именем taxPercent

amountA < amountB проверяет, является ли amountA меньшим, чем amountB

value1 * 500 умножает value1 на 500

Ключевые слова

К ним относятся слова, зарезервированные в синтаксисе ActionScript для специальных целей. Поэтому их нельзя использовать в качестве имен переменных, функций и меток. Например, слово on – ключевое слово, оно используется в скрипте исключительно для указания на событие, запускающее скрипт, например, on(press), on(rollOver), on(rollOut) и так далее. Употребляйте в скриптах ключевые слова только для тех целей, для которых они предназначены, иначе в результате получите лишь сообщение об ошибке. К другим ключевым словам относятся: break, case, continue, delete, do, else, for, function, if, in, instanceOf, new, return, switch, this, typeOf, var, void, while и with.

Данные

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

В нашем примере мы присвоили переменной с именем mugCost значение 5.00. Затем в том же скрипте мы, используя имя этой переменной, ссылались на значение, которое она содержит.

Фигурные скобки

Вообще, все, что заключено между открывающей и закрывающей фигурными скобками, есть действие или набор действий, которые должны быть выполнены при запуске данной самостоятельной части скрипта. Можно представить себе это так: "В результате этого – {делать это}". Например:

Точка с запятой

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

Точка

Точки (.) имеют в скриптах два применения. Во-первых, они используются при указании пути к конкретному монтажному столу. Например, _root.usa.indiana.bloomington указывает на фильм-символ с именем "bloomington", содержащийся в фильме-символе "indiana", который, в свою очередь, содержится в фильме-символе "usa", находящемся на основном монтажном столе (_root).

Во-вторых: поскольку ActionScript является объектно-ориентированным языком, большинство интерактивных задач выполняется путем изменения характеристик (свойств) объекта либо путем указания объекту что-либо сделать (вызовом метода). При изменении свойства или вызове метода точка используется для отделения имени объекта от названия нужного свойства или метода. Например, все фильмы-символы есть объекты; тогда, чтобы определить свойство вращение экземпляра фильма-символа с именем колесо, мы должны будем использовать такой синтаксис:

Видите, точка отделяет имя объекта от свойства, которому присваивается значение. Чтобы указать этому же экземпляру фильма-символа начать воспроизведение (вызвать метод play()), мы должны написать:

И вновь точка отделяет имя объекта от вызываемого метода.

Скобки

Они используются в ActionScript для разных целей. В основном – там, где бывает нужно указать какое-либо конкретное значение, требующееся для выполнения действия. Взгляните на последнюю строку скрипта-примера, содержащую указание экземпляру фильма-символа cashRegister начать воспроизведение с кадра 50:

Если заменить число 50 в скобках на 20, то смысл задачи не изменится (переход к определенному кадру), но выполнена она будет в соответствии с новым значением. Таким образом, при помощи скобок мы велим действию работать с тем, что заключено внутри них.

Кавычки

Кавычки указывают на текстовые данные. Поскольку сам скрипт является текстом, кавычки помогают программе разобраться, где инструкции или данные, а где обычные слова. Например, Derek (без кавычек) будет означать имя, например, переменной. А вот "Derek" будет означать не что иное, как слово Derek.

Комментарии

В скрипте это строки, начинающиеся двумя косыми чертами (//). Выполняя скрипт, Flash игнорирует такие строки. Комментарии могут служить заметками и пояснениями, что именно делает скрипт в этом месте. Если программа снабжена комментариями, то вы, увидев ее спустя месяцы после написания, легко сможете вспомнить логику ее работы.

Отступы и пробелы

Они на самом деле абсолютно не нужны, однако использовать пробелы и отступы в синтаксисе все же стоит. Например,

Будет выполнено точно так же, как и

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

Как правило, в скрипте игнорируются и пробелы. Вот, например, такая строка:

Выполняться она будет так же, как и

Одни программисты полагают, что с пробелами код лучше читается, а другие считают, что расставлять еще и пробелы слишком долго. Решайте сами. Но есть в отношении пробелов два правила: во-первых, имена переменных не могут содержать пробелы, а во-вторых – пробел нельзя ставить между именем объекта и связанным с ним свойством или методом. Такое написание будет правильным:

А такое – нет:

Процесс планирования

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

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

Что вообще должно происходить?

Это самый важный вопрос в процессе планирования. Ваш ответ на него должен быть как можно более ясным и информативным, однако избегайте слишком вдаваться в детали.

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

Какие данные мы должны отслеживать?

Иными словами, сколько переменных нужно для функционирования приложения? В нашем случае нужна сумма счета за электричество – $60. Кроме того, мы должны отслеживать разность между этой суммой и суммой, уплаченной пользователем, чтобы мы могли вывести эту разницу в наших сообщениях.

Что должно произойти в фильме, прежде чем начнется выполнение скрипта?

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

Теперь надо подумать о том, как эти данные – сумма счета – попадут в фильм. Мы можем поместить их в фильм в процессе создания, а можем загрузить из внешнего источника (например, с сервера или из файла) уже в процессе проигрывания фильма. Для нашего проекта мы предпочтем последнее: применим простенький скрипт для загрузки в фильм текстового файла, содержащего сумму счета ($60). Текстовый или иной файл, из которого в фильм загружаются данные, называется источником данных.

Какое событие будет запускать основной скрипт?

В нашем случае ответ очевиден: нажатие кнопки. Вообще же во Flash запускать скрипты могут любые события, поэтому этот вопрос следует обдумать. Должно ли что-нибудь происходить в фильме, когда пользователь перемещает мышь, нажимает или отпускает кнопку мыши либо нажимает ту или иную клавишу на клавиатуре? А как насчет момента, когда фильм-символ появляется на сцене? Это ведь тоже событие. А может быть, что-то должно повторяться или происходить непрерывно, пока проигрывается фильм? Такие события мы обсудим в деталях в следующем уроке.

Должны ли при запуске основного скрипта приниматься какие-либо решения?

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

Какие элементы составляют сцену? Каково их назначение?

Наша сцена будет состоять из нескольких элементов, некоторым из которых нужно будет дать имена, чтобы ActionScript мог их использовать, управлять ими и взаимодействовать с ними. В нашей сцене необходима кнопка, запускающая скрипт, которую, в свете нашего проекта (каламбур!), мы можем сделать в виде выключателя света, "тумблер" которого будет перемещаться вверх и вниз при нажатии/отпускании.

Также нам требуется динамическое текстовое поле для отображения суммы счета, назовем его owed. Еще нам нужно текстовое поле для ввода, в котором пользователь будет указывать сумму, которую он желает заплатить; это поле назовем paid. Кроме того, необходимо еще одно динамическое поле, в котором будет выводиться сообщение, генерируемое скриптом; это поле пусть называется message. И наконец, нужно "сообщение" визуальное – мы добавим на сцену большую электролампочку. Сначала, когда пользователь еще ничего не заплатил, она будет "погашена". Если пользователь заплатит точную сумму по счету, лампочка засветится, а если он переплатит – лампочка раскалится. Лампочка эта будет представлять собой фильм-символ с именем light.

Как будет выглядеть сцена?

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

Став мастером ActionScript и разработав несколько проектов, вы уже будете задавать себе все эти вопросы (и отвечать на них) интуитивно. Но, независимо от мастерства, раскадровка останется важнейшей частью процесса планирования.

Пишем первый скрипт

Теперь, когда у нас есть вся нужная информация, а также эскизная раскадровка нашего проекта, давайте приступим к его сборке.

1. Откройте Блокнот (Notepad) Windows или Apple Simple Text, создав новый текстовый файл, и введите следующий текст: &electricBill=60.

В первой части нашего упражнения мы создадим источник данных, загружаемых в наш фильм при его воспроизведении. Для нашего проекта этот источник данных содержит значение, представляющее собой сумму счета за электричество. Flash, загрузив этот текстовый файл, интерпретирует строку текста и создаст в фильме ячейку данных (переменную) с именем electricBill и присвоит ей значение 60. Значение этой переменной будет использоваться в нашем проекте для нескольких целей.

Примечание Загрузка данных во Flash из внешних источников подробно обсуждается в Уроке 11 – Ввод и вывод данных во Flash. О переменных подробно рассказано в Уроке 7 – Использование динамических данных.

2. Дайте текстовому файлу имя Electric_Bill.txt и сохраните его в папке, содержащей файлы для этого урока, а затем откройте electricbill1.fla из папки Lesson01/Assets.

Цель данной книги состоит в том, чтобы обучать ActionScript, а не работе во Flash, поэтому вы обнаружите, что практически все элементы нашего проекта, за исключением скриптов, уже на месте.

Основной монтажный стол нашего проекта содержит пять слоев, в каждом из которых по 10 кадров. Слои названы так, чтобы их содержимое было очевидно с первого взгляда. Слой Actions (действия) в данный момент пуст.

3. Откройте инспектор Параметры (Property) и выделите текстовое поле в левом верхнем углу сцены, под надписью "Amount you owe is:". В инспекторе Параметры присвойте текстовому полю имя копии (экземпляра) owed.

Поскольку данное текстовое поле будет отображать сумму счета за электричество (долга), мы назвали его owed.

Примечание Во Flash 5 текстовым полям назначались имена переменных, что было наиболее предпочтительным способом их идентификации при использовании в ActionScript. Во Flash MX же текстовые поля рассматриваются как экземпляры нового объекта Text Field. Поэтому теперь для их идентификации служат имена экземпляров. Хотя вы попрежнему можете назначить для текстового поля имя переменной, при таком способе для вас будут недоступны некоторые новые функциональные возможности, присущие объекту Text Field. Таким образом, для идентификации текстовых полей лучше использовать имена экземпляров.

4. Не закрывая инспектор Параметры, выделите текстовое поле под надписью "Amount you would like to pay is:". Присвойте этому текстовому полю имя paid.

Повнимательнее взглянув на инспектор Параметры, вы увидите, что это текстовое поле относится к типу Input Text, то есть поле для ввода. Оно будет использоваться для получения информации от пользователя, а именно – суммы денег, которую он желает внести в счет оплаты. В это текстовое поле мы ввели ноль (0), эта сумма будет отображаться в нем в начале фильма.

5. По-прежнему не закрывая инспектор Параметры, выделите текстовое поле в нижней части сцены, под кнопкой выключателем. Присвойте этому текстовому полю имя экземпляра message.

Данное текстовое поле будет отображать сообщения для пользователя, в зависимости от того, сколько он решит заплатить.

6. Выделите экземпляр фильма-символа lightbulb и присвойте ему имя light.

Поскольку наш скрипт будет воздействовать на этот экземпляр фильма-символа, мы должны дать экземпляру имя, чтобы можно было указать на него в скрипте. На монтажном столе данного фильма-символа имеется три кадра – с метками Off, On и Hot; они будут определять вид фильма при различных условиях. Изначально на экране появится кадр Off.

В нашем скрипте (который мы вскоре напишем) мы предусмотрим, чтобы фильм-символ оставался на кадре с этой меткой, если пользователь заплатит меньше, чем он должен (не заплатил – сиди без света). Если пользователь заплатит ровно столько, сколько должен, мы переместим воспроизведение монтажного стола этого клипа к кадру с меткой On – чтобы свет включился. Если же пользователь заплатит больше, чем нужно, мы перейдем к кадру с меткой Hot, и лампочка прямо таки раскалится.

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

7. Открыв панель Действия (Actions) и установив ее в Экспертный режим(Expert Mode), выделите кадр 1 слоя Actions и введите следующий скрипт:

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

Данная строка скрипта делает единственную вещь: загружает переменные из файла Electric_Bill.txt (который мы создали ранее) в Уровень 0, то есть в фильм, с которым мы сейчас работаем. Файл Electric_Bill.txt содержит единственную переменную с именем electricBill, имеющую значение 60. Таким образом, после выполнения этой строки программного кода в нашем фильме появится переменная electricBill со значением 60. Весь процесс заключается просто в переносе переменных из текстового файла в наш фильм.

loadVariablesNum() – это действие. Мы заставили его работать особым способом, указав в скобках уникальные значения параметров. Данное действие имеет два параметра, разделяемых запятой. Первый указывает на внешний источник, содержащий данные; второй – на монтажный стол, в который должны быть загружены данные. Впоследствии вы увидите, что таким же способом осуществляется указание параметров и для многих других элементов ActionScript.

Мы поместили этот скрипт в кадр 1 нашего фильма, стало быть, он будет выполнен, как только начнется воспроизведение фильма – это важно, поскольку фильм должен заранее получить значение переменной electricBill для скрипта, который будет организовывать работу кнопки-выключателя Light Switch.

8. Добавьте ключевой кадр в кадр 10 слоя Actions. Затем в панели Действия (Actions) введите для этого ключевого кадра следующий скрипт:

Итак, кадр 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.

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

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

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

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

Такая команда преобразует текст "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);:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тестируем наш первый скрипт

Было бы наивно полагать, что каждый скрипт сразу же заработает так, как планировалось. Ведь, независимо от того, насколько хорошо вы знакомы с ActionScript, так легко пропустить какую-нибудь запятую или сделать ошибку в слове. Если бы это было письмо, получатель мог бы и не заметить такой ошибки, а вот Flash ошибок не прощает. Ошибка в скрипте – это "баг", дефект программы, а это значит, что скрипт либо вообще не заработает, либо будет работать, но не так, как вы планировали. К счастью, во Flash имеются полезные возможности для тестирования скриптов и выявления возможных ошибок.

1. Если файл electricBill2.fla не открыт, откройте его.

Это файл, в который мы внесли изменения в предыдущем упражнении. В этом упражнении мы протестируем проект на функциональность при помощи инструментария Flash.

2. В меню Flash выполните команду Управление > Проверить фильм (Control > Test Movie).

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

Совет Старайтесь привлекать к тестированию проекта как можно больше своих друзей и коллег. Тем самым вы сильно повысите шансы проверить все возможные сценарии взаимодействия пользователя с фильмом и выявить все ошибки.

3. Вводите различные суммы в поле "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, когда пользователь переплачивает по счету. Надо будет пересмотреть эту часть скрипта.

Что касается двух других ошибок, то дело вот в чем. Мы запрограммировали различные действия в зависимости от того, сколько заплатил пользователь. Однако мы забыли предусмотреть возможность, когда пользователь вообще ничего не вводит либо вводит текст – в таких случаях реакция нашего проекта вызывает просто смех. Надо будет внести в скрипт небольшое дополнение на такой случай.

4. Закройте окно тестирования и вернитесь в среду разработки. Выделите кнопку Light Switch и измените в скрипте строку 9, ту, в которой значится: difference = amountOwed - amountPaid;, вместо этого напишите difference = amountPaid –amountOwed;.

Просмотрев секцию скрипта, определяющую поведение фильма в случае, когда amountPaid больше, чем amountOwed, мы обнаруживаем, что difference вычисляется путем вычитания amountPaid из amountOwed. Вот отсюда и проблема. Если пользователь платит 84 доллара, то difference будет вычислена как 60 – 84 (amountOwed минус amountPaid). Вычитание большего числа из меньшего дает отрицательный результат. Для исправления этого дефекта мы просто переставляем местами в этой строке amountOwed и amountPaid. Теперь меньшее число вычитается из большего, и мы получаем положительный результат.

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

5. Не снимая выделения с кнопки Light Switch и не выходя из панели Действия (Actions), внесите дополнение и изменение в оператор if:

Дополнение:

Изменение:

Как видите, после этой модификации первое проверяемое условие стало вторым. А первым теперь будет проверяться новое условие.

Добавленная секция предусмотрена на случай, если пользователь введет текст или вообще ничего не введет. Скрипт гласит, что если при нажатии кнопки Switch значение amountPaid не является числом (isNaN), то в сцене ничего не менять, но вывести сообщение, требующее, чтобы пользователь ввел правильное, числовое значение. Данная секция скрипта выполняется, если введенное значение не может быть преобразовано в числовое либо поле оставлено пустым. Функция isNan() – специальный инструмент ActionScript, предусмотренный как раз для выявления таких критических случаев. Обратите внимание – внутрь скобок мы поместили ссылку на имя переменной. Таким образом, функция будет анализировать значение, которое содержит эта переменная.

Примечание Далее в книге вы найдете подробное описание функции isNaN().

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

5. Выполните команду меню Управление > Проверить фильм (Control > Test Movie). Вводите различные значения в текстовое поле "Amount you would like to pay:" и нажимайте кнопку Light Switch.

На сей раз фильм должен работать правильно при всех обстоятельствах.

6. Закройте окно тестирования и вернитесь в среду разработки. Сохраните файл как electricBill3.fla.

Поздравляем – первый урок завершен!