|
知識
2007.07.27
ワールド・デザイン計画
新しいデザインの構造 第9回
雑誌 STEP-BY-STEP 1997年15号 掲載
ワールド・デザイン計画
新しいデザインの構造 第9回
MSN娯楽番組をFlashで作る
STEP-1
［ファイル→新規］で新しいファイルを設定する。
 Tips1
作りたいムービーの画面サイズが決まっている場合には、［修正→ムービー］でサイズや背景などを設定しておいて、［初期設定値として保存］しておくと、次回からはそのサイズで画面が作られる。
Tips2
［ファイル→環境設定］で、［ツールのヒントを表示］をチェックすると、各ボタン等の名前がヒントとして表示される。
STEP-2
［ファイル→読み込み］で背景が像を読み込む。写真画像は、MacならPICT形式のほかGIFやJPEGが、WindowsならBMP形式がサポートされている。Macで素材を作って、WindowsでFlashを使う時などは、PhotoshopでBMP形式に保存すればよいだろう。
 Tips3
写真画像は、256色に原色したデーターよりも、フルカラーのままFlashに読み込んだほうが、ムービーの書き出しでsplファイルにしたときの圧縮率がいいようだ。
Tips4
他の機能として、バスにそってオブジェクトを回転させたり、移動させたりできるといったことがあるが、この場合も、動かしたいオブジェクト以外の物が同じレイヤーの中にあると動かなくなってしまうことがあるので、レイヤーを多用しなくてはならないことになる。レイヤーが多くなってくると、いちいち［他を隠す］［すべてを表示］を繰り返して目当てのレイヤーを探さなくてはならないので、必ず名前をつけておくことをおすすめする。既にあるレイヤーの名前を変更するには、［プロパティ］を選ぶと変更できる。
STEP-3
上に重なる画像を読み込む。違った大きさの画像を重ね合せる時は、レイヤーにしておくと［挿入→レイヤー］または、フレーム表示設定のポップアップメニューでレイヤーっを挿入する。レイヤーに名前をつけて［OK］を押す。
Tips5
回線の状況やプロバイダ−によっても異なると思うが、Flashのムービーサイズを極力小さくするには、写真画像のサイズを小さくすることが一番効果的だ。特にパラパラ入れ替わったり、動く写真画像はサイズが少しでも小さいほうがよい。ここでは、背景の画像と変わる部分の画像とを分けることで容量を節約をしている。
いろいろ試した結果、このようなムービーを作るとき、通常のホームページの背景と同様、一部の画像をJPEGやGIFなどにして組み合せて構成するよりも、Flashですべて制作したほうが軽くできるようだ。
STEP-4
2つめのレイヤーに画像を読み込む。読み込んだ画像は、レイヤーの右側のアイコンが鉛筆マークになっているレイヤー（カレントレイヤー）に入る。新規にレイヤーを作って、すぐにそのまま画像を読み込めばそのレイヤーに入るが、他のレイヤーを編集した後などでレイヤーが「指」のマーク（ノーマルレイヤー）になっていると、そのレイヤーに含まれている画像を消去することはできるが、読み込みやペーストができない。
Tips6
同じサイズで同じ場所に入れたい写真画像などの場合、予め写 真画像のファイル名を「○○1」「○○2」「○○3」等というふうに連番でつけておくと、下のダイアログが現れる。これで「はい」お押すと連番の画像が一度で順番に読み込まれるので便利だ。「いいえ」を押すとその画像のみが読み込まれる。
STEP-5
画像の場所を合せる。上の画像の位置が少しずれているので、［複数レイヤー編集］ボタンを使用していっぺんに場所を合せる。［複数レイヤー編集］を押すと、マーカーが表示されるので、動かしたい範囲のフレームを選ぶ。動かしたくないbackのレイヤーはロックしておき、全てを選択して移動して合わせる。
 Tips7
必要とあれば拡大表示して合わせる。ホップアップメニューからは800％までしか選べないが、数字を打ち込めば2000%まで表示できる。ただし気をつけなければならないのは、拡大表示で合せても100%にするとずれて見えたり、合って見えるのにsplファイルに書き出すとずれて見えることがあることだ。時々ムービーの書き出しを行って、確認しながら作業したほうがよいだろう。
Tips8
［表示→アウトライン］でアウトライン表示にして作業することもできる。マーカーの表示が利いていればポインターが選んでいる以外のフレームはアウトライン表示される。［複数レイヤー編集］ボタンの左にあるのは［オニオンスキン］ボタンだ。マーカーが表示が利いていればポインターが選んでいる以外のフレームはオニオンスキン表示される。
STEP-6
［複数レイヤー編集］ボタンをもう一度押して解除し、フレーム間隔と増やす（残念ながら、フレームを増やす作業には複数フレームの編集が利かない）。ショートカット（コマンド-5）でフレームを増やす以外にも、shiftキーを押しながら、たとえば30フレームまで選択してからフレームの挿入を選べば、1フレーム目の画像のみを30フレームまで増やすことができる。以降のフレームについても、同じ要領でフレームを増やしていく。
Tips9
フレームを増やすコマンドにはショートカットもついているので、それを使うのが一番早いと思うが、フレームの編集のなかには、フレームを選んだ状態でマウスを押すと出るポップアップメニューからしか実行できないコマンドも多い。そのため、上のメニューから選ぶよりも。ポップアップメニューから行うようにしたほうが便利だろう。
STEP-7
back画像のフレームを挿入する。今の状態だとbackレイヤーは1フレーム目しか入ってないので、ポインターを動かすと2フレーム目以降はバックが黒くなってしまう。back画像のレイヤーを上の画像の入っている最後のフレームまで選んで、フレームを挿入する。
Tips10
初めに説明したムービープロパティでフレームレートの設定ができるのだが、Flashの再生スピードは再生されるマシンのパフォーマンスによって異なるので正確には分からない。複数のオブジェクトをいっぺんに動かすと、同じファイル上の再生スピードがその部分だけ遅くなることもあるので、レートはあくまでも目安と考えたほうがよいだろう。
STEP-8
ムービーを書き出す。今まで作ったファイルは、そのまま保存するとflaファイルとして保存される（2Jになる前はspaという形式で保存を行った）。これは、編集可能な状態のファイルで、後で直すためには必ずとっておかなくてはならない。
ネットにのせるファイルは編集不可能な状態のsplファイル（FutureSplash Player形式/2J以前のバージョンの標準的な形式）として書き出す、両形式ともプラグインが必要になるが、どちらの形式にするかはサーバー管理者に問い合わせいただきたい。
このファイル形式の違いは、swfファイルでは、Flashで描いたりIllustratorやFreeHand などで描いたイラストなどのベジェ曲線データが格段に軽くなる点などにあるようだ。写真データのみの場合、重さはほとんど変わらない。書き出しのダイアログのJPEG画質の数字が画像圧縮レベルになっている。当社では通常25位で書き出してsplファイルの重さをみて調整している。
以上が、Flash2Jで写真データを使ったムービーを作るための簡単な作り方だ。もう少し複雑なものを作っていく時、データーを軽くするためのポイントは、シンボルパレットを上手に使っていることにあるようだ。今回は写真画像を使ったムービーの作り方をサンプルとしたが、Flashはswf形式などを使うとベジェ曲線データを大変軽くすることができる。やはり、本来得意とするのはベジェ曲線のデータであろうと思う（Illustratorデータでは、レイヤーもそのまま読み込むことができる）。
だたし写真画像も、以前は透明GIF形式の読み込みなどできなかったが、2Jからビットマップを分解することで「切り抜き」が可能になった。シンボルの作成を応用すると、ボタンもムービーと同じように作ることができる。
というわけで皆さんも是非インターネットでMSNにアクセスしていただきたい。アルベデルチ。
|
