Flash программирование с нуля. Программирование в Flash. Предопределённые объекты Macromedia Flash. Язык ActionScript

Flash-программирование

программа элективного курса и дидактическое пособие для учителя и ученика

Программа курса. 1

1. Введение: 1

2. Тематика курса: 2

3. Литература: 2

Дидактическое пособие для учителя и ученика. 2

1. Введение, окно «действия кадра». 2

2. Переменные. 4

3. Поля ввода-вывода. 5

4. Условный оператор. 8

5. Циклы «с параметром» и циклы «пока». 11

7. Объектно-ориентированное программирование. 17

8. Программное изменение свойств. 19

9. Трехкадровые циклы. Программная анимация. 22

10. Проект «Интерактивная игра - Тир». 24

Программа курса

1. Введение:

Программа Macromedia Flash поражает своими возможностями. Помимо развитых средств для рисования и анимации Flash имеет встроенный язык программирования Action Script. Овладение этим языком позволяет не только создавать программную анимацию, Flash-игры, и интерактивные web-страницы, но и дает знания о технологиях объектно-ориентированного программирования (далее ООП).

Не смотря на то, что создатели Flash постарались сделать программирование простым даже для неподготовленного пользователя, овладение этим инструментов требует достаточно большого времени. Данный курс – элективный, ученики выбирают его для более осознанного выбора профиля в старшей школе. Подробное изучение программы, выполнение серьезных проектов может стать задачей профильных курсов (например «Web-программирование», «Web-дизайн», «Объектно-ориентированное программирование» и др.), а также самостоятельного изучения. Курс «Flash-программирование» предназначен на учеников 9 классов , уже знакомых с Flash-анимацией и основами программирования. В рамках элективного курса вполне возможно освоение основ программирования, технология ООП, выполнение несложных проектов во Flash. Курс включает в себя 8 проектов, в том числе проект Flash-калькулятора и проект интерактивной игры. Курс снабжен дидактическим пособием для учителя и ученика.

Цель курса:

Заинтересовать учащихся, показать возможности современных программных средств для создания интерактивных приложений; познакомить с основами объектно-ориентированного программирования; углубление знаний о Macromedia Flash.

Задача курса:

Познакомить с технологией объектно-ориентированного программирования; показать применение Action Script, для создания интерактивных приложений; создать два проекта: Flash-калькулятор и интерактивную игру «тир».

Требования к знаниям учащихся:

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

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

Требования к компьютеру:

Компьютер с установленной программой Macromedia Flash MX (или выше).

Курс «Flash-программирование» рассчитан на 12 часов.

2. Тематика курса:

Тематика

кол-во часов

Повторение Flash.

Поля ввода-вывода, алгоритмические конструкции

типы полей (статическое, динамическое, вывода); объявление переменных, переменные символьные и числовые, добавление кода к кнопке, условный оператор, цикл с параметром, цикл пока, их реализация во Flash.

типовые задачи: расчет стоимости полета, решение квадратного уравнения, возведение в степень, нахождение элемента ряда суммы ряда

проект: Flash-калькулятор

Основные понятия ООП

объект, свойств, метод, событие

Программное изменение свойств. Программная анимация.

изменяемые свойства; создание символов, их имена; изменение свойств символов, особенности выполнения программного кода во Flash, трехкадровые циклы.

типовые задачи: создание объекта с изменяемыми свойствами (нажатие на соответствующие клавиши). создание движущегося объекта.

проект: Интерактивная игра Тир.

3. Литература:

Белунцов В. Macromedia Flash: Анимация в Интернете. «ДЕСС Ком», Москва 2001. Flash MX 2004 материалы сайта www. *****

Дидактическое пособие для учителя и ученика

1. Введение, палитра «Action»

Программа Macromedia Flash имеет собственный язык программирования Action Script. Он позволяет сделать Flash-ролики интерактивными. Возможности языка достаточно велики, что позволяет создавать серьезные программы. Action Script не является самостоятельным языком программирования. Он представляет из себя набор скриптов – фрагментов кода, которые «живут» только внутри Flash-ролика, что впрочем, не мешает создавать полноценные программы.

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

Для того чтобы добавить программный код вам нужно выделить ключевой кадр, в который вы хотите добавить скрипт (или выделить созданную кнопку) и нажать на клавишу F9 (рисунок 1).

Рис. 1 Панель Action.

Давайте рассмотрим основные элементы окна «Action». Левая часть окна занята списком команд, которые вы можете выбирать, дважды щелкая на них левой клавишей мыши. Все команды, а их достаточно много, сгруппированы в двенадцать блоков «Global Function», «Global Properties» и т. д. После щелчка команда переносится в правую часть окна. В нем формируется программный код. Вы можете удалять ненужные команды (клавиша Delete) или перемещать вверх-вниз по скрипту либо с помощью клавиш управления курсором либо с помощью кнопок. Разумеется, вначале перемещаемая или удаляемая команда должна быть выделена. Нижняя часть окна отдана под изменяемые параметры каждой конкретной команды. Например, в команде перехода gotoAndPlay() нужно указывать, к какому кадру нужно перейти при достижении данной строчки. Для этого в скобках нужно набрать необходимый номер кадра.

При написании программного кода удобнее и быстрее набирать код вручную. При этом необходимо помнить, что язык ActionScript внимание на регистр набираемых вами команд. Это означает, что команда GoToandPlay() – будет ошибочной.

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

Вопросы для повторения:

Что такое скрипт? При каких событиях выполняется программный код в Flash? Как вызвать палитру «Action»? Из каких элементов состоит палитра «Action»? Как из Flash-ролика создать запускаемый файл?

2. Переменные

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

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

Первое число будет храниться в переменной x1, а второе в переменной x2. Результат пусть сохраняется под именем summa и выводиться на экран. Для того чтоб сделать поле вывода (подробней об этом в следующем уроке) щелкните на инструмент текст и выделите с помощью него область экрана – будущее текстовое поле. После зайдите в плавающую панель Символ (меню окно – панели – символ) и во вкладке Параметры текста измените тип текстового поля Stutic Text на Dimamic Text (Рисунок 2). Обязательно задайте имя этого поля Переменная – summa. Также, чтобы поле было видно на экране, установите галочку рамка/фон.

Рис. 2 Создание динамического поля для вывода значений.

Теперь сопоставим сделанной кнопке код. Выделим кнопку и нажмем F9.

В левой части окна выбираем блок Операции – Установить переменную. В нижней части окна задаем параметры: переменная – x1, значение 5. Обратите внимание, рядом с полем значение находится переключаемый параметр выражение. Его нужно обязательно выбрать, в противном случае в переменной x1 будет храниться на число 5, а символ. Именно таким способом происходит задание типа переменной. Как вы поняли в AS всего два типа переменных числовой и строковый, заранее описывать типы, как это принято в языке Turbo Pascal. Аналогичные действия проделайте для второй переменной, соответственно ее имя – x2, а значение 8. Нам осталось дописать третью строку - устанавливаем третью переменную, ее имя: summa (такое же как и имя поля вывода), значение: x1 + x2, разумеется, выбран элемент выражение.

В результате этих операций в правой части у вас появляется код, изображенный на рисунке (Рисунок 3). Обратите внимание, каждая команда отделяется точкой с запятой, это Flash делает автоматически. Вначале находится команда on (release), она показывает, что данный код начнет выполняться при отпускании клавиши мыши от кнопки. Так как данный код сопоставляется экранной кнопе, то данная команда добавляется автоматически. После в фигурных скобках идет код, который должен выполняться при наступлении события.

Вот и все! Если вы все сделали правильно, то перейдя в режим просмотра ролика, и нажав на вашу кнопку в поле вывода появляется число 13.

Вопросы для повторения:

Как задать имя переменной для вывода тектовой или числовой информации? Какие типы переменных используются в Flash? Как показать, что созданная переменная - числовая? Как создать кнопку в Flash и добавить для нее программный код? Что означает команда on (release) в начале скрипта?

3. Поля ввода-вывода

Изучение нового языка программирования начинается с написания программ, в которых производится ввод начальных значений, после с ними происходят какие-то арифметические преобразования и на экран выводится полученный результат. Для вывода текста на экран в Flash используются текстовые поля. Для создания текстового поля вам нужно выбрать инструмент Текст (на панели инструментов) и поставив курсов в место, где нужно добавить текст вы «рисуете» текстовый блок (Рисунок 4).

Рис. 4 Создание текстового поля.

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

Статическое поле применяемся для вывода надписей на сцене Flash. Как следует из названия, это поле не может изменяться программно. Все, что вам доступно, это задать шрифт, размер, цвет и т. д. При наборе текста, данное поле будет автоматически расширяться, отображая вводимый текст в несколько строк. При этом ширина текстового поля будет оставаться той, которую вы задаете при «рисовании» текстового блока. Для ее изменения вам нужно выделить блок инструментом Текст, и передвинуть правый верхний маркер текстового блока.

Рисунок 5

Динамическое поле применяется для создание полей вывода, в них информация может обновляться по ходу выполнения вашего ролика. Для того, чтобы обращаться к текстовому блоку программно, у него должно быть имя, которое задается в поле «переменная» (Рисунок 5). Я советую вам использовать в качестве имен переменных только латинские символы, без пробела. В том же окне вы можете включить свойство Рамка/фон. Теперь на листе появится рамка, в которой будет появляться выводимый текст, это очень удобно. Поле со списком, по умолчанию в нем выбрано Single Line, позволяет задать будет ли текст выводиться в одну строку и ли в несколько (значение MultiLine). Переключатель «выбираемый», по умолчанию он включен, определяет сможет ли пользователь выделять значения из данного поля, например, для того чтобы скопировать их в буфер обмена. Также как и для любого поля, вы можете задавать параметры текста: шрифт, размер, цвет и т. д. Если вы наберете в данном поле какой-либо текст, он будет отображаться до тех пор, пока программа не изменит его значение.

Поле ввода или Input Text применяется для ввода значений с клавиатуры. Окно параметров поля ввода внешне напоминает окно, рассмотренное выше. Главным параметром здесь также является поле «переменная». Вы задаете под каким именем будут записываться данные, введенные пользователем.

Рисунок 6

