Tweening rotationX and rotationY around center point

joshuaMaverick · April 10, 2010

I created this following a tutorial, it rotates the site around rotationX and rotationY:

Now I'm trying to create the same effect with the following:

http://www.mav-media.com/clients/SPN/bin/

But as you can see, the registration of the site is 0,0. I thought I could use transformAroundCenter, but this does not work. How can I transform rotationY and rotationX around the center point when the registration is set to 0,0?

Here is my code:

private function loop(e:Event):void {

var distx:Number = mouseX / 1000;

var disty:Number = mouseY / 600;

trace(view.x);

TweenLite.to(view, 1.5, {rotationY: (-6.5+(13*distx)), rotationX: (6.5-(13*disty)), ease:Expo.easeOut});

}

I am a greensock member too, so I have all the extra classes. Please help!

GreenSock · April 11, 2010

Yeah, transformAroundCenter is for 2D stuff. But you should be able to use TweenProxy3D (a bonus class) to set a custom registration point anywhere in 3D space. Then when you tween the rotationX or rotationY or rotationZ, it will do so around that point. There's a little interactive demo swf in your downloads called TweenProxy3D_Demo.swf.

joshuaMaverick · April 11, 2010

Yeah, transformAroundCenter is for 2D stuff. But you should be able to use TweenProxy3D (a bonus class) to set a custom registration point anywhere in 3D space. Then when you tween the rotationX or rotationY or rotationZ, it will do so around that point. There's a little interactive demo swf in your downloads called TweenProxy3D_Demo.swf.

Hrm, just tried to open that swf, gave me a bunch of errors :S

GreenSock · April 11, 2010

Hrm, just tried to open that swf, gave me a bunch of errors :S

I'd be willing to bet that's because you opened it in Flash Player 9 instead of 10. Remember, those 3D features (rotationX, rotationY, rotationZ, etc.) require Flash Player 10, so TweenProxy3D does as well

joshuaMaverick · April 11, 2010

Okay, got it working!... or so I thought.

Everything works great, but suddenly, everything just dissappears :S.

I tried tracing the values I'm passing into the rotationX and rotationY, but no problems there... thoughts :S?

Thanks!

joshuaMaverick · April 11, 2010

Trouble shooted and resolved!

Thank you!

joshuaMaverick · April 20, 2010

Ahh, not so much.

For some reason, the tween isn't working correctly.

http://www.mav-media.com/clients/SPN/bin/

As you can see the rotation isn't actually working correctly. It's not rotating enough on the right side, or is rotating too much on the left. Here is my code:

override protected function onResize(event:Event):void
	{
		view.x = Math.round((stage.stageWidth - __WIDTH) / 2);
		view.y = Math.round((stage.stageHeight - __HEIGHT) / 2);
	}

	private function loop(e:Event):void {

		var myProxy:TweenProxy3D = TweenProxy3D.create(view);

		myProxy.registration = new Vector3D(stage.stageWidth/2, stage.stageHeight/2, 0); 


		if (mouseX < stage.stageWidth / 2 - 500) {

			distx = 0

		}

		if ((mouseX > stage.stageWidth / 2 - 500) && (mouseX < stage.stageWidth / 2 + 500)) {

			distx = (mouseX - ((stage.stageWidth - 1000) / 2)) / 1000;

		}

		if (mouseX > stage.stageWidth / 2 + 500) {

			distx = 1

		}

		if (mouseY < stage.stageHeight / 2 - 300) {

			disty = 0

		}
		if ((mouseY > stage.stageHeight/2 - 300) && (mouseY < stage.stageHeight/2 + 300)) {

			disty = (mouseY - ((stage.stageHeight - 600) / 2)) / 600;

		}

		if (mouseY > stage.stageHeight / 2 + 300) {

			disty = 1
		}


		TweenLite.to(myProxy, 1.5, { x:stage.stageWidth/2, y:stage.stageHeight /2, rotationY: ( -6.5 + (13 * distx)), rotationX: (6.5 - (13 * disty)), ease:Expo.easeOut } );

	}

Any help is greatly appreciated here.

Thank you,

GreenSock · April 20, 2010

Probably an issue with your math - I don't have time this second to dig through your code thoroughly, but did you really mean to keep resetting the registration point? That stuck out to me as odd and unnecessarily processor-intensive. Have you traced out your rotationY and rotationX values right before your tween so that you can see exactly what's being fed to the tween? Is it what you expect?

joshuaMaverick · April 21, 2010

Thanks for the reply. Whenever you get a chance, I'd greatly appreciate it. I'm new to as3, and I'm trying to piece things together as I go. I'm using it with the Gaia framework and it's like trying to learn 4 things at once.

Where should I be placing the registration and details? Here is the whole main.as class.

Thank you again, I really appreciate it.

/*****************************************************************************************************
* Gaia Framework for Adobe Flash ©2007-2009
* Author: Steven Sacks
*
* blog: http://www.stevensacks.net/
* forum: http://www.gaiaflashframework.com/forum/
* wiki: http://www.gaiaflashframework.com/wiki/
* 
* By using the Gaia Framework, you agree to keep the above contact information in the source code.
* 
* Gaia Framework for Adobe Flash is released under the GPL License:
* http://www.opensource.org/licenses/gpl-2.0.php 
*****************************************************************************************************/

package
{
import com.gaiaframework.core.GaiaMain;
import com.greensock.easing.Expo;
import com.greensock.TweenLite;
import com.greensock.TweenProxy3D;

import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;
import flash.geom.Vector3D;

public class Main extends GaiaMain
{		

	public var distx:Number = 0;

	public var disty:Number = 0;


	public function Main()
	{
		addEventListener(Event.ENTER_FRAME, loop);
		super();
		siteXML = "xml/site.xml";

	}
	override protected function onAddedToStage(event:Event):void
	{
		stage.align = StageAlign.TOP_LEFT;
		stage.scaleMode = StageScaleMode.NO_SCALE;
		alignSite(1000, 600);
		super.onAddedToStage(event);
	}
	override protected function onResize(event:Event):void
	{
		view.x = Math.round((stage.stageWidth - __WIDTH) / 2);
		view.y = Math.round((stage.stageHeight - __HEIGHT) / 2);
	}

	private function loop(e:Event):void {

		var myProxy:TweenProxy3D = TweenProxy3D.create(view);

		myProxy.registration = new Vector3D(stage.stageWidth/2, stage.stageHeight/2, 0); 

		if (mouseX < stage.stageWidth / 2 - 500) {

			distx = 0

		}

		if ((mouseX > stage.stageWidth / 2 - 500) && (mouseX < stage.stageWidth / 2 + 500)) {

			distx = (mouseX - ((stage.stageWidth - 1000) / 2)) / 1000;

		}

		if (mouseX > stage.stageWidth / 2 + 500) {

			distx = 1

		}

		if (mouseY < stage.stageHeight / 2 - 300) {

			disty = 0

		}
		if ((mouseY > stage.stageHeight/2 - 300) && (mouseY < stage.stageHeight/2 + 300)) {

			disty = (mouseY - ((stage.stageHeight - 600) / 2)) / 600;

		}

		if (mouseY > stage.stageHeight / 2 + 300) {

			disty = 1
		}


		TweenLite.to(myProxy, 1.5, { x:stage.stageWidth/2, y:stage.stageHeight /2, rotationY: ( -6.5 + (13 * distx)), rotationX: (6.5 - (13 * disty)), ease:Expo.easeOut } );

	}
}
}

Thank you again. And again.

GreenSock · April 21, 2010

I'd create your TweenProxy3D instance inside your constructor and set the registration point there too.

Did you trace() out your rotationY and rotationX values right before your tween so that you can see exactly what's being fed to the tween? Is it what you expect?

joshuaMaverick · April 22, 2010

So I tried to move the proxy and registration to the constructor in the following way..

public class Main extends GaiaMain

