Dans ce mini tutoriel, on va juste apprendre à faire un peu d'haXe/js à travers un petit effet de fading.

Pour réaliser cet effet il va falloir toucher aux propriétés de style suivant (selon les navigateurs) :

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

Ces propriétés de style ne sont pas encore répertorié dans la library js.Dom de haXe, mais on peut les rajouter très facilement. Il suffit d'aller dans le répertoire de /haXe/std/js. Repérez le fichier Dom.hx, ensuite cherchez l'élément typedef Style. rajoutez les propriétés suivantes :

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

Et voilà, ces propriétés sont désormais accessibles.

De plus je vous invite à installer la librairie feffects, qui permet de réaliser divers effets d'interpolation :

• Soit on la téléchargeant directement : feffects.
• Soit en utilisant la commande suivante dans un terminal.

                    haxelib install feffects
                

Normalement il sera installé dans le répertoire /haxe/lib, et pour pouvoir l'importer et donc l'utiliser dans vos projets, à la compilation il faudra rajouter la commande -lib feffects

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

Personnellement j'ai déplacé le répertoire feffects dans /haxe/std/, ce qui permet d'avoir directement accès à la librairie sans avoir à faire de -lib feffects.

Un peu d'haXe maintenant. Codons notre petit effet :

Main.hx

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

class Main
{ 
    static function main(){}
    
    static function faireApparaitre()
    {     
        var monElement = Lib.document.getElementById('ID_de_mon_element');
        
        var monInterpolation = new Tween(0, 1, 900, Linear.easeIn);
        monInterpolation.setTweenHandlers(apparait, fini);
        monInterpolation.start();
    }
    static function apparait(e:Float)
    {
        var monElement = Lib.document.getElementById('ID_de_mon_element');
        
        monElement.style.filter = "alpha(opacity="+(e*100)+")";
        monElement.style.MozOpacity = e;
        monElement.style.KhtmlOpacity = e;
        monElement.style.opacity = e;
    }
    static function fini(e:Float){ /** fin de l'interpolation **/}
}

Compilez !

haxe -main Main -js main.js