How to draw dynamically from right to left?

1

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:

_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?

2 

_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

myMC._x = 75.

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

3

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.

4

http://www.kirupaforum.com/forums/showthread.php?t=57731

scotty(-:

5

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.

6

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:

7

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

scotty(-:

8

Thanks! =)

9

Welcome! :wink:

10

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:

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);
	}
};

:frowning:

11

First, it stops because of this line

 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(-:

12

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!

13

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?

14

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

15

I’ll have a look later;)

scotty(-:

16

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

17

For a start, this works:

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;
		}
	}
};

:slight_smile:

scotty(-: