Posible for a less overreacted curve while use beziertrough?

[matthy]

Hi,

 

i am using tweenmax and loving the features. and i was extreamly exited when i found out that tweenmax had a function called beziertrough where i could make my movepaths for my arcade fligth game. and it even had an easing function . however i am experiencing some difficulties.i want him to move from lets say {x:100,y:0}{x:100,y:300}{x:300,y:300}{x:300,y:900}

 

but instead of going to this points it also make enormous curves wich are way to overreacted

see example: http://img39.imageshack.us/img39/1218/curvy.png

 

is there a way to make these curves less uhhm curvy?

 

thanks

Matthy

[GreenSock]

Well, not really - there isn't a setting for that. The algorithm it uses is the most common one (as far as I know) but if you want to tinker, a guy tweaked the algorithm for his project here: http://wonderfl.net/c/hzfJ (not sure if that helps much).

 

Good luck with your project.

[matthy]

its a bit late reply but i let it boil for some time to think if i could found a solution.

 

now i think i got it because it all doesn't have to be that precise.

i made a function where i can place points and it makes a array of those points so it will bezier trough it. however because of the bezier abilty the lines aren't always that predictable.

 

what i have seen on the site http://www.greensock.com/tweenmax/ is a example of the beziertrough which creates a line how it will follow.

i would love to have a example maker of the exact same thing but then in 900 x 700px. is the linedrawer in the example a simple function i can find/get/implement myself?

 

thanks

Matthy

[GreenSock]

There isn't a ready-made tool for that, but this should help:

viewtopic.php?f=1&t=4447&p=17720#p17720

[matthy]

Thanks greensock you really helped me a big time in here!

 

But I am having a big time finding out this problem:

I used the code from the other topic and its working fine but its not bezieringtrough the second point.

sometimes the line isn't also that aquarate with the tween but i think thats because of the same problem.

 

the code

    import flash.geom.Point;
   import com.greensock.plugins.BezierPlugin;

   var points:Array = [new Point(0, 0),
                  new Point(100, 50),
                  new Point(50, 200),
                  new Point(300, 300)];

   var data:Object = {x:[], y:[]};

   for (var i:int = 0; i < points.length; i++) {
      data.x.push(points[i].x);
      data.y.push(points[i].y);
   }
   var curveToData:Object = BezierPlugin.parseBeziers(data, true);

   this.graphics.clear();
   this.graphics.lineStyle(2, 0x000000);
   this.graphics.moveTo(points[0].x, points[0].y);
   for (i = 1; i < curveToData.x.length; i++) {
      this.graphics.curveTo(curveToData.x[i][1], curveToData.y[i][1], curveToData.x[i][2], curveToData.y[i][2]);
   }

 

Here is a demo of what i got:

swf: http://www.websitekeuken.nl/demo/drawer.swf

source: http://www.websitekeuken.nl/demo/drawer.zip

 

click on field to create points

Arrow left = delete last point.

Space bar = tween.

 

do you know why it isnt beziering trough the 2nd point?

 

Thanks

Matthy

[GreenSock]

There were two problems:

 

1) The loop through the curveToData (at the end) should start at i=0, not i=1 (sorry about that).

 

2) You were including the FIRST point in your bezierThrough array. Don't do that. In other words, it's like putting the target at 0, 0, and then telling it to draw a line that goes from 0,0 through 0,0 and then the next point in the sequence, etc. Basically you take care of the first point by putting target there to begin with.

 

The edited Engine.as code would look like:

 

package {
import com.greensock.easing.Linear;
import flash.display.MovieClip;
import flash.display.StageDisplayState;
import flash.display.Stage;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import com.greensock.*;
import com.greensock.plugins.*;
import com.senocular.utils.KeyObject;
import flash.ui.Keyboard;

public class Engine extends MovieClip 
{
	public var coordList:String = "";
	public var coordArray:Array = new Array;
	private var key:KeyObject;
	private var candelete:Boolean;
	var testBlokje:MovieClip;

	function Engine()
	{
		stage.addEventListener(MouseEvent.CLICK, _handleClick);
		addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
		key = new KeyObject(stage);
	}

	public function loop(e:Event):void 
	{
		if (key.isDown(Keyboard.LEFT))
		{
			if (candelete == true)
			{
				coordArray.pop();
				removePunten();
				candelete = false;
			}
		}

		if (!key.isDown(Keyboard.LEFT))
		{
			candelete = true;
		}

		if (key.isDown(Keyboard.SPACE))
		{
			var remove:MovieClip = getChildByName('testblokje') as MovieClip;
			if (remove != null)
				removeChild(remove);

			testBlokje = new Blokje();
			testBlokje.name = 'testblokje';

			var beziers:Array = coordArray.slice();
			var first:Object = beziers.shift();
			testBlokje.x = first.x;
			testBlokje.y = first.y;

			addChild(testBlokje);
			TweenMax.to(testBlokje, 10, {bezierThrough:beziers, ease:Linear.easeNone});
		}


	}

	function _handleClick(event:MouseEvent):void
	{
		var mx:Number = event.stageX;
		var my:Number = event.stageY;

		coordArray.push( { x:mx , y:my } );
		var nummer = coordArray.length;

		var blokje:MovieClip = new Blokje();
		var m:MovieClip = new Marker();
		m.name = "punt" + nummer;

		m.x = event.stageX;
		m.y = event.stageY;

		addChild(m);
		addChild(blokje);

		drawMeuk(coordArray);			
	}

	function removePunten()
	{
		var laastePunt:Number = coordArray.length + 1;
		var child = getChildByName("punt" + laastePunt);
		removeChild(child);
	}

	function printArray()
	{
		for each(var point in coordArray)
		{
			trace ("x = " + point.x + " & y = " + point.y);
		}

		trace ("");
	}

	function drawMeuk(points)
	{
		if (points.length 				return;
		}

		var data:Object = {x:[], y:[]};

		for (var i:int = 0; i 			{
		   data.x.push(points[i].x);
		   data.y.push(points[i].y);
		}

		var curveToData:Object = BezierPlugin.parseBeziers(data, true);

		this.graphics.clear();
		this.graphics.lineStyle(2, 0x000000);
		this.graphics.moveTo(points[0].x, points[0].y);

		for (i = 0; i 			{
			this.graphics.curveTo(curveToData.x[i][1], curveToData.y[i][1], curveToData.x[i][2], curveToData.y[i][2]);
		}
	}
}

}

I also noticed that you're using a very old version of the tweening classes. You might want to update to make sure you've got the latest enhancements and fixes. http://www.greensock.com/tweenlite/

[matthy]

thanks it now 100% working!

 

One question i have seen that when drawing line the speed isn't correct. when you draw for instance a line with small distance and then one with a big distance you see that in the beginning its very slow and then it goes like a rocket

 

is this normal? and if so is this changeable that it has the same speed anywhere, (else i have to consider the length with every path i draw )

the ease = Linear.easeNone so that cant be the problem. and I know the time is settable but i am talking about the length of the pieces from point to point.

 

example screenshot:

[GreenSock]

Sorry, but that's how the beziers work currently. I hope to enhance this at some point in the future but it definitely takes extra calculations to accomplish what you're asking about.

[matthy]

yeah i get the point, well thanks anyway, i will get a far end with this