チビキャラ.com—カラーパレット＆ミキサー版—

概要

チビキャラ素材を利用した、カラーパレット＆ミキサーから色を選択する「ぬり絵」フラッシュムービー。各キャラクターの、「色」を好みの色に編集して、キャプチャー保存してください。

作成例

　

　
メイン画面とコナン編集画面には、35×15ピクセルの透明ボタンがあります。メイン画面にあるボタンは「文字」を、コナン編集画面にあるボタンは「パネル」を、表示／非表示にします。　　

編集画面（各キャラクター）

メイン画面で各キャラクター(文字)ボタンを押すと、そのキャラクターの編集画面が開きます。ラジオボタンで選択し、「カラーパレット＆ミキサー」パネルで色調整をします。どのキャラクターも⊗ボタンを押すと、編集内容が保持されたまま、メイン画面に戻ります。
（例外で、コナン画面のみ、メイン画面に戻らずキャプチャーして下さい。透明ボタンでラジオボタンとカラーパネルを非表示にできます。）

メイン画面（キャプチャー＆保存画面）

　※途中で「チビキャラ.com」ボタンを押すと、編集が全てリセットされるので注意して下さい。
１.透明ボタンを押して、好みにより文字を表示／非表示にします。
２.キャプチャーボタンを押すと、シャッター音がします。保存ボタンを押すとBOXが開くので、任意の場所に保存します。
３.リセットボタンを押すと、再編集ができます。保存する場合は、ファイル名を変更するか別の場所に変更して保存します。

FLASHの画面をキャプチャーしてファイル名をつけて保存する件

チビキャラ.com—色の三属性とコントラスト調整—にて説明

アクションスクリプト（AS3.0）

チビキャラ.com—色の三属性とコントラスト調整—(AS3.0)にて説明

アクションスクリプト（AS2.0）

プロトタイプ？試作品？サンプル↓

詳しくは、flaファイルを見て下さい。
▶色の操作はColorクラスで、 Flash 7 以前で使用。Flash 8 以降では ColorTransform クラスを使用
ActionScript 2.0 リファレンスガイド—Color クラス
Color クラスは Flash 8 以降では、使用禁止・・・という決まりらしいので、サンプルはFlash 7で作成。ただ、「チビキャラ.com」のswfはうっかりFlash 9のままだったんですが、ちゃんと動いているんで、なにが「使用禁止」か分からない・・・。

▶ターゲットになるmcはただのムービークリップではなく、カラー制御装置を自分の中に据えなければならない。
ターゲットになるmcにインスタンス名をつけて、更にそのmcのクリップアクションにonClipEvent (load) {theColor = new Color(this);}　と記述する。（theColorは任意。）これがないと着色しない。MCインスタンスが持つ、「_x,_y」や「_alpha」のようなプロパティと違い、Colorクラスは特殊で、プロパティも「明度」「着色」「アルファ」など、様々な設定が可能なので、インスタンスを指定して、対象ごとにカラー制御装置を据付けなければなりません。左図がカラー制御装置で、onClipEvent (load) {theColor = new Color(this);}とそれぞれに記述してあります。他のボタンなどからアクセスする場合は、[インスタンス名.theColor]となります。

