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

パスワード:


パスワード紛失

新規登録
メインメニュー
メイン
   コーダーズルーム【スクリプト系】
     拡大・縮小とドラッグ移動に制限をかけるには・・・?
投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
Sushitaro
Åê¹ÆNo.23961
投稿日時: 2006-2-23 1:24
新米
居住地: 東京
投稿: 7
使用環境:
Mac OS-X 10.3 Flash MX
拡大・縮小とドラッグ移動に制限をかけるには・・・?
初めまして。

いま進めている案件でとても役に立ちそうなスクリプトを発見しまして
非常に助かっております。そこで、大変あつかましいお願いなのですが
こちらのスクリプトで「拡大・縮小の制限」と「移動の制限」をかけるには
どのように修正すればよろしいでしょうか。

※2004年5月に野中さんが投稿されていたものです。

// MovieClip: 移動/拡大/縮小したいシンボル
// 第1フレームアクション
var nZoomRate = 10;
this.onPress = function() {
var nX = _xmouse;
var nY = _ymouse;
if (Key.isDown(Key.CONTROL)) {
this.xZoomIn(nX, nY);
} else if (Key.isDown(Key.SHIFT)) {
this.xZoomOut(nX, nY);
} else {
this.startDrag();
}
};
this.onRelease = this.onReleaseOutside=function () {
this.stopDrag();
};
function xZoomIn(nX, nY) {
this.xZoom(nZoomRate, nX, nY);
}
function xZoomOut(nX, nY) {
this.xZoom(-nZoomRate, nX, nY);
}
function xZoom(nZoom, nX, nY) {
var oStart = {x:nX, y:nY};
this.localToGlobal(oStart);
_xscale = _yscale += nZoom;
var oEnd = {x:nX, y:nY};
this.localToGlobal(oEnd);
_x += oStart.x-oEnd.x;
_y += oStart.y-oEnd.y;
}

これを元に、ムービーサイズが700x600で、起点からの座標がx=32、y=60に
635x450の表示エリアを設定しておりますので、この635x450の範囲から
はみ出さないようにドラッグできて、なおかつ拡大は3倍まで、縮小は最初の
表示サイズまでに押さえるにはどう修正すればよろしいでしょうか。

画像のサイズは1350x954ピクセルで、始めは小さく(1/3サイズ)に縮めて
置いてあります。

何とぞ宜しくお願いいたします。
野中文雄
Åê¹ÆNo.23963
投稿日時: 2006-2-23 1:52
ちょんまげら
居住地: 東京
投稿: 4531
使用環境:
CS5.5 .6.8 Vista Home Premium (SP1)
Re: 拡大・縮小とドラッグ移動に制限をかけるには・・・?
「どのように修正」するかは置いといて、「どこを修正」すればよいと思いますか?→【どこを直したらよいでしょう
引用:
Sushitaroさんは書きました:
いま進めている案件でとても役に立ちそうなスクリプトを発見しまして
非常に助かっております。そこで、大変あつかましいお願いなのですが
こちらのスクリプトで「拡大・縮小の制限」と「移動の制限」をかけるには
どのように修正すればよろしいでしょうか。

※2004年5月に野中さんが投稿されていたものです。


----------------
 

Sushitaro
Åê¹ÆNo.23966
投稿日時: 2006-2-23 9:18
新米
居住地: 東京
投稿: 7
使用環境:
Mac OS-X 10.3 Flash MX
Re: 拡大・縮小とドラッグ移動に制限をかけるには・・・?
お返事有り難うございます。
私が思いましたのは

function xZoomIn(nX, nY) {
this.xZoom(nZoomRate, nX, nY);
}
function xZoomOut(nX, nY) {
this.xZoom(-nZoomRate, nX, nY);
}

この中に拡大・縮小の命令を入れ、

function xZoom(nZoom, nX, nY) {
var oStart = {x:nX, y:nY};
this.localToGlobal(oStart);
_xscale = _yscale += nZoom;
var oEnd = {x:nX, y:nY};
this.localToGlobal(oEnd);
_x += oStart.x-oEnd.x;
_y += oStart.y-oEnd.y;
}

この中のどこかに移動の制限を入れるものかと思いました。

何しろスクリプトはほとんど初挑戦でして、これまではstartや
stop、あとはgetURL程度しか使わないムービー派でしたので・・。

ただもう期限が迫っておりますので、こちらをなんとか理解するために
「おしえて!! FLASHMX 2004 Action Script」を買って読んだのですが、
だいたいは理解できてもさすがに一日では応用が効かず、参っておりました。

もしお答えをお教え頂ければ、これを機会に必ずスクリプトを修得するべく
努力させて頂きたいと思っております。
(ずっと必要性を感じておりましたので・・・。)

宜しくお願いいたします。
Sushitaro
Åê¹ÆNo.23967
投稿日時: 2006-2-23 10:46
新米
居住地: 東京
投稿: 7
使用環境:
Mac OS-X 10.3 Flash MX
Re: 拡大・縮小とドラッグ移動に制限をかけるには・・・?
今、少し分かる部分だけアレンジに挑戦していますが、ここもちょっと解決策が
分からない部分がありまして、

var nZoomRate = 20;

ズームレートは数字だけですので10を20にしてみました。
しかしながら次の

if (Key.isDown(Key.CONTROL)) {
this.xZoomIn(nX, nY);
} else if (Key.isDown(Key.SHIFT)) {
this.xZoomOut(nX, nY);
} else {
this.startDrag();
}
};

のキー操作について「拡大」のみに操作を限定する場合はKey.isDownに関する
部分を省けばいいのだと思いますが、その替わりに入れるコマンドはmouseDown
で良いのかと思って

if (mouseDown()) {
this.xZoomIn(nX, nY);
} else {
this.startDrag();
}
};

としたのですが、動きませんでした。そこでmouseDownをonPressに変えたら
常に拡大しかされず、ドラッグができなくなったところで気がつきました。

同じクリックに反応してると・・。

ということは、この動作を分けるにはキー操作などの追加手段が必要ですが、
もしキー操作を使わないとしたら「拡大ボタン」「ドラッグボタン」を
用意しなければならないのでしょうか。それとももっとシンプルにできますか?

もうちょっと自分でも検討してみます。
Sushitaro
Åê¹ÆNo.23971
投稿日時: 2006-2-23 14:31
新米
居住地: 東京
投稿: 7
使用環境:
Mac OS-X 10.3 Flash MX
Re: 拡大・縮小とドラッグ移動に制限をかけるには・・・?
質問の仕方に失礼なところがあり、大変申し訳ありませんでした。

とにかく自分で理解してみようと努力をしてみましたが、
ユーザー定義関数の基本的な考え方が分からずに行き詰まってます。

現状で理解できたところまでを書いてみます。

var nZoomRate = 30; //ズーム倍率を30とする
this.onPress = function() { //マウスをクリックした時の動作を定義
var nX = _xmouse; //nXにマウスのX座標を代入
var nY = _ymouse; //nYにマウスのY座標を代入
if (Key.isDown(Key.SHIFT)) { //もし「シフト」キーを押した場合
this.xZoomIn(nX, nY); //これをnXとnY座標でズームインする
} else{ //または
this.startDrag(); //ドラッグを始める
}
};
this.onRelease = this.onReleaseOutside=function () {
this.stopDrag(); //マウスがクリックされていない場合、ドラッグを終える
};

ここまでが理解できた(かもしれない)部分です。
ところが次の

function xZoomIn(nX, nY) {
this.xZoom(nZoomRate, nX, nY);
}
function xZoom(nZoom, nX, nY) {
var oStart = {x:nX, y:nY};
this.localToGlobal(oStart);
_xscale = _yscale += nZoom;
var oEnd = {x:nX, y:nY};
this.localToGlobal(oEnd);
_x += oStart.x-oEnd.x;
_y += oStart.y-oEnd.y;
}

については「nZoomとxZoom」「oStartとoEnd」の命令の意味と
違いが分からず、座標などの関連がどのようになっているのかを理解することが
できずに止まってしまいました。

nZoomやoStartというのはユーザー定義なのでしょうか。
また、これらを上記の式に当てはめる事によって何を計算(または動作)を
させているのでしょうか。

多分、この部分を理解出来れば制限がかけられると思うのですが、いかがでしょうか。

何度もしつこくて申し訳ありません。
宜しくお願いいたします。
野中文雄
Åê¹ÆNo.23974
投稿日時: 2006-2-23 15:50
ちょんまげら
居住地: 東京
投稿: 4531
使用環境:
CS5.5 .6.8 Vista Home Premium (SP1)
Re: 拡大・縮小とドラッグ移動に制限をかけるには・・・?
そうですね。まずご自分の理解を明確にされるよう、アドバイス差し上げようと思ったところです。
引用:
Sushitaroさんは書きました:
現状で理解できたところまでを書いてみます。

以下のスクリプトの理解は、基本的に結構だと思われます。ただ、念のため、細かい点を補足します。
引用:
var nZoomRate = 30; //ズームの加算倍率を30とする
this.onPress = function() { //マウスをクリックした時の動作を定義
	// マウス座標の基準点はこのMovieClip自身
	var nX = _xmouse; //nXにマウスのX座標を代入
	var nY = _ymouse; //nYにマウスのY座標を代入
	if (Key.isDown(Key.SHIFT)) { //もし「シフト」キーを押した場合
		this.xZoomIn(nX, nY); //これをnXとnY座標起点としてズームインする
	} else{ //または
		this.startDrag(); //ドラッグを始める
	}
};
this.onRelease = this.onReleaseOutside=function () {
 this.stopDrag(); //マウスがクリックされていないボタンを放した場合、ドラッグを終える
};

以下の関数xZoom()のスクリプトは、太字の部分のみがズームに関わります。メインの処理は、むしろズームの起点をマウス座標に合わせるための位置調整です。後者は拡大・縮小のスケール決定には、直接関係しません。したがって、まずズームのスケール制限を、先に考えた方がよいでしょう。

具体的には、現在のスケールを記録するための変数が必要になります。実際のMovieClip._xscaleMovieClip._yscaleを変更する前に、変数値を変えてみて、その値が制限を超えるものであったら、値を制限値に収めて変更するという処理になると思われます。
引用:
ところが次の
function xZoomIn(nX, nY) {
	this.xZoom(nZoomRate, nX, nY);
}
function xZoom(nZoom, nX, nY) {
	var oStart = {x:nX, y:nY};
	this.localToGlobal(oStart);
	_xscale = _yscale += nZoom;
	var oEnd = {x:nX, y:nY};
	this.localToGlobal(oEnd);
	_x += oStart.x-oEnd.x;
	_y += oStart.y-oEnd.y;
}

普通にMovieClipを拡大・縮小すれば、インスタンスの基準点が中心となります。それを、クリック位置にするためには、基準点を中心にスケール変更した後、クリック位置がその中心となるように位置調整することが必要です。

ところが厄介なのは、MovieClipが拡大・縮小されてしまうと、インスタンスからみた座標や距離はそのスケール変更に応じて縮尺がかかってしまいます。たとえば、MovieClipが50%のスケールになると、インスタンス上の100ピクセルは、スケールが変わらないメインタイムラインからは50ピクセルに見えます。その補正をするために、MovieClip.localToGlobal()メソッドが使用されています。
引用:
については「nZoomとxZoom」「oStartとoEnd」の命令の意味と
違いが分からず、座標などの関連がどのようになっているのかを理解することが
できずに止まってしまいました。

nZoomやoStartというのはユーザー定義なのでしょうか。
また、これらを上記の式に当てはめる事によって何を計算(または動作)を
させているのでしょうか。

移動範囲の制限についても、MovieClipのスケールが変われば、縮尺の補正が必要になります。これは単純な座標の四則演算よりは、面倒な計算になります。スクリプトも単に変数値を変えたり、条件判定を追加するだけでは、対応できないと思われます。そのためには、「座標空間」を理解する必要があります。


----------------
 

Sushitaro
Åê¹ÆNo.23977
投稿日時: 2006-2-23 16:26
新米
居住地: 東京
投稿: 7
使用環境:
Mac OS-X 10.3 Flash MX
Re: 拡大・縮小とドラッグ移動に制限をかけるには・・・?
お返事、感謝いたします。

なるほど、拡大したMCの基準点が随時変更され、座標や距離に縮尺がかかってしまうと
その都度計算し直したり、取得し直したりしなければならない事がわかりました。
では、基準点での拡大は今回は先送りとして、拡大・移動の制限に的を絞ります。

これはきっと素人考えなのでしょうが、どこか外側に当たり判定をさせる壁を用意しておくとか、
そういう物理的(?)な処理などではダメなのでしょうか?(多分ダメですね)

例えば「_xscaleや_yscaleを利用して、一定以上(以下)の数値になったら制限値に直す」のような
if文などで大きさ(または小ささ)の制限はできますでしょうか?

多分間違っている(実際に制限はかけられませんでした)と思いますが、

if (_xscale > 954){
_xscale = 954;
}

という文を何箇所かに入れてみたのですが、やはり動作しませんでした。
(この程度の知識で作るものではないのでしょうか・・・。)

ご意見をお聞かせ下さい。
野中文雄
Åê¹ÆNo.23984
投稿日時: 2006-2-23 20:45
ちょんまげら
居住地: 東京
投稿: 4531
使用環境:
CS5.5 .6.8 Vista Home Premium (SP1)
Re: 拡大・縮小とドラッグ移動に制限をかけるには・・・?
できれば、アドバイスをもう1度お読み直しいただいた方がよいと思われます。
引用:
野中文雄は書きました:
以下の関数xZoom()のスクリプトは、太字の部分のみがズームに関わります。メインの処理は、むしろズームの起点をマウス座標に合わせるための位置調整です。後者は拡大・縮小のスケール決定には、直接関係しません。したがって、まずズームのスケール制限を、先に考えた方がよいでしょう。

つまり、「位置調整」は後にして、「スケール制限」を先に考えることをお勧めしたつもりです。「移動」は「位置」を考えずにはできませんので、「移動の制限」も後回しということです。
引用:
Sushitaroさんは書きました:
では、基準点での拡大は今回は先送りとして、拡大・移動の制限に的を絞ります。

