Flash Explained

Learn Flash easily.

The basics of drawing with ActionScript

October 12th, 2008 | Author: Luka | Category: ActionScript


Flash gives you the great possibility to create graphics dynamically, that is, while your movie is running, via ActionScript. So, not everything has to be drawn manually. What are the benefits of this method of creating graphics? First of all, it reduces the filesize of your Flash movie. Second, it opens up an infinite number of possibilities for greater interactivity, creativity and more. And, best of all, it is very easy to learn. So, let’s start with the basics of drawing with ActionScript.

Drawing straight lines

1 Open a new Flash document. Call the first layer actions, ActionScript, or whatever you like. Click in the first (and only) keyframe of this layer and press F9 (PC) or ALT+F9 (Mac) to open up the Actions panel. Click in the right side of the panel and enter the following code:

_root.lineStyle(3, 0x0000FF, 100);
_root.lineTo(120, 75);

Test your movie (CTRL+ENTER for PC or Command+ENTER for Mac users). You should see a line appear in your Flash movie, looking exactly like the one on the image below:

A line drawn with ActionScript.

Now, let’s explain the code we just entered. The first line,

_root.lineStyle(3, 0x0000FF, 100);

tells Flash to set a style for drawing. Every time you want to draw with ActionScript, the first thing you have to do is tell Flash how to draw. So, the command lineStyle does exactly that, via the three parameters which follow between the parenthesis. The first one is line thickness. The value can be any number between 0 and 100, with 0 being the thinnest and 100 the thickest possible line. I chose the value 3 arbitrarily for this exercice. The next parameter tells Flash what colour should the line be. This is expressed by a hexadecimal value, with the characters 0x preceding the value. The 0x tells Flash that what follows is a hexadecimal value – if we omitted it, Flash would think it was some kind of variable. So, how can you know a specific colour’s hexadecimal code? Easy. Go to the Tools panel, to the Colors section, click a color (doesn’t matter if it’s line or fill color), hover with the mouse over the color of your choice and see its hexadecimal code (see image below).

Looking up the hexadecimal code for a color.

So, you could say, that instead of writing the # before the color’s code, in ActionScript, we write 0x. The last parameter defines the alpha property of the line – its transparency. This is a percentage value: if you enter 0, your line will be completely transparent – invisible on the stage. 100 means that the line is 100% opaque. You can even omit this parameter, like this:

_root.lineStyle(3, 0x0000FF);

If there is no alpha parameter at all, Flash uses the default value, which is 100. The _root keyword at the beginning of the line means that you are setting the lineStyle for the root timeline, the one you are working on right now (that means the Flash movie itself). You can use the drawing commands in ActionScripts either with root or with any movie clip (ex.: mymovieclip.lineStyle).

The second line,

_root.lineTo(120, 75);

actually draws a line. The lineTo command must always come after you have set the properties for drawing with the lineStyle command. This time, the parameters between he parenthesis are coordinates (in pixels) on our stage. The first is x, the second is y. The zero-point of Flash’s coordinate system is situated in the top left corner of the stage. The positive x coordinates are to the right of it and the positive y coordinates are below it. See the image below for explanation.

The coordinate system in Flash.

So the piece of code lineTo(120, 75) draws a line from (0, 0) to (120, 75). See this on the image below.

The starting and the ending points of the line on the stage.

If you wanted to draw a horizontal line for example, you would add this line of code to our existing ActionScript (shown in bold):

_root.lineStyle(3, 0x0000FF, 100);
_root.lineTo(120, 75);
_root.lineTo(200, 75);

Test your movie. You will see a horizontal line starting exactly where the last one ended (120, 75) and with (200, 75) as finishing point.

But what if you wanted to start drawing somewhere else? And why did the first line started from (0,0) you may ask? Because this is the starting default point for drawing if you haven’t specified a different one. In order to start drawing from a point other than (0,0) or to continue drawing from another point, you must use the moveTo ActionScript method. Add this to your code:

_root.lineStyle(3, 0x0000FF, 100);
_root.lineTo(120, 75);
_root.lineTo(200, 75);
_root.moveTo(300, 150);
_root.lineTo(180, 240);

You moved the beginning point of next line to (300, 150) and then you draw that line until the point (180, 240).

Drawing and moving around the stage with ActionScript.

You can change the properties of your lines whenever you want. Add this code to the existing one and see it:

_root.lineStyle(3, 0x0000FF, 100);
_root.lineTo(120, 75);
_root.lineStyle(0, 0xC71D1F, 100);
_root.lineTo(200, 75);
_root.moveTo(300, 150);
_root.lineStyle(15, 0x25A988, 60);
_root.lineTo(180, 240);

Try drawing a square or a triangle. It is really easy. Now that you know how to draw straight lines, let’s see about curves.

Top of page

Drawing curves

2 Save the previous document and open a new one. Call the layer actions, click into its first keyframe and open the Actions panel. Write in this code:

_root.lineStyle(0, 0x000000, 100);
_root.moveTo(100,100);
_root.curveTo(300, 100, 300, 300);

Test your movie, you should see a curve like the one in the image below appear.

A curve drawn via ActionScript.

