.
Posted by : webzo on 03/18/2008 - 1203 pageviews
Awaiting 3 votes.

Page 1

DOWNLOAD SOURCE FILE FOR THIS TUTORIAL

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).



No comments found ! Click here to be the first adding comments for this tutorial!