Effect:
Click here to download the source file
First, let's introduce a line-related command:
1. Define line Style commands: LineStyle (line width, color, transparency)
2. Move Drawing Point command: MoveTo (x,y)
3. Draw line Segment command: LineTo (x,y)
A Draw a rectangle
Now draw a size 150*100r rectangle on the stage with the command described above.
Creates a new file, sets the stage size to 400*300, and the background is white. Enter the code in the first frame:
Stop ();
Set the thickness and color of the line and transparency;
_root.linestyle (2,0xffcc66,100);
Set the starting point coordinates (50,50);
(200,50)
(50,50)
_root.moveto (50,50);
Draws a rectangle four endpoints;
_root.lineto (200,50);
_root.lineto (200,150);
(200,150)
(50,150)
_root.lineto (50,150);
_root.lineto (50,50);
Press the Quick button to try it, you can see a rectangle.
After the source file is attached:
Two Two-point connection.
This technique is often used to make online courseware. After you create a new file, draw a circle on the stage and convert it to a movie clip. The instance is named "a". Copy it again, and the instance is named "B". Then enter the following code in the first frame:
Stop ();
Create a drawline custom function;
function DrawLine () {
Clear the contents of the screen first
_root.clear ();
Set Line Style
_root.linestyle (2,0X33CCFF);
Set the start point of the line;
_root.moveto (a._x,a._y);
Draw a straight line break, connect two balls;
_root.lineto (b._x,b._y);
}
DrawLine ();
Press the shortcut key to try, with the mouse repeatedly look, whether there is a line? Note that the registration point for the component should be center aligned to be more realistic oh.
Play big, if you want to drag two control points, and its line can be arbitrarily extended, just a little bit of this code can be. This is the code added to B:
Drag the ball when pressed;
On (Press) {
This.startdrag (TRUE);
}
Stop dragging when relaxing;
On (release) {
This.stopdrag ();
}
The code that runs when the mouse moves on B;
Onclipevent (MouseMove) {
Call function DrawLine start drawing straight line;
_root.drawline ();
Force refresh screen;
Updateaferevent ();
}
Add it to the code on a, as interested as you can try.
Three Line artboard
Draw a simple line artboard first. To create a new file, add the following code to the first frame of the timeline:
Stop ();
Createemptymovieclip ("DrawLine", 1);
Drawline.linestyle (2,0xffcc33,100);
Drawline.onmousedown=function () {
This.lineto (_root._xmouse,_root._ymouse);
}
The test animation will find that you can draw line segments by clicking in different positions in the window. But it's not smooth. To achieve the smooth line, you have to add code. Go on with your study.
Four Free painting
To create a new file, enter the following code in the first frame:
Stop ();
Defining onmousedown Functions
_root.onmousedown=function () {
Set Line Style
_root.linestyle (2,0xcc99ff,100);
Draw a straight line;
_root.moveto (_root._xmouse,_root._ymouse);
Define variable isdrawing and assign it to true
Isdrawing=true;
}
_root.onmousemove=function () {
If the variable is true
if (isdrawing==true) {
Draw a line break
_root.lineto (_root._xmouse,_root._ymouse);
Refresh the screen;
Updateaferevent ();
}
}
_root.onmouseup=function () {
The value of the set variable isdrawing is False
Isdrawing=false;
};
Test the animation, which allows you to draw the line freely in the window by dragging and dropping the mouse. If you add a button to the scene, you can erase the drawing at any time by adding code on the button:
On (release) {
Clear the contents of the picture;
_root.clear ();
}
Here's the source file, and I'm going to do four and content in different scenarios.