ASTweened Horizontal Thumbnail menu/list

programming flash
1

Hello, all!

I am working on a class for a horizontal list of thumbnails that will function as a menu. The current selected thumbnail will display in the middle with the previous and next thumbnails displayed on either side. In the screenshot shown, the standby images before and after previous and next are also displayed, although they won’t be in the final result.

Here’s what it looks like at the moment:

Everything works apart from the animation itself. When the user clicks a left or right arrow, the thumbnails will slide left or right and change their size an opacity as well.

I have attempted to use the Tween class, but there are four clips to be animated with five tweens (the unused standby thumbnail is simply removed), amounting to a total of 20 Tween instances running simultaniously. That seems to be too heavy on the processor, so I’m exploring a different apprioach, but it dosn’t seem to be going all that well.

Here’s the code for the slide-function:


private function slide(clips:Array, xPositions:Array, yPositions:Array, scales:Array, opacities:Array):Void
{	
	// Test increment/decrement values
	var xSpeed:Number = 1;
	var ySpeed:Number = 0.2;
	var sSpeed:Number = 2;
	var aSpeed:Number = 10;
	
	// Animate all mc's in the clips array
	for (var i:Number = 0; i < clips.length; i++)
	{
		// Update animation counter
		this.animationsRunning++;
		
		var x:Number = xPositions*;
		var y:Number = yPositions*;
		var s:Number = scales*;
		var a:Number = opacities*;
		
		var thisObj:HorizontalFlipMenu = this;
		clips*.onEnterFrame = function()
		{
			// If no more adjustments are necessary
			if (this._x == x && this._y == y && this._xscale == s && this._yscale == s && this._alpha == a)
			{
				// Clear enterFrame loop
				this.onEnterFrame = null;
				delete this.onEnterFrame;
				
				// Update animation counter
				thisObj.animationsRunning--;
				
				// If all animations are finished
				if (thisObj.animationsRunning == 0) thisObj.onMotionFinished();
				return;
			}
			
			if (this._x != x)
			{
				if (this._x > x) this._x -= xSpeed;
				if (this._x < x) this._x += xSpeed;
			}

			if (this._y != y)
			{
				if (this._y > y) this._y -= ySpeed;
				if (this._y < y) this._y += ySpeed;
			}

			if (this._xscale != s)
			{
				if (this._xscale > s) this._xscale -= sSpeed;
				if (this._xscale < s) this._xscale += sSpeed;
			}

			if (this._yscale != s)
			{
				if (this._yscale > s) this._yscale -= sSpeed;
				if (this._yscale < s) this._yscale += sSpeed;
			}

			if (this._alpha != a)
			{
				if (this._alpha > a) this._alpha -= aSpeed;
				if (this._alpha < a) this._alpha += aSpeed;
			}
		}
	}
}

The animations are running, but the properties of the clips aren’t changing correctly, and I realize that this probably isn’t the most robust way of performing the animations anyhow. Does anyone of you have any suggestions as to how to modify/replace this code in order to attain the desired result?

If anything is unclear, please ask! Thanks!