Table des Matières
Ce tutoriel fournit une description de l'utilisation des ressources multimédias telles que les images, la vidéo et l'audio dans les applications OpenLaszlo. Ce sujet sera approfondi au Chapitre 17, Ressources Multimédias.
Il y a deux façons d'importer une image dans une application OpenLaszlo :
-
en tant que ressource multimédia attachée à une vue,
-
en tant qu'image insérée dans du code HTML
Dans ce tutoriel, nous verrons comment utiliser des ressources attachées à des vues, ce qui est le mécanisme le plus général. Cette technique vous permet d'importer non seulement des images, mais aussi de l'audio, de la vidéo avec chargement progressif et autres médias complexes, dont différents formats non supportés nativement par le lecteur Flash (quand vous fonctionnez en mode proxy, où le Serveur OpenLaszlo traduit les formats).
Par opposition, quand vous insérez une image dans du code HTML, elle doit nécessairement être dans l'un des formats supportés nativement par le lecteur Flash cible. Pour plus de détail sur l'utilisation de la balise <img> à l'intérieur de code HTML, voir le Chapitre 18, Vues de texte .
La capacité d'importer des éléments artistiques ne se réduit pas aux images - vous pouvez créer vos propres systèmes d'affichage aussi.
Dans les applications OpenLaszlo, les vues (<view>) sont l'élément visible fondamental, et les ressources sont les éléments multimédias externes à inclure. Les ressources sont rendues disponibles en étant attachées à des vues. Ainsi avec OpenLaszlo, vous n'insérez pas une image dans une vue, mais vous insérez une vue dont la ressource est une image.
Etudions la façon la plus simple d'inclure un élément artistique (ressource). Dans ce cas, c'est une image GIF :
Exemple 8.1. Utilisation de 'resource'
<canvas width="500" height="80"> <view resource="../resources/smiley.gif"/> </canvas> |
Cette petite application OpenLaszlo charge une image appelée smiley.gif (disponible ici dans le dossier resources, un sous-dossier de celui qui contient l'application).
Pour positionner une image, positionnez la vue qui contient l'image en tant que ressource :
Exemple 8.2. Positionnement d'images
<canvas width="500" height="100">
<view resource="../resources/smiley.gif"/>
<view x="50" y="50" resource="../resources/smiley.gif"/>
</canvas>
|
Nous verrons comment changer la taille de l'image plus tard.
Dans les exemples précédents, nous avons inclus une image venant d'un dossier local au moment de la compilation. Ce peut adapté ou non suivant les applications, c'est pourquoi LZX propose quatre façon de charger des images :
La ressource est ajoutée au reste de l'application quand elle est compilée par le serveur, ce qui augmente le chargement initial, mais permet aux images d'être affichées instantanément.
Les quatre méthodes peuvent donner les mêmes résultats à l'écran :
La ressource n'est pas chargée tant que la vue n'est pas initialisée, le reste de l'application sera donc chargé et il peut y avoir une attente au moment de l'affichage. Le chargement initial sera plus petit puisque les images ne sont pas incluses. Le serveur chargé de la compilation demande l'image (si elle est placée sur un autre serveur) et la redirige vers l'application qui s'exécute déjà sur le poste client.
Exemple 8.5. Référencement absolu
<canvas>
<view resource="http://www.laszlosystems.com/images/smiley.gif">
</canvas>
|
La meilleure façon d'inclure des ressources est généralement d'utiliser un identifiant global (en utilisant la balise <resource>). De cette façon toutes les ressources peuvent être placées en un seul endroit, et si vous avez besoin de changer l'origine d'une ressource ou la ressource elle-même, vous n'avez besoin de le faire qu'une fois. (Dans les chapitres suivants, nous verrons ce qui peut amener à inclure des ressources autrement).
Exemple 8.7. Etirer des ressources
<canvas width="500" height="200"> <resource name="sourFace" src="../resources/sourface.png"/> <resource name="smileyFace" src="../resources/smiley.gif"/> <view resource="smileyFace" x="10" y="10"/> <view resource="sourFace" x="50" y="10"/> <view x="10" y="50" width="363" height="242" stretches="both" resource="../resources/sunset.jpg"/> </canvas> |
OpenLaszlo supporte les fichiers GIF, JPEG et PNG. Ils peuvent être redimensionnés en positionnant l'attribut stretches de la vue portant la ressource à both, width ou height.
Les ressources peuvent être multi-images, ce qui signifie qu'une ressource est en fait composée de plusieurs ressources, chacune d'elle pouvant être affichée à une moment donné.
La syntaxe pour faire cela est la suivante :
Exemple 8.8. Ressources multi-images
<canvas width="500" height="100">
<resource name="face">
<frame src="../resources/sourface.png"/>
<frame src="../resources/smiley.gif"/>
</resource>
<view x="150" y="50" resource="face"
onclick="this.setResourceNumber(2);"/>
</canvas>
|
Les ressources incluses à l'intérieur de la balise 'resource' sont numérotées en commençant à 1.
Comme vous pouvez le voir, OpenLaszlo supporte les formats GIF, JPEG and PNG. Ils peuvent tous être redimensionnés en positionnant l'attribut stretches de la vue de la ressource à both, width ou height.
Vous pouvez utiliser les fichiers SWF comme n'importe quelle ressource, qu'ils soient animés ou non :
Exemple 8.9. Utiliser des fichiers swf
<canvas width="500" height="100"> <view resource="../resources/still_swf.swf"/> <view x="150" y="20" resource="../resources/anim_swf.swf"/> </canvas> |
Par défaut, toute animation s'exécutera indéfiniment. Vous pouvez contrôler l'animation d'un fichier SWF à partir du script de votre application. Par exemple, pour l'empécher de s'exécuter, nous pouvons lui demander de s'arrêter quand la vue s'initialise :
<view x="150" y="20" resource="anim_swf.swf" oninit="this.stop();"/> |
Exemple 8.10. Arrêter des animations swf
<canvas width="500" height="150">
<view name="spinningClock" resource="../resources/clock.swf"
onclick="this.stop();"
clickable="true"/>
</canvas>
|
L'animation s'arrête ici quand on appuie sur le bouton. Le gestionnaire d'événements onclick sera décrit dans le tutoriel sur l'écriture de script.
Au lieu de simplement utiliser stop(), nous aurions pu faire passer en argument de la méthode stop() le numéro de l''image' (frame) où elle doit s'arrêter. De plus, nous aurions pu utiliser la méthode play() (à qui on peut aussi faire passer un argument 'frame') pour jouer à partir d'une certaine 'image' (frame).
Nous ne pouvons pas vraiment aller plus loin sans étudier l'écriture de script, mais voici quelques uns des attributs et méthodes de la balise <view> associés à la gestion des ressources :
Ces méthodes et d'autres bibliothèqes sont décrites plus précisément au Chapitre 17, Ressources Multimédias.