マウスの動きに合わせて画面をずらす方法

質問

大きなシンボルと小さなシーンを用意して、シーンにシンボルの一部しか写さず、マウスを動かすことによって初めてシンボルが動いて小さなシーンから全てのシンボルを見ることができるといったものはFLASHで作れますでしょうか？
良ければ作り方を教えて頂きたいと思います。よろしくお願いします。

回答No.1

noname#35109

今まで，
ご質問で何を書かれているのかさっぱりわかりませんでした。
しかしよーくよーく，１日ほど考えていると，
ご質問の意味が半分くらいわかった気がします。

とにかくまず，
書かれている用語が無茶苦茶です。

> 大きなシンボルと小さなシーン

イミフメイ……？？？
シンボル と インスタンス は誰でも間違えますし，
それはどうでも良いのですが，
「小さいシーン」の方がワケワカラン状態でした。

シンボルとインスタンスを作成し、理解しよう！
http://www.1art.jp/flash/le/lesson1/lesson1.htm
シーンとは？
http://www.1art.jp/flash/le/lesson11/lesson11-1.htm

上記 URL の通り，
Flash での シーン には，
ご質問されていると予測される シーン とは全然違う，
別の シーン の意味があります。
シーン とは タイムライン の１つの区切りですから，
時間軸 に沿った 時間枠（フレームの区切り） のことです。

しかし，これは Flash に限ったことではありません。
映画や舞台の シーン も同じです。
茶の間のシーン → 出かける玄関のシーン → 駅の改札のシーン
など，１つの 「時間枠」 が 「シーン」 です。

というわけで，
おそらく，ご質問になっているのは，
時間枠ではなくて空間（平面）枠だと思います。

> 大きなシンボルと小さなシーン
　　↓変更↓
　大きなインスタンスとそれを覗かせる小さな枠

ではないでしょうか（おそらく）。
それだと理解もできますし，可能です。
そういうこととして，以下回答します。

あと，Flash のバージョンを書かれていませんが，
勝手に Flash MX 以上（MX，MX2004，8）をご使用だとして回答します。
Flash 5 以下では，下の方法は使えません（別の方法ならできます）。

////////////////////////////////////////////////////

Flash を 起動して，
新規ドキュメント を作成してください。

まず，大きなムービークリップの作成です。

ステージ上に大きめの丸でも描いてください。
その丸を選択して，
右クリック→「シンボルに変換」で，ムービークリップ に変換してください。
ここで「シンボルに変換」をするので，
その ステージ上 に見えている丸は シンボル であるような気がしますが，
実はステージ上 にあるその オブジェクト は インスタンス です。

おそらく Flash の「シンボルに変換」という言葉が悪いのだと思います。
「シンボルに変換」 ではなく 「シンボルに登録」 のような意味だと思ってください。
丸は シンボル として登録されますが，
ステージ上 に見えている物は シンボル ではなく，
シンボル の分身である インスタンス です。

その丸の ムービークリップ を選択して，
下の プロパティインスペクタ で，この インスタンス に インスタンス名 を付けます。
インスタンス名 は 半角英字 から始まる半角英数字の文字列でしたらたいてい何でもかまいません。
大きいムービークリップなので，
ここでは 「bigMC」 というインスタンス名を付けておきます。

次に，小さな枠の作成です。

タイムライン で，
「bigMC」のあるレイヤー より 上のレイヤ ーに，レイヤー を追加してください。
その追加した レイヤー に，
「bigMC」 より小さめの，枠線が黒で塗りが透明（アルファ0％）の四角を描いてください。

注：枠線だけを描くのではなく，
　　必ず枠線内を透明な塗りで塗りつぶしてください。
　　半透明でも良いですが，何かの色で塗りぶさないと，
　　マスク がかかりません。

　■■■■■■■■■■■←線は黒
　■□□□□□□□□□■
　■□□ ココは透明 □□■
　■□□□□□□□□□■
　■■■■■■■■■■■

その四角全体を選択して，
右クリック→「シンボルに変換」で，
今度も丸と同じく ムービークリップ に変換してください。

その中が透明枠線が黒の ムービークリップ を選択して，
下の プロパティインスペクタ で，この インスタンス に インスタンス名 を付けます。
ここでは 「waku」 という インスタンス名 を付けておきます。

次に，スクリプト の作成です。
しかし……

>> マウスの動きに合わせて画面をずらす方法
　　　　　　　↓ 矛盾 ↑
>> マウスを動かすことによって初めてシンボルが動いて

ここが矛盾していますし，
また「マウスの動きに合わせて」という部分が
どういうことを意味しているのかわかりません。

ですから，
思いつく感じで何通りか書いてみます。

タイムラインで，
「waku」のあるレイヤー より 上のレイヤー に，レイヤー を追加してください。

　□　レイヤー　筆・・|○|　←スクリプト を書きます
　□　レイヤー　筆・・|●|　←「waku」の レイヤー
　□　レイヤー　筆・・|●|　←「bigMC」の レイヤー

その一番上の レイヤー の
キーフレーム（○） を選択して，
下の アクションパネル に，
以下４通りある --- 内のいずれかの スクリプトコード を書いてください。
コピペ してくださっても大丈夫です。

◎ 「waku」をドラッグで動かす場合（画面をずらす方法1）
----------------------------------------
// ムービークリップ waku を myMask という名で複製
_root.waku.duplicateMovieClip("myMask", 0);

// bigMC に myMask のマスクをかける
_root.bigMC.setMask("_root.myMask");

// waku をマウス で プレス したとき
_root.waku.onPress = function() {
// waku のドラッグを開始する
this.startDrag();
};

// waku から マウスアップ したとき
_root.waku.onRelease = function() {
// waku のドラッグを終了する
this.stopDrag();
};

// マウス が動くたびに実行
_root.waku.onMouseMove = function() {
// myMask の座標を waku の座標と一致させる
_root.myMask._x = _root.waku._x;
_root.myMask._y = _root.waku._y;
// 実行後，即，表示を更新
updateAfterEvent();
};
----------------------------------------

◎ 「waku」を マウス 追従させる場合（画面をずらす方法2）
----------------------------------------
// マウス追従するスピードの設定（※可変）
var spd = 2/10;

// ムービークリップ waku を myMask という名で複製
_root.waku.duplicateMovieClip("myMask", 0);

// bigMC に myMask のマスクをかける
_root.bigMC.setMask("_root.myMask");

// １フレーム進む時間ごとに毎回実行
_root.waku.onEnterFrame = function() {
// myMask と waku を マウスの座標に徐々に合わせる
this._x += (_root._xmouse-this._x)*spd;
this._y += (_root._ymouse-this._y)*spd;
_root.myMask._x = this._x;
_root.myMask._y = this._y;
};
----------------------------------------

◎ 「bigMC」を ドラッグ で動かす場合
----------------------------------------
// ムービークリップ waku を myMask という名で複製
_root.waku.duplicateMovieClip("myMask", 0);

// bigMC に myMask の マスク をかける
_root.bigMC.setMask("_root.myMask");

// bigMC をマウスでプレスしたとき
_root.bigMC.onPress = function() {
// bigMC のドラッグを開始する
this.startDrag();
};
// ステージ上のどこかでマウスアップしたとき
_root.bigMC.onMouseUp = function() {
// bigMC のドラッグを終了する
this.stopDrag();
};
----------------------------------------
　※↑コレは「bigMC」が枠外に消えると
　　　戻って来ないのでお薦めできません

◎ 「bigMC」をマウス追従させる場合
----------------------------------------
// マウス追従するスピードの設定（※可変）
var spd = 2/10;

// ムービークリップ waku を myMask という名で複製
_root.waku.duplicateMovieClip("myMask", 0);

// bigMC に myMask のマスクをかける
_root.bigMC.setMask("_root.myMask");

// １フレーム進む時間ごとに毎回実行
_root.bigMC.onEnterFrame = function() {
// bigMC を マウスの座標に徐々に合わせる
this._x += (_root._xmouse-this._x)*spd;
this._y += (_root._ymouse-this._y)*spd;
};
----------------------------------------

※ すべての動作環境
　　作成可能環境：Flash MX 以上
　　動作可能環境：Flash Player 6 以上

４つのうちいずれかを選んで，コピペし，
パブリッシュしてもらうか，
「制御」→「ムービープレビュー」で見てもらうと，
何らかの形で枠線の透明な部分だけに 「bigMC」 が見え，
何らかの マウス操作 で 「waku」 もしくは 「bigMC」 のいずれかが動くと思います。

スクリプトの意味は，
// のある行（コメント行）に書いてありますから，
なんとかそれで理解してみてください。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

本当は，
ある ムービークリップ を作成して，
その ムービークリップ に
-------------------------
on (press) {
this.startDrag();
}
on (release) {
this.stopDrag();
}
-------------------------
と書いて ムービープレビュー し，
「おー，ムービークリップがドラッグ出来る！」と，感動する。

とか，
ある ムービークリップ を作成して，
その ムービークリップ に，
-------------------------
onClipEvent (load) {
var spd = 2/10;
}
onEnterFrame = function() {
// このMC を マウスの座標に徐々に合わせる
this._x += (_root._xmouse-this._x)*spd;
this._y += (_root._ymouse-this._y)*spd;
};
-------------------------
と書いて ムービープレビュー し，
「しめしめ，ムービークリップがマウス追従する。」と，ほくそ笑む。

とか，
MovieClip.setMask() などという スクリプト をいきなり使うのではなく，
マスクレイヤー を使用して，マスク をかける。
「タイムラインまとめ」
http://tail.s68.xrea.com/html/text/kouza/basic/02_s2.html
「マスクを使って切り抜き効果」
http://www.pref.chiba.jp/clis/ok/ok011/fl4_cont2/cont2_fl4.html

とか，
少しずつ実験しながら，実感して身につけて行かないと，
上の４つの スクリプト は何を書いているのか理解出来ないと思います。

しかし，そんなことから説明していると，
説明に何日も何週間もかかり，文字だけでの説明は不可能なので，
あまり良くないことだとは思いますが，
この回答では スクリプト で一気にしてしまう方法を書きました。

時間があれば，

on (press) {
this.startDrag();
}

でムービークリップ を ドラッグ してみたり，
マスクレイヤー で マスク をかけてみたり，
そういう基本的なことからやってみてください。

基本的なことから挑戦していくと，
もっと他に方法があることがわかると思いますし，
色々応用ができるようになると思います。