Simplest Flash Slideshow ver1.0 « Flash« Trash « ActionScript3.0 プログラミング入門 for designers

サイズに依存しないシンプルな Flash スライドショー「Simplest Flash Slideshow」のバージョン 1.0 です。

「Simplest Flash Slideshow」はフリーの Flash 素材です。商用も含め、無料で自由にご利用いただけます。また、リンク・著作権（クレジット）表記、及びご利用に際しての報告はご不要です。（※ 但し、再配布はご遠慮ください。）
下記よりファイルをダウンロードしてご使用ください。

download ( v1.0.zip / 312,022KB )

ダウンロードした zip ファイルを解凍したフォルダには以下のようなファイルが含まれます。「images」フォルダ内の画像はサンプルです。

v1.0
　┗ data.xml
　┗ index.html
　┗ Main.swf
　┗ static
　　┗ expressInstall.swf
　　┗ flashslideshow.js
　　┗ jquery.js
　　┗ swfobject.js
　┗ images
　　┗ photo01.jpg
　　┗ photo02.jpg
　　┗ photo03.jpg

※ Flash を表示させるために jquery と、 swfobject を使用しています。

以下は、「Simplest Flash Slideshow ver1.0」の設置方法を説明します。

スライドショーに表示される画像の指定は「data.xml」で設定します。

data.xml

<data>
  <delay>
    <second>5000</second>
  </delay>
  <reproduction>
    <loop>0</loop>
  </reproduction>
  <photoList>
    <photo>
      <url>images/photo01.jpg</url>
    </photo>
    <photo>
      <url>images/photo02.jpg</url>
    </photo>
    <photo>
      <url>images/photo03.jpg</url>
    </photo>
  </photoList>
</data>

「data.xml」での設定です。
photoList エレメントに含まれる photo エレメントがひとつの画像を示します。この photo エレメントはいくつでも追加することができます。画像は url エレメントに swf からの相対パスか絶対パスで指定することができます。

delay エレメントに含まれる second エレメントで指定している値は、画像が切り替わるまでの時間を設定しています。デフォルトでは 5000 ミリ秒（5秒）となっています。これは、画像は表示されてから次の画像が表示を開始する（フェードインが始まる）までの時間です。

reproduction エレメントに含まれる loop エレメントでは、スライドショーがループをするかどうかを指定できます。デフォルトの 0 ではスライドショーはループをしません。この値を 1 にするとスライドショーが最後の画像まで行くと最初の画像に戻ってループをし続けます

次は、HTMLコードの設定方法です。head 内に次のコードを追加します。

<script type="text/javascript" src="static/jquery.js"></script>
<script type="text/javascript" src="static/swfobject.js"></script>
<script type="text/javascript" src="static/flashgarelly.js"></script>

上のコードに続いて、Flash のサイズを指定するためのコードを追加します。

<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
	$("#flash").flashgarelly({
		w: 'Flash コンテンツの幅（px）',
		h: 'Flash コンテンツの高さ（px）'
	});
});
/* ]]> */
</script>

Flash のサイズを幅 640 ピクセル、高さ 480 ピクセルに設定したい場合は次のように指定します。このとき「px」は必須です。

w: '640px',
h: '480px'

body 内に次のコードを追加します。このコードを埋め込んだ場所に Flash コンテンツが表示されます。

<div id="flash"></div>

Simplest Flash Slideshow ver1.0

trackback (0)

Post your comment