Actionscript 3 is an ECMAScript-based programming language. I don't want to get into AS3 deeply, what we need to know it is object-oriented, and a virtual machine is needed to run AS3 programs, it is called AVM2 ( Actionscript Virtual Machine 2 ), and it is bulit in Flash Player 9. AS3 code can be edited with several programs, and can be compiled with the free Flex Development Kit provided by Adobe, but the fastest and easiest ( and most recommended ) development environment is Adobe Flex Builder, or Adobe Flex Builder plug-in for Eclipse. That's why we use Flex Builder in this tutorial.

Let's start with something easy, create a simple orange circle first. Open Flex Builder, File menuitem -> New -> Actionscript Project, type FirstCircle for name, and press Enter.

There should be a Navigator view on the left, showing our project files, and a big editor view on the right, showing FirstCircle.as, and a basic AS3 code :

package
{
    import flash.display.Sprite;
   
    public class FirstCircle extends Sprite
    {
        public function FirstCircle( )
        {
           
        }
    }
}


This is our main class, the "entering point" of our program. It is in the root package, and it is extended from the Sprite class, because AVM2 needs something visible for main class, we cannot create non-visible AS3 programs.

Let's compile and run this class. Run menuitem -> Run, and your default browser appears with a big blueish grey screen, and nothing happens. That is good, because we didn't write anything in the main class yet.

So, let's draw an orange circle. We need a displayobject with graphical abilities, there are three of this kind: the Shape, the Sprite and the MovieClip. Because we don't need a timeline and child display objects, we use the simplest class, the Shape.

package
{
   
    import flash.display.Sprite;
    import flash.display.Shape;
   
    public class FirstCircle extends Sprite
    {
       
        public function FirstCircle()
        {
           
            // creating a new shape instance
            var circle:Shape = new Shape( );
            // starting color filling
            circle.graphics.beginFill( 0xff9933 , 1 );
            // drawing circle
            circle.graphics.drawCircle( 0 , 0 , 40 );
            // repositioning shape
            circle.x = 40;                                
            circle.y = 40;
           
            // adding displayobject to the display list
            addChild( circle );
       
        }
       
    }
   
}


For tips on how to use Shape or DisplayObject's graphics use Flex Builder's built-in language reference, or Adobe's LiveDocs. The other important thing is the last row "addChild". DisplayObjects are no longer depth-organized, as in previous versions of actionscript, we have to attach them to displayobject containers instead to make them visible. They still have a .visible property, but that is a little bit different.