Haxe and Flash Basic

copy from :http://blog.neurotoxic.org/post/2009/01/13/first

In this tutorial, we will learn the basics of Haxe/Flash.

Content:

- An Hello World

- A simple rectangle

- Move our rectangle

- User input

- Use an image in our application

- Use multiple images to create an animation

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

[/code]
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: