Flash/ActionScript

月齢カレンダーを作成

幻想的な月の満ち欠けをリアルなアニメーションで表現し、Actionscriptを使用して今日の月の姿を表示する月齢カレンダーを作成します。

執筆者:渡辺 大介

月が美しい季節になりました。今日の月の満ち欠けを計算して表示する月齢カレンダーを作成します。
月の満ち欠けを表示する「月齢カレンダー」。
(.flaファイルはページの最後でダウンロードできます)

月の満ち欠けをアニメーションで表現する下準備

月の満ち欠けの美しさを表現します。今回は一からアニメーションを作成しましょう。

1. Flashの基本設定を行います。サイズを「400*300ピクセル」、背景を「#000000(黒)」、フレームレートを「30fps」に指定してください。

月の画像をダウンロード
2. 月の画像を用意します。ここからダウンロードしてください。
ダウンロードしたファイルを「ファイル>読み込み>ステージに読み込み」で、ステージに配置します。
配置したら整列ウィンドウを使用し、ステージを基準に上下・左右共に中央に整列してください。

シンボルに変換
3. 配置した月の画像をムービークリップに変換します。名前を「moon」、タイプを「グラフィック」としてください。

マスクレイヤーを作成
4. 月を配置したレイヤーを「moon」と名前を付けます。その上に「mask」という名前のレイヤーを作成してください。
レイヤー「mask」をマスクとして指定します。

円を描く
5. レイヤー「mask」に楕円ツールで塗りのみの正円を描きます。月の写真が200*200ピクセルなので、これをぴったり覆い隠す200*200ピクセルの円を描き、整列ウィンドウを使用してステージの上下・左右共に中央にくるように配置します。
このマスクレイヤーを使用して、月の写真に満ち欠けを表現していきます。

次のページではこの月にアニメーションをつけていきます。
  • 1
  • 2
  • 3
  • 5
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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