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

ちびきゃらどっとこむ

表示900×505（実際の大きさ1200×674）ピクセル

▶実物大を利用する

概要

チビキャラ素材を利用した、「ぬり絵ツール」のようなフラッシュムービー。色の三属性、色相・彩度・明度に加え、コントラストも変更できます。

利用法

各キャラクターの、「着色表示」「色」を好みの色に編集して、キャプチャー保存してください。

作成例

　

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

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

メイン画面で各キャラクター(文字)ボタンを押すと、そのキャラクターの編集画面が開きます。「着色表示」コントローラーと「色変更」パネルで色調整をします。どのキャラクターもコントローラーの⊗ボタンを押すと、編集内容が保持されたまま、メイン画面に戻ります。誤ってパネルの小さい⊗ボタンを押してしまっても、再び表示させる事はできます。色々マウスオーバーしてクリックしてみてください。
（例外で、コナン画面のみ編集内容が残りません。透明ボタンでパネルとコントローラーを非表示にできますので、メイン画面に戻らずキャプチャーして下さい。）

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

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

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

ご存知の方もいらっしゃると思いますが、上の.swfは少し前まで、キャプチャーしてファイル名をつけることができませんでした。利用者まかせで、スクリーンショット機能を使って画像編集ソフトでトリミングしてもらうか、ベクターなどでフリーのキャプチャーソフトやブラウザのアドオンを利用してもらう、という案内をしていました。今までも、URLLoaderでジャバスクリプトに渡して、PHPやCGIで受け取りサーバーに保存する、という事はできたようですが、投稿サイトならともかく、そこまでの必要性もない.swfです。利用者のOSやブラウザの種類によって、一元化する事ができず、又レンタルサーバーによっても仕様が違うことが分かっていた為、踏み切る事ができずにいました。
ところが、Flash Player 10から、FileReference クラス(AS3.0)にsave()が使える様になったようです。save() メソッドを使えば、キャプチャーした画像データをローカルにファイル名を付けて保存できます。ただ、保存の許可は厳しい状況のようです。同じドメインでなく許可ファイルがないと、セキュリティの関係からエラーになるようです。
又、キャプチャーするにはJPGEncoder(およびPNGEncoder)クラスが必要で、http://code.google.com/p/as3corelib/よりas3corelibライブラリをダウンロードして解凍し、パスを通す必要があります。flashを起動し、[環境設定]→[ActionScript]→[ActionScript 3.0 設定] より、クラスパスを設定してください。

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

FileReference クラス(AS3.0)を使う為に、プロジェクトは、AS3.0、FlashPlayer10で作成します。
AS3.0では、.gotoAndStop("○");や._visible=○○;が動かないし、タイムラインをどんな形に変更すればいいのかアイデアも浮かばず、一から作り直すのは気が遠くなる。そこで、先に作った.swf(AS2.0)を読み込むことにしました。
フォトショップで画像つくり(loader_as3.psd)して、ステージに配置します。シャッター音のするGrab.aifは、ライブラリに読み込んでおきます。
（loader_as3.psdづくりは省略。ライブラリに入ってるものを参考。まずは↓のアクションスクリプトウインドウを閉じてください。）

アクションスクリプト(AS3.0)の説明

import com.adobe.images.*;
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.utils.ByteArray;

var url0 : URLRequest = new URLRequest("chibichara.swf");
// ローダーオブジェクトを作成し配置
var loader_obj : Loader = new Loader();
stage.addChild(loader_obj);
loader_obj.x = 0;
loader_obj.y = 0;
loader_obj.load(url0);

// ローダーインフォを取得
var info : LoaderInfo = loader_obj.contentLoaderInfo;

info.addEventListener(Event.OPEN,LoaderInfoOpenFunc);
function LoaderInfoOpenFunc(event : Event) {
	trace("読み込みを開始した");
	trace("要求側ファイルの置き場所 : " + info.loaderURL);
}
// プログレスバー「meter」のイベント
info.addEventListener(ProgressEvent.PROGRESS,LoaderInfoProgressFunc);
function LoaderInfoProgressFunc(event : ProgressEvent) {
	trace("読込:" + event.bytesLoaded);
	trace("全体:" + event.bytesTotal);
	trace("パーセント:" + Math.floor(event.bytesLoaded/event.bytesTotal*100));

meter.width = event.bytesLoaded/event.bytesTotal*100;
}

info.addEventListener(Event.INIT,LoaderInfoInitFunc);
function LoaderInfoInitFunc(event : Event) {
	trace("読み込んだコンテンツの初期化が行われプロパティにアクセス可能");
	trace("MIME タイプ : " + info.contentType);
	trace("ファイルの置き場所 : " + info.url);
	trace("幅 : " + info.width);
	trace("高さ : " + info.height);
	// SWFファイルかチェック
	if (info.contentType == "application/x-shockwave-flash") {
		trace("SWFファイルのバージョン : " + info.swfVersion);
		trace("フレームレート : " + info.frameRate);
		trace("アクションスクリプトのバージョン : " + info.actionScriptVersion);
	}
}

info.addEventListener(Event.COMPLETE,LoaderInfoCompleteFunc);
function LoaderInfoCompleteFunc(event : Event) {
	trace("読み込みを完了");
}

info.addEventListener(IOErrorEvent.IO_ERROR,LoaderInfoIOErrorFunc);
function LoaderInfoIOErrorFunc(event : IOErrorEvent) {
	trace("ファイル入出力のエラー");
}

//描画結果をビットマップデータにキャプチャーする
var bmp_data : BitmapData = new BitmapData( 1200 , 650 , true , 0x00000000);
var bmp_obj : Bitmap = new Bitmap( bmp_data , PixelSnapping.AUTO , true);
stage.addChild(bmp_obj);
//位置
bmp_obj.x = 0;
bmp_obj.y = 0;
// キャプチャ時に指定するパラメータ
var matrix : Matrix = new Matrix(1,0,0,1,0,0);
var color : ColorTransform = new ColorTransform(1,1,1,1,0,0,0,0);
var rect : Rectangle = new Rectangle(0,0,1200,650);

// マウスが押されたときに実行する
// stage の内容をイメージに描画する「音ボタン」のマウスイベント
otobotan.addEventListener(MouseEvent.MOUSE_DOWN, MouseLDownFunc2);
function MouseLDownFunc2(event:MouseEvent) {
	bmp_data.draw(stage, matrix, color, BlendMode.NORMAL, rect, true);
}
// イメージをリセットする「リセットボタン」のマウスイベント
reset.addEventListener(MouseEvent.MOUSE_DOWN, MouseLDownFunc3);
function MouseLDownFunc3(event:MouseEvent) {
	bmp_data.fillRect(rect , 0x00000000);
}
// 保存ダイアログを出す「保存ボタン」のマウスイベント
botan.addEventListener(MouseEvent.CLICK, onSave);
//FileReferenceを作成
var fr = new FileReference();
function onSave(e:MouseEvent):void {
	// stageをBitmap化したものを、ByteArrayに変換。
	var jpg:JPGEncoder = new JPGEncoder(100);
	var ba:ByteArray = new ByteArray();
	ba = jpg.encode(bmp_data);
	//ファイル名をつけてローカルに保存
	fr.save(ba, "SavedFile.jpg");
}

7〜56行目　ファイルを読み込み stage の表示リストに登録して表示する
　↓
59行目　BitmapData オブジェクトを作成する
　↓
60行目　Bitmap オブジェクトを作成する
　↓
61行目　Bitmap オブジェクトを表示する
　↓
72行目　BitmapDataクラスのdraw()で書き出す[BitmapDataクラスdraw]
　↓
76行目　BitmapDataクラスのfillRect()でリセット[BitmapDataクラスfillRect]
　↓
87行目　PNGEncoderかJPEGEncoderクラスのencodeメソッドで画像をエンコード[参照:as3corelib]BitmapDataからByteArrayへの変換
　↓
91行目　fileReferenceクラスのsave()で保存[filereferenceクラスsave]

これでパブリッシュした.swfファイルを、下記で作ったAS2.0の.swf（ここではchibichara.swf）と同じ階層におきます。
そして、.swfをhtmlに追加した時は、.swfのパラメータに、（wmode = transparent）が必要です。

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

