Прокрутка как на iPad

[Srednas]

Здравствуйте.

Ситуация:
Допустим, есть длинный нарисованный состав из 100 вагонов, на сцену (шириной 500) влезает только 5 вагонов, нужно организовать прокрутку "как в айПаде", т.е. зацепил один вагон мышкой, повел в сторону и спроисходит смещение - становятся видны следующие/предыдущие вагоны. Кроме того, по-моему (ни айПада, ни айФона у меня нет) там есть что-то вроде инерции - чем быстрее вел, тем дольше продолжается движение после того, как отпустил объект.
Вопрос:
Есть ли у кого-нить наметки, как это делается, или примеры, или ссылки на похожие статьи? Во флеше не так давно, так что подойдут материалы "для чайников" )

[bav]

Могу предложить направление изысканий. Вам потребуется прослушка событий MouseEvent.MOUSE_DOWN, MouseEvent.MOUSE_UP и MouseEvent.MOUSE_MOVE. В слушателе MOUSE_MOVE вам нужно будет считывать координаты мыши и, исходя из них, считать скорость прокрутки. Зная скорость прокрутки, вы сможете реализовать инерцию. Кроме того можете добавить эффект смазывания, воспользовавшись flash.filters.BlurFilter.

[Tr1te]

Еще пригодится библиотека для плавной анимации перемещения: http://www.greensock.com/

[Cornford]

чтобы узнать скорость прокрутки, к примеру, можно сравнивать предыдущее и последующее положение (смещение) мыши в определенные отсчеты времени.

[Srednas]

Спасибо )
Сделал так:

// при нажатии на поезд
function pickupTrain(e:MouseEvent):void{
		wasMouseX = mouseX;   // координата, в которой произощел "зацеп" поезда
		stage.addEventListener(MouseEvent.MOUSE_MOVE, changeXY);   // слушатель на перемещение мыши
}
 
// функция изменения кординат при перетаскивании
function changeXY(e:MouseEvent):void{
		speedTrain = wasMouseX - mouseX   // вычисление скорости мыши
		this.Train.x -= speedTrain;   // движение поезда со скоростью мыши
		Mouse.cursor = MouseCursor.HAND;  // смена курсора
		e.updateAfterEvent();  // упдейт
		wasMouseX = mouseX; // перезапоминаем координату
}
 
// при отпускании поезда
function  releaseTrain(e:MouseEvent):void{
		stage.removeEventListener(MouseEvent.MOUSE_MOVE, changeXY);  // удаляем слушатель
		Mouse.cursor = MouseCursor.AUTO;   // смена курсора
}

поезд движется хорошо, но возникает вопрос:
как добавить инерцию после отпускания?

[bav]

как добавить инерцию после отпускания?

Школьный курс физики, раздел "Кинематика". Имеем начальную скорость (v0) и некоторое ускорение (a) с обратным знаком. По известной формуле x = x0 + v0*t + (a*t^2)/2 рассчитываем положения поезда в нужный момент времени.

[fljot]

Не обижайтесь, но работу подобного кода можно охарактеризовать только нехорошим словом. Сам так делал как-то =) Не вздумайте такие скроллы лепить на тач-устройства. Нужно учитывать случайный сдвиг при касании (не относится к мышке), нужно сглаживать-аппроксимировать скорость броска, надо делать грамотный(по ощущениям) pull и bounce, и всякие другие мелкие нюансы...

[Srednas]

Сообщение от fljot

Не обижайтесь, но работу подобного кода можно охарактеризовать только нехорошим словом. Сам так делал как-то =) Не вздумайте такие скроллы лепить на тач-устройства. Нужно учитывать случайный сдвиг при касании (не относится к мышке), нужно сглаживать-аппроксимировать скорость броска, надо делать грамотный(по ощущениям) pull и bounce, и всякие другие мелкие нюансы...

Спасибо за замечание ) Обижаться тут не на что - если код недостаточно хороший, его исправлять нужно. Есть ли у вас пример или ссылка на пример, где применяется аппроксимация и прочие нюансы? И что конкретно плохо, почему?

[fljot]

Можно посмотреть исходники нового флексового Scroller, там учитывается довольно много. Архитектура дебильная, чего-то не хватает, но посмотреть стоит. Я своё готовое решение пока не готов шарить.

[Srednas]

Сообщение от fljot

Я своё готовое решение пока не готов шарить.

Ну как только решение созреет, дайте знать )))

Добавлено через 15 часов 27 минут
Пока сделал так. Работает. Не айПад, конечно, но работает.

// при нажатии на поезд
function pickupTrain(e:MouseEvent):void{
		tweenTrain.stop();
		wasMouseX = mouseX;
		stage.addEventListener(MouseEvent.MOUSE_MOVE, changeXY);
}
 
// функция изменения кординат при перетаскивании
function changeXY(e:MouseEvent):void{
		speedTrain = wasMouseX - mouseX
		this.Train.x -= speedTrain;
		Mouse.cursor = MouseCursor.HAND;
		e.updateAfterEvent();
		wasMouseX = mouseX;
}
 
// при отпускании поезда
function  releaseTrain(e:MouseEvent):void{
 
		if (tweenTrain.isPlaying){
				tweenTrain.continueTo((this.Train.x - speedTrain*20), tweenTime);
		}
		else{	
				tweenTrain = new Tween(this.Train, "x", Strong.easeOut, this.Train.x, (this.Train.x - speedTrain*20), tweenTime, true);
		}
		speedTrain = 0;
		stage.removeEventListener(MouseEvent.MOUSE_MOVE, changeXY);
		Mouse.cursor = MouseCursor.AUTO;
}