Flash/Flashの基本

Flashで手軽に作れる、ページめくりアニメ(3ページ目)

誰もが一度は挫折した、フラッシュアニメの難関ページをめくるアニメをリアルに作成します。簡単に作成できる3つのコツを伝授しますので、この機会にマスターしてはいかがでしょうか?

執筆者:渡辺 大介

シェイプトゥイーンでページをめくるアニメーションを作成

レイヤーを作成
1. 一番上に新規にレイヤーを作成します。新しく作成したレイヤーの名前を「page」、初期のレイヤーを「book」としてください。

同じ位置にペースト
2. レイヤー「book」の一番上にあるムービークリップをコピーし、レイヤー「page」で同じ位置にペーストを行ってください。

分解
3. ペーストしたムービークリップを選択し、上部メニューから「修正」>「分解」を選び、ムービークリップをシェイプに分解します。

キーフレームを作成
4. レイヤー「page」の10、11、35フレーム目をそれぞれ右クリックし、キーフレームの作成を行ってください。

レイヤーを非表示に
5. ここで作業を分かりやすくするためにレイヤー「book」を非表示にします。

補足ですが、Flash CS3を使用している場合、レイヤー非表示でパブリッシュすると非表示のままになってしまうので注意が必要です。

シェイプを削除
6. レイヤー「page」の1フレーム目と10フレーム目で右側のページを削除してください。

シェイプを削除
7. 同様に、11フレーム目、35フレーム目の左側のページを削除してください。

自由変形ツールで並行四辺形を作成
8. 10フレーム目に移動します。自由変形ツールで図のように中央に向けて幅を狭くし、左側の面を上にややずらして平行四辺形に変形させます。

グラデーションを設定
9. グラデーションを調整します。画面左から光が当たっているとすると、ページが頂点に達する前にだんだん暗くなっていくはずです。グラデーションを灰色(#CCCCCC)、濃い灰色(#999999)、灰色(#CCCCCC)としてください。

反対側に変形
10. 11フレーム目に移動します。先程と反対に右側の面を上にややずらした平行四辺形に変形します。

グラデーションを設定
11. グラデーションを調整します。頂点から逆側に向かうと明るくなるはずです。そこで明るい灰色(#EDEDED)、灰色(#DFDFDF)、白(#FFFFFF)というグラデーションを設定しました。

シェイプトゥイーンを設定
12. 1~10フレーム目の間と、11~35フレーム目の間ににシェイプトゥイーンを設定します。1~10の間には「イージング:-100イン」を、11~35の間には「イージング:100アウト」を指定してください。

これでページがめくられるアニメーションは完成です。リアルなアニメーションは作成できましたか?

完成したファイルをダウンロード

今回作成したページのように、光の明暗を利用するとフラッシュアニメーションでもかなり繊細なアニメーションを再現することができます。もちろん3Dアニメーションや実写には及びませんが、特徴をデフォルメして本物よりリアルな偽物を作成することは可能かもしれません。前ページで説明した3つのコツを利用して、リアルなフラッシュアニメを作成していきましょう。
【編集部おすすめの購入サイト】
楽天市場で Flash 関連の書籍を見るAmazon で Flash 関連の書籍を見る
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます