トップへ戻るニュースフォーラムFLASH-ML 過去ログBak@Flaダウンロードよくある質問と答
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー
メイン
   迷える子羊の部屋【初心者専用】
     写真をタイル状に表示する
投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
dropkick
Åê¹ÆNo.36398
投稿日時: 2007-11-22 2:20
新米
居住地:
投稿: 7
使用環境:
MacOS10,Flash8
写真をタイル状に表示する
初めての投稿になります。よろしくお願いします。

写真(サムネイル)を画面いっぱいにタイル状に並べ、
クリックすると拡大写真とコメントなどが表示されるような
コンテンツを作ろうと思っております。

仕様としては、以下のような感じを想定しています。

・画面サイズを所得し、適切なサムネイル枚数を計算し、表示。
・ナビゲーションより「next」「back」をクリックすることで
 サムネイルを総差し替え。例えばデフォルトが1?20まで
 表示されたとしたら、「next」をクリックすると
 21?40までが表示されるといった感じ。

現状画面上に外部読み込みの写真をタイル状に表示させることは
できたのですが、そこから「next」ボタンをクリックしたときの
挙動をどう作ればよいのかわからず、悩んでおります。

現状までのスクリプトは以下のような感じです。

var imgWrap:MovieClip;
var stageW:Number = Stage.width;
var stageH:Number = Stage.height;
var imgW:Number = 150;
var imgH:Number = 150;
var cols:Number;
var rows:Number;
var imgNum:Number;
var mcl:MovieClipLoader;


function setPhoto() {
cols = Math.ceil(stageW / imgW);
rows = Math.ceil(stageH / imgH);
imgNum = cols * rows;
for (var i:Number = 0; i < imgNum; i++) {
var X:Number = i % cols;
var Y:Number = Math.floor(i / cols);
var def = {_x:imgW * X, _y:imgH * Y };
imgWrap = this.attachMovie("imgWrap", "imgWrap" + i, 100 + i, def);
mcl = new MovieClipLoader();
mcl.loadClip("imgs/s/img" + i + ".jpg", imgWrap.img);
}
}


まだFlashでの経験も浅く、粗末なスクリプトですが、
何卒ご教授いただけますと幸いです。

よろしくお願いいたします。
ひろゆき
Åê¹ÆNo.36400
投稿日時: 2007-11-22 2:40
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: 写真をタイル状に表示する
引用:
dropkickさんは書きました:
仕様としては、以下のような感じを想定しています。

・画面サイズを所得し、適切なサムネイル枚数を計算し、表示。
・ナビゲーションより「next」「back」をクリックすることで
 サムネイルを総差し替え。例えばデフォルトが1?20まで
 表示されたとしたら、「next」をクリックすると
 21?40までが表示されるといった感じ。

つまり、ページごとにどうやって表示するのかということになろうかと思いますが、
1ページに表示する画像の枚数が固定されている場合と、
そうではなく、1ページに表示する画像の枚数が固定されていない場合では、
大きく異なると思いますが、そのあたりのことは、どのようにされるのでしょう?

例えば、第1ページ目に1?20(5*4)の画像が表示されているとして、
ウィンドウサイズを変更した場合、どのような処理をするのか、
ウィンドウサイズの変更に伴い、1ページの画像枚数も変動させるのであれば、
そこも考慮した設計にする必要があるように思います。

ということで、「画面いっぱい」という場合の「画面」が、
固定されたswfステージサイズを指しているのか、
ウィンドウいっぱいに表示された100%表示のswfを指しているのか、
明確にされた方が良いように思います。


----------------
質問する際は、回答者に具体的な情報を与えてください。

dropkick
Åê¹ÆNo.36406
投稿日時: 2007-11-22 11:39
新米
居住地:
投稿: 7
使用環境:
MacOS10,Flash8
Re: 写真をタイル状に表示する
言葉が足らずすみません。

引用:

1ページに表示する画像の枚数が固定されている場合と、
そうではなく、1ページに表示する画像の枚数が固定されていない場合では、
大きく異なると思いますが、そのあたりのことは、どのようにされるのでしょう?

1ページに表示させる画像枚数は固定ではなく、
ウィンドウ幅にあわせて、適切な枚数を表示させる想定です。
またブラウザをリサイズした際には、
そのリサイズにあわせて、画像を再描画しようと考えております。

引用:

固定されたswfステージサイズを指しているのか、
ウィンドウいっぱいに表示された100%表示のswfを指しているのか、
明確にされた方が良いように思います。

固定されたswfではなくウィンドウいっぱいに表示された、
100%のswfの中に、画像を表示させようと考えています。

その他の仕様としては、以下を想定しております。

・ヘッダー、フッター領域を確保しそれ以外の領域に
 写真を隙間なくタイル上に表示。
・読み込み可能な画像の総数と現在表示している画像の枚数を表示。
例)20 /350 → 350枚中の20枚を表示していという意味です。
・写真のサムネイルをクリックすると、
 写真の拡大画像と撮影日、コメントなどが表示される。
 撮影日、コメントは外部のxmlで管理。
 (この辺は今回の質問にあまり関係ないかもしれません。。)


よろしくお願いいたします。
ひろゆき
Åê¹ÆNo.36411
投稿日時: 2007-11-22 15:07
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: 写真をタイル状に表示する
言葉足らずということではないのですが、
想像してみると、1ページの枚数が可変だという場合に、
ページ移行の際の処理のしかたがいまひとつ分かりません。

例えば、トータルで350枚あったとします。
1ページあたり30枚表示できているとします。

この場合、nextボタンを押していくと、次のようになりますね?
1ページ目 1?30
2ページ目 31?60
3ページ目 61?90

さて、ここで、ウィンドウを広げて、
1ページあたり35枚表示されたとします。
つまり、3ページ目は、61?95 の写真が表示されます。

この場合、nextボタンを押していくときは、次のようになりますね?
3ページ目 61?95
4ページ目 96?130
5ページ目 131?165


しかし、prevボタンを押していくときは、どのようにするのでしょう?
3ページ目 61?95
2ページ目 25?60
1ページ目 1?35
でしょうか?
# 個人的には、1ページ目と2ページ目で、
# 25?35がかぶって表示されているのは、気持ち悪いです。

つまり、1ページあたりの枚数が固定ではなく可変であるため、
prevボタンは、1ページ目では無効にするという考えでは、
「ページの枚数分もどる」というルールでは、ページ移行ができません。

そこで、1ページ目でも prevボタンを有効にして、
350へループするような形にすることも考えられますが、
その場合、番号がどんどんズレていくので、
1?30 あるいは、1?35 というページに、出会うことが難しくなります。


----------------
質問する際は、回答者に具体的な情報を与えてください。

dropkick
Åê¹ÆNo.36416
投稿日時: 2007-11-22 22:22
新米
居住地:
投稿: 7
使用環境:
MacOS10,Flash8
Re: 写真をタイル状に表示する
すいません、そこまでつめきれておりませんでした。

今一番私の考えに近いものとしては以下のような仕様かと思います。

たとえば1ページ30枚表示、総数は360枚とします。
引用:

1ページ目:01?30 30/360 ↓next
2ページ目:31?60 60/360 ↓next
3ページ目:61?90 90/360 ←ここが表示されています。

このとき表示されているのが3ページ目だとして
ウィンドウの大きさを変え、1ページ40枚表示できるようにします。
そうすると以下の用に変化するのがよいのかと思いました。
引用:

1ページ目:01?40 40/360
2ページ目:41?80 80/360
3ページ目:81?120 120/360 ←ここが表示されています

3ページ目でウィンドウをリサイズした時点で、一度画像を読み込みなおし、
自動的に1、2ページ目の画像枚数を計算し、
3ページ目の画像(81?120)を表示するというのを考えております。

この仕様であれば、3ページ目からprevしても、ダブらずに前ページに
戻れると思うですがいかがでしょうか。
仕様的におかしいでしょうか?

ご教授いただけますと助かります。

ひろゆき
Åê¹ÆNo.36417
投稿日時: 2007-11-23 1:53
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: 写真をタイル状に表示する
引用:
dropkickさんは書きました:
3ページ目でウィンドウをリサイズした時点で、一度画像を読み込みなおし、
自動的に1、2ページ目の画像枚数を計算し、
3ページ目の画像(81?120)を表示するというのを考えております。

そうすると、リサイズするたびに、画像を読み込みし直すということになりますね。
負荷がかかりすぎませんか?

あと、3ページ目だと、それほどの違和感はないように思えますが、
例えば、10ページ目(271?300)を見ていて、リサイズすると、
(361?400)に、移行することになりますが、
これって、おかしくありませんか?
リサイズしただけで、見ていた画像が1つもなくなるばかりか、
どこに飛んだか分からなくなると思いますが。


----------------
質問する際は、回答者に具体的な情報を与えてください。

dropkick
Åê¹ÆNo.36420
投稿日時: 2007-11-23 2:00
新米
居住地:
投稿: 7
使用環境:
MacOS10,Flash8
Re: 写真をタイル状に表示する
そうですね、ひろゆきさんのおっしゃるとおり、
仕様的にむりがあるのかもしれません。。

画面サイズによって表示枚数を変更するのではなく、
はじめから枚数を決めたほうがよいのかもしれません。。
ひろゆき
Åê¹ÆNo.36428
投稿日時: 2007-11-23 13:33
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: 写真をタイル状に表示する
引用:
dropkickさんは書きました:
画面サイズによって表示枚数を変更するのではなく、
はじめから枚数を決めたほうがよいのかもしれません。。

画像の枚数は、最初に開かれたステージサイズに合わせて、
それ以降は、固定するとして。

次に考えておかなければならないのは、ページを移行した際に、
画像をどのように読み込むか、です。

前もって、全部の枚数分(例えば、350)のムービークリップを用意しておき、
そこにページ移行で、画像を読み込み、
同じページにもどってくる際には、
読み込みをせずに、すでに読み込んでいるものを再利用するのか。

あるいは、1ページ分(例えば、30)のムービークリップを用意しておき、
ページ移行のたびに、画像を読み込んでいくようにするのか。

前者の場合は、
MCを順々にロードすることができません」のようなものが
例として挙げられるでしょうか。
ただし、この場合は、画像の枚数が多い場合には、不向きな気がしますが、
ページ移行の際に、フェードイン・フェードアウトなどのアクションをつけるのであれば、
参考にできるかと思います。


あまり考えずに、行くと、こんな感じでしょうか。
// imgWrap には、ムービークリップ(インスタンス名: img) を配置。

var stageW:Number = Stage.width;
var stageH:Number = Stage.height;
var imgW:Number = 150;
var imgH:Number = 150;
var mcl:MovieClipLoader = new MovieClipLoader();
var pageID:Number = 0;
var cols:Number = Math.ceil(stageW / imgW);
var rows:Number = Math.ceil(stageH / imgH);
var imgNum:Number = cols * rows;

function setPhoto(pageID:Number) {
	for (var i:Number = 0; i < imgNum; i++) {
		var X:Number = i % cols;
		var Y:Number = Math.floor(i / cols);
		var def:Object = {_x: imgW * X, _y: imgH * Y};
		var imgWrap:MovieClip = this.attachMovie("imgWrap", "imgWrap" + i, 100 + i, def);
		var filePath:String = "imgs/s/img" + (imgNum*pageID + i) + ".jpg";
		mcl.loadClip(filePath, imgWrap.img);
	}
}

prevBtn.onRelease = function():Void {
	pageID--;
	setPhoto(pageID);
};
nextBtn.onRelease = function():Void {
	pageID++;
	setPhoto(pageID);
};


----------------
質問する際は、回答者に具体的な情報を与えてください。

dropkick
Åê¹ÆNo.36435
投稿日時: 2007-11-24 18:57
新米
居住地:
投稿: 7
使用環境:
MacOS10,Flash8
Re: 写真をタイル状に表示する
ひろゆきさん

