Drawing with TweenMax [SOLVED]

[GreenSock 8,117 Likes (Superhero)]

Oh, that's because there's no way for LinePath2D to know when you changed one of the Point's x/y coordinates so you need to call renderAll() on it to force it to update. The reason that wasn't necessary in the example was because the progress was being tweened, and every time progress is changed it automatically refreshes. So you can use an onUpdate in your tween(s) to call renderAll().

[Eris419 0 Likes (Newbie)]

Oh, that's because there's no way for LinePath2D to know when you changed one of the Point's x/y coordinates so you need to call renderAll() on it to force it to update. The reason that wasn't necessary in the example was because the progress was being tweened, and every time progress is changed it automatically refreshes. So you can use an onUpdate in your tween(s) to call renderAll().

 

Oh, okay, that makes sense. But, for us noobs, how do you call a protected function?

 

In the .fla example, path is the LinePath2D object. When I try to call it using path.renderAll(), I get:

 

1195: Attempted access of inaccessible method renderAll through a reference with static type com.greensock.motionPaths:LinePath2D.

[GreenSock 8,117 Likes (Superhero)]

Wups! Sorry about that - totally forgot that was protected. Okay, I just uploaded a new version with a new update() method that you can call to do the rendering. Here's some adjusted example code (notice the onUpdate:path.update in the tween):

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.motionPaths.*;
import flash.geom.Point;

//create an Array of Points
var points:Array = [new Point(50, 50), 
				new Point(100, 100), 
				new Point(450, 150),
				new Point(120, 250),
				new Point(50, 50)];

var endPoints:Array = [new Point(500, 280),
				   new Point(450, 50),
				   new Point(50, 50),
				   new Point(70, 350),
				   new Point(500, 280)];

//create a LinePath2D with 5 Points
var path:LinePath2D = new LinePath2D(points);

//add it to the display list so we can see it (you can skip this if you prefer)
addChild(path);

//since we'll be animating the Points themselves, set autoUpdatePoints to true.
path.autoUpdatePoints = true;

//now tween the positions of all the original points that define the LinePath2D
var i:int = points.length - 1;
var vars:Object;
while (--i > -1) {
vars = {x:endPoints[i].x, y:endPoints[i].y, onUpdate:path.update, ease:Elastic.easeOut, delay:Math.random() * 1.5 + 1};
TweenLite.to(points[i], 2.5, vars);
}

//make sure the last Point's tween matches the first one's perfectly
TweenLite.to(points[points.length - 1], 2.5, vars);

//create an array containing 30 blue squares
var boxes:Array = [];
for (i = 0; i 	boxes.push(createSquare(10, 0x0000FF));
}

//distribute the blue squares evenly across the entire path and set them to autoRotate
path.distribute(boxes, 0, 1, true);

//put a red square exactly halfway through the 2nd segment
path.addFollower(createSquare(10, 0xFF0000), path.getSegmentProgress(2, 0.5));

//method for creating squares
function createSquare(size:Number, color:uint=0xFF0000):Shape {
var s:Shape = new Shape();
s.graphics.beginFill(color, 1);
s.graphics.drawRect(-size * 0.5, -size * 0.5, size, size);
s.graphics.endFill();
this.addChild(s);
return s;
}

 

Snag the updated version at http://www.greensock.com/account/

[Eris419 0 Likes (Newbie)]

It works!!!

 

Thank you!! Thank you!!

[Eris419 0 Likes (Newbie)]

Hi, I was wondering if there is a way to specify the color of the line drawn by LinePath2D?

 

Okay, I see that it extends MotionPath, can I just change the color in there?

 

Nevermind again, I see the public lineStyle method.

[Z0OTY 0 Likes (Newbie)]

Hi, I have been following this thread and everything seemed to work until I came across this error with the new update function you posted. Any ideas?

 

"Scene 1, Layer 'Layer 1', Frame 1, Line 32 1119: Access of possibly undefined property update through a reference with static type com.greensock.motionPaths:LinePath2D."

[GreenSock 8,117 Likes (Superhero)]

Sounds like you're using a stale version of the motion path classes. Make sure you download the latest version. http://www.TweenLite.com

[Z0OTY 0 Likes (Newbie)]

Thanks, That was my initial thought as well, I downloaded the new as3 library and still get the same error.

[GreenSock 8,117 Likes (Superhero)]

I just triple-checked and there is indeed a public update() method in LinePath2D so maybe you need to delete your ASO files or maybe you're replacing your classes in the wrong place on your hard drive or something? Feel free to check the LinePath2D class yourself - you should see that update() method there.

[skiplan 0 Likes (Newbie)]

Thanks