tag:www.insideria.com,2009://34/tag:www.insideria.com,2008://34.23182- 2009-11-05T20:17:39Z Comments for Try Out The Drawing API... Without Compiling Anything! (http://www.insideria.com/2008/03/try-out-the-drawing-api-withou.html) Movable Type 4.21-en tag:www.insideria.com,2008://34.23182 2008-03-21T00:42:53Z 2008-03-21T01:29:56Z Try Out The Drawing API... Without Compiling Anything! My last few posts on the Flash/Flex/ActionScript drawing API gave me a few ideas... Everyone always says how it reminds them of old-school programming in BASIC or Pascal. I decided to make it easier for anyone to play with the drawing API, without having to compile any programs for themselves. I call this the "Drawing API Explorer". Using the drawing API explorer application, you don't have to override updateDisplayList or anything. All of the hard work is done. Andrew Trice spiral.jpg

My last few posts on the Flash/Flex/ActionScript drawing API gave me a few ideas... Everyone always says how it reminds them of old-school programming in BASIC or Pascal. I decided to make it easier for anyone to play with the drawing API, without having to compile any programs for themselves. I call this the "Drawing API Explorer". Using the drawing API explorer application, you don't have to override updateDisplayList or anything. All of the hard work is done.

This example uses runtime code evaluation to draw shapes using the ActionScript drawing API. Check it out below!

There are two tabs. The first tab allows you to type in code that will be executed when you click on the "run" button. The second tab shows you a bunch of ActionScript drawing API examples. Just click on an example name in the left, and the code will be displayed. You can run the examples by clicking on the "run this example" button, or you can edit the example code by clicking on the "edit this example" button. When you click on the "edit" button, it will switch over to the first tab and paste the code into there.... Be careful! It will clear whatever was in there previously.

You can use any kind of loops, if-statements, switch statements, etc... It supports all methods of the Graphics, Math, and Matrix ActionScript classes. You can use the variable g to represent the graphics object, the variable w to represent the draw target area width, and the variable h to represent draw target area height. I have tried the following, and know they work:

  • g.lineStyle
  • g.beginFill
  • g.endFill
  • g.moveTo
  • g.lineTo
  • g.curveTo
  • g.drawRect
  • g.drawRoundRect
  • g.drawCircle

See the ActionScript drawing API documentation for more information about the drawing API syntax and capabilities.

Go ahead and test it out here:

This text is replaced by the Flash movie DrawingAPIExplorer.


The runtime code evaluation uses the D.eval() code library. The D.eval() API is a SWC library for Flex applications that enables the runtime generation and execution of code and expressions in ActionScript 3.

You can launch this application in a new window here:
http://www.tricedesigns.com/portfolio/DrawingAPIExplorer/DrawingAPIExplorer.html

View the source code here:
http://www.tricedesigns.com/portfolio/DrawingAPIExplorer/srcview/index.html

Or, download the source code here:
http://www.tricedesigns.com/portfolio/DrawingAPIExplorer/srcview/DrawingAPIExplorer.zip

]]> tag:www.insideria.com,2008://34.23182-comment:2016048 Comment from funkyboy on 2008-03-21 funkyboy http://spreadingfunkyness.com Very cool example!
Will experiment with that.
Thanks!

]]> 2008-03-21T15:47:57Z tag:www.insideria.com,2008://34.23182-comment:2045000 Comment from chusty on 2008-10-29 chusty http://pl.lennylamb.com still trying to figure out whether id needs compiling or not ?

]]> 2008-10-29T17:19:07Z tag:www.insideria.com,2008://34.23182-comment:2049190 Comment from myneni koteshwar rao on 2008-12-18 myneni koteshwar rao great... its very use full for me.

thanks.

]]> 2008-12-19T04:19:31Z tag:www.insideria.com,2008://34.23182-comment:2057340 Comment from Luc Martin on 2009-04-10 Luc Martin http://pangym.com Thank you so much for this awesome work!

]]> 2009-04-10T23:28:31Z tag:www.insideria.com,2008://34.23182-comment:2059596 Comment from Shweta on 2009-05-13 Shweta Hi Andrew

This is all very nice.

I just need to know how to draw semicircle with using curve.
Can u provide some example please?

]]> 2009-05-14T06:56:41Z tag:www.insideria.com,2008://34.23182-comment:2059926 Comment from Mark on 2009-05-19 Mark To draw a semi-circle take a look at the drawWedge code in the following article:

http://www.adobe.com/devnet/flash/articles/adv_draw_methods.html

]]> 2009-05-19T19:48:48Z tag:www.insideria.com,2008://34.23182-comment:2114462 Comment from Alex Fisherr on 2009-09-24 Alex Fisherr Nice Post. Got some ideas I was looking for. One thing that I want to know more about is the option of erasing the drawings on a canvas. What if I want to erase a limited portion of a circle without removing the entire object?
I mean that if there is an image that I am working on and I draw some custom lines on it. How will I remove the line that is a bit misplaced from the target if the option of Undo is not there. Unlike MS Paint, where the eraser actually fills the space with selected color rather than removing the drawing. e.g, if you are editing a photo and you select the eraser, it leaves the mark on the photo which is strictly unwanted.

Can anybody help ?

Regards,

Alex Fisherr

]]> 2009-09-24T12:03:48Z