Jump to content
Search Community

Using TweenLite in reusable classes

fs_tigre test
Moderator Tag

Recommended Posts

Hi,

 

This morning I started creating a class with a set of predefined effects that I use most of the time using TweenLite, the reason I want to do this is to save time adding eventListeners for every movieClip I want to tween, but I was wondering if you see a problem by having TweenLite nested inside this class, will this eventually slow TweenLite down if it is use in multiple places in the same FLA?

 

I dont really see any issues but I want to hear from the experts. Sorry if this is a $tU&% question!

 

Thanks a lot.

 

package {
import com.greensock.*;
import flash.display.*;
import flash.events.*;

public class Effects extends MovieClip{

	public static var _mcFade:MovieClip;
	public static var _mcSize:MovieClip;
	public static var _parameter1:Number;
	public static var _parameter2:Number;

	public function Effects() {
		trace("this is the constructor");
	}
	// Methods------------------------------------------------------
	public static function resizeIt(mcSize:MovieClip,parameter1:Number,parameter2:Number) {
		_mcSize = mcSize;
		_parameter1 = parameter1;
		_parameter2 = parameter2;
		_mcSize.addEventListener(MouseEvent.MOUSE_OVER, resizing);
		_mcSize.addEventListener(MouseEvent.MOUSE_OUT, resizing2);

	}

	public static function fadeIt(mcFade:MovieClip,parameter1:Number) {
		_mcFade = mcFade;
		_parameter1 = parameter1;
		_mcFade.addEventListener(MouseEvent.MOUSE_OVER, fading);
		_mcFade.addEventListener(MouseEvent.MOUSE_OUT, fading2);

	}

	//Functions ----------------------------------------------
	public static function resizing(evt:MouseEvent):void {
		TweenLite.to(_mcSize,1,{scaleX:_parameter1,scaleY:_parameter2});
	}

	public static function resizing2(evt:MouseEvent):void {
		TweenLite.to(_mcSize,1,{scaleX:1,scaleY:1});
	}
	//-------------------------------------------------------------------

	public static function fading(evt:MouseEvent):void {
		TweenLite.to(_mcFade,1,{alpha:_parameter1});
	}
	public static function fading2(evt:MouseEvent):void {
		TweenLite.to(_mcFade,1,{alpha:1});
	}
}
}

 

FLA file

Effects.resizeIt(rec,1.5,2);
Effects.fadeIt(rec2,.5);

Link to comment
Share on other sites

Yep, I see a few problems:

 

1) You're storing all the parameters as static vars which means every time you call fadeIt() or resizeIt(), you're overwriting those with new values. So if you fadeIt(mc, 0.5) and fadeIt(mc2, 0.3), mousing over mc will actually cause mc2 to fade to 0.3! Worse yet, if you do resizeIt(mc, 3, 3) and then fadeIt(mc, 0.2) and mouse over mc, it will not only fade to 0.2 but it will scale to scaleX of 0.2 and scaleY of 3 (notice scaleX is now the alpha value).

 

2) Be VERY careful about using MOUSE_OVER/MOUSE_OUT instead of ROLL_OVER/ROLL_OUT. A lot of people make that mistake. MOUSE_OVER/MOUSE_OUT will get called every time the mouses goes over/out of any of the DisplayObjectContainer's children! So it could fire many times with a single rollover.

 

3) You're limiting your flexibility with this class - what if you want the tween to be 0.5 seconds instead of 1? What if you want to change the ease for a particular tween? Maybe you don't need to factor those things in, but I figured I'd mention them.

 

Using TweenLite in a class like this is totally fine in terms of performance - it's not like you're storing a bunch of references. It really doesn't matter if you use TweenLite inside your class or on the timeline or wherever.

Link to comment
Share on other sites

Tweenlite's static methods make pretty much all wrapping almost unnecessary. The biggest problem I found is that wrapping it usually means less functionality since hard-coding any of the possible parameters restricts the library.

 

I'm wrapping TweenLite in our framework only in places where the same method can have different implementations. While I was at it, we got a contract that is interface dependent and using it directly is the fastest, most efficient and powerful option available. The only thing I have to worry about is to keep a FSM to control every object.

Link to comment
Share on other sites

1) You're storing all the parameters as static vars which means every time you call fadeIt() or resizeIt(), you're overwriting those with new values. So if you fadeIt(mc, 0.5) and fadeIt(mc2, 0.3), mousing over mc will actually cause mc2 to fade to 0.3! Worse yet, if you do resizeIt(mc, 3, 3) and then fadeIt(mc, 0.2) and mouse over mc, it will not only fade to 0.2 but it will scale to scaleX of 0.2 and scaleY of 3 (notice scaleX is now the alpha value). 

2) Be VERY careful about using MOUSE_OVER/MOUSE_OUT instead of ROLL_OVER/ROLL_OUT. A lot of people make that mistake. MOUSE_OVER/MOUSE_OUT will get called every time the mouses goes over/out of any of the DisplayObjectContainer's children! So it could fire many times with a single rollover. 

3) You're limiting your flexibility with this class - what if you want the tween to be 0.5 seconds instead of 1? What if you want to change the ease for a particular tween? Maybe you don't need to factor those things in, but I figured I'd mention them. 

First of all thank for your reply!

 

1- Will it help if I dont make them static.

2- Thank you for the advice. I will change this to ROLL_OUT.

3- Well my class is not done yet, I will add more parameters.

 

So, in general yuo wouldnt recommend to do a class like this one?

 

Thanks a lot!

Link to comment
Share on other sites

1) You're storing all the parameters as static vars which means every time you call fadeIt() or resizeIt(), you're overwriting those with new values. So if you fadeIt(mc, 0.5) and fadeIt(mc2, 0.3), mousing over mc will actually cause mc2 to fade to 0.3! Worse yet, if you do resizeIt(mc, 3, 3) and then fadeIt(mc, 0.2) and mouse over mc, it will not only fade to 0.2 but it will scale to scaleX of 0.2 and scaleY of 3 (notice scaleX is now the alpha value).

 

I know this has nothing to do with TweenLite but I just wanted to thank you for your advice on this one, I came here looking for some input based on TweenLite and look you event took the time to point this out, you are GREAT thanks.

 

I ended up assigning a unique var for each parameter and it seems to fix this problem, again I don't want to waste your time looking at my code I just wanted to post what it seems to fix the problem. Thanks a lot!

 

       public static var _fade:Number;
	public static var _fadeDuration:Number;	
	public static var _scaleX:Number;
	public static var _scaleY:Number;
	public static var _scaleDuration:Number

 

package {
import com.greensock.*;
import flash.display.*;
import flash.events.*;

public class Effects extends MovieClip{

	public static var _mcFade:MovieClip;
	public static var _mcSize:MovieClip;
	public static var _fade:Number;
	public static var _fadeDuration:Number;	
	public static var _scaleX:Number;
	public static var _scaleY:Number;
	public static var _scaleDuration:Number;

	public function Effects() {
		trace("this is the constructor");
	}
	// Methods------------------------------------------------------
	public static function resizeIt(mcSize:MovieClip,scaleDuration:Number,Xscale:Number,Yscale:Number) {
		_mcSize = mcSize;
		_scaleX = Xscale;
		_scaleY = Yscale;
		_scaleDuration = scaleDuration;
		_mcSize.addEventListener(MouseEvent.ROLL_OVER, resizing);
		_mcSize.addEventListener(MouseEvent.ROLL_OUT, resizing2);

	}

	public static function fadeIt(mcFade:MovieClip,fadeDuration:Number,fade:Number) {
		_mcFade = mcFade;
		_fade = fade;
		_fadeDuration = fadeDuration;
		_mcFade.addEventListener(MouseEvent.ROLL_OVER, fading);
		_mcFade.addEventListener(MouseEvent.ROLL_OUT, fading2);

	}

	//Functions ----------------------------------------------
	public static function resizing(evt:MouseEvent):void {
		TweenLite.to(_mcSize,_scaleDuration,{scaleX:_scaleX,scaleY:_scaleY});
	}

	public static function resizing2(evt:MouseEvent):void {
		TweenLite.to(_mcSize,1,{scaleX:1,scaleY:1});
	}
	//-------------------------------------------------------------------

	public static function fading(evt:MouseEvent):void {
		TweenLite.to(_mcFade,_fadeDuration,{alpha:_fade});
	}
	public static function fading2(evt:MouseEvent):void {
		TweenLite.to(_mcFade,1,{alpha:1});
	}
}
}

Link to comment
Share on other sites

So, in general you wouldn't recommend to do a class like this one?

 

Well, I don't think it's a terrible idea to create a class through which you call some standard transitions or something in your app (like if you have lots of elements that use a particular glow effect or colorize or whatever) and you want to use it almost like a CSS file that makes it easy to change the timing/colors/whatever in a central place. But I don't generally recommend creating something like this, no - I'm generally a bigger fan of using inheritance. For example, if I have lots of buttons that glow on rollover, I'll set up a GlowButton class that I'll extend for all the buttons that use that effect. That way, I can add my listeners and handlers in that main class and it's all centralized.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...