OpenLaszloで画像のスライドショー

OpenLaszloで画像のスライドショー

OpenLaszloOpenLaszloで画像のスライドショー

下記のサイトにて、スライドショーのサンプルプログラムを見つけたので応用して動作確認してみました。class との値の受け渡しについては、まだドキュメントを読んでいないのでアンチなことしているかもしれません。

サンプル満載!asonのOpenLaszlo入門
画像を任意に指定できるスライドショー

応用したところは、画像の横幅と縦幅も指定できるようにしたのと、外部の画像ファイルを指定しているところです。スライドさせるなら同じ画像サイズの方がベストですが、たまたま手元の画像に同じ大きさの画像がなかったのでバラしてみました。

最初からドキュメントを読んでいくより、上記のサイトの豊富なサンプルを応用しつつ、ドキュメントや API などを参考にして自分で実現したいものを作るのが近道でしょうね。以下は、今回応用したソースです。

<?xml version="1.0" encoding="UTF-8"?>
<canvas width="500" height="500" bgcolor="0xeeeeee" proxied="false"> 
  <class name="slide" opacity="0">
    <image src="${classroot.thisPic}" width="${classroot.w}" height="${classroot.h}" stretches="both"/>
    <attribute name="thisPic" type="string"/>
    <attribute name="nextSlide" type="string"/>
    <attribute name="w" type="string"/>
    <attribute name="h" type="string"/>
    <animator name="show" start="false" attribute="opacity" from="0" to="1" duration="1000" onstop="classroot.sleep.doStart()"/>
    <animator name="sleep" start="false" attribute="opacity" to="1" duration="3000" onstop="classroot.hide.doStart()"/>
    <animator name="hide" start="false" attribute="opacity" from="1" to="0" duration="1500" onstart="eval(classroot.nextSlide).show.doStart()"/>
  </class>
  <slide id="bg01" thisPic="http://example.org/1.jpg" w="100" h="100" nextSlide="bg02" oninit="this.show.doStart();"/>
  <slide id="bg02" thisPic="http://example.org/2.jpg" w="200" h="200" nextSlide="bg03"/>
  <slide id="bg03" thisPic="http://example.org/3.jpg" w="300" h="300" nextSlide="bg04"/>
  <slide id="bg04" thisPic="http://example.org/4.jpg" w="400" h="400" nextSlide="bg05"/>
  <slide id="bg05" thisPic="http://example.org/5.jpg" w="500" h="500" nextSlide="bg01"/>
</canvas>

最終更新日:

関連記事

人気記事

新着情報