A Flash Developer Resource Site

Results 1 to 3 of 3

Thread: Dynamic length of line within rectangle

  1. #1
    Junior Member
    Join Date
    Jan 2010

    Dynamic length of line within rectangle

    Hello all,

    this one has stumped me beyond belief. I have a rectangle, and within that rectangle I have placed a line. The line starts out in the center of the rectangle. So, it's a sprite(rectangle) that has another sprite(the line) in it. When I press a button, the line starts to rotate from the center point. What I want to do is have the line follow the inside border of the rectangle, the line adjusting its length dynamically. It's like the hands of a clock, only the clock is rectangular and the hands touch the inside of it.

  2. #2
    Junior Member
    Join Date
    Dec 2009
    You could represent the rectangle parametrically and pick a point along the edge by clamping your variables to certain values. The advantage of this is that it will work for any parallelogram in any orientation, but the disadvantage is that there may be more intuitive solutions for your specific problem and/or which utilize the AS standard library, if you don't like the math behind it.

    I'll stick to the way Flash generally represents rectangles.

    For a rectangle defined by x, y, w, h, take a point P0 as <x,y>, the two points connected to P0 as P1: [x+w, y] and P2: [x, y-h]. The edges can be defined, then, as E0: P1 - P0 and E1: P2 - P1. The parametric equation:
    R(s, t) = P0 + s*E0 + t*E1
    will represent a point within the rectangle given s: [0.0,1.0] and t: [0.0, 1.0].
    A point along the rectangle's edge can be found by evaluating R(s,t) where s is any number in the interval [0,1] while t is either 1 or 0, or vice versa.

    If you wanted to, then, march around the edge of the rectangle, you could start with s and t as 0, and then increment s until it reached 1. After this, increment t until it reaches 1, then decrement s to 0, and finally t to 0.

    Hopefully I'm correct about the above. It should be simple to verify, but I'm not at home at the moment and tend to screw up even math this simple. Let me know if you're having trouble and I'll see if I can't get a hold of a compiler later.

  3. #3
    Join Date
    Feb 2010
    hmmm, it is strange to picture this. But I can give you a way I might achieve what I think you want. of course you know you need an EventListener. And you want the clock hand's rotation to be the same as the rectangle's rotation.

    var clockHand;
    var rectangle;


    However, you may want the hands connected to an invisible object that turns with the rectangle, so that the hands can rotate independent of the rectangle yet, as a whole, with the rectangle.

    you are also going to need some of the following:

    function draw(int a, int b){

    The above is a snippet of a clock script. You will need to look up graphics.lineStyle and
    graphics.drawCircle. I may make a tutorial on these. I have a running list of tutorials on this site, starting here:


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