Author: Mimi Widjaja

Setup the Actionscript

Here we go to the main part...the actionscript, which will control all the spider-web drawing. For some people, it's a little annoying dealing with actionscript.. but actually this stuff is not too complicated to understand. The full actionscript looks like as follows :

// Create a name for movie clip and set its depth
createEmptyMovieClip("web", 10);
// Set the event when the mouse move on the movie
web.onMouseMove = function() {
	// Clear the drawn curve and let only the exist one displayed on the stage
	web.clear();
	// Set the line thickness, 
	// line color (in hexadecimal value), 
	// and alpha (between 1-100) of the line
	web.lineStyle(2, 0xffffff, 100);
	// DRAWING  THE OUTER OCTAGONAL CURVES. 
	// Put the outer octagonal coordinate here.
	// moveTo cordinate as a start position
	web.moveTo(100, 200);
	// The curvature is controlled by the mouse coordinate position
	web.curveTo(_xmouse, _ymouse, 120, 120);
	web.curveTo(_xmouse, _ymouse, 200, 100);
	web.curveTo(_xmouse, _ymouse, 280, 120);
	web.curveTo(_xmouse, _ymouse, 300, 200);
	web.curveTo(_xmouse, _ymouse, 280, 280);
	web.curveTo(_xmouse, _ymouse, 200, 300);
	web.curveTo(_xmouse, _ymouse, 120, 280);
	web.curveTo(_xmouse, _ymouse, 100, 200);
	// DRAWING THE MIDDLE OCTAGONAL CURVES
	// Put the middle octagonal coordinate here.
	web.moveTo(130, 200);
	web.curveTo(_xmouse, _ymouse, 150, 150);
	web.curveTo(_xmouse, _ymouse, 200, 130);
	web.curveTo(_xmouse, _ymouse, 250, 150);
	web.curveTo(_xmouse, _ymouse, 270, 200);
	web.curveTo(_xmouse, _ymouse, 250, 250);
	web.curveTo(_xmouse, _ymouse, 200, 270);
	web.curveTo(_xmouse, _ymouse, 150, 250);
	web.curveTo(_xmouse, _ymouse, 130, 200);
	// DRAWING THE INNER OCTAGONAL CURVES
	// Put the inner octagonal coordinate here.
	web.moveTo(160, 200);
	web.curveTo(_xmouse, _ymouse, 170, 170);
	web.curveTo(_xmouse, _ymouse, 200, 160);
	web.curveTo(_xmouse, _ymouse, 230, 170);
	web.curveTo(_xmouse, _ymouse, 240, 200);
	web.curveTo(_xmouse, _ymouse, 230, 230);
	web.curveTo(_xmouse, _ymouse, 200, 240);
	web.curveTo(_xmouse, _ymouse, 170, 230);
	web.curveTo(_xmouse, _ymouse, 160, 200);
};

» Level Intermediate

Added: 2002-12-30 Rating: 8 Votes: 29 1 2 3 4 5 6 7 8 9 10 (10 being the highest) Thank you for voting! We have encountered an error. Please try again later. You've already voted.

» Author

Mimi Widjaja is a flash developer & web/ multimedia designer.

» Download

Download the files used in this tutorial.

Download (48 kb)

» Forums

More help? Search our boards for quick answers!