Adobe Flash. Создание аркад, головоломок и других игр с помощью ActionScript - Гэри Розенцвейг

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

•  load (загрузить)  – задание переменной, указывающей, что никакого перемещения еще не происходит;

•  mouseDown (кнопка мыши нажата)  – определение выбранного элемента и создание переменной, сообщающей, что этот элемент перетаскивается. Определение смещения между местом, над которым нажата кнопка мыши, и центром выбранного элемента;

•  mouseUp (кнопка мыши отпущена)  – установка начальных параметров переменной, указывающих, что никакой элемент в данный момент не перетаскивается;

•  enterFrame (проигрывание кадра)  – изменение положения перемещаемого элемента соответственно движению курсора минус разница между координатами центра элемента и координатами точки, по которой щелкнул пользователь.

Два момента из предыдущего списка могут смутить непрограммиста. Первый – это постоянно упоминаемая переменная. В коде ей будет назначено имя dragPart и исходное значение 0. Это значение соответствует состоянию, при котором не происходит никакого перемещения. Однако, как только пользователь выбирает элемент, переменной dragPart присваивается номер данного элемента, а когда значение переменной равно какому-либо числу, происходит перемещение. Когда пользователь отпускает элемент, переменная вновь принимает значение 0.

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

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

Теперь давайте рассмотрим каждую часть данного кода. Вначале выполняется функция onClipEvent(load). Она необходима для инициализации переменной dragPart.

// При загрузке ничего не перетаскиваем.

onClipEvent (load) {

dragPart = 0;

}

Наиболее сложной частью кода является функция onClipEvent (mouseDown). Она проверяет все 13 элементов при помощи функции hitTest и определяет, над какой из них расположен курсор. Затем задает переменную dragPart, а также переменные offsetx и offsety. Обратите внимание, что клипы элементов для упрощения кода имеют имена от "Parti" до "Part13".

// Начинаем перемещение.

onClipEvent (mouseDown) {

// Определяем текущие координаты курсора.

x = _root._xmouse;

o = _root._ymouse;

// Находим часть, над которой в данным момент находится курсор.

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

// Имеет смысл заменить константу 13 переменной, содержащей

// количество частей, например countOfParts. Это облегчит

// дальнейшую модификацию ролика.

{

if (_root ["Part"+i].hitTest(x,o, true)) {

// Указываем, какой элемент нужно перетаскивать,

// и задаем смещение.

dragPart = i;

offsetx = _root["Part"+i]._x – x;

offsety = _root["Part"+i]._y – y;

break;

}

}

}

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

// Заканчиваем перемещение.

onClipEvent (mouseUp) {

dragPart = 0;

}...

Примечание

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

Основополагающим компонентом данного кода является функция onClipEvent(enterFrame). Она проверяет, не равна ли переменная dragPart нулю, а затем задает положение перетаскиваемого элемента соответственно текущему положению курсора мыши плюс значение смещения.

// Если какой-либо элемент перетаскивается, меняем его координаты.

onClipEvent (enterFrame) {

if (dragPart > 0) {

_root["Part"+dragPart]._x = _root._xmouse + offsetx;

_root["Part"+dragPart]._y = _root._ymouse + offsety;

}

}

В нашем примере используются не клипы, а графические элементы из библиотеки. Но для всех графических символов, которые будут иметь возможность перемещаться по рабочему полю, мы устанавливаем свойство MovieClip в выпадающем меню Symbol Behavior (Поведение символа). Это меню находится в верхней левой части панели Properties (рис. 7.2). Теперь, хотя мы создали этот символ как графический элемент, его копии можно присваивать имя, как будто он является клипом! Например символ «Armi» в библиотеке отображается как графический элемент, но на панели Properties мы присвоили ему имя «Parti», так как свойство его поведения было изменено.

Рисунок 7.2. В панели Properties вы можете назначить графическому Flash-элементу свойство клипа и имя, отличное от его имени в библиотеке

Несколько слов о взаимном перекрывании символов на рабочем столе. Я расположил все подвижные элементы поверх головы и туловища, которые статичны. Исключение сделано для символов с изображением ног – они помещены на последний (задний) и предпоследний планы. Выделив элемент на рабочем столе, вы можете изменить его уровень с помощью команды Modify → Arrange (Изменения → Упорядочить).

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

Рисунок 7.3. Ролик Make-A-Fox дает пользователю возможность перетаскивать части тела лисы в любое место экрана

Создай лису методом «Нажми и измени»

Исходный файл: Makeafox-switch.fla

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

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

Задача проекта

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

Подход

Библиотека данного ролика имеет не такую, как мы рассматривали раньше, организацию. Вместо отдельных изображений каждого варианта элемента лисы используются клипы. Каждый клип содержит все варианты данного элемента, по одному в кадре. Например, клип «Eyes» («Глаза») будет состоять из трех кадров, каждый из которых содержит другое изображение глаз.

Создание кода

Здесь не применяется перетаскивание, поэтому сценарий будет немного проще. Код представляет собой сценарий onClipEvent(mouseDown), помещенный в клип «ае1:юш», который расположен за пределами рабочего поля клипа. Как и функция hitTest в ролике Makeafox-drag.fla, данный сценарий проверяет, какой клип выбран.

Однако вместо имен "Parti" – "Part13" клипы получают значащие имена (например, "Eyes" и "Head"). Сценарий должен проверить каждый клип, для чего все клипы собраны в общий список.

При нахождении соответствующего клипа код продвигается на один кадр вперед. Если впереди кадров больше нет, он возвращается к кадру 1.

onClipEvent (mouseDown) {

// Определяем, в каком месте щелкнул пользователь.

x = _root._xmouse;

o = _root._ymouse;

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

list = ["Eyes", "Mouth", "Head", "Legs", "Left Arm",

"Right Arm", "Body"];

for(i=0;i<list.length;i++) {

if (_root[list[i]].hitTest(x, y, true)) {

// Меняем выбранный элемент.

with (_root [ list [i]]) {

// Переходим к следующему кадру.

if (_currentFrame == _totalframes) {

gotoAndStop(t); }

else {

nextFrame();

}

}

break;

}

}

}...

Примечание

Номер кадра и общее количество кадров определяется при помощи параметров _currentFrame и _totalFrame. Это очень удобно в случае, когда клипы могут включать любое количество кадров, а код – учитывать все возможные варианты.

...

Примечание

Конструкция with указывает, что все команды и функции кода в рамках этой конструкции должны выполняться для определенного клипа. Это позволит вам обойтись без добавления _root[movieClip] в начале каждой команды или функции.

Ролик Makeafox-switch.fla можно увидеть на Web-сайте. На рис. 7.4 показан один из возможных вариантов, получившихся в результате внесенных изменений. Независимо от того, сколько раз и в какой последовательности пользователь щелкает по элементам изображения, оно всегда будет оставаться цельным.

Рисунок 7.4. Пользователь может щелкнуть по любой части тела и изменить ее

К сведению

Для того чтобы закончить создание ролика Makeafox-switch.fla, следует обратить внимание еще на несколько деталей. Во-первых, каждый первый кадр клипа должен содержать команду stop(). Это поможет избежать безостановочного воспроизведения всех вариантов клипа при первом запуске ролика. Затем каждый клип должен быть помещен на рабочее поле и назван, как соответствующий элемент списка в коде.