html の背景に配置する Flash スライドショー « Flash« Trash « ActionScript3.0 プログラミング入門 for designers

このパッケージは、html の背景を Flash スライドショーにします。

download ( v0.1.zip / 481,885KB )

ダウンロードした zip ファイルを解凍したフォルダには以下のようなファイルが含まれます。

v0.1
　┗ data.xml
　┗ index.html
　┗ bg.swf
　┗ static
　　┗ expressInstall.swf
　　┗ flashgarelly.js
　　┗ jquery.js
　　┗ styles.css
　　┗ swfobject.js
　┗ garelly
　　┗ 001.jpg
　　┗ 002.jpg
　　┗ 003.jpg
　　┗ 004.jpg
　　┗ 005.jpg

「garelly」フォルダ内の画像はサンプルです。読み込まれる画像のサイズ、縦横比はすべて異なっていてもかまいません。画像は、縦横の短い辺を基準に画面サイズにトリミングされた状態で、画面いっぱいに表示されます。

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

gallery.xml

<data>
  <delay>
    <second>5000</second>
  </delay>
  <reproduction>
    <loop>0</loop>
  </reproduction>
  <photoList>
    <photo>
      <url>gallery/001.jpg</url>
    </photo>
    <photo>
      <url>gallery/002.jpg</url>
    </photo>
    <photo>
      <url>gallery/003.jpg</url>
    </photo>
    <photo>
      <url>gallery/004.jpg</url>
    </photo>
    <photo>
      <url>gallery/005.jpg</url>
    </photo>
  </photoList>
</data>

photoList エレメントに含まれる photo エレメントがひとつの画像を示します。画像は url エレメントに swf からの相対パスか、あるいは絶対パスで指定することができます。

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

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

次は、HTMLコードの設定方法です。head 内に次のコードを追加します。
Flashを表示させるために jquery と、 swfobject を使用しています。

<link rel="stylesheet" href="static/styles.css">
<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: '100%',
		h: '100%'
	});
});
/* ]]> */
</script>

次に、body 要素内にあるすべての表示コンテンツを id 名「wapper」と設定した div 要素で囲みます。さらに、 Flash コンテンツを表示するためのコンテナとなるため id 名「flash」と設定した div 要素を id 名「wapper」と設定した div 要素に続いて記述します。

<body>
<div id="wapper">

<!-- コンテンツの中身 -->

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

html の背景に配置する Flash スライドショー

trackback (0)

Post your comment