animate the drawing of a circle

[noeaw]

I don't necessarily consider myself a newbie, but this question begs to differ. How do you simulate the drawing of a simple circle? From nothing to a whole circle going clockwise. I have played with this for about 2 days and feel like an idiot.

Please help

[catbert303]

Hi,

One possible way would to be create a movie clip that contains a single "slice" of the circle, then duplicate and rotate this to build the circle.

In the attached file the clip with the linkage id "seg" is a rough 1 degree slice of a circle.

[chosenson]

Here is a way to achieve it much easier. It is all done with scripting.

see attachment

[1stbite]

here is the worst way possible, LMAO

[noeaw]

thanks for the help. I should have mentioned that the cirle is an outline only. For the 'worst way', how did you do it?

[1stbite]

lol,

1 - ok draw your circle on frame 1 (complete circle, no fill)

2 - then with the eraser tool erase a piece of the circle (smaller the amount makes for smoother animation)

3 - then press F6 to add another keyframe to the timeline,

4 - then use eraser to remove another piece off circle,( key is to remove appox same amount each frame for smooth flow of animation)

5 - repeat 3 & 4 till circle completly gone.

6 - highlight full timeline of circle(all keyframes) and right click, then click on reverse frames, this makes the animation look as its creating the circle not deleting it...

job done...

[catbert303]

I don't think there is much wrong with the "worst way", but a simple script based solution using the drawing API could be something like this,

it will draw a circle starting at the top, in a clockwise direction,

code:

---

var origin = {x: 200, y: 200}; // the point at the centre of the circle

var radius = 100; // how big the circle is



this.createEmptyMovieClip("circle_mc", 1); // a clip to hold the drawing

this.circle_mc.lineStyle(3, 0xff0000, 100); // a 3pt red line is used to draw the circle

this.circle_mc.moveTo(origin.x, origin.y - radius); // move to the top of the circle to start

this.circle_mc.i = -Math.PI / 2; // set the starting angle

this.circle_mc.onEnterFrame = function() {

	var x = origin.x + Math.cos(this.i) * radius; // calculate the next x and y points

	var y = origin.y + Math.sin(this.i) * radius;

	this.lineTo(x, y); // and draw a line to it

	if (this.i < 3 * Math.PI / 2) { // if we have not yet got back to the start point

		this.i += Math.PI / 180; // keep going

	} else { // we're done

		delete this.onEnterFrame;

	}

};

---

[1stbite]

neat scripting catbert...(u learn something new every day)

going to save that one in my samples folder for future use...(maybe for a preloader)

[chosenson]

Hey catbert303, I don't think he wants to go the easier way with scripting it. I offered a similiar method that will draw a circle of any diameter or weight with minimal adjustments needed.




I used to do things the hard way, Then I realized I was wasting many hours that could be better used.

[1stbite]

I think its down to the users preference, some prefer to stick to working with graphics and little code as possible, others like to get up to there armpits in code.

me, I like a little of both... horses for coarses as they say

lol

[chosenson]

Yeah! I agree with you. (But I still prefer the easiest ways. )

[1stbite]

me too, lmao just wish I knew what the easy way was sometimes,lol

[catbert303]

I guess the only possible advantage of a scripted solution here is the ease with it can be customised. If you decide you want to change the size of the circle, its colour position etc it only requires a couple of values to be changed.

var origin = {x: 200, y: 200};
var radius = 100;

can be altered to adjust the position

this.circle_mc.lineStyle(3, 0xff0000, 100)

can be changed to alter the properties of the line used and so on. a couple of little changes and you've got a whole new effect, you can even adjust the + and - signs in the trig equations used to change the direction in which the circle is drawn.

if anything, programming it can be a time saver

[tiGRAN=-2001]

Why nobody mentioned maskin?? lol there are so many ways.

If you need to make a more costumized circle then you can simply draw it and use catbert's 1st script as a mask! so that when you play it it will uncover your drawn circle as it rotates.