# Animating the Drawing of Shapes with Actionscripting

**URL:** <https://forum.kirupa.com/t/animating-the-drawing-of-shapes-with-actionscripting/33825>\
**Category:** flash\
**Created:** [October 23, 2003, 10:43pm UTC](https://forum.kirupa.com/t/animating-the-drawing-of-shapes-with-actionscripting/33825 "2003-10-23T22:43:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hds](https://avatars.discourse-cdn.com/v4/letter/h/bb73d2/32.png) [@hds](https://forum.kirupa.com/u/hds)\
**Post date:** [October 23, 2003, 10:43pm UTC](https://forum.kirupa.com/t/animating-the-drawing-of-shapes-with-actionscripting/33825/1 "2003-10-23T22:43:35Z")

</div>

Hello.

If I want to draw the stroke of a square just using actionscripting, I can (i.e moveto()). That will just show the stroke of a square as soon as I play the .SWF file.

Let’s say I want to animate the drawing of the stroke of a square from one point to the next. This way when I play the .SWF file, it will show the square being made. How would I go about doing so?

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:** [October 23, 2003, 11:41pm UTC](https://forum.kirupa.com/t/animating-the-drawing-of-shapes-with-actionscripting/33825/2 "2003-10-23T23:41:47Z")

</div>

You can draw it pixel by pixel if you’d like, using lineTo. Gimme a second…

---

<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:** [October 24, 2003, 12:12am UTC](https://forum.kirupa.com/t/animating-the-drawing-of-shapes-with-actionscripting/33825/3 "2003-10-24T00:12:01Z")

</div>

```auto
createEmptyMovieClip("square",_root.depth++);

square._x = Stage.width/2;
square._y = Stage.height/2;

square.lineStyle(1,0x000000,100);
square.markerX = 0;
square.markerY = 0;

onEnterFrame = function(){
	
	if(square.markerX < 20 && square.markerY == 0){
		square.markerX += 1;
		square.lineTo(square.markerX,square.markerY);
	}
	if(square.markerX == 20 && square.markerY < 20){
		square.markerY += 1;
		square.lineTo(square.markerX,square.markerY);
	}
	if(square.markerX <= 20 && square.markerY == 20){
		square.markerX -= 1;
		square.lineTo(square.markerX,square.markerY);
	}
	if(square.markerX == 0 && square.markerY <= 20){
		square.markerY -= 1;
		square.lineTo(square.markerX,square.markerY);
	}
}

```

This rounds the corners by a pixel, and continues drawing forever, but it’s a working version of what you’re trying to do.