Haxe seems to be the perfect language if you want to add Flash application to your web site. With the current version, you can create Haxe/Flash SWF using all the ActionScript3/Flash9 API, combined with the powerful Haxe API.
As I'm still a beginner using Haxe, I may do things not using the simplest way. I will be very happy to receive suggestions.

Hello World:

We begin by creating a simple project, with a simple text displayed.

The file  Tutorial.hx (from  Haxe.org):

class Tutorial
{
static function main()
{
// creates a TextField
var tf = new flash.text.TextField();
tf.text = "Hello World !";
// add it to the display list
flash.Lib.current.addChild(tf);
}
}

The file  compile.hxml: 
-main Tutorial

-swf-version 9

-swf-header 320:240:30

-swf tutorial.swf
The line  -swf-header 320:240:30 means we want a 320 * 240 flash application, with 30 images/second.
Compile using the command:

haxe compile.hxml

You obtain a file tutorial.swf, wich you can open with firefox:



A simple rectangle:

We want now to create a coloured rectangle :

static function main()
{
var myRectangle : flash.display.Shape = new flash.display.Shape();
myRectangle.graphics.beginFill ( 0x990000 );  // the color of the rectangle
myRectangle.graphics.lineStyle ( 1, 0x000000, 1, false, flash.display.LineScaleMode.NONE ); // the border style
// we add the rectangle at the high-left corner (coordinate 0,0 )of the screen, with a width and a length of 10.
myRectangle.graphics.drawRect ( 0, 0, 50, 50);
// or
myRectangle.graphics.endFill ();  
flash.Lib.current.addChild(myRectangle);
}

You can look to the methods we can use on a Shape in  the API. Note that most of the methods come from the parent class DisplayObject.
Result after compilation:


You can try to play with coordinates, the colour. Try too to use the other class in  graphics, like  lineTo, drawCircle...

Moving our Shape:

At each new frame generated, we want to move our rectangle.
We have to define a listener on the event  ENTER_FRAME  to automaticaly call our method  onEnterFrame() :

class Tutorial {

    static var myRectangle : flash.display.Shape;
    static var rectangleWidth = 50;
    static var rectangleHeight = 50;

    static function main()
    {
        myRectangle  = new flash.display.Shape();
        myRectangle.graphics.beginFill ( 0x990000 );
        myRectangle.graphics.lineStyle ( 1, 0x000000, 1, false, flash.display.LineScaleMode.NONE );
        myRectangle.graphics.drawRect ( 0, 0, rectangleWidth, rectangleHeight);
        myRectangle.graphics.endFill ();

        flash.Lib.current.addChild(myRectangle);

        flash.Lib.current.addEventListener(flash.events.Event.ENTER_FRAME,function(_) Tutorial.onEnterFrame());
    }

    static function onEnterFrame()
    {
        myRectangle.x ++;
        myRectangle.y ++;
        if( myRectangle.x > flash.Lib.current.stage.stageWidth - rectangleWidth)
            myRectangle.x = 0;
        if( myRectangle.y > flash.Lib.current.stage.stageHeight - rectangleHeight)
            myRectangle.y = 0;
    }
}

Result:



User Input:


What if we want now to move the shape using the arrow keys ?
We simply have to define listeners on KeyboardEvent.KEY_DOWN and KeyboardEvent.KEY_UP, to be aware when a key is pressed/released.

class Tutorial {

    static var myRectangle : flash.display.Shape;
    static var rectangleWidth = 50;
    static var rectangleHeight = 50;
   
    static var moveX : Float = 0; // the movement per frame of the rectangle on the horizontal axis
    static var moveY : Float = 0; // the movement per frame of the rectangle on the vertical axis

