-
translating a motion guide tween (Math gurus, you will love this challenge)
a colleague gave me a timeline motion tween that follows a path. It's more or less a basic Math.sin wave (vertically) moving across the x axis. Our final design, we have more than one object following this path, however, we'd like to tweak each instance so it does not look too orderly. Anyway, the question... given a pretty confident level of the Math class, i'd like to translate the motion path to true programatic tween. Like that, we can create variants by utilizing Math.random() on say the Math.sin(variable). However, i need to get this as close to pixel pefect, and the motion tween is not following a perfect Math.sin formula (ie, the dip arc is wider than the top arc - see sample below)...any ideas on how to capture or translate the motion path to AS3?
It is not an option to us the timeline on this project, so we must translate this to AS3. Thanks.
Code:
//props
public var float:Number = 0;
public var step:Number = 0;
public var origin:Point = null;
public var startY:Number = 0;
public var speed:Number = 2;
public var scaleRate:Number = .0001;
//enter frame
public function update()
{
this.y = origin.y + Math.sin(startY) * this.float;
this.x +=speed;
startY += this.step ;
scaleX = scaleY += 2 *scaleRate;
}
-
so, i am starting with a bitmap read of the path and a tween engine...it is almost working, but on the curves (lower and upper arc), the animation is rough and jagged...ideas to smooth it out?
Code:
import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;
var p:MovieClip = pathContainer.path;
function scan(mc:MovieClip,hookColor:Number= 0xFF00FF) : Array
{
var uintColor = hookColor.toString(16);
trace(uintColor);
var copy:BitmapData = new BitmapData(mc.width,mc.height,true,0x00000000);
copy.draw(mc);
var _points:Array = new Array();
for(var b=0;b<copy.width;b++)
{
for(var c=0;c<copy.height;c++)
{
var pixel:uint = copy.getPixel(b,c);
if(pixel.toString(16) == uintColor)
{
var pt:Point = new Point(b,c);
var ob:Object = {x:pt.x,y:pt.y};
_points.push(ob);
}
}
}
return _points;
}
var points = scan(p);
var b:MovieClip = new Thing();
b.startY = 0;
b.scaleX = b.scaleY = .012;
pathContainer.addChild(b);
CurveModifiers.init();
Tweener.addTween(b, {x:points[0].x,
y:points[0].y,
scaleX:.5,
scaleY:.5,
_bezier:points,
time:42,
transition:"linear"})
-
You might try using grape. It's a tweening library which lets you specify paths as well as easing in mathematical form. It has support for sine paths built in.
http://blog.generalrelativity.org/ac...ation-library/
http://code.google.com/p/grape-as3/
By forums user newblack, I believe.
-
interesting, but i am getting this error...
"1046: Type was not found or was not a compile-time constant: Vector."
yes, i am set to publish to FlashPlayer 10....ideas?
-
Senior Member
You're not including that class or package.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|