Новости

[Des]

Предыдущая часть: Основоположения программирования - часть V.3
Начало: Основоположения программирования - часть I

События в AS2 - продолжение.
Исходники к уроку: lesson_14.rar

1. Таскаем шарики - startDrag и stopDrag

Кроме rollOver, rollOut и click есть еще одна важная возможность, которая часто бывает нужна: "перетаскивание", или Drag&Drop ("перетащи и брось").
Конечно, можно реализовать перетаскивание объекта, используя имеющиеся события и изменения координат объекта на каждом фрейме (т.е. по событию onEnterFrame).
Однако это а) очень неудобно выписывать (что уже плохо) и б) тормозно (что уже - катастрофа).
Для драг-н-дропа (почти как рок-н-ролл, да?) есть специальные функции - startDrag(target) и stopDrag(), практическим освоением которых мы сейчас и займемся.
Эти функции - глобальные. Т.е. они не есть методы какого-либо конкретного ролика. Поэтому у первой из них есть параметр - мы должны сообщить ей, какой именно ролик "драг-и-дропать". А вторая означает "бросить все, что перетаскивается", и параметр ей, т.о., без надобности.
Для начала - простая задачка: перетаскиваем какой-нибудь объект-ролик (MovieClip). Если он попадает в нужную нам область - то при "бросании" там и остается, если нет - возвращается "на исходную".
Создаем новый документ Flash, устанавливаем размеры 400x200 px, 12 к/c (можно и больше, хотя для этой задачки и 12 хватит), FlashPlayer 9, AS2.
Переименовываем единственный слой в "as", сразу "вешаем" на него "замочек", создаем еще один слой - "back", на нем рисуем фон и, например, разделительную линию, за которую объект должен будет "затаскиваться".
Все как в fless_drag_00.fla из исходников к уроку.

Рисуем объект, который будем "таскать". У меня это "шарик", Вы можете нарисовать что душе угодно, но примерно таких же размеров.
Превращаем этот объект в MovieClip ( [F8] ), даем библиотечное имя (ball)и сразу же после "ок" присваиваем (в "свойствах") экземпляру на сцене - имя экземпляра (ball).
Исходник - fless_drag_01.fla

В первом кадре слоя "as" пишем (открыв редактор AS клавишей [F9]):

CODE

ball.onPress = function () {
startDrag(this);
}
ball.onRelease = function() {
stopDrag();
}
stop();

Так просто? - да, так просто. [F12]. Работает? Если вдруг нет - проверяем по исходнику fless_drag_02.fla

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

CODE

var x0 = ball._x;
var y0 = ball._y;

ball.onPress = function () {
startDrag(this);
}

ball.onRelease = function() {
stopDrag();
if (this._x > 257) {
this._x = x0;
this._y = y0;
}
}
stop();

Задача выполнена? - проверяем... [F12]



Исходник fless_drag_03.fla

2. hitTest() и swapDepth, или как сделать, чтобы они не налезали друг на друга...

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

Для начала создадим и "обкодим" второй точно такой же объект. Для этого имеющийся у нас по предыдущему примеру "шарик" (или Ваш объект) можно просто скопировать (напр., [Ctrl+C], [Ctrl+V] при выбранном объекте на сцене) и задать имя экземпляра - ball2. А можете нарисовать новый объект - нам важно только, чтобы это был ролик (MovieClip), чтобы он был подходящих габаритов и чтобы имя экземпляра ему было присвоено - 'ball2'.
Код:

CODE

var x0 = ball._x;
var y0 = ball._y;
var x2 = ball2._x;
var y2 = ball2._y;

// по нажатию начинаем "перетаскивание
ball.onPress = function () {
startDrag(this);
}
ball2.onPress = function () {
startDrag(this);
}
// по отпусканию - прекращаем перетаскивание
// и проверяем, "вытащен" ли шарик с правого поля
ball.onRelease = function() {
stopDrag();
if (this._x > 257) {
this._x = x0;
this._y = y0;
}
}
ball2.onRelease = function() {
stopDrag();
if (this._x > 257) {
this._x = x2;
this._y = y2;
}
}
stop();

Исходники - fless_bounds_00.fla

ОК, оба объекта "таскаются" и "отскакивают назад", если не перетащены за волшебную линию. Очень хорошо, поехали дальше: добавляем к условию "отскакивания на исходную" каждого из объектов:
|| (this.hitTest(имя_второго_объекта)) , т.е. для объекта 'ball' условие будет выглядеть как
if (this._x > 257 || (this.hitTest(ball2))) { // <...>
для объекта 'ball2' -
if (this._x > 257 || (this.hitTest(ball))) { // <...>
(см. fless_bounds_01.fla)

Метод hitTest(target) проверяет, соприкасаются ли "области соприкосновения"², и если "да" - выдает true, если нет - false.

[F12]. Все в порядке? - не совсем...
Есть маленькая проблема... Заметили? - когда мы "таскаем" второй из объектов "над" первым, то он оказывается... "под", а не "над"! И, что еще хуже, не "отпускается", пока первый объект "перекрывает" его в точке "хватания мышкой".
Что делать? - давайте просто будем делать верхним тот объект, который таскаем. Для этого добавим в обработчики событий onPress немножко кода:

CODE

ball.onPress = function () {
if (this.getDepth() < ball2.getDepth()) {
this.swapDepths(ball2);
}
startDrag(this);
}
ball2.onPress = function () {
if (this.getDepth() < ball.getDepth()) {
this.swapDepths(ball);
}
startDrag(this);
}

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

Вот теперь - [F12] - все работает как задумано.

fless_bounds_02.fla




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


------------------------------------
¹вообще, программируя на AS2, следует очень осторожно использовать приравнивание координат объекта к координатам курсора мыши - это чревато тормозами... к сожалению. AS3 + flash plugin v. 10 лишены этого недостатка - но там и события организуются иначе.
² У этого метода может быть задан второй параметр - ShapeFlag:Boolean. Если он установлен в true, то hitTest будет проверять перекрытие объектов не по габаритам, как это происходит по умолчанию, а по внешним контурам.
Т.е., напр.: myCircle.hitTest(myStar) будет проверять "попадание" только по габаритам роликов, а myCircle.hitTest(myStar,true) - по контурам объектов.
Использовать проверку по контурам следует с осторожностью - это более ресурсоемкая операция, и если ее использовать, напр., при определении, попал ли фигуристый топор в злобного и не менее фигуристого бледнолицего врага на каждом фрейме - то топор, скорее всего, врага не достигнет по причине падения фреймрейта до нуля...

___________________________________


Автором урока является Des.
Запрещается копирование и публикация урока на других сайтах без письменного согласия автора и размещения ссылок.

The tutorial is written by Des.
No part of this tutorial can be copied/pasted on any other website without the author's express written permission.

Сообщение отредактировал Des - 29.07.2009 - 09:57

[Shurenberg]

После продчения этого урока моя светлая Голова и наличие свободного времени породили ЭТО Прошу любить и жаловать, сэнсэй, - Крестики-нолики "Вдвоём одной мышкой"

Прикрепленные файлы

 крест_ноль2.rar ( 24.02 килобайт ) Кол-во скачиваний: 25
 крест_ноль2.swf ( 4.07 килобайт ) Кол-во скачиваний: 57