Votre lecteur Flash n'est pas à jour. Installer la dernière version

Accueil » Tutoriaux » Haxe » Créer et utiliser les MovieClips avec Haxe/SWFMill
Les MovieClips

1. Introduction

Avant de d'aller plus loin, il faut savoir que pour utiliser des images avec ActionScript (et de la même façon avec Haxe) nous avons besoin de les ajouter à une librairie, ou bibliothèque. Pour importer un clip (ou Movie Clip) dans la librairie, deux approches sont possibles. La première consiste à utiliser le logiciel propriétaire de Adobe : Adobe Flash CS3. Les inconvénients sont bien évidemment les suivants : tout d'abord, la licence coûte assez cher (A partir de 836€ pour la version complète), ensuite l'environnement du logiciel est plutôt pénible et long à prendre en mains de par ses nombreuses options. Mais bien évidemment, ce logiciel est réellement utile si vous n'êtes pas familié avec le langage ActionScript et peut s'avérer assez rapide après la phase d'apprentissage.

Quelques captures de Flash CS3 :

           

La deuxième façon consiste à utiliser une librairie sous licence GNU GPL : SWFMill.

SWFMill est une librairie qui permet de générer des fichiers swf à partir de fichier xml ou xslt. Ses avantages sont bien évidemment sa gratuité mais également sa simplicité d'utilisation.

2. Utilisation de SWFMill

Pour commencer, nous allons créer une librairie contenant une seule image. Pour ce faire, ouvrez votre éditeur de texte, et saisissez :

<?xml version="1.0" encoding="iso-8859-1" ?>
<movie width="500" height="500" framerate="20" version="9">
     <library>
           <clip id="Image" import="image.png" />
     </library>
     <frame>
           <place id="Image" />
     </frame>
</movie>
 
Nous venons de créer un MovieClip avec les propriétés suivantes : 300 pixels de largeur sur 200 et un rafraichissement de 20 ips (images par secondes).
 
Maintenant, pour pouvoir avoir notre fichier swf, tapez :
 
$ swfmill simple library.xml library.swf
 
Où, library.xml est bien évidemment votre fichier xml et library.swf le fichier que nous allons créer. Bien entendu, dans notre exemple, l'image doit se trouver dans le même repertoire que le fichier xml.
 
Voici une capture des possibilités de SWFMill :
 
 

3. Utilisation du MovieClip avec Haxe

Petite précision : la suite est codée de telle sorte qu'on obtienne du code ActionScript 3. Pour ceux qui ne sont pas encore passé à AS3, vous changerez certainement d'avis en allant faire un petit tour par ici.

Nous avons dans notre librairie, un clip nommé Image. Nous devons donc créer deux classes. La première, bien évidemment, est la classe principale que nous nommerons Main. La deuxième doit obligatoirement porter le nom du clip, dans notre cas Image :

Le fichier Image.hx

import flash.display.MovieClip;

class Image extends MovieClip{}
 
Le fichier Main.hx
 
class Main{
    static function main() {
        var img:Image = new Image();
        flash.Lib.current.addChild(img);
    }
}
 
Votre MovieClip est maintenant présent dans votre scène.
Le fait de créer une classe pour chaque clip, permet d'avoir des méthodes propre à chaque clip et donc de les utiliser très simplement.
 
Par exemple, si nous voulons ajouter une méthode qui fait tourner le clip, nous aurons alors :
 
import flash.display.MovieClip;
import flash.events.Event;

class Image extends MovieClip{

    public function startPin():Void {
           addEventListener(Event.ENTER_FRAME, rotate);
    }

    public function rotate(event:Event):Void {
         this.rotation++;
   }

}

Modifiez votre fichier Main.hx :

class Main{
    static function main() {
        var img:Image = new Image();
        flash.Lib.current.addChild(img);

        // positionnement du clip
        img.x = 200;
        img.y = 200;

        img.startSpin();
    }
}
 
Compilez le tout à l'aide d'un fichier build.hxml:
 
-swf test.swf
-swf-version 9
-swf-lib ressources.swf
-main Main
 
Et voilà ce que vous obtenez :

 

4. Conclusion

Pour bien utiliser SWFMill, vous devez bien comprendre l'encapsulation en flash. Tous les documents Flash contiennent une scène générale (<movie>), les autres elements sont contenu dans celui-ci.

Dans le fichier xml, la balise <place> permet de rendre visible le clip dans la scène. Bien évidemment, il est possible de créer des scènes beaucoup plus complexe, mais nous ne rentrerons pas des les details dans ce tuto. Pour plus d'info, consultez l'aide.

En ce qui concerne les propriétés des MovieClips, référez vous à l'API, mais sachez que l'API de Haxe est très très proche de celle de ActionScript.

Voici les principaux attributs d'un MovieClip :

  • x : coordonnée sur l'axe des X
  • y : coordonnée sur l'axe des Y
  • alpha : opacité du clip
  • rotation : angle de rotation
  • scaleX : permet de modifier l'échelle du clip sur l'axe des X
  • scaleY : idem mais sur l'axe des Y