| Name |
KT
|
| Date |
2003年04月03日 (木) 18時55分 |
| Message |
初めて参加します。ちょぼちょぼFLASHMXを勉強しているものです。よろしくお願いします。早速ですが、NTTのトップページのスムースにリサイズするメニューの作り方がわかりません。
http://www.ntt.co.jp/index_f.html
いろいろやってみたのですがﾀﾞﾒです。こんな質問の仕方でよいでしょうか？ |
Response
01
|
| 2003年04月04日
(金) 01時57分＞ 憲ちゃん
|
|
はじめまして、ＫＴさん！こんばんわ(^^)
言葉で書いていただくより一目瞭然のご質問でよくわかります（笑）
おもしろいことを考えておられますね。
じっくり観察してみると、リサイズしているのは多分・・・
「hitTest」でマウス反応用のダミーの透明ムービークリップだと思います。
動いているのは、半透明のシート（大きさ固定）とその上に乗ったボタンセットが一緒になった
ムービークリップで、その上のレイヤーにマスクを被せているのでしょうね！
透明ムービークリップの上にマウスが乗ると半透明のシートがマスクの中で移動して、
見える範囲が大きくなる。
それを３種類用意して、全体として連動するようにしているのではないかな？
と思います・・・
明日、ゆっくり考えてみます(^^;
|
|
Response
02
|
| 2003年04月04日
(金) 23時44分＞ 憲ちゃん
|
|
ntt_menu.fla
一応、こんな感じに出来上がりましたが・・・
動作が多岐にわたっていて個々に具体的にご説明するのは大変時間がかかりますので、
まずはflaファイルをダウンロードして、研究してみてください(^^g/~~
基本動作は・・・サンプルの中の例えば「ＭＥＮＵ１」ムービークリップでは、
図のような構成になっていて、
ボタンセットというのが、各ボタンを配置した見えているオブジェクトです。
その上に、同じ大きさの「マスク」を被せ、初期の状態としては、「ＭＥＮＵ１」の文字だけが
見えるように重ねて配置しています。
その重なった部分に「hitMC」という塗り図形のムービークリップを配置、効果で完全透明にします。
そして中心点は図形の下辺にするのがポイントです。
サンプルでは、ボタンセット及びマスクの高さを「80ピクセル」、
重なる部分＝「hitMC」の高さを「20ピクセル」としています。
で、まず・・・
①この透明の「hitMC」の上にマウスが乗ったとき、中心点を基準に上方向に徐々に
スケールアップさせ、最大で「ボタンセット」と同じ「80ピクセル」までになるようにします。
②「hitMC」がスケールアップすれば、当然、その高さの値も大きくなります。
つまり初期値の「20→80」に変化します。
③「ボタンセット」ＭＣは、元々「hitMC」の中心点のＹ座標－２０の位置にありますから、
「hitMC」の高さの変化に応じて、
ボタンセットＭＣのＹ座標＝ －（「hitMC」の現在の高さ－２０）
としてやると、「hitMC」の上辺に沿って全体に上昇していきます。
④つまり、固定したマスクの中に入り込んでくるので、入り込んだ部分だけ徐々に見えるようになり、
最終的に「ボタンセット」すべてが表示されることになります。
「ボタンセット」ＭＣのインスタンス名を「set」として、
「hitMC」のクリップアクションで・・・
onClipEvent (load) { ←「hitMC」が読み込まれた最初に
maxScale = 80/20*100; 最大スケールの値として４００％と設定
}
onClipEvent (enterFrame) { ←フレームレートごとに毎回以下のことを繰り返す
if (this.hitTest(_root._xmouse,_root._ymouse,1)) { ←自分の上にマウスが乗ったとき
span = maxScale - this._yscale; ←変数spanに現在のＹスケールと最大値の差を代入
} else { ←そうでないとき
span = 100 - this._yscale; ←オリジナル（１００％）の大きさと現在のスケールの差
}
this._yscale += span*0.2; ←現在のスケールを目標スケールに差の０．２ずつ近づける
_parent.set._y = -(this._height - 20); ←「ボタンセット」を「hitMC」の上辺にそって
} 移動
「ＭＥＮＵ２」も基本動作は同じですが・・・
違いは、「ＭＥＮＵ１」は上に移動して徐々に見えますが、これは下に移動します。
その場合「ボタンセット」を上に移動する代わりに「マスク」を下に移動すれば
上手くいくように考えがちですが、残念ながら「マスク」はスクリプトで移動できません！！
そういうときは・・・
「ＭＥＮＵ２」ＭＣ自体を、中の「ボタンセット」ＭＣが上に移動したと同じ量だけ、
下に移動させてやれば・・・見かけ上、下に展開したように見えます。
「ＭＥＮＵ２」ＭＣのクリップアクションで・・・
onClipEvent (load) {
theY = this._y; ←最初に配置された自分のＹ座標を仮の変数theYに代入
}
onClipEvent (enterFrame) { ←以下のことを毎回繰り返す
this._y = theY - set._y; ←元の自分の位置を「ボタンセット」が動いた逆に移動
}
そして「ＭＥＮＵ１」「ＭＥＮＵ２」をまとめてひとつの「ボタンセット」ＭＣとして、
「ＭＥＮＵ３」との連携を数式で表現していくことになります。
一度、サンプルを検討されて、なお疑問点があればまたご質問ください(^^g/~~
|
|
Response
03
|
| 2003年04月05日
(土) 18時30分＞ KT
|
|
たいへんすばらしいお返事ありがとうございました。
感動です。しかし、何も知らないとは恐ろしいものです。私は、よちよち歩きでエベレストを目指してしまったようです。そこで本当に初歩的な質問なのですが、
（１）barの、
onClipEvent (load) {
theAlpha = 0;
this._alpha = 0;
maxAlpha = 40;
commentY = 62;
}
onClipEvent (enterFrame) {
if (theAlpha == 0) {
this._alpha -= 10;
if (this._alpha <= 0) {
this._alpha = 0;
}
の、theAlpha（変数だと思うのですが） これの意味、使い方
（２）menuSetの
onClipEvent (load) {
maxScale = 140/40*100;
theY = this._y;
}
onClipEvent (enterFrame) {
this._y = theY + (this._yscale-100)*0.3;
menu1H = (menu1.hitMC._height-20)/2;
menu2H = (menu2.hitMC._height-20)/10;
menu3H = (_root.menu3.hitMC._height-40)*0.5;
this._y = theY+menu1H - menu2H -menu3H;
}
上記の解説
お教え願えないでしょうか？ずうずうしいとは思いつつ、参考書片手に固まっています。
お忙しいところよろしくお願いします。
|
|
Response
04
|
| 2003年04月06日
(日) 02時53分＞ 憲ちゃん
|
|
こんばんわ、ＫＴさん(^^)
「変数theAlpha」・・・この辺はほとんどお遊びの部分なんですが(^^;
各「contentX」ボタンにマウスが乗ると、その右に黒い半透明のバー（矩形）が現れますね！
ＮＴＴのページでは、さらにそこにコメント文字が現れるようになっています。
このバーの現れ方を、ボタンにマウスが乗ると徐々に「アルファ（効果の透明度％）」の値を
サンプルでは最大値（maxAlpha = 40）まで大きくし、
マウスが外れると、逆に「アルファ値」を徐々に「０」まで小さくして見えなくする、
ということをさせています。
「theAlpha」は、各ボタンのアクションと連動して、それの切り替えスイッチの役割をしています。
これは変数名ですからスペルは何でも構いません(^^;
「インスタンス名．_alpha」とは、指定したインスタンスの透明度の「プロパティ」で、
「_(アンダーバー)」に続けて「_alpha」と書きます。
「０」で完全透明、「１００」が不透明ということです。
で最初は「this._alpha = 0」で出発しますから、バーは見えません。
各「contentX」のボタンアクションは、すべて同じで以下のようになっています。
on (rollOver) { ←マウスがボタンに乗ったら
_parent.bar.commentY = this._y;←自分のＹ座標を”bar”インスタンスの中の変数※に代入
_parent.bar.theAlpha = 1;←”bar”インスタンスの中の変数「theAlpha」に「１」※を代入
}
on (rollOut) { ←マウスがボタンから外れたら
_parent.bar.theAlpha = 0; ←同「theAlpha」に「０」を代入
}
※変数commentYは、すべてのボタンに同じように記載されていても、
個々のボタンが配置されている位置（を包むＭＣ）のＹ座標のプロパティ「this._y」が、
それぞれ異なるので、ボタンによって代入される値が違います。
※「１」は、「０」以外なら値は何でも構いません。
インスタンス”bar”のonClipEvent (enterFrame) の部分を省略せずに書くと・・・
onClipEvent (enterFrame) {
if (theAlpha == 0) { ←theAlphaが「０」なら（つまりマウスがボタン上にないとき）
this._alpha -= 10; ←自分のアルファ値を１０づつ減少
if (this._alpha <= 0) { ←（その結果もし）「０」以下になれば
this._alpha = 0; ←自分のアルファ値を「０（完全透明）」にセット
}
} else { ←そうでないとき（theAlphaが「０」以外：つまりマウスがボタン上にあるとき）
this._alpha += 10; ←自分のアルファ値を１０づつ増加
if (this._alpha >= maxAlpha) { ←（その結果もし）最大値以上になれば
this._alpha = maxAlpha; ←自分のアルファ値を「最大値」にセット
}
}
span = commentY -this._y; ←ここ以下はバーの位置を徐々にボタンに移動させている部分
this._y += span*0.2; commentYの値は現にマウスが乗っているボタンのＹ座標値
}
次の”menuSet”は「ＭＥＮＵ１」と「ＭＥＮＵ２」を上下にセットにしたＭＣです。
それぞれのＭＥＮＵは、真ん中の横線を中心に、「１」は上に移動、「２」は下に移動しますが、
そのときの状態によりセット全体をさらに微妙に上下に移動するといことをしています。
これがなければ、真ん中の横線は最初に配置された位置で固定されたまま、
その位置で「１」は上に、「２」は下に展開するだけです（笑）
数式は、特にこれでなければ！ということはありません。
想像力を発揮して頭の中で動きを描きながら、電卓片手に式を作っていけばよいのです（笑）
”menu1H”は、その中で高さを変える”hitMC”の現在の高さに基づいて得られる数値で、
ここでは、初期の高さ（20ピクセル）から増加した量（hitMC._height-20）の半分の値。
同様に”menu2H”は、その中の”hitMC”の高さが増加した量の10分の１の値。
ここの割る値も適当です。いろいろ変えて試してみると動き方が変化します。
それともうひとつ別のＭＣ「ＭＥＮＵ３」との関連も考慮しています。
それが”menu3H”で、同様にその中の可変”hitMC”の高さを利用して、
それの初期の値（40ピクセル）からの増加分の半分の値（*0.5も/2も同じことですが(^^;）)。
で、theYは、最初に配置した「ＭＥＮＵセット」の位置ですから・・・
this._y = theY+menu1H - menu2H -menu3H;
とは・・・
「ＭＥＮＵセット」の位置を、元の位置から
「ＭＥＮＵ１」が上に展開した増加分の半分の量だけ下に移動し、
「ＭＥＮＵ２」が下に展開した増加分の10分の１の量だけ上に移動し、
「ＭＥＮＵ３」が増加した幅の半分の量だけ上に移動する。
ということをしています。
※このような式は、結構試行錯誤を繰り返しながらつくりますので・・・
言い訳になりますが・・・今改めてみてみると、
「maxScale = 140/40*100;」と「this._y = theY + (this._yscale-100)*0.3;」は意味がなく、
不要ですね(;^_^Aアセアセ・・・削除しておいてください！
そして「ＭＥＮＵ３」自体も、独自に自分の位置を他との関連で移動するようにしています。
”menu3”のクリップアクション・・・
onClipEvent (enterFrame) {
this._y = _parent.menuSet._y +
_parent.menuSet.menu2.hitMC._height+ this._height*0.5+20;
}
上で計算した「ＭＥＮＵセット」の中心位置（menuSet._y）に、
「ＭＥＮＵ２」の下への展開幅（menu2.hitMC._height）を加えた値とは・・・
ムービー画面でいえば、「ＭＥＮＵ２」の下の線の位置です。
そこから自分の高さの半分（this._height*0.5）だけ下に降ろした位置を自分の中心として
配置すると、「ＭＥＮＵ３」の上辺が「ＭＥＮＵ２」の下の線にぴったりくっついて移動します。
そこからさらに「20ピクセル」下げるということは・・・
常に、「ＭＥＮＵ３」は「ＭＥＮＵ２」の下線から２０ピクセルの間隔を保って
上下することになります♪
|
|
Response
05
|
| 2003年04月06日
(日) 14時06分＞ KT
|
|
ここのサイト、どこのサイトよりすばらしい。憲ちゃんさん、1番です。マクロメディアよりすばらしいです。まるでハリーポッターの魔法のようなスクリプト、そして目からうろこの解説。せめてその3分の1でもと、それを目指して勉強したいと思います。まだすべてを本当に理解しているかわかりませんが、取り急ぎお礼をしたくRESしました。たぶん私の実力だと、1~2ヶ月かかるかもしれませんが、がんばってみようと思います。本当にありがとうございました。またくだらない質問をするかもしれませんが、その節はよろしくお願いします。
|
|
Response
06
|
| 2003年04月06日
(日) 21時50分＞ 憲ちゃん
|
|
答えはひとつではないので・・・
式を変更したり別の「プロパティ」で試してみたりして、
適当に遊びながら進めていけば、自分だけの思わぬ動作を発見できるかもしれませんよ（笑）
そうしているうちに”実感として理解”できるようになります。
それが本当の理解でしょうね♪
頭の理屈はあとからついてきます(^^;
|
|
