[PR]ﾃﾚﾋﾞ番組表
今夜の番組ﾁｪｯｸ



ムービークリップに色をつけたい



サンプルをダウンロード




１．カラーオブジェクトを作成する


まず、Color クラスを使用してカラーオブジェクトを作成します。引数に、カラーを適応したいムービークリップを指定します。


ムービークリップ "mc" を使ってカラーオブジェクトを作成する

var color_obj = new Color(mc);	// カラーオブジェクトを作成する


注.Colorクラスを使った色の適応は、Flash 8 以降では使用禁止となっています。変わりに ColorTransformクラスを使用して下さい。




２．単一カラーで塗りつぶす


ムービークリップを単一カラーで塗りつぶすには、 setRGB() メソッドを使用します。 引数に、カラーパレットでお馴染みの 24ビットカラーを指定します。頭に "0x" を付けると 16 進数表記で記述できます。




ムービークリップ "mc" を赤色(FF0000)で塗りつぶす

var color_obj = new Color(mc);	// カラーオブジェクトを作成する
color_obj.setRGB( 0xFF0000 );	// 単一色で塗りつぶす


ムービークリップ "mc" を赤色(255) 緑色(128) 青色(0)で塗りつぶす

var red = 255;	// 赤色成分
var green = 128;	// 緑色成分
var blue = 0;	// 青色成分

var color = (red << 16) | (green << 8) | (blue);	// カラーを論理演算で合成

var color_obj = new Color(mc);	// カラーオブジェクトを作成する
color_obj.setRGB( color );	// 単一色で塗りつぶす




３．適応したカラーを元に戻す


適応した色を元に戻すには、 setTransform() メソッドを使用します。


ムービークリップ "mc" のカラーを元に戻す

var color_obj = new Color(mc);	// カラーオブジェクトを作成する
color_obj.setRGB( 0xFF0000 );	// 単一色で塗りつぶす

var color_tf =  {
	ra:100, rb:0,
	ga:100, gb:0,
	ba:100, bb:0,
	aa:100, ab:0
};

color_obj.setTransform(color_tf);	// デフォルトのカラートランスフォームを適応する






ムービークリップに詳細な色を設定したい



サンプルをダウンロード




■ムービークリップに詳細な色を設定する


Flash 7 以前では Color クラスを使用して、Flash 8 以降では ColorTransform クラスを使用して詳細なカラーを設定する事ができます。

なお Color クラスは Flash 8 以降では、使用禁止となっています。











■ Color クラスを使用する方法（Flash 7 以前）




１．カラーオブジェクトを作成する


まず、Color クラスを使用してカラーオブジェクトを作成します。引数に、カラーを適応したいムービークリップを指定します。


ムービークリップ "mc" を使ってカラーオブジェクトを作成する

var color_obj = new Color(mc);	// カラーオブジェクトを作成する




２．パラメータを渡すためにオブジェクトを作成する


カラートランスフォーム用のパラメータを渡すために、オブジェクトを作成します。オブジェクトには、以下のプロパティを含みます。


プロパティ 説明
ra 赤色の乗算カラー(-100〜100)
ga 緑色の乗算カラー(-100〜100)
ba 青色の乗算カラー(-100〜100)
aa 透過の乗算カラー(-100〜100)
rb 赤色の加算カラー(-255〜255)
gb 緑色の加算カラー(-255〜255)
bb 青色の加算カラー(-255〜255)
ab 透過の加算カラー(-255〜255)


このパラメータは、Flash の『詳細』カラー設定の以下の部分に相当します。






デフォルトのカラーパラメータ

var color_tf =  {
	ra:100, rb:0,
	ga:100, gb:0,
	ba:100, bb:0,
	aa:100, ab:0
};

ネガポジ反転のカラーパラメータ

var color_tf =  {
	ra:-100, rb:255,
	ga:-100, gb:255,
	ba:-100, bb:255,
	aa: 100, ab:255
};


カラートランスフォームは全ピクセルが以下の式を経て描画されます。


カラートランスフォームの変換式

新しい赤色   = (現在の赤色   * ra / 100) + rb;
新しい緑色   = (現在の緑色   * ga / 100) + gb;
新しい青色   = (現在の青色   * ba / 100) + bb;
新しい透過色 = (現在の透過色 * aa / 100) + ab;




３．カラートランスフォームを使って色を付ける


カラートランスフォームを使って色を付けるには、 setTransform() メソッドを使用します。 引数に、オブジェクトを渡します。




ムービークリップ "mc" を赤っぽく色を付ける

// トランスフォーム用のパラメータ
var color_tf =  {
	ra:100, rb:128,
	ga:100, gb:0,
	ba:100, bb:0,
	aa:100, ab:0
};

