概要

3/4組素材を利用した、着せ替え感覚のフラッシュムービー。6種類、4組あるので組み合わせは1296通り。更にRGBスライダーで色の変更もできるようにしたので、自由度は大きい。
概要、構成メンバー、共演、対比の詳細はコチラ。　　　　　　　　　　　　　　

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

メイン画面で各キャラクター(文字)ボタンを押すと、そのキャラクターの編集画面が開きます。ラジオボタンで選択し、「RGBスライダー」パネルで色調整をします。どのキャラクターもバックボタンを押すと、編集内容が保持されたまま、メイン画面に戻ります。

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

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

作成例

　　　　　
　　　　　
背景は編集画面でもメイン画面でも選択できるが画像はあまりない。

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

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

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

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

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

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

color_fla09_as2.fla ←744kB(左上のswfのflaファイルです) 　↑右クリックして「ファイルをダウンロードして保存」してください。 カラー変換は、ムービークリップ (ロードした SWF など) の背景色には適用されません。 ムービークリップに割り当てられているグラフィックとシンボルにのみ適用されます。 ムービークリップに適用するときに、新しい値を算出する方法は次のとおりです。 新しい red 値 = (古い red 値 * redMultiplier)) + redOffset 新しい green 値 = (古い green 値 * greenMultiplier)) + greenOffset 新しい blue 値 = (古い blue 値 * blueMultiplier)) + blueOffset 新しい alpha 値 = (古い alpha 値 * alphaMultiplier)) + alphaOffset 算出後、カラーチャンネル値が 255 よりも大きい場合は 255 に設定され、 0 より小さい場合は 0 に設定されます。

　flaファイルを見てみるとわかりますが、対象がグラフィックの場合は、0 より小さい場合はまったく変化しません。逆にシンボルは0 より小さくても色が変化します（ボタンなど）。実のところ何故そうなるのかよくわかってない。また、サンプルswfはシンボルに適応したい為のものなので、元の古いrgb値の取得ができなくて表示される色とは一致しないし、「カラーコード表示」はいまいち怪しいです。あしからず。
カラーコード表示のためのスクリプト↓
txtR = r = Math.floor(ra.value+(rb.value+254)/2);／／赤の要素をテキスト"txtR"に表示
txtG = g = Math.floor(ga.value+(gb.value+254)/2);／／緑の要素をテキスト"txtG"に表示
txtB = b = Math.floor(ba.value+(bb.value+254)/2);／／青の要素をテキスト"txtB"に表示
code = r*256*256+g*256+b;／／各色要素から10進数カラーコードの算出
txtCode = "#"+("00000"+code.toString(16).toUpperCase()).substr(-6,6);／／16進数に変換してテキスト"txtCode"にカラーコードを表示
リセットするには、デフォルト値に戻す。ra:1、ga:1、ba:1、aa:1、rb:0、gb:0、bb:0、ab:0　・・・Colorクラスと違って簡単ですね。
モノトーンにするには、ra、ga、baの値を"0"にして、rb=gb=bbにしないと一致しません。6つのスライダーを動かすのも大変なので
ra:0、ga:0、ba:0、aa:1、rb:76.5、gb:76.5、bb:76.5、ab:0 にするラジオボタンを設置しました。
詳しくはflaファイルをご覧ください。

▶flaファイルにのってない、ラジオボタンの使い方
背景画像をチェンジするのにラジオボタンを使いました。
Bgroundというインスタンス名でムービークリップを作り、その中に背景画像を1フレームずつタイムラインに並べます。 次にフレームの数だけラジオボタンを配置し、コンポーネントインスペクタで詳細を入力します。data値は1〜10の数字でlabel値と同じ画像がおいてあるフレームと一致させます。groupNameはすべて統一します。各ラジオボタンにインスタンス名は必要ありません。これだけでは動かないので、アクションスクリプトを記述します。ムービークリップ"Bground"に「a」レイヤーを追加し、
フレーム1に↓のアクションスクリプト。
this.stop();

flListener = new Object();
flListener.click = function (evt_obj:Object){
var jump_frame = evt_obj.target.selection.data;　／／データ値を"jump_frame"とする
_root.Bground.gotoAndStop(jump_frame);　　／／Bgroundのタイムラインの"jump_frame"にフレーム移動してストップ。
}
BGGroup.setStyle("color", "0x000000");　／／グループネーム"BGGroup"の表示文字の色を黒色に
BGGroup.addEventListener("click", flListener);　　／／グループネーム"BGGroup"のclick イベントハンドラを追加

その他のラジオボタンの使い方はコチラ。もう少し詳しい説明をしてます。

参考画像

