ささきち流 Suzuka & ParaDraw 講座
Suzuka & ParaDraw
TOP
PROFILE
ActionScript Editor
LINK
BBS


フリーのFlash作成ソフト SuzukaParaDraw でFlashな生活を楽しもうというサイトです。
フォトアルバム サンプル&作成方法解説

 

 


サンプルダウンロード
PDRファイル・CSFファイル在中・JPEG在中(少々重いです)
「photo.zip」 87.0 KB (89,100 バイト)



フォトアルバム 作成方法解説

ParaDraw Ver.0.3a4 で作成した絵を,Suzuka Ver.0.6.5 で動作させています。
外部XML&外部JPEGロード型のフォトアルバムです。

フレーム1 は,スクリプト以外何もありません。
外部XMLファイルをロードして,XMLインスタンスに格納後,フレーム2 に進ませています。

// ストップ
stop();
// ------
// Shift-JIS でロード
System.useCodepage = true;
// XMLインスタンスの作成
var myXML = new XML();
// 余分な空白などを削除
myXML.ignoreWhite = true;
// 更新データロード時の動作定義
myXML.onLoad = function() {
	// 次のフレームへ
	_root.nextFrame();
};
// キャッシュ参照防止策
// 今の時刻オブジェクトの作成
var myday = new Date();
// 1970年1月1日0時からのミリ秒数を取得
var mytime = myday.getTime();
// 外部更新データXML を XMLインスタンスにロード
myXML.load("photo.xml"+"?num="+mytime);

 

外部XML の内容は,写真(JPEG)へのファイルパスと,各写真に関しての言葉を書いています。

<?xml version="1.0" encoding="Shift-JIS"?>
<my_photo>
  <photo_node img="./photo/first.jpg"?>1日目。かなり緊張する。</photo_node>
  <photo_node img="./photo/second.jpg"?>2日目。まだ少し緊張する。</photo_node>
  … 略 …
  <photo_node img="./photo/tenth.jpg"?>10日目。終わった。今日は打ち上げ!</photo_node>
</my_photo>

 

ファイルパスはSWFから見たパスではなく,HTMLから見たパスになります。HTML と SWF を違うフォルダに用意する場合は,この点に気を付けてください。
写真の名前は任意です。photo_001,photo_002 … のように連番にする必要はありません。
表示される順序は XML の行(ノード)順で決定します。

MovieClip.loadMovieメソッドの下のサンプルにあるように,データファイルに XML を使用しない方法もあります。

今回のように,[コメント文,JPEGファイル] のようにデータが組になっている場合は,XML の方が扱いやすいので,外部データファイルに XML を使用しています。
データの使い勝手の良さの問題ですから,必ずしも XML を使用しなければならないということはありません。

 

フレーム2 が動作するメイン部分です。
スプライトインスタンスとテキストフィールドインスタンスの階層構造は次のようになっています。

 _root(メインのタイムライン)
  ├ big(写真スプライト)
  │ └ load_mc(読み込みスプライト)
  ├ my_txt(空のダイナミックテキスト)
  └ thum(サムネイルスプライト)
    ├ sL0(縮小させた写真スプライト)
    │ └ load_mc(読み込みスプライト)
    ├ sL1(縮小させた写真スプライト)
    │ └ load_mc(読み込みスプライト)
    ├ sL2(縮小させた写真スプライト)
    │ └ load_mc(読み込みスプライト)
    … 略 … 略 …
    ├ sL9(縮小させた写真スプライト)
    │ └ load_mc(読み込みスプライト)
    ├ sR0(縮小させた写真スプライト)
    │ └ load_mc(読み込みスプライト)
    ├ sR1(縮小させた写真スプライト)
    │ └ load_mc(読み込みスプライト)
    ├ sR2(縮小させた写真スプライト)
    │ └ load_mc(読み込みスプライト)
    … 略 … 略 …
    └sR9(縮小させた写真スプライト)
       └ load_mc(読み込みスプライト)

フレーム2 のスクリプトは次のようになっています。

// XML パスの変数化
var x_r = myXML.childNodes[0];
// 大きい写真をロード
_root.big.load_mc.loadMovie(x_r.childNodes[0].attributes.img);
// 文字の表示
_root.my_txt.text = x_r.childNodes[0].firstChild.nodeValue;
for (i=0; i<=9; i++) {
   // サムネイル写真をロード
   _root.thum["sL"+i].load_mc.loadMovie(x_r.childNodes[i].attributes.img);
   _root.thum["sR"+i].load_mc.loadMovie(x_r.childNodes[i].attributes.img);
   // 各サムネイル写真に固有の番号を定義
   _root.thum["sL"+i].n = i;
   _root.thum["sR"+i].n = i;
   // サムネイル写真ロールオーバー時の動作定義
   _root.thum["sL"+i].onRollOver = function() {
      // 大きい写真をロード
      _root.big.gotoAndPlay(7);
      _root.big.load_mc.loadMovie(x_r.childNodes[this.n].attributes.img);
      // 文字の表示
      _root.my_txt.text = x_r.childNodes[this.n].firstChild.nodeValue;
      // サムネイルの点滅
      this.play();
   };
   _root.thum["sR"+i].onRollOver = _root.thum["sL"+i].onRollOver;
}
//
// サムネールの移動
_root.thum.onEnterFrame = function() {
   // マウスの座標によって変数 spd の値を変える(Max=12)
   this.spd = 12*(Stage.width/2-_root._xmouse)/(Stage.width/2);
   // 実際の移動
   this._x += this.spd;
   // 左右の限界位置に達したとき座標を折りかえす
   if (this._x<=-this._width+Stage.width) {
      this._x += -this._width/2+Stage.width+this._width-Stage.width;
   } else if (this._x>=0) {
      this._x += -this._width/2;
   }
};

おそらく,
マウスの座標によって,無限ループで動くサムネイル写真のしくみが一番謎だと思われるような気がしますが,何と言うことはありません。
同じものを2重に連結して,右や左に動かしているだけです。
1〜10号車まである列車とまるっきり同じ列車を左右に連結させていて,場合に応じてその座標を変えているようなものです。
「1号車」「2号車」…「10号車」「1号車」「2号車」…「10号車」

本当は,サムネイル写真は10枚ありますが,長くなるので4枚で説明したのが次の図です。

無限ループ画像の原理

 

ParaDraw の方で描いた「蚊取り線香」の煙が,延々と上に上がるのも同じ原理です。
煙を1つ描いて,上下に連結させています。その煙を トゥイーン で動かしているだけです。
この方法は本来 Flash とも ActionScript とも全く関係がありません。
今回は,たまたま ActionScript で,そう動くようにプログラミングしただけのことです。
JavaScript や その他言語やソフトなどでも,例えばパノラマ写真の無限回転などにも使えると思います。