Flashのマスクを用いて静止画を効果的に見せる方法教えます
翻訳校正:村上雅章・野崎裕子
Flashを用いることで、ビットマップベースの静止画にインパクトのある視覚効果をつけることができる。本記事では、マスクアニメーションという手法を用いて静止画に動きをつける方法を紹介する。
いったん写真をステージ上に配置できたのであれば、キーフレームアニメーションに使用するためのレイヤーを用意する必要がある。まず、タイムラインパレット上にある、[レイヤー1]と書かれた部分をダブルクリックし、このレイヤーの名前を「Photo」に変更する。その後、マウスのポインタをPhotoレイヤーの24フレーム目に持って行く。そしてそれを選択した後、右クリックし、表示されたポップアップメニューから[キーフレームの挿入]オプションを選択する。これでタイムラインパレットは図Dのようになっているはずだ。
アニメーションの最後にキーフレームを挿入する
次のステップはPhotoレイヤーをロックすることだ。Flashのタイムラインによって1つのレイヤー上で動かせるオブジェクトは1つだけであるため、今回のようにマスキングオブジェクトを描画し、それを動かそうとする場合、ここでロックしておくことは重要である。Photoレイヤー上に誤ってマスクオブジェクトを直接描画した場合、あなたのアニメーションはうまく動作しないばかりか、Flashは何の警告メッセージも表示してくれないのだ。また、プロのFlash開発者たちは皆、すべてのステージオブジェクトをそれぞれ個別のレイヤー上に保持させることでアニメーションを作成している。このことは、保存をまめに行うことと同様に、習慣付けておくことが望ましい。Photoレイヤーのロック方法が判らない場合には下記の図Eを参照し、ロックボタンの位置を確認してほしい。
Photoレイヤーをロックする
タイムラインパレット上にある[レイヤーの追加]ボタンを押下し、先ほどと同じようにして新しいレイヤーの名前を「Mask」に変更する。このレイヤーが、すべてのアニメーションを実行する場所となる。これでタイムラインパレットは図Fのようになっているはずだ。
マスク用の新たなレイヤーを追加する
ここで、Flashのタイムラインパレット中のマスクがどのように機能するのかを説明しておこう。マスクレイヤー上で表示されるオブジェクトはすべて覗き窓のようなものとして機能し、それを通じて下のレイヤー上にあるオブジェクトが表示され、該当マスクレイヤー上のこういったオブジェクトの外側にある領域は下にあるレイヤーを覆い隠してしまうわけだ。もしも私の説明していることのイメージがよく把握できないという場合でも、すべてはすぐにはっきりするはずなので、読み進めてみてほしい。
それでは作業に戻ろう。タイムラインパレットに表示されているMaskレイヤーの1フレーム目をマウスでクリックして選択する。次に、左端にあるツールボックスから[矩形ツール]を選択する。そして[塗りのカラー]オプションから塗りつぶし色として赤を選択する。われわれが描画しようとしているものはマスクであるため、この矩形がどんな色であっても構わないものの、背景を黒にしていることから、視認性を考えると赤が適当だろう。また、[線のカラー]オプションが選択されていないことを確認しておく必要もある。このオプションが選択されていると、ステージ上に矩形を描画した際、囲み枠が描画されることになる。ツールボックスに馴染みのない方は図Gを参照してもらいたい。
ツールボックスから[矩形ツール]を選択した後、[塗りのカラー]で赤を選択する。[線のカラー]は選択しないようにする
- ホワイトペーパー
- 話題のタグ
文字にドロップシャドウの効果をつける--FirefoxとSafariのCSS対応
iPhoneにAdiumが載らない2つの理由
iPhone 3Gの節電術
マイクロソフトはIE 8で地雷を踏んだ?
マイクロソフト、Internet Explorer 8のベータ2をリリース
「iPhone」のパスコードロックに深刻な脆弱性--連絡先情報が読み取られる危険も
Windows XPのバックアップユーティリティについて知っておくべき10のこと
S・ウォズニアック氏:「エンジニアは自分の心に従って行動すべき」--IDFインタビュー
Firefox 3.1のHTML 5対応を検証--Canvas Text APIとCanvas Shadow API
グーグルが、無料社食をついに廃止?--真実はいかに
iPhoneからサーバにSSHログイン:TouchTerm
トップページにみる日本のウェブデザイン--表現したい人たちが集うMySpace
モジラ、「Firefox 3.1」でJavaScript実行を大幅に高速化
ZDNet Japan ホスティング特集
DELLが掲げる「新・仮想化アセスメントサービス」
「シンプル」&「低コスト」な運用管理
Webセキュリティ特集
Techno Exchange
APC SOLUTIONS FORUM 2008をレポート
ZDNet Japan Green IT
仮想化環境で求められるストレージの要件
セキュリティ対策レベルテスト公開!