Flash グラフィックエフェクト学習ガイド

ブレンドモードの使用

ブレンドモードを使用すると、複合イメージを作成できます。複合とは、複数の重なるオブジェクトの透明度またはカラーインタラクションを変化させるプロセスです。ブレンドを使用すると、重なるムービークリップでカラーをブレンドして固有のエフェクトを作成できます。また、オブジェクトとイメージの透明度に関する制御も可能になります。ブレンドモードを使用することで、ハイライトやシャドウの下にあるイメージの詳細が透けて見えるようにすることや、彩度の低いイメージの彩度を上げることができます。

ブレンドモードには次のエレメントが含まれます。

• [ブレンドカラー] は、ブレンドモードに適用されるカラーです。
• [透明度] は、ブレンドモードに適用される透明度です。
• [ベースカラー] は、ブレンドカラーの下のピクセルのカラーです。
• [結果のカラー] は、ベースカラー上のブレンドのエフェクトの結果です。

Flash のブレンドモード

ブレンドモードはブレンドを適用するオブジェクトのカラーと基になるカラーの両方に依存するので、さまざまなカラーを試して結果を確認する必要があります。目的のエフェクトを得るには、さまざまなブレンドモードを試してみてください。

Flash には、次のブレンドモードが用意されています。

• [標準] を選択すると、カラーが通常に適用され、ベースカラーを操作することはできません。
• [レイヤー] を選択すると、カラーは通常にブレンドされますが、ブレンド前に 100% の不透明度でブレンドオブジェクトがあらかじめ複合されます。これによって、ブレンドオブジェクトのサブクリップが互いに重なり合ってにじむのを防止できます。
• [比較 (暗)] を選択すると、ブレンドカラーよりも明るい領域のみが置き換えられます。ブレンドカラーよりも暗い領域は変更されません。
• [乗算] を選択すると、ブレンドカラーによってベースカラーを乗算し、より暗い色が作成されます。
• [比較 (明)] を選択すると、ブレンドカラーよりも暗いピクセルのみが置き換えられます。ブレンドカラーよりも明るい領域は変更されません。
• [スクリーン] を選択すると、ベースカラーによってブレンドカラーの逆のカラーを乗算し、白くするエフェクトが作成されます。
• [オーバーレイ] を選択すると、ベースカラーに応じてカラーが乗算またはスクリーンされます。
• [ハードライト] を選択すると、ブレンドモードカラーに応じてカラーが乗算または選別されます。このエフェクトは、オブジェクトにスポットライトを当てることに似ています。
• [差の絶対値] を選択すると、どちらの明るさの値がより高いかによって、ベースカラーからブレンドカラーが減算されるか、ブレンドカラーからベースカラーが減算されます。このエフェクトは、カラーの反転に似ています。
• [反転] を選択すると、ベースカラーが反転されます。
• [アルファ] を選択すると、アルファマスクが適用されます。
• [消去] を選択すると、背景イメージのベースカラーも含めて、すべてのベースカラーのピクセルが削除されます。

メモ : 消去およびアルファブレンドモードでは、[標準] 以外のブレンドモードが親ムービークリップに適用される必要があります。

ブレンドモードの例

図 4 は、各種ブレンドモードがイメージの外観に与える影響を示しています。基になるイメージのカラー、および適用するブレンドモードのタイプによって、ブレンドモードのエフェクトは大きく異なるものになる可能性があります。

図 4. ブレンドモードの例

(+) 拡大表示

ブレンドモードの適用

ムービークリップで、選択したムービークリップにブレンドを適用するには、プロパティインスペクタを使用します。

ムービークリップにブレンドモードを適用するには :

1. ブレンドモードを適用する、ステージ上のムービークリップインスタンスを選択します。
2. プロパティインスペクタの [カラー] ポップアップメニューを使って、ムービークリップインスタンスのカラーと透明度を調整します。
3. ムービークリップのプロパティインスペクタで、[ブレンド] ポップアップメニューからブレンドモードを選択します。選択したムービークリップのインスタンスにブレンドモードが適用されます。
4. 目的のエフェクトを作成するための適切なブレンドモードを選択したかどうかを確認します。

意図したとおりのエフェクトを得るために、ムービークリップのカラーと透明度の設定をさまざまに変更してみたり、さまざまなブレンドモードを試してみてください。ムービークリップのカラーの調整については、Flash LiveDocs の次のセクションを参照してください。[Flash ユーザーガイド]-[シンボル、インスタンス、およびライブラリアセットの使用]-[インスタンスプロパティの変更]-[インスタンスのカラーと透明度の変更]。

ActionScript を使用したブレンドモードの適用

Flash Basic 8 でも Flash Professional 8 でも、ActionScript コードを使用してブレンドモードをインスタンスに適用できます。たとえば、次のコードを使用して、各種ブレンドモードを適用できます。

タイムラインのフレーム 1 に次の ActionScript を入力します。

createEmptyMovieClip("img_mc", 10);
var img_mcl:MovieClipLoader = new MovieClipLoader();
var mclListener:Object = new Object();
img_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", img_mc);
mclListener.onLoadInit = function(img_mc:MovieClip) {
img_mc.blendMode = "difference";
};
img_mcl.addListener(mclListener);

[制御]-[ムービープレビュー] を選択してドキュメントをテストします。

各種ブレンドモードがイメージにどのように適用されるかを確認するには、次の例を使用してください。次の例は、動的なイメージをロードし、ステージ上のコンボボックスからブレンドモードを選択して、各種ブレンドモードをイメージに適用します。

ActionScript を使用して各種ブレンドモードをイメージに適用するには :

1. 新しい Flash ドキュメントを作成し、「blendmodes.fla」という名前で保存します。
2. ComboBox コンポーネントインスタンスをステージまでドラッグし、インスタンス名を blendMode_cb にします。

3. タイムラインのフレーム 1 に次の ActionScript を追加します。

   var blendMode_dp:Array = new Array();
   blendMode_dp.push({data:"add", label:"add"});
   blendMode_dp.push({data:"alpha", label:"alpha"});
   blendMode_dp.push({data:"darken", label:"darken"});
   blendMode_dp.push({data:"difference", label:"difference"});
   blendMode_dp.push({data:"erase", label:"erase"});
   blendMode_dp.push({data:"hardlight", label:"hardlight"});
   blendMode_dp.push({data:"invert", label:"invert"});
   blendMode_dp.push({data:"layer", label:"layer"});
   blendMode_dp.push({data:"lighten", label:"lighten"});
   blendMode_dp.push({data:"multiply", label:"multiply"});
   blendMode_dp.push({data:"normal", label:"normal"});
   blendMode_dp.push({data:"overlay", label:"overlay"});
   blendMode_dp.push({data:"screen", label:"screen"});
   blendMode_dp.push({data:"subtract", label:"subtract"});
   blendMode_cb.dataProvider = blendMode_dp;
   
   var mclListener:Object = new Object();
   mclListener.onLoadInit = function(target_mc:MovieClip) {
   var blendModeClip:MovieClip = target_mc.createEmptyMovieClip("blendModeType_mc", 20);
   with (blendModeClip) {
   beginFill(0x999999);
   moveTo(0, 0);
   lineTo(target_mc._width / 2, 0);
   lineTo(target_mc._width / 2, target_mc._height);
   lineTo(0, target_mc._height);
   lineTo(0, 0);
   endFill();
       }
   target_mc._x = (Stage.width - target_mc._width) / 2;
   target_mc._y = (Stage.height - target_mc._height) / 2;
   blendModeClip.blendMode = blendMode_cb.value;
   };
   createEmptyMovieClip("img_mc", 10);
   var img_mcl:MovieClipLoader = new MovieClipLoader();
   img_mcl.addListener(mclListener);
   img_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", img_mc);
   
   function cbListener(eventObj:Object):Void {
   img_mc.blendModeType_mc.blendMode = eventObj.target.value;
   }
   blendMode_cb.addEventListener("change", cbListener);
   

   この ActionScript コードは、ブレンドモードの各タイプを含むコンボボックスを作成し、ユーザーが、動的にロードされたイメージ上で各ブレンドモードの効果を確認できるようにします。MovieClipLoader インスタンスで使用されるリスナーオブジェクトが作成されます。リスナーオブジェクトは、単一の onLoadInit というイベントリスナーを定義します。このリスナーは、イメージのロードが完了し、Flash で初期化されると起動します。このイベントリスナーは、blendModeType_mc という新しいムービークリップを作成し、Drawing API を使用して矩形シェイプをイメージの半分に重なるように描画します。現在コンボボックスインスタンスで選択されているブレンドモードが、blendModeType_mc ムービークリップに適用されます。

   続くコードは、MovieClipLoader インスタンスが、ステージ上のムービークリップに特定のイメージをロードするように設定します。最後のコードは、コンボボックスインスタンスで新しいアイテムを選択すると、そのブレンドモードが適用されるように、blendMode_cb コンボボックスインスタンスのリスナーを定義します。

4. [制御]-[ムービープレビュー] を選択してドキュメントをテストします。

ページ 5 / 7

前のページ

次のページ