Posted tagged ‘Drawing API’

Introducing the Drawing API in AS2

July 30, 2010

AS2 contains an API (Application Programming Interface) for drawing stuff on the screen. We will in this tutorial check out the basics of it (it has way more functionality than we will go trough in this post).

All code in this tutorial goes on the frame.

To use this API, we will need to first create an empty movieclip, we will do so using:
_root.createNewMovieClip("newMC",1);

There we have a new movie clip which is a child to _root (meaning root is its direct parent). The movie clip is called newMC (parameter 1) and has the depth 1 (parameter 2).

We can now draw inside this movie clip using the drawing API.

In this tutorial we will use the following features of the Drawing API

  • lineStyle to set the style of lines drawn using the API
  • moveTo to move the position we will draw a line from
  • lineTo to draw a line from the position defined using moveTo

We will start by setting the line style, we want thickness 5 and color black (#000000)
newMC.lineStyle(5,0x000000);

The first parameter is thickness (5) and the second is the color (0x000000, to change color to something different, change the zero’s after the “0x” part to the hexidecimal code for that color)

We will start drawing from the position 80,90 on the frame. (80 is the x position and 90 is the y position)

To set that as our position we use the moveTo function:
newMC.moveTo(80,90);

Now to start drawing use the lineTo function:

newMC.lineTo(122,10);

Voila! With four lines we have created a new movie clip, changed line style and drawn a line from the position 80,90 to 122,10. Feel free to play around with this. With this you could already create e.g. a simple system for drawing line charts in Flash.