Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Hippiesvin

Drawing with TweenMax [SOLVED]

Recommended Posts

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().

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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."

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×