図1●カラーピッカー

図2●[カラーミキサー]パネル

図3●線状のグラデーションを作成する

図4●放射状のグラデーションを作成する

図5●明度を変更して影を作る

図6●変形ツールで変形を行う

図7●自由変形のオプションと変形

図8●変わった形のフォームの作成

カラーミキサーで
思い通りの色を作成する

　まずはカラーミキサーを使った着色に関するテクニックです。今までは[バケツツール]などを使って着色するとき，画面左端のツール内の[塗りのカラー]アイコンをクリックして表示される[カラーピッカー]パネルで塗りの色を指定していました（図1）。

　今回は，「カラーミキサー」を使って塗りの色を決める方法を紹介しましょう。[カラーミキサー]パネルを表示するには，メニューより，[ウィンドウ]-[デザインパネル]-[カラーミキサー]とたどります（または[shift]+[f9]）。

　[カラーミキサー]パネルでは，現在の塗りの色をRGB値で表示しています（図2[拡大表示]）。パネル左下テキストボックスに，「#FF6600」などのようにRGB値を直接入力すると，現在の塗りの色を，RGB値で指定した色に変更できます。色見本帳などで，好みの色のRGB値がわかっている場合には，直接入力できます。

　色に詳しくない人にとってうれしいのは，[カラーミキサー]パネル下方の「カラースペース」です。ここには，様々なカラーが，ならだかに色が変化するグラデーションで表示されています。好みの色の部分をクリックすると，その位置の色を現在の塗りの色に設定できます。

　カラースペースの右隣の柱にはクリックした個所の色を中心に，明るさ（明度）をなだらかに変化させた色の帯があります。この柱の右の三角形をマウスでつかんでドラッグすると，塗りの色の明るさを変えられます。カラーピッカーで選ぶより，細かく色を選ぶことができますね。

グラデーションで色を塗ってみよう

　カラーミキサーを使うと，グラデーション塗りを簡単に作ることができます。まず，[カラーミキサー]パネル内の[塗りのスタイル]ドロップダウン・リストボックスから「線状」を選択します。すると，カラースペースの上に「グラデーション定義バー」が表示されます（図3[拡大表示]）。

　グラデーション定義バーの両端を見てみると，二つのアイコンが表示されています。左のアイコンをクリックし，カラースペースから好きな色を選択してみましょう。選択した色から，右のアイコンの色へとグラデーションが作成されます。

　右のアイコンをクリックして，同じように色を選択すれば，任意の2色の間のグラデーションが作成されます。この状態で，[バケツツール]などを使って色を塗ってみましょう。作成したグラデーションで色が塗られることを確認できます。

　[塗りのスタイル]ドロップダウン・リストボックスから「放射状」を選択し，同じようにグラデーション定義バーを使ってグラデーションを作成すると，今度は放射状に色が変化するグラデーションを作成できます（図4[拡大表示]）。グラデーションは，あまり多用すると目がチカチカする絵になってしまうので，使いどころが難しいのですが，単色で塗るより何となくスタイリッシュに見えますね。

カラーミキサーで簡易な影を作る

　カラーミキサーを使うと，自由に色を選べるだけでなく，特定の色に「似た色」「少しだけ違う色」を作り出すのがとても簡単になります。応用テクニックとして，図形に「影」をつける方法を紹介しましょう。円を描いて，その円に影を付けるとします。

　まず，円を描いて内部に色を塗ります。次に，影にしたい個所を適当に作業用の線で区切ります。区切った個所を選択したら，カラーミキサー右下の「明度コントロール」を下方向にドラッグして，明度を下げ，暗い色に変更します（図5[拡大表示]）。変更が終わったら，作業用の線を削除して完成です。手軽にそれっぽい影を付けることができますね。

自由変形ツールで変形してみよう

　次は，自由変形ツールを使用してみましょう。まず，ステージ上に適当な絵を描いておきます。

　画面左側のツール内から[自由変形ツール]アイコンをクリックし，絵を選択します。すると，選択範囲の四角形の頂点と辺の中点に小さな四角形で「ハンドル」が表示されます。あとは，ハンドルをマウスでドラッグすれば，マウスの動きに応じて，直感的に絵を変形することができます（図6[拡大表示]）。いろいろなハンドルをつかんでドラッグして，どのように変形するかを確かめてください。

　自由変形ツールには，「回転と傾斜」「歪曲」「エンベロープ」「伸縮」の4種類の変形方法が用意されています。対象を選択した後で，[ツール]パネル下方のオプション欄で，任意の変形方法のアイコンをクリックすると，その変形方法に応じたハンドルが表示されます（図7[拡大表示]）。

　直線のみで作成した硬い印象の絵も，自由変形ツールでちょっと変形を加えると，コミカルでやわらかい印象の絵に変形できますね。まず，きっちりとした線で絵を描いていき，最後に崩す，といったパターンで描いてみるのもいいかもしれません。

【演習】少し変わった形のユーザー・フォームを作成しよう

　今回は，カラーミキサーと自由変形ツールの二つを使って絵を描く方法を紹介しました。この方法を使って，いつもおなじみの四角形のフォームではなく，変形をさせたり，グラデーションを使ったりして，オリジナルのユーザー・フォームを描いてみましょう。いろいろな方法があると思いますが，図8[拡大表示]に筆者の例をあげておきます。

　グラデーションや自由変形ツールを使うことで，奇妙な形のフォームでも，簡単に作成することができます。将来，ActionScriptを使ったアプリケーションを作成する際にも，アプリケーションの用途に合った，コミカルなフォームや，スタイリッシュなフォームを作成する際に応用できそうです。

　全7回にわたって，Flashでお絵描きをする方法をご紹介してきました。いかがですか？ 思っていたより，手軽に，それなりの絵を描けることがご理解いただけたのではないでしょうか。

　ActionScriptを使って動かす「絵」の部分も，これである程度は自分で作成できそうですね。もちろん，現場では最終的にはプロのデザイナさんに絵をお願いすることも多いでしょう。その場合でも，「こんな形でお願いします。」と自分なりのイメージをさっと作って見せるといったこともできます。あなたも，Flashを使ってお絵描きをしてみませんか？

この連載記事の目次へ