Lesson1 Flashの基本画面と描画
第3回 描画とレイヤー :ビットマップグラフィック編
線と塗りからなるベクターグラフィックに対して、ビットマップグラフィックは写真や、絵画などのピクセルで描かれたグラフィックだ。ビットマップグラフィックを作ったり、編集するのは基本的にFireworksやPhotoshopなどの描画アプリケーションで行い、それをFlashに取り込む。複雑なグラフィックを扱える反面、データサイズが大きくなるなどのデメリットもある。ベクターグラフィックとビットマップグラフィックのそれぞれの特徴を理解し、効果的に作業を行おう。
解説:北川貴清
※「FlashのABC」の本文中の解説で使用しているサンプルデータは、別ページでダウンロードが行えます。
Summary:ビットマップグラフィックとは ビットマップグラフィックとは、ピクセルと呼ばれるカラードットをグリッド (格子)に並べた画像のことだ。ビットマップはピクセルの位置とカラーの値で表され、写真や絵画などを扱うのに向いている。サイズを拡大すると、画質が劣化するのが特徴で、大きい画像を扱う場合はデータサイズが大きくなるためwebで公開するには特に注意する必要がある【図1】。Flashでは通常FireworksやPhotoshopなどの他のアプリケーションで作成したビットマップグラフィックを読み込んで使用する。 |
【図1】拡大すると画質が劣化する
ビットマップグラフィックの取り込みと活用
デジカメで撮った写真などの画像を用意しよう。ここでは手の写真を取り込んでみる。画質の修正などはあらかじめFireworksやPhotoshopなどのアプリケーションで行っておこう。[ファイル]→[読み込み]→[ステージに読み込み]でファイルを開くとステージ上にビットマップが読み込まれる【図2】。
【図2】デジカメで青い布の上で撮った手の画像を読み込んだ
画像にマスクをかける
【サンプル1】手のひらの大きさの円形のマスクをかけた
マスクレイヤーを使うとオブジェクトを部分的に表示させることができる。ビットマップを配置したレイヤーの上に新しいレイヤーを追加しよう。マスクしたい部分に円を描く。カラーは自由だ。レイヤーを右クリック(〔Control〕+クリック)して、コンテキストメニューから[マスク]を選択するとマスクが適用される【図3】。レイヤー名左のアイコンをダブルクリックすると表示される[レイヤープロパティ]ダイアログボックスから設定することも可能だ【図4】。
【図3】コンテキストメニューから[マスク]を選択する
【図4】[レイヤープロパティ]ダイアログボックスの設定画面
■Point:
読み込むビットマップのデータ形式を、PNG形式などの圧縮されていないデータにしておくと、パブリッシュの際、JPEG画像にかきだす圧縮率を設定できるので扱いやすい。
ベクターグラフィックに変換する
【サンプル2】ビットマップをトレースしてベクターグラフィックに変換
写真をイラスト化したいときなどに、ビットマップをベクターグラフィックに変換することができる。ビットマップを選択し、[修正]→[ビットマップ]→[ビットマップのトレース]を選択する。[ビットマップのトレース]ダイアログボックスの値を設定して[OK]をクリックするとベクターグラフィックに変換される【図5】。
【図5】[ビットマップのトレース]ダイアログボックス。[色数:10]、[ノイズの許容量:1ピクセル]、[トレースの精度:ピクセル]、[ポイントの数:多い]とするとオリジナルのビットマップに最も近いベクターグラフィックになるがデータサイズも大きくなる。いろんな値で試してみよう
切り抜き画像の取り込み
切り抜いた画像を取り込む
【サンプル3】 手の形に切り抜いたビットマップを読み込んだ
まずはFireworksやPhotoshopなどのアプリケーションで画像を切り抜こう。画面はFireworksでの例だ【図6】。手の形にマスクをかけ、背景を透明にしてPNG形式で保存した。あとはFlashで先ほどと同様に[ファイル]→[読み込み]→[ステージに読み込み]からビットマップを読み込むだけだ。【サンプル3】では「矩形ツール」で描いた格子の背景の上にビットマップを配置している。手が切り抜かれているのが確認できる。
【図6】 Fireworksで背景を透明にして手を切り抜いた
右手の画像を複製
【サンプル4】 右手の画像を複製して左手にしている
[ライブラリ]パネルからアイコンをステージにドラッグして同じビットマップを横に2つ並べる【図7】。左側のビットマップを選択し、[修正]→[変形]→[横反転]を実行すると右手が反転し、左手にすることができる。1枚のビットマップを使いまわしているのでデータサイズの削減にもなる。
【図7】[ライブラリ]パネルからビットマップのアイコンをステージにドラッグ
パブリッシュ
パブリッシュを行うと、FLAファイルから、web配信するために必要なSWFファイルと、それをブラウザに表示させるためのHTMLファイルを生成することができる。ステージの何もないところをクリックし、プロパティインスペクタからパブリッシュの[設定]ボタンをクリックして、[パブリッシュ設定]ダイアログボックスを開いてみよう。
デフォルトでは、SWFファイルと、HTMLファイルを生成するための一般的な設定がされているので、必要な項目がなければ、基本的には何もしなくてかまわないが、今回のようにビットマップを取り込んでいる場合なら、パブリッシュの際、通常JPEG圧縮されるので、ファイルサイズと画質を見ながら最適な組み合わせを設定するとよいだろう(通常70~90程度)【図8】。設定が終わったら[パブリッシュ]ボタンをクリックすると、FLAファイルと同じ場所にSWFファイルとHTMLファイルが生成される【図9】。
【図8】[パブリッシュ設定]ダイアログボックスでJPEG画像の圧縮率を設定し、[パブリッシュ]ボタンをクリックする
【図9】デフォルトではFLAファイルと同じ名前でSWFファイルとHTMLファイルが作成される
次回につづく
サンプルをダウンロードする
[プロフィール] きたがわ・たかきよ●1972年8月生まれ。三重県出身。三重大学工学部卒業。大阪を拠点としてwebデザインを中心に活動中。著書に『Flash8デザインスクール for Win & Mac 』、『ネタ帳ビギナーズ FLASHテンプレート集 』。 http://www.f-l-a-v-o-r.com |