Понимая назначение текстовых полей вы сможете сделать следующий проект. «В компьютер вводятся стоимость взрослого авиабилета, а также количество взрослых и детей, совершающих полет. Компьютер при нажатии на соответствующую кнопку вычисляет стоимость детского билета (50% от стоимости взрослого) и общую стоимость полета.» Смотри внешний вид программы (Рисунок 6). Как несложно заметить в данной задачи осуществляется ввод значений и вывод результатов, весь код должен выполняться при нажатии на кнопку, а стало быть, должен сопоставлен этой кнопке.

Для начала создайте пять статических текстовых полей, заполните их соответствующим текстом.

Создайте три поля ввода, дайте переменным для каждого поля уникальные имена, например: stv (стоимость взрослого билета), kolv (количество взрослых) и kold (количество детей).

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

Сделайте две кнопки «расчет стоимости полета» и «очистка полей»

Для первой кнопки добавьте следующий код (кнопка, правая клавиша – операции):

if (stv==null) {

if (kolv==null) {

if (kold==null) {

itog = stv * kolv + std * kold;

Предпоследняя строка вычисляет стоимость детского билета (половина от стоимости взрослого) и заносит это значение в переменную std (имя соответствующего поля вывода). В последней строке вычисляется итоговая сумма (переменная itog), и ее значение заносится в соответствующее поле вывода.

В принципе, можно было обойтись этими двумя строчками кода. Но так как человек, который будет работать с этой программой вовсе не обязательно будет вводить цифру ноль если дети в полете не участвуют. А это означает, что стоимость детского билета (числовое значение) будет умножаться на пустое значение (строковое значение). Результатом такого «умножения» будет сообщение об ошибке в соответствующем поле вывода. Для предотвращение этого компьютер проверяет является ли поле ввода пустым (kold==null) и если это так, присваивает переменной kold значение равное нулю. Такая конструкция называется условным оператором. Подробней о ней в следующей теме. Если для вас пока сложно работать с условиями, вы можете их опустить, но не забывайте, пустых полей не должно быть!

Для того, чтобы завершить проект, добавим соответствующий код для кнопки «очистка полей»:

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

Вопросы для повторения:

Какие типы тектовых полей используются в Flash? Какие изменяемые параметры имеет динамическое текстовое поле? Какой тип поля используется для ввода значений с клавиатуры? Объясните смысл следующей строчки кода: itog = stv * kolv + std * kold;? Для чего в описываемом проекте используется условный оператор?

4. Условный оператор

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

Рисунок 7

Вызов условного оператора осуществляется щелчком на команде Операции - Если (Рисунок 7). В правой части окна появляется конструкция:

if (<Не установлено>) {

Вместо <не установлено> вы должны написать операцию сравнения, вы набираете ее в поле «Условие». Примером, такого условия может быть z<10, (переменная z меньше десяти).

Рассмотрим основные операции сравнения:

> меньше;

< больше;

>= больше либо равно;

<= меньше либо равно;

Равно (обратите внимание, два знака равенства);

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

Часто, необходимо одновременного выполнения нескольких условий. Для этого применяются булевы (логические) иперации:

&& или and –логическое И;

|| или or – логическое ИЛИ;

Или not – логическое НЕ.

Например, условие (a == 10) && (z > 5) будет истинным только тогда, когда переменная а равна десяти и одновременно переменная z больше пяти.

Условие – это вопрос на который может быть только два ответа «да» и «нет». Если условие истинно, то выполняются действия, заключенные в фигурные скобки.

Если нам нужно добавить группу команд, которые должны выполняться, когда условие ложно, вам нужно добавить Операции – Else. Тогда фрагмент кода примет вид:

if (<Не установлено>){

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

Рисунок 8

Рассмотрим как реализуются изложенные принципы для решения классической задачи – нахождения корней квадратного уравнения. «В компьютер вводятся три числа – параметры квадратного уравнения ax2 + bx + c = 0. На основе введенных данных, компьютер определяет сколько корней имеет данное уравнение, вычисляет их и выводит результаты на экран. Представлен примерный вид окна программы (Рисунок 8).

Для выполнения данного проекта:

Создайте в первом кадре на основной сцене три поля ввода и дайте им соответствующие имена: a, b, c. Сделайте видимыми их границы.

Создайте несколько статических текстовых полей для подписей полей ввода-вывода: x2, =0, дискриминант и т. д.

Создайте четыре динамических текстовых полы: d – дискриминант, r – решение, x1 – значение первого корня, x2 – значение второго корня.

Создайте две кнопки «решить уравнение» и «очистить».

Для первой кнопки «решить уравнение» добавьте следующий программный код, текст, помеченный знаком апострофа – комментарий, его вставлять необязательно:

if (a == null) {

if (b == null) {

if (c == null) {

‘ три первых условных оператора проверяют являются ли поля a, b, c пустыми,

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

‘ вычисляется дискриминант (переменная d).

r = "нет корней";

‘ если условие выполняется – дискриминант меньше нуля переменная d

‘ принимает соответствующее текстовое значение

} else if (d == 0) {

r = "один корень";

x1 = (-b)/(2*a);

x2 = (-b)/(2*a);

‘ используется команда Операции – Else If. Благодаря ему выполнение следующих

‘ действий начинается с проверки условия. Если оно истинно – дискриминант

‘ равен нулю, производятся аналогичные вычисления, переменные, связанные

‘ с текстовыми полями принимают соответствующие значения

r = "два корн" + Chr(255);

‘ самая загадочная строка. Необходимо, чтобы выводилась надпись «два корня»,

‘ но нам не повезло с русской буквой я. Flash воспринимает код, который

‘ соответствует этой букве, как знак переноса на другую строку.

‘ Для этой цели значение символа 255 добавляется к текстовой строке. Такое

‘ действие – соединение двух текстовых строк называется конкатенацией.

kd = Math. sqrt(d);

x1 = (-b+kd)/(2*a);

x2 = (-b-kd)/(2*a);

‘ для вычисления квадратного корня использована команда Math. sqrt(d);

‘ для ее вызова используется команда Объектов – Математика – Sqrt

Нам осталось добавить для второй кнопки следующий код:

Мне кажется, что комментарии тут излишни. Проект готов. Сохраняйте его, тестируйте.

Вопросы для повторения:

Какая конструкция задает в Flash условный оператор? В чем разница конструкций: if (<Не установлено>){} else {} и if (<Не установлено>)}? Как задается отрицание в Flash? Что такое булевы операции, как они записываются в Flash? В чем разница строчек: a=10 и a==10?

5. Циклы «с параметром» и циклы «пока»

Для выполнения повторяющихся действий в языках программирования используются специальные конструкции, которые называются операторами цикла. Таких циклических конструкций несколько, мы рассмотрим две наиболее часто встречающиеся цикл «с параметром» и цикл «пока». Рассмотрим, как они реализованы в языке Action Script.

Цикл «с параметром» применяется в том случае, когда заранее известно сколько раз нужно выполнить определенное действие. Можно провести следующую аналогию - для приготовления супа необходимо почистить шесть картофелин. Если записать действия в виде линейного алгоритма, то можно заметить что шесть раз будут повторяться команды «взять картофель», «очистить кожуру», «вымыть». Для большей компактности алгоритма, а также для того, чтобы в дальнейшем его можно было легко изменять, логичней записать это в виде цикла:

Повторить (6 раз) {

«взять картофель»;

«очистить кожуру»;

«вымыть»;

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

Рисунок 9

Для создания цикла «с параметром» в Flash, вам необходимо в окне Действия кадра выбрать команду Операции – Для. В результате в правой части экрана появится конструкция цикла (Рисунок 9).

Рисунок 10

Для данной конструкции нужно настроить три поля. Начальное – здесь нужно написать начальное значение некоторой переменной, ее еще называют счетчик. Например, i=1. Условие – до каких пор переменная i будет изменяться. Например, i<=10. Следующий – с каким шагом изменяется переменная i. Если вы хотите, чтобы переменная каждый раз увеличивалась на единицу, то можно записать i++. В результате появляется конструкция:

for (i=1; i<=10; i++) {

Ее смысл в следующем – переменная i будет принимать значения от одного до десяти и десять раз будут выполняться команды, взятые в фигурные скобки. Саму переменную i можно использовать в теле цикла, также там можно использовать другие алгоритмические конструкции, условные операторы и т. д.

Давайте рассмотрим, как реализуется данная конструкция в следующей задаче. «Создать программу, вычисляющую a в степени n (n – целочисленное значение). Значение a и n вводятся в соответствующие поля. Внешний вид программы представлен на Рисунок 10.

Создайте одно динамическое поле и назовите его an.

if (n<>0) {

‘ Задача имеет смысл, только если n > 0, это проверяет условный оператор

for (i=2; i<=n; i++) {

‘ Так как в первой строке переменная an уже приняла значение равное а, поэтому начальное значение счетчика равно двум.

Для кнопки «очистить» добавьте следующий код:

Комментарии мне кажутся излишними.

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

Пока (есть картошка?) делать {

Всякий раз, выполнив указанный набор команд необходимо проверить выполняется ли условие, если да, то вновь выполняется тело цикла.

Рисунок 11

Для создания цикла «пока» в Flash, вам необходимо в окне действия кадра выбрать команду Операции – While. В результате в правой части экрана появится конструкция цикла (Рисунок 11).

Для данной конструкции нужно настроить только одно поле. Условие – при каком условие цикл выполняется. Например, y<10.

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

Рисунок 12

Любой алгоритм, который можно записать с помощью цикла «с параметром» можно записать и с помощью цикла «пока». А вот обратное не верно. Существуют задачи которые другими способами как использовать конструкцию «While» не решить. Рассмотрим такую задачу. «Известно, что ряд чисел 1, 1/2, 1/3 … 1/n является расходящимся, это значит сумма таких чисел сможет превысить любое наперед заданное число A. Найдите такое n, при котором сумма ряда 1 + 1/2 + 1/3 + … + 1/n станет больше заданного числа А. Внешний вид программы представлен на Рисунок 12.»

Создайте одно поле ввода данных и назовите его a.

Создайте два динамических поля и назовите их соответственно n и s.

Создайте необходимое кол-во статичных подписей «а=», «n=» и т. д.

Создайте две кнопки «вычислить» и «очистить».

Для кнопки «вычислить» добавьте следующий код:

‘ Так как в цикле необходимо проверять условие s

while (s

Для кнопки «очистить» код аналогичен коду из предыдущей задачи.

Не смотря на то, что теоретически для любого A найдется значение n но в действительности даже для A=10, n=12367. Для больших значений A вычисление данной задачи может затянуться на минуты и часы…

Вопросы для повторения:

В чем отличие цикла "с параметром" и "пока"?

Какой цикл является более универсальным?

Что такое "счетчик" в цикле "с параметром" и что означает команда i++?

Как написать программу, выполняющую возведене в степень с помощью цикла "пока"?

Почему при выполнении цикла "пока" возможно зависание программы? Как этого избежать?

6. Проект «Flash-калькулятор»

Для того, чтобы посмотреть язык Action Script в действии давайте сделаем что-то действительно стоящее. Давайте сделаем калькулятор, внешний вид представлен на Рисунок 13.

Рисунок 13

Цель проекта: Создать стандартный калькулятор для Internet с возможностью производить стандартные арифметические действия. Для ввода значений использовать как мышь, так и стандартные клавиши клавиатуры.

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

Нас ожидают три проблемы:

Первая проблема состоит в том, что, набирая первое число, каждая цифра добавляется в конец уже набранного числа, а после нажатия кнопки с изображением арифметического действия следующая цифра ставится в начало строки.

Когда мы будем вводить первое число, например 245, мы последовательно нажимаем кнопки 2, 4 и 5. Но как калькулятор узнает, что когда мы нажали на кнопку 2 – это двести, а не двадцать или две тысячи? Иными словами, как узнать какое число запоминать в первой переменной?

Третья проблема в том, что нужно использовать как минимум три переменных для первого, второго числа и также результата, а динамическое поле и имя его переменной только одно!

220" height="52" bgcolor="white" style="vertical-align:top;background: white"> https://pandia.ru/text/78/159/images/image013_35.gif" width="12" height="36">

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

Все это означает, что нам не обойтись одним ключевым кадром. Желательно на новом слое создайте ключевой кадр и в нем задайте значение переменной stek равное единице. Во втором ключевом кадре добавьте всего одну команду Базовые действия – Остановить. Содержимое слоя калькулятор, в котором находятся все кнопки передвиньте во второй кадр (Рисунок 14). Теперь при запуске программы переменная stek принимает нужное значение, ролик переходит во второй кадр и останавливается. Все дальнейшие действия будут проходить именно там.

Рисунок 14

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

Ну а условный оператор и переменная stek помогут довести дело до конца. Ниже

представлен код, присвоенный клавише 1. Для всех остальных кнопок код аналогичен.

on (release, keyPress "1") {

‘ помимо обычного on (release) добавлена возможность использовать клавиатуру. keyPress "1" означает, что следующий код будет исполняться не только при нажатие на экранную кнопку, но и при нажатие на клавишу на клавиатуре. Как этого добиться смотри Рисунок 15.

‘ Если переменная stek равна единице, то переменная text, связанная с динамическим полем вывода примет значение равное единице, а переменная stek станет равна двум.

} else if (stek==2) {

‘ Если переменная stek равна двум, то единица не первая цифра в числе, поэтому она присоединяется к переменной text справа

} else if (stek==3) {

‘ Если переменная stek равна трем, то единица первая цифра во втором числе

Рисунок 15

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

on (release, keyPress "+") {

и программному коду, соответствующему клавише равно.

on (release, keyPress "=") {

text = parseFloat(a)+parseFloat(text);

} else if (o=="m") {

text = parseFloat(a)-parseFloat(text);

} else if (o=="u") {

text = parseFloat(a)*parseFloat(text);

} else if (o=="d") {

text = parseFloat(a)/parseFloat(text);

В первом фрагменте должно быть все ясно. Если нажата клавиша «плюс» еще одна переменная o принимает значение p (plus), а значение переменной text запоминается во временной переменной a. И когда, наконец, нажимается клавиша равно, компьютер должен сложить значение хранящееся в переменной text и переменную a. Так как в переменных хранятся текстовые значения необходимо использовать функцию parseFloat(), которая преобразует текстовое выражение в число. Для ее вызова используется команда Функции – parseFloat.

Запускайте проект, тестируйте его. Нельзя сказать, полученный калькулятор идеален. В нем нет стандартных математических функций, для выполнения нескольких действий подряд всегда нужно нажимать равно. Но все усовершенствования вы можете сделать самостоятельно. Мы научились главному. Создавать несложные программные продукты с помощью Macromedia Flash.

Вопросы для повторения:

С какими проблемами мы столкнулись создавая калькулятор? В чем назначение переменной stek? Почему нажимая на цифровую клавишу в переменной должно храниться текстовое выражение? Для чего служит функция parseFloat()? Предложите идею как выполняя несколько арифметических действий "подряд" не нажимать в промежутках клавишу "равно"?

7. Объектно-ориентированное программирование.

Если вы знакомы с программированием на языках, таких как Pascal или Basic, то вы наверно заметили, что программирование на Flash на них совсем не похож. Все дело в том, что Action Script ближе не к процедурным языкам программирования, а к объектно-ориентированным, таким как Visual Basic или Delphi.

Не собираясь подробно останавливаться на сравнении этих языков, тем боле, что Action Script – это не самостоятельный язык, основные понятия нам необходимо знать. Прошу сразу простить меня за несколько вольное изложение такого фундаментального понятия как объектно-ориентированное программирование (ООП), в основе которого лежат такие непростые понятия как инкапсуляция и полиморфизм.

В основе ООП лежит объектная модель приложения, где все объекты являются элементами определенного класса (Рисунок 16). Так в основе приложения Flash лежит ролик, он состоит из одной или нескольких сцен. На сцене находятся графические объекты и объекты библиотеки. Также сцена имеет временную шкалу, на которой находятся кадры. Ключевые кадры, символы типа клип и типа кнопка могут иметь собственный код на языке Action Script.

В настоящих объектно-ориентированных языках к каждому элементу объектной модели можно обращаться программно. В Macromedia Flash вы можете обращаться программно с помощью Action Script только к некоторым из таких элементов.

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

https://pandia.ru/text/78/159/images/image020_25.gif" width="612" height="420 src=">

Рисунок 16

Объектную модель вашего конкретного ролика вы всегда сможете посмотреть с помощью плавающей панели «Проводник по видеофрагментам».

рисунок 17 (представлен фрагмент объектной модели для предыдущего проекта
Flash-калькулятор)

Изменяемые объекты имеют свойства, то есть то, что можно изменять. Например, клип видеофрагмента имеет свойство координату X, в Action Script существуют методы, с помощью которых это свойство мы можем изменять. (и тем самым создавать программную анимацию). Подробней об этом в следующей главе.

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

Вопросы для повторения:

Назовите объектно-ориентированные языки программирования. Из каких элементов состоит объектная модель Flash? Какие элементы вы можете изменять программно? Поясните смысл терминов объект, свойство, метод, событие. На какие события реагирует Flash-ролик?

8. Программное изменение свойств.

Символы библиотеки типа клип видеофрагмента могут иметь изменяемые свойства. Это означает, что вы можете программно изменить размер, положение или видимость данного объекта. Как это реализовано?

Рисунок 17

Нарисуйте объект, например прямоугольник.

Поместите его в библиотеку, причем обязательно он должен быть клипом видеофрагмента;

На плавающей панели «Копия» обязательно нужно задать имя данного объекта, например, zzz (Рисунок 17).

В панели «Действия кадра» выбирайте команду Операции – Set Property (установить свойства). Данная команда имеет три настраиваемых поля. Свойство – то свойство объекта, которое мы хотим изменить, например, _x (x Позиция), положение объекта по оси Х. Цель – имя копии объекта, в данном случае – zzz. Значение – чему равно выбранное свойство, в этом поле может находиться конкретное число либо выражение, но в любом случае не забудьте поставить флаг у выключателя «Выражение» (Рисунок 18).

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

Рисунок 18

Полный набор изменяемых свойств находится в окне «Свойства кадра» раздел Свойства, а их значение можно найти в литературе. Давайте рассмотрим основные свойства, многие из них нам потребуются в дальнейшем в проекте:

Alpha – прозрачность объекта, изменяется от нуля – полная прозрачность, до 100 полная видимость;

Visible – очень похожее свойство, означает видимость. Свойство имеет только два значения – ноль (объект невидим) и единица (полная видимость объекта);

Рисунок 19

Height – высота объекта, измеряется в пикселях;

Width – ширина объекта, измеряется в пикселях;

Rotation – поворот объекта, относительно его центра, измеряется в градусах;

X – координата по x;

Рисунок 20

Y – координата по y, координата верхнего левого угла принимает значение равное (0,0);

Xscale – изменение масштаба по оси x;

Yscale – изменение масштаба по оси y;.

Как вы заметили, все свойства начинаются со знака подчеркивания.

Так как нам нужно не только программно изменять свойства объекта, но и отслеживать их текущее значение нам потребуется функция GetProperty (получить свойства). Команда вызывается в окне «Действия кадра» Функции – GetProperty() (Рисунок 19). Функция имеет два параметра. Target – цель, вместо слова target записывается имя копии символа объекта. Property – изменяемое свойство, вместо слова property, например, можно написать _x, получение текущей координаты по x. Данная функция используется, как правило совместно с командой установить переменную или внутри другой команды (Рисунок 20).

x = getProperty (zzz, _x);

Данная команда означает, что в переменной x будет сохранена текущая координата объекта, по имени zzz.

Рассмотрим, как можно использовать изменение свойств в проекте. Создайте объект, свойства которого можно изменять. Пример экрана представлен на Рисунок 21.

Рисунок 21

Создайте объект и превратите его в символ типа клип видеофрагмента.

Дайте имя копии этого символа на плавающей панели «Копия», например, «Ob».

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

Добавьте к кнопке, которая перемещает объект вверх следующий код:

on (release, keyPress "") {

setProperty ("Ob", _y,

getProperty (Ob, _y) - 5);

данная команда изменяет свойство объекта «Ob», его координату y. Для того чтобы объект переместился вверх вычисляется его текущая координата и от нее отнимается 5.

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

setProperty ("Ob", _xscale, getProperty (Ob, _xscale) + 5);

setProperty ("Ob", _yscale, getProperty (Ob, _yscale) + 5);

Данный код увеличивает масштаб объекта. Для пропорционального увеличения необходимо увеличить размер как по оси x, так и по оси y. Поэтому в данном скрипте две команды.

Вопросы для повторения:

К каким символам библиотеки можно обращаться программно? Как это организовать? Какие свойства объектов вы изучили? Какой у них смысл? В чем разница команд setProperty и getProperty? Объясните смысл строки: setProperty ("Ob", _xscale, getProperty (Ob, _xscale) + 5); Предположите, как можно изменять свойства других объектов, например, кнопок?

9. Трехкадровые циклы. Программная анимация.

Программное изменение свойств объектов позволяет создавать программную анимацию. В отличие от стандартной анимации, которую можно создать в программе Macromedia Flash, программной анимацией можно управлять по ходу ролика.

Казалось бы, достаточно циклично изменять свойства объекта, например координату x и объект начнет движение, но это не так. Дело в том, что во Flash вначале выполняется программный код, а лишь потом происходит изменение, перерисовка экрана. Поэтому объект из начальной точки сразу перенесется в конечную, плавного движения не получится. Преодоление этого противоречия лежит в использовании трехкадровых циклов.

Их идея в следующем:

В первом ключевом кадре задаются начальные константы, начальное положение объекта.

Во втором ключевом кадре происходит изменение свойства объекта на какую-то заданную величину.

В третьем ключевом кадре находится всего одна команда перейти на второй кадр.

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

Рассмотрим, как трехкадровый цикл реализуется на практике. Создадим ролик, в котором автомобиль движется от края до края листа, поворачиваясь в противоположную сторону и продолжая движение до бесконечности. У пользователя есть возможность изменять его скорость движения, замедляя или увеличивая его. Внешний вид ролика, разумеется без движения представлен на Рисунок 22. Ниже будет представлен разбор программного кода для реализации данного проекта.

Рисунок 22

Создайте на первом слое рисунок машины, или импортируйте уже готовый рисунок. Слой переименуйте в «машина», а ключевой кадр продлите до третьего кадра, нажав в третьем кадре клавишу F5.

Конвертируйте рисунок в символ, типа клип видеофрагмента. Дайте имя копии этого символа на плавающей панели «Копия», например, «car».

Создайте новый слой, переименуйте его в «кнопки» и создайте на нем две кнопки «быстрее» и «медленнее».

На новом слое «Действия» создайте три пустых ключевого кадра, три раза нажмите клавишу F7.

В первом ключевом кадре добавьте следующий код:

setProperty ("car", _x, 50);

Обратите внимание, данный код не взят в фигурные скобки и в начале не присутствует on (release), то есть данный код относится именно к кадру, а не кнопке. В данном фрагменте в первой строке у объекта под именем car устанавливается свойство _x (координата по оси x) значение 50. Далее вводится три переменных, вот их смысл: dx – величина единичного перемещение объекта, а также направление движение (смотри дальше), MinX и MaxX соответственно минимально и максимально возможная координата объекта. Вообще можно обойтись без этих переменных, но используя их значительно проще отлаживать ваш проект. Я думаю, более глубокое понимание возникнет при анализе дальнейшего кода.

Во втором ключевом кадре добавьте следующий код:

x = getProperty (car, _x);

‘ В переменной x сохраняется текущее положение объекта.

if (x<=MaxX) {

setProperty ("car", _xscale, -100);

‘ Конструкция из двух вложенных условных операторов. Первый проверяет dx>0. Если это так, то автомобиль движется вправо. Второе условие x<=MaxX проверяет не достиг ли автомобиль максимально возможной координаты. Если это так то изменяется координата x объекта «car». Если второе условие не выполняется, то максимальная координата достигнута, как результат масштаб по координате х изменяется на -100% (автомобиль переворачивается) и единичного перемещение объект изменяется на противоположное.

if (x>=MinX) {

setProperty ("car", _x, x+dx);

setProperty ("car", _xscale, 100);

‘ Вновь конструкция из двух вложенных условных операторов. их назначение аналогично предыдущим.

В третьем ключевом кадре добавьте следующий код:

gotoAndPlay (2);

Если вы сейчас запустите проект, то увидите что объект совершает движение вправо-влево. Добавим несложный код, увеличивающий и уменьшающий скорость.

Для изменения скорости нужно увеличить величину единичного перемещения объекта. Код, соответствующие кнопке «быстрее» приведен ниже:

on (release, keyPress "") {

‘ Если единичное перемещение положительно, то нажатие на кнопку увеличивает это перемещение на единицу. Обратите внимание, что тоже действие произойдет если вы нажмете на кнопку на клавиатуре «вправо».

Код, соответствующие кнопке «медленнее» приведен ниже:

on (release, keyPress "") {

Назначение аналогично предыдущему фрагменту. Вот и все. Запускайте проект, тестируйте его. Полученные знания мы применим в последнем проекте, который объединит в себе два предыдущих и получится игра.

Вопросы для повторения:

Почему программную анимацию невозможно реализовать с помощью обычного цикла «пока»? Поясните назначение каждого кадра в трехкадровом цикле. Поясните смысл переменной dx в описанном проекте. Для чего в программном коде присутствует строка setProperty ("car", _xscale, 100);? Добавьте к созданному пректу кнопку "остановить".

10. Проект «Интерактивная игра - Тир».

Цель проекта: Создать интерактивную игру тир. На игровом поле перемешается заяц (цель) в которого необходимо попасть с помощью перемещаемой мишени. Попадание необходимо произвести за минимальное кол-во шагов (высчитывается). Примерный вид экрана представлен на Рисунок 23.

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

В принципе это – все тот же трехкадровый цикл. В первом кадре задаем начальные параметры:

z_x = random (450)+50;

z_y = random (230) + 50;

pr_x = getProperty (pr, _x);

pr_y = getProperty (pr, _y);

setProperty ("z", _x, z_x);

setProperty ("z", _y, z_y);

setProperty ("buh", _visible, 0);

d – точность попадания (подробней о этой переменной далее); h – единичный шаг перемещения «зайца»; rez – количество повторений, изначально данная переменная равна нулю; z-x и z-y – начальные координаты «зайца», они задаются с помощью стандартной функции Random, она вызывается с помощью команды Объектов – Математика - Произвольный в окне Действия кадра; далее свойства цели (объект «z») устанавливаются в полученные случайные координаты; и наконец в последней строке устанавливается видимость «выстрела» равной нулю, то есть до поры до времени объект «buh» невидим.

Рисунок 23

А ниже представлен код, соответствующий второму ключевому кадру:

z_x = getProperty(z, _x);

if (z_x>=max_x) {

setProperty ("z", _xscale, -50);

if (z_x<=min_x) {

setProperty ("z", _xscale, 50);

setProperty ("z", _x, z_x+h);

все в точности повторяет аналогичный код второго кадра из прошлой задачи.

В третьем кадре находится всего одна команда:

gotoAndPlay (2);

она позволяет «зациклить» движение цели.

Добавьте код для кнопок, перемещающих мишень вправо-влево, вверх-вниз. В качестве примера приведем код, для перемещения мишени вправо:

on (release, keyPress "") {

pr_x = getProperty (pr, _x);

setProperty ("pr", _x, pr_x + 10);

pr_x = getProperty (pr, _x);

в этом фрагменте команда pr_x = getProperty (pr, _x) повторяется дважды, это – не ошибка. Просто первый раз эта команда нужна для того, чтобы определить положение мишени до перемещения, а второй раз нам нужна новая координата мишени, чтобы при выстреле сравнивать ее с координатой цели.

Осталось добавить код для кнопки «огонь». Он представлен ниже:

on (release, keyPress "") {

‘ Вне зависимости от результативности выстрела переменная rez увеличивается на единицу.

setProperty ("buh", _x, pr_x);

setProperty ("buh", _y, pr_y);

setProperty ("buh", _visible, 1);

‘ Символ имитирующий «выстрел» перемещается в координаты где в данный момент находится мишень и его видимость становится равной единице.

tellTarget ("buh") {

gotoAndPlay (2);

‘ В проекте «выстрел» - это клип в котором проявляется красный круг. Для того, чтобы этого не происходило постоянно в первом и последнем кадре клипа стоит команда stop(). Команда TellTarget показывает компьютеру, что следующие в фигурных стрелках команды относятся только к объекту «buh» и выполняются в нем. Переходя во второй кадр тем самым запускается анимация внутри клипа «buh».

if (Math. abs (pr_x - z_x)

text = "Точно в цель!";

‘ В каком случае считать что мы попали в цель – в том случае, если разница между координатами цели и мишени меньше точности попадания (переменная d в первом кадре). Все дело втом, что одновременно выполняться оба условия идля координат x и для координат y, поэтому используется логическая связка И (смотри урок 4). И последнее, мы должны сравнивать модуль разности координат для этой цели используется стандартная математическая функция Math. abs (). Если все условия выполняются, динамическое поле «text» принимает значение "Точно в цель!" и ролик останавливается.

text = "мимо!";

Вот и все. Проект работает, цель бегает от нас, а текстовые поля отслеживают его положение. Мишень перемещается по полю, и результаты выводятся на экран. Можно поздравить себя мы прошли весь путь.

Вопросы для повторения:

Какие изученные технологии использованы в этом проекте? Какое назначение у команды tellTarget ("buh")? Что нужно изменить в программе, чтобы уменьшить поле движения зайца на 100 пикселей? Почему сравнивая координату цели и координату мишени, мы должны вычислять модуль данных координат? Как это реализуется во Flash? Предложите варианты усложняющие игру, предложите пути их реализации.

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

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

Для получения. exe файла вы должны в программе Macromedia Flash создать Flash-ролик, опубликовать его (меню файл – публикация ). В результате у вас появляется файл с расширением. swf, просмотреть его можно либо с помощью программы Flash Player (устанавливается автоматически при установке Macromedia Flash. Откроете появившийся файл, выбирете меню файл – создание проектора, задаете имя вашего. exe файла.

Не смотря на то, вы видите прямоугольник, как на рисунке, это – граница, при наборе она будет оставаться, но в самом ролике ее не будет видно.

Скорее всего, при попытке набрать текст русскими буквами у вас на экране появится «абракадабра». Это связано с тем, что по умолчанию в программе Flash стоит шрифт Times New Roman, в котором отсутствует описание кириллических символов. Поэтому перед набором установите шрифт, поддерживающий кириллицу, например, Times New Roman Cyr или Arial Cyr.

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

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

Для добавление нового ключевого кадра щелкните на кадре №2 в слое действия и нажмите клавишу F7. Flash создаст, новый пустой ключевой кадр.

Для импорта рисунка выберете команду Файл – Импорт из других форматов. Будьте внимательны, если в указанной вами папке находятся файлы названные однотипно, например. car1? car2 и т. д. то компьютер предложит их импортировать все сразу. Если вы импортируете векторный рисунок, он окажется на холсте в виде набора группированных объектов. Не забудьте его сгруппировать в единое целое. Если вы импортируете точечный рисунок, он автоматически помещается в библиотеку, а на сцене мы видим его копию.

Экспресс-план модуля:
  • Методология программирования
  • Объектное программирование
  • Материальные и виртуальные объекты. Информационные объекты
  • Терминология ActionScript
  • Палитра Actions (действия). Режимы работы
  • Практикум. Разбор скриптов

Методология программирования

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

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

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

Объектное программирование

Объектно-ориентированное программирование (ООП) — современный способ создания программных кодов, который пришёл на смену структурному программированию. Вернее, объектное программирование не заменило структурное, а довело его до логического совершенства.

В объектно-ориентированных языках можно конструировать не только данные, но данные плюс процедуры (функции):

объект = данные + процедуры (объект = свойства + алгоритмы)

Объектом в информатике, как и всюду, называют всё, что угодно: число, таблицу, исполнителя, программу, кнопку на экране...

Однако информатика рассматривает объекты с точки зрения информационных процессов. В таком подходе нет ничего удивительного: каждая наука рассматривает объекты со своей точки зрения. Физик, наблюдая полёт пчелы, мысленно прикидывает формулы, которые описывают траекторию движения насекомого. Биолог задумывается о числе глаз, крыльев и ножек. Информатик наблюдает за тем, как своим «танцем» пчела передаёт информацию сородичам о полях медоносных растений.

Обычно информатик выделяет в объекте три составляющие:

  • Какую информацию объект хранит (свойства объекта, данные объекта)?
  • Как объект обрабатывает информацию (алгоритмы объекта, процедуры объекта)?
  • Какую информацию объект передаёт и принимает (события объекта)?

Исследуем обычный телевизор как информационный объект.

Свойства (данные):
цвет: серебристый;
диагональ экрана: 53 см;
вес: 20 кг.

Алгоритмы (процедуры):
включение/выключение: кнопка (I);
переключение программ: кнопки (-), (+) блока PRG;
регулирование звука: кнопки (-), (+) блока ¤.

События:
приём телепередачи;
передача изображения и звука зрителю.

Материальные и виртуальные объекты

Телевизор — это материальный объект. Слово «материальный» означает «реальный», существующий на самом деле. Корпус телевизора сделан из пластика, гладкого на ощупь. Телевизор достаточно тяжёлый — не надо ронять его на ногу: будет больно. Если по телевизору стукнуть молотком, то, скорее всего, он выйдет из строя.

Рассмотрим телевизор изображённый на фотографии в этой лекции. Этот телевизор, конечно, не является материальным (реальным) телевизором. Его нельзя потрогать, понюхать. Он не может упасть на пол. Телевизор на фотографии — это виртуальный объект, то есть не реальный, не существующий на самом деле.

Информационные объекты

Понятие информационного объекта очень удобно для пользователей.

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

Информационные события, связанные с телевизором (это приём телепередачи, передача изображения и звука зрителю), позволяют использовать свойства и алгоритмы по назначению: посмотреть интересный мультфильм или узнать последние новости.

Менять свойства телевизора мы не можем, но можем их учитывать. А вот свойства виртуальных объектов менять легко.

Современное программирование — объектно-ориентированное. Это означает, что программа, которой предстоит работать на компьютере, создаётся как набор информационных объектов.

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

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

Объект и экземпляр объекта

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

То же и в программировании. Объект — это шаблон. Экземпляр объекта — это рабочая копия.

Предопределённые объекты Macromedia Flash. Язык ActionScript

У тех, кто только начинает работать в Macromedia Flash, может возникнуть иллюзия того, что к объектам мы можем отнести любой графический элемент, находящийся на сцене. Действительно, графические элементы можно перемещать, копировать, удалять, преобразовывать, стыковать, выравнивать, группировать… Они имеют определённые нами в процессе рисования свойства: цвет, размер, форму… Однако термин объект используется в языке программирования ActionScript в другом значении. Самым значимым объектом в Macromedia Flash является объект клип — MovieClip.

Для того чтобы составить некое представление о предопределённых объектах Macromedia Flash сделаем краткий обзор некоторых из них. Обратите внимание, что эти объекты могут быть использованы для доступа и манипулирования некоторыми типами информации:

Объект Math — набор встроенных математических констант и функций: cos (косинус), sin (синус), atan (арктангенс), abs (абсолютное значение числа)…
Объект Sound — позволяет добавлять звуки к клипу и управлять ими во время проигрывания клипа. Например, можно регулировать громкость (setVolume) или баланс (setPan).
Объект Mouse — позволяет скрывать стандартный курсор, чтобы можно было использовать какой-то другой.
Объект MovieClip — позволяет управлять клипом. Клип имеет свойства (например, _height, _rotation, _totalframes) и методы (play, loadMovie или duplicateMovieClip).

Терминология ActionScript

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

Actions (команды) — операторы, которые дают инструкции клипу, что ему делать во время воспроизведения. Например, gotoAndStop переводит воспроизведение на определенный кадр.
Arguments (аргументы), также называются параметрами — позволяют передавать значения функциям.
Classes (классы) — типы данных, которые можно создавать для определения новых типов объектов. Для определения класса объектов, создаются функции-конструкторы.
Constants (константы) — неизменяемые элементы. Например, константа Math.PI всегда имеет определённое значение. Константы полезны для сравнения значений.
Constructors (конструкторы) — функции, используемые для определения свойств и методов класса.
Data types (типы данных) — набор значений и операций. Строки, числа, true и false (булевы) значения, клипы — всё это типы данных ActionScript.
Events (события) — действия, происходящие во время воспроизведения клипа. Например, различные события происходят при загрузке клипа, когда плеер воспроизводит кадр, пользователь щёлкает на кнопке в клипе или нажимает кнопку на клавиатуре.
Expressions (выражения) — любые части операторов, имеющих значения. Например, 2 + 2 это выражение.
Functions (функции) — блоки многократно используемого кода, которым могут быть переданы аргументы (параметры) и которые могут вернуть значения. Например, функции getProperty передаются имя свойства и имя клипа, а возвращается значение этого свойства. Функция getVersion возвращает версию Flash Player, воспроизводящего клип.
Handlers — специальные команды, управляющие событиями, такими как mouseDown или load.
Identifiers (идентификаторы) — имена, используемые для обозначения переменных, свойств, объектов, функций и методов. Первый символ должен быть буквой, знаком подчеркивания (_) или знаком доллара ($). Любой следующий символ должен быть буквой, знаком подчеркивания (_), цифрой или знаком доллара ($). Например, имя переменной firstName.
Instances (экземпляры) — объекты, принадлежащие к определённому классу. Каждый экземпляр класса содержит все свойства и методы этого класса. Все клипы — экземпляры со свойствами (например, _alpha и _visible) и методами (например, gotoAndPlay и getURL) класса MovieClip.
Instance names — уникальные имена, позволяющие указывать экземпляр клипа в скриптах. Например, исходный символ в библиотеке может быть назван counter, а его два экземпляра могут иметь имена scorePlayer1 и scorePlayer2.
Keywords (ключевые слова) — зарезервированные слова, имеющие специальное значение. Например, var — ключевое слово, используемое для объявления локальных переменных.
Methods (методы) — функции, присущие объекту. После того, как функция определена, она может быть вызвана, как метод этого объекта.
Objects (объекты) — коллекции свойств, каждый из которых имеет своё имя и значение. Объекты обеспечивают доступ к различным типам данных. Например, предопределенный объект Date предоставляет информацию от системных часов.
Operators (операторы) — вычисляют новые значения из одного или более значений. Например, оператор сложения (+) складывает два или более значения для получения нового значения.
Properties (свойства) — атрибуты, определяющие объект. Например, _visible — свойство всех клипов, которое определят, видим клип или нет.
Variables (переменные) — идентификаторы, которые содержат значение любых типов данных. Переменные могут быть созданы, изменены и обновлены. Значения, которые они содержат, могут быть запрошены для использования в скрипте.

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

ActionScript позволяет создавать скрипты для клипа (символ типа Movie Clip), кнопки (символ типа Button) или ключевого кадра (Keyframe). Каждый такой скрипт (то есть фактически программа на языке ActionScript) жёстко связан с соответствующим элементом ролика. При публикации ролика текст скрипта, как и другие элементы фильма, экспортируется в swf-файл. Тем не менее, при желании вы можете сохранить его в отдельном файле с расширением as (это обычный текстовый файл), чтобы впоследствии использовать в каком-либо другом фильме.

Палитра Actions (действия)

Палитра Actions (действия) позволяет создавать и редактировать скрипты для объектов (клипов и кнопок), а также ключевых кадров. Можно выбирать заранее определённые команды из списка команд — Toolbox list (в левой части палитры), перетаскивать их в правую часть панели; использовать кнопки расположенные над текстовым полем для выбора команды, её удаления и перестановки команд.

В Normal Mode (нормальный режим) можно писать команды, используя поля параметров (аргументов).

В Expert Mode (экспертный режим) можно писать и редактировать команды прямо в текстовом поле, как в обычном текстовом редакторе.

В ходе создания скрипта путём выбора команд из списка, вы должны обратить внимание на то, что эти команды систематизированы по категориям:

Actions (команды) — процедуры языка ActionScript, имеющие «универсальный» характер, то есть не зависящие от особенностей класса объектов (в отличие от методов объектов, принадлежащих конкретному классу); в эту же категорию входят традиционные для большинства языков программирования высокого уровня операторы логического управления (проверки логических условий, организации цикла и т. п.).

Operators (операторы) — операторы логических и арифметических операций (сложение, вычитание, сравнение и т.п.).

Functions (функции) — предопределенные (библиотечные) функции (например, в их число входит функция проверки номера версии Flash-плеера).

Constant (константы).

Properties (свойства) — свойства объектов, не зависящие от класса (например, уровень прозрачности изображения).

Objects (объекты) — предопределённые объекты, которые могут быть использованы в сценарии (например, существует объект для работы с датой и временем); в этот же раздел включаются пользовательские классы объектов.

Deprecated (осуждаемые) — конструкции, которые не рекомендуется использовать в скриптах (как устаревшие).

Flash UI Components (компоненты пользовательского интерфейса).

Кроме перечисленных разделов, в списке Action Toolbox имеется также раздел Index , который содержит алфавитный перечень всех компонентов языка.

Подсветка и проверка синтаксиса

Система подсветки синтаксиса окрашивает определённые элементы ActionScript в разные цвета.

Ключевые слова и предопределённые идентификаторы (например, gotoAndStop, play и stop) подсвечиваются тёмным синим цветом.

Комментарии подсвечиваются бледным серым цветом.

Строки, окружённые кавычками, ярким синим цветом.

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

Для проверки текущего скрипта на наличие ошибок, следует использовать раздел Check Syntax из выпадающего меню в правом верхнем углу палитры Actions или соответствующую кнопку (галочка голубого цвета в Expert Mode).

Практикум. Разбор скриптов
Ролик №1

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

В раздел URL link записан адрес документа. В разделе Target вы указываете окно или фрейм, в который должен быть загружен запрошенный документ. В данном ролике документ будет загружен в новое окно браузера.

Для кнопки создаём скрипт, используя палитру Actions. Для этого выделяем кнопку с помощью инструмента Arrow и разворачиваем палитру Actions.

Для того чтобы использовать в своей работе команду getURL обратитесь к категории Actions > Browser/Network > getURL. Затем, обратившись к полям параметров, определитесь с адресом документа…
Прокомментирую подробнее некоторые нюансы работы с палитрой Actions в этом ролике.

Параметр Window задаёт окно или фрейм, в который должен быть загружен запрошенный документ. Значение параметра выбирается с помощью раскрывающегося списка, который содержит следующие варианты (они аналогичны значениям атрибута target тэга в языке HTML):

_self — документ будет загружен в текущее окно, или фрейм;
_blank — документ будет загружен в новое окно;
_parent — документ будет загружен в родительский или текущий фрейм;
_top — документ будет загружен во фрейм более высокого уровня иерархии или в текущее окно.

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

Параметр Variables позволяет указать способ пересылки данных по заданному URL. Значение параметра выбирается из раскрывающегося списка, который содержит три варианта:

Don"t send (не отправлять) — пересылка данных не требуется;
Send using GET (отправить, используя GET) — для пересылки данных будет использован метод GET;
Send using POST (отправить, используя POST) — для пересылки данных будет использован метод POST.

Напомню, что различие в использовании методов GET и POST для пересылки данных на сервер состоит в том, что при первом из них пересылаемые данные присоединяются к строке адреса. Поскольку длина адреса ограничена 256 символами, то ограничен также и объём пересылаемых данных.

Обратите внимание на то, что команда getURL была автоматически помещена в фигурные скобки некой on(release). Дело в том, что когда вы назначаете действие кнопке или клипу, Flash автоматически генерирует специальную управляющую процедуру (handler), которая во многих объектно-ориентированных языках называется «обработчик события» (или «селектор»). Обработчик проверяет, произошло ли событие определённого типа, и если да, то инициирует соответствующую последовательность действий, заключённых в фигурные скобки.

Для кнопок обработчик имеет имя on , а для клипов — onClipEvent . Имя обработчика предшествует списку событий, на которые обработчик должен реагировать. Например, конструкция:
on(release, KeyPress:"A")
означает, что обработчик должен реагировать на события двух типов: release (кнопка мыши отжата) и KeyPress:"A" (на клавиатуре нажата клавиша "А").

Для кнопок в языке ActionScript предусмотрены следующие типы событий:

Press — пользователь нажимает кнопку мыши, когда указатель находится над изображением кнопки (фильма).

Release — пользователь нажимает и затем отпускает кнопку мыши (указатель находится над изображением кнопки).

Release Outside — пользователь отпускает кнопку мыши, когда указатель не находится над изображением кнопки.

Key Press — пользователь нажимает определённую клавишу на клавиатуре; для данного события необходимо дополнительно указать клавишу.

Roll Over — пользователь перемещает указатель над изображением кнопки.

Roll Out — пользователь перемещает указатель за пределы изображения кнопки.

Drag Over — пользователь нажимает кнопку мыши, когда указатель находится над кнопкой, выводит его за пределы кнопки, и затем опять устанавливает над кнопкой.

Drag Out — пользователь нажимает кнопку мыши, когда указатель находится над кнопкой, и затем выводит его за пределы кнопки.

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

И последнее, в ролике работает только один кадр и один слой.

Ролик №2

В этом ролике мы с вами научимся прописывать акции и кнопке и кадру и клипу.

Для комфортной работы в ролике вам следует создать три слоя.

Слой action . В этом слое, как впрочем, и во всех остальных только один кадр, он пуст, является ключевым и ему прописан скрипт:

Fscommand("showmenu", "false"); fscommand("fullscreen", "true");

Эти строчки определяют поведение вашего ролика в процессе проигрывания. Первая строка позволяет убрать меню в плеере (это очень важно, когда ваш ролик представляет собой программу тестирования, и пользователь должен быть лишён права сделать шаг назад Control > Step Back). Вторая строка разворачивает ваш ролик на весь экран. Для того чтобы прописать эти строки вам необходимо встать на это кадр и обратиться к категории Actions > Browser/Network > fscommand.

Слой penguin . На этом слое расположены блоки статического и динамического текста, кнопка и клип. Блоки статического текста выделены зелёным цветом, блоки динамического текста красным цветом.

Во-первых, определимся с блоками динамического текста. Для создания блока динамического текста используется уже хорошо знакомый вам инструмент Text. Однако содержимое блока остаётся пустым. Заполнение этих блоков данными мы поручим кнопке. Размер блоков можно будет подкорректировать в процессе отладки ролика. Каждому блоку динамического текста необходимо присвоить имя. Обратите внимание на палитру Properties. В разделе Text Type выберите Dynamic Text, в разделе Var (Variable) определите имя блока.

Например, в этом ролике для динамического блока, расположенного напротив статического текста «ширина экземпляра» определено имя w , для высоты экземпляра h , имени экземпляра n , координаты точки регистрации экземпляра два блока x и y . Обратите внимание, что блоки динамического текста Flash выделяет пунктирной линией.

Во-вторых, создадим клип, в который будет помещён графический элемент — пингвин. В этом ролике это импортированная графика в формате wmf. После того как графика будет импортирована, используем команду Convert to Symbol и превратим её в клип (символ типа Movie Clip), назовём его, к примеру, penguin_vl. Клип будет автоматически помещён в библиотеку ролика, а вот со сцены его следует удалить. Следующий шаг это создание нового клипа. Используем команду New Symbol, назовём этот клип penguin_or. В первом кадре этого клипа, используя библиотеку ролика, поместите экземпляр клипа penguin_vl (именно ему в последующем мы пропишем скрипт). Добавьте в клип ещё один ключевой кадр.

Вернитесь на сцену и поместите на неё экземпляр клипа penguin_or. И не просто поместите, а пропишите его на сцене. Для этого обратитесь к палитре Properties, и в разделе Instance Name укажите имя экземпляра, например penguin (впрочем, ваше право, дать ему то имя, которое вы пожелаете, не забывайте только правила формирования имён в ActionScript). Теперь произведём редакцию клипа, экземпляр которого был помещён на сцену, используем для этого команду Edit. Клипу в первом кадре пропишем скрипт:

OnClipEvent (load) { setProperty("_root.penguin", _alpha, random(50)+50); }

Команда setProperty позволяет изменять свойство экземпляра клипа во время воспроизведения ролика. Давайте попробуем разобраться в синтаксисе, используя общий формат команды:

setProperty(target, property, expression);

target — это путь к экземпляру клипа, чьё свойство нужно изменить (_root.penguin, зная путь к экземпляру, мы обращаемся к нему по имени, которое мы присвоили ему в палитре Properties).

property — свойство, которое нужно изменить (_alpha, в нашем случае это прозрачность экземпляра).

expression — значение, присваиваемое свойству (random(50)+50, случайное число от 50 до 100). Обязательно установите флажок Expression. Так как значение данного параметра должно быть получено как результат вычисления выражения.

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

И ещё, почему перед именем экземпляра прописанного на сцене стоит _root ?

Когда вы будете работать с командой setProperty для указания пути к объекту, вам необходимо будет обратиться к кнопке Insert a target path (эта кнопка похожа на прицел). При этом перед вами откроется окно Insert a target path с помощью которого вы можете описать путь назначения (то есть адрес).


Это окно содержит следующие основные элементы интерфейса:

Дерево фильма, отражающее иерархию объектов фильма, к которым возможно обращение из скрипта.

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

Корневой элемент дерева зависит от способа адресации: для абсолютного адреса — это ключевое слово _root (то есть основной фильм), для относительной — слово this (то есть текущая временная диаграмма).

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

Пара переключателей Mode (режим), которые позволяют выбирать способ адресации (относительный — Relative или абсолютный — Absolute). По умолчанию используется относительная адресация.

Пара переключателей Notation (нотация), которые позволяют выбирать формат записи пути назначения: вариант Dotes (точки) означает применение точечной нотации; вариант Slashes (слэши) соответствует записи с использованием слэшей (это «устаревший» стиль, используемый для совместимости с предыдущими версиями ActionScript). При использовании слэшей формат записи аналогичен тому, который применяется для записи URL в HTML-документах.

Продолжим работу над роликом.

На этот же слой нужно поместить кнопку. В этом ролике я воспользовалась библиотекой Flash.

Кнопке прописываем скрипт:

On (release) { w = getProperty(_root.penguin, _width); n = getProperty(_root.penguin, _name); h = getProperty(_root.penguin, _height); x = getProperty(_root.penguin, _x); y = getProperty(_root.penguin, _y); }

Функция getProperty возвращает значение указанного свойства указанного клипа. Давайте попробуем разобраться в синтаксисе, используя общий формат команды:

getProperty(instancename, property);

instancename — имя экземпляра клипа, свойство которого необходимо получить.

property — имя свойства клипа.

Для того чтобы присвоить w значение, вычисляемое функцией вам необходимо обратиться к категории Action > Variables > set variable.

Слой ramka . Это слой с декорациями.

Протестируйте ролик и если это необходимо произведите его коррекцию. Поэкспериментируйте со свойствами.

Домашнее задание: Основы программирования в Macromedia Flash MX

В домашних заданиях этого курса будут звучат замечательные афоризмы.

Наше знание похоже на шар, чем больше оно становиться, тем больше у него точек прикосновения с неизвестным.
Ефремов Иван Антонович

Продублируйте ролики, представленные в этой лекции.

Выполненное задание представьте в виде файлов в формате fla (если суммарный размер файлов превысит 150 Кб, пожалуйста, упакуйте файлы в архив) и вышлите учителю.

Тест: Основы программирования в Macromedia Flash MX

В материалы теста входят вопросы, которые позволят вам проверить прочность знаний полученных в ходе работы над первым модулем курса.
Тест создан в Macromedia Flash MX и представляет собой интерактивный flash-ролик:

Прошлая статья была посвящена анимации. Мы создавали анимацию на основе motion tweening, shape tweening и просто составляли движение из отдельных кадров. Думаю, пора перейти к более сложной теме, рассмотрению инструмента, который создает основу для большинства качественных Flash-фильмов (Flash movies).

Этот инструмент - ActionScript - событийно-управляемый язык, встроенный во Flash. Последняя версия ActionScript, (которая присутствует во Flash 5), существенно отличается от ActionScript, который был в 4-м Flash. Если в прошлой версии, это был ограниченный набор команд, позволяющий осуществлять лишь основные действия, и вводимый с помощью не очень удобного интерфейса, то новый ActionScript - это мощный язык, с увеличенным набором команд, поддержкой классов, наследования (!), и гораздо более удобным интерфейсом.

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

Для того, чтобы овладеть ActionScript в полной мере, желательно уже иметь опыт программирования (предпочтительно на С++, JavaScript, etc.). Однако, одним из достоинств языка Flash, является то, что вам не нужно быть профессионалом во Flash, или полностью знать ActionScript, чтобы писать на нем качественный код. Вы можете использовать те возможности языка, которые сочтете необходимыми для своей работы.

Так как эта статья посвящена основам языка, в ней мы рассмотрим:

  • Панель действий (Actions panel), на которой происходит практически все общение с ActionScript.
  • Кнопки - как их заставлять работать, как нам требуется.
  • Пути - как обращаться к нужным объектам?
  • Основные действия с Flash-мультиками (movie clips) - мы будем управлять процессом проигрывания фильма, как нам будет угодно.
  • Отладку в ActionScript - окошки Output и Debugger.

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

Термины

Прежде чем мы перейдем к конкретным действиям, несколько терминов из области ActionScript:

  • Действия (Actions) - это инструкции, которые говорят Flash-мультику что делать. От них произошло название языка - ActionScript (дословно - сценарий действий). Давайте договоримся, что в рамках этой статьи, мы будем использовать термин "инструкция", дабы не путаться с настоящими действиями, которые будем производить.
  • События (Events) - это действия, которые происходят, когда проигрывается мультик. События, например, могут происходить, когда заканчивается загрузка какого-то кадра, когда мы достигаем какого-то кадра, когда пользователь нажимает клавишу на клавиатуре или курсор мышки оказывается над нашим объектом.
  • Выражения (Expressions) - это любая часть инструкции, которая порождает значение. Следующие примеры являются выражениями: 2 + 2, 2 * 2, a + b, 2*pi*r, (15 + k) * random(10) .
  • Функции (Functions) - это блок кода, который можно многократно использовать. Функции можно передавать значения и получать от нее возвращаемый результат. Например, number = get_color(15, 24) . 15 и 24 являются аргументами (или параметрами) функции get_color, возвращаемое значение которой записывается в переменную number.
  • Классы (Classes) - это типы объектов. Например, класс дерева - растение. Во Flash есть некоторое количество предопределенных классов (очень похожих на классы JavaScript). Вы можете создавать свои классы, или модифицировать существующие.
  • Экземпляры (Instances) - это буквально экземпляры определенных классов. Например, экземпляром растения могут являться дерево, куст или цветок. Экземпляр - это уже конкретный реальный объект. Если класс - это определение объекта (экземпляра), то экземпляр - это уже конкретное воплощение, это класс в действии. Каждому экземпляру можно присвоить имя, чтобы через него обращаться к функциям или переменным объекта.
  • Обработчики (Handlers) - это специальные инструкции, которые обрабатывают события. Например onClipEvent - обработчик действий, связанных с конкретным символом (см. ).
  • Операторы (Operators) - это элементы языка, которые вычисляют значения, исходя из одного или более аргументов. Например, оператор сложения (+) возвращает сумму двух значений, стоящих слева и справа от него.
  • Переменные (Variables) - это идентификаторы, которые могут хранить значения. Например, a = 5; или name = "Michael".

Эти термины мы будем использовать при обсуждении ActionScript. Итак…

Панель действий (Actions Panel)

Панель действий служит для отображения и ввода ActionScript программ (рис. 1). Существует два режима работы с панелью - нормальный (для "чайников") и экспертный. В экспертном режиме список команд - это простое поле для ввода текста. В нормальном же режиме, мы не можем напрямую редактировать команды. Для этого используется панель параметров.

Добавить инструкцию можно, нажав на кнопку "+" (см. рис. 1) или выбрав соответствующую инструкцию в списке элементов языка. Кроме того, для всех действий во Flash имеются последовательности клавиш, с помощью которых это можно сделать гораздо быстрее. Они приведены справа от каждого действия в меню кнопки "+". Например, чтобы добавить функцию stop() , нужно нажать Esc+st (последовательно: Esc, затем "s", затем "t").

Удалить инструкцию можно, выбрав ее, и нажав кнопку "-" (или просто клавишу Delete).

Я рекомендую вам не начинать сразу же пользоваться экспертным режимом, если у вас нету опыта программирования на Java-подобных языках (С++, Java, JavaScript). У нормального режима есть большое достоинство, делающее его незаменимым для новичков - в нем есть гораздо меньше шансов ошибиться с синтаксисом языка. Новичкам это поможет быстрее понять тонкости ActionScript.


Рис. 1 - Панель действий

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

Кнопки

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

Как вы знаете, во Flash существует специальный тип символа для создания кнопок - Button (см. ). Будем считать, что вы уже научились создавать кнопки, теперь научимся отслеживать нажатия на эти кнопки.

Кнопки в Macromedia Flash обладают обширным списком событий, на которые мы можем реагировать:

  • press - клавиша мышки нажата, когда курсор находится в пределах кнопки;
  • release - клавиша мышки отжата, когда курсор находится в пределах кнопки;
  • releaseOutside - клавиша мышки отжата, когда курсор находится вне пределов кнопки;
  • rollOver - курсор мыши входит в пределы кнопки;
  • rollOut - курсор выходит за пределы кнопки;
  • dragOver - курсор входит в пределы кнопки, при этом была нажата кнопка, и нажата клавиша мыши;
  • dragOut - курсор выходит за пределы кнопки, при этом была нажата кнопка, и нажата клавиша мыши;
  • keyPress ("клавиша") - была нажата "клавиша". Список клавиш можно посмотреть в справке по Flash (объект Key), или использовать панель параметров для вводу нужной клавиши.

К сожалению, Flash "понимает" только левую клавишу мыши. Правая используется для вызова контекстного меню (щелкните правой клавишей на каком-нибудь Flash мультике). Способов отлавливать во Flash среднюю клавишу или "колесико" (mouse wheel), я пока не встречал, думаю, что их не существует.

Перехватываются эти события с помощью директивы on() . Синтаксис ее таков:

On (событие) { ... // Наши действия }

Ниже вы можете сами попробовать вызвать некоторые события:

Очень часто используемый пример - переход по ссылке при нажатии на кнопку:

On (release) { getURL("http://rubs.boom.ru"); }

Чтобы проверить этот сценарий, выделите вашу кнопку, нажмите Ctrl+Alt+A и введите программу.

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

Основные действия с Movie Clips

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

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

Итак, что же у нас есть? Я перечислю только основные (на мой взгляд) инструменты. Остальное вы найдете в списке элементов языка или в помощи.

Функции клипов (movie clip), которые можно вызывать:

  • play() - начинает или возобновляет воспроизведение клипа;
  • stop() - останавливает воспроизведение клипа;
  • gotoAndPlay() - переходит на определенный кадр (сцену) и продолжает воспроизведение;
  • gotoAndStop() - переходит на определенный кадр (сцену) и останавливает воспроизведение.

Свойства (параметры) клипов, которые можно считывать/изменять:

  • _x, _y - координаты клипа (в пикселях);
  • _xscale, _yscale - масштаб клипа (в процентах), соответственно по горизонтали и по вертикали;
  • _width, _height - ширина и высота клипа (в пикселях);
  • _rotation - угол поворота клипа (в градусах);
  • _alpha - прозрачность клипа (в процентах);
  • _visible - видимость.

Это далеко не все, что можно делать с клипами. Используйте другие параметры, экспериментируйте, творите!

Имена

Для того, чтобы обращаться к клипам, нам потребуется разобраться с понятием имени объекта (instance name) и пути до объекта (target path). Договоримся, что клип (movie clip) и объект для нас - одинаковые вещи.

Имя объекта - это имя конкретного экземпляра символа. Скажем у нас может быть символ - машинка, а экземпляры этого символа будут называться "Машинка1", "Машинка2", "Pickup", "Запорожец"…

Для того чтобы дать имя объекту нужно выделить объект, и в панели Instance (Window->Panels->Instance, Ctrl+I) в графе Name ввести имя объекта (рис. 2). Имена могут состоять только из букв, цифр и символа подчеркивания ("_"), причем имя не может начинаться с цифры.


Рис. 2 - Панель Instance

Пути

Путь до объекта - это запись имени объекта с учетом иерархии. Попытаюсь объяснить, что это такое.

Вы знаете, что во Flash объекты можно "вкладывать" друг в друга, составляя, таким образом, иерархию. Так вот, эта вложенность обеспечивает не только удобство в обращении с объектами, она еще и ограничивает видимость имен объектов. Видимость ограничивается своим уровнем. Объект может напрямую (по имени) обращаться только к объектам, входящим в него, стоящим на 1 уровень ниже в иерархии.

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

Путь включает в себя объекты, через которые нужно "пройти" по дереву иерархии, чтобы добраться до нужного нам объекта, перечисленные через точку. Кроме того, существует несколько указателей (можно их назвать "виртуальными объектами"), которые часто очень полезны:

this - указатель на "самого себя" (т.е на текущий объект). Бывает нужен, например, когда нужно передать в функцию указатель на объект, из которого эта функция вызывается.

_parent - указатель на "родителя". Указывает на объект стоящий уровнем выше в иерархии.

_root - "корень". Это начало иерархии. Без него не обойтись при указании абсолютного пути.

Путь выглядит так:

leaf.play(); - у подобъекта leaf (лист) вызывается функция play();

_parent.tree.leaf.stop(); - подразумевается, что на одном уровне имеется объект tree, у которого есть объект leaf , у которого и вызывается функция stop();

_root.banner._visible = false; - сделать клип banner , находящийся на 1-м уровне, невидимым.



Рис. 3 - Иерархия клипов

Для иллюстрации возьмем иерархию из 5-ти объектов (рис. 3). Объекты 1-4 находятся на 1-м слое, объект 5 - на 2-м слое. Объект 2 вложен в объект 1, а объект 3 вложен в объект 2. Объекты на рисунке визуально вложены друг в друга, но это ни в коем случае не означает, что так должно быть и "в жизни". Здесь они так сгруппированы для наглядности. Так как имя объекта не может начинаться с цифры, пусть объекты у нас называются obj1-obj5 .

Теперь займемся путями. Для начала посмотрим, какие объекты могут обращаться друг к другу по имени. obj1 может обращаться к obj2, а obj2 - к obj3 , но при этом obj1 не может обратиться к obj3 напрямую, т.к. тот содержится не в obj1 , а в obj2 .

Скажем первому объекту нужно, чтобы объект 3 начал заново воспроизводиться с 1-го кадра. Вот как это делается:

Obj2.obj3.gotoAndPlay(1);

Чтобы 4-му объекту сделать 1-й объект (заметьте со всеми подобъектами!) полупрозрачным, ему нужно в своем сценарии написать следующее:

Parent.obj1._alpha = 50;

Root.obj1._alpha = 50;

Т.к. obj4 у нас находится на первом уровне иерархии, то для него _root и _parent - одно и то же.

Теперь для объекта 3 напишем скрипт, который сделает объект 5 невидимым при нажатии клавиши мыши. В сценарии для объекта 3 пишем:

OnClipEvent (mouseDown) { _root.obj5._visible = false; }

В этом фрагменте мы использовали абсолютный путь. Если бы мы использовали относительный, это выглядело бы как:

Parent._parent._parent.obj5._visible = false;

Надеюсь, я прояснил момент с путями.

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

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

Какие функции выполняют компьютерные программы

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

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

    Каждый шаг в конечном счете приводит к управлению определенной порцией информации или данных.

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

В сущности, все функции отдельной инструкции программы сводятся к управлению несколькими битами информации, хранящимися в памяти компьютера. Простым примером является сложение двух чисел и сохранение результата в памяти компьютера. Более сложным примером является рисование прямоугольника на экране компьютера и создание программы перемещения этого прямоугольника в другое место экрана. Определенная информация о прямоугольнике сохраняется в памяти компьютера: координаты x, y расположения прямоугольника, ширина и длина сторон, цвет и так далее. Каждый бит этой информации хранится в памяти компьютера. Алгоритм программы перемещения прямоугольника в другое место на экране включает такие действия, как присвоение координате x значения 200, а координате y - значения 150. Другими словами, необходимо присвоить новые значения координатам x и y. Компьютер выполняет некоторые скрытые от пользователя операции с этими данными для фактического преобразования этих чисел в изображение, показанное на экране компьютера. Однако на базовом уровне достаточно знать то, что процесс перемещения прямоугольника на экране включает только изменение битов данных в памяти компьютера.

Переменные и постоянные

В основном процесс программирования включает изменение только части данных в памяти компьютера. Следовательно, важно иметь способ представления части данных в программе. Переменная является именем, которое представляет значение в памяти компьютера. При записи операторов для управления значениями имя переменной записывается вместо значения. Когда компьютер обнаруживает имя переменной в программе, он обращается к своей памяти и использует то значение, которое там находится. Например, если есть две переменные с именами value1 (значение 1) и value2 (значение 2), каждая из которых содержит число, тогда для сложения этих чисел можно написать следующую инструкцию:

Value1 + value2

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

В ActionScript 3.0 переменная фактически состоит из трех различных частей:

    имени переменной

    типа данных, которые могут быть сохранены в переменной

    фактического значения, сохраненного в памяти компьютера

Было рассмотрено, как компьютер использует имя в качестве местозаполнителя значения. Столь же важен и тип данных. При создании переменной в среде ActionScript задается определенный тип данных, предназначенный для хранения. С этого момента при выполнении программных команд в переменной могут сохраняться значения только этого типа данных. Можно управлять значением с использованием определенных характеристик, связанных с этим типом данных. Для создания переменной в ActionScript (этот процесс называется также объявлением или заданием переменной) используется инструкция var:

Var value1:Number;

В этом примере определены команды создания переменной value1 , в которой могут храниться только значения с типом Number. (Number - это определенный тип данных в среде ActionScript.) Можно также сохранить значение прямо в переменной:

Var value2:Number = 17;

Adobe Flash Professional

Во Flash Professional есть другой способ задания переменной. При размещении символа фрагмента ролика, символа кнопки или текстового поля в рабочей области можно задать для них имя экземпляра в инспекторе свойств. В скрытом для пользователя режиме приложение Flash Professional создает переменную с именем, которое совпадает с именем экземпляра. Это имя можно использовать в коде ActionScript для представления этого элемента в рабочей области. Предположим, к примеру, что в рабочей области существует символ фрагмента ролика и вы присваиваете ему имя экземпляра rocketShip . При использовании переменной rocketShip в коде ActionScript вы фактически управляете фрагментом ролика.

Константа аналогична переменной. Это имя, которое представляет значение с заданным типом данных в компьютерной памяти. Разница состоит в том, что для постоянной значение присваивается только один раз во время выполнения приложения ActionScript. Если постоянной присвоено значение, оно больше не изменяется в приложении. Синтаксис для определения константы почти совпадает с синтаксисом для определения переменной. Единственным отличием является то, что ключевое слово const используется вместо ключевого слова var:

Const SALES_TAX_RATE:Number = 0.07;

Константа используется для определения значения, которое задействовано на многих стадиях проекта и которое не изменяется при нормальных обстоятельствах. Использование постоянных вместо литеральных значений делает код более удобочитаемым. К примеру, рассмотрим две версии одного кода. Один код используется для умножения цены на значение переменной SALES_TAX_RATE . Другой код используется для умножения цены на 0,07 . Версия, в которой используется константа SALES_TAX_RATE , более проста в понимании. Кроме того, предположим, что значение, заданное константой, изменяется. Если для представления значения в проекте используется константа, можно изменить значение в одном месте (объявление константы). Напротив, потребуется изменить его в различных местах при использовании запрограммированных значений литералов.

Типы данных

В ActionScript существует много типов данных, которые можно использовать при создании переменных. Некоторые из этих типов данных считаются простыми или фундаментальными типами данных:

    Строки: текстовые значения, такие как имя или текст главы книги

    Числовые: ActionScript 3.0 включает три специфических типа числовых данных:

    • Number: любые целые или дробные числовые значения

      int: целые числа без дробей

      uint: беззнаковые (неотрицательные) целые числа

    Логические: значения типа «истинно - ложно», такие как состояния выключателя или равенство или неравенство двух значений

Простые типы данных представляют единичные порции информации: например, одно число или единичный текст. Однако большинство типов данных, определенных в среде ActionScript, являются комплексными типами данных. Они представляют набор значений в одном контейнере. Например, переменная с типом данных Date (Дата) представляет одно значение (момент времени). Тем не менее, значение даты включает несколько значений: день, месяц, год, часы, минуты, секунды и т. д., все из которых являются отдельными числами. Обычно дата считается единичным значением, и с ней можно работать как с единичным значением путем создания переменной Date. Однако в компьютере дата рассматривается как группа из нескольких значений, которые совместно определяют одну дату.

Большинство встроенных типов данных, так же как и большинство типов данных, задаваемых программистами, являются комплексными. Некоторые из комплексных типов данных, возможно, уже вам знакомы:

    MovieClip: символ фрагмента ролика

    TextField: динамическое или вводимое текстовое поле

    SimpleButton: символ кнопки

    Date: информация о единичном моменте времени (дата и время)

Двумя широко распространенными синонимами для обозначения типа данных являются класс и объект. Класс является просто определением типа данных. Он равнозначен шаблону всех объектов в типе данных, как в выражении «все переменные типа данных "Пример" имеют характеристики А, Б и В». Объект , с другой стороны, является всего лишь фактическим экземпляром класса. Например, переменную с типом данных MovieClip можно описать как объект MovieClip. Ниже одна и та же мысль выражена различными словами.

    Типом данных переменной myVariable является Number (число).

    Переменная myVariable является экземпляром Number.

    Переменная myVariable является объектом Number.

    Переменная myVariable является экземпляром класса Number.