ぬり絵を作成したい

質問

はじめまして。

今、子供向けのサイトを作ろうとしていて、その中に、

http://tracychapman.com/

にあるような、ぬり絵を取り入れたいと思っています。

特定のmcを特定の色に変えたり、色えんぴつ描き風の事は、
方法が分かるのですが、このように、

・パレットにあるカラースウォッチをクリック→任意の場所(mc)をクリックすると、そのスウォッチの色に変わる

といった方法がどうしても分かりません。

・任意の場所(mc)をクリックして色が変わる時に、クリックした場所から円形に変化していく

も、出来れば知りたいです。
どうか、良い知恵を授けて頂ければと思います。

宜しくお願いします！

回答No.2

BlurFiltan · ベストアンサー

＃１です。
遅くなりましたが追加補足＆一部訂正です。

家などのことを考えると，
輪郭線などはMC(ムービークリップ)内の上のレイヤーに持っておいた方が良さそうです。
また，
色が付いた●を attachMovie するMCは家や木の形をしている必要は特にありません。
単なる白塗りのMCでも良いです。

ですから一部訂正します。

　---家(木)のMC内タイムラインの様子---
　レイヤー3　・・・|●| ←輪郭線
　レイヤー2　・・・|●| ←家や木などの形の塗り（マスクレイヤー）
　　レイヤー1・・・|●| ←家や木などの背景(白塗りMC)

以下は ＃１ の補足説明です。

仮に「赤いボタン」と「青いボタン」があって，
家だけをその色に塗るというシンプルな例を考えてみました。
次のようにするとできます。

◎ムービーの構造 (aka_btn，ao_btn，…はインスタンス名)
　　_root(メインのタイムライン)
　　　├aka_btn(赤いボタンインスタンス)
　　　├ao_btn(青いボタンインスタンス)
　　　└ie_mc(家のMC)
　　　　　└back_mc(家の背景の白塗りMC)

◎リンケージを設定したシンボル
　識別子「aka_mc」(赤●グラフィックが内部で拡大するMC)
　識別子「ao_mc」(青●グラフィックが内部で拡大するMC)
　　※ 各MCの基準点は●の「中央」であること
　　　 各MC内で ● をモーショントゥイーンで拡大させる
　　　 各MCの最終フレームには stop(); を書く

◎_root の フレーム1 に書くスクリプト
-----------------------------------------------------
// 赤ボタンクリック時の動作定義
aka_btn.onRelease = function() {
// 変数 iro に 「aka」 を代入
iro = "aka";
};

// 青ボタンクリック時の動作定義
ao_btn.onRelease = function() {
// 変数 iro に 「ao」 を代入
iro = "ao";
};

// 家MC内の変数 num の初期化
ie_mc.num = 0;

// 家MCクリック時の動作定義
ie_mc.onRelease = function() {
// このMC内の bac_mc に ○_mc を 呼びだす
this.back_mc.attachMovie(iro+"_mc", "maru"+this.num, this.num);
// 呼びだしたMCの座標を指定
this.back_mc["maru"+this.num]._x = this.back_mc._xmouse;
this.back_mc["maru"+this.num]._y = this.back_mc._ymouse;
// このMC内の変数 num の値に 1 を加算
this.num++;
};
-----------------------------------------------------
※ ActionScript1.0，Flash MX 以上で使用可能なスクリプト

そしてパブリッシュすれば出来上がりです。
文字だけではわかりにくいと思うので下の図を参考にしてみてください↓。

私が考えたしくみはこれだけのことです。簡単ですね。

上のスクリプト中の，
this.back_mc["iro"+this.num]._x
で使った [] 演算子に関する参考URLです↓。
「ドット演算子と配列アクセス演算子」
http://www.fumiononaka.com/TechNotes/Flash/FN0507001.html

お礼

BlurFiltanさん、
ありがとうございました！！

昨日、訳が分かっていないのにむやみにif分とかtrue/false等
使って実験して全くダメで(あたりまえですね)困っていたところでした...

かなり時間がかかりましたが出来ました！
これさえ出来ればしめたもの^o^

応用で、色を置いたら、何らかのアクションが起きたりする事も
考えてみたいと思います...

教えて頂いた参考サイトも、じっくり眺めて解読していきたいと
思います。

もう、本当にうれしいです～～ありがとうございました！！

回答No.1

BlurFiltan

例えば
白塗りで黒輪郭線の木の形をしたムービークリップを作成して，
そのムービークリップをさらにムービークリップに変換し，
ムービークリップ内のレイヤーを２レイヤーにして，
上下の同じ位置に木の形をしたムービークリップを配置します。

　ムービークリップ内のタイムライン
　レイヤー2　・・・|●|　←木の形をしたムービークリップ
　レイヤー1　・・・|●|　←木の形をしたムービークリップ

そして上レイヤー側をマスクレイヤーにします。

　ムービークリップ内のタイムライン
　レイヤー2　・・・|●|　←マスクレイヤー
　　レイヤー1・・・|●|　←マスクがかかったレイヤー

それで，
下側のレイヤーの木の形をしたムービークリップの中に，
赤い塗りを選択した場合は，
赤い●が拡大するムービークリップを
クリックした座標にattachMovieすれば良いのではないでしょうか。

色数も限られていますから，
その色の数分の●が拡大するムービークリップを作成するのも簡単だと思います。
おそららくそんなことより，木の形をしたムービークリップ を作成する方が大変だと思います。

リンケージとは？
http://www.1art.jp/flash/le/lessona/lessona.htm

なお，
attachMovie は ActionScript2.0 以下のスクリプトです。
ActionScript3.0 では
クラス名を決めたムービークリップシンボルを
new MovieClip名()　で呼び出して使用すれば良いと思います。

多分そんな感じでできますよ。
そういう方法より，
「そういう塗り絵を作ってみよう」と思われた作者の方の発想が良いですね。

お礼

ご回答ありがとうございました！

任意のmcにカラースウォッチの色のデーターを取得させる事
ばかり考えていましたが、なるほど、こんな考え方もあったのですね！

これなら、円形に色が変わる事も可能ですね。

と、言いつつ、ハテ、クリックしたカラースウォッチと同じ色の
mcだけを認識させてattachMovieさせるにはどうすれば...と思っている
所ですが、いろいろ実験してみます...

とにかく、ありがとうございました。また、
いろいろお聞きする事もあると思いますので、
宜しくお願いします♪