Pour commencer avec Haxe/Flash

Développer des applications Flash est vraiment facile avec Haxe. Regardons notre premier exemple "HelloWorld" :

HelloWorld

C'est un exemple très simple montrant le plus de la chaîne d'outils.

Test.hx

Créez cette classe dans fichier nommé Test.hx

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

compile.hxml

Créez le fichier compile.hxml dans le même répertoire avec le contenu suivant.

-swf test.swf
-main Test

test.swf

Pour compiler, vous pouvez simplement double-clicker sur le fichier compile.hxml ou exécuter la commande haxe compile.hxml. Si une erreur survient, elle sera affichée.

test.html

Si tout se déroule normalement, un fichier nommé test.swf sera créé. Ce fichier peut être intégré dans une page HTML telle que la suivante :

<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>

Si vous mettez ce code dans un fichier nommé test.html et l'ouvrez dans votre navigateur web, il devrait afficher Hello World avec des informations sur le fichier et la ligne où la trace à eu lieu.

Dessiner un Carré

Jusqu'à maintenant nous avons seulement utilisé du pur Haxe, et pas l'API spécifique de Flash. La fonction trace est impémentée par défaut pour qu'elle affiche une trace à l'écran. Regardons maintenant comment dessiner un carré sur l'écran. Pour cela, nous avons besoin d'obtenir un contexte de dessin, qui est appelé un MovieClip dans Flash. Modifiez votre fichier Test.hx avec le contenu suivant :

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();
    }
}

Ce que ce code fait c'est obtenir le MovieClip actuel et utiliser l'API de dessin de Flash pour afficher un carré. Exécutez le fichier compile.hxml pour compiler à nouveau et ouvrez le fichier test.html pour voir le carré rouge.

Utilisation de la Bibliothèque

En Flash, vous stockez vos assets (graphiques, sons, polices...) dans la Bibliothèque. Les ressources peuvent avoir un identifiant appelé nom de lien. Quand vous créez un fichier SWF à partir d'une Bibliothèque utilisant l'IDE Flash ou d'autres outils open source tel que le recommandé SwfMill, il contiendra les ressources qui peuvent être référencées depuis Haxe grâce à leur nom de lien.

Par exemple, disons que vous avez un fichier SWF nommé ressource.swf contenant un MovieClip avec le nom de lien bouton. Modifiez votre code pour qu'il affiche cette ressource :

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

Cet exemple va attacher un bouton depuis la bibliothèque à la profondeur 0 et avec l'identifiant but001 à la position (10,20) sur l'écran.

Avant d'afficher le bouton, nous devons dire à Haxe d'utiliser notre fichier ressource.swf pour chercher des ressources. Editez votre fichier test.hxml avec le contenu suivant :

-swf test.swf
-swf-lib ressource.swf
-main Test

Vous pouvez maintenant exécuter le fichier test.hxml pour compiler le projet. Le fichier test.swf ainsi créé inclura l'intégralité du contenu du fichier ressource.swf aussi bien que le code Haxe compilé. Vous pouvez le tester en ouvrant le fichier test.html.

Veuillez noter que le fichier test.swf utilisera les mêmes paramètres (largeur, hauteur, couleur de fond, version flash et frames-par-seconde) que ceux spécifiés dans le fichier ressource.swf, alors que sans ressource, il utilisera les paramètres par défaut de Haxe. Cependant la plupart de ces paramètres (à l'exception des frames-par-seconde et de la version flash) peuvent être redéfinis dans la source HTML comme vous pouvez le voir dans le fichier index.html.

Changer les propriétés du SWF

Les propriétés du SWF peuvent changées en utilisant la ligne de commande -swf-header. Editez votre HXML avec le contenu suivant :

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

Ceci définira la taille du SWF à 200x300 pixels avec 40 FPS et une couleur de fond rouge. Notez que la taille et la couleur de fond sont redéfinis dans les propriétés HTML.

Vous pouvez aussi cibler une version spécifique du Flash Player, en utilisant la ligne de commande -swf-version. Haxe traitera en conséquence :

  • version 6 : il génèrera du bytecode pour le Flash Player 6.0 (plus lent car il n'utilise pas d'enregistreurs). L'API flash n'est pas désactivé avec cette version donc faites attention de n'utiliser que les classes/méthodes disponibles pour cette version du lecteur.
  • version 7 : il génèrera du bytecode pour le Flash Player 7, en désactivant l'API Flash 8
  • version 8 : il génèrera du bytecode pour le Flash Player 8 (le même que pour le Flash Player 7) mais en activant la nouvelle API Flash 8
  • version 9 : il ciblera le Flash Player 9 et utilisera l'API ActionScript 3

Aller plus loin

Maintenant que vous avez fait vos premier pas, tout ce dont vous avez besoin pour aller plus loin est d'apprendre l'API Flash nécessaire pour implémenter votre application. Haxe est conservateur de l'API flash, vous pouvez donc lire la Livedocs Adobe pour en obtenir l'aide complète (voir la référence ActionScript qui référencera toutes les classes).

Il y a un petit nombre de différences entre l'API Flash Haxe et l'API Flash ActionScript 2 qui sont listées ci-dessous :

  • les classes standard telles que Date, Array, String peuvent avoir quelques différences en Haxe du fait qu'elles sont communes à toutes les plate-formes Haxe. Regardez la documentation Haxe API pour plus de détails.
  • Les classes XML et XMLNode sont combinées en une unique classe Xml, qui fournit et étend l'API.
  • toutes les classes cœurs de Flash MovieClip, TextField... sont dans le package flash. Vous avez besoin d'utiliser flash.MovieClip au lieu de MovieClip, ou ajouter une déclaration import flash.MovieClip; au début de votre classe.
  • utilisez flash.Lib._root au lieu de _root, flash.Lib._global au lieu de _global et 'flash.Lib.current'' pour accéder au root local (différent de ''_root' si le code Haxe du SWF était chargé).

A part ces petits changements, vous pouvez facilement utiliser toute l'API de Flash existante si vous la connaissez déjà.

version #13713, modified 2012-04-15 08:23:07 by elyon