Tween Function: Linking _xscale and _yscale

[3dmacguy]

Hi Everyone,

I have a tween function that animates the _xscale of a movieclip. The code I have now is:

function RedBallScale() {
        easeType = mx.transitions.easing.Strong.easeInOut;
        var begin = 100;
        var end = 2000;
        var time = 1.5;
        var mc = redBall_mc;
        fadeTween = new mx.transitions.Tween(mc, "_xscale", easeType, begin, end, time, true);
        fadeTween.onMotionFinished = function() {
        //initiates Logo FadeIn and sets red ball alpha to 0
        redBall_mc._alpha = 0;
        LogoFadeIn();
        };
}

This successfully scales the _xscale property of the movieclip. However, I need to scale BOTH the _xscale and the _yscale proportionally. Is there a way to link the _xscale value to the _yscale value within this function?

Thanks for your help!
-Josh

[petefs]

the simplest answer is:

fadeTween2 = new mx.transitions.Tween(mc, "_yscale", easeType, begin, end, time, true);

I haven't used the AS2.0 mx.transitions much, however. The tween protos for AS1 allow you to pass an array for properties and value. If the AS2.0 class allows for that, this would work (and produce less overhead)

fadeTween = new mx.transitions.Tween(mc, ["_xscale","_yscale"], easeType, [begin,begin], [end,end], time, true);

Hope that works ^_^

[SeanPaul72]

Place this code in your first frame if you are using MX 2004

