JPEGファイルを動的に読み込む
概要
(2003/6/18公開)
FlashMX(プラグインはFlash6)から
JPEGファイルを動的に読み込むことができるようになりました。
これによって今まではswf生成時点で取り込まれていた画像しか扱えなかったのが、
swf生成後でも外部のJPEGファイルを差し替えるだけでFlash内の画像を入れ替えることができます。
左のサンプルを見てください。 下の3つのボタンをクリックすると表示エリアに、それぞれのボタンに対応する画像が表示されると思います。 ここで表示している画像は、swfとは別のJPEGファイルです。
sample1
sample2
sample3
上のリンクをクリックして、実際の画像を見て気づいたと思いますが、 全く異なるサイズの画像を表示したいエリアのサイズに調整して表示することができるのです。
これを応用してつくったのが ギャラリーで公開している「フラッシュアルバム」です。 第三者による投稿はできませんが、画像ファイルは外部のJPEGファイルを読み込み、そのファイル名やコメントはデータベースから動的に取得してます。
他にも、Flashによる投稿型の画像掲示板や、アルバム集、グリーティングカードなど、応用範囲は広いでしょう。
解説
画像の読み込み方法
画像の読み込みはムービークリップに対して読み込みます。
スクリプトはいたって簡単。
です。
このサンプルでは、ボタンをクリックしたときにそれぞれのアクションで、
画像のファイル名を「mcImage」ムービークリップに渡し、それをキックしてます。
「mcImage」ムービークリップの11フレームに以下のスクリプトがあります。
これは「mcJpeg」ムービークリップに対して、
「sImageFileName」変数の内容(ここではファイル名)を 読み込めという意味です。
画像の読み込み待ち
実は上の「loadMovie」だけで読み込み自体はできるのですが、
実際には読み込みの終了を待ちたい場面が多々あると思われます。
※ あとで説明する、サイズの調整も読み込みが終了してないとできません。
サンプルでは、画像を読み込んだムービークリップの「_framesloaded」プロパティを使用して、 読み込み完了チェックをしています。 「_framesloaded」プロパティは読み込み途中は -1 になってるようです。 完了すると 1 になります。
「mcImage」ムービークリップの11フレームに以下のスクリプトがあります。
if (mcJpeg._framesloaded < 1) {
gotoAndPlay(_currentframe-1);
これは、読み込み対象のムービークリップ「mcJpeg」のプロパティ「_framesloaded」が1より小さい間 10フレームと、このチェックのある11フレームを繰り返すことになります。 読み込みが完了すると、次の12フレームに制御が移ります。
画像サイズの調整
読み込みが完了したムービークリップのプロパティ「_width」と「_height」を参照することで、画像の幅と高さを取得することができます。
今回表示するエリアは縦横200x200のサイズです。縦横それぞれについて、画像の縦横に対する割合を求め、小さい方の割合をスケールとしてムービークリップに設定します。
サンプルでは以下のスクリプトで行ってます。
x = cAREA_WIDTH * 100 / mcJpeg._width;
y = cAREA_HEIGHT * 100 / mcJpeg._height;
if (x > y) {
mcJpeg._xscale = scale;
mcJpeg._yscale = scale;
さらに、そのあと表示エリアの中央に表示されるように
mcJpeg._x = (cAREA_WIDTH - mcJpeg._width) / 2;
mcJpeg._y = (cAREA_HEIGHT - mcJpeg._height) / 2;
とすることで、画像が中央に表示されるのです。
※ 「cAREA_WIDTH」「cAREA_HEIGHT」にはあらかじめ両方に200を設定してあります。
ダウンロード
上の解説で使用したサンプルファイルは、
こちらでダウンロードできます。
# このFlaファイルは自由に使用していただいて結構です。
ただしこのまま二次配布することは禁止します。
コメント一覧
No.1 sht
こんにちは、はじめまして。
このFLASHを参考にさせていただき、FLASHの作成を行っているのですが、疑問になった部分が一点あったので質問させて下さい。
//画像サイズ調整
x = cAREA_WIDTH * 100 / mcJpeg._width;
y = cAREA_HEIGHT * 100 / mcJpeg._height;
の部分の
cAREA_WIDTH
を、100倍してから元の画像サイズで割っていますよね?
このcAREA_WIDTHを倍加する倍率、100という数字はどこからでてきたものなのでしょうか。
2008/10/1 14:17
No.2 おがた@管理人
ここで求めたいscaleは「%」。
例えば「cAREA_WIDTH」が200で、
「mcJpeg._width」が500だとすると、
200 / 500 = 0.4
つまり mcJpeg._width を0.4倍すると cAREA_WIDTH に収まるサイズになります。
言い換えると 40% にすると収まるサイズになります。
0.4 x 100 = 40(%)
こんな感じです。
2008/10/2 10:09