Flash Platform

What is Flash? See http://en.wikipedia.org/wiki/ActionScript for background information. See http://haxe.org/doc/targets/flash for information on the Flash Player versions and http://haxe.org/api for details of the API.

The Haxe compiler generates source code or bytecode for a target. For the Flash target, it generates ActionScript (2 or 3) and adds optional assets like images, fonts and sounds to a SWF file. This file is executed by the VM in Flash Player.

Some Basics


Writing programs in Haxe for the Flash platform is similar to writing programs in ActionScript 3 without using the Flash IDE. See http://www.nme.io/developer/guides/actionscript-developers for information on some of the differences between the two.

Screen Coordinates


Lets describe the coordinates of a Flash movie with a stage size of 320 by 240 pixels. The coordinates of a pixel on screen are written as a pair of x and y values: in ( 100,50 ) the x value is 100 and the y value is 50.

0,0 ---------- x value increases ----------> 320,0
x,y ................................................ x,y

|
| y value increases
|

0,240 ------- x value increases ---------> 320,240
x,y ................................................ x,y

Screen Colours


Screen colours in ActionScript (and many other programming languages) are written as 3 consecutive hexadecimal bytes. In a Haxe program, an example would be 0xFF0000. The first two characters 0x (zero x) tell the compiler that a hexadecimal value follows. The bytes (which can vary from 0x00 to 0xFF) show the values of these colours:
  • red
  • green
  • blue

In our example, the red value is at the maximum, and both green and blue are zero value. The displayed colour will be red. You can look at colour values in the swatch of most drawing / painting editor software. See http://www.somacon.com/p142.php for a "CSS Color Chart" showing some colours and their hexadecimal values.

Hello World


Go to http://haxe.org/doc/start/flash and run HelloWorld to check that your Haxe installation is working correctly. There is also an explanation of compile.hxml and creating an HTML web page to display the output SWF.

Drawing a Square


To draw a square using Flash, see http://haxe.org/doc/start/flash. Type the following code into the Test.hx file:

class Test {
 public static function main() {
 var mc : flash.display.MovieClip = flash.Lib.current;
 mc.graphics.beginFill( 0xFF0000 );
 mc.graphics.moveTo( 50, 50 );
 mc.graphics.lineTo( 100, 50 );
 mc.graphics.lineTo( 100, 100 );
 mc.graphics.lineTo( 50, 100 );
 mc.graphics.endFill();
 }
}

When compiled, it should output a Flash movie containing a red square in the upper left corner of the screen.

What Happened?


1. A variable named mc of type flash.display.MovieClip is initialised in line 3. Any display class that has a graphic object: Sprite or Shape would also work. See http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Graphics.html. MovieClip has the most overhead of these three display classes.
2. The rest of the program uses the Haxe Flash API. The fill colour for the square is initialised in line 4 with:
function beginFill( color : UInt, ?alpha : Float ) : Void
The argument is the colour value which is set to 0xFF0000 (which will give a red colour); and the optional alpha parameter (from 0.0 = transparent to 1.0 = opaque) is not used.
3. The moveTo() function in line 5 moves the drawing position to the pixel at 50,50 (x,y). Nothing has been drawn yet.
4. The lineTo() function in line 6 draws a line from the current drawing position (50,50) to the pixel at 100,50.
5. Further lines are drawn to the drawing positions of 100,100 in line 7 and 50,100 in line 8 completing 3 sides of the square.
6. The endFill() function is called in line 9.
function endFill() : Void
It does not take any arguments. The code for drawing the square is finished and the program ends.

Note that we only have three lineTo() function calls. 'If at the time you call endFill() the drawing point is not at the starting point of the shape, when you call the endFill() method, Flash Player automatically closes the shape by drawing a straight line from the current drawing point to the location specified in the most recent moveTo() call."[1]

Graphics Objects


Flash has several classes of graphic objects:
  1. the MovieClip class which we have just used. It has a timeline. If a timeline is not necessary, using a Shape or a Sprite class may improve rendering performance.
  2. The Shape class is more lightweight. It cannot contain child display objects and does not support user input events.
  3. The Sprite class is also more lightweight. It can contain child display objects and supports user input events. It is a MovieClip without a timeline.

Study the methods for each class at
to choose the graphics object most suitable for your application.

What Next?


