A Flash Developer Resource Site

Results 1 to 6 of 6

Thread: drawing api ?

  1. #1
    Banned NTD's Avatar
    Join Date
    Feb 2004
    Posts
    3,438

    drawing api ?

    Hi,

    What I am trying to do is draw a line between points in an array based on a movieclips position between those two points. Example, I have an array....
    code:

    moveCount=1
    movePointX=[0,100,200];
    movePointY=[50,50,50];


    I have a movieclip with an onEnterFrame event that moves between the points in the array and draws a line between those points, but the line is drawn between the points as soon as the movieclip hits the first point.What I would like is to draw the line between the two points as the movieclip travels between the two points.
    code:

    _root.MC2.onEnterFrame = function() {
    if (move == true) {
    this._x += (x_distance/time)/40;
    this._y += (y_distance/time)/40;
    if (Math.abs(targetx-this._x)<=4.5 && Math.abs(targety-this._y)<=4.5) {
    move = false;
    _root.createEmptyMovieClip("tracer"+tracerCount, tracerCount*10);
    with (_root["tracer"+tracerCount]) {
    if (_root.tracerCount != _root.movePointX.length-1) {
    move = true;
    lineStyle(1, 0xFF00FF, 100);
    moveTo(_root.movePointX[tracerCount-1], _root.movePointY[tracerCount-1]);
    lineTo(_root.movePointX[tracerCount], _root.movePointY[tracerCount]);
    } else {
    move = false;
    _root.tracerCount = _root.movePointX.length+1;
    _root.MC2.gotoAndStop(2);
    }
    }
    _root.moveCount++;
    _root.tracerCount++;
    _root.MC2.gotoAndStop(2);
    targetx = _root.movePointX[_root.moveCount-1];
    targety = _root.movePointY[_root.moveCount-1];
    x_distance = targetx-this._x;
    y_distance = targety-this._y;
    distance = Math.sqrt(Math.abs(x_distance*x_distance+y_distanc e*y_distance));
    move = true;
    time = distance/speed;
    updateAfterEvent();
    }
    }
    }



    How would I determine the distance the movieclip has traveled between the two points and draw the line according to that? Any ideas?

    Thanks for looking
    NTD

  2. #2
    ActionScript Insomniac
    Join Date
    Jan 2003
    Location
    43d03.21'N, 89d23.65'W
    Posts
    1,173
    Since you have a MC at the point where you'd like the line to end, just use that clip as an endpoint of your line.

    What I would do, is create a new temporary movie clip for each segment of the path. As your tracer MC moves along that segment, repeatedly clear the temporary clip and then draw a line from the segment starting point to the tracer position.
    When you finish that segment, draw the line segment in your main drawing clip and remove the temporary clip.
    Unless otherwise specified, all code goes in Frame 1 of main timeline. FlashGizmo.com

  3. #3
    Banned NTD's Avatar
    Join Date
    Feb 2004
    Posts
    3,438
    Hi,

    I was thinking along those lines and that is what I do for each of the line segments...
    code:

    _root.createEmptyMovieClip("tracer"+tracerCount, tracerCount*10);
    with (_root["tracer"+tracerCount]) {
    if (_root.tracerCount != _root.movePointX.length-1) {
    move = true;
    lineStyle(1, 0xFF00FF, 100);
    moveTo(_root.movePointX[tracerCount-1], _root.movePointY[tracerCount-1]);
    lineTo(_root.movePointX[tracerCount], _root.movePointY[tracerCount]);
    } else {
    move = false;
    _root.tracerCount = _root.movePointX.length+1;
    _root.MC2.gotoAndStop(2);
    }




    However, this places the line instantly and not based on the moving movieclips position. If I use the movieclip as the target, the line anchors to the startpoint and the movieclip and ignores the array points, basically just creating one line from the anchor point to the movieclip as it travels through the array. I am probably not explaining this very well, here is a demo file. It draws the lines too early.

    Edit*** I think it has to do with using the x_distance and y_distance variables and subtracting them from the current _x and _y postions. I also think I have been looking at this too long and confusing myself.Gonna take a break.

    Thanks
    NTD
    Last edited by NTD; 03-13-2005 at 01:41 PM.

  4. #4
    Banned NTD's Avatar
    Join Date
    Feb 2004
    Posts
    3,438
    Hi,

    I tried again using.....

    this._x-x_distance,this._y-y_distance

    .....in the lineTo part of the code in the demo. This seems to make the lines appear at the end of the MC2 movement through the array, but not a consistant draw like the main drawline function. I am not very familiar with the drawing api and I can't seem to get the math right for how to adjust for the movieclip moviement to create the drawn line during the actual movieclip movement through the array. Any ideas how to better approach this?

    Thanks
    NTD

  5. #5
    Senior Member
    Join Date
    May 2001
    Posts
    1,838
    First, you should forget about MC2.

    Just try to create animated drawing about a line. After you finish your work, move the MC2 to the point you draw.

    The difficult part is: sometime, you need to draw part of the tail of the previous segment and part of the head of following segment.

    I did not "fix" your script. I just re-write it.
    Attached Files Attached Files

  6. #6
    Banned NTD's Avatar
    Join Date
    Feb 2004
    Posts
    3,438
    Hi,

    Thanks ericlin, that is very close to what I want to achieve. I will have to study how you did it a bit further to get a better understanding. I would also like to say you have some very nice advanced tutorials on your website and your overall programming skills are apparent. Thanks again for the code demo.

    Regards
    NTD

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center