Créer un composant

Le grand point fort d'OpenLaszlo est que l'on peut créer des objets et les réutiliser à volonté. C'est pourquoi je vais vous apprendre à créer
un bouton annimé quand la souris le survol.

Voici un exemple de résultat que
vous pourrez obtenir à la suite de ce tutoriel:

La première étape consite à créer le composant. Pour cela, nous allons utiliser la balise "class"

« Class » est une hérite du composant « view ». Notre bouton sera ecrit
dans une fichier nommé BoutonAnim.lzx
Notre bouton s'appelle "abutton"

<!-- lib aimage (image animée) -->
<class name="abutton" stretches="both" height="30" width="30">
</class>

Maintneant que nous avons crée le bouton, faisons un test pour savoir si notre composant (qui est pas encore animé...) fonctionne bien.

Fichier à créer :
Test.lzx.

Code pour utiliser le bouton

<!-- bouton suivant -->
<abutton align="right" valign="middle" resource="Images/droite.gif">
<handler name="onclick">
//on affiche un message dans la console
Debug.write('Click sur le bouton!');
</handler>

Voici le résultat que vous devez
obtenir à ce stade:

Maintenant, nous ajoutons les animations sur le composants. Nous allons faire un effet loupe sur notre bouton quand le souris le survole.

Nous allons utiliser les méthodes onmouseover() et onmouseout() pour gérer l'animation des boutons.
L'animation est gérée par le composant animator qui lui-même sera englobé dans un groupe d'animation (animatorgroup)

Voici le code résultat final que vous devez obtenir pour le composant bouton :

<!-- lib aimage (image animée) -->
<class name="abutton" stretches="both"
onmouseover="this.aover.doStart()"
onmouseout="this.aout.doStart()" height="30" width="30">
<animatorgroup name="aover" start="false" duration="400" process="simultaneous">
<animator attribute="height" from="30" to="35"/>
<animator attribute="width" from="30" to="35"/>
</animatorgroup>

<animatorgroup name="aout" start="false" duration="400" process="simultaneous">
<animator attribute="height" from="35" to="30"/>
<animator attribute="width" from="35" to="30"/>
</animatorgroup>
</class>