この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです |
||
FLASH講座 ーアクションスクリプトの実践的事始めー
|
||
| 画像の編集や加工に欠かせないカラーミキサーですが、ｗｅｂページ上で閲覧者がイラストなどの色を自由に変えて見てみるというのも面白かろうと言うことで、私なりのものを作ってみました。 色を変える対象物はここでは単に楕円ですが、いろんな絵を使うと楽しいものが出来るのではないでしょうか。 また、複数のポインターを使って、複数部位の色を変えて色の組み合わせを試してみると言う使い方にも拡張できます。 |
||
| ステージの設定 ステージに色を変える対象物(ここでは楕円)を配置し、黒（#000000）に配色する。 これをシンボルに変換、インスタンス名をobjectとする。 その下部に、カラーインデックスを表示させるためのダイナミックテキストフィールドを配置し、変数をindexとする。 カラーミキサー用のボックスとポインターの作成はちょっと複雑になるので、このページ下部で示すことにする。 簡単に述べると、カラー変化のついた矩形（インスタンス名：color）の上に、白黒とアルファー値のグラデーションを施した同サイズの矩形（インスタンス名：bright）を配置している。 ボックスのx座標は、０〜２８０（２５５+２５）、y座標は−１００〜＋１００に設定する。 ポインターは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(); } ｐｏｉｎｔｅｒに記述 on (press) { this.startDrag(true, 0, -100, 280, 100); } on (release) { stopDrag(); } |
ポインター位置（x座標）をｘと置く ポインター位置（y座標）をｙと置く ここからは、ｘ座標の、０〜２５５を６分割してそれぞれのｒ（赤)、ｇ（緑)、ｂ(青)の３色の値を計算式で表し、座標xに対応する３色をｒ０、ｇ０、ｂ０として取得する ｙが負のときの座標yに対応する３色をｒ、ｇ、ｂとして計算 （各値がy=-100のときに255になるようにする） ｙが正のときの座標yに対応する３色をｒ、ｇ、ｂとして計算 （各値がy=+100のときに0になるようにする） （ｙ＝０のときに白黒色に影響されない原色となる） 黒から白までの色をｙ座標に基づき比例計算 カラーオブジェクトの定義（色を変える対象) カラー詳細設定するためのオブジェクト定義 カラー詳細設定のｒｂ、ｇｂ、ｂｂ値をそれぞれ上で取得計算したｒ、ｇ、ｂとする 詳細設定を対象物に適用する ここからは、ｒ、ｇ、ｂ値を１６進数に変換、頭に０を付けて後ろの二桁を取得している （これをしないと０が表示されない） １６進数を大文字に変えて、ｒ、ｇ、ｂ値の順に並べ、頭に＃を付けて、テキストフィールドに表示する （indexは配置したテキストフィールドで定義した変数) インスタンスpointerを選択し、記述 ポインターがクリックされたら、 ドラッグを有効にし、範囲をｘ：0−255、ｙ：-100−+100とする ドラッグが解消されたら、 ドラッグを無効にする |
|
| ミキサーボックスとポインターの作成 新規レイヤーに矩形（ｗ：256、ｈ：100）を描き、囲み線を削除、塗りつぶしにカラーパレットの最下段右下にある多色グラデーションを選ぶ。 これがカラーミキサー用下地となる。 次に、この矩形の右側にｗ：24、ｈ：100の線無し矩形を描き、上が白で、下が黒の線形グラデーションで塗りつぶす。 次に、その上にレイヤーを追加し、上記下地の半分の大きさの矩形を二つ描き、一つが上半分を、もう一つが下半分を覆うように配置する。 塗りつぶしを以下のようにする。 上半分の矩形： 縦方向線形グラデーション、上白、下白（アルファー値：0) 下半分の矩形： 縦方向線形グラデーション、上白（アルファー値：0）、下黒 次に二つの矩形をグループ化した後、シンボルに変換し、シンボル、インスタンス名を設定（ここでは、bright）する。このとき、基準点は、左中央に設定。 bright編集画面にて、矩形中央にポインターを描く。 ここでは、真円を描き、変形のエンベロープツールで十字型にしている。 ついで、これをシンボルに変換し、インスタンス名をpointerとする。（brightの入れ子になる) |
||
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
|
||
HOME Flash講座総リスト flash アクションスクリプト 応用編 (6) |
||
