TweenProxy3D and Flex TitleWindow

[mattmoon]

Hello. I am having an issue with the TweenProxy3D plugin and a "Spark" TitleWindow. I am trying to put a rotationX flip on the TitleWindow's creation complete call.

 

When I run the following code: "NOTE: doIntroTween() happens on creationComplete event"

private function doIntroTween():void
{
var proxy:TweenProxy3D = TweenProxy3D.create(this);
proxy.registration = new Vector3D((this.width/2),(this.height/2),0);
TweenLite.to(proxy, 2, {alpha:1.0, transformAroundCenter:{rotationX:360,scaleX:1,scaleY:1}, ease:Cubic.easeOut, onComplete:finishSetup,onUpdate:handleUpdate});			
}

private function handleUpdate():void
{
PopUpManager.centerPopUp(this);
}

 

I get this error:

TypeError: Error #1009: Cannot access a property or method of a null object reference.

at com.greensock::TweenProxy3D/calibrateRegistration()[/users/Matt/Documents/Adobe Flash Builder 4/vshocILM/src/com/greensock/TweenProxy3D.as]

at com.greensock::TweenProxy3D/calibrate()[/users/Matt/Documents/Adobe Flash Builder 4/vshocILM/src/com/greensock/TweenProxy3D.as]

at com.greensock::TweenProxy3D()[/users/Matt/Documents/Adobe Flash Builder 4/vshocILM/src/com/greensock/TweenProxy3D.as]

at com.greensock::TweenProxy3D$/create()[/users/Matt/Documents/Adobe Flash Builder 4/vshocILM/src/com/greensock/TweenProxy3D.as]

 

Any thoughts I know it may be becasue it is looking for a display object and I am using the flex framework. if so is there a way around this to achieve the same effect. Currently I can get it to flip but its flips from the top left not the center as expected

[GreenSock]

You cannot use transformAroundCenter for 3D transformations. It's just for 2D stuff. If you want to get a similar effect that could work in 3D, you should wrap your object in a Sprite (or UIComponent I suppose if you're working in Flex) and offset its x/y so that the container's registration point is in the center. Then you tween the container instead of the original object. You can un-nest it after the tween if you want.

[sangfroid]

Hi,

 

Im getting the same issue on a spark Image. i also tried with a mx image and a simple uicomponent and i got the same error. I cant reproduce the same effect with a 2D tween.

Im working with sdk 4.5, fp 10.2 and greensock package of the 2011-07-07 (TweenLite 11.63)

 

 

And i got the same error :

TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.

at com.greensock::TweenProxy3D/calibrateRegistration()[A]\201109_lesitetv\flex\LeSiteTv\libs\includes\com\greensock\TweenProxy3D.as:286]

...

 

Thanks for any support

[GreenSock]

That looks like yet another Flex bug that's unrelated to TweenProxy3D - you can verify this by running this code:

 

trace(img.transform.getRelativeMatrix3D(img.parent));

 

According to the ASDocs, getRelativeMatrix3D is supposed to return a Matrix3D object, but in your case it returns null.

[adev2]

Is there anything we can do about this ? The trace indeed returns null.

I just joined the club membership to do some cool 3d tweening in flex.

 

Edit:

I get the error when trying to 3d rotate a spark image:

 

 

var tp:TweenProxy3D = new TweenProxy3D(image);

tp.registration = new Vector3D(image.width/2, image.height/2, 0);

TweenLite.to(tp, 3, {rotationX:180, rotationY:180, ease:Expo.easeInOut});

[GreenSock]

I wish I could fix the various bugs inside the Flex framework, but alas it's out of my realm of influence If you're not happy with your Club GreenSock membership (for any reason whatsoever), we'll gladly issue a full refund. Just shoot me a PM or an e-mail request and I'll get it processed right away.

[adev2]

I understand this is something unrelated to your great tweening lib. I am currently migrating parts of my app from flex to flash professional components in order to still be able to tap into the rich functionality provided by the GreenSock libs. Thank you for taking the time to respond.

[adev2]

If anyone else tries to deal with this: I was able to bypass this error by wrapping my custom flex mxml components into an fl.core.UIComponent which i added to a mx:Canvas using myCanvas.rawChildren.addChild

[Deepak Srinivasa]

Hi Jack and adev2,

 

I am facing the same problem. I want a card flip animation for a Flex mobile app I'm building, similar to what is shown here - http://www.snorkl.tv/2010/12/easy-breezy-3d-card-flip-effect-with-flash-as3-and-our-good-buddy-timelinemax/

 

I became a club member hoping transformAroundCenter or Tween3D will do the task for me. But now, I learn about this bug in Flex SDK regarding getRelativeMatrix3D API.

 

I tried doing what adev2 has suggested (wrapping in UIComponent, and adding that to mx:Canvas). However, mx:Canvas is not available for Flex mobile apps and so I cannot take this approach.

 

I also tried the method suggested by Jack earlier in this thread:

"If you want to get a similar effect that could work in 3D, you should wrap your object in a Sprite (or UIComponent I suppose if you're working in Flex) and offset its x/y so that the container's registration point is in the center. Then you tween the container instead of the original object."

 

I'm not getting this right. I'm missing something basic (like - what is the meaning of 'wrap' your object in UIComponent? Does it mean I make my component a child of UIComponent? Or I have my component as a delegate object within a UIComponent and handle all public methods?). I tried making the component a child of UIComponent, and then applying the tweens. It's not working.

 

It will be great if you can elaborate on this method, or point me to some page on the web, or show some code that will illustrate the method in broad strokes.

 

Thanks a lot for your support. Appreciate your work!

Regards,

Deepak.

[GreenSock]

Right, when I recommended making your object a child of a Sprite or UIComponent and offsetting, I meant something like this:

 

//wrap your object...
var container:Sprite = new Sprite();
yourObject.parent.addChild(container);
container.addChild(yourObject);

//now do the offsets so that the container's registration point is in the center of yourObject:
var halfWidth:Number = yourObject.width / 2;
var halfHeight:Number = yourObject.height / 2;
container.x = yourObject.x + halfWidth;
container.y = yourObject.y + halfHeight;
yourObject.x = -halfWidth;
yourObject.y = -halfHeight;

//now tween the container...
TweenLite.to(container, 1, {width:100, height:200});

 

And if you're using Flex, you'd probably need to use a UIComponent instead of a Sprite.

 

Does that help?

[Deepak Srinivasa]

Got it now! Thanks so much for posting the code snippet.