/*
Tweening prototypes for AS 1.0
version 1.1.1
Ladislav Zigo,[email protected]
*/
function tweenManager() {
this.init();
}
var tp = tweenManager.prototype;
// static properties
tp.init = function(){
this.tweenList = new Array()
this.tweenHolder = _root.createEmptyMovieClip("_th_", 6789);
this.tweenHolder.onEnterFrame = function(){
	$tweenManager.update.call($tweenManager);
}
this.now = getTimer();
}
//-------------------------- private  methods
tp.update = function() {
		var i = this.tweenList.length;
		while (i--) {
			var t = this.tweenList[i];
			if (t.ts>this.now) {
				// wait, next iteration
				continue;
			}
			if (t.ts+t.d>this.now) {
				// compute value using equation function
				if (t.ctm == undefined) {
					// compute primitive value
					t.mc[t.pp] = t.ef(this.now-t.ts, t.ps, t.ch, t.d, t.e1, t.e2);
				} else {
					// compute color transform matrix 
					// stm is starting transform matrix, 
					// ctm is change in start & destination matrix 
					// ttm is computed (temporary) transform matrix
					// c is color object
					var ttm = {};
					for (var j in t.ctm) {
						ttm[j] = t.ef(this.now-t.ts, t.stm[j], t.ctm[j], t.d, t.e1, t.e2);
					}
					t.c.setTransform(ttm);
				}
			} else {
				// end , set up the property to end value;
				if (t.ctm == undefined) {
					t.mc[t.pp] = t.ps+t.ch;
				} else {
					var ttm = {};
					for (var j in t.ctm) {
						ttm[j] = t.stm[j]+t.ctm[j];
					}
					t.c.setTransform(ttm);
				}
				this.endTween(i);
			}
		}
		// update timer 
		this.now = getTimer();

};
tp.endTween = function(id) {
	with (this) {
		//callback function
		var et = tweenList[id];
		if (et.cb != undefined) {
			et.cb.func.apply(et.cb.scope, et.cb.args);
			if (tweenList[id] != et) {
				// there was callback function changed the tweenList
				// we must find again the id 
				var i = tweenList.length;
				while (i--) {
					if (tweenList[i] == et) {
						id = i;
						break;
					}
				}
			}
		}
		tweenList.splice(id, 1);
		//
	}
};
// ------------- public methods
tp.addTween = function(mc,props,pEnd,sec,delay,eqFunc,callback,extra1,extra2){
		
		with(this){
		//
		if(tweenHolder._name == undefined){
			init();
		}
		for(var i in props){
			if(props[i].substr(0,4)!="_ct_"){
				// there is no color transform prefix, use primitive value tween
				tweenList.unshift({							
						  mc: mc,				// reference to movieclip		
						  pp: props[i], 		// property
						  ps: mc[props[i]],		// starting value of property	
						  ch: pEnd[i] - mc[props[i]], 	// difference between starting and end value
						  ts: now + delay * 1000, 	// start time of tween
						  d:  sec * 1000, 		// duration of tween
						  ef: eqFunc, 			// reference to easing equation function
						  cb: callback,			// callback object (function which is called at end of tween)
						  e1: extra1,			// extra 1 value (for elastic and bouce equation)
						  e2: extra2});			// extra 2 value (for elastic equation)
			}else{
				// color trasform prefix found	
				// compute change matrix
				var c = new Color(mc);
				var stm = c.getTransform();
				// compute difference between starting and desionation matrix
				var ctm = {}
				for(var j in pEnd[i]){
					// if is in destination matrix 
					if(pEnd[i][j] != stm[j] ){
						ctm [j] = pEnd[i][j] - stm[j]
					}
				}
				// if there is no difference between start & end do not perform tween
				//if()
				tweenList.unshift({
						mc:  mc,			//reference to movieclip
						c:   c,				//reference to movieclip color
						stm: stm,			//starting transform matrix
						ctm: ctm,			
						ts:  now + delay * 1000,
						d:   sec * 1000,
						ef:  eqFunc,
						cb:  callback,
						e1:  extra1,
						e2:  extra2
				})			
			}
		} // end for
	}// end with
}
tp.removeTween = function(mc,props){
with (this){
			var all = false;
		if(props == undefined){
			// props are undefined, remove all tweens
			var all = true;
		}
		var i = tweenList.length; 
		while (i--){
			if(tweenList[i].mc == mc){
				if(all){
					tweenList.splice(i,1);
				}else{
					for(var j in props){
						if(tweenList[i].pp == props[j]){
							tweenList.splice(i,1);
							// props.splice(j,1) 
							// (because allows add same properties for same mc,
							// all tweens must be checked) 
						}
					}
				}
			}
		}

}	
}
tp.isTweening = function(mc){
	with(this){
		var is = false;
		for (var i in tweenList){
			if(tweenList[i].mc == mc){
				// mc found, so break loop
				is = true;
				break;
			}
		}
		return is;
	}
}
tp.getTweens = function(mc){
	with(this){
		var count = 0;
		for (var i in tweenList){
			if(tweenList[i].mc == mc){
				// found, increase count
				count++;
			}
		}
		return count;
	}
}
delete tp;
if($tweenManager == undefined){
_global.$tweenManager = new tweenManager();
}
// prototypes
MovieClip.prototype.tween = function(props, pEnd, seconds, animType,
				delay, callback, extra1, extra2) {
	if (arguments.length<2) {
		trace("error: props & pEnd must be defined");
		return;
	}
	// parse arguments to valid type:
	// parse properties
	if (typeof (props) == "string") {
		props = [props];
	}
	// parse end values
	// if pEnd is not array 
	if (pEnd.length == undefined ) {
		pEnd = [pEnd];
	} 
	// parse time properties
	if (seconds<0.01 || seconds == undefined) {
		seconds = 2;
	}
	if (delay<0.01 || delay == undefined) {
		delay = 0;
	}
	var now = getTimer();//_global.$tweenManager.now;
	var tstart = now+delay*1000;
	var tend = tstart+seconds*1000;
	// parse animtype to reference to equation function 
	switch(typeof(animType)){
	case "string":
	animType = animType.toLowerCase();
	if (animType == "linear") {
		var eqf = Math.linearTween
	} else {
		var eqf = Math[animType]
	}
	break;
	case "function":
		var eqf = animType;
	break;
	case "object":
		if(animType.pts != undefined && animType.ease != undefined){
		var eqf = animType.ease;
		var extra1 = animType.pts; 
		}
	}
	if (eqf == undefined) {
		// set default tweening equation
		var eqf = Math.easeOutExpo;
	}
	// parse callback function
	if (typeof (callback) == "function") {
		callback = {func:callback, scope:this._parent};
	}
	// pass parameters to tweenManager static method 
	_global.$tweenManager.addTween(this, props, pEnd, seconds, delay, eqf, callback, extra1, extra2);
};
ASSetPropFlags(MovieClip.prototype, "tween", 1, 0);
MovieClip.prototype.stopTween = function(props) {
	if (typeof (props) == "string") {
		props = [props];
	}
	$tweenManager.removeTween(this, props);
};
ASSetPropFlags(MovieClip.prototype, "stopTween", 1, 0);
MovieClip.prototype.isTweening = function() {
	//returns boolean
	return $tweenManager.isTweening(this);
};
ASSetPropFlags(MovieClip.prototype, "isTweening", 1, 0);
MovieClip.prototype.getTweens = function() {
	// returns count of running tweens
	return $tweenManager.getTweens(this);
};
ASSetPropFlags(MovieClip.prototype, "getTweens", 1, 0);
//
// == shortcut methods == 
// these methods only passes parameters to tween method
MovieClip.prototype.alphaTo = function (destAlpha, seconds, animType, delay, callback, extra1, extra2) {
	this.tween(["_alpha"],[destAlpha],seconds,animType,delay,callback,extra1,extra2)
}
ASSetPropFlags(MovieClip.prototype, "alphaTo", 1, 0);
MovieClip.prototype.colorTo = function (destColor, seconds, animType, delay, callback, extra1, extra2) {
	// destionation color transform matrix
	var destCt = {rb: destColor >> 16, ra:0,
				  gb: (destColor & 0x00FF00) >> 8, ga:0,
				  bb: destColor & 0x0000FF,ba:0}
	//
	this.tween(["_ct_"],[destCt],seconds,animType,delay,callback,extra1,extra2)
}
ASSetPropFlags(MovieClip.prototype, "colorTo", 1, 0);
MovieClip.prototype.colorTransformTo = function (ra, rb, ga, gb, ba, bb, aa, ab, timeSeconds, animType, delay, callback, extra1, extra2) {
	// destionation color transform matrix
	var destCt = {ra: ra ,rb: rb , ga: ga, gb: gb, ba: ba, bb: bb, aa: aa, ab: ab}
	//
	this.tween(["_ct_"],[destCt],seconds,animType,delay,callback,extra1,extra2)
}
ASSetPropFlags(MovieClip.prototype, "colorTransformTo", 1, 0);
MovieClip.prototype.scaleTo = function (destScale, seconds, animType, delay, callback, extra1, extra2) {
	this.tween(["_xscale", "_yscale"],[destScale, destScale],seconds,animType,delay,callback,extra1,extra2)
}
ASSetPropFlags(MovieClip.prototype, "scaleTo", 1, 0);
MovieClip.prototype.slideTo = function (destX, destY, seconds, animType, delay, callback, extra1, extra2) {
	this.tween(["_x", "_y"],[destX, destY],seconds,animType,delay,callback,extra1,extra2)
}
ASSetPropFlags(MovieClip.prototype, "slideTo", 1, 0);
MovieClip.prototype.rotateTo = function (destRotation, seconds, animType, delay, callback, extra1, extra2) {
	this.tween(["_rotation"],[destRotation],seconds,animType,delay,callback,extra1,extra2)
}
ASSetPropFlags(MovieClip.prototype, "rotateTo", 1, 0);
// 
// http://www.robertpenner.com/easing/
#include "easing_equations.as"

then cretae an mc calledmovieclip_mc, place it on the root timeline

then Put this code on the frame or button where you want the tween to happen

_root.movieclip_mc.tween(['_width','_height'],[240,298],1,'easeoutbounce',0);

You can do other tweening besides ease out bounce.

check out http://proto.layer51.com/d.aspx?f=1142

[3dmacguy]

petefs,

THANK YOU!

Seems I may have been making it too hard on myself, though Tried passing the array for the properties and values but it didn't work with the AS 2 class like you had suggested. But the first method worked great. Thanks a lot for your help! Greatly appreciated.

-josh