Transition object from point A to B and changing properties in between Vol.2

[Gregor3637]

Hello again.

I decided to create a new Topic here for my problem (link here), so I dont pollute the JS Forum (more than I have so far).
I also wanted share a solution and ask if its the right way of doing it.
So let me start with the problem from the previous Topic.

------------------ part 1 - the problem ----------------
The problem is that the code (listed below) is working fine for JavaScript, but when I try to do the same thing with AS3... I fail (maybe the problem is in me). Here is what I have :

var rectangle:Shape = new Shape;
rectangle.graphics.beginFill(0xFF0000); 
rectangle.graphics.drawRect(0, 0, 100,100);
rectangle.graphics.endFill();

var myMovieClip:MovieClip = new MovieClip();
myMovieClip.addChild(rectangle);
this.addChild(myMovieClip)
myMovieClip.y = stage.stageHeight * 0.5 - myMovieClip.height * 0.5;

var tl = new TimelineMax({repeat:1, yoyo:true});

tl.to(myMovieClip, 5, {x:500, ease:Linear.easeNone})
	.to(myMovieClip, 2.5, { scaleX:2, scaleY:2, repeat:1, yoyo:true, ease:Linear.easeNone }, 0);

(I know that myMovieClip is unnecessary but to be sure that the problem doesnt come from something like "the problem is that the provided displayObject doesnt have a Timeline". PS: I also tried addressing rectangle directly, but nothing changes)

After some time and reading, I finally got to a working solution with this code :

var tl:TimelineMax = new TimelineMax({repeat:1, yoyo:true});

tl.to( myMovieClip, 5, { x:500, ease:Linear.easeNone }  )
	.to(myMovieClip, 2.5, { scaleX:2, scaleY:2,  repeat:1, yoyo:true, ease:Linear.easeNone }, 0 )
	.to(myMovieClip, 2.5, { scaleX:1, scaleY:1,  repeat:1, yoyo:true, ease:Linear.easeNone }, 2.5 );

yet..... It seems like its not the right way of doing it (I may be wrong ... and it is indeed the right way)
Am I missing something? 

------------------ part 2 - is this solution good? ----------------
After a while I decided that I want to change the animation effect a little bit. Let me list the whole process again, so its clear what Im trying to do.
(the only change from the previous post (link here)is in step 2.2)

1    - move Object from point A to point B 
1.1 - at p.A, Object has scale = 1;
1.2 - at p.AB/2 (when you reach half the distance)  the Object also needs to be scaled UP by x2 (which scale transition needs to be fluent and too)(i.e. if with scale '1' it has width = '100', then when we scale it up by '2', it has to have width = '200')
1.3 - at p.B Object has scale = 1;

2    - move Object from point B to point A (revert the above)
2.1 - at p.B Object has scale = 1;
2.2 - at p.AB/2 (when you reach half the distance)  the Object also needs to be scaled DOWN by x2 (which scale transition needs to be fluent and too)(i.e. if with scale '1' it has width = '100', then when we scale it down by '2' it has to have width = '50')
2.3 - at p.A, Object has scale = 1;

the code that I have for this animation is this:
 

var rectangle:Shape = new Shape;
rectangle.graphics.beginFill(0xFF0000); 
rectangle.graphics.drawRect(0, 0, 100,100);
rectangle.graphics.endFill();

var myMovieClip:MovieClip = new MovieClip();
myMovieClip.addChild(rectangle);
this.addChild(myMovieClip)
myMovieClip.y = stage.stageHeight * 0.5 - myMovieClip.height * 0.5;
	
var duration:Number = 5;
TweenMax.to(myMovieClip, duration, { x:500, repeat:1, yoyo:true, ease:Linear.easeNone  } );
  
var scaleFactor:Number = 2;
TweenMax.to(myMovieClip, duration/2, { scaleX:scaleFactor, scaleY:scaleFactor, repeat:1, yoyo:true, onComplete: changeScaleFactor, ease:Linear.easeNone });

function changeScaleFactor() {
	scaleFactor = 0.5;
	TweenMax.to(myMovieClip, duration/2, { scaleX:scaleFactor, scaleY:scaleFactor, repeat:1, yoyo:true, ease:Linear.easeNone });
}

As you see..... I only use TweenMax for the animations.
Any  help or suggestions(with a little provided code if it is possible) for a better solution would be gladly and highly appreciated.

[Carl]

First, I forgot one thing different about the AS3 version: you can't use the repeat property in TimelineLite.to() because in AS3 it inserts a TweenLite tween (which doesn't support repeat). Sorry about that. So you need to add() a TweenMax tween like:

 

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


TweenLite.defaultEase = Linear.easeNone;




var rectangle:Shape = new Shape;
rectangle.graphics.beginFill(0xFF0000); 
rectangle.graphics.drawRect(0, 0, 100,100);
rectangle.graphics.endFill();


var myMovieClip:MovieClip = new MovieClip();
myMovieClip.addChild(rectangle);
this.addChild(myMovieClip)
myMovieClip.y = stage.stageHeight * 0.5 - myMovieClip.height * 0.5;




var duration = 3;


var tl = new TimelineMax({});


tl.to(myMovieClip, duration, {x:500})
  .add(TweenMax.to(myMovieClip, duration/2, { scaleX:2, scaleY:2, repeat:1, yoyo:true}), 0)
  .to(myMovieClip, duration, {x:0}, "back")
  .add(TweenMax.to(myMovieClip, duration/2, { scaleX:0.5, scaleY:0.5, repeat:1, yoyo:true}), "back");

 

[Gregor3637]

Well thank you again. It is working fine and your solution is far far simpler and readable from the code I provided.