ブレンドについて
■ブレンドとは？
Photoshop などの、画像編集ツールではおなじみの機能です。
ブレンドを使用すると、「任意のムービークリップ」と「背景」とで、色の合成を行う事ができます。
ブレンドの種類として、14 パターンのモードが用意されています。
色の演算は、１ピクセルごとに行われ、全ピクセルが変換されます。
■ブレンドモード利用時の注意点
■Flash Player 9 以前の場合
幅と高さが 2880 ピクセルまでのグラフィックに適用できます。
グラフィックのサイズがこの範囲を超えてしまうと、ブレンドが動作しません。
■Flash Player 10 の場合
幅と高さが 8192 ピクセルまでのグラフィックに適用できますが、総ピクセル数は 16777216 までとなります。(幅が 8192 なら高さは 2048 まで)
グラフィックのサイズがこの範囲を超えてしまうと、ブレンドが動作しません。
■Flash Player 11 以降の場合
ピクセルサイズの制限はありません。
メモリ不足の場合、ブレンドが動作しません。
■Flash 8 Basic 版でも利用可能
ブレンドは、Flash 8 Professional 版から利用できる新機能です。
Flash 8 Basic 版では対応していませんが、アクションスクリプトから動作させることは可能です。
インスタンスにブレンドを適用する
サンプルをダウンロード
■ブレンドを使用する
任意のインスタンスにブレンドを適用するには、blendMode プロパティを使用します。
以下の文字列か数値をセットします。
■ブレンドモードの種類
| 文字列 | 番号 | 名称 |
| "normal" | 1 | 標準 |
| "layer" | 2 | レイヤー |
| "multiply" | 3 | 乗算 |
| "screen" | 4 | スクリーン |
| "lighten" | 5 | 比較（明） |
| "darken" | 6 | 比較（暗） |
| "difference" | 7 | 差の絶対値 |
| "add" | 8 | 加算 |
| "subtract" | 9 | 減算 |
| "invert" | 10 | 反転 |
| "alpha" | 11 | アルファ |
| "erase" | 12 | 消去 |
| "overlay" | 13 | オーバーレイ |
| "hardlight" | 14 | ハードライト |
■使用例
ムービークリップ mc に加算合成を使用する
mc.blendMode = "add";
ムービークリップ mc に減算合成を使用する
mc.blendMode = "subtract";
ブレンドの種類について
■標準 "normal"
ブレンドを使用していない状態です。通常の表示です。
| 素材 | ⇒ | 結果 |
 |
|
■レイヤー "layer"
複数のレイヤーを持つムービークリップを半透明にすると、以下のように表示されます。
レイヤーごとに半透明が適用されるので、重なる部分が透けて表示されます。
| 素材 | ⇒ | 半透明を適用 |
|
 |
ブレンドで「レイヤー」を適用すると、描画結果に対して半透明がかかるようになります。
重なる部分が透けて表示される事はありません。
| 素材 | ⇒ | 半透明を適用 |
|
 |
■乗算 "multiply"
シャドウや深度効果に使用します。
黒色に近づけるのに最適です。
グラフィックが黒色であるほど、結果は黒色に近づきます。
グラフィックが白色であるほど、結果に影響はありません。
| 背景 | ＋ | ソース | ⇒ | 結果 |
 |
 |
 |
乗算は、以下の計算が行われます。
各カラーは、「0 ～ 255」までありますが、この値を「0.0 ～ 1.0」までの小数値と考えます。
「背景」と「小数値」を乗算して結果を出力します。
乗算の変換式（透過成分は除外）
新しい赤色 = (ソースの赤色 / 255) * 背景の赤色;
新しい緑色 = (ソースの緑色 / 255) * 背景の緑色;
新しい青色 = (ソースの青色 / 255) * 背景の青色;
■スクリーン "screen"
ハイライトなどに使用します。
白色に近づけるのに最適です。
グラフィックが白色であるほど、結果は白色に近づきます。
グラフィックが黒色であるほど、結果に影響はありません。
| 背景 | ＋ | ソース | ⇒ | 結果 |
|
|
 |
スクリーンは、以下の計算が行われます。
スクリーンの変換式（透過成分は除外）
新しい赤色 = 255 - ((255 - ソースの赤色) / 255) * (255 - 背景の赤色);
新しい緑色 = 255 - ((255 - ソースの緑色) / 255) * (255 - 背景の緑色);
新しい青色 = 255 - ((255 - ソースの青色) / 255) * (255 - 背景の青色);
スクリーンの変換式（最適化）（透過成分は除外）
新しい赤色 = ソースの赤色 + 背景の赤色 - ソースの赤色 * 背景の赤色 / 255;
新しい緑色 = ソースの赤色 + 背景の赤色 - ソースの赤色 * 背景の赤色 / 255;
新しい青色 = ソースの赤色 + 背景の赤色 - ソースの赤色 * 背景の赤色 / 255;
■比較（明） "lighten"
背景とソースのカラーを比較して、大きい（明るい）方を採用して出力します。
| 背景 | ＋ | ソース | ⇒ | 結果 |
|
|
 |
比較（明）は、以下の計算が行われます。
比較（明）の変換式（透過成分は除外）
新しい赤色 = (ソースの赤色 > 背景の赤色) ? ソースの赤色 : 背景の赤色;
新しい緑色 = (ソースの緑色 > 背景の緑色) ? ソースの緑色 : 背景の緑色;
新しい青色 = (ソースの青色 > 背景の青色) ? ソースの青色 : 背景の青色;
■比較（暗） "darken"
背景とソースのカラーを比較して、小さい（暗い）方を採用して出力します。
| 背景 | ＋ | ソース | ⇒ | 結果 |
|
|
 |
比較（暗）は、以下の計算が行われます。
比較（明）の変換式（透過成分は除外）
新しい赤色 = (ソースの赤色 < 背景の赤色) ? ソースの赤色 : 背景の赤色;
新しい緑色 = (ソースの緑色 < 背景の緑色) ? ソースの緑色 : 背景の緑色;
新しい青色 = (ソースの青色 < 背景の青色) ? ソースの青色 : 背景の青色;
■差の絶対値 "difference"
背景とソースのカラーを比較します。
大きい値から小さい値を減算して結果を出力します。
| 背景 | ＋ | ソース | ⇒ | 結果 |
 |
|
 |
差の絶対値は、以下の計算が行われます。
差の絶対値の変換式
新しい赤色 = (ソースの赤色 > 背景の赤色) ? (ソースの赤色 - 背景の赤色) : (背景の赤色 - ソースの赤色);
新しい緑色 = (ソースの緑色 > 背景の緑色) ? (ソースの緑色 - 背景の緑色) : (背景の緑色 - ソースの緑色);
新しい青色 = (ソースの青色 > 背景の青色) ? (ソースの青色 - 背景の青色) : (背景の青色 - ソースの青色);
■加算 "add"
光源の効果などに利用します。
白飛びするほど明るい表現に最適です。
グラフィックが白色であるほど、結果は白色に近づきます。
グラフィックが黒色であるほど、結果に影響はありません。
| 背景 | ＋ | ソース | ⇒ | 結果 |
|
|
 |
加算は、以下の計算が行われます。
「背景」と「ソース」のカラーを加算します。
計算した結果 255 より大きくなる場合は、255 となります。
加算の変換式（透過成分は除外）
新しい赤色 = ソースの赤色 + 背景の赤色;
新しい緑色 = ソースの緑色 + 背景の緑色;
新しい青色 = ソースの青色 + 背景の青色;
if(新しい赤色 > 255) 新しい赤色 = 255;
if(新しい緑色 > 255) 新しい緑色 = 255;
if(新しい青色 > 255) 新しい青色 = 255;
■減算 "subtract"
黒つぶれするほど暗い表現に最適です。
ソースのグラフィックが黒色であるほど、結果に影響はありません。
ソースのグラフィックが白色であるほど、結果は黒色に近づきます。
| 背景 | ＋ | ソース | ⇒ | 結果 |
|
|
 |
減算は、以下の計算が行われます。
「背景のカラー」から「ソースのカラー」を減算します。
計算した結果 0 より小さくなる場合は、0 となります。
加算の変換式（透過成分は除外）
新しい赤色 = 背景の赤色 - ソースの赤色;
新しい緑色 = 背景の緑色 - ソースの緑色;
新しい青色 = 背景の青色 - ソースの青色;
if(新しい赤色 < 0) 新しい赤色 = 0;
if(新しい緑色 < 0) 新しい緑色 = 0;
if(新しい青色 < 0) 新しい青色 = 0;
■反転 "invert"
背景カラーを反転して結果を出力します。
| 背景 | ＋ | ソース | ⇒ | 結果 |
|
|
 |
反転は、以下の計算が行われます。
加算の変換式（透過成分は除外）
新しい赤色 = (255 - 背景の赤色);
新しい緑色 = (255 - 背景の緑色);
新しい青色 = (255 - 背景の青色);
■アルファ "alpha"
アルファを動作させるには、親のムービークリップのブレンドモードが、「"layer" (レイヤー)」である必要があります。
背景カラーの 赤 緑 青 成分はそのままで、透過成分はソースから出力します。
| 背景 | ＋ | ソース | ⇒ | 結果 |
|
|
 |
アルファは、以下の計算が行われます。
アルファの変換式（背景の透過成分は除外）
新しい赤色 = 背景の赤色;
新しい緑色 = 背景の緑色;
新しい青色 = 背景の青色;
新しい透過色 = ソースの透過色;
■消去 "erase"
消去を動作させるには、親のムービークリップのブレンドモードが、「"layer" (レイヤー)」である必要があります。
背景カラーの 赤 緑 青 成分はそのままで、透過成分はソースから反転して出力します。
| 背景 | ＋ | ソース | ⇒ | 結果 |
|
|
 |
消去は、以下の計算が行われます。
消去の変換式（背景の透過成分は除外）
新しい赤色 = 背景の赤色;
新しい緑色 = 背景の緑色;
新しい青色 = 背景の青色;
新しい透過色 = 255 - ソースの透過色;
■オーバーレイ "overlay"
背景のカラーが 127 以下であれば、乗算として動作します。
背景のカラーが 129 以上であれば、スクリーンとして動作します。
背景のカラーが 128 であるほど、ソースのカラーがそのまま出力されます。
背景のグラフィックが白色であるほど、結果は白色に近づきます。
背景のグラフィックが黒色であるほど、結果は黒色に近づきます。
| 背景 | ＋ | ソース | ⇒ | 結果 |
|
|
 |
オーバーレイは、以下の計算が行われます。
オーバーレイの変換式（透過成分は除外）
if(背景の赤色 > 129) 新しい赤色 = -255 + 2 * (ソースの赤色 + 背景の赤色) - ソースの赤色 * 背景の赤色 / 127.5;
else if(背景の赤色 < 127) 新しい赤色 = (ソースの赤色 / 127.5) * 背景の赤色;
else 新しい赤色 = ソースの赤色;
if(背景の緑色 > 129) 新しい緑色 = -255 + 2 * (ソースの緑色 + 背景の緑色) - ソースの緑色 * 背景の緑色 / 127.5;
else if(背景の緑色 < 127) 新しい緑色 = (ソースの緑色 / 127.5) * 背景の緑色;
else 新しい緑色 = ソースの緑色;
if(背景の青色 > 129) 新しい青色 = -255 + 2 * (ソースの青色 + 背景の青色) - ソースの青色 * 背景の青色 / 127.5;
else if(背景の青色 < 127) 新しい青色 = (ソースの青色 / 127.5) * 背景の青色;
else 新しい青色 = ソースの青色;
■ハードライト "hardlight"
ソースのカラーが 127 以下であれば、乗算として動作します。
ソースのカラーが 129 以上であれば、スクリーンとして動作します。
ソースのカラーが 128 であるほど、背景のカラーがそのまま出力されます。
ソースのグラフィックが白色であるほど、結果は白色に近づきます。
ソースのグラフィックが黒色であるほど、結果は黒色に近づきます。
| 背景 | ＋ | ソース | ⇒ | 結果 |
|
|
 |
ハードライトは、以下の計算が行われます。
ハードライトの変換式（透過成分は除外）
if(ソースの赤色 > 129) 新しい赤色 = -255 + 2 * (ソースの赤色 + 背景の赤色) - ソースの赤色 * 背景の赤色 / 127.5;
else if(ソースの赤色 < 127) 新しい赤色 = (ソースの赤色 / 127.5) * 背景の赤色;
else 新しい赤色 = 背景の赤色;
if(ソースの緑色 > 129) 新しい緑色 = -255 + 2 * (ソースの緑色 + 背景の緑色) - ソースの緑色 * 背景の緑色 / 127.5;
else if(ソースの緑色 < 127) 新しい緑色 = (ソースの緑色 / 127.5) * 背景の緑色;
else 新しい緑色 = 背景の緑色;
if(ソースの青色 > 129) 新しい青色 = -255 + 2 * (ソースの青色 + 背景の青色) - ソースの青色 * 背景の青色 / 127.5;
else if(ソースの青色 < 127) 新しい青色 = (ソースの青色 / 127.5) * 背景の青色;
else 新しい青色 = 背景の青色;