FlashMX Action draw method (Part 1)

Author: Ric Ewing Translator: chenlei5211 (flashmeng)

In the past, Macromedia Flash had some limitations when you tried to depict some effects. In some complex applications, ActionScript restricted developers' creativity. Now, Macromedia Flash MX's built-in drawing tools are capable of almost all the painting tasks. When you work with ActionScript, the effect is astonishing.
This article is explained in conjunction with the original file. when reading this article, it will be more advantageous for you to understand the original file you downloaded.
Download the original file drawing_methods.zip (28 K)

What are the ways to draw?

The new draw commands in ActionScript can be applied to every MC. You need to know that the lines and shapes created by code are more efficient than those manually drawn. The new methods include:
· MovieClip. beginFill ()
· MovieClip. beginGradientFill ()
· MovieClip. clear ()
· MovieClip. curveTo ()
· MovieClip. endFill ()
· MovieClip. lineStyle ()
· MovieClip. lineTo ()
· MovieClip. moveTo ()
These AS plotting tools bring a lot of new concepts to Flash MX, so let's first understand those.

The virtual pen)

Each MC has this virtual pen ". This pen is pre-set (default) and is located at the MC origin (0, 0 ). It does not "Draw" or be filled, so it is invisible. Any painting method will modify the "pen" attribute or move it. We made a simple draw line example for you to download. Open the drawLine. fla file in Flash MX and click "Draw line to, 75" to see that "virtual pen" draws a blue line segment.
In Flash MX, we can see that this button is assigned the following Actions:

On (release ){
_ Root. lineStyle (1, 0x0000FF, 100 );
_ Root. lineTo (100, 75 );
}

Explanation: _ root indicates the main scene of a movie. We use the "MovieClip. lineStyle () "to define the style of the line to be drawn --" 1 "defines the width of the line to be drawn as 1 pixel;" 0x0000FF "is a blue binary code; "100" defines the opacity of a line segment as 100% (that is, opacity ). after determining the line segment style, follow the _ root. lineTo (100, 75); this sentence makes the "pen" draw a line segment from the current position (0, 0) to (, 75. when this line segment is drawn, the position of the pen is (, 75.

Extended: If we place another button, it is defined:

On (release ){
_ Root. lineStyle (2, 0x0000FF, 80 );
_ Root. lineTo (170,200 );
}

Then the "pen" will draw a two-pixel Blue Line Segment with a width of 170,200 to (20%.

Depth and draw methods

For more information about Depth, see Depth.

MovieClip. moveTo (x, y)

This command can change the initial position (starting point) of the "virtual pen ). The values of x and y define the coordinate values of x and y of the pen.

Instance description:

In an image: we picked up the pen from (0, 0) and moved it to (x, y) (the pen is "floating" at this time, the pen tip does not have any contact with the paper during the moving distance, so it will not leave any trace)
For example, in the swf File above, we want to get a line segment from to, and we need to add a piece of code. As follows:

On (release ){
_ Root. lineStyle (1, 0x0000FF, 100 );
_ Root. moveTo (140,20 );
_ Root. lineTo (100, 75 );
}

Row 3: _ root. moveTo (); it is the code we added, which moves the "pen" to () and draws a line.

It should be noted that in this example, each time you press a button, you will draw a new line segment (of course, there seems to be only one line, because they are superimposed)
In this way, if you repeatedly click a button (for example, 2000 times), it will generate 2000 identical line segments! As for the consequences ...... Therefore, we need a solution, that is MovieClip. clear, which will be discussed later.

MovieClip. lineStyle (thickness, rgb, alpha)

This is used to define the attributes of the drawn line. We already know how to use it. Next we will take a closer look at the parameters:

Thickness: This parameter defines the width (in pixels) of the line to be drawn. Its value can only be an integer from 0 to 255 (less than 0 is treated as 0, if it is greater than 255, it is treated as 255 ). If you define Thickness as 0, the drawn line is a line of 1 pixel width.

RGB: It sets the line color. This is the same as RGB for plotting. If the RGB value is not specified, the default value is black.

Alpha: It defines the opacity of the line (expressed in percentage). The value range is between 0 and 100. When Alpha is 0, the line drawn is completely transparent. If Alpha is 100, the line is not transparent. If the Alpha value is not specified, the default value is 100.

Instance Description: Although lineStyle can define three parameters, we generally do not need to define each item. For example, to draw a black opaque line with a width of 2 pixels, you can use the following:

_ Root. lineStyle (2 );

We can see that this as only defines the thickness value, then the remaining two rgb and alpha use the default value. Similarly, we can:

_ Root. lineStyle (0, 0xFF0000 );

In this way, the code can be simplified and optimized.

All line segments drawn after the line segment style are treated as a single object. When the "linestyle" function is called, even if all the parameter settings are the same as the original, it will stop the existing line segment object and start a new line segment object. In this way, unexpected results may occur when overlapping line segments with an alpha value less than 100 are used. In the following example (set the alpha value to 25), press and hold "multiple linesytles" to show the changes. You can also open the "linestyle. fla" file in macromedia flash mx to view the effect.

MovieClip. lineTo (x, y)

We mentioned above that this command is used to change the starting position of a line. In Flash MX, the coordinates of x and y can be precise to 0.05 pixels. Since Flash MX can display a minimum length of 0.15 pixels, if you want to draw a line that can be seen, the absolute value of the line's start and end coordinate values cannot be less than 0.15, for example:
_ Root. lineStyle (100, 0xFF0000 );
_ Root. moveTo (100,100 );
_ Root. lineTo (100.15, 100 );

We can see that this 0.15-width line is almost a dot, so the above Code can be used to quickly draw a solid circle, the diameter of the circle depends on the value of Thickness, this is a good trick. If the coordinate value of y is changed at the beginning, the position of the dot is changed but the shape is not changed because it is not a real circle, just a horizontal line. Can we change the width (height) of the horizontal line by changing the y coordinate of the horizontal line?

If it is less than 0.15, you will not see this line, such:

_ Root. lineStyle (100, 0xFF0000 );
_ Root. moveTo (100,100 );
_ Root. lineTo (100.13, 100 );

In the following example, we use the lineTo command in combination with two ECSS that can be dragged to achieve a simple interaction effect. Can you do this?