【緊急】スクロールバーの色の変更

質問

いつも緊急ですみません。
Flash8でコンポーネントのスクロールバーの色を変更したいのです。白だと色々と見栄えが…（汗
QNo.2770806さんの質問や、こちらのサイトを見たりしたのですが、よく分かりません。

http://livedocs.adobe.com/flash/8_jp/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00003003.html

コンポーネントのサンプルを立ち上げると色々出てきますよね？
どれの色を変えたらよいのかがさっぱりです。
どうしたらよろしいのでしょうか？

回答No.1

DPE · ベストアンサー

コンポーネントの外観（スキン）のサンプルは２種類あります。
普通に UIScrollBar のコンポーネントを利用する時のスキンは、HaloTheme.fla ファイルに収められているものと同じです。

HaloTheme.fla のスキンは Windows XP 風のデザインになっています。
しかし、それだけに部品のあちこちにグラデーションのかかったシンボルが使われていたり、１つの部品もいくつかのシンボルを組み合わせて作られているなど複雑で、バランスのいい配色に１つ１つ変更するのはかなりの手間になると思います。

HaloTheme.fla を開けてみた方が早いでしょう。
Flash をインストールしたフォルダ→言語フォルダ（日本語版なら” ja ”）→ Configuration → ComponentFLA の中にあります。
「ファイル」→「読み込み」→「外部ライブラリを開く」で、HaloTheme.fla のライブラリだけを開くことができます。

HaloTheme.fla のライブラリを開いたら、Flash UI Components 2 → Themes → MMDefault とフォルダを展開してください。
この中にある「 ScrollBar Assets 」が、UIScrollBar コンポーネントのスキンと同じものです。

中には大量のシンボルが登録されていて面食らってしまいますが、大体の内容は以下の通りです。

　・「 States 」フォルダ
　　　スクロールバーのボタン・スライダなどの各部品。
　　　ボタン・スライダをクリックした状態なども含まれているため、シンボルが多くなっています。

　・「 Elements 」フォルダ
　　　ボタン・スライダなどを構成する部品。
　　　これを組み立ててボタンなどにしたものが、「 States 」フォルダ内のシンボルです。

　・○○○ Assets シンボル（３つあります）
　　　先の２つのフォルダにあるムービークリップシンボルをまとめたもの。
　　　大量の部品をリンケージで一気に書き出すことが、主な目的です。
　　　シンボルの構成や変更した結果のイメージを確認したい時にも便利です。

従って、スクロールバーの外観に直接関係があるのは、ボタン等を作るのに使われている最も根本的な部品である、「 Elements 」フォルダに収められたシンボルということになります。

***********************************

外部ライブラリは編集できませんし、HaloTheme.fla のシンボルを編集したところで今使っているスクロールバーの外観は何も変わりません。

開いたライブラリから、「 ScrollBar Assets 」フォルダを作業中の fla ファイルにドラッグしてください。
シンボルがフォルダごとコピーされます。
実際のムービーにはコピーした方のシンボルが書き出されます。

「 Elements 」フォルダを開けると、これまた大量のシンボルが登録されています。
シンボルをざっと見てみますと、名前に” Theme ”が付くムービークリップがいくつかあります。

UI コンポーネントには”テーマカラー”と呼ばれる仕組みがあります。
ボタン等を操作した時の色をスクリプトで制御し、ムービー全体のデザインを簡単に統一できるようにしよう、という発想から生まれたものです。
この仕組みを実現させるためのシンボルが、名前に” Theme ”が付くムービークリップです。

名前に” Theme ”が付いているシンボルの色はスクリプトで変更するための仮のものなので、さしあたって無視しても構いません。
他のムービークリップシンボルも、スクリプトで制御する時のためにムービークリップにしたものばかりで、中にはグラフィックシンボルが入っています。

つまり、残ったグラフィックシンボルが、スクロールバーの外観そのものに関係しているシンボルということです。
変更すると先の○○○ Assets シンボルのプレビューにも反映されますので、確認しながら作業を進めるといいでしょう。

なお、テーマカラーですが。
テーマカラーはスクリプトで変更できます。

　スクロールバーのインスタンス名.setStyle( "themeColor" , 色 );

色は HTML などでもおなじみの 16 進数表記" 0xRRGGBB ”の形式で書くか、コンポーネントで定義されている色名で指定します。

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

HaloTheme.fla と同じフォルダに、SampleTheme.fla という、もう１つのスキンのサンプルがあります。
同様の手順でライブラリを開けてみると、HaloTheme.fla とよく似たフォルダ構成になっています。
HaloTheme.fla と同じく、Themes → MMDefault にある「 ScrollBar Assets 」フォルダの中にスクロールバーのスキンのサンプルが入っています。

中のシンボルの数は先の HaloTheme.fla と比べるとかなり少なく、「 Elements 」フォルダ内のシンボルはたったの６つだけです。
コピーすると” Brdr○○○”という名前のシンボルが４つほど、一緒にコピーされてきますが、これはスクロールバーを立体的に見せるための背景（背景と陰影）です。
外見に関係するシンボルは、背景を合わせても 10 個しかありません。

編集するのはこれらだけですから、HaloTheme.fla のスキンよりも簡単です。
その代わり、Windows クラシックスタイルのスクロールバーに近い、単調な感じのデザインになります。

***********************************

SampleTheme.fla のスキンを使った時は、setStyle で様々な部分の色を指定できるようになります。
書式は

　スクロールバーのインスタンス名.setStyle( "変更する部分の指定" , 色 );

です。

変更する部分の指定には、以下の文字列のいずれかを渡します。

　・ scrollTrackColor
　　　トラック（スライダが移動するレールの背景）の色。
　・ symbolColor
　　　上下のボタンに付いている矢印の色。
　・ symbolDisabledColor
　　　スクロールバーが無効の時の矢印の色。
　・ borderColor
　　　ボタンやスライダの、最も濃い影の色。
　・ highlightColor
　　　ボタンやスライダの表面の色。
　・ shadowColor
　　　ボタンやスライダに立体感を出す、エッジの色。

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

コンポーネントとは、編集可能なパラメータを持つ”ムービークリップ”です。
ムービークリップを拡張したものですから、ムービークリップで使えるスクリプトは、基本的にはコンポーネントでも使用できます。
（ただし、一部のスクリプトはコンポーネントが内部で使用していることがあり、使うとコンポーネントが正常に動かなくなるなどの支障をきたす場合もあります）

ムービークリップの色を変更する、Color というクラスがあります。
厳密には Flash Player 8 からは使用を避けるクラスに指定されてしまいましたが、まあ、今回はその話は置いておきましょう。

Color クラスにはムービークリップを１色で塗りつぶす setRGB メソッドと、色調補正のように RGB の各要素ごとを細かく変化させる setTransform メソッドがあります。
先述の通り、コンポーネントは本質的にはムービークリップですから、全体の色調補正程度でよければ Color クラスでも変更できます。

スクロールバーのインスタンス名を” sc_bar ”としますと、大体、次のようなスクリプトで色を変換できます。

（↓各行頭に全角のスペースが入っています。コピーする際はご注意ください）

　//カラー変換オブジェクトを作成
　clr = new Color( sc_bar );
　c = new Object();

　//カラー変換データを作成
　//赤を強くする
　c.ra = 100;
　c.rb = 255;
　c.ga = 100;
　c.gb = 0;
　c.ba = 100;
　c.bb = 0;
　c.aa = 100;
　c.ab = 0;

　//カラー変換を適用
　clr.setTransform( c );

setTransform は、インスタンスの色を変更する”詳細”と同じ機能です。
最初からスクリプトで設定しようとすると難しいので、とりあえず”詳細”で実物を見ながら変換データを作ると作りやすいと思います。

コンポーネントのインスタンスは「カラー：」の項目が選択できないようになっていますから、代わりのシンボルを用意します。
黒い線に白で塗りつぶした図形をシンボルに変換して、ステージに仮に配置してください。
このインスタンスが、スクロールバーの代わりになります。用が済んだら削除してください。

これを選択した状態で、「プロパティ」パネルにある「カラー：」のリストから”詳細”を選んでください。
隣にある「設定」ボタンを押すと、赤・緑・青とアルファのそれぞれに色合いを調節するリストが出てきます。
左側の項目（要素の割合）は -100 ～ 100 ％、右側の項目（オフセット）は -255 ～ 255 で設定します。
インスタンスの線と塗りの色を見ながら、スライダを調節してください。
ご希望の色になったら、各要素の割合とオフセットをメモしておきます。

スクリプトでは、ra のように” a ”が付く要素が％、rb のように” b ”が付く要素がオフセットに対応しています。
先のメモを見ながら Object 型の変数の各要素に数値を指定すると、スクロールバーもほぼ同じような色に補正されます。

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

スキンを編集する方法は他にもありますが、自分で１から描画するのでなければ、この３つくらいが無難な線でしょうか。
まとめますと、

　・ HaloTheme.fla のシンボルをコピーする方法
　　　デザインはデフォルトのスクロールバーと同じ。
　　　それだけにシンボルの構成が複雑で、数も多い。
　　　グラデーションを使うことまで考えると、編集に手間がかかる。

　・ SampleTheme.fla のシンボルをコピーする方法
　　　シンボルの構成が単純・色も単色なので、変更しやすい。
　　　スクリプトでも色を指定できる。
　　　ただし、デザインはそれなり。

　・ Color.setTransform で色調補正をかける方法
　　　シンボルをいじらずスクリプトを書くだけで、手段としては手軽。
　　　しかし、変換データを作るのが難しく、
　　　更に、希望通りの配色に変換できるとは限らない。

どの方法も一長一短があります。
時間とデザインと相談してご検討なさってください。

デザインを妥協できるのなら、SampleTheme.fla のシンボルを使う方法がオススメです。
SampleTheme.fla のシンボルはコピーしただけだとムービーに書き出されません。
３つある「○○○ Assets 」シンボルのリンケージプロパティで、「最初のフレームに書き出し」にチェックを入れてください。

お礼

ありがとうございます。
大変そう…ですがやってみます。
お返事遅れてすみませんでした。