haXe

Search

Options

Langs

Aan de slag met haXe/Flash

Documentatie > Aan de slag > Aan de slag met haXe/Flash

Het ontwikkelen van Flash en haXe is relatief eenvoudig. Allereerst de beroemde 'HelloWorld' als voorbeeld :

HelloWorld

Een eenvoudig voorbeeld wat het meeste van de 'toolchain' laat zien.

Test.hx

Definieer/maak een class in een bestand genaamd Test.hx

class Test {
    static function main() {
        trace("Hello World !");
    }
}

compile.hxml

Maak het bestand compile.hxml in dezelfde folder met onderstaande inhoud :

-swf test.swf
-main Test

test.swf

om te compileren, dubbelklik op compile.hxml bestand of run het command haxe compile.hxml. Als er fouten optreden, worden deze getoond.

Als je foutmeldingen krijgt als Standard library not found of Class not found: Test, wees er dan zeker van dat haXe zowel de library bestanden, die gedistribueerd zijn bij haXe, als de Test.hx kan vinden. Standaard kijkt haXe alleen in de huidige folder. Hierdoor moeten Test.hx en de inhoud van de library bestanden (Std folder) in een folder moeten staan van waaruit haXe uit te voeren is.
Je kunt het zoek path overschrijven door de HAXE_LIBRARY_PATH environment variabele e.g. /home/mjs/local/lib/haxe/std:. (let op de laatste colon en de punt).

test.html


Als alles goed gaat heb je een bestand genaamd test.swf geproduceerd. Maak nu allen nog een HTML bestand met onderstaande content en noem die test.html : 
<html>
<head><title>haXe Flash</title></head>
<body bgcolor="#dddddd">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        width="400"
    height="300"
    id="haxe"
    align="middle">
<param name="movie" value="test.swf"/>
<param name="allowScriptAccess" value="always" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="#ffffff"/>
<embed src="test.swf"
       bgcolor="#ffffff"
       width="400"
       height="300"
       name="haxe"
       quality="high"
       align="middle"
       allowScriptAccess="always"
       type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
</object>
</body>
</html>

Als je het bestand test.html opent in de webbrowser, zal er Hello World staan met informatie over het bestand en de regel waar de trace() staat.

Teken een vierkant

Tot nu toe heb je enkel pure haXe gebruikt, niet Flash-specifieke API. De trace functie is standaard geïmplementeerd zodat je 'on screen' traces ziet.
Hoe maak je nu een vierkant in beeld ?
Hiervoor heb je de 'drawing context' nodig. In Flash is dat b.v. een MovieClip Pas je Test.hx bestand aan met de onderstaande code :

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

Wat de code doet is de huidige MovieClip pakken en een vierkant tekenen met de Flash 'drawing' API. Voer de compile.hxml uit om opnieuw te compileren en open de test.html om een rood vierkant te zien.

Gebruik maken van de libraby

In Flash worden assets (graphics, sounds, fonts...) opgeslagen in de Library. Resources kunnen een identifier hebben genaamd linkage name. Als je een SWF bestand creëert van een library gebruik makend van de Flash IDE of een andere open source tool van een derde partij, zoals SwfMill, bevat deze resources waar naar verwezen kan worden vanuit haXo door middel van hun linkage names.

Bijvoorbeeld, stel je hebt een SWF bestand genaamd "resource.swf" die een MovieClip bevat met als linkage name button. Pas je code aan zodat hij deze resource toont:

class Test {
    static function main() {
         var but = flash.Lib.current.attachMovie("button", "but001", 0);
         but._x = 10;
         but._y = 20;
    }
}

Dit voorbeeld zal een "button" uit de library met depth 0 en met identifier "but001" (er kan maar één uniek object zijn per identifier en depth) aanhechten. Het zal vervolgens de knop op de positie (10, 20) op het scherm plaatsen.

In order to display the button, we need to tell haXe to use our resource.swf file to look for resources. Edit the compile.hxml file with the following content :

-swf test.swf
-swf-lib resource.swf
-main Test

You can now run the compile.hxml file to compile the project. The test.swf created this way will include the entire content of the resource.swf as well as the haXe compiled code. You can test it by opening the test.html file.

Please note that the test.swf will also use the same parameters (width, height, background color, flash version and frames-per-second) as specified the resource.swf while without the resource, it will use haXe default parameters. However most of these parameters (except the frames-per-second and flash version) can be overridden in the HTML source as you can see inside the test.html file.

Changing SWF properties

The SWF properties can be changed by using the -swf-header commandline flag. Edit your HXML and add the following :

-swf test.swf
-main Test
-swf-header 200:300:40:FF0000

That will set the SWF size to 200x300 pixels at 40 FPS with a red background color. Please note that the size and background are redefined in the HTML properties.

You can also choose to target a specific Flash Player version, by using the -swf-version commandline flag. haXe will process accordingly :

  • version 6 : will generate bytecode for Flash Player 6.0 (slower since it doesn't use registers). The flash API are not disabled with this version so be careful to only use the API classes/methods available for this player version.
  • version 7 : will generate bytecode for Flash Player 7, while disabling Flash 8 API
  • version 8 : will generate bytecode for FP8 (same as FP7) but enable Flash 8 new API
  • version 9 : will target Flash Player 9 and use the ActionScript3 API

Going Further

Now that you can do such easy things, all you need to go further is to learn the Flash API needed to implement your application. haXe heeft dezelfde API als Flash, dus je kunt de Adobe Livedocs voor Flash 6-8 (zie "ActionScript Language Reference") of de Adobe Livedocs voor Flash 9/10 bezoeken om meer detail over de API te krijgen.

There are some minor differences between haXe Flash API and ActionScript 2 Flash API, which are listed here :

  • the standard classes such as Date, Array, String can have some changes in haXe since they are common to all haXe platforms. Watch the haXe API documentation for more details.
  • the XML and XMLNode classes are merged into one single Xml class, and provides and extended API.
  • all the core Flash classes MovieClip, TextField... are in the flash package. You need then to use flash.MovieClip instead of MovieClip, or add an import flash.MovieClip; statement at the beginning of your class.
  • use flash.Lib._root instead of _root, flash.Lib._global instead of _global and flash.Lib.current to access the local root (different from _root if the haXe code SWF was loaded).

Apart from these minor differences, you can easily use all of the existing Flash API if you know it already.

version #6628, modified 2009-07-30 21:37:47 by Pimm
Powered by haXe