第3回　描画とレイヤー：ビットマップグラフィック編

線と塗りからなるベクターグラフィックに対して、ビットマップグラフィックは写真や、絵画などのピクセルで描かれたグラフィックだ。ビットマップグラフィックを作ったり、編集するのは基本的にFireworksやPhotoshopなどの描画アプリケーションで行い、それをFlashに取り込む。複雑なグラフィックを扱える反面、データサイズが大きくなるなどのデメリットもある。ベクターグラフィックとビットマップグラフィックのそれぞれの特徴を理解し、効果的に作業を行おう。

デジカメで撮った写真などの画像を用意しよう。ここでは手の写真を取り込んでみる。画質の修正などはあらかじめFireworksやPhotoshopなどのアプリケーションで行っておこう。［ファイル］→［読み込み］→［ステージに読み込み］でファイルを開くとステージ上にビットマップが読み込まれる【図2】。

マスクレイヤーを使うとオブジェクトを部分的に表示させることができる。ビットマップを配置したレイヤーの上に新しいレイヤーを追加しよう。マスクしたい部分に円を描く。カラーは自由だ。レイヤーを右クリック（〔Control〕＋クリック）して、コンテキストメニューから［マスク］を選択するとマスクが適用される【図3】。レイヤー名左のアイコンをダブルクリックすると表示される［レイヤープロパティ］ダイアログボックスから設定することも可能だ【図4】。

読み込むビットマップのデータ形式を、PNG形式などの圧縮されていないデータにしておくと、パブリッシュの際、JPEG画像にかきだす圧縮率を設定できるので扱いやすい。

写真をイラスト化したいときなどに、ビットマップをベクターグラフィックに変換することができる。ビットマップを選択し、［修正］→［ビットマップ］→［ビットマップのトレース］を選択する。［ビットマップのトレース］ダイアログボックスの値を設定して［OK］をクリックするとベクターグラフィックに変換される【図5】。

まずはFireworksやPhotoshopなどのアプリケーションで画像を切り抜こう。画面はFireworksでの例だ【図6】。手の形にマスクをかけ、背景を透明にしてPNG形式で保存した。あとはFlashで先ほどと同様に［ファイル］→［読み込み］→［ステージに読み込み］からビットマップを読み込むだけだ。【サンプル3】では「矩形ツール」で描いた格子の背景の上にビットマップを配置している。手が切り抜かれているのが確認できる。

［ライブラリ］パネルからアイコンをステージにドラッグして同じビットマップを横に2つ並べる【図7】。左側のビットマップを選択し、［修正］→［変形］→［横反転］を実行すると右手が反転し、左手にすることができる。1枚のビットマップを使いまわしているのでデータサイズの削減にもなる。

パブリッシュを行うと、FLAファイルから、web配信するために必要なSWFファイルと、それをブラウザに表示させるためのHTMLファイルを生成することができる。ステージの何もないところをクリックし、プロパティインスペクタからパブリッシュの［設定］ボタンをクリックして、［パブリッシュ設定］ダイアログボックスを開いてみよう。

デフォルトでは、SWFファイルと、HTMLファイルを生成するための一般的な設定がされているので、必要な項目がなければ、基本的には何もしなくてかまわないが、今回のようにビットマップを取り込んでいる場合なら、パブリッシュの際、通常JPEG圧縮されるので、ファイルサイズと画質を見ながら最適な組み合わせを設定するとよいだろう（通常70～90程度）【図8】。設定が終わったら［パブリッシュ］ボタンをクリックすると、FLAファイルと同じ場所にSWFファイルとHTMLファイルが生成される【図9】。