Программное перетаскивание объектов в флеш-роликах

Для перетаскивания мувиков по сцене флеш-ролика в ActionScript 2.0 имеется два специальных метода:

1.) startDrag() - задаёт параметры и начинает перетаскивание; имеет несколько необязательных, но очень полезных параметров:

- первый параметр отвечает за положение курсора мышки относительно перетаскиваемого объекта и может принимать булевы значения true или false. Работу данного параметра наглядно демонстрирует следующий пример.

В данном приложении имеется два мувиклипа, которые можно перетаскивать. Но левому мувиклипу в качестве первого параметра указано значение true. Поэтому при перетаскивании левого мувика курсор мышки всегда располагается над точкой регистрации мувиклипа (в данном примере нулевая точка координат мувиклипа помечена двумя пересекающимися линиями). А правому мувику в качестве первого параметра указано false, благодаря чему жесткой привязки курсора мышки к центру мувиклипа не происходит.

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

2.) stopDrag() - останавливает перетаскивание.

Примечания:

[!] на плавность перетаскивания влияет fps данного флеш-ролика. Если fps низкий, то перетаскивание будет происходить рывками, объект будет заметно отставать от курсора мышки;

[!] одновременно можно перетаскивать только один объект.

Чтобы проверить работу этих методов на практике, создаём мувик с именем "mc" и пишем приведённый ниже код на главной временной шкале флеш-ролика.

Код ActionScript 2.0:

mc.onPress = function() { mc.startDrag(false, 100, 100, 450, 300); }; mc.onRelease = function() { mc.stopDrag(); };

В результате у нас получается следующее:

В данном примере границы области перетаскивания обозначены красной пунктирной линией. Сама же прямоугольная область перетаскивания построена на основе координат верхнего левого угла (100,100) и нижнего правого угла (450,300).

В ActionScript 3.0 перетаскивание осуществляется одноимёнными методами, но для определения области перетаскивания используется экземпляр класса Rectangle, который имеет 4 параметра:

- координаты области перетаскивания по оси x;

- координаты области перетаскивания по оси y;

- ширина области перетаскивания;

- высота области перетаскивания.

Код ActionScript 3.0:

addEventListener(MouseEvent.MOUSE_DOWN, mDown); function mDown(event:MouseEvent):void { /* От первого параметра зависит расположение объекта относительно курсора мышки. Второй параметр определяет границы области, в которой осуществляется перетаскивание. */ mc.startDrag(true, new Rectangle(100,100,350,200)); } addEventListener(MouseEvent.MOUSE_UP, mUp); function mUp(event:MouseEvent):void { /* останавливаем перетаскивание */ mc.stopDrag(); }

Автор: admin

Дата добавления: 2011-07-20

Просмотров: 23511

Рейтинг поста: +38-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): Олег
Дата добавления: 2013-10-28
Нет, не мне.
Да, я тоже о движке greensock. Очень полезен при создании легкой анимации, но пока не освоил все его возможности.

Создал всего 5 мувиклипов, присвоил им нужные имена экземпляров.
В коде почему-то при компиляции появляется ошибка в строках 19 и 51 "1120 Обращение несуществующего свойства container".

Пробовал даже комбинировать эти 3 мувиклипа в "container".

Второй вопрос про события мыши...

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

Как можно запрограммировать то же, но что бы мувики цеплялись при наведении на них курсора и отцеплялись, в случае попадания в нужную область (тоже, без действий со стороны пользователя)?
А в случае не попадания и выхода за пределы баннера или области rectangle прекратили следить за курсором мыши. То есть, перемещаться по краям этого прямоугольника?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-10-28
Ммм... А я не вам писал пример? Пример с перетаскиванием нескольких объектов и проверкой пересечения:


var obj:Object = {
mc_1:{startX:0,startY:0,hitAreaMc:"hit_mc_1"},
mc_2:{startX:0,startY:0,hitAreaMc:"hit_mc_1"},
mc_3:{startX:0,startY:0,hitAreaMc:"hit_mc_2"}
};

var mc:MovieClip;
for(var prop in obj)
{
mc = container.getChildByName(prop) as MovieClip;
obj[prop].startX = mc.x;
obj[prop].startY = mc.y;
mc.addEventListener(MouseEvent.MOUSE_UP, mUp);
mc.addEventListener(MouseEvent.MOUSE_DOWN, mDown);
}

function mDown(event:MouseEvent):void
{
var mc:MovieClip = event.target as MovieClip;
mc.startDrag(true, new Rectangle(0,0,550,400));
}

function mUp(event:MouseEvent):void
{
var mc:MovieClip = event.target as MovieClip;
var mc_hit:MovieClip = container.getChildByName(obj[mc.name].hitAreaMc) as MovieClip;
mc.stopDrag();
if (mc.hitTestObject(mc_hit))
{
mc.x = mc_hit.x;
mc.y = mc_hit.y;
}
else
{
mc.x = obj[mc.name].startX;
mc.y = obj[mc.name].startY;
}
}


Здесь mc_1, mc_2 и mc_3 - это мувики, которые надо перетаскивать, а hit_mc_1 и hit_mc_2 - это мувики, на которые надо перетаскивать.

