Jump to content
GreenSock

mhigley

(AS3) - Where'd my depth go?!

Recommended Posts

Hey all... I hope someone can help me.

 

I've got a project that is largely based on a tutorial put out by Lee Brimelow on GAL. Following the tut produces the expected result as the demo, but I'm trying to add certain elements that take it to a new level. In the tut, Brimelow shows how to pivot a single plane based on the mouses position. I'm trying to do the same with multiple planes and adding depth between the planes to produce a 3D feel. I've got all the planes set with about 200 pixels between them on the Z... but when it publishes, flash is ignoring the values and flattening them all onto a single plane. Does anyone have any suggestions? Am I missing a simple property that can solve my problem? Thanks in advance for any help I can get. :|

 

JR

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

addEventListener(Event.ENTER_FRAME, loop);

function loop(e:Event):void
{
var distX:Number = mouseX / stage.stageWidth;
var distY:Number = mouseY / stage.stageHeight;
var timeline:TimelineLite = new TimelineLite();
timeline.insertMultiple(TweenMax.allTo([con1, con2, con3, con4], 2, {
					                        rotationY:(-30 + (70 * distX)),
								rotationX:(30 - (70 * distY)),
								ease:Expo.easeOut
								}));

}

Link to comment
Share on other sites

Yeah, it's kinda weird how Flash handles the rotation like that (it has nothing to do with TweenMax by the way). You have a few options:

 

1) Set the z position of the nested objects (photos) at different depths. This seemed to work okay for me.

 

2) My TweenProxy3D class (a membership benefit of Club GreenSock) handles the rotation properly - you can make them all share a common registration point and then when you alter their rotationX/rotationY/whatever, they move correctly. Here's the code:

 

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

addEventListener(Event.ENTER_FRAME, loop);

var tp:Array = [new TweenProxy3D(con1), 
			new TweenProxy3D(con2),
			new TweenProxy3D(con3),
			new TweenProxy3D(con4)];

var registration:Vector3D = new Vector3D(250, 200, 1200);
for (var i:int = 0; i 	tp[i].registration = registration;
}

function loop(e:Event):void {
var distX:Number = mouseX / stage.stageWidth;
var distY:Number = mouseY / stage.stageHeight;
TweenMax.allTo(tp, 2, {rotationY:(-30 + (70 * distX)),
					   rotationX:(30 - (70 * distY)),
					   ease:Strong.easeOut
						});
}

 

There are a lot of math calculations necessary in TweenProxy3D so it may not perform quite as well but I attached a swf that demonstrates it working with the code above (TweenProxy3D).

Link to comment
Share on other sites

Wow!! That worked incredibly well!! :D

 

If you could humor me for a moment, I'm going to attempt to spell out what I think is going on and if I'm way off base here please let me know. I haven't had the pleasure of utilizing TweenProxy3D yet so I want to make sure I'm understanding what's going on...

 

var tp:Array = [new TweenProxy3D(con1),

new TweenProxy3D(con2),

new TweenProxy3D(con3),

new TweenProxy3D(con4)];

 

Setting each layer into a single container Array enabling all four items to be controlled as a unified object. Similar to converting all to a single MovieClip, right?

 

var registration:Vector3D = new Vector3D(250, 200, 1200);

for (var i:int = 0; i < tp.length; i++) {

tp.registration = registration;

}

 

Here's where things get a little fuzzy for me. You're setting a variable for the Vector3D property and id'ing it's x, y, and z points(?). I'm not 100% sure what the for loop is doing, but I think it's finding the last layer and placing the registration point there? And then of course the remaining original code tracks the locations of the mouse.

 

Am I at least close? What other benefits does TweenProxy3D have?

 

I need to thank you again for the time and effort you've put into creating a Tween class that is absolutely second to none. I'll buy you a beer if I'm ever in Chicago. :mrgreen:

 

JR

Link to comment
Share on other sites

TweenProxy3D instances essentially "stand in" for your MovieClips so that when I alter properties on the TweenProxy3D instance, it in turn applies the changes to your MovieClip (or whatever DisplayObject it is targeting). So when I set each of the TweenProxy3D's registration point to that vector, it just forces them to share a common registration point. Then when I rotate each instance (by setting its rotationX, rotationY, or rotationZ), they rotate around that custom registration point together. It's like dynamically setting the registration point in 3D space.

 

Make more sense now?

 

And by the way, this code:

 

var registration:Vector3D = new Vector3D(250, 200, 1200);

 

Just sets the registration point at x:250, y:200, and z:1200 which looked best to me, but you can put it wherever you want.

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.
×