2つの色の中間色を求める方法

色の数が少ないパレットでも、２つの色をブレンドして中間色を生成できれば種類が増えていいなぁと思ってやってみました。今回は、2色が16進の0xRRGGBB形式で入力されるとして、特定のMovieClipをそれらの中間色に変更してみました。

中間色は、元となる2色の赤・緑・青成分をそれぞれ足し合わせて2で割ることで、少し誤差はありますが簡単に求めることができます。ですが、今回は16進での入力を前提条件としたので、まずその処理を行います。

• 2.5 演算子 (Flash ActionScript3.0入門ノート)

RGBから16進に変換する方法っていうのは載っていたんですが、逆変換が見つからなかったので自作してみました。それが下記の関数。論理積を使って該当ビットを取り出し、右にビットシフト（赤: 16，緑: 8，青: 0）することで各値を求め、配列に格納して返すようになっています。初めてactionscriptで論理演算したんですけど、どんな数値でもちゃんと2進数に直して演算してくれるんですねー。Cとかだと型が違うって怒られそう。

改善前

function hex2rgb(n:Number):Array {
    var rgbArray = new Array(3);
    rgbArray[0] = (n & 0xff0000) >> 16; //赤
    rgbArray[1] = (n & 0x00ff00) >> 8; //緑
    rgbArray[2] = n & 0x0000ff; //青
    return rgbArray;
}

改善後

function hex2rgb(n:Number):Array {
    var rgbArray = new Array(3);
    rgbArray[0] = (n >> 16) & 0xff;
    rgbArray[1] = (n >> 8) & 0xff;
    rgbArray[2] = n & 0xff;
    return rgbArray;
}

メインの処理ですが、受け取った2つの色を先程のhex2rgb関数でRGBに変換してやり、各成分の平均をとった後、ColorTransfromで対象となるMovieClip（middle_mc）の色を変更するという流れです。

function setMiddleColor(firstColor:Number, secondColor:Number):Void {
    var firstRGB:Array = hex2rgb(firstColor); //1色目のRGB配列
    var secondRGB:Array = hex2rgb(secondColor); //2色目のRGB配列
    var red:Number = int((firstRGB[0] + secondRGB[0]) / 2); //red値
    var green:Number = int((firstRGB[1] + secondRGB[1]) / 2); //green値
    var blue:Number = int((firstRGB[2] + secondRGB[2]) / 2); //blue値
    var colorTrans:ColorTransform = new ColorTransform(0,0,0,1,red,green,blue,0);
    var trans:Transform = new Transform(middle_mc);
    trans.colorTransform = colorTrans;
}

ColorTransformとTransformも忘れないようにimportしておいてください。

import flash.geom.ColorTransform;
import flash.geom.Transform;

本当はnoughts::のように、上書きすると色が変わるっていうのをやってみたかったんですよね…。多分アルファ変えて乗算してるのかなぁと思うんですが、まだまだFlashに慣れていないので解らないですねー。今の力量では、2つの色から中間色を求めて着色するくらいで精一杯でした。また今度頑張ってみます。

2007-10-02T09:16:11+09:00 配列の変数名やコメントが間違っていたので訂正。
2007-10-04T08:08:20+09:00 再度修正。