Я так и не понял, о какой именно библиотеке вы говорите, но сам, как правило, использую TweenLite от greensock:

TweenLite.to(объект, время_в секундах, {свойство: значение});

Пример:

TweenLite.to(mc_1, 1, {x:0, y:0});

Как-то так...
Комментатор
Комментарий добавил(а): Олег
Дата добавления: 2013-10-28
Здравствуйте!

Подскажите пожалуйста, как можно доработать уже этот код

Комментарий добавил(а): edapskov

Дата добавления: 2013-10-08?

Совсем стандартный эффект для интерактивного баннера: пользователь, не нажимая кнопок на мыши что-то складывает (например, в корзину покупок, корзинку, на весы, на стиллаж и т д ) из одного угла баннера в другой "рисунок".

Не нахожу в сети этого примерного распространенного кода.

В чем именно вопрос по этому уроку...
Код очень похож, но...
1. Мувиклипы разные, это картинки в частности, с товаром. Как ЗДЕСЬ использовать массив?
2. Рандомное место назначения и возврата мувика в нужных пределах сделать элементарно, но очень желательна "плавность" при перемещении в произвольную точку (нужную) и возврат в исходную каждого мувика из массива.
С библиотекой Твин Лайт-Макс знаком, но как ее методы СЮДА добавить?. Планирую Нано или Лайт т к понадобится для других эффектов в баннере и ее небольшой вес. Поэтому таким способом хочу сделать.
Или же программным изингом (?) встроенными средствами, для этого, насколько я помню в as2 или as3 требуется несложная строчка когда с математической формулой т. н. "икс мечты с замедлением". Которую я забыл...
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-10-08
Пардон, ваш комментарий попал в спам и я его не сразу заметил. В самом простом случае это можно сделать следующим образом:

/*
mc - это перетаскиваемый мувик
mc_hit - это мувик, на который надо перетащить мувик mc
*/
/*
переменные, хранящие изначальное положение мувика mc
*/
var startX:uint = mc.x;
var startY:uint = mc.y;
/*
ловим события начатия и отпускания ЛКМ
*/
addEventListener(MouseEvent.MOUSE_UP, mUp);
addEventListener(MouseEvent.MOUSE_DOWN, mDown);
function mDown(event:MouseEvent):void
{
mc.startDrag(true, new Rectangle(0,0,550,400));
}
function mUp(event:MouseEvent):void
{
mc.stopDrag();
/*
если mc пересекается с mc_hit, то mc присваиваются координаты mc_hit
в противном случае mc возвращается в изначальное положение
*/
if(mc.hitTestObject(mc_hit))
{
mc.x = mc_hit.x;
mc.y = mc_hit.y;
}
else
{
mc.x = startX;
mc.y = startY;
}
}
Комментатор
Комментарий добавил(а): Андрей
Дата добавления: 2013-10-07
Подскажите, пожалуйста, как будет выглядеть код, если необходимо ограничить не область перетаскивания, а область, где объект можно "оставлять". Т.е. если объект при перетаскивании попадает в эту область, то при отпускании кнопки мыши он перемещается в определенное место, а если вне этой области, то возвращается в исходное положение.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-04-10
Что-то вроде этого?



Синие точки можно перетаскивать.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-04-10
Анатолий, необходимые вам расчёты - это школьная тригонометрия, а не программирование :-) Где-то у меня даже был пример. Сейчас поищу...
Комментатор
Комментарий добавил(а): Анатолий
Дата добавления: 2013-04-10
Уважаемый автор, подскажите на данном примере, допустим я хочу сделать что то вроде счетчика, который будет находится где то в углу, который замеряет расстояние отдаление этого объекта, скажем, от центра рабочего пространства по оси X (иск).
Может вы подскажете скрипт, как такую штуку сделать?

Мне один человек сказал что необходимо создать сетку, которая будет замерять расстояние, допустим 1 ячейка сетки это 1 единица измерения. Но как такую штуку привязать к объекту и счетчику - непростая для меня, как для новичка по AS 2.0 задача.
Поможете разобраться?

если найдутся люди кто понял проблему и может помочь откликнитесь пожалуйста, или стукните на почту taleron@mail.ru

Заранее благодарю, и спасибо большое за познавательный урок!
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-11-30
>Что то мне ничего не понятно,addEventListener мы используем с воздухом?наверное нужен обект к которому привязывается собитие?

Нет, не к воздуху, а к контейнеру, в котором находится перетаскиваемый объект. Это просто сокращённая запись :-) Хотя, признаюсь, пример не самый удачный. Гораздо удобнее, когда перетаскивание начинается после MOUSE_DOWN именно по перетаскиваемому объекту, а заканчивается, когда пользователь сделал MOUSE_UP в любом месте на сцене флеш-ролика.
Комментатор
Комментарий добавил(а): Says
Дата добавления: 2012-11-20
Что то мне ничего не понятно,addEventListener мы используем с воздухом?наверное нужен обект к которому привязывается собитие?
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Страница 2 из 4: 1234
Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика