Noob tweening Question

Printable View

10-30-2009, 02:36 PM
aquarius

Noob tweening Question

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.
10-30-2009, 02:52 PM
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/

Code:

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight/2, scale:2});
10-30-2009, 03:07 PM
aquarius

Code:

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:

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.
10-30-2009, 03:12 PM
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.

Code:

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:

Code:

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight/2}); TweenLite.to(earth, 10, {scaleX:2, scaleY:2});
10-30-2009, 03:17 PM
aquarius

Thanks that works but, why does the earth now move down/right instead of straight down?
10-30-2009, 03:20 PM
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.
10-30-2009, 03:40 PM
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.
10-30-2009, 03:41 PM
5TonsOfFlax

You can set the registration point wherever you like, that's the point it will use as the fixed point.
10-30-2009, 04:00 PM
aquarius

Editing the movieclip and dragging the earth over to the center point icon made it work. Thank you again.
10-30-2009, 04:05 PM
aquarius

Aslo: (sorry)

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

Code:

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight/2}); TweenLite.to(earth, 10, {scaleX:2, scaleY:2});
10-30-2009, 04:31 PM
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.
10-30-2009, 04:33 PM
aquarius

How would I make it go just below the stage?
10-30-2009, 04:35 PM
5TonsOfFlax

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

Code:

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.
10-30-2009, 04:39 PM
aquarius

Code:

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..
10-30-2009, 04:42 PM
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.

Code:

TweenLite.to(earth, 1, {x:stage.stageWidth/2, y:stage.stageHeight+(earth.height)}); TweenLite.to(earth, 10, {scaleX:2, scaleY:2});
10-30-2009, 04:48 PM
aquarius

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

Code:

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.
10-30-2009, 04:58 PM
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.

Code:

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.
10-30-2009, 05:03 PM
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:

Code:

/* ------------------------------------------------------------------------------------------------- *\ 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.
10-30-2009, 05:15 PM
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.

Code:

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});
10-30-2009, 05:25 PM
aquarius

Code:

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?
10-30-2009, 05:28 PM
5TonsOfFlax

To make it go slower, change the amount of time it takes to do the tween. Change 1 to 7, for instance. I must have somehow mis-calculated the final coordinate somehow. Try just adding fudge factors to stage.stageHeight until you fine-tune it.

To get Jesus to be in front of the starfield, either add him to the display after the starfield (you can re-add him even if he's already on), or add the starfield to a container which is behind him to begin with.
10-30-2009, 05:33 PM
aquarius

The starfield is an externally read .as file.
10-30-2009, 05:35 PM
5TonsOfFlax

Doesn't matter. You're adding it to the displayList with the line

Code:

addChild(field);

Simply re-add jesus after that so he's on top:

Code:

addChild(field); addChild(jesus);

Or add the field to a container placed on the display in the IDE, which is behind him

Code:

fieldHolder.addChild(field);
10-30-2009, 05:40 PM
aquarius

Code:

addChild(field); addChild(jesus); import com.greensock.*; import com.greensock.easing.*; TweenLite.to(earth, 7, {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});

Works perfect to keep Jesus above the stars.

But I still can't figure out your explaination of moving the earth further below stage. :(
10-30-2009, 05:42 PM
5TonsOfFlax

Just add more offset to the y coordinate of the tween.

Code:

TweenLite.to(earth, 7, {x:stage.stageWidth/2, y:stage.stageHeight+100, overwrite:0});

And if that isn't far enough:

Code:

TweenLite.to(earth, 7, {x:stage.stageWidth/2, y:stage.stageHeight+200, overwrite:0});

etc.
10-30-2009, 05:48 PM
aquarius

Thank YOU!

Everything is perfect, now I just need to make Jesus and the logo fade in after the earth and background tweens have finished.

Going to give it a shot on my own, will post broken code if any.
10-30-2009, 06:03 PM
aquarius

Okay, I have no Idea how to have the logo and the picture of Jesus fade in when the earth and background tweens stop..
10-30-2009, 06:07 PM
5TonsOfFlax

Read up on the TweenLite documentation. You can pass a function to be called when the tween completes.

So, set Jesus and the Logo (pretty good band name) to alpha=0 originally, then write a function to apply a tween to them to fade them in. Call that function as the onComplete from your scaling tween.

Code:

//... jesus.alpha = 0; logo.alpha = 0; addChild(jesus); TweenLite.to(earth, 10, {scaleX:2, scaleY:2, overwrite:0, onComplete:fadeInJesus}); function fadeInJesus():void{ //I don't know if this should take parameters or not. TweenLite.to(jesus, 5, {alpha:1}); TweenLite.to(logo, 5, {alpha:1}); }
10-30-2009, 07:02 PM
aquarius

That just does not seem to work..

I think I am happy with the results:

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

But maybe perhaps when you download the files, CS3 (CS4 runs like crap on my awesome PC), you could take a look at why that code won't work.

Thanks bro, you're a great teacher.