Bezier Curve
| Category | : Flash | Views | : 36006 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : bezier-curve.zip | ||
| Result | : See the result | ||||
In this tutorial you will learn how to make a curve using flash API and draw with a mouse movement.
Create a new document and in the actions for the first frame paste:
//empty Movie Clip to hold the drawing
_root.createEmptyMovieClip("holder", 33);
//event triggered when the mouse moves
this.onMouseMove = function()
{
//how the line looks (thickness, color, alpha)
holder.lineStyle(2, 0x009933, 10);
//move to the start of the curve
holder.moveTo(100, 200);
//explained below
holder.curveTo(_xmouse, _ymouse, 400, 200);
}
curveTo(controlX, controlY, anchorX, anchorY);
This function is used to draw a curve, anchorX and anchorY are the position of the end of the curve. And controlX and controlY tell to which direction the curve is going to be draw.If you test the code now you will notice that the framerate will go down after a while, that's because it's drawing to many lines.
Add this code before the rest:
holder.clear();
Now you will have a single curved line following the mouse.You can also use a button to erase the drawing:
//clear is the button instance
clear.onRelease = function()
{
//call the clear function
_root.holder.clear();
}
This is the result, using one line and a clear button:
Code Explanation
_root.createEmptyMovieClip("holder", 33);
Create new Movie Clip for our drawing.
this.onMouseMove = function()
{
This code runs every time the user moves the mouse.
holder.lineStyle(2, 0x009933, 10);
Set the color of the line with the lineStyle() function from the drawing API.
holder.moveTo(100, 200);
Start the drawing at the (100,200) coordinate.
holder.curveTo(_xmouse, _ymouse, 400, 200);
}
Draw a curve that follow the mouse coordinate and ends at (400,200).More cool tech articles from other blogs.