▶MovieClipの着色をクリアするには、setTransformを使う。
Color オブジェクトのカラー変換情報
Colorクラスに用意されているプロパティ名はra, ga, ba, aa, rb, gb, bb, ab。パラメータの入力形式は 0xRRGGBBAA。(0xは、数値が16進数であることを ActionScript コンパイラに伝える意）　ra は、赤の成分のパーセント (-100 ～ 100) 。ga は、緑の成分のパーセント (-100 ～ 100) 。　ba は、青の成分のパーセント (-100 ～ 100) 。aa は、アルファのパーセント (-100 ～ 100) 。　rb は、赤の成分のオフセット (-255 ～ 255) 。gb は、緑の成分のオフセット (-255 ～ 255) 。　bb は、青の成分のオフセット (-255 ～ 255) 。ab は、アルファのオフセット (-255 ～ 255) です。カラー設定を何もしていないデフォルト値のObject指定は、.setTransform({ra:100, ga:100, ba:100, rb:0, gb:0, bb:0});なので、「リセットボタン」に記述します。ただ、先に.getTransformしておかないとMovieClipは(#000000)で黒く着色されてしまいます。なので「リセットボタン」のボタンアクションは
on (press) {[カラー制御装置].getTransform(); }　／／マウスプレスでカラー制御装置の色設定を取得
on (release) {[カラー制御装置].setTransform({ra:100, ga:100, ba:100, rb:0, gb:0, bb:0}); }／／マウスリリースでデフォルト値に戻す
となります。（ただしサンプルswfはフレームアクションにしてあります。）

▶ラジオボタンで、ターゲットmcを選択　戻る
ActionScript 2.0 コンポーネントリファレンスガイド / RadioButton コンポーネント
[コンポーネント] から、ライブラリにRadioButtonコンポーネントをドラッグしておきます。ライブラリに登録したRadioButtonを、ステージにカラー制御装置と同じ数を並べ、各ラジオボタンの[コンポーネントインスペクタ] パネルでパラメータを設定します。「値」の部分をクリックすると、入力できるようになっています。　dataにはターゲットmc（カラー制御装置）のインスタンス名。　labelには日本語の表示文字。　groupName は統一します。左図の場合groupNameは”radioGroup”と入力したので、他のラジオボタンも”radioGroup”で統一する、という事です。デフォルトでは選択肢から 1 つだけしか選択できない様になっていて、グループ中のラジオボタンは1つしか選択できないので便利です。あとのパラメータはデフォルト値のままです。パラメータ入力が済んだら次に、ラジオボタングループを機能させる為にアクションスクリプトを記述します。
シーン１のフレームアクションに、mcName = "mc00"としておき、" "の中をラジオボタン選択で変化させます。
flashistListener = new Object();
flashistListener.click = function (evt){
　　_root.mcName = evt.target.selection.data;　　／／クリックでmcNameをデータ値にする
　　_root.panel.txtN = _root[_root.mcName].name;}　　／／現在の「カラー制御装置」をテキスト表示
[統一したgroupName].setStyle("color", "0xFFFFFF");　　／／表示文字の色を白色に
[統一したgroupName].addEventListener("click", flashistListener);　　／／click イベントハンドラを追加
と記述します。
他には、ボタンアクションで各RadioButtonに直接on (click) {mcName = "そのmcのインスタンス名";name = "そのmcの日本語表示文字";}とする方法もあるが、スマートなフレームアクションにした。

▶パレットとミキサーから色を選び、カラー制御装置を着色する 格子で仕切られたものを「パレット」と呼び、スペクトルのほうを「ミキサー」と呼ぶことにします。 「パレット」は左上から18×12の216色の部分と白黒部分はWEBカラーになっていて、どんなモニターでも同じ色で見える色です。他の部分は、「チビキャラ.com」で使っている色を独自に追加しました。右下の「×」印の場所が「色の新規作成」装置になっていて、「ミキサー」から選んだ色を表示します。最終的には「スポイト」がマウスアップした色が、カラー制御装置を着色します。「色の新規作成」装置のクリップアクションです→ onClipEvent (load) { sampleS = new Color(this);//自分を対象にsampleSという名前でカラー装置を設置 } onClipEvent (mouseMove) {//マウスが動いていて rgb = sampleS.getRGB();//変数rgbに自分の着色コードを取得 if (this.hitTest(_root._xmouse,_root._ymouse,1)) {//自分の上にマウスがあれば _parent.ccode.theColor.setRGB(rgb);//「現在の色表示」に色表示 _parent.txtCode = "#"+("00000"+rgb.toString(16).toUpperCase()).substr(-6,6);//※ _parent.txtR = R = Math.floor(rgb/0x10000);//各色要素を切り捨て整数にし、テキスト表示 _parent.txtG = G = Math.floor(rgb/0x100)%0x100; _parent.txtB = B = rgb%0x100; } } //※16進数文字列に変換し、大文字に変換し、文字数を指定して、テキストに表示 onClipEvent (mouseUp) {//マウスアップがあり、 if (this.hitTest(_root._xmouse,_root._ymouse,1)) {//自分の上にマウスがあれば _root[_root.mcName].theColor.setRGB(rgb);//現在の「カラー制御装置」に変数rgbに着色 } } 「パレット」のほうは配置された四角それぞれがカラー制御装置を持っていますが、「ミキサー」はポインタのX,Y座標で色が変わります。つまり、今見えているスペクトルはダミーで、なくても色は取得できます。
	上下のswfは同じflaファイルからパブリッシュしたものです。上はスペクトルを非表示にしてパブリッシュ。 　スペクトルがダミーだとわかると思います。 　swfのスペクトルは、下記の方法で作成したもの。 　基準点は、左中央に設定。新規レイヤーに矩形を描き、囲み線を削除、塗りつぶしにカラーパレットの最下段右下にある多色グラデーションを選ぶ。この矩形の右側に線無し矩形を描き、上が白で、下が黒の線形グラデーションで塗りつぶす。 　次に、その上に新規レイヤーを追加し、上記と同じ大きさの矩形を描き、塗りつぶしにカラーパレットの最下段右下にある白黒グラデーションを選ぶ。 　矩形の一番上：　縦方向線形グラデーション　白、 　矩形の中央：　縦方向線形グラデーション、白（アルファー値：0）、 　矩形の一番下：　縦方向線形グラデーション　下黒
ここで、ふと考えたのが、「ポインタのX,Y座標で作られる色が、作ったスペクトルと合致するのか？」ということ。 よくよく見てみると、上半分が暗いような気がする・・・ 　というわけで、ポインタが作り出す、実際の色を見てみたくなった。 　1×1ピクセルの極少の正方形ムービークリップ（黒色）にクリップアクションを記述し、カラー制御装置にする。それをコピー、ペーストして140×100ピクセル分敷き詰める。（mcの基準が中心なので実際は14241個、インスタンス名は必要ない。） 　　　　　　　　　　　　　　　　　　　　　　　　　　　 パブリッシュしようとしたら「スタックメモリが不足しています。操作は完了できません」となったので左2/3と右2/3の、2回に分割して書き出しました。swfを置きたかったが、こんなに小さいのに10MBもあって負荷が大きいのでここに置くのはやめました。 ↑はイメージキャプチャして繋げた画像です。上のswfと比べて見ると、一目瞭然ですね。 せっかくなので、この画像を使う事にしました。スペクトル画像はコチラ onClipEvent (load) { theColor = new Color(this); x = this._x; y = this._y; function paint(x,y) { if (x <20) { r = 255; g = x*255/20; b = 0 ; } else if (x <40) { r = 255-(x-20)*255/20; g = 255; b = 0; } else if (x <60) { r = 0; g = 255; b = (x-40)*255/20; } else if (x <80) { r = 0; g = 255-(x-60)*255/20; b = 255; } else if (x <100) { r = (x-80)*255/20; g = 0; b = 255; } else if (x <=120) { r = 255; g = 0; b = 255-(x-100)*255/20; } else { r = g = b = 255/2; } if (y >= 0) { r = r-y*r/50; g = g-y*g/50; b = b-y*b/50; } else { r = r-y*(255-r)/50; g = g-y*(255-g)/50; b = b-y*(255-b)/50; } r = Math.round(r); g = Math.round(g); b = Math.round(b); code = r*256*256+g*256+b; } paint(this._x,this._y); this.theColor.setRGB(code); } 無い色は「ミキサー」で作って「パレット」に新規登録する、仕様にしたかったのですが、RGBカラーをすべて網羅したわけではありません。 ポインタをムーヴしてみるとわかりますが、表示できない色があって、仕方がないので、「パレット」に独自に色を追加しました。 その他詳細は、flaファイルを見て下さい。

参考画像

http://shinichi0heiji.mforos.com/1610155/8099904-heiji-y-kazuha/?pag=2
http://fotos.miarroba.es/fo/505d/294DD709F1284D620C302B4D620C2A.jpg

FLASH関連リンク

サイトの他のコンテンツ