Flashのマスクを用いて静止画を効果的に見せる方法教えます
翻訳校正:村上雅章・野崎裕子
Flashを用いることで、ビットマップベースの静止画にインパクトのある視覚効果をつけることができる。本記事では、マスクアニメーションという手法を用いて静止画に動きをつける方法を紹介する。
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のような画面が表示されているはずだ。
Flash CS3ワークスペースのデフォルトレイアウト
とりあえずファイルを保存しておこう。ファイルを作成した場合には、どのようなプログラムのためのものであろうとも、とにかくすぐにそのファイルを保存するよう、私はいつも人々に奨励している。そうすることで、作業を保存するという行為が億劫でなくなり、数分ごとに[Ctrl]+Sを押下するという習慣もつけることができるようになる。
特にそうする理由がない限り、私は白い背景で視覚効果を演出したりはしない。あまりにも地味だからだ。黒い背景にすることで、われわれのマスクアニメーションはもう少し効果的なものになるはずだ。このため、画面の一番下にある[プロパティ]パレットの[背景]カラーボックスをクリックし、黒のスウォッチを選択する。
次に、[プロパティ]パレットの[フレームレート]フィールドを選択し、値を12から24に変更する。ほとんどの映画でも1秒あたり24コマというフレームレートが採用されているため、24にすることで、アニメーションは人間の目で見てスムーズなものとなるはずだ。また、今日における多くのコンピュータは、こういったフレームレートを苦もなく扱えるようになっているはずだ。図Bは、こういった変更を加えた後の[プロパティ]パレットである。
Flashムービーの背景を黒にし、フレームレートを1秒あたり24フレーム(24fps)にする
ここで、ステージ上に配置する写真が必要となる。[ファイル]メニューから[読み込み]を選択し、そこから[ステージに読み込み]オプションを選択する。表示されたダイアログボックスにおいて、ディスプレイの解像度(72dpi)に見合ったJPEGファイルをあなたのハードディスクから選ぶ。そして[読み込み]をクリックすると、写真がステージの中央に配置される。
ディスプレイの解像度に見合ったJPEGファイルを持ち合わせていないという場合、Stock.xchngにアクセスし、無償で提供されている数多くの写真から好きなものを選んでダウンロードすることができる。これでステージは図Cのようになっているはずだ。
JPEGファイルをステージ上に読み込む
- 0人の推薦記事
- 2人がクリップ
-
ソーシャルブックマーク(-)
- トラックバック(0)
- 今日のトップ記事
- 2日前
- 4日前
- 6日前
- 7日前
- ホワイトペーパー
- 読者投票
- 話題のタグ
MS、Vistaとの互換性をチェックできる「Compatibility Center」リリースへ
「似非」SOAを見破る10の方法
Firefox 3のアドオンやテーマ管理を容易にする
openSUSE 11.0を試してみた
フォトレポート:世界各国の優秀な技術者がパリに集結--Imagine Cup 2008世界大会
バッチ処理でデータベース活用:4つの課題と5つの解決ポイント
Rubyでどう書く?:RubyでWord文書を作成する
「未来の、その先」をどう提言していくか
今知るべき仮想化情報
ZDNet Japan Green IT
Techno Exchange
DELL連載第4回〜「Microsoft System Center」