| Name |
ゆき
|
| Date | 2002年02月25日 (月) 17時31分 |
| Message |
ハジメマシテ☆
BBSを最後まで読ませて頂きました。
とても丁寧に回答されているので、できれば教えて頂きたいことがあります。
スクロールテキストフィールドがわからなくて困っています。
いろんな本を読んだりしましたが、超初心者でもわかるような解説が載っていなくて、もうお手上げ状態です。１から教えて頂けたら嬉しいですが、お忙しいと思うので、ポイントだけでも教えて頂けたら光栄です。
どうかどうか、よろしくお願いします。 |
Response 01
|
| 2002年02月26日 (火) 15時20分＞
憲ちゃん
|
|
ゆきさん、はじめまして(^^g/~~
スクロールテキストフィールドって・・・・！？
単にJavaScriptでできるテキストスクロールではなくて、
↓こんな感じのことですか？
ここの「List０１」～「List１６」はメニューボタン等を想定していますが、
ここをテキストフィールドにして文字を入れることもできます。
もし、これだったら中級講座かな？（笑）
やり方は何種類かありますが、難解なアクションスクリプトを極力使わずに、
普通のボタンとムービークリップを使って最小限のアクションで説明してみます(^^g/~~
基本的な仕組みは・・・
サンプルでは右の「つまみ」も左の「リスト」も上下（Y軸）移動だけですから、
「つまみ」を上下に移動することで、
「つまみ」のY座標の移動量（ピクセル）に対応する「リスト」のY座標値を計算して
再表示させています。
サンプルムービーの構成ですが（右図）・・・
ムービーの大きさを２５０×２４０ピクセルに設定、
レイヤーとして上から順に・・・
「アクション」レイヤー…ここにリスト座標値を計算するアクションスクリプトが入ります。
「つまみ」レイヤー…上下に移動する「●つまみ」ムービークリップを配置。
「枠」レイヤー…ムービー全体を覆うかたちで図形を配置し、
下のリストの一部が見えるようその分”１８０×２００”の穴を空けています。
※ここはマスクを併用しても構いません。
「リスト」レイヤー…つまみと連動して上下する「リスト」ムービークリップを配置。
ここで扱う「つまみ」「枠」「リスト」など個々の部品のことを「オブジェクト」といいますが、
アクションスクリプトで、これらのオブジェクトのもつステージ上の座標位置や移動量を検出したり、
座標を指定して位置を移動させたりするためには、
それを「ムービークリップ（シンボル）」にしたうえで、ステージにあるその「インスタンス」に
「特定の名前」を付けてあげる必要があります。
※ライブラリにあるシンボルからは、ステージに複数の「インスタンス」をドラッグして使用できるので、
※マシーンには「特定の具体名」を告げてあげないと識別できないのです。
ここで「つまみ」と「リスト」をムービークリップにしているのはそのためです！
では以下順に具体的に部品を作っていきます(^^g/~~
まず「リスト」レイヤーですが・・・
①メニューバー「挿入」→「新規シンボル」で「シンボルプロパティ」をだします。
名前を”リストM”、タイプを「ムービークリップ」にして「OK」をクリック。
※以下はサンプルに限ったひとつの手順を参考に示しているだけです。
※ここへテキストフィールドを入れても、一枚もののオブジェクトを入れても構いません！
②”リスト”ムービークリップ編集画面で、矩形ツールで１８０×４０の四角を描きます。
③それを選択した状態で、「挿入」→「シンボルに変換」。
名前を”リストプレート”、タイプを「グラフィック」にして「OK」。
※ここで「グラフィック」でなく「ボタン」にすればメニューボタンが作れます。
④「ライブラリ」を開いて、「プレート」グラフィックシンボルをステージに１５回ドラッグ。
１６個のプレートがステージに配置されます。
⑤「情報」パネル又は「整列」パネルを使って、編集画面中央を頂点にきっちり整列させてください。
⑥すべてを選択して「修正」→「グループ」でグループ化。
情報パネルでW=180,H=640、X=-90,Y=0（ポイント左上時） となっていることを確認。
※なっていなければ、「修正」→「グループ解除」で解除してから⑤の調整をしてください。
⑥レイヤーを追加して、適当に各プレート上に文字を入れてください。
⑦画面左上「シーン」をクリックして、元の作業画面に戻り、
「ライブラリ」から「リストM」ムービークリップをステージにドラッグ。
⑧「情報」パネルで X=110,Y=20 (ポイント中心時)に配置。
⑨「インスタンス」パネルで名前をここでは「list(半角英数)」としてください。
※①で付けた名前「リストM」は”シンボル名”。
※⑨で付けた名前「list」がスクリプトを使ってマシンが識別できる特定の「インスタンス名」です。
つぎに「枠」レイヤー・・・
ここは要するに特定の範囲にリストが見えるような「枠」ができれば方法は何でも構いません！
以下は憲ちゃん流のサンプルです。
①ムービーと同じ大きさの２５０×２４０の四角の塗り図形を描きムービーに合わせます。
②ダミーとしてレイヤーを追加し、「枠」レイヤーをロック。
③ダミーレイヤーに１８０×２００の四角の塗り（色を変える）図形と
「つまみ」が移動するバーとして１８０ピクセルの縦線を描きます。
④情報パネルで四角を X=110,Y=120 、縦線を X=224,Y=120 の位置(各ポイント中心時)に配置。
⑤四角と線を同時に選択してコピー、ダミーレイヤーを削除して「枠」レイヤーのロックを解除後、
２５０×２４０の四角の上に上書きするように「同じ位置にペースト」します。
⑥一旦選択を解除して、改めて中の１８０×２００の図形だけを選択し、Delキーで削除。
※こうすることでその部分がぽっかり穴があき、下の「リスト」がステージ上で見えます。
※ダミーレイヤーを使ったのは、穴の位置の微調整をしやすくするためです。
「つまみ」レイヤー・・・
①つまみになる丸図形（W=20,H=20）をバーの上に描きます。
②それを選択した状態で、メニューバー「挿入」→「シンボルに変換」。
「シンボルプロパティ」で名前を「つまみM」、タイプを「ムービークリップ」として「OK」。
③「情報」パネルで、X=224,Y=40(ポイント中心時)の位置に配置。
④「インスタンス」パネルで、マシン識別用の名前を「tumami（半角英数）」とします。
※これで「つまみ」もムービークリップになったので、一応部品は揃ったように思えますが・・・
※実はまだ解決すべき問題が残っています（笑）
※「つまみ」自体は上下にドラッグして移動させる部品です。
※ドラッグを可能にするためには「ムービークリップ」の中に「ボタン」を仕込む必要があります。
※2002年02月16日 (土) 16時42分「３Dアニメを使ったムービー」の記事の中の、
※2002年02月18日 (月) 22時15分＞ 憲ちゃん のレスを参照してください。
⑤ステージの「つまみインスタンス」を右クリックして、ショートカットメニューの「編集」をクリック。
⑥「つまみM」ムービークリップ編集画面で中央の丸図形が選択された状態で、
メニューバー「挿入」→「シンボルに変換」として、名前を「つまみB」、タイプを今度は
「ボタン」にチェックを入れて「OK」。
これで「つまみM」ムービークリップの中に「つまみB」ボタンが仕込まれた状態になります。
⑦「ボタン」が選択された状態で右クリック、ショートカットメニューの「アクション」をクリック。
アクションパネルでドラッグさせるための「ボタンアクション」を設定します。
⑧左窓「ツールボックスリスト」の”アクション”の中の”startDrag”をダブルクリック。
右の「スクリプトエリア」に on(release){startDrag("");}が入ります。
⑨”(release)”はクリック（マウスボタンが離れたとき）という意味ですから、
ここでは「マウスボタンが押し込まれている間」ドラッグできるようにしたいので、
”on(release)”部分をクリックして、パネル下の「イベント」のところで、
pressにチェックを入れ」、releaseのチェックを外します。
on(press){startDrag("");} に変わります。
※このままでは、自由自在にドラッグ移動できますので、ドラッグの範囲を限定する必要があります。
⑩「スクリプトエリヤ」の”startDrag("");”をクリック選択すると、下「パラメータ」欄が図のようになります。
ここで「矩形内に制限」にチェック。「左」「右」はX座標の動く範囲の指定ですから、
ステージに配置したX座標値（214）から動いてもらっては困りますので、両方とも「224」とします。
「上」「下」はY座標での動く範囲なので、「上」はステージに配置したY座標の初期値「40」、
「下」は移動後の最大値として「200」を入れてください。
⑪スクリプトの最後の行”{”をクリック選択してから、今度は”stopDrag”をダブルクリック。
続きに、on(release){stopDrag();} が入ります。
ここは「（押し込まれていた）マウスボタンが離れたら、ドラッグを中止」の意味になりますから
このままで良いですね！！
⑫以上で、上下（Y=40～200）の範囲でドラッグできる「つまみM」ムービークリップの完成です。
画面左上の「シーン」をクリックして元の作業画面に戻ってください。
※ここで「制御」→「ムービープレビュー」で「つまみ」の動作を確認できます。
※勿論「リスト」はまだ動きません（笑）
これですべての部品がそろい、あとは「アクション」レイヤーにアクションスクリプトで
「tumami」と名づけられた移動後の「つまみMインスタンス」の座標から、
「list」と名づけられた「リストMインスタンス」の座標を計算で求め、
それを連続的に表示する作業だけです。
そこでまずその計算式を考えなければなりません(^^g/~~
サンプルに従って具体的に説明すると・・・
X座標はいずれのインスタンスも動きませんから、ここではY座標だけを考慮すればよいですね！
「tumami」のY座標は、当初 Y=40。一番下へきたときは、Y=200 と設定したので、
その最大移動量は、200-40=”160ピクセル”。
「list」自体はこの場合、縦”40ピクセル”のプレートを１６枚継ぎ足して繋いだもので、
全体として縦幅が 40×16枚=”640ピクセル”ありますが、
実際に「枠（縦幅200ピクセル）」内に見えるのはプレート５枚分（200÷40）だけなので、
一番上にせりあがった状態で、最後から５枚（200ピクセル）分は残る状態になります。
したがって「list」の最大移動量は、640-200=”440ピクセル”ということになりますね(^^)
ということで、つまみ「tumami」の移動量からみたリスト「list」の移動量の関係（M）は・・・
（M）＝－（「list」の縦幅－枠の縦幅）/「tumami」の最大移動量 とあらわされます。
つまり・・・
移動後の「list」Y座標＝「list」の初期Y座標－「tumami」の移動量×（M）
ここで”「tumami」の移動量”というのは、
移動後の「tumami」Y座標－「tumami」の初期Y座標
ですから、
実際にそれぞれの数値を当てはめると・・・
移動後の「list」Y座標＝20-{(移動後の「tumami」Y座標)-40}×{（640-200）/（200-40）}
＝20-{(移動後の「tumami」Y座標)-40}×2.75
となります(*^-^*)
では、これを「アクション」レイヤーに「フレームアクション」として書いてみます。
その前にタイムライン全体を３フレームまで延ばしておいてください。
オブジェクト（ムービークリップ）に値を設定するアクションは”setProparty”です。
①１フレームをクリックして「アクションパネル」のアクションから”setProparty”をダブルクリック。
右のスクリプトエリアに”setProparty”が入ります。
②「プロパティ」右横の▼をクリックしてポップアップから”_y(Y Position)”を選択。
※Y座標という意味。
③「ターゲット」欄に値を設定すべき「インスタンス」の名前”list”と打ち込みます。
④「値」欄。ここはまず”list”の初期値”20”を打ち込み、右端の「式」にチェック。
これで、ムービーが再生されたときまず”list”をY=20の位置にセットします。
⑤２フレームに「空白キーフレームを挿入」し、同様にアクションから”setProparty”をダブルクリック。
⑥「プロパティ」右横の▼をクリックしてポップアップから”_y(Y Position)”を選択。
⑦「値」欄に上の計算式を打ち込みますが、”移動後の「tumami」Y座標”というのは・・・
スクリプトとしては”tumami:_y”←このように記述しますので、
20-(tumami:_y - 40)*2.75 と打ち込み、右端の「式」にチェック。
※この画面で上の文字をそのままコピーして「値」欄にペーストしても有効です。
⑧３フレームに「空白キーフレームを挿入」。アクションから”go to”をダブルクリック。
gotoAndPlay(2) として２フレームと３フレームのループを作ります。
したがって、以後はこのループの中で常に”tumami”の現在座標から⑦の計算式で求められる値を適用して
”list”の位置が移動することになります。
「ムービープレビュー」で動作確認してください。
フ～～～～ゥ...以上で説明おわりですが・・・
どうかなぁ～～～(;^_^Aアセアセ・・・
サンプルのflaファイル←ここを右クリックして、「対象をファイルに保存」でHDに取り込んで
それを見ながら分析してみてくださいね(*^-^*)
|
|
Response 02
|
| 2002年02月26日 (火) 18時24分＞
弘味
|
|
ゆきさん♪はじめましてm(._.*)mペコッ！愛知の弘味ですぅ♪
これいい(☆。☆) キラーン!!もう少ししたら、スクロールバーの作り方を聞こうと思ってたところなんですぅ！！ということで早速、保存(*'ー'*)ふふっ♪
座標位置とかが複雑そうだけど(ー'`ー;)ムムッ！今のindexページとmenuページを一緒にして、なおかつ憲ちゃんみたいにリンクのページを作りたいなあって思ってたところなんです。これを利用すれば、８００×６００ピクセル内に１ページ全部を表示出来て、見る人にとっても親切ですよね♪
もっと時間が欲しい。。。ただ今、パソの周りにレイアウトやら座標位置を書いた広告が散乱してます。そのうちダンナに怒られそう(＾▽＾ケケケ！
http://www.katch.ne.jp/~kaz-hir/index.htm
|
|
Response 03
|
| 2002年02月26日 (火) 18時35分＞
ゆき
|
|
憲ちゃんありがとう☆
うわぁ～。スゴイスゴイ！！１晩でこんなに詳しい解説がっ！
とってもとっても嬉しいです！
ゆきはどれが初級か中級かもわからない、超超超初心者です。
でも親切に教えてくれてありがとうございました。
今まで高いお金を出していろんな本を買ってきたけど、ココが１番親切でわかりやすいです。
この解説を参考に、頑張ってみます。
ホントにホントにうれしい☆ありがとう☆
弘味さん ハジメマシテ☆
きっとまた、わからないことがあったらココに遊びに来るので
以後よろしくです！！
一緒にテキストフィールド 頑張りましょう☆
|
|
Response 04
|
| 2002年02月27日 (水) 10時22分＞
憲ちゃん
|
|
ゆきさん(^^g/~~
どこまで上手く説明できたか・・・自信ないけど(;^_^Aアセアセ・・・
もし、意味がわからない単語とか理解できない部分があっても、
とりあえずflaファイルも参照しながら書いてあるとおりに操作してみてください！！
理屈は、そのあとで解ってくることもありますよ(^^g/~~
弘味さん！
「部品」を弘味さん風に変えて試してくださいね(*^-^*)
|
|
