Limiting the 'speed' of a tween

[4foot30]

Hello all,

 

I'm trying to do some scrolling using AS2 and TweenLite/Max, which is a godsend!...

 

I'm doing mouse-based scrolling, pretty standard stuff - when your mouse is all the way left, scroll a strip of thumbnails all the way right and vice-versa. I'm doing this by using percentages - if mouse is 100% to the left, thumbnails should tween to 100% right and so on.

 

This is working, but the number of thumbnails can vary, meaning that to get from one side to the other the speed could vary in order to complete the tween animation in the same amount of time.

 

Therefore more thumbnails equals faster movement and a mouse control system that's too fast for the user to actually settle on any one thumbnail.

 

My question is: is there any way with TweenMax/Lite to do the tween, but limit the speed at which the thumbnails strip moves along the x-axis?

 

E.g. work out that the x value is changing too fast, cap it off, and then change the duration of the tween so that the x value continues to change smoothly but the tween takes longer to finish?

 

I haven't found anything in the docs or forums that might help with this.

 

Any help much appreciated,

 

Thanks,

 

Gareth Jones

[GreenSock]

Why not base things on pixels instead of percentages? That way, you can control the speed better. Maybe use an ENTER_FRAME to watch the mouse position and have a "destinationX" or "destinationY" value that you change based on the mouse position. Use a maxSpeed variable, so if the mouse is all the way to the left (100% = 1), you multiply that by the maxSpeed and add that value to the destinationX, then set up your tween to the new destination. Of course you'd apply max/min values so that destinationX never shoots past the boundaries.

[4foot30]

Thanks very much for the reply - I didn't expect one so soon!

 

I had sort of implemented what you've suggested - it nows runs onEnterFrame, using a maxSpeed variable. The thumbnails are moved on enterframe by a percentage of the maxSpeed variable: -100% for mouse all the way left, 0% for a centred mouse and 100% for mouse all the way left. So:

 

thumbs_mc._x -= maxSpeed * mouse_percentage;

 

The trouble is I can't work out a way to link this to a tween so I can use easing. I've got the thumbnails moving, and speeding up or slowing down based on how near your mouse is to the extreme left/right. The trouble is this movement is happening onEnterframe, so it is constantly occuring. The only way to stop the movement is to centre your mouse, or to let the thumbnails scroll to either edge (which stops them dead, instead of easing towards the edge).

 

I'm unsure of how to work out the destinationX value that you're suggesting and then tween to that point - how can I avoid the same problem as before, which is that a tween over a longer distance in the same amount of time will appear to move much faster?

 

Once again thanks for your help,

 

Gareth Jones

[GreenSock]

Maybe this will help - it's a slightly modified version of an EVENT_FRAME handler for a little horizontal scrolling group of thumbnails that I used in a recent project:

 

var _destinationX:Number = thumbnails.x;
function _enterFrameHandler(event:Event):void {
if (_main.mouseIsOverStage) { //only scroll when the mouse is over the stage - I handle this logic elsewhere
	var activePixels:uint = 120; //number of active pixels on each edge of the scrolling area that will trigger scrolling. The further to the edge the mouse is, the faster the scroll.
	var maxSpeed:Number = 60;
	var ratio:Number, destinationX:Number;
	if (this.mouseX 			ratio = 1 - ((_centerToEdge + this.mouseX) / activePixels);
		destinationX = _destinationX + maxSpeed * ratio;
		if (destinationX > _maxScrollX) {
			destinationX = _maxScrollX;
		}
		TweenLite.to(thumbnails, 1, {x:destinationX});
	} else if (this.mouseX > _centerToEdge - activePixels) { //scroll right
		ratio = 1 - ((_centerToEdge - this.mouseX) / activePixels);
		destinationX = _destinationX - maxSpeed * ratio;
		if (destinationX 				destinationX = _minScrollX;
		}
	}
	if (destinationX != _destinationX) {
		_destinationX = destinationX;
		TweenLite.to(thumbnails, 1, {x:destinationX});
	}
}
}

 

Feel free to add whatever ease you want to the tween. Hopefully this gives you the general idea though.

[4foot30]

Hello,

 

I got it working - massive thanks for taking the time to help. All hail roundProps as well!!!

 

I had to adapt your code a bit to fit what my layout was doing, but here it is in AS2 (thumbnails_holder is the strip of thumbnails, thumbnails_mask is the viewable area):

 

_root.ratio = 0;
_root.destinationX = _root.button_select._x;
_root._destinationX = _root.thumbnails_holder._x;
_root.maxSpeed = 15;
// Set the scrolling trigger areas to be a multiple of the number of columns, unless you have one column
if (_root.thumbnails_mask._width > 396) {
_root.activePixels = (198 * (Math.floor((_root.thumbnails_mask._width / 2) / 198)) - 25);
} else {
_root.activePixels = 50;
}
// Start scrolling the grid if needed
if (_root.thumbnails_holder._width > _root.thumbnails_mask._width) {
_root.onEnterFrame = function() {
	_root.scrollGrid();
};
}
function scrollGrid() {
// If the mouse is inside the scrollable area:
if (_root._ymouse > _root.nav._y + _root.nav._height && _root._ymouse < _root.footer._y - _root.footer._height) {
	var _leftEdge:Number = _root.thumbnails_mask._x;
	var _rightEdge:Number = _root.thumbnails_mask._x + _root.thumbnails_mask._width;
	var _maxScrollX:Number = _leftEdge;
	var _minScrollX:Number = _rightEdge - _root.thumbnails_holder._width;
	if (_root._xmouse < _leftEdge + _root.activePixels) {
		// Scroll left
		_root.ratio = ((_leftEdge + _root.activePixels) - _root._xmouse) / _root.activePixels;
		_root.destinationX = _root._destinationX + _root.maxSpeed * _root.ratio;
		if (_root.destinationX > _maxScrollX) {
			_root.destinationX = _maxScrollX;
		}
	} else if (_root._xmouse > _rightEdge - _root.activePixels) {
		// Scroll right
		_root.ratio = 1 - ((_rightEdge - _root._xmouse) / _root.activePixels);
		_root.destinationX = _root._destinationX - _root.maxSpeed * _root.ratio;
		if (_root.destinationX < _minScrollX) {
			_root.destinationX = _minScrollX;
		}
	}
	if (_root.destinationX != _root._destinationX) {
		_root._destinationX = _root.destinationX;
		// Add a slower tween if you're about to hit either edge
		if (_root.destinationX != _maxScrollX && _root.destinationX != _minScrollX) {
			TweenMax.to(_root.thumbnails_holder,1,{_x:_root.destinationX, ease:Strong.easeOut, roundProps:["_x"]});
		} else {
			TweenMax.to(_root.thumbnails_holder,1.5,{_x:_root.destinationX, ease:Strong.easeOut, roundProps:["_x"]});
		}
	}
}
}