# How to draw dynamically from right to left?

**URL:** <https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383>\
**Category:** Uncategorized\
**Created:** [May 26, 2004, 1:33pm UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383 "2004-05-26T13:33:13Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![kathari](https://avatars.discourse-cdn.com/v4/letter/k/a183cd/32.png) [@kathari](https://forum.kirupa.com/u/kathari)\
**Post date:** [May 26, 2004, 1:33pm UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/1 "2004-05-26T13:33:13Z")

</div>

Hi,  
I am trying to make a square, using the drawing API. Since I want the lines I am making to show as they are drawn I ended up with this code:

```auto
_root.createEmptyMovieClip("ritax1", 2);
setProperty("ritax1", _x, 75);
setProperty("ritax1", _y, 50);
ritax1.lineStyle(0, 0x000000, 100);
this.onEnterFrame = function() {
	ritax1.lineTo(10, 0);
	ritax1._xscale += 300;
	if (ritax1._xscale>=2000) {
		ritax1._xscale = 2000;
	}
};

```

First, I am sure there is a smarter way to do this. Would anyone bother to tell me! Secondly and most important: How would I do to draw a line from right to left?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 26, 2004, 3:57pm UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/2 "2004-05-26T15:57:59Z")

</div>

```auto

_root.onLoad = function(){
   this.createEmptyMovieClip("holder", 1)
   with (holder){
             lineStyle(0, 0x000000, 100)
             beginFill (//don't remember the properties in there...)
             moveTo (0,0)
             lineTo (100, 0)
             lineTo (100, 100)
             lineTo (0, 100)
             lineTo (0, 0)
             endFill()
      }
}

```

There you go. One square coming up.

ps: setProperty, though often seen in many tutorials, should not be used anymore. It’s deprecated (ie: future flash players may not know what it means, so don’t bother learning it).

setProperty(“myMC”, \_x, 75) can now be replaced by

```auto
myMC._x = 75.

```

And you’ll have to agree that the code looks simpler this way…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 26, 2004, 4:52pm UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/3 "2004-05-26T16:52:28Z")

</div>

Thanks for the answer and I know I can use myMC.\_x = 75; I didn’t know it was deprecated though. Your code doesn’t solve my question though. My piece of code makes the viewer actually see the line being drawn, you see it grow from left to right (or up to down…). As far as I can see (and that’s why I didn’t make it that way) your square just “pops up”. But since it’s based on a scaling I don’t know how to make the line “grow” backwards (or change the registration point) ie from right to left. maybe I am overlooking how to change my code with the base of the making of a rectangle, because yes, I would like to see a rectangle being drawn at runtime starting from top left continuing clockwise.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 26, 2004, 5:55pm UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/4 "2004-05-26T17:55:45Z")

</div>

[http://www.kirupaforum.com/forums/showthread.php?t=57731](http://www.kirupaforum.com/forums/showthread.php?t=57731)

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 26, 2004, 7:04pm UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/5 "2004-05-26T19:04:06Z")

</div>

Scotty,  
thanks for the thread and I am sure it’s probably exactly what I am looking for. Unfortunately I can’t open either of the files(square.fla yours or homePanel.fla). I can download but not open.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 26, 2004, 7:13pm UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/6 "2004-05-26T19:13:05Z")

</div>

If you are getting “unexpected file format” errors then the files are mx2004. If you contact the author and ask really nicely maybe they’ll resave as mx.

:hr:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 26, 2004, 7:19pm UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/7 "2004-05-26T19:19:55Z")

</div>

Ah my bad, didn’t realize it was the mx2004 forum.  
Here’s my example in mx format:)

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 26, 2004, 7:41pm UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/8 "2004-05-26T19:41:40Z")

</div>

Thanks! =)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 26, 2004, 9:39pm UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/9 "2004-05-26T21:39:01Z")

</div>

Welcome! 😉

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 27, 2004, 9:22am UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/10 "2004-05-27T09:22:09Z")

</div>

