テキストフィールドを半透明にするには

質問

FLASH 8で、
インスタンス名「mc」のムービークリップに
テキストフィールドと適当な図形を絵画し、
ステージに貼り付け、フレームアクションに
　　_root.mc._alpha = 50;
を追加したところ、絵画した図形は半透明になりますが、
テキストフィールドの文字は半透明になりません。
両方とも同じように半透明にしたいのですが、どうすればいいでしょうか。

よろしくお願いします。

回答No.1

DPE · ベストアンサー

テキストを選択し、「プロパティ」パネルで設定を確認してください。

　・デバイスフォント（名前が” _ ”で始まるフォント）を使っている
　・タイプが「ダイナミックテキスト」もしくは「テキスト入力」になっている

この、どちらかに該当していませんでしょうか？
どちらか一方にでも該当する場合、テキストに対するアルファの操作が無効になります。
ちなみに、回転やマスクレイヤーを使ったマスクも機能せず、テキストが表示されなくなります。

心当たりがありましたら、「プロパティ」パネルの左上の方にあるリストから「静止テキスト」を、その右隣のリストから、名前が” _ ”で始まるフォント以外のフォントを選択してみてください。

テキストフィールドのタイプを「静止テキスト」にしたテキストは、swf ファイルに書き出す際に描画ツールで描いたようなパスに分解され、文字ではなく絵として記録されます。
そのため、再生する側のパソコンに同じフォントが入っていなくても意図した通りのデザインで表示されます。

” _ ”で始まる名前のフォントを、デバイスフォントといいます。
デバイスフォントを使った静止テキストは分解されず、文字として記録されます。
これはこれで利点もあるのですが、デバイスフォントを使うと回転・アルファ・マスクレイヤーを使ったマスクが機能しなくなります。

テキストのアルファ・回転・マスクが上手くいかないという相談を、このサイトでも時おり見かけるのですが。
よくある原因は、デバイスフォントを選択していることです。
フォントのリストに最初に表示されるのがデバイスフォントであるためか、どうも、デバイスフォントをうっかり選んでしまって失敗する方が多いようです。

フォントのリストの右下の方に、フォントのレンダリング方法を決めるリストがあります。
この中から「デバイスフォントの使用」を選んだ時も、” _ ”で始まるフォントを選んだ時と同様の扱いになります。
回転・アルファ・マスクレイヤーを利用する作品では、これ以外のレンダリング方法を選択してください。

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

先ほど、テキストフィールドのタイプの話をしましたが。
テキストフィールドのタイプを決めるリストで「ダイナミックテキスト」か「テキスト入力」を選んだ時は、デバイスフォントを使用していなくても回転・アルファ・マスクレイヤーによるマスキングは無効になります。

マスクについては、Flash Player 6 からはムービークリップの setMask という機能を使うことで「ダイナミックテキスト」「テキスト入力」を選んだ時もマスクが利用できるようになりました。
（ただし、一部制限が付きます）

「ダイナミックテキスト」「テキスト入力」でアルファを利用するには、

　1)テキストのアウトラインを埋め込む
　2) ColorMatrixFilter でアルファの変換をかける

といった方法があります。

1) は古いバージョンの Flash Player でパブリッシュする場合も使える方法です。
ただし、フォントファイルに含まれる字を絵として記録するということですので、埋め込む字数が多いと swf ファイルの容量が大きくなります。
和文フォントはパスが複雑な上に字数が多く、日本語１セット分を埋め込むと２メガ３メガは当たり前の大容量になりますから、日本語を利用する時には不向きです。

なお、必要な文字だけを埋め込むこともできます。
埋め込む文字は、「プロパティ」パネルで「埋め込み...」ボタンを押すとパネルが開き、設定することができます。
フォントのレンダリングが「デバイスフォントの使用」になっている時はこのボタンは無効になっていますので、これ以外のレンダリング方法を指定してください。

2) は Flash Player 8（作成ツールは Flash 8 ）でできるようになったワザです。
ダイナミックテキストだろうがデバイスフォントだろうがアルファを有効にするスグレモノではありますが、欠点もいくつかあります。

まず、文字をなめらかに表示する処理（アンチエイリアス）が行われないため、ドットが目立って汚くなります。
（フォントを埋め込んだ場合は、設定されているレンダリング方法に従ってアンチエイリアス処理が行われます）
また、ムービークリップが極端に大きかったり（縦または横のサイズが 2880 ピクセルを超えるものは不可）、メモリが不足していて作業領域を確保できない場合はフィルタの処理が無効になりますし、処理も少々重くなります。

仮に、ステージにムービークリップ” mc ”があるとします。
このムービークリップのアルファを 50 ％にするスクリプトは、次のように書くこともできます。
ムービークリップにダイナミックテキストやテキスト入力のテキスト、およびデバイスフォントを使ったテキストが含まれていても、テキストごと半透明になります。

このスクリプトはメインのタイムラインに設定してください。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）

　import flash.filters.*;

　//アルファの変換行列を作成
　alpha_ratio = 50 / 100;
　trans_mtx = new Array();
　trans_mtx =
　[
　　1 , 0 , 0 , 0 , 0 ,
　　0 , 1 , 0 , 0 , 0 ,
　　0 , 0 , 1 , 0 , 0 ,
　　0 , 0 , 0 , alpha_ratio , 0
　];

　//カラー調整フィルタを作成
　color_mtx = new ColorMatrixFilter( trans_mtx );

　//ムービークリップにフィルタを適用
　effect = new Array();
　effect.push( color_mtx );
　_root.mc.filters = effect;

変数 alpha_ratio の

　alpha_ratio = 50 / 100;

↑この 50 の部分が、いわゆる_ alpha プロパティを操作する時のアルファ値に相当します。
ColorMatrixFilter ではアルファは％ではなく割合で計算しますので、0.0 ～ 1.0 までの間で指定します。

_alpha プロパティを操作しますと、効果が重ねがけになります。
例えば _root.mc._alpha = 50; を実行した後で ColorMatrixFilter でアルファを更に操作した場合は、50 ％の更に 50 ％、つまり、オリジナルの 25 ％の透明度になります。

ヘルプの「 ActionScript 2.0 リファレンスガイド」で ColorMatrixFilter の項目を見ていただくと分かりますけれど、内部では多数の乗算を含む非常に複雑な計算をしていますから、処理は重くなります。

デバイスフォントや静止テキスト以外のアルファの操作は、この通り、一応は抜け道があるものの、いずれも、ファイルの容量や処理が重くなるなどのリスクがつきまといます。
テキストを半透明にしたい場合は、やむをえない事情が特にないのでしたら、素直に静止テキストにしてデバイスフォント以外のフォントに設定することをオススメします。

お礼

返信が送れて申し訳ありません。
フォントが「_ゴシック」に選択されていました。
まさかゴシックの種類でアルファが利かなかったりするとは思いませんでした。

とても助かりました。
ありがとうございましたm(_ _)m

回答No.2

noname#35109

＃１の方の(2)ほどハイテクニックではありませんが，
以下は，もっぱら私がよく使う方法です。
テキストはダイナミックテキスト，テキスト入力の場合です。

背景を文字よりも上のレイヤーにも，
グラフィックシンボルもしくはムービークリップシンボルとして用意し，
その文字より上のレイヤーの背景のアルファを 0％→100％ と変化させます。
すると，テキストのアルファが 100％→0％ に変化したように見えます。

　　　　　　　　アルファ0　　→　　→　　　100
　□　レイヤー　筆・・|●>---------->|●| ←背景
　□　レイヤー　筆・・|●/////////////[]| ←テキスト
　□　レイヤー　筆・・|●/////////////[]| ←背景

ステージそのものを背景としている場合は，
背景を２重に用意する必要はなく，
例えば背景が白であれば，
テキストエリアにかぶるくらいの白い塗りの長方形を用意して，
それをグラフィックシンボルもしくはムービークリップシンボルにして，
その白い長方形のアルファを 0％→100％ と変化させます。

やっかいなのが，
「あけまして」と「おめでとう」のように複数のテキストエリアがあって，
そのテキストエリアを順次消す場合ですが，
この場合は，

　□　レイヤー　筆・・|○　　　　　[]|●>------->|●| ←背景
　□　レイヤー　筆・・|●//////////////////[]|●| ←おめでとう
　□　レイヤー　筆・・|●>------>|●///////////| ←背景
　□　レイヤー　筆・・|●////////////////////[]| ←あけまして
　□　レイヤー　筆・・|●////////////////////[]| ←背景

のようにします。
背景を切っても良い場合は，
文字にかぶさる部分の背景だけを切ってグラフィックシンボルもしくはムービークリップシンボルにして，
順次アルファを変えれば良いのですが，
素材などの場合は，
文字は外部テキストファイル，背景は外部JPEG，などで用意してもらい，
それをロードする形になってしまいます。

その場合，
背景を切るわけには行かないので，上のように層状にします。
背景全体のアルファを変えるとどうしても動きが重くなりますから，
なるべく避けたいですが，
テキストが静止テキストでなく，ダイナミックテキストやテキスト入力の場合，
＃１の方の書かれている方法か，上記の方法というかなり無駄な労力が必要となります。
＃１の方と同じく，静止テキストにしてデバイスフォント以外のフォントに設定することをオススメします。

お礼

詳しい説明ご苦労様です。
解決しました。ありがとうございました。