var color_obj = new Color(mc);		// カラーオブジェクトを作成する
color_obj.setTransform( color_tf );	// カラートランスフォームを使用する


色を戻すには、デフォルトのパラメータを渡します。


ムービークリップ "mc" の色を戻す

// トランスフォーム用のパラメータ
var color_tf =  {
	ra:100, rb:0,
	ga:100, gb:0,
	ba:100, bb:0,
	aa:100, ab:0
};

var color_obj = new Color(mc);		// カラーオブジェクトを作成する
color_obj.setTransform( color_tf );	// カラートランスフォームを使用する




■明度を変更する


明度を変更する例です。
変数 lightness に (-1.0 〜 1.0) の値を指定します。


_root の明度を設定する

var lightness = 0.5;	// 明度パラメータ

// デフォルトカラートランスフォーム
var color_tf = {
	ra : 100,	rb : 0, 
	ga : 100,	gb : 0,
	ba : 100,	bb : 0, 
	aa : 100,	ab : 0
};

// 黒に近づける
if (lightness<0) {
	var d = 1 + lightness;
	color_tf.ra = d * 100;
	color_tf.ga = d * 100;
	color_tf.ba = d * 100;

// 白に近づける
} else {
	var d = 1 - lightness;
	color_tf.ra = d * 100;
	color_tf.ga = d * 100;
	color_tf.ba = d * 100;
	color_tf.rb = lightness * 255;
	color_tf.gb = lightness * 255;
	color_tf.bb = lightness * 255;
}

var color_obj = new Color(mc);		// カラーオブジェクトを作成する
color_obj.setTransform( color_tf );	// カラートランスフォームを使用する





■ColorTransform クラスを使用する方法（Flash 8 以降）




１．カラートランスフォームオブジェクトを作成する


パラメータを渡すために、flash.geom.ColorTransform クラスを使ってオブジェクトを作成します。このクラスには、以下のプロパティを含みます。


引数の順番 プロパティ 説明
1 redMultiplier 赤色の乗算カラー(-1.0〜1.0)
2 greenMultiplier 緑色の乗算カラー(-1.0〜1.0)
3 blueMultiplier 青色の乗算カラー(-1.0〜1.0)
4 alphaMultiplier 透過の乗算カラー(-1.0〜1.0)
5 redOffset 赤色の加算カラー(-255〜255)
6 greenOffset 緑色の加算カラー(-255〜255)
7 blueOffset 青色の加算カラー(-255〜255)
8 alphaOffset 透過の加算カラー(-255〜255)


このパラメータは、Flash の『詳細』カラー設定の以下の部分に相当します。






デフォルトのカラーパラメータを引数で設定(AS1.0)

var color_tf = new flash.geom.ColorTransform(1.0, 1.0, 1.0, 1.0, 0, 0, 0, 0);

デフォルトのカラーパラメータを引数で設定(AS2.0)

import flash.geom.ColorTransform;
var color_tf : ColorTransform = new ColorTransform(1.0, 1.0, 1.0, 1.0, 0, 0, 0, 0);


デフォルトのカラーパラメータをプロパティで設定(AS1.0)

var color_tf = new flash.geom.ColorTransform();

color_tf.redMultiplier   = 1.0;
color_tf.greenMultiplier = 1.0;
color_tf.blueMultiplier  = 1.0;
color_tf.alphaMultiplier = 1.0;
color_tf.redOffset   = 0;
color_tf.greenOffset = 0;
color_tf.blueOffset  = 0;
color_tf.alphaOffset = 0;

デフォルトのカラーパラメータをプロパティで設定(AS2.0)

import flash.geom.ColorTransform;
var color_tf : ColorTransform = new ColorTransform();

color_tf.redMultiplier   = 1.0;
color_tf.greenMultiplier = 1.0;
color_tf.blueMultiplier  = 1.0;
color_tf.alphaMultiplier = 1.0;
color_tf.redOffset   = 0;
color_tf.greenOffset = 0;
color_tf.blueOffset  = 0;
color_tf.alphaOffset = 0;


ネガポジ反転のカラーパラメータ(AS1.0)

var color_tf = new flash.geom.ColorTransform(-1.0, -1.0, -1.0, 1.0, 255, 255, 255, 255);

ネガポジ反転のカラーパラメータ(AS2.0)

import flash.geom.ColorTransform;
var color_tf : ColorTransform = new ColorTransform(-1.0, -1.0, -1.0, 1.0, 255, 255, 255, 255);




カラートランスフォームは全ピクセルが以下の式を経て描画されます。


カラートランスフォームの変換式

新しい赤色   = (現在の赤色   * redMultiplier   ) + redOffset;
新しい緑色   = (現在の緑色   * greenMultiplier ) + greenOffset;
新しい青色   = (現在の青色   * blueMultiplier  ) + blueOffset;
新しい透過色 = (現在の透過色 * alphaMultiplier ) + alphaOffset;




２．カラートランスフォームプロパティを適応する


ムービークリップにの transform.colorTransform プロパティにパラメータを渡すと、 カラートランスフォームが適応されます。




ムービークリップ "mc" を赤っぽく色を付ける(AS1.0)

// トランスフォーム用のパラメータ
var color_tf = new flash.geom.ColorTransform(1.0, 1.0, 1.0, 1.0, 128, 0, 0, 0);

mc.transform.colorTransform = color_tf;	// カラートランスフォームを使用する

ムービークリップ "mc" を赤っぽく色を付ける(AS2.0)

import flash.geom.ColorTransform;

// トランスフォーム用のパラメータ
var color_tf : ColorTransform = new ColorTransform(1.0, 1.0, 1.0, 1.0, 128, 0, 0, 0);
mc.transform.colorTransform = color_tf;	// カラートランスフォームを使用する


transform.colorTransform プロパティの値を直接書き換えた場合は適応されないようです。必ずオブジェクトを渡すようにしましょう。




色を戻すには、デフォルトのパラメータを渡します。


ムービークリップ "mc" の色を戻す(AS1.0)

// トランスフォーム用のパラメータ
var color_tf = new flash.geom.ColorTransform(1.0, 1.0, 1.0, 1.0, 0, 0, 0, 0);

mc.transform.colorTransform = color_tf;	// カラートランスフォームを使用する

ムービークリップ "mc" の色を戻す(AS2.0)

import flash.geom.ColorTransform;

// トランスフォーム用のパラメータ
var color_tf : ColorTransform = new ColorTransform(1.0, 1.0, 1.0, 1.0, 0, 0, 0, 0);
mc.transform.colorTransform = color_tf;	// カラートランスフォームを使用する






■明度を変更する


明度を変更する例です。
変数 lightness に (-1.0 〜 1.0) の値を指定します。


_root の明度を設定する(AS1.0)

var lightness = 0.5;	// 明度パラメータ

// デフォルトカラートランスフォーム
var color_tf = new flash.geom.ColorTransform(1.0, 1.0, 1.0, 1.0, 0, 0, 0, 0);

// 黒に近づける
if (lightness < 0) {
	var d = 1 + lightness;
	color_tf.redMultiplier   = d;
	color_tf.greenMultiplier = d;
	color_tf.blueMultiplier  = d;

// 白に近づける
} else {
	var d = 1 - lightness;
	color_tf.redMultiplier   = d;
	color_tf.greenMultiplier = d;
	color_tf.blueMultiplier  = d;
	color_tf.redOffset   = lightness * 255;
	color_tf.greenOffset = lightness * 255;
	color_tf.blueOffset  = lightness * 255;
}

_root.transform.colorTransform = color_tf;	// カラートランスフォームを使用する

_root の明度を設定する(AS2.0)

import flash.geom.ColorTransform;

var lightness : Number = 0.5;	// 明度パラメータ

// デフォルトカラートランスフォーム
var color_tf : ColorTransform = new ColorTransform(1.0, 1.0, 1.0, 1.0, 0, 0, 0, 0);

// 黒に近づける
if (lightness < 0) {
	var d = 1 + lightness;
	color_tf.redMultiplier   = d;
	color_tf.greenMultiplier = d;
	color_tf.blueMultiplier  = d;

// 白に近づける
} else {
	var d = 1 - lightness;
	color_tf.redMultiplier   = d;
	color_tf.greenMultiplier = d;
	color_tf.blueMultiplier  = d;
	color_tf.redOffset   = lightness * 255;
	color_tf.greenOffset = lightness * 255;
	color_tf.blueOffset  = lightness * 255;
}

_root.transform.colorTransform = color_tf;	// カラートランスフォームを使用する






フィルタを使って色を設定したい(Flash 8 以降)



サンプルをダウンロード




１．カラーマトリックス用のパラメータを用意する


まず、カラーマトリックス変換用の行列パラメータを用意します。 4 行 5 列の行列になりますが、パラメータは 20 個の 1 次元配列で表します。


デフォルトのパラメータ

var color_mtx = [
	1,0,0,0,0,
	0,1,0,0,0,
	0,0,1,0,0,
	0,0,0,1,0
];


カラーマトリックスフィルタは全ピクセルが以下の式を経て描画されます。


カラーマトリックスフィルタの変換式

新しい赤色 = 現在の赤色 * color_mtx[ 0] + 現在の緑色 * color_mtx[ 1] + 現在の青色 * color_mtx[ 2] + 現在の透過 * color_mtx[ 3] + color_mtx[ 4];
新しい緑色 = 現在の赤色 * color_mtx[ 5] + 現在の緑色 * color_mtx[ 6] + 現在の青色 * color_mtx[ 7] + 現在の透過 * color_mtx[ 8] + color_mtx[ 9];
新しい青色 = 現在の赤色 * color_mtx[10] + 現在の緑色 * color_mtx[11] + 現在の青色 * color_mtx[12] + 現在の透過 * color_mtx[13] + color_mtx[14];
新しい透過 = 現在の赤色 * color_mtx[15] + 現在の緑色 * color_mtx[16] + 現在の青色 * color_mtx[17] + 現在の透過 * color_mtx[18] + color_mtx[19];


[0〜3 5〜8 10〜13 15〜18]が乗算用のパラメータです。(0.0 〜 1.0) の値を指定します。赤、緑、青、透過チャンネルごとにブレンドできます。

[4 9 14 19]が加算用のパラメータです。(0 〜 255) の値を指定します。




例えば、以下のような行列を用意すると、青色成分が赤色へ、赤色成分が緑色へ、緑色成分が青色へ変換され出力されます。


青色成分を赤色へ、赤色成分を緑色へ、緑色成分を青色へ変換する

var color_mtx = [
	0,0,1,0,0,
	1,0,0,0,0,
	0,1,0,0,0,
	0,0,0,1,0
];


加算カラーの調整をしたい場合は、一番右の列を変更します。


現在の色に (FF8000) 分加算する

var color_mtx = [
	1,0,0,0,255
	0,1,0,0,128,
	0,0,1,0,0,
	0,0,0,1,0
];


モノクロ表示のパラメータです。


モノクロ表示用パラメータ

var color_mtx = [
	1/3,1/3,1/3,0,0,
	1/3,1/3,1/3,0,0,
	1/3,1/3,1/3,0,0,
	0,  0,  0,  1,0
];




２．カラーマトリックスフィルタを作成する


カラーマトリックスフィルタを使用するには、ColorMatrixFilter クラスを使用します。引数に先ほど作成したパラメータを渡してインスタンス化します。


_root にカラーマトリックスフィルタを作成する（AS1.0）

var color_mtx = [
	1,0,0,0,128,
	0,1,0,0,0,
	0,0,1,0,0,
	0,0,0,1,0
];

var filter = new flash.filters.ColorMatrixFilter(color_mtx);

_root にカラーマトリックスフィルタを作成する（AS2.0）

import flash.filters.ColorMatrixFilter;

var color_mtx : Array = [
	1,0,0,0,128,
	0,1,0,0,0,
	0,0,1,0,0,
	0,0,0,1,0
];

var filter : ColorMatrixFilter = new ColorMatrixFilter(color_mtx);




３． フィルタを適応する


ムービークリップの filters プロパティにカラーマトリックスフィルタインスタンスを配列に格納して渡すとフィルタが適応されます。


_root にカラーマトリックスフィルタを適応する（AS1.0）

var color_mtx = [
	1,0,0,0,128,
	0,1,0,0,0,
	0,0,1,0,0,
	0,0,0,1,0
];

var filter = new flash.filters.ColorMatrixFilter(color_mtx);
_root.filters = [filter];

_root にカラーマトリックスフィルタを適応する（AS2.0）

import flash.filters.ColorMatrixFilter;

var color_mtx : Array = [
	1,0,0,0,128,
	0,1,0,0,0,
	0,0,1,0,0,
	0,0,0,1,0
];

var filter : ColorMatrixFilter = new ColorMatrixFilter(color_mtx);
_root.filters = [filter];




■彩度を変更する


彩度を変更する例です。 変数 saido を(0.01 〜 1.0) まで変更すると彩度を変更する事ができます。


_root の彩度を変更する（AS1.0）

var saido = 0.5;

var a = 1 - 2 / 3 * (1 - saido);
var b =     1 / 3 * (1 - saido);

var color_mtx = [
	a,b,b,0,0,
	b,a,b,0,0,
	b,b,a,0,0,
	0,0,0,1,0
];

var filter = new flash.filters.ColorMatrixFilter(color_mtx);
_root.filters = [filter];

_root の彩度を変更する（AS2.0）

import flash.filters.ColorMatrixFilter;

var saido = 0.5;

var a : Number = 1 - 2 / 3 * (1 - saido);
var b : Number =     1 / 3 * (1 - saido);

var color_mtx : Array = [
	a,b,b,0,0,
	b,a,b,0,0,
	b,b,a,0,0,
	0,0,0,1,0
];

var filter : ColorMatrixFilter = new ColorMatrixFilter(color_mtx);
_root.filters = [filter];