色の情報を使って処理を分岐する
図1のムービーは，ユーザーに描いてもらった絵を，はたはたとはためかせるアニメーションを行うムービーです。自分の描いた落書きが動くというのは，楽しいものです。
図1：絵をはためかせるムービー
このムービー，旗のアニメーションの動きは，ユーザーの描いた絵をビットマップ情報として格納し，それぞれのピクセルの位置を，いわゆるグラデーションのように少しずつ変化させることによって実現しています。
一つひとつのピクセルの位置を管理してるの？それって，ものすごく面倒じゃないの？と，思われるかもしれません。しかし，実際は「こういう感じで動かして」という動きを図2のような色の情報を使って管理しています。
図2：動きを管理する情報を表している「絵」
このように，「色」の情報を使って処理を分岐するような仕組みを作成すると，我々にとっては視覚的にわかりやすく，コンピュータにとっては細かな数値情報としてわかりやすい処理を作成できます。
色を使ってクリックした位置を判定
色を使った処理の基本となるのは，「そこが何色かを取得する」という処理です。例えば，図3のような画像があるとします。Flashムービー内にこの画像を取り込み，「柿の種」部分と「ピーナッツ」部分をクリックしたときに，それぞれ任意の処理を実行するようなムービーを作成したい場合，読者の皆さんならば，どのような処理を作成しますか？
図3：処理を分岐させたい画像
Flashムービーの制作経験がある方であれば，「柿の種」と「ピーナッツ」の形に応じて「透明ボタン」を作成し，ボタンのonReleaseイベントハンドラ・メソッド等を使う処理を思いつくかもしれません＊1。
図4：透明ボタンを使った例
柿の種，ピーナッツ，そしてその他の場所の三か所にボタンを配置するような処理ですと，次のようなコードでOKですね。
//イベントハンドラ・メソッドを作成
function pressButton() {
var _str:String;
//三種類のボタンのインスタンス名に応じて処理を分岐
switch (this._name) {
case "kakiButton" :
_str = "柿の種をクリックしました";
break;
case "peaButton" :
_str = "ピーナッツをクリックしました";
break;
case "wakuButton" :
_str = "柿の種でもピーナッツでも無い位置をクリックしました";
break;
}
//ムービー下端のテキスト・フィールドに文字列を表示
messageText.text = _str;
}
//三種類のボタンにイベントハンドラ・メソッドを登録
kakiButton.onRelease = peaButton.onRelease=wakuButton.onRelease=pressButton;
でも，このタイプの処理には一つ苦手な動きがあります。それは，画像を拡大したり，ドラッグして移動させたりした場合，その動きに合わせてボタンも拡大したり移動させなくてはいけない点です。さらに，ドラッグ時の移動対策として，画像とボタンを入れ子状のシンボルにしてしまうと，今度は入れ子の親となったインスタンスのonPressイベントやonReleaseイベントが先に処理をされてしまい，ボタンを押したという動作が意図したようにはとらえられなくなってしまいます。
そこで，少し考え方の方向性を変えてみましょう。このような処理を今回のテーマである「色」を使った方法で作成してみましょう。
まず，読み込む画像と同じ大きさのベタ塗りの画像を用意します。そして，処理を分岐したい場所に応じて，色を塗り分けます。図3の画像を例にとると，用意する画像は図5のような形になります。この画像を「当たり判定マップ」と呼ぶことにしましょう。
図5：当たり判定用マップを用意する
単に塗り分けるだけですので，不定形な範囲でも絵を描くように指定できますね。この時，塗り分ける色は，好きな色で構いません。ただし，何色で塗ったのかをRGB値の値としてメモしておきましょう。図5では，柿の種部分を「赤(RGB値FF0000)」，ピーナッツの部分を「青(RGB値0000FF)」で塗ってあります＊2。
表示したい画像と，当たり判定マップの画像の二つを[ライブラリ]に読み込み，それぞれ「mainPicture」「mapPicture」と識別子を付けます。
図6：画像にリンケージの設定を行う
この二つの画像を使って，クリックした位置に応じて処理を分岐するには，次のようにコードを記述します。
