以前取り上げた JW FLV Media Playerのシリーズの中に、
画像に特化したJW Image RotatorというFlashツールがあったので、
それを利用してスライドショーを作ってみました。

JW Image Rotator

以下、簡単な解説。
まず、サイトからファイルをダウンロードします。
解凍するといくつかファイルが出てくるのですが、
必要なのは、swfobject.jsimagerotator.swfだけです。
swfobject.jsは汎用ライブラリですし、既に利用していればそれを流用すればいいかと思います。

また、上記以外に、スライドショーに表示していく画像を設定したファイルが必要です。
サンプルは、解凍したファイルの中の、madrid.xmlです。


書式はこんな感じ。

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>

    <track>
      <title>Grass by Night</title>
      <creator>Jeroen Wijering</creator>
      <location>madrid1.jpg</location>
      <info>http://www.jeroenwijering.com</info>
    </track>

    <track>
      <title>画像タイトル</title>
      <creator>作者名</creator>
      <location>画像の場所</location>
      <info>リンク先</info>
    </track>

  </trackList>
</playlist>


これを用意したら、実際に貼ってみましょう。

Get the Flash Player to see this rotator.


できました。

この場合書いたスクリプトはこれだけ。
README.HTMLにあったものを少し変えただけです。

<div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/assets/2008/05/jw/jwir.xml");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container");
</script>

なかなかにシンプルです。




カスタマイズ

それでは少しカスタマイズ。



エフェクトを変更する

まず、スライドショーで重要なのが次の写真へ移動するときのエフェクト。
JW Image Rotatorでは、下記の9つから選択できるようになっています。

  1. random(デフォルト)
  2. fade
  3. bgfade
  4. blocks
  5. bubbles
  6. circles
  7. flash
  8. fluids
  9. lines(slowfade)

これを、<script>~</script>の中に記述してやるだけです。

s1.addVariable("transition","fade");

それぞれは以下のような感じになります。


1. random

先ほど試しに貼ってみたのがrandomです。
デフォルトでは、この設定になっています。

2. fade

Get the Flash Player to see this rotator.
<div id="container_fade"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/assets/2008/05/jw/jwir.xml");
  s1.addVariable("transition","fade");
s1.addVariable("width","400"); s1.addVariable("height","300"); s1.write("container_fade"); </script>

3. bgfade

Get the Flash Player to see this rotator.
<div id="container_bgfade"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/assets/2008/05/jw/jwir.xml");
  s1.addVariable("transition","bgfade");
s1.addVariable("width","400"); s1.addVariable("height","300"); s1.write("container_bgfade"); </script>

4. blocks

Get the Flash Player to see this rotator.
<div id="container_blocks"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/assets/2008/05/jw/jwir.xml");
  s1.addVariable("transition","blocks");
s1.addVariable("width","400"); s1.addVariable("height","300"); s1.write("container_blocks"); </script>

5. bubbles

Get the Flash Player to see this rotator.
<div id="container_bubbles"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/assets/2008/05/jw/jwir.xml");
  s1.addVariable("transition","bubbles");
s1.addVariable("width","400"); s1.addVariable("height","300"); s1.write("container_bubbles"); </script>

6. cicles

Get the Flash Player to see this rotator.
<div id="container_circles"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/assets/2008/05/jw/jwir.xml");
  s1.addVariable("transition","circles");
s1.addVariable("width","400"); s1.addVariable("height","300"); s1.write("container_circles"); </script>

7. flash

Get the Flash Player to see this rotator.
<div id="container_flash"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/assets/2008/05/jw/jwir.xml");
  s1.addVariable("transition","flash");
s1.addVariable("width","400"); s1.addVariable("height","300"); s1.write("container_flash"); </script>

8. fluids

Get the Flash Player to see this rotator.
<div id="container_fluids"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/assets/2008/05/jw/jwir.xml");
  s1.addVariable("transition","fluids");
s1.addVariable("width","400"); s1.addVariable("height","300"); s1.write("container_fluids"); </script>

9. lines(slowfade)

Get the Flash Player to see this rotator.
<div id="container_lines"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/assets/2008/05/jw/jwir.xml");
  s1.addVariable("transition","lines");
s1.addVariable("width","400"); s1.addVariable("height","300"); s1.write("container_lines"); </script>

それぞれお好みでどうぞ。



ローテーションする時間

次に重要なのは、ローテーションする際の時間、でしょうか。
これは、次のような値で設定できます。

s1.addVariable("rotatetime","3");

単位は秒。デフォルトでは5秒に設定されています。
試しに1秒で移動するようにしてみると…こんな感じ。

Get the Flash Player to see this rotator.
<div id="container_r1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/assets/2008/05/jw/jwir.xml");
  s1.addVariable("rotatetime","1");
s1.addVariable("width","400"); s1.addVariable("height","300"); s1.write("container_r1"); </script>

エフェクトの時間も秒数に入るようです。
1秒だとちょっと短すぎるかもしれませんね。




ナビゲーションを消す。

ナビゲーションはデフォルトではtrue(表示する)になっています。
これを消す場合には、以下の要素をスクリプトに追加します。

s1.addVariable("shownavigation","false");

Get the Flash Player to see this rotator.
<div id="container_sn"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/assets/2008/05/jw/jwir.xml");
  s1.addVariable("shownavigation","false");
s1.addVariable("width","400"); s1.addVariable("height","300"); s1.write("container_sn"); </script>

なおナビゲーションを消しても、
画像をクリックすることで次の画像へ移動することが出来ます。




シャッフルさせる/順番通りに表示する

デフォルトではtrue(シャッフルさせる)になっています。
プレイリストの順番通りに表示させる場合には、以下の要素をスクリプトに追加します。

s1.addVariable("shuffle","false");

Get the Flash Player to see this rotator.
<div id="container_sf"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/assets/2008/05/jw/jwir.xml");
  s1.addVariable("shuffle","false");
s1.addVariable("width","400"); s1.addVariable("height","300"); s1.write("container_sf"); </script>

ちなみにマニュアルではなぜかデフォルトがfalse(順番通りに表示する)となっていますが、
これは多分間違いで、実際にはtrue(シャッフルさせる)がデフォルトです。



その他の設定

基本的な設定については、公式サイトのマニュアルを見てみてください。

JW | Supported Flashvars(英語)

背景色の変更や、autostartの変更も可能です。




複数設置させる際のポイント

先述のJW FLV Media Playerもそうでしたが、
このFlashは同一ページに複数設置することが容易にできます。

その場合、Flashを表示する領域のIDと、
スクリプト内のID指定とを設置する物ごとに書き換えてあげればOKです。

<div id="container_sf"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/assets/2008/05/jw/jwir.xml");
  s1.addVariable("shuffle","false");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container_sf");
</script>




設置後、エラーが表示されるときは。

次の点をチェックしてみてください。

  • ファイルが正しく配置されているかどうか
  • スクリプトの記述が正しいかどうか
  • プレイリストの記述が正しいかどうか
  • idが既存の要素(例えばcontainerとかheaderとか)とかぶっていないかどうか

特にidについて、ページ内の他要素とのかぶりは案外盲点です。
自信がない場合には、何か一意のid名を付けると良いかもしれません。
(okinawa_travel_200707とか)