Hey, I thought Flash was all about animation. Well, we are getting there. Go to http://blog.neurotoxic.org/post/2009/01/13/first and type up these programs in his "Haxe and Flash Basic Tutorial":

A simple rectangle


What Happened?

  1. We create a new Shape object named myRectangle.
  2. Go to http://haxe.org/api/flash/display/graphics and look at the lineStyle() function used in line 5. More explanation of the arguments can be found in Programming ActionScript 3.0[2]
  3. The drawRect() function used in line 6 is explained on the same page in the Haxe API documentation as lineStyle().
  4. The code "flash.Lib.current.addChild( my Rectangle );" in line 10 adds the myRectangle shape to the current movie.

The ? in the Haxe documentation means the function arguments are optional. You must include all the arguments before your last argument in the correct order. To use the scaleMode argument (which is number 5), the previous 4 arguments must be provided.

Moving our Shape


What happened?

  1. The myRectangle, rectangleWidth and rectangleHeight variables in lines 3-5 are global to the Haxe program so are declared outside the functions.
  2. An Event Listener for ENTER_FRAME is defined to call the onEnterFrame() function in line 17. The ENTER_FRAME event occurs every time a new frame is created.
  3. The x and y values of myRectangle are incremented by 1 in lines 22 and 23.
  4. The if expressions in lines 24 and 26 keep the myRectangle shape on the stage so it can be seen.

User Input

What Happened?

  1. Two more global variables (moveX and moveY) are initialised to 0 in lines 7 and 8.
  2. Two Key Listeners are added in lines 22 and 23: one calls the key_down() function when a key is pressed and the other calls the key_up() function when a key is released.
  3. Go to http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000520.html to see a list of Keycodes as used in the key_down() and key_up() functions.
  4. Note that the moveX and moveY variable will increment or decrement by 1 in the key_down() function.
  5. The moveX or moveY variable will be reset to 0 if it was changed in key_down() when the key is released in the key_up() function. Without this, the shape will keep on moving in its key_down() direction.

External Image


You will find that there are some changes to be made to Romaric's instructions for Haxe 2.09 and later versions. The Windows instructions are as follows:

SWFMill

  1. Go to http://swfmill.org and download the Windows binary for version 0.3.2 and unzip the application to a directory.
  2. The SWFMill documentation is at http://osflash.org/doku.php?id=swfmill.
  3. The swfmill application will not run because "libiconv-2.dll is not found". This DLL is used to convert between character encodings. Go to http://www.topdll.com and look for libiconv2.dll. Download it into the same directory as swfmill.exe. Unzip the downloaded file and rename it to "libiconv-2.dll". SWFMill will work now and create the SWF file as required in the tutorial.

resource.xml


Save the men.png file to the same directory as swfmill.exe. Go to http://haxe.org/forum/thread/4100 for the fix from Jan on May 11 at 08:10 and then change only line 5 of this file to read:

<clip id="Men" import="men.png" />

Create the resource.swf using the instructions given by Romaric.

Haxe Code


Modify Tutorial.hx to read as Jan said:

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

The New Way


Go to http://blog.skialbainn.com and read Haxe Roundup 134. There is a new method to embed the men.png image using only Haxe and without using SWFMill.

Type the following code into the MyImageBM.hx file:

@:bitmap("men.png")
 
class MyImageBM extends flash.display.BitmapData {
 public static function main() {
 var bm = new flash.display.Bitmap( new MyImageBM( 0,0 ) );
 flash.Lib.current.addChild( bm );
 }
}

Type the following into the compile.hxml file:

-main MyImageBM
-swf-version 9
-swf-header 320:240:30
-swf men.swf

and compile the SWF file in the usual way. More information is available at http://haxe.org/manual/tips_and_tricks under the "Flash Specific metadata" heading.

Animating


Once again, change only line 8 in resource.xml to read:

<clip id="Men">

Make sure that the men1.png, men2.png and men3.png files are in the same directory as swfmill.exe and you can create resource.swf as before.

Now, create tutorial.swf as you did before. There is no need to change the Haxe code. And that completes Romaric's tutorial.

  1. ^ Adobe Systems Incorporated. Programming ActionScript 3.0 2007, page 451
  2. ^ Programming ActionScript 3.0, page 450


Modified: Feb 16, 2013 12:48 am