Faire défiler une image sans OpenLaszlo
Faire défiler une image peut s'avérer être un casse tête pour tout webmaster débutant ou pour tout webmaster aussi radin que moi pour qui il est hors de question d'acheter un logiciel couteux!
Vous pouvez essayer avec JavaScript ou avec des applications AJAX, mais je vous conseille OpenLaszlo qui nous permet de faire défiler une image de maniére trés simple et gratuite, encore une fois, vive l'Open Source!
Faire défiler une image avec OpenLaszlo
Pour faire défiler une image, il vous faudra une "grande" image:
La taille de réel de cette image est de 1967 px de large pour 200 px 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 l'exemple de l'hôtel du golfe, nous avons choisis une boite 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 :<?xml version="1.0" encoding="ISO-8859-1" ?>
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, 550*200) :<canvas title="Hôtel du Golfe" width="550" height="200">
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:<view resource="panoramique.jpg" x="${0-(this.sqrtx * this.sqrtx)}">
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 :x="${0-(this.sqrtx * this.sqrtx)}
Cette formule fait appel à un attribut qu'il va nous falloir définir dans notre code LZX :<attribute name="sqrtx" value="-37.6"/>}
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:
1967 - 550= 1417 1967 est la largeur de l'image, 550 est la largeur de la boite de défilement et 1417 est le résultat de ce calcul.
Prenons maintenant la racine carré de 1417 = 37.65... Nous arrondissons ce résultat au décimal inférieur 37.6, 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 :<animator attribute="sqrtx" from ="-37.6" to="37.6" duration="90000" repeat="Infinity" motion="linear"/>
On fait donc varier la valeur de l'attribut de -37.6 à 37.6.
Il ne nous reste plus qu'à refermer les balises ouvertes :
</view>
</canvas>
Voyons notre code complet :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<canvas title="Hôtel du Golfe" width="550" height="200">
<view resource="panoramique.jpg" x="${0-(this.sqrtx * this.sqrtx)}">
<attribute name="sqrtx" value="-37.6"/>
<animator attribute="sqrtx" from ="-37.6" to="37.6" duration="90000" repeat="Infinity" motion="linear"/>
</view>
</canvas>
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!
Voir le résultat : hôtel du golfe