Home > 速習WebデザインFLASH MX 2004 > Part-1 Lesson-6

Lesson-6　色を塗り分けてみよう

画像；p1l6_top.psd

＜文章＞
FLASHには、グラフィックソフト並みのカラー機能が搭載されています。操作も多くのグラフィックソフトと同様に、色をカラーパレットから選び（あるいはオリジナルの色を作り）着色したい領域に流し込みます。グラデーションや透明色、読み込んだビットマップ画像による塗りつぶしも可能です。このLessonでは、基本機能について理解しておきましょう。

＜●Lessonのねらい＞
「バケツツールなどでクリックして色を塗る方法」、「プロパティインスペクタで選択部分の色を変換する方法」の２つを状況に応じて使えるようにしましょう。

STEP01　カラー機能について理解する

ツール

・バケツツール
　閉じた領域に色を流し込む
　[隙間の大きさ]オプションを選ぶことで、完全に閉じていなくても塗ることができる

・インクボトルツール
　線だけに着色することができる（太さやスタイルも設定できる）
　※グラデーションやビットマップ画像による塗りつぶしはできない

・スポイトツール
　ステージ上の絵から欲しい色を拾うことができる

パネル

・[カラーミキサー]パネル
　塗りや線のカラーを自由に作り出すことができる

・[色見本]パネル
　使用したカラーを管理することができる
　カラーパレットをファイルとして保存し、再利用することが可能

・プロパティインスペクタ
　変更したい領域を選択すれば、カラーパレットから色を選び、変換できる

画像；p1l6s01_1.psd 〜p1l6s01_6.psd

STEP02　領域を選択して単色を塗る

ステージ上に描かれた絵は、バケツツールなどを使って自由に着色することができます。静止画の場合は、１枚の塗り絵のように扱っても問題ありませんが、後にアニメーションなどを設定する場合は、顔や手、足などを別々に描き、各々をグループ化していく方法が一般的です。このLessonで用意されているサンプルは、すでにグループ化されたパーツをステージ上に配置してあります。より実践的な状況で、カラー機能を学習していきましょう。

（１）Lessonファイルles1-06.flaを開いてください。キャラクターが２体描かれています。右のキャラクターにはすでに色が塗られています。
（２）矢印ツールを選んで、左のキャラクターの帽子をクリックしてください。グループ化されていることがわかります。（[プロパティインスペクタ]を見ると、グループと表示されています。）ステージ上に描かれている絵の部品はすべてグループ化されています。
（３）この帽子に色を塗りたいのですが、グループを解除しないと塗ることはできません。帽子をダブルクリックして、編集モードに切り替えましょう。（この操作は、Lesson-2で学習しています。）帽子全体が選択されている場合は、ステージの余白をクリックして解除しておきましょう。
（４）帽子の白で塗られている領域をクリックしてください。プロパティインスペクタを使って、色を変えてみましょう。[塗りのカラー]をクリックしてカラーパレットから、青（「#0066FF」）を選んでください。塗られている色が変更されました。
（５）ステージの余白をダブルクリックして、編集モードを抜けます。次は、顔に色を塗ってみましょう。
（６）右側の耳をダブルクリックしてください。編集モードに切り替わります。顔全体が選択されている場合は、ステージの余白をクリックして解除しておいてください。
（７）今度は、バケツツールで塗ってみましょう。バケツツールを選択後、ツールボックスの[塗りのカラー]をクリックしてカラーパレットから、肌色（「#FFCC66」）を選んでください。
（８）顔の白い部分をクリックして色を塗ります。同様に、耳の白い部分をクリックしてください。
（９）影の部分も同様の方法で塗っていきましょう。ツールボックスの[塗りのカラー]をクリック、カラーパレットの入力欄に「#CC9966」と入力して[Enter]キーを押してください。濃い肌色が選ばれました。顔と鼻、耳のグレーの部分（３ヵ所）を各々クリックしていきます。
（10）矢印ツールを選びます。ステージの余白をダブルクリックして、編集モードを抜けてください。いかがでしょうか？　このようにバケツツールで直接塗ってもかいませんし、プロパティインスペクタで変更しても同じです。使いやすい方法を選択すればよいのです。

STEP03　透明色で塗ってみよう

80ページのSTEP01の文章と画像をそのまま使用

（１）右のキャラクターのサングラスをダブルクリックして、編集モードに切り替えてください。サングラス全体が選択されている場合は、ステージの余白をクリックして解除しておいてください。虫めがねツールを使ってステージを拡大表示しておくと作業しやすくなります。
（２）[カラーミキサー]パネルが展開していること確認してください。（展開していない場合は、タイトルバーに表示されているカラーミキサーの文字をクリックしてください。）矢印ツールを選択して、サングラスの右のレンズ中央をクリックします。まず、この領域を透明にします。
（３）スポイトツールを選んで、右のレンズの選択されている色をクリックしてください。[カラーミキサー]パネルの[塗りのカラー]にコピーされました。
（４）[アルファ]の三角形アイコンをクリックするとスライダーバーが表示されますので、60%になるまでドラッグしてください。レンズの選択した色が透明になりました。矢印ツールを選択して、ステージの余白をクリック、選択を解除して透明色を確認してみましょう。
（５）今度は、レンズの明るい黄色の領域を透明にします。矢印ツールで領域を選択し、スポイトツールで色を拾います。後は同様の方法で、[アルファ]の数値を60%に設定してください。（入力欄に直接、数値を入力してもかまいません。数値入力した後は[Enter]キーを押してください。）設定後は、先ほどと同じように矢印ツールを選択して、ステージの余白をクリック、選択を解除して透明色を確認してみましょう。
（６）それでは、ステージの余白をダブルクリックして、編集モードを抜けてください。[カラーミキサー]パネルを使えば、オリジナルの色を作って塗ることもできますし、ここで作業したように単色で塗られた色を透明に変えることも簡単です。

POINT!!

作成した色は[色見本]パネルで管理される
[色見本]パネルを表示させてください。（[ウィンドウ]メニューの[デザインパネル]→[色見本]）スポイトツールで拾った２つの色が登録されています。[色見本]パネルの内容は、FLAファイルの中に記録されます。もし、他のFLAファイルで使いたい場合は、パネルのメニューから[カラーの保存]を選んで、名前を付けて保存します。（保存したファイルには、.clrという拡張子が付きます。）そして、他のFLAファイルを開き、[色見本]パネルのメニューから[カラーの追加]を選んで、保存してあるカラーセットファイルを読み込みます。

STEP04　グラデーションで塗ってみる

75ページのSTEP01の文章と画像をそのまま使用
（76ページの「●グラデーションの方向、範囲を変更する」は含まない）

（１）左のキャラクターの体をダブルクリックして、編集モードに切り替えます。全体が選択されている場合は、ステージの余白をクリックして解除しておいてください。
（２）まずは、あらかじめ登録されているグラデーションで塗ってみましょう。バケツツールを選択後、ツールボックスの[塗りのカラー]をクリックしてカラーパレットから、グレーのグラデーション（一番下の左から２番目）を選んでください。（バケツツールを選んだ後、オプションの[塗りの固定]がONになっていないか確認してください。へこんだ状態になっていたらクリックしてOFFにしておきましょう。）
（３）ダウンジャケットからシューズまで塗っていきます。塗る場所は、画像を参考にしてください。
（４）続けて、なかに着ているシャツに赤いグラデーションを塗ります。ツールボックスの[塗りのカラー]をクリックしてカラーパレットから、赤のグラデーション（一番下の左から３番目）を選んでください。
（５）ダウンジャケットを塗ったように領域ごとにグラデーションを入れると不自然なので、シャツ全体を最初に選択しておきます。矢印ツールを選んで、[Shift]キーを押しながらシャツの白い部分をクリックしていきましょう。
選択しにくい場合は、虫めがねツールで拡大表示してください。
（６）それでは着色します。バケツツールを選んで、シャツの上部中央をクリックしてください。選択した領域すべてに１つのグラデーションが塗られました。

STEP05　グラデーションを編集する

76ページの「●グラデーションの方向、範囲を変更する」をそのまま使用

（１）ダウンジャケットのグラデーションを編集してみましょう。塗りの変形ツールを選択してください。
（２）腕の部分をクリックしてください。放射状のグラデーションなので、円の枠線が表示されます。ハイライトの位置を移動させてみましょう。
（３）中心の白丸を肩のあたりにドラッグしてください。塗られているグラデーションの場合は、ハイライトの部分が肩の位置に移動します。このように一度塗ったグラデーションの方向や範囲などを後から変更することができます。
（４）矢印ツールを選択後、ステージの余白をダブルクリックして、編集モードを抜けてください。次は、オリジナルのグラデーションを作成して帽子に塗りたいと思います。
（５）帽子をダブルクリックして、編集モードに切り替えます。全体が選択されている場合は、ステージの余白をクリックして解除しておいてください。
（６）[カラーミキサー]パネルを見てください。先ほど選択した赤いグラデーションが表示されているはずです。（もし、単色が表示されている場合は、[塗りのスタイル]のメニューから[放射状]を選んでおいてください。）
（７）グラデーション定義バーの右側にあるポインタをクリックします。[グラデーションカラー]をクリックして、カラーパレットから青（「#0066FF」）を選んでください。
（８）同様に、グラデーション定義バーの左側のポインタをクリックし、カラーパレットから白を選んでください。これで、白から青のグラデーションが作成されました。
（９）バケツツールを選択して帽子の青い部分をクリックしてみましょう。作成したグラデーションが着色されました。色の範囲が広いのでグラデーションの幅を狭めます。
（10）[カラーミキサー]パネル、グラデーション定義バーの右側のポインタをバーの中央までドラッグしてください。
（11）もう一度、帽子の青い部分をクリックして着色します。グラデーションの幅が狭くなりました。（塗りの変形ツールを使っても同様の効果を得られます。）矢印ツールを選択後、ステージの余白をダブルクリックして、編集モードを抜けてください。

★Lesson-6 の原稿、作図および画像データのダウンロード［p1l6_data.zip］

・原稿は、通常のTEXT形式
・イメージ画像などは、Adobe Photoshop 6 のPSD形式
・作図データは、Adobe Illustrator 10 のAI形式（YMCK／特殊なフォントはアウトライン化）
（主要なショット画像も一応入れてあります）

▼

［BACK］