MovieClipのアルファ値は、そのままのプロパティがあるので変更は簡単なんだけれど、明度や色相・コントラストを変更したい!という場合、知ってる人は知ってると思うけど、知らないと結構大変。
実は超簡単な方法がある。Tweenerを使うのである。
まずは、AS2.0の場合を作っちゃうぞ!
さっそく、結果のswfをチェキラ!
数値を変更すると、上の画像の
- 彩度(saturation)
- 色相(hue)
- コントラスト(contrast)
- 明度(brightness)
- 明度(濃さ?)(tinBrightness)
を変更できます。
たとえば、グレイスケールに変換したい場合、彩度のNumericStepperをゼロにすると、簡易的にグレースケールに変更することができます(実際にはもっと調整した数値のほうが綺麗なグレイスケールにはるけどここでは省略。詳しくは
ColorMatrixFilterで画像をグレースケールにする(AS2.0) )
明度(Brightness)と明度(濃さ)ではけっこう違う。実際にはtinBrightnessのほうを使いそう。
具体的な方法としては、Tweener 1.31以上から導入されたColorShortcutsを使うと超簡単です。
ライブラリのimport・初期化を除くと、1行でできます。
上記swfのソースは、
-
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();
です。実質、色の調整を行ってるのは、それぞれ1行だけです。すばらしい。超簡単。簡単すぎて鼻血でそう。
本当は値の変更にスライダーを使いたかったけど、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: 66% [?]




