Introduction to haXe/JS

In this tutorial i'm going to introduce haXe/JS through a small JS fading effect.

We'll need to use the following css properties (each one depend on the browser) :

  • opacity
  • MozOpacity (Mozilla Firefox)
  • KhtmlOpacity (Konqueror, Safari)
  • filter (IE)

They are not listed in the js.Dom package. Get into the haXe directory and find the js directory /haXe/std/js. Open this file Dom.hx, then find this element typedef Style. Add the following properties : 

                    ...
                    var filter : Dynamic;
	                var MozOpacity : Dynamic;
	                var KhtmlOpacity : Dynamic;
	                var opacity : Dynamic;
	                ...

Now these properties are available.

In this tutorial we're going to use feffects library. It isn't really useful in our case but it is just another way to present this last one :

  • Either you download it here : feffects.
  • or using this command in a terminal 
                    haxelib install feffects

It will be installed in this directory /haxe/lib (in the haXe directory). When you'll compile your project you have to specify that you use that library by adding this command -lib feffects

                    haxe -main Main -js main.js -lib feffects

Let's haXe now :

Main.hx

import js.Dom;
import js.Lib;
import feffects.Tween;
import feffects.easing.Linear;

class Main
{ 
    static var myElement:HtmlDom;
    static function main(){}
    
    static function makeAppear()
    {     
        var myInterpolation = new Tween(0, 1, 900, Linear.easeIn);
        myInterpolation.setTweenHandlers(appear, over);
        myInterpolation.start();
    }
    static function appear(e:Float)
    {
        myElement = Lib.document.getElementById('myInterpolation');
        
        myElement.style.filter = "alpha(opacity="+(e*100)+")";
        myElement.style.MozOpacity = e;
        myElement.style.KhtmlOpacity = e;
        myElement.style.opacity = e;
    }
    static function over(e:Float){ /** end of the interpolation **/}
}

Compile ! 

haxe -main Main -js main.js
sources.zip
(35 times)