Refresh mC position

1

I always see these bezier curve things where you can like choose how to make the line bend and everything and today i started expirimenting with the drawing API and found out that it’s incredibly easy to do.
My question is how do you make it so that the position of the anchor points refreshes every frame?

I have the basic idea I just can’t quite figure it out.
Thanks for any help.

Attached is my fla

2

There are a couple of ways of going about that. I’m experimenting with the same thing. You’ll have to use a clear() method to clear the lines out of place.

http://www.macromedia.com/support/flash/action_scripts/actionscript_dictionary/actionscript_dictionary511.html

Mine is a specialized situation where I’m trying to create tines from a lightning bolt. It uses xml and stuff to define the locations of vXStart, vYStart, vXFinish, and vYFinish. But anyway… this should give you at least an idea of how I’m refreshing my lines. I have mine set up is on the main timeline at this time. So on frame 1 I have functions which draw from point a to point b inside a movie clip called lightning. (also created on the first frame.) I think the function looks something like this:


createTine = function(vXStart,vYStart,vXFinish,vYFinish,vGirth,vAlpha){
    with ( _root.lightning ){
        lineStyle( vGirth, 0xffffff,vAlpha);
        moveTo( vXStart, vYStart );
        lineTo( vXFinish,vYFinish );
    }
}

Then on frame 2, I have the clear method first, then I call the function to draw a line.


lightning.clear();
fCreateTine(100,200,50,75,.5,100);

Then on frame 3 I loop back to frame 2.

Of course my example only draws the same line over and over so it’s hard to get a feel for it like that. Lets say instead I used an incrimenting location. I might do something like this in frame 2


vXS++;
vYS--;
vXF++;
vYF--;
lightning.clear();
fCreateTine(vXS,vYS,vXF,vYF,.5,100);

in this case, every time it hit frame 2, the locations would all incriment in some way, and then the lines would be cleared, and then new lines drawn.

Another method for doing changes in the lines might be to have it all set up on the movie clip itself.

Try this. Create a movie clip with nothing in it. Place a copy of it on the stage, and give it the instance name of oLineDraw. Then select the object and paste the following into the Action panel.

onClipEvent(load){
    vXStart=200;
    vYStart=200;
    vGirth=1;
    vAlpha=100;
}
onClipEvent(enterFrame){
    this.clear();
    with (this){
        lineStyle( vGirth, 0xffffff,vAlpha);
        moveTo( vXStart, vYStart );
        lineTo( _xmouse,_ymouse );
    }
}

Just a couple of different methods of doing the job.

3

awesome… I’ll give this a shot later tonight

thanks a lot

4

Well I got it to work with a completely different way…
I just threw my drawing thing into a onMouseMove and stuck a clear() in there.

I appreciate the help though, thank you

5

no problem. I really just wanted to show the clear(); method used in a couple of different ways. I’ll bet there are dozens of ways of doing that. Just glad it worked for ya.

6

yeah the clear() thing ended up bein really helpful… thanks for showin me that… i went and researched it and a couple other things afterwards

7

ok I’m still doing something along the same lines and I’m not entirely sure how to go about fixing this

I used the random movement code from kirupa/suprabeenr’s tutorial and then I put in my own stuff and I have this:

//special thanks to Suprabeener for the code
function getdistance(x, y, x1, y1) {
	var run, rise;
	run = x1-x;
	rise = y1-y;
	return (_root.hyp(run, rise));
}
function hyp(a, b) {
	return (Math.sqrt(a*a+b*b));
}
MovieClip.prototype.reset = function() {
	//specify the width and height of the movie
	width = 400;
	height = 200;
	//-------------------
	var dist, norm;
	this.x = this._x;
	this.y = this._y;
	this.speed = Math.random()*4+2;
	this.targx = Math.random()*width;
	this.targy = Math.random()*height;
	dist = _root.getdistance(this.x, this.y, this.targx, this.targy);
	norm = this.speed/dist;
	this.diffx = (this.targx-this.x)*norm;
	this.diffy = (this.targy-this.y)*norm;
};
MovieClip.prototype.move = function() {
	if (_root.getdistance(this.x, this.y, this.targx, this.targy)>this.speed) {
		this.x += this.diffx;
		this.y += this.diffy;
	} else {
		this.x = this.targx;
		this.y = this.targy;
		if (!this.t) {
			this.t = getTimer();
		}
		if (getTimer()-this.t>1000) {
			this.reset();
			this.t = 0;
		}
	}
	this._x = this.x;
	this._y = this.y;
};
_root.createEmptyMovieClip("bezier",100);
bezier.onEnterFrame=function(){
bezier.lineStyle(2,0x333333,100);
bezier.beginFill(0xCC3300,100);
	bezier.moveTo(uno._x,uno._y);
	bezier.curveTo(tres._x,tres._y,dos._x,dos._y);
	bezier.curveTo(quatro._x,quatro._y,tres._x,tres._y);
	bezier.curveTo(cinco._x,cinco._y,quatro._x,quatro._y);
	bezier.curveTo(seis._x,seis._y,cinco._x,cinco._y);
	bezier.curveTo(uno._x,uno._y,seis._x,seis._y);
	bezier.curveTo(dos._x,dos._y,uno._x,uno._y);
	bezier.endFill;
	bezier.clear();
}

This sort of works except the clear makes it so nothing shows up
and if i take the clear out it obviously makes this big ugly thing…

my question is where should I put the clear?

8

got it, the clear needed to be the first thing in the enterframe function =)