Noob tweening Question

[aquarius]

Okay so I made a pact that I'll use only AS3 from now on but.. The tweening class is confusing me.

Take a look at this:
http://ssdev.hlrse.net/orionExample.zip

Can someone simply show me the code that will make the earth move down into center of canvas and simultaneously grow larger?

I know I haven't been active on these forums, but I'd appreciate the help.

[5TonsOfFlax]

I can't open the fla that's in the zip because I don't have access to flash here. And it's unlikely most people will bother downloading and opening a zip just to help a stranger. If you could post some code exerpts it would be helpful.

I don't know what tweening engine you're using, but here's an example of moving and scaling for TweenLite http://blog.greensock.com/tweenlite/

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight/2, scale:2});

[aquarius]

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

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight/2, scale:2});

That works to bring the earth down to center of stage, thank you.

Now when I attempt to make it grow as it moves to center of stage with this code:

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

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight/2, scale:2});
TweenLite.to(earth, 10, {setSize:{width:200, height:200}});

Earth does nothing. It cancels out the first tween.

[5TonsOfFlax]

I intended the tween I posted to do both. But I should have looked up the scale properties. Oops.
Your code didn't cancel out the tween, it just plain broke. That syntax doesn't work.

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight/2, scaleX:2, scaleY:2});

This will make the scale and the movement both take place over 1 second. If you wanted to make the scaling take longer as in your attempt, it would need two tweens:

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight/2});
TweenLite.to(earth, 10, {scaleX:2, scaleY:2});

[aquarius]

Thanks that works but, why does the earth now move down/right instead of straight down?

[5TonsOfFlax]

It doesn't. The registration point (0, 0) of the earth is apparently at the upper left instead of the center. As the earth grows, the registration point would remain fixed (except it's moving because of the tween), and the rest of the earth would appear to be further down/right. If you can adjust the registration point, do that. Otherwise, you'll have to put the earth in a holder clip which is offset, then tween the holder.

[aquarius]

Do I need to set its registration point to the exact center of the movieclip?

It seems to me as if the enlarging tween is using the topleft of the clip as a fixed point, when rather I'd like the tween to use the center of the clip as the fixed point. So that it grows in a centered circular fashion rather than enlarging to the bottom/right.

[5TonsOfFlax]

You can set the registration point wherever you like, that's the point it will use as the fixed point.

[aquarius]

Editing the movieclip and dragging the earth over to the center point icon made it work. Thank you again.

[aquarius]

Aslo: (sorry)

Which parameter defines how far the earth will travel down until it stops?

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight/2});
TweenLite.to(earth, 10, {scaleX:2, scaleY:2});

[5TonsOfFlax]

The stuff inside the {} in those lines are individual properties to tween to. So the first line makes the earth go from whereever it is to the center of the stage over 1 second.

[aquarius]

How would I make it go just below the stage?

[5TonsOfFlax]

You'd need to send it to a y coordinate greater than the stageHeight.

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight+(earth.height/2)});

This sends it to just below the stage far enough that the earth won't be visible.

[aquarius]

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight+(earth.height/2)});
TweenLite.to(earth, 10, {scaleX:2, scaleY:2});

Makes no difference..

[5TonsOfFlax]

I'm sure it does make a difference, but if you're doing both translation and scaling like that the final y value will need to be low enough to hide the earth when it has grown. Since it will end up twice the size, we can just get rid of the /2 part.

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight+(earth.height)});
TweenLite.to(earth, 10, {scaleX:2, scaleY:2});

[aquarius]

I'm sure you have studying of your own and don't need to be fussing with a noob like me but:

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight+(earth.height)});
TweenLite.to(earth, 10, {scaleX:2, scaleY:2});

Doesn't move the earth below the stage. LiveDocs are not helping this case either.

[5TonsOfFlax]

Nope, no studying. Maybe I should do some work though.

If the earth is directly on the root, then stage.stageHeight+earth.height should be far enough to move it off. If it's on something else that might be at a different y coordinate, that would change things.

var finalY:Number = earth.globalToLocal(new Point(0, stage.stageHeight + earth.height)).y; 
//stage.stageHeight is the bottom edge,
//earth.height is the height of the earth clip, we use the whole height even though
//earth is centered at 0,0 because it will scale to twice size.
//use global to local to get that value back in earth's coordinate space