As with straight lines, you must first define a style, which is what the first line of code serves for. The second line moves the drawing start position to (100, 100). I could have omitted that part, but I just didn’t want to start in (0, 0). You can choose to erase this line or enter any other value if you want to.

The third line draws a curve. Its generic syntax is as follows:

_root.curveTo(controlX, controlY, anchorX, anchorY);

where the last two parameters (anchorX and anchorY) are the coordinates of the finishing point of our curve. The first two parameters (controlX and controlY) are the coordinates of the point to which our curve flexes itself to. It acts like a “gravitational pull” point toward which the curve is being attracted to. I marked the control point and the imaginary pulling force on the image below so you can easier understand how this works. I also made the curve more thick so it can be seen easier.

The curve and the control point.

Experiment with different control point coordinates to see how your curve behaves in response. You can also add a lineTo command after that, Flash will just continue to draw with straight lines. After this, I recommend you see the tutorial about making fills with ActionScript.

Be Sociable, Share!

Comments

Submit a comment

  • milo Nov 9, 2008 at 5:19 pm

    but how would you make it so the viewer gets to draw a picture?

  • Jason Nov 13, 2008 at 1:39 am

    Very awesome. im new to action script but know other forms of programing. this is very helpful i will be reading all you stuff

  • Luka Nov 18, 2008 at 10:48 am

    milo: Well, Flash isn’t exactly Photoshop, but with AS 3.0 some amazing new things can be done. Stay tuned…

    Jason: Subscribe to my RSS feed so you get instant notifications when a new tutorial is posted!

  • vicki Nov 18, 2008 at 4:45 pm

    Sorry i am on the free trial and wanted to know a way you can use action script to create intertactive tabs over existing tabs that are static?

    Any help would be most appreciated

    Vicki

  • Luka Nov 23, 2008 at 5:22 pm

    vicki: You can have static tabs in one layer and the meni in another.

  • vinod Dec 12, 2008 at 6:13 am

    very helpful and interesting study material

  • aza Dec 22, 2008 at 3:49 pm

    IS it possible to do a floorplan editor with flash??

    and it should be online.
    thanks

  • Levi Putna May 2, 2009 at 3:21 am

    Hi,

    Is it possible to zoom to the extent of your new drawing?

    Tanks.

  • Rand Amm May 22, 2009 at 2:40 am

    Umm, hi. I am kinda new to flash and am trying to not make pre-existing lines, as opposed to let my viewer able to draw the line after clicking on a button
    For example:
    Mouse Down – Start Drawing Line
    Mouse Up – A perfectly straight/ Curved line to this point

    Is this possible?

    Thanks, Rand (Randy)

  • paul keenan May 29, 2009 at 3:06 pm

    I loved these instructions. It was exactly what a student of mine needed to know to include in an etch-a-sketch type program.
    thanks

  • anwar Aug 18, 2009 at 5:59 am

    This is nice tutorial
    Thanks a lot.

  • gnanam Sep 13, 2009 at 7:45 am

    This is nice tutorial
    interesting

  • Tyler Dec 18, 2009 at 8:54 pm

    I have used this before, including beginFill. The question I have, that I haven’t been able to get an answer to, is can you make one drawing on top of the other? I have tried drawing on seperate layers, but they intersect rather than one overlapping the other. Thanks

  • Yusuf Feb 3, 2010 at 12:51 am

    well, how we delete the lines?

  • […] X and Y coordinates equal zero). You can find more on this method in my tutorials that explains how to draw with ActionScript, since I don’t wish to repeat myself here. A nice figure will quickly make clear how the […]

  • Thomas Swasey Jul 6, 2010 at 2:21 pm

    Great basic tutorial on line drawing with AS3 (I need simple). Is it possible to draw the simple point to point lines adding point labels and generated from xml code so the lines can be drawn with the xml data?

  • Scott Jul 7, 2010 at 7:09 pm

    Great basic tutorial, but how do you tween a line to a new x and y coordinate?

  • kannan Aug 25, 2010 at 4:21 am

    This is nice tutorial instructions.

  • ADMEC MULTIMEDIA Mar 31, 2011 at 7:11 am

    You should also write something on drawing advanced geometry shapes as circle, rect, rounded rect, polygon etc.

    And also add a tip to fill color in stroke.

    Thanks,
    Ravi Bhadauria
    admec multimedia

  • anil rai Jun 1, 2011 at 1:16 pm

    very nice thx…………………

  • mehdi Oct 18, 2011 at 6:10 am

    very good !
    but how can i draw curve text?
    please help me!!!!

  • Lenon Feb 9, 2012 at 3:15 pm

    This is really exciting… BTW if I want to make the line draggable and the end points will in fix position how can it be done…

  • Markusariliu Mar 14, 2012 at 4:59 pm

    If your going to be making a tut as at this simple level then it might be a good idea to list what sdk you are using, as well as show how you declared _root. I have gone through ten tuts already that have not done this very thing.

  • Prashant Dwivedi Apr 2, 2012 at 6:11 am

    Awesome tutorial !!

    Very good job .. Thanks for sharing 🙂

You must log in to post a comment.