PDA

Просмотр полной версии : Перемещение MovieClip при помощи мыши. Нужна помощь


FoxyRoxy
10.03.2014, 20:21
Как сделать так, что бы "MovieClip" при нажатии кнопки мышки на определенном участке окна, перемещался без скольжения, ускорения, поворотов с определенной (указанной) скоростью. Есть код, что в нём нужно дополнить, изменить? Спасибо!
На самом MovieClip:

onClipEvent (mouseDown) {
sx = _root._xmouse;
sy = _root._ymouse;
}

onClipEvent (enterFrame) {
this._x = this._x + (sx - this._x) / 4;
this._y = this._y + (sy - this._y) / 4;
}

Untitled.swf

Alexej
10.03.2014, 21:12
Как то так.
onClipEvent (mouseDown) {
sx = _root._xmouse;
sy = _root._ymouse;
}
onClipEvent (enterFrame) {
speedX = 4;
speedY = 4;
if (this._x<sx) {
if (this._x-sx<-speedX) {
this._x += speedX;
}
} else {
if (this._x-sx>speedX) {
this._x -= speedX;
}
}
if (this._y<sy) {
if (this._y-sy<-speedY) {
this._y += speedY;
}
} else {
if (this._y-sy>speedY) {
this._y -= speedY;
}
}
}

Hauts
11.03.2014, 07:18
var speed = 10;
var stepX;
var stepY;
var endX;
var endY;
this.onMouseDown = function(){
endX = this._xmouse;
endY = this._ymouse;
var angle = Math.atan2( endX - this._y, endY - this._x);
stepX = speed * Math.cos( angle )
stepY = speed * Math.sin( angle )

this.onEnterFrame = moveToPoint;
}
function moveToPoint(){
var dx = endX - this._x;
var dy = endY - this._y;
var distance = Math.sqrt( dx * dx + dy * dy);
if(distance > speed){
this._x += stepX;
this._y += stepY;
} else {
this._x = endX;
this._y = endY;
delete this.onEnterFrame;
}
}

Вот как-то так.

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

На каждое событие обновления (onEnterFrame) считаем расстояние до конечной точки. Если оно меньше, чем скорость — ставим клип в конечную точку. Если больше 0151 сдвигаем его по "шагам".

Алгоритм не идеальный, при большом расстоянии для перемещения и некоторых углах будет давать сбой в точности перемещения.

Наверное, можно б было подправить так:

var speed = 10;
var endX;
var endY;
this.onMouseDown = function(){
endX = this._xmouse;
endY = this._ymouse;
this.onEnterFrame = moveToPoint;
}
function moveToPoint(){
var dx = endX - this._x;
var dy = endY - this._y;
var angle = Math.atan2( endX - this._y, endY - this._x);
var stepX = speed * Math.cos( angle )
var stepY = speed * Math.sin( angle )
var distance = Math.sqrt( dx * dx + dy * dy);
if(distance > speed){
this._x += stepX;
this._y += stepY;
} else {
this._x = endX;
this._y = endY;
delete this.onEnterFrame;
}
}

— то есть перерассчитывать сдвиги для направлений на каждой итерации.

Добавлено через 3 минуты
Версия кода Alexej`я не по требованиям задачи: при диагональном перемещении скорость клипа будет в ~1,4 раза больше, чем при перемещении по одному направлению, вертикальному или горизонтальному.

И да. В качестве альтернативы предлагаю вам воспользоваться твинером, TweenMax`ом, к примеру. Тогда у вас будет возможность очень здорово контролировать динамику перемещения. А продолжительность перемещения легко рассчитывается исходя из расстояния для перемещения.

Если нужны примеры и пояснения — обращайтесь. Лучше тут, в теме, чем в личных сообщениях.

FoxyRoxy
11.03.2014, 18:47
Спасибо за помощь! Получилось еще так, возможно где-то допущены ошибки.
Пишем в 1 кадре:
speed = 5;
onMouseDown = function () {
endx = _xmouse;
endy = _ymouse;
};
onEnterFrame = function () {
dx = endx-obj._x;
dy = endy-obj._y;
go = Math.atan2(endy-obj._y, endx-obj._x)*360/Math.PI;
obj._x += Math.cos(go*Math.PI/360)*speed;
obj._y += Math.sin(go*Math.PI/360)*speed;
distance = Math.sqrt(dx*dx+dy*dy);
if (distance<speed) {
obj._x = endx;
obj._y = endy;
}
};
1.swf

Hauts
20.03.2014, 13:49
FoxyRoxy, нормально получилось.

Вот только я привык кэшировать значения, чтобы не было лишних действий. 360/Math.PI лего можно один раз объявить в переменной и не делать каждый раз.