ささきち流 Suzuka & ParaDraw 講座
Suzuka & ParaDraw
TOP
PROFILE
ActionScript Editor
LINK
BBS


フリーのFlash作成ソフト SuzukaParaDraw でFlashな生活を楽しもうというサイトです。
Suzuka 基礎・基本 マスク・グラデーションマスク

 マスクの基本的な事項とマスク活用方法について説明します。説明に使っているSuzuka のバージョンは Ver. 0.7.3.2 です。

 マスクとは,時と場合によって,またソフトによって違う意味のものを指すことがありますが,Suzuka など Flash 作成ソフトでは,ある画像の一部を切り取って,そこだけを表示させる機能のことです。
 マスクはおもに,複雑な画像の上に複雑な画像の一部を表示させるときに使います。
 例えば「赤一色の上」に「写真の一部」を表示させるときにはあまり使いません。この場合は,赤一色の画像をくり抜いて,その下(下レイヤー)に写真を表示させれば良いだけで,マスクを使う必要はありません。その逆も同じで,「写真の上」に「赤一色の一部」を表示させるときにも使いません。写真の上に赤一色のものを表示させれば良いだけです。
 マスクは,「写真の上」に「写真の一部」を表示させたり,「写真の上」に「文字列の一部」を表示させたりするときに使います。

 まずは一番基本的なサンプル Flash 。

 中央付近の青っぽい部分がドラッグで動かせますので動かしてみてください。
 ドラッグできること自体は,円い画像入りのスプライトインスタンスに,startDrag() や stopDrag() を書いているために動くだけで,マスクの本題とは関係ありません。
 本題はモノクロ画像の上にカラー画像の一部を表示させているという部分です。
 今回の説明画像は ParaDraw で描いた画像ですが,当然,写真にも使用できますから,写真の一部をくり抜いて,違う写真の上に動かしながら表示させることに使用できます。

 作成方法は次の通りです。

マスクレイヤー  レイヤーの構造は左のようになっています。
 Suzuka のマスクはどうもレイヤーが逆のような気がしてならないのですが,マスクをかけるものを上のレイヤーに用意して,マスクになるものを下のレイヤーに用意します。
マスクのプロパティを設定1  そして,マスクにするものがあるレイヤーを右クリックし,「プロパティ」を選択します。
マスクのプロパティを設定2  そして,「プロパティ」のパネルで,上に何レイヤーマスクをかけたいかを指定します。この場合は,1レイヤーです。

 以上が,マスクについての基本説明で,このマスクは Flash に昔からあるマスクなので,バージョン SWF4 の SWF を生成しても大丈夫です。

 


 次に,SWF8 以降で使用できる,ビットマップキャッシュ(MobieClip.cacheAsBitmap)とマスク(MovieClip.setMask)を併用する特殊なマスク作成方法について書きます。

 Adobe Flash を使用している方でも,今現在はほとんど知られていないマスクのかけ方だと思いますが,これを使うと面白い効果(グラデーションマスクやアルファマスク)が得られます。

 これまた,サンプル Flash からご覧ください。

 これも,中央付近の青っぽい部分がドラッグで動かせますので動かしてみてください。
 この Flash と,最初の Flash はマスクのかかりかたが違いますね。マスクの周辺付近はカラーの画像があまり見えなくて,中央付近になるにしたがってカラーの画像がよく見えます。
 つまり,マスクにグラデーションがかけられるのです。

グラデーションマスク用画像  マスクの正体は ParaDraw で作成した左のようなグラデーション塗りの ● です。
周辺部のアルファは 0 で,中央付近のアルファは 255(_alpha=100) にしています。
 これを Suzuka でスプライトの中に入れてレイヤーに配置しています。

 スプライトの階層構造は次のようになっています。

 _root(メインのタイムライン)
  ├ msk_mc(●入りスプライト)
  └ ice_mc(カラー画像入りのスプライト)

 そして,_root のスクリプトレイヤーには次のように書いています。

// 「msk_mc」のビットマップキャッシュを有効にする
msk_mc.cacheAsBitmap = true;
// 「ice_mc」のビットマップキャッシュを有効にする
ice_mc.cacheAsBitmap = true;
// 「ice_mc」 に 「msk_mc」 のマスクをかける
ice_mc.setMask(msk_mc);

 たったこれだけです。

 cacheAsBitmap は MovieClipクラスの cacheAsBitmap プロパティで,true に設定されている場合,スプライトの内部の画像がビットマップキャッシュされます。
 ActionScript での MovieClip(ムービークリップ)は,Suzuka のスプライトインスタンスに相当します。

 また,setMask も MovieClipクラスの メソッドです。
 マスクも,マスクをかける方も両方とも ビットマップキャッシュ を有効にして,ActionScript でマスクをかけたときのみ,このグラデーションマスクが使用できます。

 次のように使えば,さらに利用範囲が広がると思います。
 ※ ただし,低スペックな(CPU が低い) PC だと動作が遅くなります。

 これも難しいスクリプトは使用していません。アクションスクリプトは上のものと同じで,違ったマスクをトゥイーンで動かしているだけです。

 

サンプルダウンロード
PDRファイル・CSFファイル在中
「kiso111.zip」 20.7 KB (21,249 バイト)