TIPS OF FLASH: взмылим веревку!

Iv (dembicki@narod.ru)

Спецвыпуск Xakep, номер #027, стр. 027-104-3

_root.my_mc.onEnterFrame = function() {

this.accel_x = (this.target_x-this._x)/5;

this.accel_y = (this.target_y-this._y)/5;

this.speed_x = (this.speed_x+this.accel_x)*this.damp;

this.speed_y = (this.speed_y+this.accel_y)*this.damp;

this._x += this.speed_x;

this._y += this.speed_y;

};

_root.my_mc.onMouseDown = function() {

this.target_x = _root._xmouse;

this.target_y = _root._ymouse;

};

Значения переменных в "эластичном" скрипте

Тестани. На клик шарик будет устремляться на установленную ему цель. В расчете участвуют переменные: target (цель), accel (ускорение), speed (скорость) и константа damp (затухание). Причем на каждое измерение собственная переменная.

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

TIPS 11

То же самое можно написать гораздо короче:

_root.my_mc.onEnterFrame = function() {

this._x += this.speed_x=(this.speed_x+(this.target_x-this._x)/5)*this.damp;

this._y += this.speed_y=(this.speed_y+(this.target_y-this._y)/5)*this.damp;

};

Именно этот вариант и будем юзать в нашем скрипте.

Вернемся к веревке и привяжемся с эластичностью к узловым мувиклипам. Значения, которые мы рассчитали для позиции узловых точек, теперь будем применять иначе: они станут значениями цели - target для них. Эластику можем повесить каждому мувику на событие enterFrame, но лучше рассчитывать все в одном месте во избежание торррмозззов.

Добавим в класс переменную затухания:

p.damp = 0.9;

Оформим расчет эластичной позиции в одной функции в классе:

p.update = function(prev_mc, next_mc, damp) {

var y = (prev_mc._y+next_mc._y+this._parent.weight)/2;

var x = (prev_mc._x+next_mc._x)/2;

this._x += this.sx=(this.sx+(x-this._x)/5)*damp;

this._y += this.sy=(this.sy+(y-this._y)/5)*damp;

};

А на onEnterFrame применим функцию ко всем узловым мувикам, передав в аргументах предыдущий и следующий мувик в массиве и значение затухания.

p.onEnterFrame = function() {

for (var i = 1; i<this.arrMC.length-1; i++) {

this.update.apply(this.arrMC[i], [this.arrMC[i-1], this.arrMC[i+1], this.damp]);

}

};

Потесть. Уже похоже! Осталось только нарисовать веревку.

ВЕРЕВКА И МЫЛО

Для начала просто соединим все точки массива прямыми линиями:

p.onEnterFrame = function() {

this.clear();

this.lineStyle(0, 0, 100);

this.moveTo(this.arrMC[0]._x, this.arrMC[0]._y);

for (var i = 1; i<this.arrMC.length-1; i++) {

this.update.apply(this.arrMC[i], [this.arrMC[i-1], this.arrMC[i+1], this.damp]);

this.lineTo(this.arrMC[i]._x, this.arrMC[i]._y);

}

this.lineTo(this.arrMC[i]._x, this.arrMC[i]._y);

};

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

Есть три узловые точки (на рисунке 1, 3, 5), соединенные гладкой кривой. Кривая эта будет гладкой только до тех пор, пока точки 2, 4 и узловая точка 3 будут находиться на одной прямой. Как только одна из точек сместится с этой прямой, тут же образуется угол. А этого мы должны избежать.