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,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,flash.display.LineScaleMode.NONE );
??? ??? myRectangle.graphics.drawRect ( 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,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: