TransformAroundCenterPlugin + Dynamic Textfield

[hugznotthugzkidz]

I have dynamic textfields placed on the stage that scales like so:

TweenMax.to(myText,1,{scaleX:3,scaleY:3});

 

Unfortunately, it's scaling from the default registration point, which is UPPER LEFT, and not from the CENTER how I want it.

 

I tried using transformAroundCenter on the text itslef, but I get an error saying that it doesn't recognize textfields and there is no default value.

 

I've tried wrapping it inside a MovieClip or Sprite along with the TransformAroundCenterPlugin, but I am still getting the same error.

 

This is my full code by the way:

import com.greensock.TweenMax;
import com.greensock.easing.*;
//import com.greensock.plugins.*;
//TweenPlugin.activate ([AutoAlphaPlugin,BlurFilterPlugin,MotionBlurPlugin,TransformAroundCenterPlugin ]);

var Clips:Array = [Line_1,Line_2,Line_3,Line_4,Line_5,Line_6];
var Stagger:Number = 0.5;

for (var i = 0; i < Clips.length; i++) {
TweenMax.from (Clips[i],0.5,{autoAlpha:0,x:null,y:500,scaleX:3,scaleY:3,rotation:0,blurFilter:{blurX:25,blurY:25},ease:Expo.easeInOut,delay:i * Stagger,onComplete:FadeOut});
}


function FadeOut ():void {
for (var i = 0; i < Clips.length; i++) {
	TweenMax.to (Clips[i],0.5,{autoAlpha:0,x:null,y:-500,scaleX:0,scaleY:0,rotation:20,blurFilter:{blurX:25,blurY:25},ease:Expo.easeInOut,delay:i * Stagger});
}
}

[Carl]

First, that is very cool animation you made. I really liked it.

 

I changed things just slightly to make it easier to test, like slowing it down and removing the x/y tweens so that I could really see if it was transforming around the center point.

 

the following code worked fine on Textfields

import com.greensock.TweenMax;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate ([AutoAlphaPlugin,BlurFilterPlugin,MotionBlurPlugin,TransformAroundCenterPlugin ]);

var Clips:Array = [Line_1,Line_2,Line_3,Line_4];
var Stagger:Number = 0.5;

for (var i = 0; i    TweenMax.from (Clips[i],3,{autoAlpha:0, transformAroundCenter:{scaleX:3, scaleY:3},rotation:0,blurFilter:{blurX:25,blurY:25},ease:Expo.easeInOut,delay:i * Stagger,onComplete:FadeOut});
}


function FadeOut ():void {
  for (var i = 0; i       TweenMax.to (Clips[i],3,{autoAlpha:0, transformAroundCenter:{scaleX:3, scaleY:3}, rotation:20,blurFilter:{blurX:25,blurY:25},ease:Expo.easeInOut,delay:i * Stagger});
  }
}

 

 

 

you will get the following error:

ReferenceError: Error #1069: Property transformAroundCenter not found on flash.text.TextField and there is no default value.

 

if you

1)didn't activate the plugin properly or

2)don't have the plugin

 

can you confirm that you are a Really Green or higher member of Club GreenSock and that you have the bonus plugins?

http://www.greensock.com/club/

[hugznotthugzkidz]

Oh man, do I feel like an idiot. I was under the assumption that TweenMax automatically activated all the plugins, but after skimming through the docs it only activates the commonly used ones.

 

 

Thanks Carl. I visit your site almost everyday. I've pretty much learned a majority of the Greensock Tweening Platform from watching your video tutorials.

 

I also have another question. I've been trying to figure out how to have text fly in quickly then slowly, then after a defined delayed number of seconds it flys out quickly again. The best example of this is if you've ever played Call of Duty: Black Ops, on the multiplayer load screen, it would have the name of the map and the game type fly in quickly and move slowly, it never flys out quickly, but that's the type of animations I've been trying to reproduce.

 

Thanks again!

[Carl]

glad to hear you are enjoying the tutorials at www.snorkl.tv

 

for the animation effect you described have you tried:

import com.greensock.*;
import com.greensock.easing.*;

