Здравствуйте, гость ( Вход | Регистрация )

Свернуть

Новости

Форум Лучшее из галереи Уроки и статьи
07.12.2015 Выставочный зал: кошарик - персональная выставка
31.08.2015 Интересные ссылки для рисовальщиков
21.01.2015 Выставочный зал 2: Игрушки Олеси Гавриленко

27.12.2014 Выставочный зал: кошарик - персональная выставка
17.11.2014 Дуэль "Рыбки" - победитель Лисичка
05.11.2014 Конкурс иллюстраций "Снежная королева", до 31 января
30.10.2014 Дуэль "Рыбки" до 16 ноября
14.07.2014 Мастер-класс Мини-мишка в технике фелтинга
26.05.2013 Ау! Мы ищем таланты! – приглашаем модераторов!
Жизнь Насекомых
tn_gallery_59_132_87245.jpg

© ВиднаЯ ТенЬ
06.01.2016 Виртуальный Музей: Русский живописец Василий Дмитриевич Поленов
28.12.2015 Виртуальный Музей: Нидерландский живописец Квентин Массейс
16.12.2015 Виртуальный Музей: Итальянский живописец Франче́ско Айец
17.11.2015 Виртуальный Музей: Луи Анкетен (Louis Anquetin)
11.11.2015 Виртуальный Музей: Русский живописец Алексей Иванович Корзухин
Файловый архив
06.09.2013 Прочее: Файлы к уроку "Чайная церемония"
05.09.2013 Журнал Art Tower: ArtTower Magazine #8
16.05.2013 Adobe Photoshop: Кисти: Reid Southen brush
16.05.2013 Adobe Photoshop: Кисти: Goro Fujita brush
16.05.2013 Adobe Photoshop: Кисти: Кисти для рисования в Photoshop
Блоги Новости в цифровом мире и мире дизайна
02.12.2014 Дама с каменьями: Вести с крыши 2
08.11.2014 Timenews: Вассерман: прежняя модель мировой экономики исчерпала себя
06.11.2014 Дама с каменьями: Приятные вести с крыши))) от Гаргула)
02.11.2014 Spell: Книги Дж. Кэмерон
22.10.2014 Vjaz: от ФУ до МА
25.11.2015 Комментарий от Foxx в Costa Rica Adventure Divers, Логотип для компании и рисунок на майку (maria_mer)
18.11.2015 Комментарий от maria_mer в Spellforce - майка, для фанов игры (maria_mer)
18.11.2015 Комментарий от maria_mer в Белая книга. Целитель - любительский прект (maria_mer)
09.04.2015 Комментарий от Romana в Книги Дж. Кэмерон (Spell)
08.04.2015 Комментарий от Romana в Я решил вернуться... (Элбирет)
16.03.2015 ФОТОФОРУМ-2015
01.01.2015 ARQUTE.com и ArtTalk.ru закрываются
19.01.2017 Конкурс дизайна логотипов
26.12.2016 ру/Ководство: О творческом развитии
14.10.2016 ру/Ководство: Разнообразие

 
Добавить ответ в эту темуОткрыть тему
> Основоположения программирования - часть V.4, перетащить и бросить
V
Des
сообщение 29.07.2009 - 09:54
Сообщение #1


тритониус
****

Звезда писателя I степениЗа вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 728
Регистрация: 9.12.2007
Из: Москва \ Питер
Пользователь №: 6553
дышу под водой
Галерея Блог


Симпатии:  68  


Предыдущая часть: Основоположения программирования - часть 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) проверяет, соприкасаются ли "области соприкосновения"2, и если "да" - выдает 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




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


------------------------------------
1вообще, программируя на AS2, следует очень осторожно использовать приравнивание координат объекта к координатам курсора мыши - это чревато тормозами... к сожалению. AS3 + flash plugin v. 10 лишены этого недостатка - но там и события организуются иначе.
2 У этого метода может быть задан второй параметр - 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
сообщение 10.01.2010 - 13:23
Сообщение #2






Группа: Туристы
Сообщений: 6
Регистрация: 30.10.2008
Из: Новосибирск
Пользователь №: 10427
Камасутра Adobe Flash



Симпатии:  0  


После продчения этого урока моя светлая Голова и наличие свободного времени породили ЭТО smile.gif Прошу любить и жаловать, сэнсэй, - Крестики-нолики "Вдвоём одной мышкой" smile.gif
Прикрепленные файлы
Прикрепленный файл  крест_ноль2.rar ( 24.02 килобайт ) Кол-во скачиваний: 25
Прикрепленный файл  крест_ноль2.swf ( 4.07 килобайт ) Кол-во скачиваний: 57
 
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения

Быстрый ответДобавить ответ в эту темуОткрыть тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



- Текстовая версия форума Сейчас: 17.12.2017 - 22:20