Flashってどんなソフト?

01 図1:線の作成には、ペンツール、面の作成にはブラシツールや「矩形」ツールや「楕円」ツールを使用する。Flash 4からは線を面に変えることも可能になっている


02 図2:選択した面はドラッグで移動することができる。また、塗りのカラーの変更も簡単に行うことができる


03 図3:線の種類は3種類から選択できる。「スムーズ」を使うと描いた曲線をなめらかに補正してくれる。目的に応じて選択しよう


04 図4:Fireworksでテキストをアウトライン化してパス変形を行った。Fireworks 3では「パスとしてコピー」という機能が追加されている


05 図5:Fireworksでパスとしてコピーしたオブジェクトは、Flash 4で「編集」メニュー→「特殊ペースト」でパスのままペーストすることができる

06 図6:Fireworks 3のパスをFlash 4にパスの状態でペーストした。ペーストされたグラフィックは面の図形データとして扱われるので、ロゴやシンボルマークの利用に役立つだろう

07 図7:「挿入」メニュー→「新規シンボル」で図形データをシンボルを作成することができる。すでに作成したデータを選択して「挿入」メニュー→「シンボルに変換」することもできる

08 図8:作成したシンボルは「ライブラリ」パレットに登録される。シンボルの変更を行うとドキュメントにすぐ反映される

09 図9:これだけのボタンをドキュメントに配置しても、シンボルを利用すれば、ひとつ分のボタンのファイルサイズと変わらないほど小さくすることができる
 今やウェブ人口の90%近いシェアを獲得したFlash。昨年春に発表されたバージョン4では、MP3の採用などの改良が加えられ、多くのユーザーに支持されています。さらに、スクリプト機能の強化や、複雑なインターフェイスを構築できるようになっており、今後のウェブデザインにおける新しい可能性を多くもっています。今回はまだFlashを経験していない皆さんにFlashの基礎と応用を説明します。

独特な描画機能で、楽しくお絵描き
 Flashがウェブでシェアを獲得している理由のひとつに「ファイルサイズを軽くできる」ことが挙げられます。色数と面積にファイルサイズが左右されるビットマップデータ(GIFやJPEG)とは異なり、Flashが扱うグラフィックはドローデータとして数値で管理しています。従ってFlashではドローデータを作成することから始めなくてはなりません。
 Flashでの描画は、スマートスケッチ(Macromediaのプロダクトになる以前のソフトウエア)の頃から特殊な方法でデータを作成します(図1)。「ブラシ」ツールや「バケツ」ツールでの塗りつぶしはペイントソフトのような操作感覚ですが、Flashは作成したデータを線と面の数値で管理するベクトルデータの形式でもっているため、塗りつぶした面だけ移動させるなど、描画後のデータを自由に動かすことができます(図2〜6)。またブラシによっては、描画に自信のない人でも楽しめる、線をきれいに修正してくれるモードもあります。さらに、IllustratorやFireworks 3のパスを読み込んだり、カット&ペーストできます。

シンボルを理解しよう
 いくらファイルサイズの小さなドローデータでも、描画を重ねていけばファイルサイズは大きくなっていきます。とくにアニメーションでは、1フレームずつに描画を行うとファイルサイズは肥大してしまいます。これを回避するために同じグラフィックを何度も使用したり、効率的にアニメーションさせる機能としてFlashでは、描画したグラフィックを「シンボル」という形で登録することができます(図7)。
 登録したシンボルはひとつのドキュメント内で再使用しても、個別の位置情報や大きさ、色などの数値データ以外のグラフィックとしての情報をすでにシンボルがもっているので、ファイルサイズを劇的に小さくできるというメリットがあります。シンボルの種類は「グラフィック」、「ボタン」、「ムービークリップ」の3つがあります。また何度も使うグラフィックは必ずシンボルに登録することを前提として(図7)、グラフィックをパーツ別に描画していくこともFlashでは重要な考え方です。
 さらに、それぞれのシンボルは「入れ子」の構造にできます。ボタンのベースになるようなグラフィックは、先にグラフィックシンボルとして作成したものをボタンシンボルで再利用すると、ファイルサイズを小さくすることが可能ですし(図8)、変更があった場合にも、元のシンボルを変更すれば、関連するすべてのシンボルを一括更新できます。

● 今回の作例を見る ●



(C)2000 MdN Corporation All Rights Reserved.