Составь лису методом «Перетащи и положи»

Составь лису методом «Перетащи и положи»

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

Многие компьютерные игры созданы по подобию игрушек докомпьютерной эры. Одна из таких старых игрушек – "Mister Potato Head" (Господин картофельная голова). Она представляла собой набор пластиковых частей тела, которые ребенок мог прикрепить к картошке и сделать смешного человечка. Позже вместо картошки стали использовать пластиковое туловище.

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

Задача этого проекта – создать приложение, которое позволит пользователю присоединять части тела лисы к неподвижному туловищу и так составлять изображение зверька. Метод drag-and drop (перетащи и положи) должен быть знаком всем, кто умеет работать с компьютером.

Подход

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

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

Подготовка ролика

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

Рисунок 7.1. Изображенные слева части тела можно переместить к расположенному справа туловищу

Ролик можно запустить, открыв файл Makeafox-drag.fla на Web-сайте. Вы можете выбрать любую часть тела и переместить ее в любую часть экрана.

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

Если вы уже работали во Flash, вы можете подумать, что это легко – необходимо просто использовать клипы частей тела и команды startDrag и stopDrag. На самом деле такой подход только все усложнит. Я не любитель команды startDrag и не буду использовать ее здесь, поскольку перемещать с ее помощью элементы по рабочему полю не так уж и просто.

Представив каждую часть тела в виде кнопки, вы можете назначить ей обработчик события on(press) и применить команду startDrag. Однако кнопка не может служить в качестве цели команды startDrag, такой целью может быть только клип. Если же вы представите их в виде клипов, им нельзя будет назначить функцию on(press), так как она используется только с кнопками. Еще одним вариантом является представление каждой части тела как клипа с кнопкой внутри. Здесь можно легко запутаться, так как каждый раз при добавлении в ролик новой части вам придется выполнить несколько действий.

Лучшим выходом будет написать код, выполняющий процедуру drag-and-drop самостоятельно. Отдельным частям не будет назначено никакого кода, благодаря чему их будет легко создавать и добавлять новые.

Весь код поместим в клип "actions", который как обычно находится вне, пределов рабочей области и содержит только надпись "Actions".

Данному клипу назначен сценарий 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;

}

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



Поделитесь на страничке

Похожие главы из других книг:

Проверка уникальности контента методом шинглов

Из книги автора

Проверка уникальности контента методом шинглов Уникальный, качественный, ласкающий глаз и не взрывающий мозг контент – краеугольный камень SEO — продвижения. Контент должен быть представлен либо авторскими текстами, либо рерайтом, сделанным с чувством, с толком, с


9.5. Вероятностный анализ методом Монте-Карло

Из книги автора

9.5. Вероятностный анализ методом Монте-Карло До сих пор вы исходили из того, что компоненты проектируемых схем действительно имеют свои номинальные значения, что, к примеру, резистор, рядом с которым установлен индикатор значения 1 Ом, на самом деле имеет значение 1 Ом.


Формирование точек методом «направление – расстояние»

Из книги автора

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


Формирование точек методом «направление – расстояние»

Из книги автора

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


Формирование точек методом «направление – расстояние»

Из книги автора

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


Совет 47 Составь план

Из книги автора

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


Урок 17. Применение метода «Перетащи и положи» к клипам

Из книги автора

Урок 17. Применение метода «Перетащи и положи» к клипам Исходный файл: Dragsimple.fla Важным свойством интерфейса, будь то игра или приложение, является возможность перетаскивать элементы по экрану. Во Flash это можно сделать несколькими способами. Мы рассмотрим три из них.Команда


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

Из книги автора

Создай лису методом «Нажми и измени» Исходный файл: Makeafox-switch.fla В другом варианте конструирования изображений все элементы остаются на местах, однако пользователь получает возможность изменять их.Это версия нажми и измени предыдущего примера. одесь не используется


Найди лису

Из книги автора

Найди лису Исходный файл: Findafox.fla В игре "Найди лису" игроку показывают изображение, в котором он должен определить местоположение определенных объектов. В данном случае в ролике Findafox.fla местом действия является лес, а объектами, которые ищет игрок, – лисы.На первый взгляд


Поймай лису

Из книги автора

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


Подстрели лису

Из книги автора

Подстрели лису Исходный файл: Shootafox.fla Рассмотрим еще одну игру из серии "Найди и нажми" – игру-тир. Как и в игре "Найди лису", задача пользователя – щелкнуть по объектам на экране. На игру "Поймай лису" она похожа тем, что объекты появляются на экране в произвольных местах и


Тестирование методом «черного ящика»

Из книги автора

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