-bash: /bin/rm: Argument list too longへの対処 [AS3.0]Tweenerを使ってチョ~簡単に彩度・明度・色相・コントラストを変更する!
5月 29

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・初期化を除くと、1行でできます。

上記swfのソースは、

Actionscript:
  1. import caurina.transitions.Tweener;
  2. import caurina.transitions.properties.ColorShortcuts;
  3.  
  4. ColorShortcuts.init();
  5.  
  6. // リスナーオブジェクト
  7. var nstepListener:Object = new Object();
  8. nstepListener.change = function(ev:Object){
  9.  
  10.     var val = ev.target.value;
  11.    
  12.     switch(ev.target._name){
  13.     case 'sat_step':
  14.         Tweener.addTween(ph,{_saturation:val});
  15.         break;
  16.     case 'hue_step':
  17.         Tweener.addTween(ph,{_hue:val});   
  18.         break;
  19.     case 'con_step':
  20.         Tweener.addTween(ph,{_contrast:val});   
  21.         break;
  22.     case 'bn_step':
  23.         Tweener.addTween(ph,{_brightness:val})
  24.         break;
  25.     case 'tbn_step':
  26.         Tweener.addTween(ph,{_tintBrightness:val})
  27.         break;
  28.     }
  29. }
  30. // リスナーを追加
  31. sat_step.addEventListener("change", nstepListener);
  32. hue_step.addEventListener("change", nstepListener);
  33. con_step.addEventListener("change", nstepListener);
  34. bn_step.addEventListener("change", nstepListener);
  35. tbn_step.addEventListener("change", nstepListener);
  36.  
  37. /**
  38. * リセットボタン
  39. */
  40. reset_btn.onPress = function() {
  41.    
  42.     sat_step.value = 1;
  43.     hue_step.value = 0;
  44.     con_step.value = 0;
  45.     bn_step.value = 0;
  46.     tbn_step.value = 0;
  47.    
  48.     // changeイベントを送出
  49.     sat_step.dispatchEvent({type:"change"});
  50.     hue_step.dispatchEvent({type:"change"});
  51.     con_step.dispatchEvent({type:"change"});
  52.     bn_step.dispatchEvent({type:"change"});
  53.     tbn_step.dispatchEvent({type:"change"});
  54. }
  55. stop();

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

です。実質、色の調整を行ってるのは、それぞれ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% [?]

written by ANN

add to hatena hatena.comment (26) add to del.icio.us (6) add to livedoor.clip (2) add to Yahoo!Bookmark (0) Total: 34

Leave a Reply