TweenMax.to(Line_1, .5, {x:200});
TweenMax.to(Line_1, 6, {x:400, ease:Linear.easeNone, delay:.5});
TweenMax.to(Line_1, .5, {x:650, delay:6.5});


//or use TimelineLite and not worry about managing the delays
var tl:TimelineLite = new TimelineLite();
tl.append(TweenMax.to(Line_2, .5, {x:200}));
tl.append(TweenMax.to(Line_2, 6, {x:400, ease:Linear.easeNone}));
tl.append(TweenMax.to(Line_2, .5, {x:650}));

 

test the code with Line_1 and Line_2 offstage to the right with a stage width of 640px

 

-carl

[Eris419]

Hey Carl, I didn't even realize that you were the guy behind snorkl.tv, I love that site! Very polished tutorials!

 

So, our company paid for a license and got the Greensock package. Is it safe to assume that the TransformAroundCenterPlugin is included in our package or is there something extra we have to do to unlock it or get it?

 

I'm getting the same error outlined by OP and I think I'm activating it correctly:

 

private function init():void {
			pages 		 = new Array();
			currentImage = new Sprite();
			TweenPlugin.activate([TransformAroundCenterPlugin]);
		}

 

init() is called from here:

 

		   width="100%" height="100%" clipContent="false" 
	   horizontalScrollPolicy="off" verticalScrollPolicy="off"
	   styleName="transparentModal"
	   creationComplete="init()"
	   >

[Carl]

Thanks.

 

If you are really green or higher, yes you should have TransformAroundPointPlugin.as in the plugins directory.

 

Please verify.

 

Make sure you are importing and activating.

 

make sure your project is pointing to the proper greensock package too.

 

Sometimes people have old .swc files laying around that cause conflicts too.

[Eris419]

Thanks.

 

If you are really green or higher, yes you should have TransformAroundPointPlugin.as in the plugins directory.

 

Please verify.

 

Ok, I just verified and it's in the package we downloaded. However, we are using the SWC, which should be the same, I'm assuming.

 

Make sure you are importing and activating.

 

make sure your project is pointing to the proper greensock package too.

 

I think my imports look alright:

 

import com.greensock.TweenLite;
		import com.greensock.easing.Back;
		import com.greensock.plugins.TransformAroundCenterPlugin;
		import com.greensock.plugins.TweenPlugin;

 

Sometimes people have old .swc files laying around that cause conflicts too.

 

I just doubled checked and we're referencing only the one SWC in the Flex project build path.

 

I've actually wanted to use this class earlier in the project because it's so cool and we don't have to mess with nested containers (in order to transform around center) but it's a bit difficult to get it working. Any other suggestions?

 

Thanks!

 

BTW, here's the exact error message:

 

Error #1069: Property TransformAroundCenter not found on flash.display.Sprite and there is no default value.

 

And here's how I implement the tween:

 

private function intro():void {
			 TweenLite.to(currentImage, 2, 
				{
					alpha:1,
					TransformAroundCenter:
					{
						scaleX:1, 
						scaleY:1, 
						rotation:0
					},
					ease:Back.easeOut
				}
			); 
		}

[Carl]

I would suggest you use the non-swc version until it can be confirmed that something is wrong with the swc.

 

although you shouldn't have to... can't you create your own swc from the classes?

 

TransformAroundCenter works great, is easy and you shouldn't be having any trouble with it.

 

I'm sure this will get worked out.

 

-c

[Eris419]

Holy crap! I finally figured it out! Here's the answer in BOLD, so no one else has to waste DAYS trying to figure out why you are getting that error:

 

Do not activate plugins in a creationComplete="init()" function inside Flex, it won't work activate properly!

 

You think it would call that init() function and execute all the code in there properly, but it doesn't. Why? I don't know. Even when I stripped down my init() function to just include the activate plugin code all by itself, it still didn't work! BUT...when I moved the activation code into another function and called it, everything worked fine! It must be a Flex life cycle thing.

 

Now, I can sleep.

[Carl]

Glad you figured it out. Thanks so much for sharing the solution.

 

I don't use Flex so that solution would have been beyond me.

 

Sorry you had to go through that.

 

Enjoy the new plugins.