http://natalie.mu/media/comic/1105/extra/news_large_conan-dorama002.jpg　©青山剛昌／小学館・読売テレビ・TMS 1996　　コミックナタリー
http://natalie.mu/media/comic/1105/extra/news_large_conan-dorama003.jpg　©青山剛昌／小学館・読売テレビ・TMS 1996　　コミックナタリー
http://www.tombow.gr.jp/school/campaign/swf/campaign_main.swf　©青山剛昌／小学館・読売テレビ・TMS 1996　©トンボ学生服
http://www.animate-onlineshop.jp/special/conan/pc/　©青山剛昌／小学館・読売テレビ・TMS 1996
ジュストコール ／ カサノバブラウス ／ ジャーマンハルバード ／ レイピア／ ボウガン

参考画像を利用して配置して前処理する。結構ざっくり配置。（この後、イラストレーターに読み込み輪郭ラインを描く。）

　　　　　
色付けまでイラストレーターでやってもいいが、これくらいの色付けはフォトショップでやったほうが早い。（自動選択機能が優れている為）
ラインと同じ様に全て別レイヤーで、立体感を出すための明度や暗部や影は、白と黒で塗りつぶしてalphaを調整する。
同じ部分のラインと暗部を合わせてグループ化する。（FLASHでインスタンス名をつける。ラジオボタンで選択するため。_visible用）
　　　　　
その下に、色を塗りつぶした別レイヤーを配置する。（FLASHでRGBスライダーで色調整する対象のムービークリップとなる。要インスタンス名）
　　　　　
色調整をする場合、デフォルトの色と真逆の色相、彩度、明度に変えても、alpha白黒がオーバーラップしているので、違和感なく表示できる。
もちろん一人ずつ分離しているし、これだけで説明は無理なので、詳しくは 下記フォトショップ書類を模したムービーを参照。
キャラクターひとりの構成は、一番下が「○○○○_souti」で色変更対象の装置フォルダ。各部品レイヤー（靴とかネクタイとか上着とかを分離）を内包している。（下記のムービーではフォルダを開く事は不可）
その上が「○○○○_overly」で白と黒で明度や暗部や影がオーバーレイしている。
その上が「○○○○_line」でイラストレーターで描画した、キャラクターの輪郭。
その上が色変更することのない、頭や腕や小物。大体がこの４つで構成されている。詳しくは 下記を触ってみてください。

このフォトショップ書類をFLASHに読み込んだ後、フォルダを分解してタイムラインにレイヤーを配分する。
FLASHで「○○○○○._visible = false;」と「○○○○○._visible = true;」を適用するには、インスタンス名は全部違うように命名しなければならない。（当たり前だが。）

関連頁

３／４組(完成品)←探偵Ver.、怪盗Ver.、制服Ver.、私服Ver.、中世Ver.、中華Ver.を利用して、RGBスライダーで色調整（ColorTransformクラス）

画像

概要　戻る　3/4組 ←探偵Ver.、怪盗Ver.、制服Ver.、私服Ver.、中世Ver.、中華Ver.を利用して、RGBスライダーで色調整（ColorTransformクラス）

3/4組は青山剛昌の漫画作品『名探偵コナン』および『まじっく快斗』に登場する工藤新一(江戸川コナン)、服部平次、黒羽快斗(怪盗キッド)、白馬探の四人、もしくは四人の内三人が描かれたイラストに付けられるタグ。
タグ名の由来は構成メンバーの四人はそれぞれ他の三人と異なる側面を持ち合わせていることから由来する。
海外のファンの間では『The Four Geniuses(四人の天才たち)』『The Gosho Boys(剛昌ボーイズ)』と呼ばれている。

構成メンバー

工藤新一

『名探偵コナン』の主人公江戸川コナンの正体。
他の三人が高校生で学ランなのに対して、一人だけブレザーで実際は小学生。

服部平次

『名探偵コナン』の登場人物であり、新一のライバル。
他の三人が東京都民なのに対して一人だけ大阪府民、色黒。

黒羽快斗

『まじっく快斗』の主人公怪盗キッドの正体であり、『名探偵コナン』にもゲスト出演している。
他の三人が高校生探偵なのに対して一人だけ怪盗。

白馬探

『まじっく快斗』の登場人物であり、怪盗キッドのライバル。
他の三人が酷似した容貌をしているのに対して一人だけ異なる。

共演

四人全員が共演したことは現在はなく、多くても三人が共演する形となることが多い。共演は主に劇場版であることが多い。

ただし共演といっても実際は、新一は江戸川コナンの姿で、快斗は怪盗キッドの姿なので、四人が高校生としての姿で一同に揃う事はありえない。

対比

四人には共通する面も多く、よく対比される。

FLASH関連リンク

サイトの他のコンテンツ