haXe provides several ways to work with the Flash target. For example, you can both export to AS3 and directly compile a swf file.
Since our designers will definitely want to create their UIs with the flash IDE, I need haXe and Flash to work together. While explanations on the haXe site could still be useful, this step by step guide shows how haXe makes it possible to:
- Separately maintain one or several asset files (just standard swfs) created using Flash CS3/4
- Write all your code in haXe.
- Export the result to a unique swf including both the code and imported assets.
If you are new to haXe/never heard of it, discover haXe benefits (link to haXe homepage)
At the moment, FlashDevelop is probably the best IDE to work with haXe (autocompletion, responsive interface, etc…)
Create a Flash file including your assets
- Create the test file, eg. assets.fla (new AS3 document or something like that)
- Create a movie clip and convert it to a symbol called ‘BlueSquare’
- Check Export for ActionScript in the movie clip properties. Ignore the notice telling you that flash will create a class automatically. That’s OK.
- The above automatically assigns a ‘BlueSquare’ class to the movie clip.
Create a new haXe project.
- Create a haXe project in FlashDevelop (project >> new project or similar)
- Create a resources folder along the src and bin folders created by FDevelop.
- Set the AS3 test file to publish to the resources folder as ‘assets.swf’.
Link the Assets file to your project
By default, FDevelop compiles your source files using the following command line:
haxe -cp "C:\Users\tea\haxe_fl_test\src" -cp "C:\src\ext\haxe" -cp "C:\Program Files\FlashDevelop\Library\HAXE\classes" -swf-header 800:600:30:FFFFFF -main Main -swf "C:\Users\tea\AppData\Local\Temp\tmpEE3B.tmp" -swf-version 9 -v -debug
Add the following setting (in Project Properties > Compiler Options > Additional Compiler Options)
You can also configure the document size and the target (e.g. flash9/10) in project properties, along with quite a few other things.
Don’t forget adding the resources folder path to the classpath, eg:
Get a movie clip from your assets and show it on-stage
Finally, add the following to your main method:
var panel = flash.Lib.attach("BlueSquare"); panel.x = 20; panel.y = 20; flash.Lib.current.addChild(panel);
The above code instantiate the symbol, adding it to the top left corner of the stage – easy?