この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです

FLASH講座 ーアクションスクリプトの実践的事始めー
応用編 
(5) カラーミキサーの作成
   

 画像の編集や加工に欠かせないカラーミキサーですが、webページ上で閲覧者がイラストなどの色を自由に変えて見てみるというのも面白かろうと言うことで、私なりのものを作ってみました。

 色を変える対象物はここでは単に楕円ですが、いろんな絵を使うと楽しいものが出来るのではないでしょうか。 また、複数のポインターを使って、複数部位の色を変えて色の組み合わせを試してみると言う使い方にも拡張できます。 
  
ステージの設定


 ステージに色を変える対象物(ここでは楕円)を配置し、黒(#000000)に配色する。 これをシンボルに変換、インスタンス名をobjectとする。 その下部に、カラーインデックスを表示させるためのダイナミックテキストフィールドを配置し、変数をindexとする。
 カラーミキサー用のボックスとポインターの作成はちょっと複雑になるので、このページ下部で示すことにする。 簡単に述べると、カラー変化のついた矩形(インスタンス名:color)の上に、白黒とアルファー値のグラデーションを施した同サイズの矩形(インスタンス名:bright)を配置している。 ボックスのx座標は、0〜280(255+25)、y座標は−100〜+100に設定する。 ポインターはbright上に配置する。
  
スクリプト(ROOT、FRAME1)

 _root.onEnterFrame = function() {
  x=_root.bright.pointer._x;
  y=_root.bright.pointer._y;

  if (x<=43) { r0=255; g0=6*x; b0=0; }
  else if (x<=85) { r0=255-6*(x-43); g0=255; b0=0; }
  else if (x<=127) { r0=0; g0=255; b0=6*(x-85); }
  else if (x<=170) { r0=0; g0=255-6*(x-127); b0=255; }
  else if (x<=213) { r0=6*(x-170); g0=0; b0=255; }
  else if (x<=255) { r0=255; g0=0; b0=255-6*(x-213); }

  if (y<=0) { r=r0+(r0-255)*y/100;
    g=g0+(g0-255)*y/100;
    b=b0+(b0-255)*y/100; }
  if (y>0) { r=r0-r0*y/100; g=g0-g0*y/100;
    b=b0-b0*y/100; }

  if (x>255) { r=g=b=255-255*(y+100)/200; }

  ycolor = new Color(_root.object);
  ycolort=new Object();
  ycolort.rb=r;
  ycolort.gb=g;
  ycolort.bb=b;
  ycolor.setTransform(ycolort);

  cr="0"+r.toString(16);
  c_r=cr.substr(cr.length-2,2);
  cg="0"+g.toString(16);
  c_g=cg.substr(cg.length-2,2);
  cb="0"+b.toString(16);
  c_b=cb.substr(cb.length-2,2);;

  _root.index = "#"+c_r.toUpperCase()
          +c_g.toUpperCase()
          +c_b.toUpperCase();
 }


pointerに記述
  on (press) {
    this.startDrag(true, 0, -100, 280, 100);
  }
  on (release) {
    stopDrag();
  }



ポインター位置(x座標)をxと置く
ポインター位置(y座標)をyと置く

ここからは、x座標の、0〜255を6分割してそれぞれのr(赤)、g(緑)、b(青)の3色の値を計算式で表し、座標xに対応する3色をr0、g0、b0として取得する




yが負のときの座標yに対応する3色をr、g、bとして計算
(各値がy=-100のときに255になるようにする)
yが正のときの座標yに対応する3色をr、g、bとして計算
(各値がy=+100のときに0になるようにする)
(y=0のときに白黒色に影響されない原色となる)

黒から白までの色をy座標に基づき比例計算

カラーオブジェクトの定義(色を変える対象)
カラー詳細設定するためのオブジェクト定義
カラー詳細設定のrb、gb、bb値をそれぞれ上で取得計算したr、g、bとする

詳細設定を対象物に適用する

ここからは、r、g、b値を16進数に変換、頭に0を付けて後ろの二桁を取得している
(これをしないと0が表示されない)




16進数を大文字に変えて、r、g、b値の順に並べ、頭に#を付けて、テキストフィールドに表示する
(indexは配置したテキストフィールドで定義した変数)


インスタンスpointerを選択し、記述
ポインターがクリックされたら、
 ドラッグを有効にし、範囲をx:0−255、y:-100−+100とする

ドラッグが解消されたら、
 ドラッグを無効にする
  
ミキサーボックスとポインターの作成
  
 新規レイヤーに矩形(w:256、h:100)を描き、囲み線を削除、塗りつぶしにカラーパレットの最下段右下にある多色グラデーションを選ぶ。 これがカラーミキサー用下地となる。
 次に、この矩形の右側にw:24、h:100の線無し矩形を描き、上が白で、下が黒の線形グラデーションで塗りつぶす。

 次に、その上にレイヤーを追加し、上記下地の半分の大きさの矩形を二つ描き、一つが上半分を、もう一つが下半分を覆うように配置する。 塗りつぶしを以下のようにする。
 上半分の矩形: 縦方向線形グラデーション、上白、下白(アルファー値:0)
 下半分の矩形: 縦方向線形グラデーション、上白(アルファー値:0)、下黒
 次に二つの矩形をグループ化した後、シンボルに変換し、シンボル、インスタンス名を設定(ここでは、bright)する。このとき、基準点は、左中央に設定。

 bright編集画面にて、矩形中央にポインターを描く。 ここでは、真円を描き、変形のエンベロープツールで十字型にしている。 ついで、これをシンボルに変換し、インスタンス名をpointerとする。(brightの入れ子になる)
    
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。
 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。 
  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                           (by Hiraoka)

 HOME   Flash講座総リスト    flash アクションスクリプト 応用編 (6)