FC2ブログ
スポンサーサイト
--.--.-- (--:--) スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
追記:フィルタ機能(Flash8以降)
2005.12.06 (19:34) [ 描画 ]影つき窓trackback(0)comment(0)
以前紹介しました。ウィンドウに影をつけるについて
Flash8より備わったフィルタ機能を利用して、アクションスクリプト
からでも作成できる事が分かりました。

詳しくは Hakuhin様のHakuhin's home page  の「フィルタ機能について」の
「ドロップシャドウ」の記事を参照にしていただくのをお勧めいたします。

まぁ私の方法もアクションスクリプトが苦手な方には有効かも知れないので
気に留めていただければ。
スポンサーサイト
影つきウィンドウを作る
2005.11.25 (11:35) [ 描画 ]影つき窓trackback(0)comment(3)
メニューやコンテンツを入れるウィンドウに影をつけて
立体感をだします。影自身は背景を透過するようにします。



ウィンドウは3つのパーツからできています。
・ウィンドウの枠
・ウィンドウの影
・ウィンドウの影の角
どちらもムービークリップ(以下MCで作成すると良いです。
理由は後述します。


では新シンボルMC"影付きウィンドウ"を作っていきます。
まず矩形ツールを使って適当な枠を作ります。
この時点で大きさは無視していいですが、
縦と横の比率は任意のものにしておいてください。
でないと、完成品の影が伸び縮みで太さを変えてしまいます。

waku1.png

この枠全体をMC"ウィンドウ枠"とでもシンボル変換(右クリック)
しておいてください。

次に新しくMC"ウィンドウ影"を作ります。
矩形ツールを使い長方形を自由に書いてください。
周りの線(辺)は削除しておきます。
色塗りツール(バケツ)を選択し、その色をグラデーションにして
長方形を塗ります。

20051204152828.png

"ウィンドウ"→"デザインパネル"→"カラーミキサー"
でカラーミキサーのパネルを出し長方形の色を選択(スポイト)します。
グラデーション設定を使って
左端を 色「黒」 アルファ「80%」
右端を 色「黒」 アルファ「0%」
にして長方形を塗ってください。

waku2.png

これでウィンドウの影も完成です。


MC"影付きウィンドウ"の編集画面にもどしくMC"ウィンドウ影"
中に入れます。
"情報"のパネル等を利用し、幅を任意の値にして(今回は8.0)右と下の
辺に影を設置します。右下の角でそろえ長さは若干短くします。

waku4.png

枠も影もMCなのでFlashMX2004であれば
簡単に調整ができると思います。できない場合は、"情報"のパネルの
座標を使ってうまくあわせます。


さらに新しくMC"影の角"を作ります。
適当な大きさで正方形(長方形は×です)をつくり、
放射状のグラデーションを選択し、正方形の左上の角を中心として塗ります。

waku5.png

カラーミキサーのパネルを出し正方形の色を選択(スポイト)します。
グラデーション設定を使って
左端を 色「黒」 アルファ「80%」
右端を 色「黒」 アルファ「0%」
さらに下図の位置に 色「黒」 アルファ「0%」 を追加します。
20051204152544.png


このMC"影の角"MC"影付きウィンドウ"に追加し、
"情報"パネルで、辺の大きさを影の幅(ここでは8.0)にあわせ、右下の
隙間に入れ込みます。

waku7.png


また、大きさをあわせた正方形を複製し、回転させて
先ほどの長方形の影の長さのあまった余白部分に同じように入れ込みます。

waku8.png

これを左下の角と右上の角に作れば完成です。


waku9.png


線や色によっては影の角に若干のズレが出ます。
"情報"パネルで状態を見ながら座標をあわせて綺麗に繋げてみて下さい。
home
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。