Faire défiler une image avec OpenLaszlo

Pour faire défiler une image, il vous faudra une "grande" image:
par exemple la salle expo d'un entreprise.

Vous trouverez un fichier zip contenant le code source ainsi que l'image utilisés dans ce tutoriel en fin de page

Pour faire un panorama, renseignez vous sur 2 logiciel :
- Hugin : Montage de panorama sous windows et linux
(Vous aurez besoin de télécharger autopano pour calculer automatiquement les correspondance entre les photos)
Vous trouverez les outils necessaire à cette adresse : http://hugin.sourceforge.net
et pour apprendre a utiliser Hugin :
http://hugin.sourceforge.net/tutorials/two-photos/fr.shtml

La taille de réel de l'mage est de 1775 px de large pour 291px de hauteur.

Puis, comme dans un modéle de boite CSS, il vous faudra définir la taille de la boite dans laquelle vous désirez voir votre image défiler.
Ici, pour notre exemple, la taille choisi sera de 550 px de large et de 200 px de hauteur, donc il s'agira comme dans la plupart des cas d'un défilement horizontal.

Maintenant que nous connaissons la taille de l'image, aisni que la taille de la boite dans laquelle elle va défiler, nous pouvons écrire le code LZX qui va nous permettre de générer notre fichier SWF (flash).
Code LZX pour faire défiler une image avec OpenLaszlo

Tout d'abord, prenons une bonne habitude (inutile dans ce cas mais nécessaire dans beaucoup d'autres), commencez toujours votre fichier LZX par une "entéte" qui vous permet d'afficher correctement les caractéres accentués :

Puis, il faut définir la balise "canvas", premiére balise de tout document XML, votre balise devra contenir les spécifications de taille de votre boite (ici, 480*291) :

Remarquez que la balise "canvas" n'est pas férmée, c'est normal, on la fermera à la fin de notre document.
La balise "title" est facultative, mais il est toujours préférable de la renseigner.

Les deux étapes précédantes sont communes à tous vos document LZX, définissez "l'entête" puis votre "canvas", d'autres éléments comme la couleur de fond peuvent être spécifiées dans la balise "canvas".
Voyons maintenat le code propre au défilement d'une image:

On commence par définir une "view" dont la ressource est l'image que nous souhaitons faire défiler, puis on renseigne "x" avec une formule mathématique :

Cette formule fait appel à un attribut qu'il va nous falloir définir dans notre code LZX :

Cet attribut à une valeur de "-37.6", qu'est ce que ça veut dire, comment arrive on à cette valeur, vous êtes perdus,... Pas d'inquiétude vous allez tout comprendre:
1775- 480 = 1295
1775 est la largeur de l'image, 480est la largeur de la boite de défilement et 1295 est le résultat de ce calcul.
Prenons maintenant la racine carré de 1295 = 35.98... Nous arrondissons ce résultat au décimal inférieur 35.9, libre à vous de le mettre de maniére exacte.

En fait, -37.6 n'est pas la valeur de l'attribut, c'est sa valeur de départ que l'on va faire varier par la suite de notre code LZX :

On fait donc varier la valeur de l'attribut de -35.9 à 35.9.

Il ne nous reste plus qu'à refermer les balises ouvertes :

Voyons le code complet de l'application :

Notre code lzx est complet, transformons le en fichier SWF par le serveur OpenLaszlo en mode SOLO, puis intégrons le à notre page HTML comme un simple fichier Flash!

Voici le résultat :