Home  >  

Try Out The Drawing API... Without Compiling Anything!

Author photo
AddThis Social Bookmark Button
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

Read more from Andrew Trice. Andrew Trice's Atom feed

Comments

6 Comments

funkyboy said:

Very cool example!
Will experiment with that.
Thanks!

chusty said:

still trying to figure out whether id needs compiling or not ?

myneni koteshwar rao said:

great... its very use full for me.

thanks.

Luc Martin said:

Thank you so much for this awesome work!

Shweta said:

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?

Mark said:

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

Leave a comment


Type the characters you see in the picture above.

Tag Cloud

Poll: Sci-Fi Movies

What's Your Favorite Sci-Fi Movie of All Time?

Vote | View Poll Results | Read Related Blog Entry

Latest Features

  •     Welcome back to the series. This time we are goings to build a really exciting component that will be used to simply display information about the user. Well, you might say why to we need such a component, is there... Continue Reading
  •    Welcome back to our exciting Facebook ActionScript series. In this article we will discuss one of most important (and most exciting) features of the FB platform, it's the publishing of news. We all know when we log in to facebook,... Continue Reading
  • This article provides 10 tips and best practices (in no particular order) for maximizing the benefits that Dojo can bring to your next project. For a more thorough introduction to Dojo, see the article Dojo: The JavaScript Toolkit with... Continue Reading
  •     The notifications are one of the most interesting (and important) parts of the facebook area. In order to completely understand the Flash side of it, we need to understand the basics of the facebook notification, what it is and how... Continue Reading

Development Series

Get an overview of the tools and technologies that work together to allow developers to build Rich Internet Applications (RIAs) quickly and easily.

facebook icon Facebook Application Development

Anatomy of an Enterprise Flex RIA

Recommended for You

@InsideRIA on Twitter

Archives

  • Or, visit our complete archive.  

About This Site

Welcome to the premiere community site for all things RIA sponsored by O'Reilly Media and Adobe Systems Incorporated.