Scotty?  
Would you have a remedy for this?  
I have adapted the code to my needs. Unfortunately the square stops drawing at one point.  
I suppose it is because of the way it calculates the distance in relation to the speed. Whatever I do something ends up going wrong. I have tried making multiple mc’s, both 2 that would draw 2 lines each and 4 that would draw 1 line each. I have tried adjusting the if statement so that it won’t contain == for a more “adjustable” condition but nothing really works and I can’t have the square drawn that slowly. (at the moment the swf is at 30fps) My new code:

```auto
createEmptyMovieClip("square", 1);
square._x = Stage.width-625;
square._y = Stage.height-450;
square.lineStyle(1, 0x000000, 100);
square.markerX = 0;
square.markerY = 0;
onEnterFrame = function () {
	if (square.markerX<550 && square.markerY == 0) {
		square.markerX += 20;
		square.lineTo(square.markerX, square.markerY);
	}
	if (square.markerX >= 550 && square.markerY<350) {
		square.markerY += 20;
		square.lineTo(square.markerX, square.markerY);
	}
	if (square.markerX>=550 && square.markerY >= 350) {
		square.markerX -= 20;
		square.lineTo(square.markerX, square.markerY);
	}
	if (square.markerX <= 0 && square.markerY>=350) {
		square.markerY -= 20;
		square.lineTo(square.markerX, square.markerY);
	}
};

```

☹

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 27, 2004, 10:04am UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/11 "2004-05-27T10:04:52Z")

</div>

First, it stops because of this line

```auto
 if (square.markerX>=550 && square.markerY >= 350) {
                square.markerX -=20;

```

As soon as it’s executed once, the statement isn’t true anymore.  
Second, try to use a value for increasing/decreasing markerX/Y that’s “compatible” with the values in the if statements, then you can use the “==”.  
(with +=20 it will never be exactly 550 or 350, try 10 instead, that will also slow down the drawing)

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 27, 2004, 10:10am UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/12 "2004-05-27T10:10:57Z")

</div>

Yes, that’s what I realize. unfortunately it doesn’t work with 10 either… I guess I’ll just have to keep trying different values or do something different. Thanks anyway!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 27, 2004, 10:15am UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/13 "2004-05-27T10:15:30Z")

</div>

The weird thing though is that it doesn’t stop at any of the “corners”. When changing to speed 55 for the x drawing and 35 for the y drawing it draws about 70 pixels before it stops. This is actually what happened before too. Why is that?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 27, 2004, 10:20am UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/14 "2004-05-27T10:20:42Z")

</div>

Never mind, I found out what it was but the speed of the drawing is just too much right now… 😏

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 27, 2004, 10:47am UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/15 "2004-05-27T10:47:05Z")

</div>

I’ll have a look later;)

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 27, 2004, 11:09am UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/16 "2004-05-27T11:09:15Z")

</div>

Don’t worry about it! I’ll fiddle around with the figures later on. :huh:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 27, 2004, 11:10am UTC](https://forum.kirupa.com/t/how-to-draw-dynamically-from-right-to-left/111383/17 "2004-05-27T11:10:41Z")

</div>

For a start, this works:

```auto
createEmptyMovieClip("square", 1);
square._x = Stage.width-625;
square._y = Stage.height-450;
square.lineStyle(1, 0x000000, 100);
square.markerX = 0;
square.markerY = 0;
onEnterFrame = function () {
	if (square.markerX<550 && square.markerY == 0) {
		square.markerX += 10;
		square.lineTo(square.markerX, square.markerY);
	}
	if (square.markerX == 550 && square.markerY<350) {
		square.markerY += 10;
		square.lineTo(square.markerX, square.markerY);
	}
	if (square.markerX<=550 && square.markerY == 350) {
		square.markerX -= 10;
		square.lineTo(square.markerX, square.markerY);
	}
	if (square.markerX == 0 && square.markerY<=350) {
		square.markerY -= 10;
		square.lineTo(square.markerX, square.markerY);
		if (square.markerY == 0) {
			// do other stuff
			delete this.onEnterFrame;
		}
	}
};

```

🙂

scotty(-: