アナログ時計の針を透過させたいのですが・・・

質問

Flash MXで、アナログ時計を作っています。
針を透過させて、バックグランドの文字盤が透けて見えるようにしたいのですが、どうやっていいのかわかりません。
どなたか教えてもらえますか？(>_<)

ちなみに、Flash MX経験は、まったく初心者です。
サンプルにあったアナログ時計を改良して作ろうとしています。

回答No.1

DPE · ベストアンサー

「 Samples 」フォルダにある「 Clock.fla 」のことで、よろしいでしょうか？
サンプルを改造する時は、コピーを取ってコピーの方を使うようにしましょう。オリジナルをそのまま保存しておけば、失敗した時に元に戻すのも簡単です。

このサンプルでは、時針・分針・秒針が、それぞれ独立したレイヤーに配置されています。
それぞれの配置レイヤーは次の通りです。

　・時針 → hour hand
　・分針 → minute hand
　・秒針 → second hand
　・時針の影 → hour hand shadow
　・分針の影 → min hand shadow

ここではとりあえず、分針を半透明にする方法をご紹介します。同じ要領で、他の針も半透明にできます。

時針・分針とそれぞれの影が、一箇所に重なって配置されています。また、当然ながら文字盤の上に針が配置されている構造になっています。
分針を選択するつもりが、他の針や影、文字盤などを選択したり動かしてしまったりしては大変です。分針が配置されているレイヤー「 minute hand 」以外の針のレイヤーを、編集不可（ロック）にしておきましょう。
また、影と時針が表示されていなければ、分針だけを選択しやすくなります。
レイヤーの名前の横に、点が２つ並んでいるかと思います。これが、それぞれのレイヤーの表示・非表示と、編集の可否を決めるスイッチになっています。
左側が表示・非表示、右側が編集の可否のスイッチです。クリックする度に ON / OFF が切り替わり、非表示・編集不可の時は、それぞれ×・錠前のアイコンが表示されます。
「 minute hand 」以外のレイヤーの、右側の点をクリックして、レイヤーをロックしてください。一部のレイヤーは、最初からロックされています。
それから、「 hour hand 」「 hour hand shadow 」「 min hand shadow 」レイヤーの左側の点をそれぞれクリックし、これらのレイヤーを非表示にします。すると、表示される針が分針自身だけになり、選択しやすくなります。

ツールボックスで「矢印ツール」（オブジェクトを選択するツール）を選び、分針をクリックして選択します。
この状態で「プロパティ」パネル（普通はステージの下にドッキングされています）を見ると、分針に関する様々な情報が表示されるかと思います。
この分針の絵はムービークリップになっています。ムービークリップの詳細はここでは割愛しますが、Flash の基本中の基本ですので、ヘルプや解説書などでしっかり研究してください。
「プロパティ」パネルの右の方に、「カラー」というリストがあります。このリストでは、ムービークリップの色や透明度を操作できます。最初は「なし」になっています。
リストから「アルファ」を選ぶと、すぐ横に％のボックスが表示されます。ボックスの横の▼マークをクリックするとスライダが表示され、ドラッグして透明度を変更できます。ご希望の透明度になるように調節してください。ボックスに直接数値（％）を入力しても設定できます。
これで分針の透過は完成です。

同様に、時針だけを表示・編集可能にして、アルファを設定してみてください。
時針の「 hour hand 」レイヤーは非表示・編集不可にしてありますので、表示・編集可否の切り替えをお忘れなく。

この方法では、針全体が半透明になります。
針の先だけ・軸だけを半透明にしたいとなると、これはレイヤーに配置されているムービークリップの透明度の操作だけでは無理で、ムービークリップの元になっているシンボルの方を変更する必要があります。
レイヤーに配置されているムービークリップは、インスタンスと言って、シンボルの分身のようなものです。１つのシンボルからいくつでもインスタンスを作ることができ、あるインスタンスは半透明に、あるインスタンスは透過なしというように、１つの絵から違う外観の絵を作ることもできます。また、インスタンスを透過しても、元のシンボルは透過されないままです。
しかし、シンボル自体が変更されると、そのシンボルから作られていたインスタンスは全て、その影響を受けて変化します。

シンボルは「ライブラリ」というウィンドウにまとめられています。「ウィンドウ」→「ライブラリ」で、ライブラリウィンドウを開いてください。
この中の「 minutehand 」が、分針のシンボルです。
ところで、分針の影と思われるシンボルは、ライブラリの中には見当たりません。これは、分針のシンボルからインスタンスを作り、先述のようにアルファを操作する要領で半透明にし、影のように見せているためです。
つまり、分針のシンボル「 minutehand 」に変更を加えると、分針自身と同時に分針の影も影響を受けます。

ライブラリウィンドウの「 minutehand 」の名前の横にあるアイコンをダブルクリックすると、シンボル「 minutehand 」を編集できるようになります。
まずは、透過したい部分を選択します。
ツールボックスから「矢印ツール」を選び、透過したい部分を四角で囲うようにドラッグして範囲を選びます。
細かい網かけのような模様に変わったところが、編集対象として選択された部分です。この部分の、線の色や塗りの色などを変更できることを示しています。
針の絵には線がありませんので、変更できるのは塗りの色だけです。半透明の色は、「カラーミキサー」パネルを使って作ることができます。
タイムラインの下に、「 Scene 1 」「 minutehand 」と書かれている部分があります。編集が済んだら、「 Scene 1 」をクリックしてシーンの編集に戻り、「ムービープレビュー」で確認してみてください。

なお、先述の要領でアルファ値を設定している場合、シンボルを透過した上に更に透過が加わることになるため、表示がかなり薄くなってしまいます。
インスタンスの透過を解除するには、「カラー」のリストから「なし」を選択してください。

長くなってすみませんでした。
不明な点がありましたら、補足してください。

補足

わぁー！どうもありがとうございます！
できちゃいました・・・(~v~)
マニュアル読むのが苦手な私には、どこをどう操作したらよいかチンプンカンプンでしたが、詳しい手順でご説明いただいたおかげで、難なく出来ました！
超うれしいーです！(^▽^)
甘えついでに、もう少し教えていただいてもよろしいですか？
『半透明の色は、「カラーミキサー」パネルを使って作る』とありましたが、カラーミキサーパネルとは、カラーパレットとは違うのでしょうか？
それもと、カラーパレットのどこかに色を透過する設定のできるところがあるのでしょうか？？
カラーミキサーパネルのありかが、不明でした。。。
(>_<)

あと、針はFlash MX上で作らないと、外部から取り込んだ画像の針では、当然、透過はできないんですよね！？

回答No.4

mach999

針は画像ファイルなんですかね。
それなら別にPhotoshopなどで半透明画像を作らなくてもFlashの機能だけを使って実現できます。

(1)画像ファイルを読み込む（ステージに読み込めば良いです）。

(2)読み込んだ画像を右クリック→シンボルに変換

(3)シンボルに変換した画像シンボルを選択してプロパティのカラー設定でアルファを選択→透明度を好きなように設定する。

このようにした方がムービー内で動的に透明度も変えられるし簡単で良いのではないでしょうか？

お礼

いろいろ触っているうちにやり方が少しづつわかってきたようです。
どうもありがとうございました。

回答No.3

DPE

Photoshop はあまり詳しくないのですが・・・
レイヤーを透過した状態で、「 Web用に保存」の「 PNG-24 」形式で保存してみてください。
PNG-24 は色や透過の状況によっては極端にファイルが大きくなってしまうこともあるそうですので、ご注意を。
Photoshop で分からないことがありましたら、「グラフィックソフト」のカテゴリーで質問してみてください。詳しい方がたくさんいらっしゃいます。

私は「サンプルで学ぶ！Flash 5J 」で描画ツールの使い方とアニメの作り方を、「 GO!GO!FLASH 5 [ゲームを作ろう編]」で ActionScript の基礎を覚えました。
Flash 5 の時代に買った本ですので手に入りにくいでしょうし、MX や MX 2004 が主流の今では、内容も少々古くて不足だと思います。
MX や MX 2004 の解説書のことはよく分かりませんが、以前、こんな質問も出ていましたので、ご参考までに。

　・これからFLASHを勉強します
　　http://okweb.jp/kotaeru.php3?q=764173

ネット販売や取り寄せで買うと、これならと思って買ったはずが、意外に難しかったり分かりにくかったりします。やはり、書店などで実際に内容を確かめてから購入された方が、失敗は少ないかと思いますよ。
できれば、描画・アニメと ActionScript でそれぞれ解説書を手に入れるといいですね。どちらもそこそこに解説されている本だと、結局中途半端で使いにくいようなので。
パソコンショップや大型電器店などの方が、パソコンに関する書籍は書店よりも品揃えが豊富なこともあります。
Photoshop CS など、せっかく高価なソフトもお持ちなのですから、いろいろ試したり研究したりして、楽しい作品を作ってください。

お礼

いろいろご説明いただき、ありがとうございました。
使っているうちに、何となくわかってきた部分が増えてきました。
書籍も参考にさせていただきます。

回答No.2

DPE

＃１です。

「カラーパレット」では半透明の色を作れませんし、グラデーションをかけるにしても、予め登録されているパターンしか利用できません。
その分、色の作り方は簡単になっています。単に色を塗ったり線の色を変更したいだけであれば、「カラーパレット」でも充分です。
「カラーミキサー」は、もう少し高度な色を作りたい時に使います。「ウィンドウ」→「カラーミキサー」で表示できます。
パネルを見ると、ＲＧＢの他に「アルファ」という項目があります。ムービークリップの「アルファ」と同じく、透過する度合いのことです。
例えば、カラーピッカーから拾った色に「アルファ」 50 ％を設定すると、半透明の色で塗りつぶしたり、線を描画したりできるようになります。
「カラーミキサー」の、バケツのアイコンの横にあるリストは、塗りの種類を決めるためのものです。グラデーションをかける時や、ビットマップで塗りつぶす時に利用します。
グラデーションのかけ方・グラデーションをかける方向などについては、長くなりますので省略させていただきますが、半透明の色を利用したグラデーションや、複数の絵をまたいだグラデーションをかけることも可能です。

外部から読み込んだ画像でも透過はできますが、少々工夫が必要になります。
透過するだけなら、最初から透過した状態の絵を、PNG 形式という、透明度の情報も保存できる形式で保存して Flash に読み込むと、何もしなくても透過されます。
ただし、今回の時計のサンプルでは、針の動きを ActionScript という、プログラムのようなもので付けています。
（ actions というレイヤーに、a と書かれているフレームがあります。これは、ActionScript が設定されている印です）
読み込んだ PNG 形式などの画像はグラフィックというタイプのシンボルになるのですが、グラフィックシンボルのインスタンスは ActionScript で制御できません。
しかし、要するにグラフィックではなく、ムービークリップになってさえいればいいわけです。
例えば、分針のシンボル「 minutehand 」の編集画面にして、描かれている針の絵の代わりに、読み込んだグラフィックシンボルのインスタンスを配置してみてください。ライブラリウィンドウからドラッグしてくるだけで、配置できます。
内容的にはグラフィックシンボルのインスタンスを持っていることにはなりますが、「 minutehand 」のタイプはムービークリップです。
ムービークリップであれば、レイヤーに配置して＃１の最初にご紹介した方法でも透過できます（読み込んだ画像が PNG 形式以外の場合や、透過されていない絵の場合でも透過できます）し、ActionScript で制御するにも問題はありません。

Flash の解説書は、初心者向けから上級者向けまで多数そろっています。ここでは説明しきれない内容や、文章だけでは分かりにくいことを図や写真で詳しく解説されているもの、ActionScript に内容を絞って解説されているものなど、いろいろ出版されています。
ヘルプが分かりにくいのでしたら（まあ、一般にヘルプというやつは、どれも分かりにくく書いてありますね　^^;）、書店で実際に見て、ご自分に合いそうなものを１冊、手元に置かれてはいかがでしょう。

お礼

ありがとうございます！！

カラーミキサーの出し方わかりました。
＞ グラデーションのかけ方・グラデーションをかける方向などについては、
＞ 長くなりますので省略させていただきますが、半透明の色を利用したグラデーションや、
＞ 複数の絵をまたいだグラデーションをかけることも可能です。
はい、なんとなくわかりそうなので、自分でさわって、いろいろと試してみようと思います。

＞ 透過するだけなら、最初から透過した状態の絵を、PNG 形式という、
＞ 透明度の情報も保存できる形式で保存して Flash に読み込むと、
＞ 何もしなくても透過されます。
PNG画像の透過は、フォトショップで出来ますでしょうか？
手元にPhoto Shop CSとImage Readyというソフトを持っていますが、
透過の仕方がイマイチわかりません。
日ごろ、JPGやGIFばかり扱っていて、あまり高度な使い方をしていないもので・・・(>_<)
もし、ご存知でしたら、ご教授下さいませ。m(__)m

ちょっと苦戦しましたが、さわっているうちにやり方がわかって、
外部から取り込んだ画像を、透過してムービークリップし、
針にすることができました！うれしいです！！
ほんとうに、ご親切にありがとうございました。
(^▽^)

他にもお聞きしたいことがあるのですが、文字だけでご説明いただくもの
大変だと思いますので、このへんで我慢しようと思います。
（ここまでだけでもわかることができて、すごく助かりました。m(__)m）

最後に、ＤＰＥさんがお勧めのＦｌａｓｈの解説書が、
もしありましたら、書籍のお名前をお教えいただいてもよろしいでしょうか？
ネットで探してさっそく購入してみようと思いますので。
ちなみに、「おしえて!!FLASH MX 2004 ActionScript」という書籍を
先日、購入しましたが、基本的なことを理解できていない
私にはまだ早かったようです。。。(^_^;