A quick guide to drawing with Flash MX
What the world needs are more Flash tutorials, right? Based on my experience coding the random line at the top of this page I decided to write a very short tutorial on using Flash MX's drawing tools. If you're not a Flash user and want to jump into this, here's an important tip: you won't be able to preview your Flash movie until it has been saved at least once. So if you're banging your head against the desk because you've copied the code from a website and it still doesn't work, try saving first. Not that I would have had this problem or anything... ahem. Here are some other tutorials I found helpful:
- One Point Perspective in Flash
- Nuts and Bolts: Drawing with Flash
- Hotwired on Flash MX (They still exist!)
Project One: Drawing a Static Straight Line
Flash is based on a timeline of frames. For the purposes of this lesson, we will be using a 200px by 200px file with only one frame, thus it will be looping constantly. Begin by making a new file. By control clicking (or right click, if you're using a PC) on the first frame in "Layer 1" (the default layter) you can open the actions panel for this frame. This is where we will create the movieclip which we use as a canvas to draw onto. Paste the following script into the actions panel:
_root.createEmptyMovieClip("line", 1);
with (line) {
lineStyle(3,0x000000,70);
moveTo(0,100);
lineTo(200,100);
}
_root is what one uses in Flash to reference the top-most level of the movie. createEmptyMovieClip("line",1) will create the layer we need to draw to and it will give it a z index of 1. Now that we have the layer created, it's time to draw. The first step is to tell Flash where you want to draw by couching your draw calls inside a with statement. Next we need to define the line which we will be drawing with. In this case, we're using a 3px black line with 70% opacity. It's important to note that the hexcode color of the line must be defined in full format with the preceeding "0x" notation. After defining the line style we move the cursor to the starting point of the line with moveTo, in our case that's 100 pixels down on the left edge of the movie. Finally, the last step is to actually draw the line using lineTo and specifying the coordinates of the endpoint. Easy, right? And much cleaner when you create everything out of thin air instead of trying to use the GUI to create movie clips and then attatching scripts to them.
Project Two: Drawing (and redrawing) a Straight Line
View the straight line example
To create a line which responds to user input (or other forms of input) we have to find a way to redraw the line when necessary. The easiest way to do this is to use the EnterFrame event and simply redraw it on a constant basis with the applicable variable. Since our movie is a single frame long, the redraw period will be as close to instant as can be. The code for this example is as follows:
_root.createEmptyMovieClip("line", 1);
_root.line.onEnterFrame = function () {
with (line) {
clear();
lineStyle(3,0x000000,70);
moveTo(100,100);
lineTo(_xmouse,_ymouse);
}
}
The main addition here is that of the event listener: onEnterFrame. Our function is basically the same as before except now we're starting from the center of the movie and drawing a line out to mouse coordinates. Since we want it to appear as though the one line is following the mouse we have to clear all previous lines drawn onto the layer using the (duh) clear function.
Project Three: Drawing (and redrawing) a Curved Line
The other main function available to us in Flash MX's drawing suite is curveTo. The code below is a minor variation on the code from Project Two, but now we're drawing a curve across the middle of the screen that is effected by the position of the mouse.
_root.createEmptyMovieClip("line", 1);
_root.line.onEnterFrame = function () {
with (line) {
clear();
// draw the guide lines
lineStyle(1,0xff9999,100);
moveTo(0,100);
lineTo(_xmouse,_ymouse);
lineTo(200,100);
// draw the curve
lineStyle(3,0x000000,70);
moveTo(0,100);
curveTo(_xmouse,_ymouse,200,100);
}
}
Just like the straight line, first have to move the cursor to the beginning point in the curve we're going to draw. Curves are defined using a curve handle and an end point. The first coordinates that we pass to curveTo are the X and Y of the curve handle. Next we give it the X and Y of the end point just like we did when drawing a straight line. The curve handle acts as a sort of magnet which pulls at an (imagined) straight line and causes it to form a curve. You can see above that we're actually drawing three lines each time this function is executed. The two red lines we draw first are visualizations of the curve handle. As one moves the mouse around we can see how the curve changes to reflect the shape of the triangle. If that doesn't make sense don't worry. The important thing to notice is that we move the cursor to left edge of the curve, draw a line to the mouse, and then draw a line to the right edge of the curve. However, there is no need for a second moveTo because every time you use lineTo or curveTo the cursor's position is automatically moved to the endpoint of the line drawn.
--Posted 02/16/03 12:50AM