Using examples to introduce the use of flash drawing instructions

Source: Internet
Author: User

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.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.