サンプルソースありがとうございました。大変参考になりました。
また画像の読み込みかたについてはひろゆきさんがおっしゃっていた1ページ分のMCを用意しておき、
ページ移行の度に画像を読み込むタイプで考えてみました。

以下が考えたソースなのですが、ページ内で画像を読み込み途中に、
「next」「prev」ボタンを押すと次ページ、前ページで画像が途中からしか読み込まれず悩んでおります。

現状できている機能としては、以下になります。

・初回表示時のウィンドウサイズを取得し、適切な画像表示枚数を計算→表示。
 →以降ブラウザをリロード&リサイズしないかぎり、1ページ内の画像表示枚数は固定です。
・画像がページ内に全て表示された状態での「next」「prev」機能
 →「next」「prev」ボタンを押すごとに現状表示している画像を一度削除し、
  次の画像を読み込み、表示させるようにしております。
・画像が一枚づつフェードインする機能

ご意見いただけますと幸いです。

_rootの1フレーム--index.fla--
var pageID:Number = 0;
var myphoto:com.LoadShow = new com.LoadShow(_root);
var defPrev:Object = {_x:100, _y:200};
var defNext:Object = {_x:200, _y:200};
var prevBtn:MovieClip = this.attachMovie("prevBtn", "prevBtn", 200, defPrev);
var nextBtn:MovieClip = this.attachMovie("nextBtn", "nextBtn", 210, defNext);
prevBtn.onRelease = function():Void  {
	if (pageID < 0) {
		pageID = 0;
	} else {
		pageID--;
	}
	myphoto.setPhoto(pageID);
};
nextBtn.onRelease = function():Void  {
	pageID++;
	myphoto.setPhoto(pageID);
};



LoadShowクラス--com/LoadShow.as--
class com.LoadShow {
	var stageW:Number = Stage.width;
	var stageH:Number = Stage.height;
	var imgW:Number = 150;
	var imgH:Number = 150;
	var mc:MovieClip;
	var cols:Number;
	var rows:Number;
	var fadeTimer:Number;
	var beforeID:Number;
	var imgNum:Number;
	var pageID:Number = 0;
	var n:Number = 0;
	var t:Number = 0;
	var categoryNO:Number = 0;
	//
	//コンストラクタ
	function LoadShow(targetMC:MovieClip) {
		mc = targetMC;
		setPhoto(pageID);
	}
	function setPhoto(pageID:Number) {
		cols = Math.ceil(stageW / imgW);
		rows = Math.ceil(stageH / imgH);
		imgNum = cols * rows;
		if (categoryNO != undefined) {
			if (pageID > categoryNO) {
				beforeID = pageID - 1;
			} else {
				beforeID = pageID + 1;
			}
		}
		categoryNO = pageID;
		var mcl:MovieClipLoader = new MovieClipLoader();
		for (var i:Number = 0; i < imgNum; i++) {
			var X:Number = i % cols;
			var Y:Number = Math.floor(i / cols);
			var def:Object = {_x:imgW * X, _y:imgH * Y, _alpha:0};
			if (beforeID != undefined) {
				var imgDelWrap:MovieClip = mc["imgWrap" + (imgNum * beforeID + i)];
				imgDelWrap.removeMovieClip();
			}
			var imgWrap:MovieClip = mc.attachMovie("imgWrap", "imgWrap" + (imgNum * pageID + i), (imgNum * pageID + i), def);
			var filePath:String = "imgs/s/img" + (imgNum * pageID + i) + ".jpg";
			mcl.loadClip(filePath, imgWrap.img);
		}
		clearInterval(fadeTimer);
		fadeTimer = setInterval(this, "fadeIn", 100, pageID);
	}
	function fadeIn(pageID:Number):Void {
		var target:MovieClip = this.mc["imgWrap" + (imgNum * pageID + n)];
		target.onEnterFrame = function():Void  {
			this._alpha += 5;
			if (this._alpha >= 100) {
				this._alpha = 100;
				delete this.onEnterFrame;
			}
		};
		n++;
		if (n >= imgNum) {
			clearInterval(fadeTimer);
			n = 0;
		}
	}
}





