xmlPhotogallery: Flash Photo Gallery Template
画像ギャラリーを XMLの編集で表示できる Flashテンプレート 「xmlPhotogallery」 を作成しました。*1
ギャラリータイトルや画像のタイトル、画像クリック時のリンク先を指定可能で、オートプレイやフルスクリーン表示に対応しています。
HTMLファイルを編集することにより、詳細設定を変更できます。
![Sample [fullscreen]](http://atziluth.jp/images/blog/btn_sample_fullscreen_ja.gif){kind=small}
【使用方法】 *2
1. 画像とサムネイルを既定のフォルダ(変更可)へ保存
・画像: images\
・サムネイル: images\thumb\
2. xmlフォルダの "xmlPhotogallery.xml"に、「画像のファイル名」、「タイトル(任意)」、「画像クリック時のリンク先(任意)」を記述
記述例:
<slideNode jpegURL="angelsbone.jpg" title="天使の骨" linkURL="http://atziluth.jp/images/thumb/dca.jpg" />
ex. HTMLファイル 14〜60行目の設定(flashvars)か variables.asを必要に応じて変更
// タイトル・コピーライト表示 ------------------------------------------------
title:"xmlPhotogallery", //ギャラリータイトル
isViewTitle:true, //ヘッダーの表示／非表示
isViewCopyright:true, //コピーライトの表示／非表示
// xml -----------------------------------------------------------------------
xmldir:"xml", //XMLフォルダ名
xmlfile:"xmlPhotogallery.xml", //XMLファイル名
// image ---------------------------------------------------------------------
dir:"images", //画像フォルダ名
thumbdir:"images/thumb", //サムネイル画像フォルダ名
num:0, //読み込む画像の枚数を指定 (0か未指定の場合は全て読み込む)
sec:1, //写真のフェードイン秒数
isshuffle:true, //画像の順番を読み込む度にシャッフルする
israndom:true, //true で最初に表示される画像がランダムになる
autoplay:true, //オートプレイモード ON(true)/OFF(false)切替
interval:5, //オートプレイ時に画像が切り替わる秒間
// thumbnail -----------------------------------------------------------------
thumbwidth:72, //サムネイル画像の横幅
thumbheight:72, //サムネイル画像の縦幅
margin:20, //サムネイル間の間隔
cell:0, //サムネイルの折り返し枚数 (0か未指定の場合はステージサイズに応じて可変となる)
stagemag:"2", //ステージサイズに応じて可変とした場合、ステージサイズの何分の1で折り返すか指定
// layout: 画像 --------------------------------------------------------------
photoposition:"right", //画像を表示する位置
photomarginx:0, //画像と画面端の横間隔
photomarginy:0, //画像と画面端の縦間隔
// layout: サムネイル --------------------------------------------------------
thumbposition:"lefttop", //サムネイル画像を表示する位置
thumbmarginx:18, //サムネイル画像と画面端の横間隔
thumbmarginy:108, //サムネイル画像と画面端の縦間隔
// layout: ナビゲーター ------------------------------------------------------
navigatorposition:"bottom", //ナビゲーターを表示する位置
navigatormarginx:0, //ナビゲーターと画面端の横間隔
navigatormarginy:18, //ナビゲーターと画面端の横間隔
// layout: 画像タイトル ------------------------------------------------------
phototitleposition:"lefttop", //画像タイトルを表示する位置
phototitlemarginx:15, //画像タイトルと画面端の横間隔
phototitlemarginy:"", //画像タイトルと画面端の横間隔
// layout: ヘッダー ----------------------------------------------------------
headerposition:"lefttop", //ヘッダーを表示する位置
headermarginx:15, //ヘッダーと画面端の横間隔
headermarginy:8, //ヘッダーと画面端の横間隔
// layout: コピーライト ------------------------------------------------------
copyrightposition:"lefttop", //コピーライトを表示する位置
copyrightmarginx:18, //コピーライトと画面端の横間隔
copyrightmarginy:52 //コピーライトと画面端の横間隔
【注意事項】
1. アニメーションの動作には、MosesSupposesより配布されている Fuse Kitが必要になります。ご使用の際は下記の手順に従いインストールを進めてください。
[Fuse Kitのダウンロードとインストール]
1. Fuse Kitのサイトにある "Download Fuse 2.1.4"(2009年9月現在)というリンクをクリックし、Fuse Kitをダウンロードします。
2. ダウンロードした zipファイルを解凍し、その中にある "FuseKit2.1.mxp"(Windowsの場合)をダブルクリックして展開します。
3. Adobe® Extension Managerが起動しインストールが開始されますので、完了したら "有効"のチェックボックスをオンにします。
2. サムネイルの画像サイズは、72ピクセル×72ピクセル以上推奨です。デザインの変更は、ライブラリ直下にある "thumbnail"ムービークリップの編集で行うことができます。
【更新履歴】
- 2009.10.01: 詳細設定を variables.asだけでなく HTMLファイルでも行えるようにした (via id:sshi)
- 2009.10.01: ギャラリータイトルを変更できるようにした
- 2009.10.01: ギャラリータイトル・コピーライトの表示／非表示を選択できるようにした
- 2009.10.14: フルスクリーン時のプリローダー表示不具合を修正
