Using TweenLite with heavy tween overwriting

[Ahrengot]

Hello tween masters!

 

I've built an image panner class (You know, the effect where you pan around a large image inside a smaller area, like the collection browser on this site: http://www.minus.dk/).

 

Everything is working and running really smoothly (test link: http://www.ahrengot.com/playground/panning/) and as you can see it adapts dynamically when you resize. I'm using TweenLite to do the tweening as i'm thinking of expanding the functionality later by adjusting the Vars object of TweenLite. My question is, is there anything i should be aware of when i'm doing a lot of tweening overrides like i am here?

 

This is the tweening mechanism (look in pan()):

/**
* Start panning
*/
public function start():void
{
_target.stage.addEventListener(MouseEvent.MOUSE_MOVE, pan);
}

private function pan(e:MouseEvent = null):void 
{
//	Horizontal panning mechanism
(_panX)? _targetX = getXTarget() : _targetX = _target.x;

//	Vertical panning mechanism
(_panY)? _targetY = getYTarget() : _targetY = _target.y;

//	Tween
TweenLite.to(_target, _ease, { y:_targetY, x:_targetX, overwrite:OverwriteManager.ALL_IMMEDIATE } );
}

private function getXTarget():int
{
if (_target.stage.mouseX >= _minX && _target.stage.mouseX <= _maxX)
{
	_posX = _target.stage.mouseX - _minX;
}

if (_target.stage.mouseX > _maxX) _posX = _maxX - _minX;
else if (_target.stage.mouseX < _minX) _posX = 0;

_posXFactor = (_posX) / _measureDistX;

return int(0 - ((_target.width - _area.width) * _posXFactor));
}

private function getYTarget():int
{
if (_target.stage.mouseY >= _minY && _target.stage.mouseY <= _maxY)
{
	_posY = _target.stage.mouseY - _minY;
}

if (_target.stage.mouseY > _maxY) _posY = _maxY - _minY;
else if (_target.stage.mouseY < _minY) _posY = 0;

_posYFactor = (_posY) / _measureDistY;

return int(0 - ((_target.height - _area.height) * _posYFactor));
}

 

Here's the entire class if anyone would like to use it

package ahrengot.ui 
{
import com.greensock.OverwriteManager;
import com.greensock.TweenLite;
import flash.events.Event;
import flash.events.MouseEvent;

import flash.display.DisplayObject;
import flash.geom.Rectangle;

public class PanArea
{
private var _target:DisplayObject;
private var _area:Rectangle;

//	Panning properties
private var _panY:Boolean;
private var _panX:Boolean;
private var _minY:Number;
private var _maxY:Number;
private var _minX:Number;
private var _maxX:Number;

private var _ease:Number;

//	Dynamic properties
private var _posXFactor:Number;
private var _measureDistX:Number;
private var _posX:Number;
private var _posYFactor:Number;
private var _measureDistY:Number;
private var _posY:Number;

private var _targetX:Number;
private var _targetY:Number;

/**
* Pans a DisplayObject within a specified area. Optionally applies a pan margin
* @param	$panTarget			- Target to pan
* @param	$panArea			- Area to pan within. Can be a Stage, a DisplayObject or a rectangle
* @param	$startImmidiately	- Whether or not to start the panning immidiately. (You start this manually by calling the start() method)
* @param	$horizontalPanning	- Pan horizontal?
* @param	$verticalPanning	- Pan vertically?
* @param	$ease				- Ease (duration property sent to TweenLite - Value is in seconds)
* @param	$marginTop			- Defines a margin area where panning isn't registered. ie. of you use a top and bottom margin of 100px within an area 400px high, the active scroll area will be 200px high.
* @param	$marginBottom		- Defines a margin area where panning isn't registered. ie. of you use a top and bottom margin of 100px within an area 400px high, the active scroll area will be 200px high.
* @param	$marginLeft			- Defines a margin area where panning isn't registered. ie. of you use a top and bottom margin of 100px within an area 400px high, the active scroll area will be 200px high.
* @param	$marginRight		- Defines a margin area where panning isn't registered. ie. of you use a top and bottom margin of 100px within an area 400px high, the active scroll area will be 200px high.
*/
public function PanArea($panTarget:DisplayObject, $panArea:*, $startImmidiately:Boolean = true, $horizontalPanning:Boolean = true, $verticalPanning:Boolean = true, $ease:Number = 0.35, $marginTop:Number = 0, $marginBottom:Number = 0, $marginLeft:Number = 0, $marginRight:Number = 0) 
{
_target = $panTarget;
($panArea is Rectangle)? _area = $panArea : _area = new Rectangle($panArea.x, $panArea.y, $panArea.width, $panArea.height);

_panY = $horizontalPanning;
_panX = $verticalPanning;

_minY = $marginTop;
_maxY = _area.height - $marginBottom;
_minX = $marginLeft;
_maxX = _area.width - $marginRight;

_measureDistX = _maxX - _minX;
_measureDistY = _maxY - _minY;

_ease = $ease;

if ($startImmidiately) start();
}

private function pan(e:MouseEvent = null):void 
{
//	Horizontal panning mechanism
(_panX)? _targetX = getXTarget() : _targetX = _target.x;

//	Vertical panning mechanism
(_panY)? _targetY = getYTarget() : _targetY = _target.y;

//	Tween
TweenLite.to(_target, _ease, { y:_targetY, x:_targetX, overwrite:OverwriteManager.ALL_IMMEDIATE } );
}

private function getXTarget():int
{
if (_target.stage.mouseX >= _minX && _target.stage.mouseX <= _maxX)
{
	_posX = _target.stage.mouseX - _minX;
}

if (_target.stage.mouseX > _maxX) _posX = _maxX - _minX;
else if (_target.stage.mouseX < _minX) _posX = 0;

_posXFactor = (_posX) / _measureDistX;

return int(0 - ((_target.width - _area.width) * _posXFactor));
}

private function getYTarget():int
{
if (_target.stage.mouseY >= _minY && _target.stage.mouseY <= _maxY)
{
	_posY = _target.stage.mouseY - _minY;
}

if (_target.stage.mouseY > _maxY) _posY = _maxY - _minY;
else if (_target.stage.mouseY < _minY) _posY = 0;

_posYFactor = (_posY) / _measureDistY;

return int(0 - ((_target.height - _area.height) * _posYFactor));
}

//////////////////////		PUBLIC METHODS		//////////////////////

/**
* Start panning
*/
public function start():void
{
_target.stage.addEventListener(MouseEvent.MOUSE_MOVE, pan);
}

/**
* Stop panning
*/
public function stop($killActiveTweens:Boolean = true):void
{
if ($killActiveTweens) TweenLite.killTweensOf(_target);
_target.stage.removeEventListener(MouseEvent.MOUSE_MOVE, pan);
}

/**
* Sets the area in which the panning is calculated.
* @param	$panArea
* @param	$marginTop			- Defines a margin area where panning isn't registered. ie. of you use a top and bottom margin of 100px within an area 400px high, the active scroll area will be 200px high.
* @param	$marginBottom		- Defines a margin area where panning isn't registered. ie. of you use a top and bottom margin of 100px within an area 400px high, the active scroll area will be 200px high.
* @param	$marginLeft			- Defines a margin area where panning isn't registered. ie. of you use a top and bottom margin of 100px within an area 400px high, the active scroll area will be 200px high.
* @param	$marginRight		- Defines a margin area where panning isn't registered. ie. of you use a top and bottom margin of 100px within an area 400px high, the active scroll area will be 200px high.
*/
public function adjustPanArea($panArea:*, $marginTop:Number = 0, $marginBottom:Number = 0, $marginLeft:Number = 0, $marginRight:Number = 0) 
{
stop();

_area = null;
($panArea is Rectangle)? _area = $panArea : _area = new Rectangle($panArea.x, $panArea.y, $panArea.width, $panArea.height);

_minY = $marginTop;
_maxY = _area.height - $marginBottom;

_minX = $marginLeft;
_maxX = _area.width - $marginRight;

_measureDistX = _maxX - _minX;
_measureDistY = _maxY - _minY;

_target.x = getXTarget();
_target.y = getYTarget();

start();
}

/**
* Remove listeners and readies for Garbage Colelction
*/
public function destroy():void
{
stop();
_target = null;
_area = null;
}
}
}

[GreenSock]

So everything is working fine? You're just asking us to look through your code to optimize it? As long as your setting overwrite to true (or ALL_IMMEDIATE), you should be fine in terms of avoiding overwriting comparison logic slowdowns.

[Ahrengot]

Well, both yes and no. I'm not asking you to run through my entire class and optimize everything it it. I don't believe that's what this forum is about

 

I am asking if there's any possible complications in my pan() method, where i'm doing potentially 30 tween overwrites per second(default framerate), if it runs for minutes on end doing thousands of overwrites and new tween instantiations.

 

I've, as you metioned, set the overwriting mode to ALL_IMMEDIATE as that's supposed to be the best option performance wise and made sure to kill tweens where relevant.

 

I've tested it out and found nothing to go wrong so far. Just wanted to make sure.

 

The reason I posted the entire class is so people here can just copy-paste it into their own projects if they'd like to use it

[GreenSock]

Yeah, TweenLite and TweenMax are highly optimized - I've had literally 8000 tweens per second getting created and still had good frame rates. You've seen the speed tests, right? http://www.greensock.com/tweening-speed-test/

[Ahrengot]

Yes, i am aware of those and that's why i figured i could use TweenLite in my panning class instead of writing my own tweening/easing code.

 

btw, i like the warning massage that appears when you switch to Adobe's tweening engine

 

Thanks for answering my question so quickly.