How do I dynamic add multiple properties to beizerThrough?

[esset]

Hi

 

I have a question regarding how I would go about to add properties for a beizerThrough tween dynamic? What I'm doing is to have the user click on the screen, the store mouseY+mouseX and have a movieclip run through the cordinates.

 

But I don't get how I convert my stored points into the bezier format. I'm trying to use parseBeziers() but I can't seem to understand how I should send in multiple values for more points then one. Like how it actually works. I've tried:

var bezierObj:Object = BezierPlugin.parseBeziers({"x":new Array(0, 100, 200, 300),"y":new Array(0, 140, 240, 340)},true);
TweenMax.to(player, 10, {bezierThrough:[{"x":bezierObj.x,"y":bezierObj.y}]});

 

and:

var bezierObj:Object = BezierPlugin.parseBeziers({"x":new Array(0),"y":new Array(340)},true)

 

i've also tried sending in my stored array:

var bezierObj:Object = BezierPlugin.parseBeziers({"x":$array_x,"y":$array_y}, true);

 

Would you be able to help me with this?

 

Thank you so much

[Carl]

its an interesting problem. usually with bezier stuff you have a arrays of points pre-made and then you just pass them in to a single tween.

 

if you want to keep adding points as the tween is happening it gets... interesting.

 

I was scratching my head for a bit on this, but found a pretty straightforward solution using TimelineMax.

 

an import thing to note for anyone reading this is that, any bezier segment takes into account 3 points:

 

1) where the mc starts (the bezier tween just uses the mc's current position automatically)

2) a control point that it passes through

3) where it should end

 

Also keep in mind that every time the user clicks they are alternating between adding CONTROL points and DESTINATION points.

 

when your app starts an mc will be sitting on stage.

first click creates a control point : no tween added

second click creates a destination point : animation can occur

 

third click creates another control point : no tween added

fourth click creates another destination point : tween added.

 

...repeat

 

I assume if the user clicks repeatedly you don't want to start the entire sequence over again, but rather the app should just remember all the points and tween continuously through them all.

 

TimelineMax to the rescue!

 

what we can do is track the number of clicks and determine whether or not the click is a control point or a destination point.

if the click is a control point, it just gets added to our x/y arrays.

if the click is a destination point we add it to our x/y arrays and append a new TweenMax to a TimelineMax that uses the previous point as a control point, and the most recent click as a destination point.

what is great about this method is that when the Tween is created it appears that the starting value is recorded or set as the destination point in the previous tween and not the mc's current position.

 

here is an example:

 

http://www.snorkl.tv/dev/bezierTimeline/

 

import com.greensock.*;
import com.greensock.plugins.TweenPlugin; 
import com.greensock.plugins.BezierThroughPlugin; 
TweenPlugin.activate([bezierThroughPlugin])


var xA:Array = [mc.x];
var yA:Array = [mc.y];

var clickCount:Number = 0;

message_txt.text = "click anywhere to add the first control point";

stage.addEventListener(MouseEvent.CLICK, addBezierTween);



var tl:TimelineMax = new TimelineMax()

function addBezierTween(e:MouseEvent):void{
clickCount ++;
xA.push(mouseX);
yA.push(mouseY);
if(clickCount%2 == 0){
	trace(" add endPoint");
	message_txt.text = "click anywhere to add another CONTROL point";

	tl.append(TweenMax.to(mc, .5, {bezierThrough:[{x:xA[clickCount-1], y:yA[clickCount-1]}, {x:xA[clickCount], y:yA[clickCount]}    ]}));
		tl.play();

	}else{
		trace("add controlPoint");
                       //visually mark the control point
		var newControl:ControlPoint = new ControlPoint();
		newControl.x = mouseX;
		newControl.y = mouseY;
		addChild(newControl);
		message_txt.text = "click anywhere to add a DESTINATION point";
		}
	TweenMax.fromTo(message_txt, .5, {alpha:0}, {alpha:1});	
}

[esset]

Very very interesting approach. Never thought of appending the Tween to another Tween so to speak

 

What if you want the user to pre-click all the controlpoints and when the user clicks (for example) "PLAY" have the MC run through them then?

 

How would you store the points and send them in to the Tween?

 

Thanks

[esset]

Basicaly come to think of it my idea is how Mr Greensock makes it in his example window here for beizer: http://www.greensock.com/tweenmax/

 

Where you can add "points" (which then displayes in the window output) and when you click "PLAY" it runs through them all in a sequence.

 

Any ideas?

 

Thanks

[esset]

I guess you could do it with just appending Tweens like this:

 

tl.append( TweenMax.to(mcToMove, 1, {bezierThrough:[{x: X, y: Y}], orientToBezier:true, ease:Linear.easeNone}) );

 

Is there a performance loss by doing it like this versus doing it in just one TweenMax.to line with all points being sent in at once?

[Carl]

you may also find my post here: viewtopic.php?f=1&t=4819&p=20618&hilit=bezier#p19462

 

to be helpful.

 

can't imagine there being a performance loss. TweenLite is highly optimized.

 

if you only need to run the tween after all the points are created, add each point object to an array and then pass that points array into a bezierTrough tween.

 

//the following demonstrates clicking 4 times to create a single bezierThrough tween:

 

var clickCount:Number = 0;
var points:Array = []


stage.addEventListener(MouseEvent.CLICK, addBezierTween);
function addBezierTween(e:MouseEvent):void{
clickCount ++;
points.push({x:mouseX, y:mouseY});
if(clickCount == 4){
	//play the tween
	TweenMax.to(mc, 5, {bezierThrough:points});
}

}

[esset]

Ah, how stupid am I. Of course you can do this:

 

points.push({x:mouseX, y:mouseY});

 

Thanks man