    static function main()
    {
        myRectangle  = new flash.display.Shape();
        myRectangle.graphics.beginFill ( 0x990000 );
        myRectangle.graphics.lineStyle ( 1, 0x000000, 1, false, flash.display.LineScaleMode.NONE );
        myRectangle.graphics.drawRect ( 0, 0, rectangleWidth, rectangleHeight);
        myRectangle.graphics.endFill ();

        flash.Lib.current.addChild(myRectangle);

        flash.Lib.current.addEventListener(flash.events.Event.ENTER_FRAME,function(_) Tutorial.onEnterFrame());
       
        flash.Lib.current.stage.addEventListener(flash.events.KeyboardEvent.KEY_DOWN, key_down);
        flash.Lib.current.stage.addEventListener(flash.events.KeyboardEvent.KEY_UP, key_up);
    }
   
    static function key_down(event:flash.events.KeyboardEvent)
    {
        if (event.keyCode == 37) // left arrow
            moveX = -1;
        else if (event.keyCode == 39) // right arrow
            moveX = 1;
        else if (event.keyCode == 38) // up arrow
            moveY = -1;
        else if (event.keyCode == 40) // down arrow
            moveY = 1;
    }
   
    static function key_up(event:flash.events.KeyboardEvent)
    {
        if (event.keyCode == 37 && moveX == -1) // left arrow
            moveX = 0;
        else if (event.keyCode == 39 && moveX == 1) // right arrow
            moveX = 0;
        else if (event.keyCode == 38 && moveY == -1) // up arrow
            moveY = 0;
        else if (event.keyCode == 40 && moveY == 1) // down arrow
            moveY = 0;
    }

    static function onEnterFrame()
    {
        myRectangle.x += moveX;
        myRectangle.y += moveY;
       
        // here we prevent the rectangle to move out of the display area
        if( myRectangle.x > flash.Lib.current.stage.stageWidth - rectangleWidth -1)
            myRectangle.x = flash.Lib.current.stage.stageWidth - rectangleWidth -1;
        else if( myRectangle.x <    0 )
            myRectangle.x = 0;
        if( myRectangle.y > flash.Lib.current.stage.stageHeight - rectangleHeight -1)
            myRectangle.y = flash.Lib.current.stage.stageHeight - rectangleHeight -1;
        else if( myRectangle.y <    0 )
            myRectangle.y = 0;
    }
}

Result:

Note that you first have to click on the Flash to give it focus and allow it to catch input events.


External image:

I want to insert this image in my Flash application:



To do it, I first have to create another .swf that will contain all the external resources of my application.
The application swfmill is used.

First we create a file resource.xml that will indicate to swfmill the resources we want to include, and the names to identify this resources:

<?xml version="1.0" ?>
<movie version="9">
    <frame>
        <library>
            <clip id="men" import="men.png"/>
    </library>
    </frame>
</movie>

Create the file resource.swf using the command swfmill simple resource.xml resource.swf.

Modify the compile.hxml file to indicate the compiler to use  resource.swf :

-main Tutorial
-swf-version 9
-swf-header 320:240:30
-swf-lib resource.swf
-swf tutorial.swf

We can now write Tutorial.hx:

class Tutorial
{
    static function main()
    {
        var s:flash.display.MovieClip = flash.Lib.attach("men"); // "men" is the name defined in resource.xml
        flash.Lib.current.addChild(s);
    }
}

Result:


Animating:

The objective is now to create an animation using the following images:
  

We only have to modify our resource file resource.xml, to create a clip composed of 4 frames, each one using one image:

<?xml version="1.0" ?>
<movie version="9">
        <clip id="men1" import="men1.png"/>
        <clip id="men2" import="men2.png"/>
        <clip id="men3" import="men3.png"/>
    <frame>
        <library>
            <clip id="men">
                    <frame>
                    <place id="men1" depth="1"/>
                </frame>
                <frame>
                    <place id="men2" depth="1"/>
                </frame>
                <frame>
                    <place id="men3" depth="1"/>
                </frame>
                <frame>
                    <place id="men2" depth="1"/>
                </frame>
            </clip>
    </library>
    </frame>
</movie>

As the id "men" of the clip is still the same, we do not need to do a modification in our Tutorial.hx file, we only need to compile.
The result: