Flashゲーム講座 & アクションスクリプトサンプル集


カラーについて



・ムービークリップを着色する
・ムービークリップに詳細な色を設定する
・カラーマトリックスフィルタを使用する(Flash 8 以降)

前のページに戻る

　

ムービークリップを着色する

　

サンプルをダウンロード
color_00_fla05_as1.flaMacroMedia Flash 5
　
ムービークリップを着色する（Color クラス）（Flash 7 以前）
ムービークリップを着色する（ColorTransform クラス）（Flash 8 以降）
　


■ムービークリップを着色する（Color クラス）（Flash 7 以前）

　
Color クラスは、Flash 8 以降から使用禁止となっています。
　
かわりに、ColorTransform クラスを使用します。
　
１．カラーオブジェクトを作成する
　
new 演算子を使って、Color クラスをインスタンス化します。
　
引数に、着色したいムービークリップを指定します。
　
ムービークリップ _root.mc の色を制御する、カラーオブジェクトを作成する

// カラーオブジェクトを作成する
var color_obj = new Color(_root.mc);
　
２．単一のカラーで着色する

単一のカラーで着色するには、 setRGB() メソッドを使用します。
　
引数に、RGB カラー (0xFFFFFF) を指定します。
　
　
設定例です。
　
ムービークリップ _root.mc を、赤色(FF0000)で塗りつぶす

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

// 単一のカラーで着色する
color_obj.setRGB( 0xFF0000 );
　
ムービークリップ _root.mc を、赤:255 緑:128 青:0 で塗りつぶす

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

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

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

// 単一のカラーで着色する
color_obj.setRGB( color );
　
３．着色したカラーを元に戻す
　
着色したカラーを元に戻すには、 setTransform() メソッドを使用します。
　
以下のように、デフォルトのパラメータをセットします。
　
ムービークリップ _root.mc に着色したカラーを元に戻す

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

// 単一のカラーで着色する
color_obj.setRGB( 0xFF0000 );

// 着色したカラーを元に戻す
color_obj.setTransform({ ra:100, ga:100, ba:100, aa:100, rb:0, gb:0, bb:0, ab:0 });
　

■ムービークリップを着色する（ColorTransform クラス）（Flash 8 以降）

　
１．カラートランスフォームオブジェクトを作成する
　
new 演算子を使って、ColorTransform クラスをインスタンス化します。
　
カラートランスフォームオブジェクトを作成する(AS1.0)

// カラートランスフォームオブジェクトを作成する
var color_transform = new flash.geom.ColorTransform();
　
カラートランスフォームオブジェクトを作成する(AS2.0)

import flash.geom.ColorTransform;

// カラートランスフォームオブジェクトを作成する
var color_transform : ColorTransform = new ColorTransform();
　
２．単一のカラーで着色する

単一のカラーで着色するには、 rgb プロパティを使用します。
　
RGB カラー (0xFFFFFF) をセットします。
　
　
設定例です。
　
カラートランスフォームオブジェクトを作成する(AS1.0)

// カラートランスフォームオブジェクトを作成する
var color_transform = new flash.geom.ColorTransform();

// RGB カラーをセットする
color_transform.rgb = 0xFF8800;
　
カラートランスフォームオブジェクトを作成する(AS2.0)

import flash.geom.ColorTransform;

// カラートランスフォームオブジェクトを作成する
var color_transform : ColorTransform = new ColorTransform();

// RGB カラーをセットする
color_transform.rgb = 0xFF8800;
　
３．ムービークリップにカラーを適用する
　
ムービークリップにカラーを適用するには、 transform.colorTransform プロパティを使用します。
　
このプロパティに、カラートランスフォームオブジェクトを渡します。
　
ムービークリップ "mc" にカラーを適用する(AS1.0)

// カラートランスフォームオブジェクトを作成する
var color_transform = new flash.geom.ColorTransform();

// RGB カラーをセットする
color_transform.rgb = 0xFF8800;

// ムービークリップ "mc" に、カラートランスフォームオブジェクトを渡す
mc.transform.colorTransform = color_transform;
　
ムービークリップ "mc" にカラーを適用する(AS2.0)

import flash.geom.ColorTransform;

// カラートランスフォームオブジェクトを作成する
var color_transform : ColorTransform = new ColorTransform();

// RGB カラーをセットする
color_transform.rgb = 0xFF8800;

// ムービークリップ "mc" に、カラートランスフォームオブジェクトを渡す
mc.transform.colorTransform = color_transform;
　

上に戻る

　

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

　

サンプルをダウンロード
color_01_fla05_as1.flaMacroMedia Flash 5 color_01_fla08_as1.flaMacromedia Flash 8 ActionScript1.0
　
■ムービークリップに詳細な色を設定する（Color クラス）（Flash 7 以前）
■ムービークリップに詳細な色を設定する（ColorTransform クラス）（Flash 8 以降）



■ムービークリップに詳細な色を設定する（Color クラス）（Flash 7 以前）

　
Color クラスは、Flash 8 以降から使用禁止となっています。
　
かわりに、ColorTransform クラスを使用します。
　
１．カラーオブジェクトを作成する
　
new 演算子を使って、Color クラスをインスタンス化します。
　
引数に、着色したいムービークリップを指定します。
　
ムービークリップ _root.mc の色を制御する、カラーオブジェクトを作成する

// カラーオブジェクトを作成する
var color_obj = new Color(_root.mc);
　
２．カラートランスフォーム用のオブジェクトを用意する

new 演算子を使って、Object クラスをインスタンス化します。
　
以下のプロパティを追加して、必要なパラメータをセットします。
　
プロパティ名型効果
ra Number 赤色の乗算成分 （倍率をパーセントで指定) デフォルトは 100
ga Number 緑色の乗算成分 （倍率をパーセントで指定) デフォルトは 100
ba Number 青色の乗算成分 （倍率をパーセントで指定) デフォルトは 100
aa Number 透過色の乗算成分 （倍率をパーセントで指定) デフォルトは 100
rb Number 赤色の加算成分 （-255 ～ 255 の値を指定) デフォルトは 0
gb Number 緑色の加算成分 （-255 ～ 255 の値を指定) デフォルトは 0
bb Number 青色の加算成分 （-255 ～ 255 の値を指定) デフォルトは 0
ab Number 透過色の加算成分 （-255 ～ 255 の値を指定) デフォルトは 0
　
このパラメータは、『詳細』カラー設定の、以下の部分に相当します。
　
　
カラートランスフォームは、以下の計算が行われます。
　
この計算は、１ピクセルごとに行われ、全ピクセルが変換されます。
　
カラートランスフォームの変換式

新しい赤色   = (元の赤色   * ra / 100) + rb;
新しい緑色   = (元の緑色   * ga / 100) + gb;
新しい青色   = (元の青色   * ba / 100) + bb;
新しい透過色 = (元の透過色 * aa / 100) + ab;
　
色を元に戻したい場合に使用する、デフォルト値の例です。
　
デフォルト値のオブジェクトを作成

// カラートランスフォーム用オブジェクトを作成
var color_transform = new Object();

color_transform.ra = 100;
color_transform.ga = 100;
color_transform.ba = 100;
color_transform.aa = 100;
color_transform.rb = 0;
color_transform.gb = 0;
color_transform.bb = 0;
color_transform.ab = 0;
　
「RGB カラー」と「濃淡」を指定して、着色する例です。
　
「RGB カラー」と「濃淡」指定で着色する

// RGB カラー(0xFFFFFF)を指定
var color_rgb = 0xFF8800;

// 濃淡 (0 ～ 100)
var shade = 50;

// カラートランスフォーム用オブジェクトを作成
var color_transform = new Object();

color_transform.ra = 100 - shade;
color_transform.ga = 100 - shade;
color_transform.ba = 100 - shade;
color_transform.aa = 100;
color_transform.rb = ((color_rgb >> 16) & 0xFF) * shade / 100;
color_transform.gb = ((color_rgb >>  8) & 0xFF) * shade / 100;
color_transform.bb = ((color_rgb >>  0) & 0xFF) * shade / 100;
color_transform.ab = 0;
　
明度を変更する例です。
　
明度を変更する

// 明度 (-100 ～ 100)
var lightness = 50;

// カラートランスフォーム用オブジェクトを作成
var color_transform = new Object();

color_transform.aa = 100;
color_transform.ab = 0;

if(lightness < 0){
	color_transform.ra = 100 + lightness;
	color_transform.ga = 100 + lightness;
	color_transform.ba = 100 + lightness;
	color_transform.rb = 0;
	color_transform.gb = 0;
	color_transform.bb = 0;
}else{
	color_transform.ra = 100 - lightness;
	color_transform.ga = 100 - lightness;
	color_transform.ba = 100 - lightness;
	color_transform.rb = 255 * lightness / 100;
	color_transform.gb = 255 * lightness / 100;
	color_transform.bb = 255 * lightness / 100;
}
　
ネガポジ反転する例です。
　
ネガポジ反転する

// カラートランスフォーム用オブジェクトを作成
var color_transform = { ra:-100, ga:-100, ba:-100, aa:100, rb:255, gb:255, bb:255, ab:0 };
　
３．ムービークリップにカラートランスフォームを適用する
　
ムービークリップにカラートランスフォームを適用するには、setTransform() メソッドを使用します。
　
引数に、「カラートランスフォーム用のオブジェクト」を渡します。
　
ムービークリップ _root.mc にカラートランスフォームを適用する

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

// ------------------------------------------------------------
// カラートランスフォーム用オブジェクトを作成
// ------------------------------------------------------------
var color_transform = new Object();
color_transform.ra = 50;
color_transform.ga = 100;
color_transform.ba = 50;
color_transform.aa = 100;
color_transform.rb = 0;
color_transform.gb = 0;
color_transform.bb = 0;
color_transform.ab = 0;

// ------------------------------------------------------------
// カラートランスフォームを適用
// ------------------------------------------------------------
color_obj.setTransform(color_transform);
　

■ムービークリップに詳細な色を設定する（ColorTransform クラス）（Flash 8 以降）

　
１．カラートランスフォームオブジェクトを作成する
　
new 演算子を使って、ColorTransform クラスをインスタンス化します。
　
ここでは、引数の説明は省略します。
　
new ColorTransform ( redMultiplier , blueMultiplier , greenMultiplier , alphaMultiplier , redOffset , greenOffset , blueOffset , alphaOffset ) :ColorTransform
第01引数(略可)NumberredMultiplier プロパティに相当
第02引数(略可)NumbergreenMultiplier プロパティに相当
第03引数(略可)NumberblueMultiplier プロパティに相当
第04引数(略可)NumberalphaMultiplier プロパティに相当
第05引数(略可)NumberredOffset プロパティに相当
第06引数(略可)NumbergreenOffset プロパティに相当
第07引数(略可)NumberblueOffset プロパティに相当
第08引数(略可)NumberalphaOffset プロパティに相当
戻り値 ColorTransformColorTransform オブジェクト
　
カラートランスフォームオブジェクトを作成する(AS1.0)

// カラートランスフォームオブジェクトを作成する
var color_transform = new flash.geom.ColorTransform();
　
カラートランスフォームオブジェクトを作成する(AS2.0)

import flash.geom.ColorTransform;

// カラートランスフォームオブジェクトを作成する
var color_transform : ColorTransform = new ColorTransform();
　
２．ColorTransform オブジェクトの各プロパティを設定する
　
ColorTransform オブジェクトには、以下のプロパティがあります。
　
プロパティ名型効果
redMultiplier Number 赤色の乗算成分 （倍率を指定) デフォルトは 1.0
blueMultiplier Number 緑色の乗算成分 （倍率を指定) デフォルトは 1.0
greenMultiplier Number 青色の乗算成分 （倍率を指定) デフォルトは 1.0
alphaMultiplier Number 透過色の乗算成分 （倍率を指定) デフォルトは 1.0
redOffset Number 赤色の加算成分 （-255 ～ 255 の値を指定) デフォルトは 0
greenOffset Number 緑色の加算成分 （-255 ～ 255 の値を指定) デフォルトは 0
blueOffset Number 青色の加算成分 （-255 ～ 255 の値を指定) デフォルトは 0
alphaOffset Number 透過色の加算成分 （-255 ～ 255 の値を指定) デフォルトは 0
　
このパラメータは、『詳細』カラー設定の、以下の部分に相当します。
　
　
カラートランスフォームは、以下の計算が行われます。
　
この計算は、１ピクセルごとに行われ、全ピクセルが変換されます。
　
カラートランスフォームの変換式

新しい赤色   = (元の赤色   * redMultiplier)   + redOffset;
新しい緑色   = (元の緑色   * greenMultiplier) + greenOffset;
新しい青色   = (元の青色   * blueMultiplier)  + blueOffset;
新しい透過色 = (元の透過色 * alphaMultiplier) + alphaOffset;
　
「RGB カラー」と「濃淡」を指定して、着色する例です。
　
「RGB カラー」と「濃淡」指定で着色する(AS1.0)

// RGB カラー(0xFFFFFF)を指定
var color_rgb = 0xFF8800;

// 濃淡 (0.0 ～ 1.0)
var shade = 0.5;

// カラートランスフォームオブジェクトを作成
var color_transform = new flash.geom.ColorTransform();

color_transform.redMultiplier   = 1.0 - shade;
color_transform.greenMultiplier = 1.0 - shade;
color_transform.blueMultiplier  = 1.0 - shade;
color_transform.redOffset   = ((color_rgb >> 16) & 0xFF) * shade;
color_transform.greenOffset = ((color_rgb >>  8) & 0xFF) * shade;
color_transform.blueOffset  = ((color_rgb >>  0) & 0xFF) * shade;
　
「RGB カラー」と「濃淡」指定で着色する(AS2.0)

import flash.geom.ColorTransform;

// RGB カラー(0xFFFFFF)を指定
var color_rgb:Number = 0xFF8800;

// 濃淡 (0.0 ～ 1.0)
var shade:Number = 0.5;

// カラートランスフォームオブジェクトを作成
var color_transform : ColorTransform = new ColorTransform();

color_transform.redMultiplier   = 1.0 - shade;
color_transform.greenMultiplier = 1.0 - shade;
color_transform.blueMultiplier  = 1.0 - shade;
color_transform.redOffset   = ((color_rgb >> 16) & 0xFF) * shade;
color_transform.greenOffset = ((color_rgb >>  8) & 0xFF) * shade;
color_transform.blueOffset  = ((color_rgb >>  0) & 0xFF) * shade;
　
明度を変更する例です。
　
明度を変更する(AS1.0)

// 明度 (-1.0 ～ 1.0)
var lightness = 0.5;

// カラートランスフォームオブジェクトを作成
var color_transform = new flash.geom.ColorTransform();

if(lightness < 0){
	color_transform.redMultiplier   = 1.0 + lightness;
	color_transform.greenMultiplier = 1.0 + lightness;
	color_transform.blueMultiplier  = 1.0 + lightness;
	color_transform.redOffset   = 0;
	color_transform.greenOffset = 0;
	color_transform.blueOffset  = 0;
}else{
	color_transform.redMultiplier   = 1.0 - lightness;
	color_transform.greenMultiplier = 1.0 - lightness;
	color_transform.blueMultiplier  = 1.0 - lightness;
	color_transform.redOffset   = 255 * lightness;
	color_transform.greenOffset = 255 * lightness;
	color_transform.blueOffset  = 255 * lightness;
}
　
明度を変更する(AS2.0)

import flash.geom.ColorTransform;

// 明度 (-1.0 ～ 1.0)
var lightness:Number = 0.5;

// カラートランスフォームオブジェクトを作成
var color_transform : ColorTransform = new ColorTransform();

if(lightness < 0){
	color_transform.redMultiplier   = 1.0 + lightness;
	color_transform.greenMultiplier = 1.0 + lightness;
	color_transform.blueMultiplier  = 1.0 + lightness;
	color_transform.redOffset   = 0;
	color_transform.greenOffset = 0;
	color_transform.blueOffset  = 0;
}else{
	color_transform.redMultiplier   = 1.0 - lightness;
	color_transform.greenMultiplier = 1.0 - lightness;
	color_transform.blueMultiplier  = 1.0 - lightness;
	color_transform.redOffset   = 255 * lightness;
	color_transform.greenOffset = 255 * lightness;
	color_transform.blueOffset  = 255 * lightness;
}
　
ネガポジ反転する例です。
　
ネガポジ反転する(AS1.0)

// カラートランスフォームオブジェクトを作成
var color_transform = new flash.geom.ColorTransform(-1.0,-1.0,-1.0,1.0,255,255,255,0);
　
ネガポジ反転する(AS2.0)

import flash.geom.ColorTransform;

// カラートランスフォームオブジェクトを作成
var color_transform : ColorTransform = new ColorTransform(-1.0,-1.0,-1.0,1.0,255,255,255,0);
　
３．ムービークリップにカラーを適用する
　
ムービークリップにカラーを適用するには、 transform.colorTransform プロパティを使用します。
　
このプロパティに、カラートランスフォームオブジェクトを渡します。
　
ムービークリップ "mc" にカラーを適用する(AS1.0)

// ------------------------------------------------------------
// カラートランスフォーム
// ------------------------------------------------------------
// カラートランスフォームオブジェクトを作成する
var color_transform = new flash.geom.ColorTransform();

// カラートランスフォームを設定する
color_transform.redMultiplier   = 0.5;
color_transform.greenMultiplier = 1.0;
color_transform.blueMultiplier  = 0.5;
color_transform.alphaMultiplier = 1.0;
color_transform.redOffset   = 0;
color_transform.greenOffset = 0;
color_transform.blueOffset  = 0;
color_transform.alphaOffset = 0;


// ------------------------------------------------------------
// カラーを適用
// ------------------------------------------------------------
// ムービークリップ "mc" に、カラートランスフォームオブジェクトを渡す
mc.transform.colorTransform = color_transform;
　
ムービークリップ "mc" にカラーを適用する(AS2.0)

import flash.geom.ColorTransform;

// ------------------------------------------------------------
// カラートランスフォーム
// ------------------------------------------------------------
// カラートランスフォームオブジェクトを作成する
var color_transform : ColorTransform = new ColorTransform();

// カラートランスフォームを設定する
color_transform.redMultiplier   = 0.5;
color_transform.greenMultiplier = 1.0;
color_transform.blueMultiplier  = 0.5;
color_transform.alphaMultiplier = 1.0;
color_transform.redOffset   = 0;
color_transform.greenOffset = 0;
color_transform.blueOffset  = 0;
color_transform.alphaOffset = 0;


// ------------------------------------------------------------
// カラーを適用
// ------------------------------------------------------------
// ムービークリップ "mc" に、カラートランスフォームオブジェクトを渡す
mc.transform.colorTransform = color_transform;
　

上に戻る

　

カラーマトリックスフィルタを使用する(Flash 8 以降)

　

サンプルをダウンロード
color_02_fla08_as2.flaMacromedia Flash 8 ActionScript2.0
　


カラーマトリックスフィルタについて


カラーマトリックスフィルタについては、こちらで解説しています。
　

上に戻る

　
前のページに戻る