Tweening/Transforming/Scaling help

[khw2010]

So frustrated -- all the more so b/c I know that this is a relatively easy fix:

 

I have three words that appear one after the other, (let's say A,B,C).

I then want these words to move the the L (together - ABC)

I then resize ABC, smaller, to the upper L corner.

 

I'm sure this is a transform issue, etc. but I just can't get my brain around it. Could you provide me with sample code so I can visualize? I could provide a sample file, but it's written out in the most backwards way I don't think it would help.

 

Many thanks in advance!!

[Carl]

what is the transform issue?

 

you list 3 sequences that you want to occur which is very clear. I'm not sure what the problem is. Is it that when the words are scaled down their spacing is too far apart? are they not moving to the left as one unit properly?

 

this is a great situation to use TimelineLite or a few allTo / allFrom tweens. to keep the syntax simple a basic approach would be

 

place all 3 words on the stage where you want them to be positioned initially

 

 

import greensock.com*;
OverwriteManager.init() // important if using TweenLite and NOT Max and you are sequencing tweens.

//have all 3 words appear one after each other
TweenLite.from(a, 1, {alpha:0});
TweenLite.from(b, 1, {alpha:0, delay:1});
TweenLite.from(c, 1, {alpha:0, delay:2});

//3 seconds has transpired

//move them all the same distance left after the previous tweens complete
// by putting -400 in quotes "-400" it means move 400 pixels to the left of where ever you are when the tween starts
TweenLite.to(a, 1, {x:"-400", delay:3});
TweenLite.to(b, 1, {x:"-400", delay:3});
TweenLite.to(c, 1, {x:"-400", delay:3});

// move them all up and scale them down after 4 seconds has transpired

TweenLite.to(a, 1, {y:10, scaleX:.5, scaleY:.5, x:someCustomValueForA,  delay:4});
TweenLite.to(b, 1, {y:10, scaleX:.5, scaleY:.5, x:someCustomValueForB,  delay:4});
TweenLite.to(c, 1, {y:10, scaleX:.5, scaleY:.5, x:someCustomValueForC,  delay:4})

);

 

for the custom x values above you can just scale down the clips in flash and place them where you want them to end, and then look in the properties panel for their x values. (assuming the registration point is in the upper left.

 

as I said in the beginning you could cut this code easily in half with TimelineLite... but first things first.

 

Carl

[khw2010]

Thanks Carl, appreciate you helping out (and I do realize what a remedial exercise it is/was), forgive me if I was not able to articulate myself -- still learning.

 

This is what is happening when I use TimelineMax (prior to your first message):

 

I can get the words "A,B,C" to appear one after the other (one 3 separate lines), and subsequently move to the L of the stage. However, when I try to get words A,B,C to move to the upper L of the stage and shrink, they move on top of each other as opposed to being on three separate lines(if that makes sense). Using your code, the same thing happens. Is this a matter of spcaing w. their X & Y properties? And please be gentle, still learning. Thanks!

[Carl]

without seeing an fla or swf I can only guess that you need to adjust the y value on the final tween. the y property sets an objects distance top > bottom.

[khw2010]

Thanks for your reply, going to try to work it out on my own. If I continue to have problems, I'll make sure to upload a .swf as an example.