当たったらサウンドでも鳴らして、位置はそのまま放っておいてもよければ、「当たり判定」で対応することも可能でしょう。しかし、当たる(つまり範囲をはみ出す)前の位置に戻さなければならないとすれば、位置調整を結局考えなければなりません。
引用:
これはきっと素人考えなのでしょうが、どこか外側に当たり判定をさせる壁を用意しておくとか、
そういう物理的(?)な処理などではダメなのでしょうか?(多分ダメですね)

つぎのように、申し上げたつもりです。
引用:
具体的には、現在のスケールを記録するための変数が必要になります実際のMovieClip._xscaleMovieClip._yscale変更する前に、変数値を変えてみて、その値が制限を超えるものであったら、値を制限値に収めて変更するという処理になると思われます。

引用:
例えば「_xscaleや_yscaleを利用して、一定以上(以下)の数値になったら制限値に直す」のような
if文などで大きさ(または小ささ)の制限はできますでしょうか?

挿入位置にもよりますが、以下のスクリプトで制限することは可能だと思われます。954%つまり10倍近くまで、拡大して試してご覧になりましたか?
引用:
多分間違っている(実際に制限はかけられませんでした)と思いますが、
if (_xscale > 954){
	_xscale = 954;
}

という文を何箇所かに入れてみたのですが、やはり動作しませんでした。

拡大・縮小するスケールの制限は、基本的な変数の操作と条件判定で実現できます。しかし、位置調整はおそらく10行以上の修正・追加が必要になります。その前提知識については、すでに申し上げておりますので、以前の回答をご覧ください。
引用:
(この程度の知識で作るものではないのでしょうか・・・。)


----------------
 

Sushitaro
Åê¹ÆNo.23987
投稿日時: 2006-2-23 22:54
新米
居住地: 東京
投稿: 7
使用環境:
Mac OS-X 10.3 Flash MX
Re: 拡大・縮小とドラッグ移動に制限をかけるには・・・?
お返事有り難うございました。
また、知識とマナーが不足しておりまして申し訳ございません。

実際、経験上請けられる業務ではないところを諸般の事情によりまして
請けざるを得ませんでしたが、それほど甘くはないと痛感いたしました。

通常はムービーの動きなどで数秒から数十秒のものを作っておりましたが、
このようにスクリプトがからんでくるものは正直なところ初めてでした。

その時、色々調べているうちに野中さんのスクリプトを知り、
まさにこれだという思いで取り掛かってみましたが、やはり難しいです。

ご指摘の_xscale>954の文を入れて拡大も行ってみましたが、どこまでも
拡大できてしまい、その後はやはり読み解く知識が乏しいところで
せっかくご指導頂きましたヒントなども、今すぐには理解できませんでした。

もう少し勉強してから、スクリプトを使用するなり、書き起してから
ご質問するなり、考えを改めて参ります。

ご迷惑をお掛けしました。ただ、あきらめずに頑張ってみます。
野中文雄
Åê¹ÆNo.23993
投稿日時: 2006-2-23 23:35
ちょんまげら
居住地: 東京
投稿: 4531
使用環境:
CS5.5 .6.8 Vista Home Premium (SP1)
Re: 拡大・縮小とドラッグ移動に制限をかけるには・・・?
954%というのは約10倍ですから、相当大きいですよ。この値は「画像のサイズは1350x954ピクセル」という数字からもってきていませんか? 高さの954ピクセルとスケールの954%は、意味がまったく違います。何か勘違いされていませんか?
引用:
Sushitaroさんは書きました:
ご指摘の_xscale>954の文を入れて拡大も行ってみましたが、どこまでも
拡大できてしまい、その後はやはり読み解く知識が乏しいところで
せっかくご指導頂きましたヒントなども、今すぐには理解できませんでした。

今つくろうとしているコンテンツは一旦脇に置いて、新規のムーピーでシンプルな内容にして確かめた方がよいと思います。まずは、拡大率の制限を目標に、必要なスクリプトに絞ると、つぎのようになります。
// MovieClip: 移動/拡大/縮小したいシンボル
// 第1フレームアクション
// MovieClip: 移動/拡大/縮小したいシンボル
// 第1フレームアクション
var nZoomRate = 30;
this.onPress = function() {
	this.xZoomIn();
};
function xZoomIn() {
	this.xZoom(nZoomRate);
}
function xZoom(nZoom, nX, nY) {
	_xscale = _yscale += nZoom;
}

これをスタートラインにされてはいかがでしょう?
引用:
もう少し勉強してから、スクリプトを使用するなり、書き起してから
ご質問するなり、考えを改めて参ります。


----------------
 

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

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