コンポーネントスライダーは場所を取るわりにはドラッグしにくく結構不具合が起きるので、NumericStepperを使って省スペース化を計ります。なので、プロジェクトはAS2.0でプレーヤー9で作成しました。コンポーネントの使い方は、アドビリファレンスの「NumericStepper コンポーネントを使用」を参照。
ライブラリにを追加後、アクションスクリプトでいくつも使い回しできる。リンケージではなく、必ずステージに配置し、インスタンス名を入力する事が必須とアドビリファレンスのページに書いてあります。
MovieClipの色を調整変更するには、AS2.0用のTweenerのColorShortcutsを使うと「ColorShortcuts.init();」だけで実装できる。
http://code.google.com/p/tweener/より、tweener_1_33_74_as2.zip　「(Flash 8+)Stable version 1.33.74, Actionscript 2」をダウンロード。
解凍した「caurina」フォルダを、プロジェクト(.fla)と同じ階層に置きます。環境設定でパスを通さなくてもインポートできるようになります。
「色の3属性」は色相、彩度、明度。なので最初はNumericStepperが３つでいいかと思ってましたが、４つにしました。
Tweenerの彩度(saturation)は、設定した色相をリセットしてしまうため、外そうかと思ったが、灰色（グレースケール）を表現するために使用。
本来なら明度はbrightnessなのだが、黒(#000000)と白(#FFFFFF)を表現するためには、tintBrightnessを使用。
色の3属性ではないが、色相(hue)にリンクした濃淡を表現するために、コントラスト（対照）を使用。
リファレンスどおり、各プロパティのUsual values値をNumericStepperのパラメータに正しく設定します。（今回は_brightnessと_dumbSaturationは使っていません。）
一例を説明(hei_hairの場合)。一つのパネルにまとめ、子MovieClipにしてあります。

Close_btn	Reset_btn	ターゲットのコピー	パネル枠	明度	彩度	色相	コントラスト

import caurina.transitions.Tweener; import caurina.transitions.properties.ColorShortcuts; ColorShortcuts.init(); // リスナーオブジェクト var nstepListener:Object = new Object(); nstepListener.change = function(ev:Object){ var val = ev.target.value; switch(ev.target._name){ // 平次の頭用パネル case 'heiji_hair_bn_step': Tweener.addTween(_root.chara.hei_hair,{_tintBrightness:val}); break; case 'heiji_hair_sat_step': Tweener.addTween(_root.chara.hei_hair,{_saturation:val}); break; case 'heiji_hair_hue_step': Tweener.addTween(_root.chara.hei_hair,{_hue:val}); break; case 'heiji_hair_con_step': Tweener.addTween(_root.chara.hei_hair,{_contrast:val}); break; } } // リスナーを登録 // 平次の頭用 heiji_hair_bn_step.addEventListener("change", nstepListener); heiji_hair_sat_step.addEventListener("change", nstepListener); heiji_hair_hue_step.addEventListener("change", nstepListener); heiji_hair_con_step.addEventListener("change", nstepListener); /** * リセットボタン */ // 平次の頭用リセットボタン _root.hei_hair_P.Reset_btn.onPress = function() { heiji_hair_bn_step.value = 0; heiji_hair_sat_step.value = 1; heiji_hair_hue_step.value = 0; heiji_hair_con_step.value = 0; // changeイベントを送出 heiji_hair_bn_step.dispatchEvent({type:"change"}); heiji_hair_sat_step.dispatchEvent({type:"change"}); heiji_hair_hue_step.dispatchEvent({type:"change"}); heiji_hair_con_step.dispatchEvent({type:"change"}); }			(_contrast)コントラストは、対照NumericStepperのパラメータの説明 (_hue)色相は、色相NumericStepperのパラメータの説明 (_saturation)彩度は、彩度NumericStepperのパラメータの説明 (_tintBrightness)明度は、明度NumericStepperのパラメータの説明パネル枠は、このパネルの背景イメージターゲットのコピーは、これが何のパネルかわかりやすくする為の　　　　　　　　　（ターゲットイメージ）の縮小イメージ Reset_btnは、４つのNumericStepperの値を元に戻すボタン Close_btnは、_rootから操作する為のボタンアクションスクリプトの説明「a」レイヤーに記述１行目　//Tweenerをインポート２行目　//ColorShortcutsをインポート３行目　//ColorShortcutsクラスを初期化５行目　// リスナーオブジェクトの作成　　　　//イベント　詳しくはadobeリファレンスを参照９行目　//ステートメントで分岐　詳しくはadobeリファレンスを参照 11行目〜24行目　　　　Tweenerのプロパティをchange イベントに発生　　　　詳しくはTweenerのリファレンスを参照 26行目　//リスナーを登録　詳しくはadobeリファレンスを参照 36行目　// リセットボタンのイベント 42行目　//登録されたリスナーにイベントを送り出す。　　　　　詳しくはadobeリファレンスを参照

ひとつのターゲットイメージにひとつの色調整パネルがあります。ターゲットイメージは、子MovieClip(chara)の中に、31個あるので、パネルも31個作る必要があります。ライブラリにあるパネルを複製して保存し、ステージに配置してダブルクリックで開き、アクションスクリプトの下記の部分を書き換え、NumericStepperのインスタンス名を変更すればOK。それを、ターゲットイメージ分繰り返す。
ターゲットイメージ　○○
色調整パネル　　　　○○_P
明度NumericStepper　○○_P.○○○○_bn_step
彩度NumericStepper　○○_P.○○○○_sat_step
色相NumericStepper　○○_P.○○○○_hue_step
対照NumericStepper　○○_P.○○○○_con_step
リセットボタン　　　○○_P.Reset_btn

シーン１が、31個もの色調整パネルで埋め尽くされるので、各キャラクターごとに(_visible)で表示／非表示(true/false)できるようにする。

シーン１のレイヤー「A」に記述したアクションスクリプト。プロパティ(_visible)を非表示(false)。表示させたいパネルのみ(true)にする

フレーム３
フレーム４
フレーム５
フレーム６
フレーム７
フレーム８
フレーム９
フレーム 10

レイヤー「A」のフレーム３（コナン編集画面）に記述したアクションスクリプト

this.stop();

chara.sin_outlines_hair._visible = false;
chara.sin_outlines_jacket._visible = false;
chara.sin_outlines_underwear._visible = false;
chara.sin_hair._visible = false;
chara.sin_jacket._visible = false;
chara.sin_underwear._visible = false;

レイヤー「A」のフレーム４（平次編集画面）に記述したアクションスクリプト

hei_hair_P._visible = true;
hei_jacket_P._visible = true;
hei_eyes_P._visible = true;
hei_underwear_P._visible = true;
kaz_hair_P._visible = false;
kaz_jacket_P._visible = false;
kaz_eyes_P._visible = false;
kaz_ribbon_red_P._visible = false;
kaz_ribbon_blue_P._visible = false;
kaz_underwear_P._visible = false;
ran_hair_P._visible = false;
ran_jacket_P._visible = false;
ran_eyes_P._visible = false;
ran_button_P._visible = false;
ran_underwear_P._visible = false;
sin_hair_P._visible = false;
sin_jacket_P._visible = false;
sin_necktie_P._visible = false;
sin_eyes_P._visible = false;
sin_button_P._visible = false;
sin_underwear_P._visible = false;
kai_hair_P._visible = false;
kai_jacket_P._visible = false;
kai_eyes_P._visible = false;
kai_button_P._visible = false;
kai_underwear_P._visible = false;
aok_hair_P._visible = false;
aok_jacket_P._visible = false;
aok_ribbon_red_P._visible = false;
aok_eyes_P._visible = false;
aok_underwear_P._visible = false;
// ○○ボタンをクリックしたら○○用パネルを表示、非表示
// 平次の頭用
btn_hei_hair.onRelease = function() {hei_hair_P._visible = true;}
hei_hair_P.Close_btn.onRelease = function() {hei_hair_P._visible = false;}
// 平次の服用
btn_hei_jacket.onRelease = function() {hei_jacket_P._visible = true;}
hei_jacket_P.Close_btn.onRelease = function() {hei_jacket_P._visible = false;}
// 平次の目用
btn_hei_eyes.onRelease = function() {hei_eyes_P._visible = true;}
hei_eyes_P.Close_btn.onRelease = function() {hei_eyes_P._visible = false;}
// underwear用
btn_hei_underwear.onRelease = function() {hei_underwear_P._visible = true;}
hei_underwear_P.Close_btn.onRelease = function() {hei_underwear_P._visible = false;}

_root.contorol_hei.necktie_btn._alpha = 60;
_root.contorol_hei.button_btn._alpha = 60;
_root.contorol_hei.ribbon_red_btn._alpha = 60;
_root.contorol_hei.ribbon_blue_btn._alpha = 60;

_root.contorol_hei.Close_btn.onPress = function() {_root.gotoAndStop("10");}

this.stop();

レイヤー「A」のフレーム５（新一編集画面）に記述したアクションスクリプト

hei_hair_P._visible = false;
hei_jacket_P._visible = false;
hei_eyes_P._visible = false;
hei_underwear_P._visible = false;
kaz_hair_P._visible = false;
kaz_jacket_P._visible = false;
kaz_eyes_P._visible = false;
kaz_ribbon_red_P._visible = false;
kaz_ribbon_blue_P._visible = false;
kaz_underwear_P._visible = false;
ran_hair_P._visible = false;
ran_jacket_P._visible = false;
ran_eyes_P._visible = false;
ran_button_P._visible = false;
ran_underwear_P._visible = false;
sin_hair_P._visible = true;
sin_jacket_P._visible = true;
sin_necktie_P._visible = true;
sin_eyes_P._visible = true;
sin_button_P._visible = true;
sin_underwear_P._visible = true;
kai_hair_P._visible = false;
kai_jacket_P._visible = false;
kai_eyes_P._visible = false;
kai_button_P._visible = false;
kai_underwear_P._visible = false;
aok_hair_P._visible = false;
aok_jacket_P._visible = false;
aok_ribbon_red_P._visible = false;
aok_eyes_P._visible = false;
aok_underwear_P._visible = false;
// ○○ボタンをクリックしたら○○用パネルを表示、非表示
// 新一の頭用
btn_sin_hair.onRelease = function() {sin_hair_P._visible = true;}
sin_hair_P.Close_btn.onRelease = function() {sin_hair_P._visible = false;}
// 新一の服用
btn_sin_jacket.onRelease = function() {sin_jacket_P._visible = true;}
sin_jacket_P.Close_btn.onRelease = function() {sin_jacket_P._visible = false;}
// 新一の目用
btn_sin_eyes.onRelease = function() {sin_eyes_P._visible = true;}
sin_eyes_P.Close_btn.onRelease = function() {sin_eyes_P._visible = false;}
// 新一のネクタイ用
btn_sin_necktie.onRelease = function() {sin_necktie_P._visible = true;}
sin_necktie_P.Close_btn.onRelease = function() {sin_necktie_P._visible = false;}
// 新一のボタン用
btn_sin_button.onRelease = function() {sin_button_P._visible = true;}
sin_button_P.Close_btn.onRelease = function() {sin_button_P._visible = false;}
// underwear用
btn_sin_underwear.onRelease = function() {sin_underwear_P._visible = true;}
sin_underwear_P.Close_btn.onRelease = function() {sin_underwear_P._visible = false;}

_root.contorol_sin.brow_btn._alpha = 60;
_root.contorol_sin.ribbon_red_btn._alpha = 60;
_root.contorol_sin.ribbon_blue_btn._alpha = 60;

_root.contorol_sin.Close_btn.onPress = function() {_root.gotoAndStop("10");}

this.stop();

レイヤー「A」のフレーム６（快斗編集画面）に記述したアクションスクリプト

hei_hair_P._visible = false;
hei_jacket_P._visible = false;
hei_eyes_P._visible = false;
hei_underwear_P._visible = false;
kaz_hair_P._visible = false;
kaz_jacket_P._visible = false;
kaz_eyes_P._visible = false;
kaz_ribbon_red_P._visible = false;
kaz_ribbon_blue_P._visible = false;
kaz_underwear_P._visible = false;
ran_hair_P._visible = false;
ran_jacket_P._visible = false;
ran_eyes_P._visible = false;
ran_button_P._visible = false;
ran_underwear_P._visible = false;
sin_hair_P._visible = false;
sin_jacket_P._visible = false;
sin_necktie_P._visible = false;
sin_eyes_P._visible = false;
sin_button_P._visible = false;
sin_underwear_P._visible = false;
kai_hair_P._visible = true;
kai_jacket_P._visible = true;
kai_eyes_P._visible = true;
kai_button_P._visible = true;
kai_underwear_P._visible = true;
aok_hair_P._visible = false;
aok_jacket_P._visible = false;
aok_ribbon_red_P._visible = false;
aok_eyes_P._visible = false;
aok_underwear_P._visible = false;
// ○○ボタンをクリックしたら○○用パネルを表示、非表示
// 快斗の頭用
btn_kai_hair.onRelease = function() {kai_hair_P._visible = true;}
kai_hair_P.Close_btn.onRelease = function() {kai_hair_P._visible = false;}
// 快斗の服用
btn_kai_jacket.onRelease = function() {kai_jacket_P._visible = true;}
kai_jacket_P.Close_btn.onRelease = function() {kai_jacket_P._visible = false;}
// 快斗の目用
btn_kai_eyes.onRelease = function() {kai_eyes_P._visible = true;}
kai_eyes_P.Close_btn.onRelease = function() {kai_eyes_P._visible = false;}
// 快斗のボタン用
btn_kai_button.onRelease = function() {kai_button_P._visible = true;}
kai_button_P.Close_btn.onRelease = function() {kai_button_P._visible = false;}
// underwear用
btn_kai_underwear.onRelease = function() {kai_underwear_P._visible = true;}
kai_underwear_P.Close_btn.onRelease = function() {kai_underwear_P._visible = false;}

_root.contorol_kai.outlines_mouth_btn._alpha = 60;
_root.contorol_kai.outlines_nose_btn._alpha = 60;
_root.contorol_kai.brow_btn._alpha = 60;
_root.contorol_kai.nose_btn._alpha = 60;
_root.contorol_kai.mouth_btn._alpha = 60;
_root.contorol_kai.necktie_btn._alpha = 60;
_root.contorol_kai.ribbon_red_btn._alpha = 60;
_root.contorol_kai.ribbon_blue_btn._alpha = 60;

_root.contorol_kai.Close_btn.onPress = function() {_root.gotoAndStop("10");}

this.stop();

レイヤー「A」のフレーム７（蘭編集画面）に記述したアクションスクリプト

hei_hair_P._visible = false;
hei_jacket_P._visible = false;
hei_eyes_P._visible = false;
hei_underwear_P._visible = false;
kaz_hair_P._visible = false;
kaz_jacket_P._visible = false;
kaz_eyes_P._visible = false;
kaz_ribbon_red_P._visible = false;
kaz_ribbon_blue_P._visible = false;
kaz_underwear_P._visible = false;
ran_hair_P._visible = true;
ran_jacket_P._visible = true;
ran_eyes_P._visible = true;
ran_button_P._visible = true;
ran_underwear_P._visible = true;
sin_hair_P._visible = false;
sin_jacket_P._visible = false;
sin_necktie_P._visible = false;
sin_eyes_P._visible = false;
sin_button_P._visible = false;
sin_underwear_P._visible = false;
kai_hair_P._visible = false;
kai_jacket_P._visible = false;
kai_eyes_P._visible = false;
kai_button_P._visible = false;
kai_underwear_P._visible = false;
aok_hair_P._visible = false;
aok_jacket_P._visible = false;
aok_ribbon_red_P._visible = false;
aok_eyes_P._visible = false;
aok_underwear_P._visible = false;
// ○○ボタンをクリックしたら○○用パネルを表示、非表示
// 蘭の頭用
btn_ran_hair.onRelease = function() {ran_hair_P._visible = true;}
ran_hair_P.Close_btn.onRelease = function() {ran_hair_P._visible = false;}
// 蘭の服用
btn_ran_jacket.onRelease = function() {ran_jacket_P._visible = true;}
ran_jacket_P.Close_btn.onRelease = function() {ran_jacket_P._visible = false;}
// 蘭の目用
btn_ran_eyes.onRelease = function() {ran_eyes_P._visible = true;}
ran_eyes_P.Close_btn.onRelease = function() {ran_eyes_P._visible = false;}
// 蘭のボタン用
btn_ran_button.onRelease = function() {ran_button_P._visible = true;}
ran_button_P.Close_btn.onRelease = function() {ran_button_P._visible = false;}
// underwear用
btn_ran_underwear.onRelease = function() {ran_underwear_P._visible = true;}
ran_underwear_P.Close_btn.onRelease = function() {ran_underwear_P._visible = false;}

_root.contorol_ran.brow_btn._alpha = 60;
_root.contorol_ran.necktie_btn._alpha = 60;
_root.contorol_ran.ribbon_red_btn._alpha = 60;
_root.contorol_ran.ribbon_blue_btn._alpha = 60;

_root.contorol_ran.Close_btn.onPress = function() {_root.gotoAndStop("10");}

this.stop();

レイヤー「A」のフレーム８（青子編集画面）に記述したアクションスクリプト

hei_hair_P._visible = false;
hei_jacket_P._visible = false;
hei_eyes_P._visible = false;
hei_underwear_P._visible = false;
kaz_hair_P._visible = false;
kaz_jacket_P._visible = false;
kaz_eyes_P._visible = false;
kaz_ribbon_red_P._visible = false;
kaz_ribbon_blue_P._visible = false;
kaz_underwear_P._visible = false;
ran_hair_P._visible = false;
ran_jacket_P._visible = false;
ran_eyes_P._visible = false;
ran_button_P._visible = false;
ran_underwear_P._visible = false;
sin_hair_P._visible = false;
sin_jacket_P._visible = false;
sin_necktie_P._visible = false;
sin_eyes_P._visible = false;
sin_button_P._visible = false;
sin_underwear_P._visible = false;
kai_hair_P._visible = false;
kai_jacket_P._visible = false;
kai_eyes_P._visible = false;
kai_button_P._visible = false;
kai_underwear_P._visible = false;
aok_hair_P._visible = true;
aok_jacket_P._visible = true;
aok_ribbon_red_P._visible = true;
aok_eyes_P._visible = true;
aok_underwear_P._visible = true;
// ○○ボタンをクリックしたら○○用パネルを表示、非表示
// 青子の頭用
btn_aok_hair.onRelease = function() {aok_hair_P._visible = true;}
aok_hair_P.Close_btn.onRelease = function() {aok_hair_P._visible = false;}
// 青子の服用
btn_aok_jacket.onRelease = function() {aok_jacket_P._visible = true;}
aok_jacket_P.Close_btn.onRelease = function() {aok_jacket_P._visible = false;}
// 青子の目用
btn_aok_eyes.onRelease = function() {aok_eyes_P._visible = true;}
aok_eyes_P.Close_btn.onRelease = function() {aok_eyes_P._visible = false;}
// 青子の赤リボン用
btn_aok_ribbon_red.onRelease = function() {aok_ribbon_red_P._visible = true;}
aok_ribbon_red_P.Close_btn.onRelease = function() {aok_ribbon_red_P._visible = false;}
// underwear用
btn_aok_underwear.onRelease = function() {aok_underwear_P._visible = true;}
aok_underwear_P.Close_btn.onRelease = function() {aok_underwear_P._visible = false;}

_root.contorol_aok.brow_btn._alpha = 60;
_root.contorol_aok.necktie_btn._alpha = 60;
_root.contorol_aok.button_btn._alpha = 60;
_root.contorol_aok.ribbon_blue_btn._alpha = 60;

_root.contorol_aok.Close_btn.onPress = function() {_root.gotoAndStop("10");}

this.stop();

レイヤー「A」のフレーム９（和葉編集画面）に記述したアクションスクリプト

hei_hair_P._visible = false;
hei_jacket_P._visible = false;
hei_eyes_P._visible = false;
hei_underwear_P._visible = false;
kaz_hair_P._visible = true;
kaz_jacket_P._visible = true;
kaz_eyes_P._visible = true;
kaz_ribbon_red_P._visible = true;
kaz_ribbon_blue_P._visible = true;
kaz_underwear_P._visible = true;
ran_hair_P._visible = false;
ran_jacket_P._visible = false;
ran_eyes_P._visible = false;
ran_button_P._visible = false;
ran_underwear_P._visible = false;
sin_hair_P._visible = false;
sin_jacket_P._visible = false;
sin_necktie_P._visible = false;
sin_eyes_P._visible = false;
sin_button_P._visible = false;
sin_underwear_P._visible = false;
kai_hair_P._visible = false;
kai_jacket_P._visible = false;
kai_eyes_P._visible = false;
kai_button_P._visible = false;
kai_underwear_P._visible = false;
aok_hair_P._visible = false;
aok_jacket_P._visible = false;
aok_ribbon_red_P._visible = false;
aok_eyes_P._visible = false;
aok_underwear_P._visible = false;
// ○○ボタンをクリックしたら○○用パネルを表示、非表示
// 和葉の頭用
btn_kaz_hair.onRelease = function() {kaz_hair_P._visible = true;}
kaz_hair_P.Close_btn.onRelease = function() {kaz_hair_P._visible = false;}
// 和葉の服用
btn_kaz_jacket.onRelease = function() {kaz_jacket_P._visible = true;}
kaz_jacket_P.Close_btn.onRelease = function() {kaz_jacket_P._visible = false;}
// 和葉の目用
btn_kaz_eyes.onRelease = function() {kaz_eyes_P._visible = true;}
kaz_eyes_P.Close_btn.onRelease = function() {kaz_eyes_P._visible = false;}
// 和葉の赤リボン用
btn_kaz_ribbon_red.onRelease = function() {kaz_ribbon_red_P._visible = true;}
kaz_ribbon_red_P.Close_btn.onRelease = function() {kaz_ribbon_red_P._visible = false;}
// 和葉の青リボン用
btn_kaz_ribbon_blue.onRelease = function() {kaz_ribbon_blue_P._visible = true;}
kaz_ribbon_blue_P.Close_btn.onRelease = function() {kaz_ribbon_blue_P._visible = false;}
// underwear用
btn_kaz_underwear.onRelease = function() {kaz_underwear_P._visible = true;}
kaz_underwear_P.Close_btn.onRelease = function() {kaz_underwear_P._visible = false;}

_root.contorol_kaz.outlines_nose_btn._alpha = 60;
_root.contorol_kaz.outlines_mouth_btn._alpha = 60;
_root.contorol_kaz.brow_btn._alpha = 60;
_root.contorol_kaz.nose_btn._alpha = 60;
_root.contorol_kaz.mouth_btn._alpha = 60;
_root.contorol_kaz.necktie_btn._alpha = 60;
_root.contorol_kaz.button_btn._alpha = 60;

_root.contorol_kaz.Close_btn.onPress = function() {_root.gotoAndStop("10");}

this.stop();

レイヤー「A」のフレーム 10（メイン画面）に記述したアクションスクリプト

_root.btn_all_P_on.onPress = function() {
All.btn_all._visible = true;
Con.btn_con._visible = true;
Hei.btn_hei._visible = true;
Sin.btn_sin._visible = true;
Kai.btn_kai._visible = true;
Ran.btn_ran._visible = true;
Aok.btn_aok._visible = true;
Kaz.btn_kaz._visible = true;
Tcom.btn_tcom._visible = true;
}
_root.btn_all_P_off.onPress = function() {
All.btn_all._visible = false;
Con.btn_con._visible = false;
Hei.btn_hei._visible = false;
Sin.btn_sin._visible = false;
Kai.btn_kai._visible = false;
Ran.btn_ran._visible = false;
Aok.btn_aok._visible = false;
Kaz.btn_kaz._visible = false;
Tcom.btn_tcom._visible = false;
}

this.stop();

コントローラーの説明一例を説明(髪の輪郭ボタンの場合)。一つのパネルにまとめ、子MovieClipにしてあります。その中のボタンの説明

髪の輪郭ボタンのアクションスクリプト	〃スクリプト	〃のボタンシンボル	〃のボタンシンボル

//ムービークリップ(contorol_kaz)の子MovieClipである //ムービークリップ(outlines_hair_btn)の１フレームに記述のアクションスクリプト this.stop(); _root.contorol_kaz.outlines_hair_btn.btn_off.onRelease = function() { _root.contorol_kaz.outlines_hair_btn.nextFrame(); _root.chara.kaz_outlines_hair._visible = false; }; //ムービークリップ(contorol_kaz)の子MovieClipである //ムービークリップ(outlines_hair_btn)の２フレームに記述のアクションスクリプト this.stop(); _root.contorol_kaz.outlines_hair_btn.btn_on.onRelease = function() { _root.contorol_kaz.outlines_hair_btn.gotoAndStop("1"); _root.chara.kaz_outlines_hair._visible = true; };		髪の輪郭ボタン内のアクションスクリプトは、 _root. contorol_kaz. outlines_hair_btn.内の１フレーム目に記述 btn_offをクリックすると、自身の２フレームに移動し、 _root. chara. kaz_outlines_hairを非表示にする。髪の輪郭ボタン内のアクションスクリプトは、 _root. contorol_kaz. outlines_hair_btn.内の２フレーム目に記述 btn_onをクリックすると、自身の１フレームに移動し、 _root. chara. kaz_outlines_hairを表示する。髪の輪郭ボタン内のボタンシンボルは、 outlines_hair_btn.内の１フレーム目に配置されたbtn_off 髪の輪郭ボタン内のボタンシンボルは、 outlines_hair_btn.内の２フレーム目に配置されたbtn_on

見た目は、同じムービークリップだが、インスタンスとアクションスクリプトは全て違うので、複製と入れ替えを繰り返し、シンボルを作成する。
コントローラ内[(○○○○_btn)×20個] × コントローラの数７個 = 計140個

contorol_con	contorol_hei	contorol_sin	contorol_kai	contorol_ran	contorol_aok	contorol_kaz

contorol_○○はドラッグできるように、クリップアクションが記述してあります。

以上、特記部分だけですが、こんな感じで、.gotoAndStop("○");と._visible=○○;を多用したスクリプトになっています。まだ、背景画像の変更や文字ボタンの仕組みなどありますが、特記する事はなく、細かい部分は割合します。

参考画像

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

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

概要

利用法

作成例

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

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

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

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

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

参考画像

FLASH関連リンク

サイトの他のコンテンツ

概要

利用法

作成例

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

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

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

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

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

参考画像

FLASH関連リンク

サイトの他のコンテンツ

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

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

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