TECH Matari

MovieClipのアルファ値は、そのままのプロパティがあるので変更は簡単なんだけれど、明度や色相・コントラストを変更したい！という場合、知ってる人は知ってると思うけど、知らないと結構大変。

実は超簡単な方法がある。Tweenerを使うのである。
まずは、AS2.0の場合を作っちゃうぞ！

さっそく、結果のswfをﾁｪｷﾗ！

数値を変更すると、上の画像の

1. 彩度(saturation)
2. 色相(hue)
3. コントラスト(contrast)
4. 明度(brightness)
5. 明度（濃さ？）(tinBrightness)

を変更できます。

たとえば、グレイスケールに変換したい場合、彩度のNumericStepperをゼロにすると、簡易的にグレースケールに変更することができます（実際にはもっと調整した数値のほうが綺麗なグレイスケールにはるけどここでは省略。詳しくは
ColorMatrixFilterで画像をグレースケールにする(AS2.0) ）

明度（Brightness)と明度（濃さ）ではけっこう違う。実際にはtinBrightnessのほうを使いそう。

具体的な方法としては、Tweener 1.31以上から導入されたColorShortcutsを使うと超簡単です。
ライブラリのimport・初期化を除くと、１行でできます。

上記swfのソースは、
[as]
import caurina.transitions.Tweener;
import caurina.transitions.properties.ColorShortcuts;

ColorShortcuts.init();

// リスナーオブジェクト
var nstepListener:Object = new Object();
nstepListener.change = function(ev:Object){

var val = ev.target.value;

switch(ev.target._name){
case ’sat_step’:
Tweener.addTween(ph,{_saturation:val});
break;
case ‘hue_step’:
Tweener.addTween(ph,{_hue:val});
break;
case ‘con_step’:
Tweener.addTween(ph,{_contrast:val});
break;
case ‘bn_step’:
Tweener.addTween(ph,{_brightness:val});
break;
case ‘tbn_step’:
Tweener.addTween(ph,{_tintBrightness:val});
break;
}
}
// リスナーを追加
sat_step.addEventListener(”change”, nstepListener);
hue_step.addEventListener(”change”, nstepListener);
con_step.addEventListener(”change”, nstepListener);
bn_step.addEventListener(”change”, nstepListener);
tbn_step.addEventListener(”change”, nstepListener);

/**
* リセットボタン
*/
reset_btn.onPress = function() {

sat_step.value = 1;
hue_step.value = 0;
con_step.value = 0;
bn_step.value = 0;
tbn_step.value = 0;

// changeイベントを送出
sat_step.dispatchEvent({type:”change”});
hue_step.dispatchEvent({type:”change”});
con_step.dispatchEvent({type:”change”});
bn_step.dispatchEvent({type:”change”});
tbn_step.dispatchEvent({type:”change”});
}
stop();
[/as]

flaソースのダウンロードはこちら

です。実質、色の調整を行ってるのは、それぞれ１行だけです。すばらしい。超簡単。簡単すぎて鼻血でそう。
本当は値の変更にスライダーを使いたかったけど、AS2.0のコンポーネントにはSlideが無かったのでNumericStepperを使いました。（明日にでもAS3.0のサンプルをアップするときは、Slideを使う予定）

Tweenerといえば、トゥィーンしなければならない！と思ってるかもしれないけど、transition も、timeもframeも設定しなければ、すぐにその効果が実行されるのだ。
Tweener Documentation and Language Reference

上記プロパティ以外にも、_color_redMultiplierや_color_redOffsetなど、RGB毎にも設定できるよ。

ほかにも、色だけじゃなくって、いわゆるフィルター（ドロップシャドウ・ボケ（ブラー）・ベベルとか、DisplacementMapFilter も簡単に設定できる（色・フィルタ以外はまだ試してないけど）

Tweenerは、AS2.0もAS3.0も対応していて、使い方も同じなので、覚えておくととても便利です（たぶん）

AS3.0版も作ったよ！↓
[AS3.0]Tweenerを使ってﾁｮ～簡単に明度・色相・コントラストを変更する!

Popularity: 43% [?]

written by ANN