FLASHのスライド式のメニューの作り方について

質問

はじめまして。
わたしは、最近FLASHに出会いActionScriptに興味を持ち、これから少しずつ学んでいこうと思っている者です。
FLASHのサイトを見ていると、感動するような作品に出会うことがあって、是非わたしもこのような作品をつくれるようになれればと思いながら勉強しています。

今、わたしが作りたいと思っているのは、スライド式のメニューなのですが、過去にこの掲示板で、同じ質問をされている方がおり、その質問に対して解説をして下さっていた方がいらっしゃったので、その方の説明を見ながらわたしも挑戦しておりました。

しかし、数点、どうしても分からない点がありましたので、教えて頂ければと思い、今回質問させて頂いた次第です。

ソースをここに載せたいのですが、他の方の書かれた説明文を勝手に載せてはいけないと思いますので、申し訳ありませんが、ここにリンクを張らせていただきます。

http://oshiete1.goo.ne.jp/qa3880926.html

解説の中でわたしの悩んでいる点は、

１．// 選択番号 p の初期化　
　　p = 0;

　　の意味。

２．// 各 p_mc? にローカルな変数 p の値を設定
　　_root["p_mc"+i].p = i;

　　の記述の意味。

（これは例えば、i=1の場合、p_mc1に設定されたpの値は１ですよという意味なのでしょうか。）

３．// 親の p の値を _root の p に代入
　　_root.p = this._parent.p;

　　の記述の意味。

（_rootは絶対パス、this._parentは相対パスという風に本に書いてあったのですが、一つのソースの中に絶対パスと相対パスを混ぜて書いてよいのか、また、この_root.p = this._parent.p;という記述は、どういう意味を表しているのか、理解できていません。
_root.pとthis._parent.pは同じ意味なのではないのかと思ってしまいます。）

４．for (i=1; i<n; i++) {
　　// 各 p_mc1～p_mc(n-1) の動き
　　_root["p_mc"+i].onEnterFrame = function() {
　　// _root の p の値によって目標座標を変える
　　if (_root.p<this.p) {
　　this._x += (m+w-r*(n-this.p)-this._x)*s;
　　} else {
　　this._x += (m+r*this.p-this._x)*s;

３．で質問させて頂いたように、_root.p = this._parent.p; の意味が分かっていないので、if (_root.p<this.p) の記述についても理解できていません。
多分、このスクリプトは４枚のムービークリップを右に左に動かすためのものだと思いますが、_root.pとthis.pの違い、また、それぞれの意味について理解出来ていないので、混乱している状態です。

本当に分からないところだらけで、このような質問の仕方をして申し訳ないと思っておりますが、ご教示頂ければと思います。
よろしくお願いいたします。

回答No.1

BlurFiltan · ベストアンサー

とりあえず階層構造は次のようになっています。
少なくともこの構造が理解できてイメージできないとわからないと思います。

　_root
　　├ p_mc0（ムービークリップ）
　　│　　└_btn（ボタン）
　　├ p_mc1（ムービークリップ）
　　│　　└_btn（ボタン）
　　├ p_mc2（ムービークリップ）
　　│　　└_btn（ボタン）
　　├ p_mc3（ムービークリップ）
　　│　　└_btn（ボタン）
　　└ p_mc4（ムービークリップ）
　　　　　└_btn（ボタン）

> １．// 選択番号 p の初期化　
> 　p = 0;
> 　の意味。

p は変数名です。
p ではなくて hoge とか piyo とかでもかまいません。
一応 photo の頭文字 p を使ってみただけです。

この _root の変数 p の値は 0～4 で変動します。
その p の値によって，動くエンジン部分の動向を変えています。
その動くエンジン部分がこの部分です↓。

　～ i=1～4 でループする for文内 ～
　// 各 p_mc1～p_mc(n-1) の動き
　_root["p_mc"+i].onEnterFrame = function() {
　　　// _root の p の値によって目標座標を変える
　　　if (_root.p<this.p) {
　　　　　this._x += (m+w-r*(n-this.p)-this._x)*s;
　　　} else {
　　　　　this._x += (m+r*this.p-this._x)*s;
　　　}
　};

つまり，
ムービークリップp_mc1～p_mc4は，
_root の p の値が 0～4 のうちどれであったとしても，
ずっと目標座標に向けて近付き続けます。

_root の p の値によって目標座標が変わるので，
近付き続ける座標が変わるというしくみです。

// 選択番号 p の初期化　
p = 0;

をしておかないと，p は undefined です。
p が undefined であると上のエンジンが正常に動作しません。

また p の値を 0 ではなく他の数にしておくと，
ムービークリップp_mc0 が見えている状態に整列しません。

したがって，
p = 0;
が必要になります。

※ただし絶対にこれが必要なのは
　 FlashPlayer7（FlashMX2004)以上のSWFの場合です。
　 FlashPlayer6以下のSWFでは
　 初期化をしていない変数の値は，
　 自動的に ""(空白文字)，もしくは 0 と判断されますから，
　 上の場合 p = 0 と書かなくても自動的にそうなります。

> ２．// 各 p_mc? にローカルな変数 p の値を設定
> 　　_root["p_mc"+i].p = i;
> 　　の記述の意味。

これは書かれていらっしゃる通り，
ムービークリップ p_mc0～p_mc4 内の変数 p を i と同じ値にしています。

　_root
　　├ p_mc0 ← 変数p=0
　　│　　└_btn
　　├ p_mc1 ← 変数p=1
　　│　　└_btn
　　├ p_mc2 ← 変数p=2
　　│　　└_btn
　　├ p_mc3 ← 変数p=3
　　│　　└_btn
　　└ p_mc4 ← 変数p=4
　　　　　└_btn

ということです。

> ３．// 親の p の値を _root の p に代入
> 　_root.p = this._parent.p;
> 　の記述の意味。

各ボタン_btn のロールオーバー時の動作ですよね。
各ボタン_btn の親 は p_mc0～p_mc4 のうちいずれかです。

仮に p_mc2 内の _btn にロールオーバーしたときは，
その親の p の値 2 を _root の p に代入するということになります。

　_root　変数p=2　←───┐
　　├ p_mc0 ← 変数p=0　　│
　　│　　└_btn　　　　　　　　│
　　├ p_mc1 ← 変数p=1　　│
　　│　　└_btn　　　　　　　　│
　　├ p_mc2 ← 変数p=2 ─┘
　　│　　└_btn ←★ロールオーバー
　　├ p_mc3 ← 変数p=3
　　│　　└_btn
　　└ p_mc4 ← 変数p=4
　　　　　└_btn

これで _root の変数p の値が 2 になるので，
上に書いたエンジン部分の各p_mc0～p_mc4の動く目標座標が変わります。

※---注意--------------------------
ボタン自体に

on (rollOver) {
_root.p = this._parent.p;
}

と書いた場合，
この this はそのボタンのあるムービークリップになります。
(例)　_root ←this._parent
　　　　└p_mc0 ←this
　　　　　　　└_btn

一方，

ボタン.onRollOver = function() {
_root.p = this._parent.p;
};

と書いた場合，
この this はそのボタン自体になります。
(例)　_root ←this._parent._parent
　　　　└p_mc0 ←this._parent
　　　　　　　└_btn ←this

書き方によって this は変わります。
this が何なのかわからなくなった場合は，
trace(this);
を書いて「制御」→「ムービープレビュー」
で確かめてみると良いと思います。
-----------------------------------

> 一つのソースの中に絶対パスと相対パスを混ぜて書いてよいのか

「悪い」とは何処にも書いていないと思います。
また理論も合っているので良いのではないでしょうかね。
何も考えずにごちゃ混ぜにするとややこしいので確かに混ぜない方が良いです。

「for文を使って各ボタン_btn の動作定義をしている」
というところがポイントです。
for文を使う以上，右辺は this._parent.p のように相対パスでないと書けないでしょう。
どうやって絶対パスで表します？？？
実際は四苦八苦すると _root.p_mc○.p のような意味になるように書けますが，
それは無駄な努力です。
したがって，
普通に考えると右辺は this._parent.p のような相対パスに決定してしまいます。

変えるとしたら左辺でしょうね。
気になるようでしたら，
_root.p = this._parent.p;
ではなく，
this._parent._parent.p = this._parent.p;
に統一しても良いと思います。

しかし，
this._parent._parent って何？
と，わかりにくくなりませんか？
混乱を防ぐために _root.p にしています。

何も考えずに混ぜているのではなくて，
上のように考えた上で，絶対パスと相対パスを混ぜているので，
かまわないと思います。

> ４．for (i=1; i<n; i++) {
> 　// 各 p_mc1～p_mc(n-1) の動き
> 　_root["p_mc"+i].onEnterFrame = function() {
> 　// _root の p の値によって目標座標を変える
> 　if (_root.p<this.p) {
> 　this._x += (m+w-r*(n-this.p)-this._x)*s;
> 　} else {
> 　this._x += (m+r*this.p-this._x)*s;

これが上にも書いた主要エンジン部分です。
実際に数値を代入して考えてみるとわかると思います。

for文の i が仮に 1 であったとします。
そのときは次のようになります。

　// 各 p_mc1の動き
　_root.p_mc1.onEnterFrame = function() {
　　　// _root の p の値によって目標座標を変える
　　　if (_root.p<this.p) {
　　　　　this._x += (m+w-r*(n-this.p)-this._x)*s;
　　　} else {
　　　　　this._x += (m+r*this.p-this._x)*s;
　　　}
　};

p_mc1 の p は 1 です。
また各変数は次のように設定してあります。
// 表示枠の 横幅 を設定（変更可）
w = 600;
// 表示枠の 左側余白 を設定（変更可）
m = 10;
// 表示枚数(p_mc? の個数)の設定（変更可）
n = 5;
// 狭いときに見えている範囲を設定（変更可）
r = 80;
// 動く速さの設定（変更可）
s = 1/5;

したがって次のようになります。

　// 各 p_mc1の動き
　_root.p_mc1.onEnterFrame = function() {
　　　// _root の p の値によって目標座標を変える
　　　if (_root.p<1) {
　　　　　this._x += (10+600-80*(5-1)-this._x)*1/5;
　　　} else {
　　　　　this._x += (10+80*1-this._x)*1/5;
　　　}
　};

実際はこの↑ように数値を直接記入してもかまいません。
作成の最初の段階ではまずこのような感じで作成したと思います。
しかしこのままだと，
何処の数字をどう変えれば思い通りに動かせるのか使う方がわかりにくいです。
また，触りすぎて壊してしまう可能性もあります。
何処を変えれば何が変わるのかをわかりやすくするために，
w　m　n　r　s という変数を別に上に用意して，その変数の意味を書いています。

上の式をさらに計算します。

　// 各 p_mc1の動き
　_root.p_mc1.onEnterFrame = function() {
　　　// _root の p の値によって目標座標を変える
　　　if (_root.p<1) {
　　　　　this._x += (290-this._x)/5;
　　　} else {
　　　　　this._x += (90-this._x)/5;
　　　}
　};

したがって，
p_mc1 の x座標は，
_root の p の値が 1 未満であるとき（0 のとき）
　　→290 に 1/5 ずつ近づく
_root の p の値が 1 以上であるとき
　　→90 に 1/5 ずつ近づく
ということになります。

MovieClip.onEnterFrame = function() { }　は，
ムービークリップクラスのイベントハンドラメソッドのうちの１つで，
{ } 内が１フレーム進む時間ごとに毎回実行されます。

「+=」 は，
加算後代入演算子です。
this._x += (290-this._x)/5;
の場合は，
this._x = this._x+(290-this._x)/5;
と同じ意味です。

仮に this._x が最初 0 であったとします。
onEnterFrame = function() { } の { } 内１回目の実行で，

this._x = 0+(290-0)/5;
　→ this._x =59　になります。

onEnterFrame = function() { } の { } 内２回目以降の実行で，
２回目：this._x = 104.4
３回目：this._x = 141.52
４回目：this._x = 171.216
５回目：this._x = 194.9728
６回目：this._x = 213.97824
７回目：this._x = 229.182592
８回目：this._x = 241.3460736
　… 略 …

と 290 に向けて前の座標から 1/5 の割合ずつ近づき続けます。
もし _root の p が 1 以上であると，
this._x = 90 に向けて近づき続けます。

> _root.p = this._parent.p; の意味が分かっていないので、
> if (_root.p<this.p) の記述についても理解できていません。

なんとなく逆です。
またこの回答で書いた内容も下に書いた物ほど先に作成しています。
考えとしては _root.p の出没は念頭に置いていますが，
実際に詰めて作成して行くのは下の方が先です。

◎ 簡単な例

ステージ上に直径２ｃｍくらいの塗り入りの丸を描きます。
そしてムービークリップに変換して，
「my_mc」 というインスタンス名を付けます。
そして_rootのフレームに次のように書きます。

----------------------------------
// my_mc内の変数 num の初期化
my_mc.num = 20;

// my_mc をクリックしたときの動作
my_mc.onRelease = function() {
this.num += 50;
};

// １フレーム進む時間ごとに毎回実行する動作
my_mc.onEnterFrame = function() {
this._x += (this.num-this._x)/5;
};
----------------------------------

そしてパブリッシュ。
my_mc をクリックすると num が 50 ずつ加算されるので，
目標座標が右へ右へと動き，my_mc が右へ右へと動きます。

この辺から脹らませて行って上のような仕組みを作成します。
ですから作成上 _root.p の登場はずっと後になります。

お礼

ありがとうございます。
どう言葉にしてよいか分からないくらい感謝の気持ちでいっぱいです。
自分が参考にさせて頂いていた解説の回答者様ご本人からお答えを頂けるとは思っていなかったので、また素人の自分にも理解出来るくらいに丁寧に、噛み砕いて説明してくださって、どうお礼を申し上げてよいか分かりません。

p_mc? ----- 変数p=?
まずここが理解出来ていないと、この先のスクリプトを読み進めることが出来ないんですよね。どうして変数を設定するかというと、各ムービークリップのpの値、そして_rootのpの値との関係性で、各ムービークリップの目標座標が決まるからなんですよね。

// 選択番号 p の初期化　
p = 0;
動かないムービークリップp_mc0を所定の位置に配置するために、この記述は絶対必要なんですね。

_root.p = this._parent.p
この部分についても本当に分かりやすく解説して下さって、またthisの指し示すものについてもこれまで混乱していたので、BlurFiltan様の教えて下さったことを心に留めながら勉強していこうと思っております。
相対パス・絶対パスについても、むやみやたらに混ぜて使うのではなく、必要なときに、必要に応じて使用するということですね。

エンジン部分のスクリプトについても、実際に数値を当てはめて解説してくださったので、非常にわかりやすかったです。

>> _root.p = this._parent.p; の意味が分かっていないので、
>> if (_root.p<this.p) の記述についても理解できていません。
>なんとなく逆です。

この部分についても、例題を出して下さったので理解することが出来ました。例題のスクリプトの仕組みを膨らませたものが今回のスライド式のスクリプトになるのだから、_root.p の登場はずっと後になりますね。

本当に、ご丁寧な解説、ありがとうございました。
これからActionScriptの勉強、頑張っていきます。
本当に感謝いたします。ありがとうございました！