ひろゆき
Åê¹ÆNo.36439
投稿日時: 2007-11-24 20:28
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: 写真をタイル状に表示する
画像の読み込み中に、ボタンが押せるようにしているのであれば、
ボタンを押した際に、fadeInなどで管理しているはずの数値をリセットしてやる必要があるように思います。
つまり、ボタンを押しても、前の続きを行おうとした結果が、今回の動作だと思います。

ともかく、一度にいろいろなスクリプトを詰め込もうとしたうえで、
さらに、カスタム・クラスを用いようとしているために、
訳が分からないことになっている気がします。

もうちょっとシンプルにやった方が良いのではないでしょうか?
そうでないと、どこで躓いているのか見当すらつかないと思います。

引用:
dropkickさんは書きました:
以下が考えたソースなのですが、ページ内で画像を読み込み途中に、
「next」「prev」ボタンを押すと次ページ、前ページで画像が途中からしか読み込まれず悩んでおります。

少なくとも、怪しそうな n, fadeTimer あたりを、trace して、
期待通りの動きをしていないことを確認された方が良いように思います。


また、これだと、複数の MovieClipLoader が生成されますが、
その必要はないのではないでしょうか?


実際に、動かしたわけではないので、動作保証はできませんが、
こんな感じでしょうか。
class com.LoadShow {
	var stageW:Number = Stage.width;
	var stageH:Number = Stage.height;
	var imgW:Number = 150;
	var imgH:Number = 150;
	var mc:MovieClip;
	var cols:Number;
	var rows:Number;
	var fadeTimer:Number;
	var beforeID:Number;
	var imgNum:Number;
	var pageID:Number = 0;
	var n:Number = 0;
	//var t:Number = 0;
	var categoryNO:Number = 0;
	var mcl:MovieClipLoader;

	function LoadShow(targetMC:MovieClip) {
		mc = targetMC;
		mcl = new MovieClipLoader();
		setPhoto(pageID);
	}

	function setPhoto(pageID:Number) {
		n = 0;
		cols = Math.ceil(stageW / imgW);
		rows = Math.ceil(stageH / imgH);
		imgNum = cols * rows;
		if (categoryNO != undefined) {
			if (pageID > categoryNO) {
				beforeID = pageID - 1;
			} else {
				beforeID = pageID + 1;
			}
		}
		categoryNO = pageID;
		//var mcl:MovieClipLoader = new MovieClipLoader();
		for (var i:Number = 0; i < imgNum; i++) {
			var X:Number = i % cols;
			var Y:Number = Math.floor(i / cols);
			var def:Object = {_x:imgW * X, _y:imgH * Y, _alpha:0};
			/*
			if (beforeID != undefined) {
				var imgDelWrap:MovieClip = mc["imgWrap" + (imgNum * beforeID + i)];
				imgDelWrap.removeMovieClip();
			}
			var imgWrap:MovieClip = mc.attachMovie("imgWrap", "imgWrap" + (imgNum * pageID + i), (imgNum * pageID + i), def);
			*/
			var imgWrap:MovieClip = mc.attachMovie("imgWrap", "imgWrap" + i, i, def);
			var filePath:String = "imgs/s/img" + (imgNum * pageID + i) + ".jpg";
			mcl.loadClip(filePath, imgWrap.img);
		}
		clearInterval(fadeTimer);
		fadeTimer = setInterval(this, "fadeIn", 100, pageID);
	}
	function fadeIn(pageID:Number):Void {
		//var target:MovieClip = this.mc["imgWrap" + (imgNum * pageID + n)];
		var target:MovieClip = this.mc["imgWrap" + n];
		target.onEnterFrame = function():Void  {
			this._alpha += 5;
			if (this._alpha >= 100) {
				this._alpha = 100;
				delete this.onEnterFrame;
			}
		};
		n++;
		if (n >= imgNum) {
			clearInterval(fadeTimer);
			n = 0;
		}
	}

}


----------------
質問する際は、回答者に具体的な情報を与えてください。

(1) 2 »
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

投稿するにはまず登録を
 
Copyright (C) 2003 FLASH-japan. All rights reserved.
Powered by Xoops