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: