Flashのマスクを用いて静止画を効果的に見せる方法教えます

文:John Lee(Special to TechRepublic) 翻訳校正:村上雅章・野崎裕子
2008-03-05 08:00:00
  • このエントリーをはてなブックマークに追加
最新特集【一覧】

 Flashファイルとアプリケーションの組み合わせがウェブでよく用いられている。その理由の1つとして、ベクトルベースのグラフィックスとActionScriptというスクリプティング言語を組み合わせることで、軽量で、迅速にロードでき、ほとんど無限とも言える可能性を持ったインターラクティブなファイルを作成できるようになるという点を挙げることができる。

 しかし、FlashでJPEGやPNG、GIFといったビットマップベースのグラフィックスに視覚効果をつけたいという場合にはどうすればよいのだろうか?こういった重いグラフィック要素を使用することでファイルサイズが増加するため、画面上のビットマップグラフィックスを処理するという時間的な制約を乗り越えられない場合、あなたの視覚効果も鈍重なものになるということは事実である。しかし、こういったことに気を遣うことなく、素晴らしい効果を生み出す手法がある。それは、ビットマップグラフィックスにマスクを使用することだ。

 ベクトル形状のマスクをFlash CS3の写真要素上で動かすことで、こういった写真要素に命を吹き込み、躍動感を演出することがどれほど簡単であるのかを見てもらおうと思う。Flash CS3を持っていないという方であっても、機能制限のない30日間試用版をAdobeのサイトからダウンロードすることができる。

ActionScript

 まず、Flash CS3を起動し、[ファイル]メニューから[新規]を選択する。表示されたダイアログボックスから[Flashファイル(AS 3.0)]という「タイプ」を選択する。この例ではActionScriptをいっさい使用しないものの、あなたがFlashにはまり、後でActionScriptを使いたくなった時のために、ActionScriptの最新版を用いるファイルタイプを選んでおこう。

 この時点で、図Aのような画面が表示されているはずだ。

図A 図A Flash CS3ワークスペースのデフォルトレイアウト

 とりあえずファイルを保存しておこう。ファイルを作成した場合には、どのようなプログラムのためのものであろうとも、とにかくすぐにそのファイルを保存するよう、私はいつも人々に奨励している。そうすることで、作業を保存するという行為が億劫でなくなり、数分ごとに[Ctrl]+Sを押下するという習慣もつけることができるようになる。

 特にそうする理由がない限り、私は白い背景で視覚効果を演出したりはしない。あまりにも地味だからだ。黒い背景にすることで、われわれのマスクアニメーションはもう少し効果的なものになるはずだ。このため、画面の一番下にある[プロパティ]パレットの[背景]カラーボックスをクリックし、黒のスウォッチを選択する。

 次に、[プロパティ]パレットの[フレームレート]フィールドを選択し、値を12から24に変更する。ほとんどの映画でも1秒あたり24コマというフレームレートが採用されているため、24にすることで、アニメーションは人間の目で見てスムーズなものとなるはずだ。また、今日における多くのコンピュータは、こういったフレームレートを苦もなく扱えるようになっているはずだ。図Bは、こういった変更を加えた後の[プロパティ]パレットである。

図B 図B Flashムービーの背景を黒にし、フレームレートを1秒あたり24フレーム(24fps)にする

 ここで、ステージ上に配置する写真が必要となる。[ファイル]メニューから[読み込み]を選択し、そこから[ステージに読み込み]オプションを選択する。表示されたダイアログボックスにおいて、ディスプレイの解像度(72dpi)に見合ったJPEGファイルをあなたのハードディスクから選ぶ。そして[読み込み]をクリックすると、写真がステージの中央に配置される。

 ディスプレイの解像度に見合ったJPEGファイルを持ち合わせていないという場合、Stock.xchngにアクセスし、無償で提供されている数多くの写真から好きなものを選んでダウンロードすることができる。これでステージは図Cのようになっているはずだ。

図C 図C JPEGファイルをステージ上に読み込む

  • 新着記事
  • 特集
  • ブログ