trace("earth.height "+earth.height);
trace("stage.stageHeight "+stage.stageHeight);
trace("finalY ", finalY);

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:finalY});
TweenLite.to(earth, 10, {scaleX:2, scaleY:2});

If that still doesn't work, something really odd is going on. Maybe you could post screenshots.

[aquarius]

That code (replacing the other code) actually does the same exact thing with the earth. It doesn't move below canvas.. Screenshots? Maybe (just maybe) you could download when you have access to a computer with flash and see what's going on. Currently my setup is like this:

This is the only actions layer:

/* ------------------------------------------------------------------------------------------------- *\

When creating a Starfield, you have eight parameters:

 width (Number)       : The initial width of the Starfield.
 height (Number)      : The initial height of the Starfield.
 stars (int)          : The number of stars in the Starfield. This defaults to 500. This should be at
                        least 1, otherwise the Starfield is useless :P
 color (uint)         : The color of each star. This can be set in hexadecimal. This defaults to
                        0xFFFFFF (RGB 255, 255, 255) (white).
 size (Number)        : The maximum radius of each star. This defaults to 3.
 speed (Number)       : The speed of the Starfield. This defaults to 150.
 background (Boolean) : Whether or not to use a background color (if not, only the stars will appear
                        and you are responsible for setting up the background for the stars).
 bgColor (uint)       : The color of the background. It can be set in hexadecimal. This defaults to
                        0x000000 (RGB 0, 0, 0) (black).
						
\* ------------------------------------------------------------------------------------------------- */

var field:Starfield = new Starfield(864, 168, 600, 0xFFFFFF, 4, 15, false, 0x333333);
// This will create a Starfield 550 pixels wide and 400 pixels high. It contains 600 stars, each star
// is red and the maximum radius for each star is 4 pixels. The Starfield moves at speed 120 and a
// gray background is created for the Starfield.

addChild(field);
// Add the Starfield to the stage.

field.x = 1;
field.y = 1;
// Set the Starfield's coordinates to 85, 90.

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



TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight+(earth.height)});
TweenLite.to(earth, 10, {scaleX:2, scaleY:2});
TweenLite.to(bg, 1, {x:stage.stageWidth/2, y:stage.stageHeight/2});
TweenLite.to(bg, 10, {scaleX:2, scaleY:2});

I have the earth imported as a .psd and set as a movieclip named earth.


And here are the results:
http://ssdev.hlrse.net/orion

I need the earth to travel blow canvas (out of sight) at a bit of a faster rate. And I need the red nebula you see (orion) to be centered in the end.

[5TonsOfFlax]

I'll try to open it when I get home. Is it a cs3 or cs4 fla?

The behavior in that swf is not what I expected. It appears that the earth is not tweening position at all. It is definitely scaling, though.

Reading through the TweenLite docs, it appears that the second tween kills the first unless you tell it not to. To tell it not to, we need to pass another parameter.

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight+(earth.height), overwrite:0});
TweenLite.to(earth, 10, {scaleX:2, scaleY:2, overwrite:0});
TweenLite.to(bg, 1, {x:stage.stageWidth/2, y:stage.stageHeight/2, overwrite:0});
TweenLite.to(bg, 10, {scaleX:2, scaleY:2, overwrite:0});

[aquarius]

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight+(earth.height), overwrite:0});
TweenLite.to(earth, 10, {scaleX:2, scaleY:2, overwrite:0});
TweenLite.to(bg, 1, {x:stage.stageWidth/2, y:stage.stageHeight/2, overwrite:0});
TweenLite.to(bg, 10, {scaleX:2, scaleY:2, overwrite:0});
TweenLite.to(bg, 1, {x:stage.stageWidth/2, y:stage.stageHeight/2});
TweenLite.to(bg, 10, {scaleX:2, scaleY:2});

It's working much better now, the earth (quickly) moves below the stage. But as the earth enlarges, it becomes visible on the stage again. I'll need it to move below the stage about 75% slower and maybe 25% further.

Here are the results.

http://ssdev.hlrse.net/orion/

And how could I get the starfield to NOT cover Jesus? So Jesus could be in front of the starfield?