{

public var distx:Number = 0;

public var disty:Number = 0;

public var myProxy:TweenProxy3D;

public function Main()

{

myProxy.create(view);

myProxy.registration = new Vector3D(stage.stageWidth/2, stage.stageHeight/2, 0);

addEventListener(Event.ENTER_FRAME, loop);

super();

siteXML = "xml/site.xml";

}

But clearly something is incorrect as I get a Error #1009 Cannot access a property or method of a null object reference...

GreenSock · April 22, 2010

clearly something is incorrect as I get a Error #1009 Cannot access a property or method of a null object reference...

That's because you didn't set your "myProxy" to anything. It's null when you're calling its methods. In your constructor, you need to replace "myProxy.create(view);" with this:

myProxy = TweenProxy3D.create(view);

joshuaMaverick · April 22, 2010

I actually tried that first to no avail. :S

/*****************************************************************************************************
* Gaia Framework for Adobe Flash ©2007-2009
* Author: Steven Sacks
*
* blog: http://www.stevensacks.net/
* forum: http://www.gaiaflashframework.com/forum/
* wiki: http://www.gaiaflashframework.com/wiki/
* 
* By using the Gaia Framework, you agree to keep the above contact information in the source code.
* 
* Gaia Framework for Adobe Flash is released under the GPL License:
* http://www.opensource.org/licenses/gpl-2.0.php 
*****************************************************************************************************/

package
{

import com.gaiaframework.core.GaiaMain;
import com.greensock.easing.Expo;
import com.greensock.TweenLite;
import com.greensock.TweenProxy3D;

import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;
import flash.geom.Vector3D;

public class Main extends GaiaMain
{		

	public var distx:Number = 0;
	public var disty:Number = 0;
	public var myProxy:TweenProxy3D;


	public function Main()
	{
		myProxy = TweenProxy3D.create(view);
		myProxy.registration = new Vector3D(stage.stageWidth/2, stage.stageHeight/2, 0); 

		addEventListener(Event.ENTER_FRAME, loop);
		super();
		siteXML = "xml/site.xml";

	}

	override protected function onAddedToStage(event:Event):void
	{
		stage.align = StageAlign.TOP_LEFT;
		stage.scaleMode = StageScaleMode.NO_SCALE;
		alignSite(1000, 600);
		super.onAddedToStage(event);
	}
	override protected function onResize(event:Event):void
	{
		view.x = Math.round((stage.stageWidth - __WIDTH) / 2);
		view.y = Math.round((stage.stageHeight - __HEIGHT) / 2);
	}

	private function loop(e:Event):void {

		if (mouseX < stage.stageWidth / 2 - 500) {

			distx = 0

		}

		if ((mouseX > stage.stageWidth / 2 - 500) && (mouseX < stage.stageWidth / 2 + 500)) {

			distx = (mouseX - ((stage.stageWidth - 1000) / 2)) / 1000;

		}

		if (mouseX > stage.stageWidth / 2 + 500) {

			distx = 1

		}

		if (mouseY < stage.stageHeight / 2 - 300) {

			disty = 0

		}
		if ((mouseY > stage.stageHeight/2 - 300) && (mouseY < stage.stageHeight/2 + 300)) {

			disty = (mouseY - ((stage.stageHeight - 600) / 2)) / 600;

		}

		if (mouseY > stage.stageHeight / 2 + 300) {

			disty = 1
		}


		//TweenLite.to(myProxy, 1.5, { x:stage.stageWidth/2, y:stage.stageHeight /2, rotationY: ( -6.5 + (13 * distx)), rotationX: (6.5 - (13 * disty)), ease:Expo.easeOut } );

	}
}
}

Gives me this error:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.greensock::TweenProxy3D()
at com.greensock::TweenProxy3D$/create()
at Main()

GreenSock · April 22, 2010

That means your "view" variable that you're passing to create() is null. What is "view" anyway? It looks like you need to define it.

joshuaMaverick · April 22, 2010

I'm going to get back to you on that. I'm using the gaia framework, while trying to learn as3 lol. Very strange business. Thanks for the help so far, I really appreciate it.

joshuaMaverick · June 18, 2010

Okay, so I'm back on this project. I've moved around declarations, but now it seems to be locking to the top left corner again. The "view" is a SiteView that the framework creates. Any and all help would be greatly appreciated

http://www.djspoonz.com/beta/

Thank you.

/*****************************************************************************************************
* Gaia Framework for Adobe Flash ©2007-2009
* Author: Steven Sacks
*
* blog: http://www.stevensacks.net/
* forum: http://www.gaiaflashframework.com/forum/
* wiki: http://www.gaiaflashframework.com/wiki/
*
* By using the Gaia Framework, you agree to keep the above contact information in the source code.
*
* Gaia Framework for Adobe Flash is released under the GPL License:
* http://www.opensource.org/licenses/gpl-2.0.php
*****************************************************************************************************/

package
{
import com.gaiaframework.core.GaiaMain;
import com.greensock.easing.Expo;
import com.greensock.TweenLite;
import com.greensock.TweenProxy3D;
import flash.display.Sprite;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;
import flash.geom.Vector3D;

public class Main extends GaiaMain
{
	public var distx:Number = 0;
	public var disty:Number = 0;
	public var myProxy:TweenProxy3D;

	public function Main()
	{
		super();
		alignSite(1200, 800);
		siteXML = "xml/site.xml";

	}

	override protected function onAddedToStage(event:Event):void
	{
		stage.align = StageAlign.TOP_LEFT;
		stage.scaleMode = StageScaleMode.NO_SCALE;

		super.onAddedToStage(event);

		myProxy = TweenProxy3D.create(view);
		myProxy.registration = new Vector3D(stage.stageWidth / 2, stage.stageHeight / 2, 0); 
		addEventListener(Event.ENTER_FRAME, loop);

	}

	private function loop(e:Event):void 
	{

		if (mouseX < stage.stageWidth / 2 - 500) 
		{
			distx = 0
		}

		if ((mouseX > stage.stageWidth / 2 - 500) && (mouseX < stage.stageWidth / 2 + 500)) 
		{
			distx = (mouseX - ((stage.stageWidth - 1000) / 2)) / 1000;
		}

		if (mouseX > stage.stageWidth / 2 + 500) 
		{
			distx = 1
		}

		if (mouseY < stage.stageHeight / 2 - 300) {

			disty = 0

		}
		if ((mouseY > stage.stageHeight/2 - 300) && (mouseY < stage.stageHeight/2 + 300)) {

			disty = (mouseY - ((stage.stageHeight - 600) / 2)) / 600;

		}	

		if (mouseY > stage.stageHeight / 2 + 300) 
		{

			disty = 1
		}

		TweenLite.to(myProxy, 1, {rotationY: ( -6.5 + (13 * distx)), rotationX: (6.5 - (13 * disty)), ease:Expo.easeOut } );
	}

	override protected function onResize(event:Event):void
	{
		myProxy.x = Math.round((stage.stageWidth - __WIDTH) / 2);
		myProxy.y = Math.round((stage.stageHeight - __HEIGHT) / 2);
		//myProxy.registration = new Vector3D(stage.stageWidth / 2, stage.stageHeight / 2, 0); 
	}
}
}

Tweening rotationX and rotationY around center point

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members