Search  

ANIMATE CURVETO

Home › Forums › Flash Discussion › Animate curveTo
29459 dxc381
367 posts
Exclusive author Author was featured Referred at least one person Sold between 10 000 and 50 000 dollars Bought between 1 and 9 items
I want to animate a curved line as if it is being drawn. The endpoint seems to animate fine. The problem is the the control points. I can’t figure out how to determine the x and y of the control points to make it look like it’s being drawn. Here is the code: 
import flash.geom.Point;
//define the area the arc must stay within
var stageWidth:Number = 900;
var stageHeight:Number = 675;
//
this.createEmptyMovieClip("arcs_mc", 5);
//
animateCurve = function(){
    var anchorXStart:Number = 0;//starting position of line
    var anchorYStart:Number = stageHeight;
    var anchorXEnd:Number = stageWidth;//ending position
    var anchorYEnd:Number = 200;
    arcs_mc.createEmptyMovieClip("arc_mc", 5);
    //
    var anchorX:Number = anchorXStart;
    var anchorY:Number = anchorYStart;
    //
    var anchor1:Point = new Point(anchorXStart, anchorYStart);//define the starting point
    //
    arcs_mc.arc_mc.onEnterFrame = function(){
        anchorX += 5;
        anchorY = anchorY* .96;
        ///determine the position of the control points
        var anchor2:Point = new Point(anchorX, anchorY);
        var midPoint:Point = Point.interpolate( anchor1, anchor2, 0.5 );
        var midPointInAnchor1Space:Point = midPoint.subtract( anchor1 );
        var controlPoint = midPoint.add(new Point( midPointInAnchor1Space.y, -midPointInAnchor1Space.x ));
        ///
        clear();
        arcs_mc.arc_mc.createEmptyMovieClip("curve_mc", 5);
        arcs_mc.arc_mc.curve_mc.lineStyle(0, 0xFF0000, 100);
        arcs_mc.arc_mc.curve_mc.moveTo(anchorXStart, anchorYStart);
        arcs_mc.arc_mc.curve_mc.curveTo(controlPoint.x, controlPoint.y, anchorX, anchorY);
        if(anchorX >= stageWidth){
            delete arcs_mc.arc_mc.onEnterFrame;
        }
    };
};
animateCurve();

There are no movie clips associated with it so you could copy this right into a flash file and see what it does.

Thanks!

Posted about 1 month ago
48131 tsafi
85 posts
Sold between 1 and 100 dollars

I am actually working on some crazy api geometric drawing. Try this simple draw line and from here you can work around with adding curve.

Drew it directly in script, add Child method let me know how it goes. To add curve you need to work with .cos and .sin

var xFDspeed:Number = 2;

var yFDspeed:Number = -9;

var x318:Number = 9;

var y318:Number = stage.stageHeight;

graphics.lineStyle (2, 0xffffff);/////set your bg to black

graphics.moveTo (30, stage.stageHeight);

addEventListener (Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame (event:Event):void {

x318 += xFDspeed;
y318 += yFDspeed;
graphics.lineTo (x318, y318);////}
Posted about 1 month ago
29459 dxc381
367 posts
Exclusive author Author was featured Referred at least one person Sold between 10 000 and 50 000 dollars Bought between 1 and 9 items

Thanks tsafi, I have a similar solution that also creates several segments (if i understand correctly what yours is doing). The problem with that is that you end up with a curve made up of several segments when it only needs one. It wouldn’t be a big deal except that there are going to be several of them.

Here is an image that explains all I really need to find out: \ The blue line is the final curve. The red lines are all lengths that I know. The red “curveTo controller” is the one I define. All I need to figure out is the x and y pos of the “curveTo controller” of the segment. Does that make sense?

Posted about 1 month ago
48131 tsafi
85 posts
Sold between 1 and 100 dollars

I want to understand you are trying to draw the curve on the stage blue+red then you want to find x and y on the curve to give it a function and control the curve fiscally or from the X/y position you want continue to draw.

What I do to find curve x/y I trace it with dote point and give it Math.sin to trace the y and x position ,also if you are using this in a clip and then you implement this on the main stage be careful not be off set your parameters (I hope we are talking about the same thing)

Posted about 1 month ago
29459 dxc381
367 posts
Exclusive author Author was featured Referred at least one person Sold between 10 000 and 50 000 dollars Bought between 1 and 9 items

Thanks tsafi!

The blue line will be the final curve. Let’s say I want it to draw in 5 frames. I would split that curve into 5 equal segments. On frame one it would draw just segment 1. On frame 2 it would kill the curve I drew and draw segment 1 and 2 together (just one curve) and so on.

I can figure out just fine how to get the x and y pos of each curveTo. I don’t know how to find the control points to make it look like a seamless transition.

I’m really sorry if that doesn’t make sense.

Thanks.

Posted about 1 month ago
48131 tsafi
85 posts
Sold between 1 and 100 dollars

When I do complicit Api drew since your stage is empty you don’t see your x and y only when you test your move.

I draw a fiscal Grid on my stage and mark them with numbers point and then I set up my curve /shape line according to my fiscal grid .

you need to find only once the Y/X point when you test your movie and then just copy the duplicate curve X and Y base on the Grid this is the easy way since even if you find your X and Y curve base on trace ,

Math(.cost/.sin) it will be hard for you to know in your mind where is the actual point of the X or Y base on your curve.

Try first to trace base on your Var and see the numbers running.

trace(“y: ” + anchorx); ///this is base on your var trace(“x: ” + anchorx);

see also this example its not like yours since it’s a fiscal curve but its always good to learn new stuff.

http://www.joma.org/images/upload_library/3/FlashForum/AS3/param_basic_as3.html

Its 1 am over here must go for some Friday night drinking let me know how its working, will be interesting to see what will be the final resolute.

Ps Don’t you heat when you are been nail by some Flash problem scripting and at the end it will be something stupid like a dot or whatever , you know…... (:

Posted about 1 month ago
29459 dxc381
367 posts
Exclusive author Author was featured Referred at least one person Sold between 10 000 and 50 000 dollars Bought between 1 and 9 items

Thanks Tsafi. I really appreciate your help.

Posted about 1 month ago